/* Reaver — editorial photography and contract guide, October 2026 */
.hero { background: linear-gradient(115deg,#fffefa 5%,#f3f4ed 76%,#e7ecdf); padding: 68px 0 86px; }
.hero::before { display:none; }
.hero-grid { gap:64px; grid-template-columns:1.08fr 1fr; }
.hero h1 { font-size:clamp(44px,4.5vw,66px); }
.human-hero { position:relative; padding:0 0 30px 16px; }
.hero-portrait { margin:0; position:relative; aspect-ratio:4/4.6; border-radius:140px 24px 24px 24px; overflow:hidden; box-shadow:0 28px 60px #263b2420; background:#dce5d7; }
.hero-portrait img { width:100%; height:100%; object-fit:cover; display:block; }
.hero-portrait figcaption { position:absolute; right:16px; top:16px; color:#fff; background:#1720168c; padding:3px 8px; border-radius:20px; font-size:9px; }
.photo-caption { position:absolute; bottom:0; left:-18px; right:24px; display:flex; gap:16px; align-items:center; padding:24px; border:1px solid #fff; border-radius:18px; background:#fffefaf2; box-shadow:0 14px 44px #17201616; backdrop-filter:blur(12px); }
.photo-caption strong { display:block; font-size:16px; line-height:1.4; }
.photo-caption div>span { display:block; font-size:13px; color:var(--muted); margin-top:4px; }
.caption-icon { flex-shrink:0; display:grid; place-items:center; height:48px; width:48px; background:#edf1e6; border-radius:50%; color:var(--forest-600); }
.caption-icon svg,.send-icon svg,.guide-security svg,.phone-demo svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.5; }
.portrait-tag { position:absolute; right:-16px; bottom:155px; padding:11px 16px; border-radius:7px; background:var(--forest-950); color:var(--cream); font-size:11px; letter-spacing:.03em; box-shadow:0 8px 22px #17201622; transform:rotate(-3deg); }
.contract-guide { background:var(--paper); position:relative; }
.guide-heading { display:grid; grid-template-columns:1.1fr 1fr; gap:70px; align-items:end; margin-bottom:46px; }
.guide-heading h2 { margin-bottom:0; }
.guide-intro { max-width:450px; padding-bottom:5px; }
.guide-intro p { color:var(--muted); font-size:16px; margin:16px 0 0; }
.bank-label { display:inline-flex; align-items:center; gap:9px; font-size:10px; letter-spacing:.12em; font-weight:700; }
.bank-label>span { height:8px; width:8px; border-radius:50%; background:#cf163d; }
.guide-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; list-style:none; padding:0; margin:0; }
.guide-step { padding:26px 24px 0; background:linear-gradient(140deg,#f5f5ef,#ecefe5); border:1px solid #e1e6da; border-radius:24px; overflow:hidden; transition:box-shadow .3s,transform .3s; }
.guide-step:hover { box-shadow:0 18px 42px #17201612; }
.guide-step-top { display:flex; align-items:center; justify-content:space-between; }
.guide-step-top>span:last-child { font-size:9px; letter-spacing:.13em; font-weight:700; color:var(--muted); }
.guide-number { display:grid; place-items:center; width:40px; height:40px; border-radius:50%; border:1px solid #becbb4; color:var(--forest-600); font-family:var(--serif); font-size:19px; }
.guide-step h3 { font-family:var(--serif); font-size:25px; line-height:1.25; margin:20px 0 10px; }
.guide-step>p { font-size:13px; color:var(--text); min-height:65px; margin:0 0 26px; }
.phone-demo { max-width:260px; height:355px; margin:0 auto; border:6px solid #243023; border-bottom:0; border-radius:29px 29px 0 0; background:#fff; position:relative; overflow:hidden; box-shadow:0 8px 28px #17201620; font-family:var(--sans); text-align:left; color:#282c28; }
.phone-camera { position:absolute; z-index:1; top:7px; left:50%; transform:translateX(-50%); width:57px; height:10px; background:#243023; border-radius:20px; }
.app-red { background:linear-gradient(120deg,#d90935,#b30e31); color:white; padding:29px 16px 20px; min-height:108px; }
.app-red small { display:block; font-size:9px; opacity:.85; margin-bottom:8px; }
.app-red>strong { display:block; font-size:14px; line-height:1.4; font-weight:600; }
.app-body { padding:15px 12px; font-size:10px; }
.app-body>b { font-size:11px; }
.app-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin:10px 0; }
.app-grid>div { min-height:48px; display:flex; align-items:center; flex-direction:column; justify-content:center; gap:4px; padding:7px 2px; border:1px solid #eee; border-radius:9px; background:white; }
.app-grid svg { width:19px; height:19px; color:#c71437; }
.app-grid span { font-size:8px; }
.app-highlight { position:relative; border:2px solid #4b6b3d!important; background:#eef4e8!important; color:#273d22; box-shadow:0 0 0 3px #597b3a0d; }
.app-highlight>i { position:absolute; right:-7px; top:-9px; border:2px solid white; display:grid; place-items:center; border-radius:50%; width:23px; height:23px; background:#42603b; color:white; font-size:10px; font-weight:bold; font-style:normal; }
.app-soft { color:#7a8277; background:#f6f6f2; padding:9px; border-radius:8px; font-size:9px; }
.app-wide { display:flex; align-items:center; gap:9px; padding:13px 9px; border:1px solid #e8e8e3; border-radius:9px; margin:12px 0; font-size:10px; }
.app-wide svg { width:19px; height:19px; flex-shrink:0; }
.app-faded { color:#858a81; }
.app-contract { border-left:3px solid #5480bf; padding-left:10px; font-size:10px; }
.app-contract small { display:block; font-size:8px; margin-top:2px; color:#81867d; }
.app-contract hr { border:0; height:1px; background:#eceee8; margin:10px 0; }
.app-lines { display:grid; gap:5px; margin:8px 0; }
.app-lines i { height:4px; width:75%; background:#eceee8; border-radius:2px; }
.app-lines i:last-child { width:55%; }
.app-services { color:#2866a5; font-size:10px; margin-top:17px; }
.app-services span { float:right; }
.app-other { padding:8px 0; font-size:8px; border-top:1px solid #eee; }
.guide-disclaimer { font-size:11px; color:var(--muted); margin:16px 0 32px; text-align:center; }
.guide-send { display:grid; grid-template-columns:1.2fr 1fr; gap:32px; align-items:center; background:var(--forest-950); color:white; padding:34px; border-radius:22px; background-image:radial-gradient(ellipse at 90% 0%,#42603b66,transparent 70%); }
.send-title { display:flex; gap:18px; align-items:flex-start; }
.send-icon { display:grid; place-items:center; flex:0 0 46px; height:46px; border-radius:12px; border:1px solid #ffffff30; color:#b8c8ae; }
.send-title .eyebrow { font-size:9px; }
.send-title h3 { font-family:var(--serif); font-size:26px; line-height:1.25; font-weight:500; margin:10px 0; }
.send-title p { margin:0; color:#c6d0c1; font-size:12px; line-height:1.75; }
.send-actions { display:flex; flex-direction:column; align-items:center; gap:15px; }
.guide-whatsapp { background:#e8eddb; color:#21301e; padding:18px 20px; line-height:1.4; font-size:12px; text-align:center; width:100%; }
.guide-whatsapp:hover { background:#fff; box-shadow:0 9px 25px #0002; }
.guide-help { font-size:11px; color:#d9e2d4; text-underline-offset:4px; }
.guide-security { display:flex; justify-content:center; align-items:center; gap:7px; font-size:11px; color:var(--muted); margin:18px 0 0; }
.guide-security svg { width:14px; height:14px; flex-shrink:0; }
.care-photo { margin:0; position:relative; border-radius:24px 100px 24px 24px; overflow:hidden; min-height:470px; background:#e1e6db; align-self:stretch; }
.care-photo img { display:block; width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
.care-photo figcaption { position:absolute; bottom:0; left:0; right:0; padding:64px 28px 25px; color:white; background:linear-gradient(transparent,#172016ba); font-family:var(--serif); font-size:26px; }
.care-photo small { display:block; font-family:var(--sans); font-size:9px; margin-top:7px; color:#e8eade; }
.button:focus-visible,.guide-help:focus-visible { outline:3px solid #b49a56; outline-offset:5px; }
@media(hover:hover) { .hero-portrait img,.care-photo img { transition:transform 1.2s cubic-bezier(.2,.65,.3,1); } .hero-portrait:hover img,.care-photo:hover img { transform:scale(1.035); } }
@media(max-width:1080px) { .hero-grid { gap:38px; } .guide-step { padding:22px 16px 0; } .guide-step h3 { font-size:23px; } .guide-send { grid-template-columns:1fr; } .send-actions { align-items:flex-start; } .guide-whatsapp { width:auto; } }
@media(max-width:860px) { .hero-grid { grid-template-columns:1fr; } .human-hero { width:min(100%,510px); margin:auto; padding-left:15px; } .hero-portrait { max-height:520px; } .guide-heading { grid-template-columns:1fr; gap:20px; } .guide-intro { max-width:550px; } .guide-grid { gap:12px; } .guide-step h3 { font-size:20px; } .guide-step>p { min-height:105px; } .phone-demo { height:340px; } .app-body { padding:12px 7px; } .app-grid span { font-size:7px; } .app-red { padding-inline:10px; } .app-red>strong { font-size:12px; } .care-photo { min-height:440px; } }
@media(max-width:620px) { .hero { padding-top:40px; } .hero h1 { font-size:43px; } .hero-grid { gap:40px; } .hero-portrait { border-top-left-radius:100px; aspect-ratio:4/4.3; } .photo-caption { left:0; right:0; padding:18px; gap:12px; } .photo-caption strong { font-size:14px; } .photo-caption div>span { font-size:11px; } .portrait-tag { right:-4px; bottom:140px; font-size:10px; } .guide-heading { margin-bottom:28px; } .guide-grid { grid-template-columns:1fr; gap:22px; } .guide-step { padding:24px 24px 0; } .guide-step h3 { font-size:28px; } .guide-step>p { min-height:0; font-size:15px; margin-bottom:24px; } .phone-demo { height:355px; max-width:270px; } .app-body { padding:15px 14px; } .app-red { padding:29px 16px 20px; } .app-red>strong { font-size:14px; } .app-grid span { font-size:9px; } .guide-step-top>span:last-child { font-size:10px; } .guide-send { padding:26px 20px; gap:24px; } .send-icon { display:none; } .send-title h3 { font-size:29px; } .send-title p { font-size:14px; } .guide-whatsapp { width:100%; font-size:13px; padding:16px 12px; } .send-actions { align-items:center; } .guide-help { text-align:center; line-height:1.7; } .guide-security { align-items:flex-start; text-align:center; } .care-photo { min-height:370px; border-top-right-radius:70px; } }
@media(prefers-reduced-motion:reduce) { .hero-portrait img,.care-photo img { transition:none; } .js .reveal { opacity:1; transform:none; } }