/* VAU AGENCY — US edition. Editorial light design, v1 (2026-08-24). */
:root{
  --paper:#F7F4EE; --paper-2:#EFEAE0; --ink:#12192B; --ink-2:#3C4458; --ink-3:#6B7286;
  --orange:#FF5A1F; --orange-soft:#FFE9DE; --navy:#101828; --line:#E2DCCE;
  --serif:"Fraunces",Georgia,serif; --sans:"Plus Jakarta Sans",-apple-system,"Segoe UI",sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,monospace;
  --sec:clamp(4rem,3rem + 4vw,7.5rem);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
.wrap{max-width:1140px;margin:0 auto;padding:0 24px}
.mono{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.mono .dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--orange);margin-right:8px;vertical-align:1px}

/* Nav */
.nav{position:sticky;top:0;z-index:60;background:rgba(247,244,238,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;padding:16px 0}
.logo{font-weight:800;font-size:1.35rem;letter-spacing:.02em;color:var(--ink);text-decoration:none}
.logo span{color:var(--orange)}
.nav-links{display:flex;gap:28px;align-items:center}
.nav-links a{color:var(--ink-2);text-decoration:none;font-size:.92rem;font-weight:600}
.nav-links a:hover{color:var(--ink)}
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--ink);color:var(--paper);font-weight:700;padding:14px 26px;border-radius:100px;text-decoration:none;font-size:.98rem;border:none;cursor:pointer;transition:transform .15s ease,background .15s ease}
.btn:hover{background:var(--orange);transform:translateY(-1px)}
.btn.orange{background:var(--orange)}
.btn.orange:hover{background:var(--ink)}
.btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--paper);transform:none}
.btn.sm{padding:10px 20px;font-size:.88rem}

/* Hero */
.hero{padding:calc(var(--sec)*.9) 0 var(--sec);position:relative;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
h1{font-family:var(--serif);font-weight:600;font-size:clamp(2.6rem,1.6rem + 3.6vw,4.4rem);line-height:1.06;letter-spacing:-.015em}
h1 em{font-style:italic;color:var(--orange)}
.hero p.lead{margin:26px 0 34px;font-size:1.15rem;color:var(--ink-2);max-width:33em}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.hero-note{margin-top:18px;font-size:.85rem;color:var(--ink-3)}
.hero-note b{color:var(--ink)}

/* Browser-frame cards */
.stack{position:relative;min-height:460px}
.shot{position:absolute;background:#fff;border-radius:12px;box-shadow:0 24px 60px rgba(18,25,43,.18),0 2px 8px rgba(18,25,43,.08);overflow:hidden;border:1px solid var(--line)}
.shot .bar{display:flex;align-items:center;gap:6px;background:#F1EDE4;padding:9px 12px;border-bottom:1px solid var(--line)}
.shot .bar i{width:9px;height:9px;border-radius:50%;background:#D8D2C4;display:block}
.shot .bar .url{font-family:var(--mono);font-size:.62rem;color:var(--ink-3);margin-left:8px;background:#fff;border-radius:5px;padding:2px 10px}
.shot img{width:100%;height:auto}
.shot.s1{width:62%;top:0;left:0;transform:rotate(-2deg);z-index:3}
.shot.s2{width:55%;top:24%;right:0;transform:rotate(1.6deg);z-index:2}
.shot.s3{width:48%;bottom:0;left:12%;transform:rotate(-1deg);z-index:1}

/* Proof bar */
.proof{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--paper-2)}
.proof .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding:34px 24px}
.proof .p-item b{display:block;font-family:var(--serif);font-size:2rem;font-weight:600;line-height:1.1}
.proof .p-item span{font-size:.85rem;color:var(--ink-3)}

/* Sections */
section{padding:var(--sec) 0}
.sec-head{max-width:620px;margin-bottom:56px}
h2{font-family:var(--serif);font-weight:600;font-size:clamp(1.9rem,1.3rem + 2vw,2.9rem);line-height:1.12;letter-spacing:-.01em;margin:14px 0 12px}
h2 em{font-style:italic;color:var(--orange)}
.sec-head p{color:var(--ink-2);font-size:1.05rem}

/* Case */
.case{background:var(--navy);color:#fff;border-radius:24px;padding:clamp(2.2rem,4vw,4rem);display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.case .mono{color:#8b93a7}
.case h3{font-family:var(--serif);font-weight:600;font-size:clamp(1.6rem,1.2rem + 1.6vw,2.4rem);line-height:1.15;margin:14px 0 16px}
.case h3 em{font-style:italic;color:#FFB38A}
.case p{color:#c6cddc;font-size:1rem}
.case .num{font-family:var(--serif);font-size:clamp(4rem,8vw,7rem);font-weight:600;color:var(--orange);line-height:1}
.case .num small{display:block;font-family:var(--sans);font-size:.9rem;color:#8b93a7;font-weight:500;margin-top:8px;letter-spacing:0}

/* Services */
.svc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;background:var(--line);border:1px solid var(--line);border-radius:18px;overflow:hidden}
.svc{background:var(--paper);padding:38px 34px;transition:background .2s}
.svc:hover{background:#fff}
.svc svg{width:30px;height:30px;stroke:var(--orange);margin-bottom:16px}
.svc h3{font-size:1.15rem;font-weight:700;margin-bottom:8px}
.svc p{color:var(--ink-2);font-size:.95rem}

/* Pricing */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.price{background:#fff;border:1px solid var(--line);border-radius:18px;padding:34px 30px;display:flex;flex-direction:column;position:relative}
.price.hot{border:2px solid var(--orange);box-shadow:0 18px 44px rgba(255,90,31,.12)}
.price .tag{position:absolute;top:-13px;left:28px;background:var(--orange);color:#fff;font-family:var(--mono);font-size:.65rem;letter-spacing:.12em;padding:5px 12px;border-radius:100px}
.price h3{font-size:1.05rem;font-weight:700;color:var(--ink-3)}
.price .amt{font-family:var(--serif);font-size:2.6rem;font-weight:600;margin:6px 0 4px}
.price .per{font-size:.82rem;color:var(--ink-3);margin-bottom:18px}
.price ul{list-style:none;margin:0 0 26px;flex:1}
.price li{padding:7px 0 7px 26px;position:relative;font-size:.92rem;color:var(--ink-2);border-bottom:1px dashed var(--line)}
.price li:last-child{border:none}
.price li::before{content:"";position:absolute;left:2px;top:14px;width:12px;height:7px;border-left:2px solid var(--orange);border-bottom:2px solid var(--orange);transform:rotate(-45deg)}
.addons{margin-top:22px;text-align:center;color:var(--ink-3);font-size:.9rem}
.addons b{color:var(--ink)}

/* Process + demo promise */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;counter-reset:step}
.step{background:#fff;border:1px solid var(--line);border-radius:18px;padding:32px 28px}
.step .n{font-family:var(--serif);font-size:2.6rem;color:var(--orange);font-weight:600;line-height:1;margin-bottom:14px}
.step h3{font-size:1.1rem;margin-bottom:8px}
.step p{color:var(--ink-2);font-size:.93rem}
.promise{background:var(--orange-soft);border-radius:24px;padding:clamp(2.2rem,4vw,3.6rem);display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center}
.promise h2{margin-top:8px}
.promise ul{list-style:none;margin:22px 0 30px}
.promise li{padding:9px 0 9px 34px;position:relative;font-size:1rem;color:var(--ink-2)}
.promise li::before{content:"";position:absolute;left:4px;top:15px;width:14px;height:8px;border-left:2.5px solid var(--orange);border-bottom:2.5px solid var(--orange);transform:rotate(-45deg)}
.promise .side{background:#fff;border-radius:18px;padding:34px;text-align:center;box-shadow:0 18px 44px rgba(18,25,43,.08)}
.promise .side h3{font-size:1.25rem;margin-bottom:8px}
.promise .side p{color:var(--ink-3);font-size:.9rem;margin-bottom:22px}

/* Reviews */
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.rev{background:#fff;border:1px solid var(--line);border-radius:18px;padding:30px}
.rev .stars{display:flex;gap:3px;margin-bottom:14px}
.rev .stars svg{width:16px;height:16px;fill:var(--orange)}
.rev p{font-size:.95rem;color:var(--ink-2);font-style:italic}
.rev .who{margin-top:16px;font-weight:700;font-size:.9rem}
.rev .who small{display:block;font-weight:500;color:var(--ink-3)}

/* CTA band + footer */
.band{background:var(--navy);color:#fff;border-radius:24px;text-align:center;padding:clamp(3rem,5vw,4.5rem)}
.band h2{color:#fff}
.band p{color:#c6cddc;margin:14px auto 30px;max-width:42em}
footer{border-top:1px solid var(--line);padding:56px 0 40px;color:var(--ink-3);font-size:.9rem}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:36px;margin-bottom:36px}
footer h3{font-size:.85rem;color:var(--ink);margin-bottom:12px;letter-spacing:.04em}
footer ul{list-style:none}
footer li{margin-bottom:8px}
footer a{color:var(--ink-3);text-decoration:none}
footer a:hover{color:var(--orange)}
.foot-bottom{border-top:1px solid var(--line);padding-top:22px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:.82rem}

/* Sticky bottom CTA */
.sticky-cta{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);z-index:70;background:var(--ink);color:#fff;border-radius:100px;padding:10px 10px 10px 22px;display:flex;align-items:center;gap:16px;box-shadow:0 14px 40px rgba(18,25,43,.35);font-size:.9rem;opacity:0;pointer-events:none;transition:opacity .3s}
.sticky-cta.on{opacity:1;pointer-events:auto}
.sticky-cta a{background:var(--orange);color:#fff;font-weight:700;text-decoration:none;padding:10px 18px;border-radius:100px;font-size:.88rem}

/* Reveal */
.rv{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

@media(max-width:900px){
  .hero-grid,.case,.promise{grid-template-columns:1fr}
  .stack{min-height:340px;margin-top:10px}
  .proof .wrap{grid-template-columns:repeat(2,1fr)}
  .svc-grid,.price-grid,.steps,.rev-grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .nav-links a:not(.btn){display:none}
}