/* =========================================================================
   SH Web Studio — Bold Signal / Tiffany (dark grey)
   Palette: Tiffany #21F1A8 · Dark Grey #171717 · Cool White #F2F6F4
   ========================================================================= */

:root{
  --iris:#21F1A8;        /* Tiffany — primary accent */
  --iris-bright:#5cf7c4; /* lighter Tiffany — hover/glints */
  --lace:#F2F6F4;        /* cool near-white text */
  --moss:#16C99A;        /* deeper mint — secondary accent */
  --on-accent:#06140e;   /* near-black text on Tiffany fills */

  --bg:#171717;          /* dark grey canvas */
  --bg-2:#202023;        /* raised panels */
  --ink:var(--lace);
  --muted:#9a9e9c;       /* cool grey */
  --line:rgba(255,255,255,.10);
  --line-2:rgba(255,255,255,.18);

  --maxw:1160px;
  --pad:28px;
  --r:14px;

  --font-display:"Archivo",system-ui,sans-serif;
  --font-body:"Inter",system-ui,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
/* Lenis smooth scroll: hand control to JS when active; native fallback otherwise */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
body{
  background-color:var(--bg);
  background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1.5px);
  background-size:24px 24px;
  background-position:center;
  background-attachment:fixed;
  color:var(--ink);
  font-family:var(--font-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit}
img{display:block;max-width:100%}
h1,h2,h3{font-family:var(--font-display);letter-spacing:-.02em;line-height:1}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.hl{color:var(--moss)}

/* skip link */
.skip{position:absolute;left:-999px;top:8px;z-index:200;background:var(--iris);color:var(--on-accent);
  padding:10px 16px;border-radius:8px;font-weight:500}
.skip:focus{left:12px}

:focus-visible{outline:2px solid var(--iris-bright);outline-offset:3px;border-radius:3px}

/* ----------------------------------------------------- background fx */
#field{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.38}
body > *:not(#field):not(.nav):not(.modal-veil):not(.shchat):not(.mcta){position:relative;z-index:1}

/* ----------------------------------------------------- nav — "Bold Signal"
   Full-bleed solid bar with a hard Tiffany rule, and a Free-quote block that
   runs the full height of the bar and sits flush against the right edge.
   The left padding aligns the logo with the .wrap content grid, so the bar
   reaches edge-to-edge while the logo still lines up with the hero below.
   `50%` resolves against the bar's own width, which keeps it scrollbar-safe
   in a way `50vw` would not. */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;background:var(--bg);
  border-bottom:1px solid var(--iris);
  padding-left:max(var(--pad), calc(50% - var(--maxw)/2 + var(--pad)));
  transition:box-shadow .3s ease}
/* the bar is already opaque, so .solid (set by main.js on scroll) only lifts it */
.nav.solid{box-shadow:0 14px 34px rgba(0,0,0,.45)}
/* nav-inner carries the .wrap class in the markup — neutralise it here so the
   bar can run full width without touching the HTML on six pages */
.nav-inner{max-width:none;padding:0;display:flex;align-items:stretch;
  justify-content:space-between;height:78px}

.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand-logo{height:52px;width:auto;display:block;border-radius:8px}
.brand-mark{height:42px;width:60px;overflow:hidden;border-radius:8px;flex:none;
  display:block;position:relative;background:#0d0d0d}
.brand-mark img{position:absolute;left:50%;top:50%;transform:translate(-50%,-58%);width:118px;max-width:none}
.brand-word{font-family:var(--font-display);font-weight:900;font-size:18px;letter-spacing:-.01em;text-transform:uppercase}
.brand-word span{color:var(--iris-bright)}

.nav-links{display:flex;align-items:center;gap:34px}
.nav-links a{font-family:var(--font-display);font-size:12.5px;font-weight:700;color:var(--muted);
  text-decoration:none;text-transform:uppercase;letter-spacing:.13em;transition:color .2s}
.nav-links a:hover{color:var(--ink)}
/* Full-height block, flush to the bar's right edge — the square corners are
   the point here, not an oversight.
   Scoped as `.nav-links .nav-cta` (0,2,0) deliberately: plain `.nav-cta`
   (0,1,0) loses to `.nav-links a` (0,1,1) and silently inherits the generic
   link's size, weight and padding. */
.nav-links .nav-cta{align-self:stretch;display:flex;align-items:center;margin-left:8px;
  font-family:var(--font-display);font-weight:900;font-size:13px;text-transform:uppercase;
  letter-spacing:.1em;color:var(--on-accent)!important;background:var(--iris);
  padding:0 34px;border-radius:0;transition:background .2s}
.nav-links .nav-cta:hover{background:var(--iris-bright)}

.hamburger{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;
  background:none;border:0;cursor:pointer;padding:8px;min-width:44px;min-height:44px}
.hamburger span{width:24px;height:2px;background:var(--ink);transition:.25s}
.hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ----------------------------------------------------- buttons */
.btn{display:inline-block;font-family:var(--font-display);font-weight:700;font-size:15px;
  text-transform:uppercase;letter-spacing:.03em;text-decoration:none;padding:17px 26px;text-align:center;
  transition:transform .15s ease,background .2s ease,border-color .2s ease;cursor:pointer;border:0}
.btn:active{transform:scale(.98)}
.btn.fill{background:var(--iris);color:var(--on-accent)}
.btn.fill:hover{background:var(--iris-bright)}
.btn.line{background:transparent;color:var(--ink);border:1px solid var(--line-2)}
.btn.line:hover{border-color:var(--ink)}
.btn.sm{padding:12px 18px;font-size:13px}

/* ----------------------------------------------------- hero */
.hero{position:relative;min-height:92vh;display:flex;align-items:flex-end;overflow:hidden;padding-bottom:64px}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg video{width:100%;height:100%;object-fit:cover;display:block}
.hero-bg::after{content:"";position:absolute;inset:0;
  background:
    linear-gradient(100deg,rgba(10,10,10,.82) 0%,rgba(10,10,10,.6) 40%,rgba(10,10,10,.18) 66%,transparent 82%),
    radial-gradient(58% 65% at 28% 28%,rgba(33,241,168,.14),transparent 62%),
    linear-gradient(180deg,rgba(15,15,15,.45) 0%,rgba(15,15,15,.4) 36%,rgba(18,18,18,.9) 74%,#171717 100%)}
@media(prefers-reduced-motion:reduce){
  .hero-bg video{display:none}
  .hero-bg{background:url('assets/hero/poster.jpg') center/cover}
}
.hero-in{position:relative;z-index:1;padding-top:160px}
.eyebrow{font-family:var(--font-display);font-weight:700;font-size:14px;text-transform:uppercase;
  letter-spacing:.06em;color:var(--iris-bright);margin-bottom:24px}
.hero h1{font-weight:900;font-size:clamp(58px,11vw,138px);text-transform:uppercase;line-height:.86;
  text-shadow:0 8px 40px rgba(0,0,0,.4)}
.hero h1 .dot{color:var(--iris)}
.hero-row{display:grid;grid-template-columns:1.25fr .75fr;gap:44px;align-items:end;margin-top:40px}
.sub{font-size:clamp(17px,2vw,19px);color:var(--muted);max-width:46ch;line-height:1.6}
.sub b{color:var(--ink);font-weight:500}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}

.hero-card{position:absolute;right:var(--pad);bottom:64px;z-index:2;display:flex;align-items:center;gap:14px;
  background:rgba(26,26,28,.62);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid var(--line-2);border-radius:16px;padding:14px 20px;box-shadow:0 24px 50px rgba(0,0,0,.4)}
.hero-card b{display:block;font-family:var(--font-display);font-weight:700;font-size:14px;color:var(--lace)}
.hero-card span{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}
.hc-dot{width:9px;height:9px;border-radius:50%;background:var(--moss);flex:none;position:relative}
.hc-dot::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1.5px solid var(--moss);
  opacity:.6;animation:pulse 2.2s ease-out infinite}
@keyframes pulse{0%{transform:scale(.6);opacity:.7}100%{transform:scale(1.7);opacity:0}}
@media(prefers-reduced-motion:reduce){.hc-dot::after{animation:none}}
@media(max-width:760px){.hero-card{display:none}}

/* ----------------------------------------------------- marquee */
.marquee{overflow:hidden;white-space:nowrap;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:14px 0;margin-top:30px}
.marquee-track{display:inline-flex;animation:scroll 32s linear infinite}
.marquee-track span{font-family:var(--font-display);font-weight:700;font-size:14px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);padding-right:0}
.marquee-track b{color:var(--iris-bright);margin:0 24px;font-weight:700}
.sh-mark{display:inline-block;vertical-align:middle;height:34px;width:34px;margin:0 20px}
.sh-mark img{width:100%;height:100%;object-fit:contain;display:block}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ----------------------------------------------------- sections */
.section{padding-block:88px}
.section-head{margin-bottom:46px;max-width:24ch}
.kicker{font-family:var(--font-display);font-weight:700;font-size:13px;text-transform:uppercase;
  letter-spacing:.12em;color:var(--moss);margin-bottom:14px}
.section h2{font-weight:900;font-size:clamp(34px,5vw,56px);text-transform:uppercase}

/* ----------------------------------------------------- service cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line)}
.card{background:var(--bg);padding:34px 28px 38px;position:relative;transition:background .25s ease}
.card:hover{background:var(--bg-2)}
.card h3{font-weight:700;font-size:22px;margin-bottom:12px}
.card p{color:var(--muted);font-size:15px}
.card.feature{background:var(--bg-2)}
.badge{display:inline-block;font-family:var(--font-display);font-weight:700;font-size:12px;text-transform:uppercase;
  letter-spacing:.05em;background:var(--iris);color:var(--on-accent);padding:4px 10px;margin-bottom:16px}
.badge.moss{background:var(--moss);color:var(--on-accent)}

/* ----------------------------------------------------- work */
.work-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.work-card{border:1px solid var(--line);background:var(--bg-2);overflow:hidden;display:flex;flex-direction:column}
.work-scene{height:300px;position:relative;overflow:hidden}
.scene-ship{background:url('assets/work/shipwreck.jpg') center top/cover no-repeat}
.scene-inn{background:url('assets/work/antstreet.jpg') center top/cover no-repeat}
.scene-ship::after,.scene-inn::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(10,10,10,.42),rgba(10,10,10,0) 40%,rgba(10,10,10,.12))}
.work-link .work-scene{transition:transform .5s ease}
.work-link:hover .work-scene,.work-link:focus-visible .work-scene{transform:scale(1.03)}
.scene-lawn{background:linear-gradient(135deg,#1f3a2e,#141414 70%)}
.scene-lawn::after{content:"";position:absolute;inset:0;
  background:radial-gradient(60% 75% at 25% 15%,rgba(33,241,168,.4),transparent 60%)}
.scene-next{background:linear-gradient(135deg,#1c2a25,#141414 70%)}
.scene-next::after{content:"";position:absolute;inset:0;
  background:radial-gradient(60% 75% at 75% 20%,rgba(33,241,168,.42),transparent 60%)}
.scene-bnb{background:url('previews/public/images/GradShirts.jpg') center/cover no-repeat}
.scene-bnb::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(10,10,10,.5),rgba(10,10,10,.05) 42%,rgba(10,10,10,.22))}
.work-tag{position:absolute;left:18px;top:18px;z-index:2;font-family:var(--font-display);font-weight:700;
  font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--lace)}
.work-meta{padding:26px 26px 30px;display:flex;flex-direction:column;gap:18px;flex:1}
.work-meta h3{font-weight:700;font-size:24px;margin-bottom:10px}
.work-meta p{color:var(--muted);font-size:15px}
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:auto}
.chips li{font-family:var(--font-display);font-weight:500;font-size:12px;text-transform:uppercase;letter-spacing:.04em;
  color:var(--muted);border:1px solid var(--line-2);padding:6px 12px}
.work-card.invite .work-meta{justify-content:space-between}
.work-card.invite .btn{align-self:flex-start;margin-top:auto}

/* clickable work card → live preview */
.work-link{text-decoration:none;color:inherit;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.work-link:hover{transform:translateY(-4px);border-color:var(--clay,#14a096);box-shadow:0 18px 40px rgba(0,0,0,.35)}
.work-link:focus-visible{outline:2px solid var(--clay,#14a096);outline-offset:3px}
.work-view{position:absolute;right:18px;top:18px;z-index:2;font-family:var(--font-display);font-weight:700;
  font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--lace);
  background:rgba(0,0,0,.35);border:1px solid var(--line-2);padding:6px 12px;border-radius:999px;
  opacity:0;transform:translateY(-4px);transition:opacity .25s ease,transform .25s ease}
.work-link:hover .work-view,.work-link:focus-visible .work-view{opacity:1;transform:translateY(0)}

/* ----------------------------------------------------- process */
.steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr)}
.steps li{padding:30px 26px 30px 0;border-top:2px solid var(--iris)}
.steps .step-n{font-family:var(--font-display);font-weight:900;font-size:15px;color:var(--moss)}
.steps h3{font-weight:700;font-size:22px;margin:18px 0 10px}
.steps p{color:var(--muted);font-size:14.5px}

/* ----------------------------------------------------- studio */
.studio-lede{font-size:clamp(18px,2.4vw,24px);color:var(--ink);max-width:60ch;line-height:1.45;margin-bottom:48px;
  font-family:var(--font-body)}
.founders{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:760px}
.founder{border:1px solid var(--line);background:var(--bg-2);padding:18px}
.founder-photo{aspect-ratio:4/5;overflow:hidden;margin-bottom:18px;background:#0d0d0d}
.founder-photo img{width:100%;height:100%;object-fit:cover;object-position:center top}
.founder h3{font-weight:700;font-size:22px}
.founder .role{color:var(--iris-bright);font-weight:500;font-size:14px;margin-top:2px}
.founder-contact{display:flex;flex-direction:column;gap:2px;margin-top:14px}
.founder-contact a{color:var(--muted);font-size:14px;text-decoration:none}
.founder-contact a:hover{color:var(--ink)}

/* ----------------------------------------------------- contact */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.contact-intro .sub{margin-top:18px}
.contact-facts{margin-top:34px;display:flex;flex-direction:column;gap:18px}
.contact-facts dt{font-family:var(--font-display);font-weight:700;font-size:12px;text-transform:uppercase;
  letter-spacing:.08em;color:var(--moss);margin-bottom:4px}
.contact-facts dd{font-size:16px}
.contact-facts a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line-2)}
.contact-facts a:hover{border-color:var(--ink)}

.contact-form{display:flex;flex-direction:column;gap:18px;background:var(--bg-2);border:1px solid var(--line);padding:30px}
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-family:var(--font-display);font-weight:500;font-size:13px;text-transform:uppercase;letter-spacing:.04em}
.field input,.field select,.field textarea{font-family:var(--font-body);font-size:16px;color:var(--ink);
  background:var(--bg);border:1px solid var(--line-2);padding:13px 14px;border-radius:8px;width:100%;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--iris-bright);outline:none}
.field select{appearance:none}
.err{color:#e89b9b;font-size:12.5px;display:none}
.field.invalid .err{display:block}
.field.invalid input,.field.invalid textarea{border-color:#e89b9b}
.form-note{font-size:14px;color:var(--moss);min-height:1.2em}

/* ----------------------------------------------------- footer */
.footer{border-top:1px solid var(--line);padding:56px 0 40px;margin-top:40px}
.footer-grid{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;align-items:flex-start}
.footer-logo{width:160px;border-radius:10px;margin-bottom:16px}
.footer-brand p{color:var(--muted);font-size:14px;max-width:34ch}
.footer-nav{display:flex;flex-direction:column;gap:10px}
.footer-nav a{color:var(--muted);font-size:14px;text-decoration:none;text-transform:uppercase;letter-spacing:.04em}
.footer-nav a:hover{color:var(--ink)}
.footer-base{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--muted);
  font-size:13px;margin-top:40px;padding-top:24px;border-top:1px solid var(--line)}

/* ----------------------------------------------------- reveal */
[data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
[data-reveal].in{opacity:1;transform:none}

/* ----------------------------------------------------- stats strip */
.stats-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);margin-top:64px}
.stats-strip .stat{background:var(--bg);padding:26px 22px;text-align:center}
.stats-strip .stat b{display:block;font-family:var(--font-display);font-weight:900;font-size:clamp(26px,3vw,32px);
  color:var(--iris-bright);line-height:1}
.stats-strip .stat span{display:block;margin-top:8px;font-size:13px;color:var(--muted)}

/* wide section heads with a lede */
.section-head.wide{max-width:64ch}
.section-lede{color:var(--muted);font-size:17px;margin-top:16px;max-width:62ch}
.section-lede em{color:var(--ink);font-style:normal;border-bottom:1px solid var(--line-2)}

/* ----------------------------------------------------- samples */
.samples-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.sample-card{border:1px solid var(--line);background:var(--bg-2);overflow:hidden;display:flex;flex-direction:column;
  text-decoration:none;color:inherit;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.sample-card:hover{transform:translateY(-5px);border-color:var(--iris);box-shadow:0 18px 40px rgba(0,0,0,.35)}
.sample-card:focus-visible{outline:2px solid var(--iris-bright);outline-offset:3px}
.sample-scene{height:184px;position:relative;display:grid;place-items:center;overflow:hidden;
  background-position:center;background-size:cover;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.sample-card:hover .sample-scene{transform:scale(1.05)}
.sample-scene .work-view{position:relative;z-index:1}
.sample-scene[class*="s-"]::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(10,10,10,.5),rgba(10,10,10,0) 55%)}
.s-land{background:url('previews/demos/assets/landscaping/hero.png') center/cover no-repeat}
.s-food{background:url('previews/demos/assets/restaurant/hero.png') center/cover no-repeat}
.s-salon{background:url('previews/demos/assets/salon/hero.png') center/cover no-repeat}
.s-realty{background:url('previews/demos/assets/realty/hero.png') center/cover no-repeat}
.s-coffee{background:url('previews/demos/assets/daybreak/hero.png') center/cover no-repeat}
.s-nonprofit{background:url('previews/demos/assets/familypromise/hero.png') center/cover no-repeat}
.s-custom{background:url('previews/demos/assets/inkhaus/g2.png') center/cover no-repeat}
.s-vintage{background:url('previews/demos/assets/magpie/hero.png') center/cover no-repeat}
.s-venue{background:url('previews/demos/assets/magnolia/hero.jpg') center/cover no-repeat}
.s-plumb{background:url('previews/demos/assets/bluebonnet/hero.png') center/cover no-repeat}

/* flagship sample — the venue demo gets top billing */
.sample-card.flagship{grid-column:span 2;border-color:var(--line-2)}
.sample-card.flagship .sample-scene{height:246px}
.sample-card.flagship .sample-meta h3{font-size:22px}
.sample-card.flagship .sample-tag{color:var(--iris-bright)}
.sample-card.flagship:hover{border-color:var(--iris)}
.sample-meta{padding:20px;display:flex;flex-direction:column;gap:7px;flex:1}
.sample-tag{font-family:var(--font-display);font-weight:700;font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--moss)}
.sample-meta h3{font-weight:700;font-size:18px}
.sample-meta p{color:var(--muted);font-size:14px}

/* ----------------------------------------------------- pricing */
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:start}
.price-card{border:1px solid var(--line);background:var(--bg);padding:34px 28px 32px;display:flex;
  flex-direction:column;position:relative}
.price-card.featured{background:var(--bg-2);border-color:var(--iris);box-shadow:0 20px 50px rgba(33,241,168,.18)}
.price-badge{position:absolute;top:-13px;left:28px;font-family:var(--font-display);font-weight:700;font-size:11px;
  letter-spacing:.06em;text-transform:uppercase;background:var(--iris);color:var(--on-accent);padding:5px 12px}
.price-card h3{font-weight:800;font-size:24px}
.price{font-family:var(--font-display);font-weight:900;font-size:40px;color:var(--ink);margin:14px 0 2px;line-height:1}
.price span{font-size:20px;color:var(--muted);font-weight:700}
.price-for{color:var(--iris-bright);font-size:14px;margin-bottom:20px}
.price-list{list-style:none;display:flex;flex-direction:column;gap:11px;margin:0 0 26px;flex:1}
.price-list li{position:relative;padding-left:26px;color:var(--muted);font-size:15px}
.price-list li::before{content:"✓";position:absolute;left:0;color:var(--moss);font-weight:700}
.price-card .btn{width:100%}
.retainers{margin-top:24px;border:1px solid var(--line);background:var(--bg-2);padding:24px 28px}
.retainers-label{font-family:var(--font-display);font-weight:700;font-size:12px;text-transform:uppercase;
  letter-spacing:.08em;color:var(--moss);margin-bottom:16px}
.retainers-row{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.retainers-row div{display:flex;flex-direction:column;gap:3px}
.retainers-row b{font-weight:700;font-size:16px}
.retainers-row span{color:var(--muted);font-size:14px}

/* ----------------------------------------------------- faq */
.faq-list{border-top:1px solid var(--line);max-width:880px}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{list-style:none;cursor:pointer;padding:22px 44px 22px 0;position:relative;
  font-family:var(--font-display);font-weight:700;font-size:18px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);
  font-size:26px;color:var(--iris-bright);transition:transform .2s}
.faq-item[open] summary::after{content:"–"}
.faq-item p{color:var(--muted);font-size:15.5px;padding:0 40px 24px 0;max-width:74ch}

/* booking cta */
.book-cta{margin-top:26px}

/* new sections responsive */
@media (max-width:920px){
  .stats-strip{grid-template-columns:1fr 1fr}
  .samples-grid{grid-template-columns:1fr 1fr}
  .pricing-grid{grid-template-columns:1fr}
  .retainers-row{grid-template-columns:1fr}
}
@media (max-width:560px){
  .stats-strip,.samples-grid{grid-template-columns:1fr}
  .sample-card.flagship{grid-column:auto}
}

/* ----------------------------------------------------- responsive */
@media (max-width:920px){
  .hero-row{grid-template-columns:1fr;gap:28px;align-items:start}
  .cards{grid-template-columns:1fr 1fr}
  .work-grid,.contact-grid{grid-template-columns:1fr;gap:24px}
  .steps{grid-template-columns:1fr 1fr}
}
@media (max-width:680px){
  /* shorter bar on phones; the dropdown hangs off the bottom of it, so this
     inset must track .nav-inner's height */
  .nav-inner{height:64px}
  .brand-logo{height:44px}
  .nav-links{position:fixed;inset:65px 0 auto 0;flex-direction:column;align-items:flex-start;gap:0;
    background:rgba(18,18,18,.97);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);
    padding:0;transform:translateY(-130%);transition:transform .3s ease;height:0;overflow:hidden;
    pointer-events:none}
  .nav-links.open{transform:translateY(0);height:auto;padding:14px 0 22px;pointer-events:auto}
  .nav-links a{padding:14px var(--pad);width:100%}
  /* Undo the full-height block treatment inside the dropdown. `align-self:
     stretch` + `width:auto` lets the margins set the width — a percentage
     width here loses to `.nav-links a{width:100%}` and overshoots the screen. */
  .nav-links .nav-cta{align-self:stretch;justify-content:center;width:auto;
    margin:8px var(--pad) 0;padding:14px 18px}
  .hamburger{display:flex}
  .cards,.steps,.founders{grid-template-columns:1fr}
  .founders{max-width:none}
  .hero{min-height:76vh;padding-bottom:40px}
  .hero-in{padding-top:120px}
  .section{padding-block:60px}
}

/* ----------------------------------------------------- reduced motion */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;scroll-behavior:auto!important}
  [data-reveal]{opacity:1;transform:none;transition:none}
  .marquee-track{animation:none}
  #field{display:none}
}

/* ========================================================== before / after */
.ba{margin:0 0 46px;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--bg-2)}
.ba:last-child{margin-bottom:0}
.ba-bar{display:flex;align-items:center;gap:7px;padding:11px 16px;border-bottom:1px solid var(--line)}
.ba-bar i{width:10px;height:10px;border-radius:50%;background:var(--line-2)}
.ba-bar em{margin-left:10px;font-style:normal;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.ba-stage{position:relative;aspect-ratio:1200/806;overflow:hidden;cursor:ew-resize}
.ba-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ba-after{position:absolute;inset:0;clip-path:inset(0 0 0 var(--pos))}
.ba-line{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;background:var(--iris);transform:translateX(-1px);z-index:2;box-shadow:0 0 18px rgba(33,241,168,.45)}
.ba-grab{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;border-radius:50%;
  background:var(--iris);color:var(--on-accent);display:grid;place-items:center;font-size:18px;font-weight:700;
  box-shadow:0 6px 20px rgba(0,0,0,.45)}
.ba-chip{position:absolute;top:14px;z-index:3;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:7px 12px;border-radius:999px;background:rgba(23,23,23,.78);border:1px solid var(--line-2);color:var(--lace);
  backdrop-filter:blur(6px);pointer-events:none}
.ba-chip.l{left:14px}
.ba-chip.r{right:14px;background:rgba(33,241,168,.16);border-color:rgba(33,241,168,.5);color:var(--iris-bright)}
.ba-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;z-index:4;-webkit-appearance:none;appearance:none;background:transparent}
.ba-stage:focus-within .ba-line{box-shadow:0 0 0 3px rgba(33,241,168,.5),0 0 18px rgba(33,241,168,.45)}
.ba-cap{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:16px 18px;border-top:1px solid var(--line)}
.ba-cap p{margin:0;color:var(--muted);font-size:15px}
.ba-cap p strong{color:var(--ink)}
@media(max-width:640px){
  .ba-chip{font-size:9px;padding:5px 9px;top:10px}
  .ba-chip.l{left:10px}.ba-chip.r{right:10px}
  .ba-grab{width:34px;height:34px;font-size:15px}
  .ba-cap{padding:14px}
}

/* ========================================================== client login */
[hidden]{display:none!important} /* keep the hidden attr authoritative over display rules */
.auth-wrap{min-height:calc(100vh - 240px);padding-top:170px}
.auth-wrap .wrap{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.auth-head h1{font-weight:900;font-size:clamp(40px,6vw,72px);text-transform:uppercase;line-height:.92;margin-bottom:20px}
.auth-head .kicker{margin-bottom:14px}
.auth-head .sub{max-width:38ch}

.auth-card{background:var(--bg-2);border:1px solid var(--line);padding:30px;max-width:520px;width:100%;justify-self:end}
.auth-banner{border:1px solid rgba(33,241,168,.4);background:rgba(33,241,168,.07);color:var(--lace);
  font-size:13.5px;padding:12px 14px;border-radius:10px;margin-bottom:22px;line-height:1.5}
.auth-banner b{color:var(--iris-bright)}
.auth-banner code{font-size:12px;background:rgba(0,0,0,.35);padding:2px 6px;border-radius:5px}

.auth-tabs{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
  border:1px solid var(--line);margin-bottom:24px}
.auth-tab{font-family:var(--font-display);font-weight:700;font-size:13px;text-transform:uppercase;
  letter-spacing:.05em;color:var(--muted);background:var(--bg);border:0;padding:13px 10px;cursor:pointer;
  transition:background .2s,color .2s}
.auth-tab:hover{color:var(--ink)}
.auth-tab.active{background:var(--iris);color:var(--on-accent)}

.auth-form{display:flex;flex-direction:column;gap:18px}
.auth-form .btn{width:100%}
.auth-form .btn:disabled{opacity:.55;cursor:not-allowed;transform:none}
.hint{font-size:12.5px;color:var(--muted)}
.auth-note{min-height:1.3em}
.auth-note.is-err{color:#e89b9b}
.auth-note.is-ok{color:var(--iris-bright)}

.auth-alt{display:flex;flex-direction:column;gap:8px;margin-top:2px}
.auth-alt a{color:var(--muted);font-size:13.5px;text-decoration:none;border-bottom:1px solid var(--line-2);
  align-self:flex-start;transition:color .2s,border-color .2s}
.auth-alt a:hover{color:var(--iris-bright);border-color:var(--iris-bright)}

.auth-sep{display:flex;align-items:center;gap:12px;margin:22px 0 16px;color:var(--muted);font-size:12px;
  text-transform:uppercase;letter-spacing:.08em;font-family:var(--font-display);font-weight:700}
.auth-sep::before,.auth-sep::after{content:"";flex:1;height:1px;background:var(--line-2)}
#phone-pane{display:flex;flex-direction:column;gap:14px}
#phone-verify-row{display:flex;flex-direction:column;gap:14px}

.turnstile-slot{margin-top:18px}
.turnstile-slot:empty{display:none}
.auth-secure{margin-top:20px;padding-top:16px;border-top:1px solid var(--line);color:var(--muted);font-size:12.5px}

.auth-sub{font-weight:800;font-size:26px;margin-bottom:8px;overflow-wrap:anywhere}
.auth-since{color:var(--muted);font-size:14px;margin-bottom:22px}
.signed-card{border:1px solid var(--line-2);background:var(--bg);padding:20px;margin-bottom:22px}
.signed-card b{font-family:var(--font-display);font-weight:700;font-size:15px;display:block;margin-bottom:8px;
  color:var(--iris-bright)}
.signed-card p{color:var(--muted);font-size:14.5px}
.signed-card a{color:var(--ink)}

@media (max-width:920px){
  .auth-wrap{padding-top:140px}
  .auth-wrap .wrap{grid-template-columns:1fr;gap:36px}
  .auth-card{justify-self:stretch;max-width:none}
}

/* ------------------------------------------------------ login popup */
.modal-veil{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:20px;
  background:rgba(10,10,10,.66);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  opacity:0;transition:opacity .25s ease}
.modal-veil.show{opacity:1}
.modal-card{position:relative;background:var(--bg-2);border:1px solid var(--line-2);padding:34px 30px 30px;
  width:min(420px,100%);max-height:calc(100vh - 40px);overflow-y:auto;
  box-shadow:0 30px 80px rgba(0,0,0,.6);transform:translateY(14px);transition:transform .25s ease}
.modal-veil.show .modal-card{transform:none}
.modal-card h3{font-weight:900;font-size:30px;text-transform:uppercase;margin:6px 0 10px}
.modal-sub{color:var(--muted);font-size:14.5px;margin-bottom:20px}
.modal-card .auth-banner{margin-bottom:18px}
.modal-close{position:absolute;top:14px;right:14px;width:40px;height:40px;border:1px solid var(--line-2);
  background:transparent;color:var(--muted);font-size:22px;line-height:1;cursor:pointer;border-radius:8px;
  transition:color .2s,border-color .2s}
.modal-close:hover{color:var(--ink);border-color:var(--ink)}
.modal-alt{margin-top:18px}
body.modal-open{overflow:hidden}
@media(prefers-reduced-motion:reduce){
  .modal-veil,.modal-card{transition:none}
}

/* ========================================================== chat assistant */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.shchat{position:fixed;right:22px;bottom:22px;z-index:250;display:flex;flex-direction:column;align-items:flex-end;gap:14px}
.shchat-launch{position:relative;display:flex;align-items:center;gap:10px;border:1px solid rgba(33,241,168,.45);
  background:rgba(23,23,23,.88);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:var(--lace);
  padding:13px 20px 13px 16px;border-radius:999px;cursor:pointer;box-shadow:0 18px 44px rgba(0,0,0,.5);
  transition:border-color .2s,transform .2s,box-shadow .2s}
.shchat-launch:hover{border-color:var(--iris);transform:translateY(-2px);box-shadow:0 22px 50px rgba(33,241,168,.18)}
.shchat-launch-icon{display:grid;place-items:center;color:var(--iris-bright)}
.shchat-launch-label{font-family:var(--font-display);font-weight:700;font-size:13px;letter-spacing:.05em;text-transform:uppercase}
.shchat-dot{position:absolute;top:6px;right:8px;width:8px;height:8px;border-radius:50%;background:var(--iris)}
.shchat-dot::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1.5px solid var(--iris);
  opacity:.6;animation:pulse 2.2s ease-out infinite}
.shchat.open .shchat-launch{display:none}

.shchat-panel{width:min(390px,calc(100vw - 32px));height:min(560px,calc(100vh - 110px));display:flex;flex-direction:column;
  background:var(--bg-2);border:1px solid var(--line-2);border-radius:18px;overflow:hidden;
  box-shadow:0 34px 90px rgba(0,0,0,.65)}
.shchat-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;
  border-bottom:1px solid var(--line);background:rgba(33,241,168,.06)}
.shchat-title{display:block;font-family:var(--font-display);font-weight:700;font-size:16px}
.shchat-sub{display:flex;align-items:center;gap:7px;margin-top:3px}
.shchat-sub em{font-style:normal;font-size:12px;color:var(--muted)}
.shchat-status{width:8px;height:8px;border-radius:50%;background:var(--moss);flex:none}
.shchat-close{width:36px;height:36px;flex:none;border:1px solid var(--line-2);background:transparent;color:var(--muted);
  font-size:20px;line-height:1;border-radius:8px;cursor:pointer;transition:color .2s,border-color .2s}
.shchat-close:hover{color:var(--ink);border-color:var(--ink)}

.shchat-msgs{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:12px;overscroll-behavior:contain}
.shchat-msg{max-width:86%;padding:11px 14px;border-radius:14px;font-size:14.5px;line-height:1.55;white-space:normal;
  overflow-wrap:break-word}
.shchat-msg.bot{align-self:flex-start;background:var(--bg);border:1px solid var(--line);border-bottom-left-radius:4px;color:var(--ink)}
.shchat-msg.me{align-self:flex-end;background:var(--iris);color:var(--on-accent);border-bottom-right-radius:4px;font-weight:500}
.shchat-msg a{color:var(--iris-bright);text-decoration:none;border-bottom:1px solid rgba(33,241,168,.5)}
.shchat-msg a:hover{border-color:var(--iris-bright)}
.shchat-msg.me a{color:var(--on-accent);border-color:rgba(6,20,14,.5)}

.shchat-typing{display:flex;gap:5px;align-items:center;padding:14px 16px}
.shchat-typing span{width:7px;height:7px;border-radius:50%;background:var(--muted);animation:shchat-blink 1.2s infinite}
.shchat-typing span:nth-child(2){animation-delay:.15s}
.shchat-typing span:nth-child(3){animation-delay:.3s}
@keyframes shchat-blink{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}

.shchat-chips{display:flex;flex-wrap:wrap;gap:8px;padding:0 18px 12px}
.shchat-chip{font-family:var(--font-body);font-size:12.5px;color:var(--lace);background:transparent;
  border:1px solid var(--line-2);border-radius:999px;padding:7px 13px;cursor:pointer;transition:border-color .2s,background .2s}
.shchat-chip:hover{border-color:var(--iris);background:rgba(33,241,168,.08)}

.shchat-form{display:flex;gap:10px;padding:14px 16px;border-top:1px solid var(--line)}
.shchat-form input{flex:1;font-family:var(--font-body);font-size:15px;color:var(--ink);background:var(--bg);
  border:1px solid var(--line-2);padding:11px 14px;border-radius:10px;min-width:0}
.shchat-form input:focus{border-color:var(--iris-bright);outline:none}
.shchat-send{width:46px;flex:none;font-size:19px;border:0;border-radius:10px;background:var(--iris);color:var(--on-accent);
  cursor:pointer;transition:background .2s}
.shchat-send:hover{background:var(--iris-bright)}
.shchat-foot{padding:0 18px 14px;font-size:11.5px;color:var(--muted)}
.shchat-foot a{color:var(--iris-bright);text-decoration:none}

@media(max-width:480px){
  .shchat{right:12px;bottom:12px}
  .shchat-panel{width:calc(100vw - 24px);height:min(560px,calc(100dvh - 90px))}
  .shchat-launch-label{display:none}
  .shchat-launch{padding:14px}
}
@media(prefers-reduced-motion:reduce){
  .shchat-dot::after,.shchat-typing span{animation:none}
  .shchat-launch:hover{transform:none}
}

/* ========================================================== AI page */
.ai-try{border:1px solid rgba(33,241,168,.4);background:rgba(33,241,168,.06);border-radius:18px;
  padding:34px 32px;display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap}
.ai-try h3{font-weight:800;font-size:clamp(22px,3vw,30px);text-transform:uppercase;margin-bottom:8px}
.ai-try p{color:var(--muted);font-size:15.5px;max-width:52ch}
.ai-try .btn{flex:none}

.ai-note{margin-top:22px;border:1px solid var(--line);background:var(--bg-2);padding:20px 24px;
  color:var(--muted);font-size:14.5px;max-width:74ch}
.ai-note b{color:var(--ink)}

.setup-line{color:var(--muted);font-size:13.5px;margin-top:10px}

/* banner card on the homepage pointing at the AI page */
.ai-banner{margin-top:26px;border:1px solid rgba(33,241,168,.45);background:linear-gradient(120deg,rgba(33,241,168,.10),rgba(23,23,23,0) 55%),var(--bg-2);
  padding:28px 30px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.ai-banner-copy h3{font-weight:800;font-size:clamp(20px,2.6vw,26px);text-transform:uppercase;margin:10px 0 8px}
.ai-banner-copy p{color:var(--muted);font-size:15px;max-width:60ch}
.ai-banner .btn{flex:none}

/* before/after — side-by-side on desktop, smaller frames */
.ba-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:stretch}
.ba-grid .ba{margin:0;display:flex;flex-direction:column}
.ba-grid .ba-cap{margin-top:auto}
.ba-grid .ba-chip{font-size:9px;padding:5px 9px;top:10px}
.ba-grid .ba-chip.l{left:10px}
.ba-grid .ba-chip.r{right:10px}
.ba-grid .ba-grab{width:32px;height:32px;font-size:14px}
.ba-grid .ba-bar{padding:9px 14px}
.ba-grid .ba-bar em{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ba-grid .ba-cap{padding:13px 15px;gap:10px}
.ba-grid .ba-cap p{font-size:13.5px}
@media(max-width:880px){
  .ba-grid{grid-template-columns:1fr;gap:30px}
}

/* ============================================ sticky mobile call/quote bar */
/* Phone-only. Buyers here are contractors on a phone between jobs — a
   persistent call/quote bar is the single highest-converting element on the
   page. Desktop already has the nav CTA, so it stays hidden there. */
.mcta{
  position:fixed;left:0;right:0;bottom:0;z-index:240;
  display:none;gap:10px;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:rgba(23,23,23,.94);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-top:1px solid var(--line-2);
  transform:translateY(102%);
  transition:transform .28s cubic-bezier(.22,1,.36,1);
}
.mcta.show{transform:translateY(0)}

.mcta-btn{
  flex:1;display:flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-display);font-weight:700;font-size:14.5px;
  text-transform:uppercase;letter-spacing:.03em;text-decoration:none;
  padding:15px 14px;border-radius:11px;min-height:50px;
  transition:background .2s ease,border-color .2s ease;
}
.mcta-btn:active{transform:scale(.985)}
.mcta-call{flex:0 0 34%;background:transparent;color:var(--ink);border:1px solid var(--line-2)}
.mcta-call svg{flex:none}
.mcta-quote{background:var(--iris);color:var(--on-accent)}

/* lift the chat launcher clear of the bar while it's up */
body.mcta-on .shchat{bottom:calc(84px + env(safe-area-inset-bottom));transition:bottom .28s ease}

@media(max-width:760px){
  .mcta{display:flex}
  /* so the footer's last line never hides under the bar */
  body.mcta-on{padding-bottom:74px}
}
@media(prefers-reduced-motion:reduce){
  .mcta{transition:none}
  body.mcta-on .shchat{transition:none}
}

/* ================================================== legal pages (privacy) */
.legal{max-width:76ch;padding-top:132px}
.legal h1{font-family:var(--font-display);font-weight:900;text-transform:uppercase;
  font-size:clamp(34px,6vw,58px);line-height:1.02;letter-spacing:-.02em;margin:10px 0 14px}
.legal-meta{color:var(--muted);font-size:14px;letter-spacing:.04em;text-transform:uppercase;
  font-family:var(--font-display);font-weight:700;margin-bottom:30px}
.legal-lede{font-size:18.5px;line-height:1.66;border-left:2px solid var(--iris);
  padding-left:22px;margin-bottom:44px}
.legal h2{font-family:var(--font-display);font-weight:800;text-transform:uppercase;
  font-size:clamp(20px,2.6vw,26px);letter-spacing:.01em;margin:46px 0 14px;
  padding-top:20px;border-top:1px solid var(--line)}
.legal h3{font-family:var(--font-display);font-weight:700;font-size:17px;
  color:var(--iris-bright);margin:28px 0 10px}
.legal p{color:var(--muted);font-size:16.5px;line-height:1.72;margin-bottom:16px}
.legal p b{color:var(--ink);font-weight:500}
.legal a{color:var(--iris-bright);text-decoration:none;border-bottom:1px solid rgba(33,241,168,.35)}
.legal a:hover{border-bottom-color:var(--iris)}
.legal-list{list-style:none;margin:0 0 18px;padding:0}
.legal-list li{color:var(--muted);font-size:16.5px;line-height:1.6;padding:11px 0 11px 20px;
  border-bottom:1px solid var(--line);position:relative}
.legal-list li::before{content:"";position:absolute;left:0;top:19px;width:7px;height:7px;
  border-radius:50%;background:var(--iris)}
.legal-list li b{color:var(--ink);font-weight:600}
.legal-list a{border-bottom:0}
.legal-back{margin-top:52px}
.legal-back .btn{border-bottom:0}

@media(max-width:680px){
  .legal{padding-top:104px}
  .legal-lede{font-size:17px;padding-left:16px}
}

/* ======================================= 404 / not found + thank-you page
   .nf and .ty share the centred single-column shell, the link cards and the
   help line; only the page-specific pieces below differ. */
.nf,.ty{position:relative;padding-top:150px;max-width:900px}
.nf-code{position:absolute;top:96px;right:0;font-family:var(--font-display);font-weight:900;
  font-size:clamp(120px,22vw,250px);line-height:1;color:rgba(255,255,255,.035);
  letter-spacing:-.04em;pointer-events:none;user-select:none}
.nf h1,.ty h1{font-family:var(--font-display);font-weight:900;text-transform:uppercase;
  font-size:clamp(42px,8vw,86px);line-height:.96;letter-spacing:-.025em;margin:10px 0 22px}
.nf .hl,.ty .hl{color:var(--iris)}
.nf .dot,.ty .dot{color:var(--iris)}
.nf-sub,.ty-sub{color:var(--muted);font-size:18px;line-height:1.65;max-width:56ch;margin-bottom:34px}
.nf-cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:64px}

/* ---- thank-you specifics ---- */
.ty-mark{width:56px;height:56px;display:grid;place-items:center;border-radius:50%;
  border:1px solid rgba(33,241,168,.45);background:rgba(33,241,168,.08);
  color:var(--iris);margin-bottom:20px}
.ty-mark svg{width:26px;height:26px}
@media(prefers-reduced-motion:no-preference){
  .ty-mark{animation:ty-pop .5s cubic-bezier(.2,.9,.3,1.2) both}
  @keyframes ty-pop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}
}

/* book-a-call band — the primary action on this page */
.ty-book{display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap;
  border:1px solid rgba(33,241,168,.4);background:rgba(33,241,168,.06);
  border-radius:18px;padding:26px 28px;margin-bottom:52px}
.ty-book-copy b{display:block;font-family:var(--font-display);font-weight:700;
  font-size:19px;margin-bottom:6px}
.ty-book-copy span{display:block;color:var(--muted);font-size:15px;line-height:1.6;max-width:52ch}
.ty-book .btn{flex:none}

/* what happens next */
.ty-steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:64px}
.ty-steps li{position:relative;padding:24px;border:1px solid var(--line);
  border-radius:var(--r);background:var(--bg-2)}
.ty-step-n{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;
  background:var(--iris);color:var(--on-accent);font-family:var(--font-display);
  font-weight:700;font-size:14px;margin-bottom:14px}
.ty-steps b{display:block;font-family:var(--font-display);font-weight:700;
  font-size:16.5px;margin-bottom:6px}
.ty-steps span:not(.ty-step-n){display:block;color:var(--muted);font-size:14.5px;line-height:1.55}

.nf-links-label{font-family:var(--font-display);font-weight:700;font-size:13px;
  text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin-bottom:18px}
.nf-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.nf-card{display:block;padding:22px 24px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--bg-2);text-decoration:none;transition:border-color .2s ease,transform .2s ease}
.nf-card:hover{border-color:var(--iris);transform:translateY(-2px)}
.nf-card b{display:block;font-family:var(--font-display);font-weight:700;font-size:16.5px;
  color:var(--ink);margin-bottom:6px}
.nf-card span{display:block;color:var(--muted);font-size:14.5px;line-height:1.55}
.nf-help{margin-top:46px;color:var(--muted);font-size:15px}
.nf-help a{color:var(--iris-bright);text-decoration:none;border-bottom:1px solid rgba(33,241,168,.35)}

@media(max-width:880px){
  .ty-steps{grid-template-columns:1fr}
}
@media(max-width:680px){
  .nf,.ty{padding-top:112px}
  .nf-grid{grid-template-columns:1fr}
  .nf-cta .btn{flex:1;min-width:100%}
  .ty-book{padding:22px}
  .ty-book .btn{width:100%;text-align:center}
}