:root{
  /* Gilden Rose — navy, gilt, white. Navy carries structure, gold carries
     the accents only; white/paper is the ground so the gold stays precious. */
  --navy:#122241;
  --navy-2:#1B3157;
  --navy-3:#0C1830;

  --gold:#C9A227;          /* the mark, rules, accents on dark */
  --gold-light:#E8CE8A;    /* gold on navy — eyebrows, small text */
  --gold-ink:#8A6B1B;      /* gold as text on paper — contrast-safe */

  --paper:#FAF8F4;         /* warm ground; cool gray fights the gilt */
  --paper-2:#F2EDE3;
  --line:#E5DDCE;
  --white:#ffffff;
  --body:#4E5870;
  --body-dim:#626C82;      /* 4.97:1 on paper — REQ-TECH-8 needs 4.5 */
  --radius:8px;
  --radius-lg:12px;

  /* Motion — expo-out easing, slow confident reveals.
     One easing curve and two durations drive every transition on the page. */
  --ease:cubic-bezier(.16,1,.3,1);
  --dur:800ms;
  --dur-mid:500ms;
  --dur-fast:200ms;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--body);
  font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-size:17px;line-height:1.68;-webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:"Newsreader",Georgia,serif;color:var(--navy);line-height:1.1;margin:0;font-weight:400;letter-spacing:-.012em}
h1{font-size:clamp(2.9rem,7vw,5.4rem);line-height:1.02}
h2{font-size:clamp(2rem,4.4vw,3.2rem)}
h3{font-size:1.3rem;line-height:1.28;font-weight:500}
em.hl{font-style:italic;color:var(--gold-ink)}
p{margin:0}
a{color:inherit}
.wrap{max-width:1160px;margin:0 auto;padding:0 26px}
.eyebrow{font-size:.7rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-ink)}

/* ============ MOTION SYSTEM ============ */

/* Scroll reveal: opacity + translateY, one-shot, IntersectionObserver-driven.
   Children stagger via an inline --d delay. */
[data-reveal]{opacity:0;transform:translateY(26px);transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease);transition-delay:var(--d,0ms)}
[data-reveal].is-in{opacity:1;transform:none}

/* Headline word rise: each word masked by its parent, then lifted into place. */
.words .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}
.words .w>span{display:inline-block;transform:translateY(110%);opacity:0;transition:transform var(--dur) var(--ease),opacity var(--dur) var(--ease);transition-delay:var(--d,0ms)}
.words.is-in .w>span{transform:translateY(0);opacity:1}

/* Reduced motion: reveal everything immediately, kill all transitions. */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  [data-reveal],[data-reveal].is-in{opacity:1!important;transform:none!important;transition:none!important}
  .words .w>span{transform:none!important;opacity:1!important;transition:none!important}
  .shot{--py:0px!important;--sc:1!important;transition:none!important}
  .steps-rail i{transform:scaleX(1)!important}
  *{animation:none!important}
}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:60;background:rgba(250,248,244,.74);backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:border-color var(--dur-mid) var(--ease),background var(--dur-mid) var(--ease)}
.nav.scrolled{border-bottom-color:var(--line);background:rgba(250,248,244,.93)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;height:74px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;font-family:"Newsreader",serif;font-weight:500;font-size:1.5rem;color:var(--navy);white-space:nowrap;letter-spacing:-.01em}
.brand .mark{width:32px;height:32px;flex:none;display:block;border-radius:50%}
.nav nav{display:none;gap:32px;font-size:.93rem;font-weight:500}
.nav nav > a{text-decoration:none;color:var(--body);position:relative;transition:color var(--dur-fast) ease}
.nav nav > a:after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform var(--dur-mid) var(--ease)}
.nav nav > a:hover{color:var(--navy)}
.nav nav > a:hover:after{transform:scaleX(1)}
@media(min-width:880px){.nav nav{display:flex}}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;white-space:nowrap;border-radius:var(--radius);padding:15px 28px;font-weight:600;font-size:1rem;text-decoration:none;border:1px solid transparent;transition:background var(--dur-fast) ease,border-color var(--dur-fast) ease,color var(--dur-fast) ease,transform var(--dur-fast) ease}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--navy);color:#fff}
.btn-primary:hover{background:var(--navy-2)}
.btn-ghost{border-color:var(--line);color:var(--navy);background:var(--white)}
.btn-ghost:hover{border-color:var(--gold)}
.btn-gold{background:var(--gold);color:var(--navy-3)}
.btn-gold:hover{background:#D9B444}
.btn-sm{padding:11px 20px;font-size:.92rem}

/* ---------- hero ---------- */
.hero{padding:112px 0 24px}
/* With no globe beside it the headline needs its own measure, or it runs the
   full 1160px and stops reading as a headline. The measure sits on the h1
   alone — putting it on .hero-copy would squash the lead and the buttons too. */
.hero h1{margin-top:20px;max-width:14ch}
.lead{margin-top:26px;font-size:1.16rem;max-width:46ch}
.hero-cta{margin-top:36px;display:flex;flex-wrap:wrap;gap:12px}
.hero-note{margin-top:20px;font-size:.9rem}
.hero-note b{color:var(--navy);font-weight:600}

/* ---------- capability strip ---------- */
.caps{background:var(--paper);padding:16px 0 8px}
.caps .wrap{padding-top:16px;padding-bottom:64px}
.caps-eyebrow{display:block;margin-bottom:34px}
.caps-grid{display:grid;gap:34px}
@media(min-width:820px){.caps-grid{grid-template-columns:repeat(3,1fr);gap:52px}}
.cap h3{font-size:1.16rem;margin-top:14px}
.cap p{margin-top:9px;font-size:.96rem}
.cap-rule{width:26px;height:2px;background:var(--gold);transform-origin:left;transform:scaleX(0);transition:transform var(--dur) var(--ease);transition-delay:var(--d,0ms)}
.cap.is-in .cap-rule{transform:scaleX(1)}

/* ---------- sections ---------- */
section{padding:104px 0}
.head{max-width:64ch}
.head h2{margin-top:16px}
.head p{margin-top:20px;font-size:1.09rem}

/* ---------- work ---------- */
.work{display:grid;gap:28px;margin-top:56px}
@media(min-width:840px){.work{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1120px){.work{grid-template-columns:repeat(3,1fr)}}
.card{border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;background:var(--white);text-decoration:none;display:block;transition:border-color var(--dur-mid) var(--ease),transform var(--dur-mid) var(--ease)}
.card:hover{border-color:var(--gold);transform:translateY(-4px)}
.shot-wrap{overflow:hidden;border-bottom:1px solid var(--line);height:clamp(210px,23vw,300px)}
/* The image is deliberately taller than its frame so GSAP can slide it
   inside the crop without ever exposing an edge. Translate (scroll) and
   scale (hover) live in separate custom properties and are composed here,
   so neither can clobber the other's `transform`. */
@property --sc{syntax:'<number>';inherits:false;initial-value:1}
@property --py{syntax:'<length>';inherits:false;initial-value:0px}
.shot{display:block;width:100%;height:calc(100% + 64px);margin-top:-32px;object-fit:cover;object-position:top center;background:var(--paper-2);transform:translate3d(0,var(--py,0px),0) scale(var(--sc,1));transition:--sc 900ms var(--ease)}
.card:hover .shot{--sc:1.035}
.card-body{padding:26px 28px 30px}
.tag{display:inline-block;font-size:.66rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-ink);background:rgba(201,162,39,.13);padding:5px 11px;border-radius:4px}
.card h3{margin-top:16px}
.card p{margin-top:10px;font-size:.96rem}
.card .go{margin-top:18px;display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:.93rem;color:var(--navy)}
.card .go i{display:inline-block;font-style:normal;transition:transform var(--dur-mid) var(--ease)}
.card:hover .go i{transform:translateX(5px)}

/* ---------- steps ---------- */
.steps-rail{position:relative;height:2px;margin-top:52px;background:var(--line);border-radius:2px;overflow:hidden}
.steps-rail i{position:absolute;inset:0;display:block;background:var(--gold);transform:scaleX(0);transform-origin:left}
.steps{display:grid;gap:36px;margin-top:36px;counter-reset:s}
@media(min-width:640px){.steps{grid-template-columns:repeat(2,1fr);gap:44px 48px}}
@media(min-width:1020px){.steps{grid-template-columns:repeat(4,1fr);gap:40px}}
.step:before{counter-increment:s;content:"0" counter(s);display:block;font-family:"Newsreader",serif;font-size:2.75rem;color:var(--gold);opacity:.55;font-weight:400;line-height:1}
.step h3{margin-top:16px}
.step p{margin-top:10px;font-size:.98rem}

.guarantee{margin:56px auto 0;max-width:60ch;text-align:center;background:var(--navy);color:#DDE6F2;font-size:1.12rem;line-height:1.6;padding:30px 34px;border-top:1px solid var(--gold);border-bottom:1px solid var(--gold);border-radius:var(--radius)}

/* ---------- pricing ---------- */
.pricing{background:var(--navy);color:#B9C6DC}
.pricing h2,.pricing h3{color:#fff}
.pricing .eyebrow{color:var(--gold-light)}
.tiers{display:grid;gap:20px;margin-top:52px}
@media(min-width:860px){.tiers{grid-template-columns:repeat(3,1fr)}}
.tier{border:1px solid rgba(255,255,255,.15);border-radius:var(--radius-lg);padding:34px 30px;background:rgba(255,255,255,.035);display:flex;flex-direction:column;transition:border-color var(--dur-mid) var(--ease),background var(--dur-mid) var(--ease)}
.tier:hover{border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.06)}
.tier.lead-tier{border-color:rgba(201,162,39,.62);background:rgba(201,162,39,.07)}
.price{font-family:"Newsreader",serif;font-size:2.9rem;color:#fff;font-weight:400;line-height:1;margin-top:18px;font-variant-numeric:tabular-nums}
.price small{font-size:.95rem;font-family:"Inter",sans-serif;color:var(--gold-light);font-weight:400}
.tier p{margin-top:15px;font-size:.97rem;flex:1}
.tier .btn{margin-top:26px;width:100%}
.btn-white{background:var(--white);color:var(--navy)}
.btn-white:hover{background:#E8EDF5}
.btn-line{border-color:rgba(255,255,255,.32);color:#fff}
.btn-line:hover{border-color:var(--gold)}
.total{margin-top:44px;text-align:center;font-family:"Newsreader",serif;font-size:clamp(1.7rem,4vw,2rem);color:#fff;font-weight:400;line-height:1.15}
.fineprint{margin-top:32px;font-size:.9rem;color:#94A6C2;max-width:64ch}


/* ---------- faq ---------- */
.faq{background:var(--paper-2)}
.faq-list{margin-top:46px;max-width:74ch;border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
  padding:22px 2px;font-family:"Newsreader",Georgia,serif;font-size:1.22rem;line-height:1.35;color:var(--navy);
  min-height:48px;transition:color var(--dur-fast) ease}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{color:var(--gold-ink)}
.faq-item summary:after{content:"";flex:none;width:13px;height:13px;margin-top:7px;
  border-right:2px solid var(--gold);border-bottom:2px solid var(--gold);
  transform:rotate(45deg);transition:transform var(--dur-mid) var(--ease)}
.faq-item[open] summary:after{transform:rotate(225deg)}
.faq-a{padding:0 2px 24px;max-width:64ch}
.faq-a p{font-size:1rem;line-height:1.65}
@media(prefers-reduced-motion:reduce){.faq-item summary:after{transition:none}}

/* ---------- close ---------- */
.close{text-align:center;background:var(--white);border-top:1px solid var(--line)}
.close-actions{margin-top:34px;display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.mail{font-family:"Newsreader",serif;font-size:clamp(1.2rem,3.2vw,1.8rem);color:var(--navy);text-decoration:none;position:relative}
.mail:after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:var(--gold);transform-origin:left;transition:transform var(--dur-mid) var(--ease)}
.mail:hover:after{transform:scaleY(2)}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);padding:38px 0;font-size:.88rem;background:var(--paper)}
footer .wrap{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center}
.footphone{display:block;width:100%;order:-1}
.footphone a{text-decoration:none;color:var(--gold-ink);font-weight:600}

/* ---------- focus ---------- */
a:focus-visible,button:focus-visible{outline:2px solid var(--gold-ink);outline-offset:3px;border-radius:4px}
.pricing a:focus-visible,.callbar a:focus-visible{outline-color:var(--gold-light)}

/* ---------- nav phone ---------- */
.nav-right{display:flex;align-items:center;gap:16px}
.navphone{display:inline-flex;align-items:center;gap:7px;text-decoration:none;color:var(--body);font-size:.93rem;font-weight:500;white-space:nowrap;transition:color var(--dur-fast) ease}
.navphone:hover{color:var(--navy)}
.navphone svg{width:15px;height:15px;flex:none}
@media(min-width:768px){.navphone svg{display:none}}
@media(max-width:519px){
  .nav-right{gap:8px}
  .navphone{font-size:.78rem}
  .navphone svg{display:none}
  .nav .wrap{gap:8px}
  .nav .btn-sm{padding:9px 12px;font-size:.8rem}
  .brand{font-size:1.16rem;gap:8px}
  .brand .mark{width:27px;height:27px}
}
/* 375px: the brand + phone + CTA only fit if all three give a little */
@media(max-width:400px){
  .nav .wrap{gap:6px;height:66px}
  .brand{font-size:1.02rem;gap:7px}
  .brand .mark{width:24px;height:24px}
  .navphone{font-size:.72rem}
  .nav .btn-sm{padding:8px 10px;font-size:.75rem}
}


/* ---------- sticky mobile call bar ---------- */
.callbar{position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;gap:10px;background:var(--navy);padding:10px 12px calc(10px + env(safe-area-inset-bottom))}
.callbar a{flex:1 1 0;display:flex;align-items:center;justify-content:center;height:44px;border-radius:var(--radius);font-weight:600;font-size:.97rem;text-decoration:none;white-space:nowrap}
.callbar .cb-call{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.3)}
.callbar .cb-buy{background:var(--gold);color:var(--navy-3)}
@media(max-width:767px){
  .callbar{display:flex;visibility:hidden;transform:translateY(110%);transition:transform var(--dur-mid) var(--ease),visibility var(--dur-mid)}
  .callbar.show{visibility:visible;transform:translateY(0)}
  body{padding-bottom:64px}
}
@media(prefers-reduced-motion:reduce){.callbar{transition:none}}

/* ============================================================
   MULTI-PAGE ADDITIONS
   Everything below is shared by /portfolio and the /work/* detail
   pages. The home page uses .inline-link and .work-more only.
   ============================================================ */

.inline-link{color:var(--gold-ink);font-weight:600;text-decoration:none;border-bottom:1px solid rgba(201,162,39,.5);transition:border-color var(--dur-fast) ease}
.inline-link:hover{border-bottom-color:var(--gold)}
.work-more{margin-top:34px}
.work-more i{font-style:normal;display:inline-block;transition:transform var(--dur-mid) var(--ease)}
.work-more a:hover i{transform:translateX(5px)}
/* Four cards read better as a 2x2 block than as three-plus-an-orphan, so the
   home grid now tops out at two columns instead of three. */
@media(min-width:1120px){.work{grid-template-columns:repeat(2,1fr);gap:32px}}

/* ---------- nav: current page ---------- */
.nav nav > a[aria-current="page"]{color:var(--navy)}
.nav nav > a[aria-current="page"]:after{transform:scaleX(1)}

/* ---------- inner-page header ---------- */
.page-head{padding:74px 0 0}
.page-head .wrap{max-width:1160px}
.page-head h1{margin-top:18px;font-size:clamp(2.5rem,6vw,4.4rem)}
.page-head .lead{margin-top:24px;font-size:1.16rem;max-width:56ch}
.crumb{display:inline-flex;align-items:center;gap:9px;font-size:.86rem;font-weight:600;
  letter-spacing:.04em;color:var(--body-dim);text-decoration:none;transition:color var(--dur-fast) ease}
.crumb:hover{color:var(--navy)}
.crumb i{font-style:normal;display:inline-block;transition:transform var(--dur-mid) var(--ease)}
.crumb:hover i{transform:translateX(-4px)}

/* ---------- library filters ---------- */
.filters{display:flex;flex-wrap:wrap;gap:9px;margin-top:44px;padding-bottom:6px}
.chip{appearance:none;cursor:pointer;font-family:inherit;font-size:.84rem;font-weight:600;
  letter-spacing:.02em;color:var(--body);background:var(--white);border:1px solid var(--line);
  border-radius:999px;padding:9px 17px;min-height:38px;
  transition:border-color var(--dur-fast) ease,color var(--dur-fast) ease,background var(--dur-fast) ease}
.chip:hover{border-color:var(--gold);color:var(--navy)}
.chip[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
.chip small{font-weight:500;opacity:.6;margin-left:5px;font-size:.92em}
.filter-count{margin-top:18px;font-size:.88rem;color:var(--body-dim)}

/* ---------- the library grid ---------- */
/* One long scroll of real screenshots, Godly-style: each card holds the FULL
   page shot cropped to a 16:11 window, and on hover the shot travels up until
   its bottom edge meets the frame's. --travel is per-card because it depends on
   how tall that particular site is; see the note in /portfolio. */
.library{display:grid;gap:30px;margin-top:8px}
@media(min-width:900px){.library{grid-template-columns:repeat(2,1fr);gap:38px 34px}}
@media(min-width:1400px){.library{gap:46px 40px}}

.lib-item{opacity:0;transform:translateY(30px);
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease);
  transition-delay:var(--d,0ms)}
.lib-item.is-in{opacity:1;transform:none}
.lib-item[hidden]{display:none}

.lib-card{display:block;text-decoration:none;color:inherit}
.lib-frame{position:relative;aspect-ratio:16/11;overflow:hidden;background:var(--paper-2);
  border:1px solid var(--line);border-radius:var(--radius-lg);
  transition:border-color var(--dur-mid) var(--ease),box-shadow var(--dur-mid) var(--ease),transform var(--dur-mid) var(--ease)}
.lib-card:hover .lib-frame,.lib-card:focus-visible .lib-frame{
  border-color:var(--gold);box-shadow:0 26px 50px -26px rgba(18,34,65,.4);transform:translateY(-4px)}
.lib-frame img{position:absolute;top:0;left:0;width:100%;height:auto;display:block;
  transform:translateY(0);transition:transform 700ms var(--ease)}
/* The long scroll only runs where there is a real pointer — on a phone the card
   is just a link, and a 6-second animation nobody asked for is a tax. */
@media(hover:hover) and (pointer:fine){
  .lib-card:hover .lib-frame img,.lib-card:focus-visible .lib-frame img{
    transform:translateY(var(--travel,-85%));
    transition:transform var(--scroll,6s) linear}
}
/* "scroll it" hint, fades out as the shot starts moving */
.lib-hint{position:absolute;right:12px;bottom:12px;z-index:2;display:none;align-items:center;gap:7px;
  background:rgba(18,34,65,.62);backdrop-filter:blur(6px);color:#fff;
  font-size:.62rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  padding:6px 11px;border-radius:999px;opacity:0;transition:opacity var(--dur-mid) var(--ease)}
@media(hover:hover) and (pointer:fine){
  .lib-hint{display:inline-flex}
  .lib-card:hover .lib-hint{opacity:0}
  .lib-frame:not(:hover) .lib-hint{opacity:.78}
}
.lib-meta{display:flex;align-items:baseline;justify-content:space-between;gap:18px;margin-top:19px}
.lib-meta h2{font-size:1.5rem;font-weight:500;margin:0}
.lib-card:hover .lib-meta h2{color:var(--gold-ink)}
.lib-meta h2{transition:color var(--dur-fast) ease}
.lib-year{font-size:.84rem;font-weight:600;color:var(--body-dim);white-space:nowrap;font-variant-numeric:tabular-nums}
.lib-tags{margin-top:10px;display:flex;flex-wrap:wrap;gap:7px}
.lib-tags span{font-size:.66rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-ink);background:rgba(201,162,39,.13);padding:5px 10px;border-radius:4px}
.lib-blurb{margin-top:13px;font-size:.97rem;max-width:52ch}
.lib-empty{margin-top:44px;padding:36px 30px;background:var(--paper-2);border-left:3px solid var(--gold);
  border-radius:0 var(--radius) var(--radius) 0;color:var(--navy);font-size:1.05rem}

@media(prefers-reduced-motion:reduce){
  .lib-item,.lib-item.is-in{opacity:1!important;transform:none!important;transition:none!important}
  .lib-frame img{transition:none!important}
  .lib-card:hover .lib-frame img{transform:none!important}
  .lib-hint{display:none!important}
}

/* ---------- detail page ---------- */
.spec{margin-top:52px;border-top:1px solid var(--line)}
.spec dl{display:grid;gap:0;margin:0}
@media(min-width:700px){.spec dl{grid-template-columns:repeat(2,1fr);column-gap:48px}}
.spec-row{display:flex;justify-content:space-between;gap:20px;align-items:baseline;
  padding:15px 2px;border-bottom:1px solid var(--line)}
.spec-row dt{font-size:.78rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--body-dim);flex:none}
.spec-row dd{margin:0;text-align:right;color:var(--navy);font-weight:500;font-size:.97rem}
.spec-row dd a{color:var(--gold-ink);text-decoration:none;border-bottom:1px solid rgba(201,162,39,.5);word-break:break-all}

.prose{max-width:66ch;margin-top:54px}
.prose h2{font-size:clamp(1.6rem,3.2vw,2.2rem);margin-top:46px}
.prose h2:first-child{margin-top:0}
.prose p{margin-top:19px}
.prose ul{margin:19px 0 0;padding-left:0;list-style:none}
.prose li{position:relative;padding-left:22px;margin-top:11px}
.prose li:before{content:"";position:absolute;left:0;top:.62em;width:7px;height:1px;background:var(--gold)}
.pull{font-family:"Newsreader",Georgia,serif;font-size:clamp(1.3rem,2.6vw,1.62rem);line-height:1.34;
  color:var(--navy);margin-top:34px;padding:24px 0 24px 26px;border-left:3px solid var(--gold)}
.caveat{margin-top:40px;font-size:.95rem;padding:22px 26px;background:var(--paper-2);
  border-radius:var(--radius);color:var(--navy);max-width:66ch}

/* full-page shot in a browser frame, presented at whatever height it really is */
.plate{margin-top:56px}
.browser{position:relative;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;background:var(--white);
  box-shadow:0 30px 60px -34px rgba(18,34,65,.34)}
.browser-bar{display:flex;align-items:center;gap:8px;padding:12px 16px;background:var(--paper-2);
  border-bottom:1px solid var(--line)}
.browser-bar i{width:10px;height:10px;border-radius:50%;background:var(--line);flex:none}
.browser-bar span{margin-left:8px;font-size:.78rem;color:var(--body-dim);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* The whole page, scrollable inside its own frame — the visitor can read the
   real site top to bottom without leaving this one. */
.browser-scroll{max-height:min(78vh,860px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
/* A soft bottom edge so the frame reads as "there is more below" rather than
   as a screenshot that happens to end mid-sentence. */
.browser:after{content:"";position:absolute;left:1px;right:1px;bottom:1px;height:70px;pointer-events:none;
  border-radius:0 0 var(--radius-lg) var(--radius-lg);
  background:linear-gradient(to bottom,rgba(250,248,244,0),rgba(250,248,244,.9))}
.browser-scroll:focus-visible{outline:2px solid var(--gold-ink);outline-offset:-2px}
.browser-scroll img{display:block;width:100%;height:auto}
.plate-note{margin-top:14px;font-size:.85rem;color:var(--body-dim);display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center}

.device{display:grid;gap:34px;margin-top:64px;align-items:center}
@media(min-width:820px){.device{grid-template-columns:300px 1fr;gap:52px}}
.phone{border:1px solid var(--line);border-radius:26px;overflow:hidden;background:var(--white);
  padding:9px;box-shadow:0 22px 44px -26px rgba(18,34,65,.34);max-width:300px}
.phone img{display:block;width:100%;height:auto;border-radius:18px}

/* ---------- prev / next ---------- */
.pager{border-top:1px solid var(--line);margin-top:0}
.pager .wrap{display:grid;gap:1px;padding:0}
@media(min-width:760px){.pager .wrap{grid-template-columns:repeat(2,1fr)}}
.pager a{display:block;padding:38px 26px;text-decoration:none;background:var(--paper);
  transition:background var(--dur-mid) var(--ease)}
.pager a:hover{background:var(--paper-2)}
.pager a:last-child{text-align:right}
@media(max-width:759px){.pager a{text-align:left!important;border-top:1px solid var(--line)}
  .pager a:first-child{border-top:0}}
.pager .dir{font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-ink)}
.pager .name{display:block;margin-top:9px;font-family:"Newsreader",serif;font-size:1.5rem;color:var(--navy)}


/* ============================================================
   PORTFOLIO DROPDOWN
   A disclosure menu on the Portfolio nav item, in place of the
   filter chips that used to sit on the library page. Desktop only
   — .nav nav is display:none below 880px, so there is no mobile
   menu for this to live in and the library simply shows everything.
   ============================================================ */
.navdrop{position:relative}
.navdrop-btn{appearance:none;background:none;border:0;padding:0;cursor:pointer;
  font-family:inherit;font-size:.93rem;font-weight:500;color:var(--body);text-decoration:none;
  display:inline-flex;align-items:center;gap:7px;position:relative;
  transition:color var(--dur-fast) ease}
.navdrop-btn:after{content:"";position:absolute;left:0;right:16px;bottom:-5px;height:1px;
  background:var(--gold);transform:scaleX(0);transform-origin:left;
  transition:transform var(--dur-mid) var(--ease)}
.navdrop:hover .navdrop-btn,.navdrop:focus-within .navdrop-btn,.navdrop-btn.is-current{color:var(--navy)}
.navdrop:hover .navdrop-btn:after,.navdrop:focus-within .navdrop-btn:after,.navdrop-btn.is-current:after{transform:scaleX(1)}
.navdrop-btn svg{width:11px;height:11px;flex:none;transition:transform var(--dur-mid) var(--ease)}
.navdrop:hover .navdrop-btn svg,.navdrop:focus-within .navdrop-btn svg{transform:rotate(180deg)}

/* The panel hangs from the nav bar itself, not from the button, so it reads as
   part of the header rather than as a tooltip stuck to a word. */
.navdrop-panel{position:absolute;top:calc(100% + 22px);left:50%;transform:translateX(-50%) translateY(-8px);
  width:min(400px,calc(100vw - 40px));z-index:70;
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:0 30px 60px -28px rgba(18,34,65,.42),0 2px 6px -2px rgba(18,34,65,.10);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity var(--dur-mid) var(--ease),transform var(--dur-mid) var(--ease),visibility var(--dur-mid)}
.navdrop:hover .navdrop-panel,
.navdrop:focus-within .navdrop-panel{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
/* Escape sets this to bail out of an open menu without moving the pointer. */
.navdrop.is-dismissed .navdrop-panel{opacity:0;visibility:hidden;pointer-events:none}
/* Bridges the gap between button and panel so the pointer can travel down
   without crossing dead space and closing the menu. */
.navdrop-panel:before{content:"";position:absolute;left:0;right:0;top:-22px;height:22px}

.navdrop-inner{padding:22px 22px 14px}
.navdrop-title{display:flex;align-items:center;gap:9px;font-size:.68rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold-ink);margin-bottom:6px}
.navdrop-title svg{width:13px;height:13px;flex:none}
.navdrop-list{list-style:none;margin:0;padding:0}
.navdrop-list a{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
  text-decoration:none;padding:13px 14px;margin:0 -14px;
  border-radius:var(--radius);transition:background var(--dur-fast) ease}
.navdrop-list a:hover{background:var(--paper-2)}
.navdrop-list b{display:block;font-family:"Newsreader",Georgia,serif;font-weight:500;
  font-size:1.16rem;color:var(--navy);line-height:1.25}
.navdrop-list small{display:block;margin-top:3px;font-size:.85rem;color:var(--body);line-height:1.45}
.navdrop-list em{font-style:normal;flex:none;font-size:.78rem;font-weight:600;
  color:var(--body-dim);font-variant-numeric:tabular-nums;padding-top:5px}
.navdrop-all{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:12px;padding:15px 22px;text-decoration:none;
  background:var(--paper-2);border-top:1px solid var(--line);
  border-radius:0 0 var(--radius-lg) var(--radius-lg);
  font-size:.92rem;font-weight:600;color:var(--navy);
  transition:background var(--dur-fast) ease}
.navdrop-all:hover{background:#EBE4D6}
.navdrop-all i{font-style:normal;transition:transform var(--dur-mid) var(--ease)}
.navdrop-all:hover i{transform:translateX(4px)}

@media(prefers-reduced-motion:reduce){
  .navdrop-panel{transition:none!important}
  .navdrop-btn svg,.navdrop-all i{transition:none!important}
}

/* ---------- library: active category banner ---------- */
/* Replaces the chip row. Only appears when a category is actually chosen. */
.cat-banner{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 16px;margin-top:38px}
.cat-banner h2{font-size:clamp(1.4rem,3vw,1.9rem);font-weight:500}
.cat-banner .cat-clear{font-size:.88rem;font-weight:600;color:var(--gold-ink);text-decoration:none;
  border-bottom:1px solid rgba(201,162,39,.5)}
.cat-banner .cat-clear:hover{border-bottom-color:var(--gold)}


/* ============================================================
   CONVERSION PRD — September 2, 2026
   Everything below implements the Gilden Rose Conversion PRD. It is
   appended rather than woven in so the portfolio and /work pages keep
   rendering exactly as they did while they are migrated.
   ============================================================ */

/* ---------- self-hosted fonts (REQ-TECH-5) ----------
   Two weights per family, latin subset, swap. Replaces the render-blocking
   fonts.googleapis.com stylesheet — one fewer third-party origin on the
   critical path, which is most of the mobile LCP win. */
@font-face{font-family:"Newsreader";font-style:normal;font-weight:400;font-display:swap;
  src:url("/fonts/newsreader-400.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Newsreader";font-style:normal;font-weight:500 600;font-display:swap;
  src:url("/fonts/newsreader-500.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;
  src:url("/fonts/inter-400.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:500 700;font-display:swap;
  src:url("/fonts/inter-600.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* Body type moves to 18px (REQ design direction: the audience is not 25). */
body{font-size:18px}

/* Every tap target clears 44x44 (REQ-TECH-8). */
.btn{min-height:48px}
.btn-sm{min-height:44px}

/* ---------- hero ---------- */
.hero{padding:56px 0 0}
.hero-grid{display:grid;gap:34px;align-items:center}
@media(min-width:960px){
  .hero{padding:84px 0 24px}
  .hero-grid{grid-template-columns:1.15fr .85fr;gap:56px}
}
/* Smaller mobile H1 than the old one, so REQ-HERO-7 holds: the eyebrow, H1,
   subhead, call button and trust strip all fit inside 390x844. */
.hero h1{margin-top:18px;max-width:16ch;font-size:clamp(2.1rem,6.6vw,4.6rem);line-height:1.05}
.hero .eyebrow{max-width:34ch;line-height:1.5}
.words .hl{color:var(--gold-ink)}
.hero .lead{margin-top:22px;font-size:1.05rem;max-width:40ch}
.hero .lead b{color:var(--navy);font-weight:600}
.hero-cta{margin-top:26px;display:flex;flex-direction:column;align-items:flex-start;gap:14px}

/* The one primary action. Solid, high contrast, digits on the face of it
   (REQ-CTA-2) and a phone icon beside them. */
.btn-call svg{width:18px;height:18px;flex:none}
.textlink{font-size:.95rem;font-weight:500;color:var(--body);text-decoration:none;
  border-bottom:1px solid var(--line);padding:9px 0;transition:color var(--dur-fast) ease,border-color var(--dur-fast) ease}
.textlink:hover{color:var(--navy);border-bottom-color:var(--gold)}


/* REQ-HERO-6 — real client site, real phone. */
.hero-shot{justify-self:center;max-width:290px;width:100%}
.phone-frame{border:1px solid var(--line);border-radius:26px;padding:8px;background:var(--white);
  box-shadow:0 26px 60px -30px rgba(18,34,65,.42);overflow:hidden}
.phone-frame img{display:block;width:100%;height:auto;border-radius:19px;background:var(--paper-2)}
.hero-shot-cap{margin-top:13px;text-align:center;font-size:.8rem;color:var(--body-dim)}
@media(max-width:959px){
  .hero-shot{max-width:230px;margin-top:6px}
}

/* ---------- before / after (5.3) ----------
   Tap-to-toggle everywhere. REQ-BA-1 asks for a drag slider on desktop and a
   toggle on touch; a toggle that behaves identically on both is easier to
   operate one-handed on a job site and needs no JavaScript beyond a class
   swap, so it is used on every width. */
.ba{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ba-list{margin-top:48px;display:grid;gap:56px}
.ba-pair{margin:0}
.ba-toggle{display:inline-flex;gap:0;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;background:var(--white)}
.ba-btn{appearance:none;cursor:pointer;font-family:inherit;font-size:.9rem;font-weight:600;
  min-height:44px;padding:0 22px;border:0;background:none;color:var(--body);
  transition:background var(--dur-fast) ease,color var(--dur-fast) ease}
.ba-btn[aria-pressed="true"]{background:var(--navy);color:#fff}
.ba-stage{position:relative;margin-top:16px;border:1px solid var(--line);border-radius:var(--radius-lg);
  overflow:hidden;background:var(--white);aspect-ratio:1200/750}
.ba-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;
  opacity:0;transition:opacity var(--dur-mid) var(--ease)}
.ba-img.is-on{opacity:1}
.ba-deltas{margin-top:18px;display:flex;flex-wrap:wrap;gap:10px 26px;font-size:.92rem;color:var(--body)}
.ba-deltas b{color:var(--navy);font-weight:600}
.ba-line{margin-top:48px;max-width:60ch;font-size:1.09rem;color:var(--navy);
  border-left:3px solid var(--gold);padding-left:20px}

/* ---------- proof (5.4) ---------- */
.tag-own{background:rgba(78,88,112,.1);color:var(--body)}
.card-own{opacity:.92}
.quote{margin:16px 0 0;padding:14px 0 0;border-top:1px solid var(--line);
  font-family:"Newsreader",Georgia,serif;font-size:1.02rem;line-height:1.45;color:var(--navy)}
.quote cite{display:block;margin-top:8px;font-family:"Inter",sans-serif;font-style:normal;
  font-size:.8rem;font-weight:600;letter-spacing:.02em;color:var(--body-dim)}
.reviews{margin-top:56px;padding:30px 32px;background:var(--white);
  border:1px solid var(--line);border-radius:var(--radius-lg)}
.reviews-head{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.reviews .stars{color:var(--gold);letter-spacing:.14em;font-size:1.05rem}
.reviews-list{margin-top:18px;display:grid;gap:18px}
@media(min-width:820px){.reviews-list{grid-template-columns:repeat(3,1fr);gap:28px}}

/* ---------- how it works (5.5) ---------- */
.step-when{display:inline-block;font-size:.68rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold-ink);margin-bottom:6px}
.step:before{font-size:2.4rem;opacity:.4}
/* The gold rail used to be scrubbed by GSAP. It now draws once, on reveal,
   from the same IntersectionObserver everything else uses — same effect,
   70KB less JavaScript (REQ-TECH-4). */
.steps-rail i{transition:transform 1400ms var(--ease)}
.steps-rail.is-in i{transform:scaleX(1)}

.guarantee{margin:56px auto 0;max-width:62ch;text-align:center;background:var(--navy);
  color:#DDE6F2;font-size:1.14rem;line-height:1.6;padding:32px 34px;
  border-top:2px solid var(--gold);border-bottom:2px solid var(--gold);border-radius:var(--radius)}
.guarantee-label{font-size:.68rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-light);margin-bottom:12px}
.cta-row{margin-top:40px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;justify-content:center}

/* ---------- what you get (5.6) ---------- */
.get{background:var(--white);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.checklist{list-style:none;margin:44px 0 0;padding:0;display:grid;gap:14px 40px}
@media(min-width:760px){.checklist{grid-template-columns:repeat(2,1fr)}}
.checklist li{position:relative;padding-left:32px;font-size:1.02rem;color:var(--navy)}
.checklist li:before{content:"";position:absolute;left:2px;top:.34em;width:13px;height:8px;
  border-left:2px solid var(--gold);border-bottom:2px solid var(--gold);transform:rotate(-45deg)}
.more-cap{margin-top:44px;max-width:70ch;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.more-cap summary{list-style:none;cursor:pointer;min-height:44px;display:flex;align-items:center;
  gap:12px;padding:16px 2px;font-weight:600;color:var(--navy);font-size:1rem}
.more-cap summary::-webkit-details-marker{display:none}
.more-cap summary:before{content:"+";font-family:"Newsreader",serif;font-size:1.5rem;
  color:var(--gold-ink);line-height:1;flex:none}
.more-cap[open] summary:before{content:"\2013"}
.more-cap-a{padding:0 2px 22px 26px;font-size:.99rem}


/* ---------- pricing (5.8) ---------- */
.pricecard{margin-top:48px;border:1px solid rgba(201,162,39,.5);border-radius:var(--radius-lg);
  background:rgba(201,162,39,.06);padding:36px 32px}
@media(min-width:760px){.pricecard{padding:44px 46px}}
.paysteps{list-style:none;margin:0;padding:0;counter-reset:none}
.paysteps li{display:grid;grid-template-columns:auto 1fr;gap:4px 22px;align-items:baseline;
  padding:22px 0;border-bottom:1px solid rgba(255,255,255,.13)}
.paysteps li:first-child{padding-top:0}
.pay-when{grid-column:1/-1;font-size:.68rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold-light)}
.pay-amt{font-family:"Newsreader",serif;font-size:2.7rem;line-height:1;color:#fff;
  font-variant-numeric:tabular-nums;margin-top:6px}
.pay-what{font-size:.97rem;color:#B9C6DC;margin-top:6px}
.paysteps .pay-total{border-bottom:0;padding-bottom:0;border-top:1px solid rgba(201,162,39,.45);margin-top:4px}
.paysteps .pay-total .pay-when{color:#fff}
.paysteps .pay-total .pay-amt{color:var(--gold-light);font-size:3.1rem}
.price-cta{margin-top:32px;display:flex;flex-wrap:wrap;gap:12px}
.price-cta .btn-gold{flex:1 1 300px}
.price-cta .btn-line{flex:0 1 auto;opacity:.85;font-weight:500}
.price-cta .btn-line:hover{opacity:1}

/* REQ-PRICE-5 */
.compare{margin-top:44px;display:grid;gap:1px;background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.14);border-radius:var(--radius-lg);overflow:hidden}
@media(min-width:820px){.compare{grid-template-columns:repeat(3,1fr)}}
.comp{background:var(--navy);padding:26px 24px}
.comp-who{font-size:.68rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#8FA2BF}
.comp-num{font-family:"Newsreader",serif;font-size:1.7rem;color:#fff;margin-top:10px;line-height:1.1}
.comp-note{margin-top:10px;font-size:.92rem;color:#94A6C2}
.comp-us{background:var(--navy-2)}
.comp-us .comp-who{color:var(--gold-light)}
.comp-us .comp-num{color:var(--gold-light)}
.comp-us .comp-note{color:#C4D1E4}
.pricing .fineprint{margin-top:36px}

/* ---------- FAQ (5.9) ---------- */
.faq-item summary{min-height:44px}

/* ---------- final CTA (5.10) ---------- */
.close{text-align:center;background:var(--navy);border-top:0;color:#C4D1E4}
.close h2{color:#fff;max-width:18ch;margin:0 auto}
.close-body{margin-top:20px;font-size:1.09rem;max-width:46ch;margin-left:auto;margin-right:auto}
.close-actions{margin-top:34px;display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.close-actions .btn{flex:1 1 280px;max-width:360px}

/* ---------- footer (REQ-END-3) ---------- */
footer .wrap{gap:10px 22px;justify-content:flex-start}
.foot-brand{font-family:"Newsreader",Georgia,serif;font-size:1.15rem;color:var(--navy)}
footer a{text-decoration:none;color:var(--gold-ink);font-weight:600}
.footphone{display:inline;width:auto;order:0}

/* ---------- sticky call bar (REQ-CTA-1) ---------- */
.callbar{flex-wrap:wrap;padding-bottom:calc(8px + env(safe-area-inset-bottom))}
.callbar a{gap:8px;min-height:46px;height:auto}
.callbar a svg{width:16px;height:16px;flex:none}
.callbar .cb-call{background:var(--gold);color:var(--navy-3);border:0}
.callbar .cb-text{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.34)}
/* REQ-CTA-2: the digits are legible in the bar itself, not just on the icons. */
.cb-num{flex:1 0 100%;text-align:center;font-size:.78rem;font-weight:600;letter-spacing:.06em;
  color:var(--gold-light);padding-top:6px}
@media(max-width:767px){body{padding-bottom:96px}}

/* ============================================================
   OUTREACH PAGE — /build/[slug]  (PRD section 6)
   One column, no nav, no footer, no exit path except their own site
   preview and the phone number. Opened on a job site, on a phone.
   ============================================================ */
body.outreach{background:var(--paper)}
.ob{max-width:660px;margin:0 auto;padding:40px 24px 40px}
.ob-head{padding-bottom:4px}
.ob-from{font-size:.7rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-ink)}
.ob-head h1{margin-top:16px;font-size:clamp(1.9rem,5.6vw,2.9rem);line-height:1.12}
.ob-sub{margin-top:16px;font-size:1.05rem}

/* The build, front and centre — first interactive element on the screen. */
.ob-open{display:block;margin-top:30px;padding:26px 26px;text-align:center;text-decoration:none;
  background:var(--navy);border:2px solid var(--gold);border-radius:var(--radius-lg);
  transition:background var(--dur-fast) ease,transform var(--dur-fast) ease}
.ob-open:hover{background:var(--navy-2);transform:translateY(-2px)}
.ob-open-label{display:block;font-family:"Newsreader",Georgia,serif;font-size:1.7rem;color:#fff}
.ob-open-url{display:block;margin-top:9px;font-size:.82rem;color:var(--gold-light);word-break:break-all}

.ob-ba{margin-top:46px}
.ob-ba h2{font-size:clamp(1.45rem,4vw,1.95rem)}
.ob-ba .ba-pair{margin:20px 0 0}
.ba-old{margin-top:10px;font-size:.9rem;color:var(--body-dim)}
.ba-old a{color:var(--gold-ink)}

.ob-what{margin-top:46px;border-left:3px solid var(--gold);padding-left:20px}
.ob-what p{font-family:"Newsreader",Georgia,serif;font-size:1.22rem;line-height:1.4;color:var(--navy)}
.ob-what p + p{margin-top:12px}

.ob-next{margin-top:46px}
.ob-next h2{font-size:clamp(1.45rem,4vw,1.95rem)}
.ob-next ol{margin:20px 0 0;padding-left:0;list-style:none;counter-reset:n}
.ob-next li{counter-increment:n;position:relative;padding-left:42px;margin-top:16px;font-size:1.02rem}
.ob-next li:before{content:counter(n);position:absolute;left:0;top:-2px;width:28px;height:28px;
  display:flex;align-items:center;justify-content:center;border-radius:50%;
  background:rgba(201,162,39,.16);color:var(--gold-ink);font-size:.85rem;font-weight:700}
.ob-next b{color:var(--navy)}

.ob .guarantee{margin-top:46px;max-width:none;text-align:left;font-size:1.06rem}
.ob-cta{margin-top:34px;display:flex;flex-direction:column;gap:12px}
.ob-cta .btn{width:100%}
.ob-cta .btn-line{border-color:var(--line);color:var(--navy)}
.ob-cta .btn-line:hover{border-color:var(--gold)}
.ob-cta-last{margin-top:34px}
.ob-faq{margin-top:46px;border-top:1px solid var(--line)}
.ob-faq .faq-item{border-bottom:1px solid var(--line)}
.ob-sig{margin-top:40px;font-family:"Newsreader",Georgia,serif;font-size:1.3rem;color:var(--navy)}
/* The sticky bar is the only persistent chrome, and it shows at every width
   here — this page is almost always opened on a phone. */
body.outreach .callbar{display:flex;visibility:visible;transform:none}
body.outreach{padding-bottom:100px}

/* ---------- corrections after the first mobile pass ---------- */
/* Icons inside any button, not just .btn-call. */
.btn svg{width:18px;height:18px;flex:none}
.btn-sm svg{width:16px;height:16px}


/* The amount/description split needs room. Below 560px they stack, so the
   description isn't squeezed into a six-line column beside a big number. */
@media(max-width:559px){
  .paysteps li{grid-template-columns:1fr}
  .pay-amt{margin-top:4px}
  .pay-what{margin-top:8px}
}

/* Let the grid column set the measure so the headline doesn't leave a single
   orphaned word on its own line at desktop widths. */
@media(min-width:960px){
  .hero h1{max-width:none;font-size:clamp(3.4rem,3.6vw,4.15rem)}
}

/* ---------- hero trust strip (REQ-HERO-5) ----------
   Four claims, each one checkable. Stacked with a gold tick on a phone;
   one line with middot separators once there is room. The separator is
   always drawn by the item that FOLLOWS it, so it can never dangle at the
   end of a wrapped line. */
.trust{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:8px;
  font-size:.86rem;line-height:1.5;color:var(--body);font-weight:500}
.trust li{position:relative;padding-left:17px}
.trust li:before{content:"";position:absolute;left:0;top:.52em;width:5px;height:5px;
  border-radius:50%;background:var(--gold)}
@media(min-width:820px){
  .trust{display:flex;flex-wrap:wrap;gap:6px 0;align-items:baseline}
  .trust li{padding-left:0}
  .trust li:before{content:none}
  .trust li + li:before{content:"\00B7";position:static;display:inline;width:auto;height:auto;
    background:none;border-radius:0;color:var(--gold-ink);font-weight:700;padding:0 11px}
}

/* ---------- tap targets (REQ-TECH-8) ----------
   Standalone links that are a real destination — the phone number, the email,
   the nav anchors — get enough vertical padding to clear 44px. Links inside
   running prose are exempt; padding them would break the line box. */
.navphone{padding:11px 4px}
.nav nav > a{padding:11px 0}
.nav nav > a:after{bottom:6px}
footer .wrap > span{display:inline-flex;align-items:center;min-height:44px}
footer a{display:inline-flex;align-items:center;min-height:44px;padding:0 2px}
.work-more a,.close-actions a{min-height:48px}

/* ============================================================
   REVISION — free mockup, $600, team voice (2026-09-02)
   ============================================================ */

/* ---------- growth figures (replaces the risk-reversal callout) ---------- */
.growth{margin:56px 0 0;background:var(--navy);color:#C4D1E4;border-radius:var(--radius);
  border-top:2px solid var(--gold);border-bottom:2px solid var(--gold);padding:34px 32px}
@media(min-width:760px){.growth{padding:40px 46px}}
.growth-label{font-size:.68rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-light)}
.growth-figs{margin-top:26px;display:grid;gap:28px}
@media(min-width:820px){.growth-figs{grid-template-columns:repeat(3,1fr);gap:44px}}
.growth-fig{display:grid;gap:8px;align-content:start}
.growth-num{font-family:"Newsreader",Georgia,serif;font-size:clamp(2.6rem,6vw,3.3rem);
  line-height:1;color:#fff;font-variant-numeric:tabular-nums}
.growth-cap{font-size:.97rem;line-height:1.55}
.growth-src{margin-top:28px;padding-top:18px;border-top:1px solid rgba(255,255,255,.14);
  font-size:.82rem;color:#94A6C2}
.growth-src cite{font-style:italic}

/* ---------- care plan row ---------- */
.careplan{margin-top:24px;border:1px solid rgba(255,255,255,.15);border-radius:var(--radius-lg);
  background:rgba(255,255,255,.035);padding:28px 30px;display:grid;gap:16px}
@media(min-width:760px){
  .careplan{grid-template-columns:auto 1fr;gap:40px;align-items:start;padding:32px 46px}
}
.care-label{font-size:.68rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#8FA2BF}
.careplan h3{margin-top:8px;font-size:1.5rem;color:#fff}
.care-price{font-family:"Newsreader",serif;font-size:2.1rem;color:var(--gold-light);line-height:1;
  font-variant-numeric:tabular-nums}
.pay-amt small{font-size:1rem;font-family:"Inter",sans-serif;color:#94A6C2;margin-left:2px}
.care-price small{font-size:.92rem;font-family:"Inter",sans-serif;color:#94A6C2}
.care-note{margin-top:12px;font-size:.95rem;color:#B9C6DC;max-width:62ch}

/* The pricing card is two rows now, and the second is the one that matters. */
.paysteps .pay-total{border-top:1px solid rgba(201,162,39,.45)}
.paysteps li:last-child{padding-bottom:0}

/* GHL contact form in the closing section */
.close-or{margin-top:40px;font-size:.98rem;color:#C4D1E4}
.close-form{margin:18px auto 0;max-width:560px;background:#fff;border-radius:12px;padding:8px;min-height:516px}
.close-form iframe{display:block}