/* Verona AI prototype: shared styles. Tokens, base, nav, footer, components, motion. Page-specific styles live in each page. */
  /* PostScript (CFF) OpenType files: the TrueType web files have hinting that breaks the capital M at small sizes */
  /* Fonts (19 Oct 2026): Gilroy first, as the brand style guide says, with Urbanist as the back-up.
     Urbanist is self-hosted (assets/fonts/urbanist, SIL Open Font License), so no font requests go to other companies.
     Gilroy is a paid font: once the web licence is bought, put its .woff2 files in assets/fonts/gilroy and uncomment
     the Gilroy @font-face lines below. Until then everyone sees Urbanist (or Gilroy, if it's installed on their computer).
     Grift, the previous font, is kept in assets/fonts; the old stylesheet is in prototype/archive/pre-gilroy-2026-10-19/. */
  @font-face{font-family:"Urbanist";src:url("assets/fonts/urbanist/urbanist-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
  @font-face{font-family:"Urbanist";src:url("assets/fonts/urbanist/urbanist-latin-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
  @font-face{font-family:"Urbanist";src:url("assets/fonts/urbanist/urbanist-latin-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
  @font-face{font-family:"Urbanist";src:url("assets/fonts/urbanist/urbanist-latin-600-normal.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
  @font-face{font-family:"Urbanist";src:url("assets/fonts/urbanist/urbanist-latin-700-normal.woff2") format("woff2");font-weight:700 900;font-style:normal;font-display:swap}
  /* @font-face{font-family:"Gilroy";src:url("assets/fonts/gilroy/Gilroy-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
     @font-face{font-family:"Gilroy";src:url("assets/fonts/gilroy/Gilroy-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
     @font-face{font-family:"Gilroy";src:url("assets/fonts/gilroy/Gilroy-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
     @font-face{font-family:"Gilroy";src:url("assets/fonts/gilroy/Gilroy-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap} */
  :root{
    --white:#FFFFFF; --grey:#E1E1E1; --navy:#252B3B; --lime:#C4F533;
    --ink:#000000;
    --navy-60:#595959; --navy-40:#595959;
    --white-70:#B9C0CC; --white-50:#B9C0CC;
    --font-display:"Gilroy","Urbanist",system-ui,sans-serif;
    --font-body:"Gilroy","Urbanist",system-ui,sans-serif;
    --font-mono:"Gilroy","Urbanist",system-ui,sans-serif;
    --container:1440px; --gutter:clamp(20px,3.5vw,40px);
    --section:clamp(5rem,10vw,9rem);
    --r-sm:8px; --r-md:16px; --ease:cubic-bezier(.22,1,.36,1);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{font-family:var(--font-body);color:var(--ink);background:var(--white);line-height:1.6;font-size:17px;-webkit-font-smoothing:antialiased}
  img{display:block;max-width:100%}
  a{color:inherit;text-decoration:none}
  h1,h2,h3{font-family:var(--font-display);letter-spacing:-.02em;line-height:1.02;font-weight:700}
  .container{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
  .section{padding:var(--section) 0;position:relative}
  .rule{border-top:1px solid var(--grey)}

  /* tile grid */
  .tiles{position:relative}
  .tiles::before{content:"";position:absolute;inset:0;pointer-events:none;
    background-image:linear-gradient(to right,rgba(225,225,225,.42) 1px,transparent 1px),linear-gradient(to bottom,rgba(225,225,225,.42) 1px,transparent 1px);
    background-size:64px 64px;
    -webkit-mask-image:linear-gradient(to bottom,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 12%,#000 88%,transparent)}
  .tiles>*{position:relative}

  /* type helpers */
  .eyebrow{font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;display:inline-flex;align-items:center;gap:12px;color:var(--navy-60)}
  .eyebrow::before{content:"";width:24px;height:2px;background:var(--lime)}
  .dark .eyebrow{color:var(--white-70)}
  .h-section{font-size:clamp(2rem,4.2vw,3.5rem);margin:.6rem 0 1.2rem;max-width:18ch}
  .lead{font-size:clamp(1.05rem,1.4vw,1.25rem);color:var(--navy-60);max-width:56ch}
  .dark .lead{color:var(--white-70)}
  .accent{color:var(--lime)}

  /* buttons */
  .btn{display:inline-flex;align-items:center;gap:10px;padding:14px 22px;border-radius:var(--r-sm);font-family:inherit;font-weight:600;font-size:15px;border:1px solid transparent;transition:transform .2s var(--ease),background .2s;cursor:pointer} /* font-family: <button>s don't inherit Grift on their own */
  .btn:hover{transform:translateY(-2px)}
  .btn-primary{background:var(--lime);color:var(--ink)}
  .btn-ghost{border-color:var(--ink);color:var(--ink);background:transparent}
  .dark .btn-ghost{border-color:rgba(255,255,255,.4);color:var(--white)}
  .btn .arr{font-family:var(--font-mono);transition:transform .2s var(--ease)}
  .btn:hover .arr{transform:translateX(4px)}
  .tag{display:inline-block;font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;padding:6px 12px;border:1px solid var(--grey);border-radius:999px;color:var(--navy-60)}
  .dark .tag{border-color:rgba(255,255,255,.22);color:var(--white-70)}

  /* nav */
  .nav{position:fixed;top:20px;left:0;right:0;z-index:50;display:flex;justify-content:center;padding:0 var(--gutter)}
  .nav-inner{display:flex;align-items:center;gap:28px;background:var(--white);border:1px solid var(--grey);border-radius:999px;padding:8px 10px 8px 18px;max-width:900px;width:100%}
  .brand{display:flex;align-items:center;gap:9px;font-family:var(--font-display);font-weight:600;font-size:18px;letter-spacing:-.035em;line-height:1} /* same face as the hero wheel and the brand study lockup: Grift SemiBold, -0.035em */
  .brand img{height:22px;width:auto}
  .nav-links{display:flex;gap:22px;margin-left:auto;font-size:15px;font-weight:500;color:var(--navy-60)}
  .nav-links a:hover{color:var(--ink)}
  .nav .btn{padding:10px 18px;font-size:14px;border-radius:999px} /* pill, to match the pill-shaped menu */
  @media (max-width:960px){.nav-links{display:none}}

  /* two questions */
  .questions{display:grid;grid-template-columns:1fr 1fr;gap:var(--gutter);margin-top:3rem}
  .q{border:1px solid var(--grey);border-radius:var(--r-md);padding:clamp(1.6rem,3vw,2.6rem);background:var(--white)}
  .q h3{font-size:clamp(1.6rem,2.6vw,2.4rem);margin:.4rem 0 1rem}
  .q p{color:var(--navy-60)}
  @media (max-width:760px){.questions{grid-template-columns:1fr}}

  /* situations */
  .situations{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--grey);border-radius:var(--r-md);overflow:hidden;margin-top:3rem;background:var(--white)}
  .sit{padding:2rem;border-right:1px solid var(--grey);border-bottom:1px solid var(--grey)}
  .sit:nth-child(3n){border-right:0}.sit:nth-last-child(-n+3){border-bottom:0}
  .sit .n{font-family:var(--font-mono);font-size:12px;color:var(--navy-40);letter-spacing:.1em}
  .sit h3{font-size:1.35rem;margin:.8rem 0 .6rem;line-height:1.15}
  .sit p{color:var(--navy-60);font-size:15.5px}
  @media (max-width:960px){.situations{grid-template-columns:1fr 1fr}.sit:nth-child(3n){border-right:1px solid var(--grey)}.sit:nth-child(2n){border-right:0}.sit:nth-last-child(-n+3){border-bottom:1px solid var(--grey)}.sit:nth-last-child(-n+2){border-bottom:0}}
  @media (max-width:600px){.situations{grid-template-columns:1fr}.sit{border-right:0!important;border-bottom:1px solid var(--grey)!important}.sit:last-child{border-bottom:0!important}}

  /* services rows */
  .rows{margin-top:3rem;border-top:1px solid var(--grey)}
  .row{display:grid;grid-template-columns:1.1fr 1fr 1.4fr;gap:var(--gutter);align-items:center;padding:2.2rem 0;border-bottom:1px solid var(--grey);transition:padding-left .3s var(--ease)}
  .row:hover{padding-left:.6rem}
  .row h3{font-size:clamp(1.5rem,2.4vw,2.1rem)}
  .row p{color:var(--navy-60)}
  .row .thumb{aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:var(--grey)}
  .row .thumb img{width:100%;height:100%;object-fit:cover;filter:grayscale(.35) contrast(1.05)}
  .row .eg{font-family:var(--font-mono);font-size:12px;color:var(--navy-40);letter-spacing:.06em;margin-top:.8rem}
  @media (max-width:860px){.row{grid-template-columns:1fr}.row .thumb{order:-1}}

  /* dark */
  .dark{background:var(--navy);color:var(--white)}
  .dark .h-section{color:var(--white);max-width:20ch}
  .dark h2 .accent{display:block}
  .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gutter);margin-top:3.5rem}
  .step{border:1px solid rgba(255,255,255,.16);border-radius:var(--r-md);padding:2rem;background:rgba(255,255,255,.03)}
  .step .n{font-family:var(--font-mono);font-size:12px;color:var(--lime);letter-spacing:.1em}
  .step h3{font-size:1.5rem;margin:1rem 0 .6rem}
  .step p{color:var(--white-70);font-size:15.5px}
  .step .price{font-family:var(--font-display);font-size:1.6rem;font-weight:700;margin-top:1.2rem}
  .step .price small{display:block;font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--white-50);font-weight:500;margin-top:.3rem}
  @media (max-width:860px){.steps{grid-template-columns:1fr}}
  .tags{display:flex;gap:10px;flex-wrap:wrap;margin:1.6rem 0 2rem}

  /* proof */
  .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gutter);margin-top:3rem}
  .card{border:1px solid var(--grey);border-radius:var(--r-md);overflow:hidden;background:var(--white);transition:transform .3s var(--ease),box-shadow .3s}
  .card:hover{transform:translateY(-6px);box-shadow:0 24px 60px rgba(37,43,59,.12)}
  .card .img{aspect-ratio:16/10;overflow:hidden;background:var(--grey)}
  .card img{width:100%;height:100%;object-fit:cover;filter:grayscale(.35) contrast(1.05);transition:transform .6s var(--ease)}
  .card:hover img{transform:scale(1.04)}
  .card .body{padding:1.6rem}
  .card .stat{font-family:var(--font-display);font-size:2.4rem;font-weight:700;letter-spacing:-.03em;line-height:1}
  .card .stat .ph{background:var(--lime);padding:0 .25em;border-radius:4px}
  .card h3{font-size:1.15rem;margin:.9rem 0 .4rem}
  .card p{color:var(--navy-60);font-size:15px}
  .card .who{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--navy-40);margin-top:1rem}
  @media (max-width:960px){.cards{grid-template-columns:1fr}}

  /* why: mask */
  .why{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--gutter)*1.5);align-items:center}
  .mask-v{aspect-ratio:1/1;width:100%;background:url("https://images.unsplash.com/photo-1766232280181-0607bd9fe6de?w=1600&h=1600&q=80&auto=format&fit=crop") center/cover no-repeat;filter:grayscale(.25) contrast(1.08);
    -webkit-mask-image:url("assets/logo-mask.png");mask-image:url("assets/logo-mask.png");
    -webkit-mask-size:170%;mask-size:170%;-webkit-mask-position:40% 30%;mask-position:40% 30%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
  .reasons{display:grid;gap:0;margin-top:2rem;border-top:1px solid var(--grey)}
  .reason{display:grid;grid-template-columns:48px 1fr;gap:16px;padding:1.4rem 0;border-bottom:1px solid var(--grey)}
  .reason .n{font-family:var(--font-mono);font-size:12px;color:var(--navy-40);letter-spacing:.1em;padding-top:.4rem}
  .reason h3{font-size:1.25rem;margin-bottom:.3rem}
  .reason p{color:var(--navy-60);font-size:15.5px}
  @media (max-width:900px){.why{grid-template-columns:1fr}.mask-v{max-width:520px}}

  /* team */
  .team{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--gutter);margin-top:3rem}
  .person .photo{aspect-ratio:4/5;border-radius:12px;background:var(--grey);overflow:hidden;position:relative}
  .person .photo::after{content:"photo";position:absolute;inset:0;display:grid;place-items:center;font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--navy-40)}
  .person h3{font-size:1.1rem;margin:.9rem 0 .2rem}
  .person p{font-size:14px;color:var(--navy-60)}
  @media (max-width:960px){.team{grid-template-columns:repeat(3,1fr)}}
  @media (max-width:600px){.team{grid-template-columns:repeat(2,1fr)}}

  /* cta band */
  .cta .h-section{max-width:22ch}
  .cta-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:var(--gutter);align-items:end}
  .cta-note{font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--white-50);margin-top:1.2rem}
  @media (max-width:860px){.cta-grid{grid-template-columns:1fr}}

  /* footer */
  footer{padding:3rem 0 2.5rem;border-top:1px solid var(--grey);font-size:14px;color:var(--navy-60)}
  .foot{display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap;align-items:center}
  .foot .brand{color:var(--ink)}
  .foot nav{display:flex;gap:20px}

  /* labels: the sans in place of mono, so lift the weight */
  .eyebrow,.tag,.sit .n,.step .n,.reason .n,.card .who,.hero-meta,.cta-note,.row .eg,.step .price small,.person .photo::after{font-weight:600}
  /* full-bleed photo band */
  .band{position:relative;min-height:clamp(380px,52vw,640px);display:flex;align-items:flex-end;color:var(--white);isolation:isolate;overflow:hidden}
  .band-img{position:absolute;inset:0;z-index:-2;background-position:center;background-size:cover;filter:grayscale(.3) contrast(1.05) brightness(.9);will-change:transform}
  .band::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(37,43,59,.05) 0%,rgba(37,43,59,.3) 55%,rgba(37,43,59,.78) 100%)}
  .band-text{padding-bottom:clamp(2rem,5vw,4rem);padding-top:3rem;width:100%}
  .band .eyebrow{color:var(--white-70)}
  .band-line{font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;line-height:1.08;font-size:clamp(1.6rem,3.6vw,3rem);max-width:22ch;margin-top:.6rem}
  /* CTA band photo */
  .cta{isolation:isolate;overflow:hidden}
  .cta-img{position:absolute;inset:0;z-index:-2;background:url("assets/site/band-depot-night.jpg") center/cover no-repeat;filter:grayscale(.4) contrast(1.05)}
  .cta::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(37,43,59,.96) 0%,rgba(37,43,59,.88) 55%,rgba(37,43,59,.72) 100%)}
  .cta .container{position:relative}

  /* scroll progress */
  .progress{position:fixed;top:0;left:0;height:3px;width:100%;z-index:60;transform-origin:0 50%;transform:scaleX(0);background:var(--lime)}

  /* nav scroll state */
  .nav{transition:top .3s var(--ease)}
  .nav-inner{transition:box-shadow .3s,transform .3s var(--ease)}
  .nav.scrolled{top:12px}
  .nav.scrolled .nav-inner{box-shadow:0 12px 40px rgba(37,43,59,.14)}

  /* reveal with stagger */
  .rv{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:calc(var(--i,0)*90ms)}
  .rv.in{opacity:1;transform:none}
  .rv-img{clip-path:inset(0 0 100% 0);transition:clip-path 1s var(--ease)}
  .rv-img.in{clip-path:inset(0 0 0 0)}
  .rv-img img{transform:scale(1.1);transition:transform 1.4s var(--ease)}
  .rv-img.in img{transform:none}
  .h-section .w{display:inline-block;opacity:0;transform:translateY(.4em);transition:opacity .6s var(--ease),transform .6s var(--ease);transition-delay:calc(var(--w,0)*45ms)}
  .h-section.in .w{opacity:1;transform:none}
  .mask-v{will-change:transform}
  .card .img img{will-change:transform}

  @media (prefers-reduced-motion:reduce){
    .rv,.rv-img,.h-section .w{opacity:1;transform:none;clip-path:none;transition:none}
    .rv-img img{transform:none}
    .hero h1 .line span,.hero .eyebrow,.hero .lead,.hero-actions,.hero-meta,.hero-img{transform:none;opacity:1;animation:none}
    .progress{display:none}
  }
/* ── Multi-page additions ─────────────────────────────────────────────── */
.nav-inner{max-width:1040px;position:relative}
.nav-links a.active{color:var(--ink);position:relative}
.nav-links a.active::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--lime)}
.nav-toggle{display:none;margin-left:auto;background:none;border:0;width:40px;height:40px;cursor:pointer;color:var(--ink);align-items:center;justify-content:center}
.nav-toggle span{display:block;width:18px;height:2px;background:currentColor;position:relative;transition:transform .3s var(--ease),background .2s}
.nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;left:0;width:18px;height:2px;background:currentColor;transition:transform .3s var(--ease)}
.nav-toggle span::before{top:-6px}.nav-toggle span::after{top:6px}
.nav.open .nav-toggle span{background:transparent}
.nav.open .nav-toggle span::before{transform:translateY(6px) rotate(45deg)}
.nav.open .nav-toggle span::after{transform:translateY(-6px) rotate(-45deg)}
@media (max-width:960px){
  .nav-toggle{display:flex}
  .nav .nav-inner > .btn{display:none}
  .nav-links{display:none;position:absolute;top:calc(100% + 10px);left:0;right:0;background:var(--white);border:1px solid var(--grey);border-radius:16px;padding:10px;flex-direction:column;gap:0;box-shadow:0 20px 50px rgba(37,43,59,.16)}
  .nav.open .nav-links{display:flex}
  .nav-links a{padding:12px 14px;border-radius:10px;font-size:16px;color:var(--ink)}
  .nav-links a:hover{background:var(--grey)}
  .nav-links a.active::after{display:none}
  .nav-links a.active{background:var(--grey)}
  .nav-links .nav-cta{margin-top:6px;background:var(--lime);text-align:center;font-weight:600}
}
@media (min-width:961px){.nav-links .nav-cta{display:none}}
/* "Savings calculator" replaced "Book a call" as the menu button, and Resources joined the links (15 Oct 2026). The mobile
   menu now starts below 961px (was 861px); every label stays on one line and the spacing tightens up to 1100px. Type size unchanged. On the calculator page, the mobile menu's
   button keeps its black pill rather than taking the grey current-page highlight. */
.nav .brand,.nav-links a,.nav .btn{white-space:nowrap}
.nav-links a.nav-cta.active{background:var(--ink);color:var(--white)}
/* Resources dropdown in the menu. Desktop: opens on hover, keyboard focus or click, as a white panel under the link.
   Mobile menu: a fold-out group. Open state is .open on .nav-drop (shared.js). */
.nav-drop{position:relative;display:flex;align-items:center}
.nav-drop-btn{background:none;border:0;padding:0;font:inherit;font-size:15px;font-weight:500;color:var(--navy-60);cursor:pointer;display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.nav-drop-btn:hover,.nav-drop.open .nav-drop-btn,.nav-drop-btn.active{color:var(--ink)}
.nav-drop .caret{width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s var(--ease)}
.nav-drop.open .caret{transform:translateY(1px) rotate(-135deg)}
.nav-drop-menu{position:absolute;top:calc(100% + 20px);left:-14px;min-width:190px;background:var(--white);border:1px solid var(--grey);border-radius:14px;padding:8px;box-shadow:0 20px 50px rgba(37,43,59,.16);display:none;flex-direction:column}
.nav-drop-menu::before{content:"";position:absolute;left:0;right:0;top:-22px;height:22px} /* keeps hover alive across the gap */
.nav-drop.open .nav-drop-menu{display:flex}
@media (min-width:961px) and (hover:hover){.nav-drop:hover .nav-drop-menu{display:flex}.nav-drop:hover .caret{transform:translateY(1px) rotate(-135deg)}}
@media (min-width:961px){.nav-drop:focus-within .nav-drop-menu{display:flex}}
.nav-links .nav-drop-menu a{padding:10px 12px;border-radius:8px;color:var(--ink);font-size:15px}
.nav-links .nav-drop-menu a:hover{background:var(--grey)}
.nav-links .nav-drop-menu a.active::after{display:none}
@media (max-width:960px){
  .nav-drop{display:block}
  .nav-drop-btn{width:100%;justify-content:space-between;padding:12px 14px;border-radius:10px;font-size:16px;color:var(--ink)}
  .nav-drop-btn:hover{background:var(--grey)}
  .nav-drop-menu{position:static;min-width:0;border:0;box-shadow:none;padding:0 0 4px 12px;border-radius:0}
  .nav-drop-menu::before{display:none}
}

/* The AI orb (on request, 15 Oct 2026): three rings of lime dots, each circling at its own speed and wobbling slightly,
   like a voice assistant listening. On the Savings calculator button and on the calculator page. Lime only on navy or
   black, so on a white background it sits on a navy disc. Add .talk to make it speak (the dots race and the ring
   pulses); hovering the menu button does the same. Still rings under reduced motion. */
.orb{display:inline-block;width:1.4em;height:1.4em;flex:none;vertical-align:-.3em;overflow:visible;filter:drop-shadow(0 0 .1em rgba(196,245,51,.7))}
.orb circle{fill:none;stroke-linecap:round;transform-box:fill-box;transform-origin:center}
.orb .o1{stroke:var(--lime);stroke-width:2.4;stroke-dasharray:0 8.333;animation:orb-run 5.2s linear infinite,orb-wob-a 2.8s ease-in-out infinite}
.orb .o2{stroke:#E2FB8F;stroke-width:2.1;stroke-dasharray:0 10;animation:orb-run-back 7s linear infinite,orb-wob-b 2.2s ease-in-out infinite}
.orb .o3{stroke:var(--lime);stroke-width:1.6;stroke-dasharray:0 5.556;opacity:.65;animation:orb-run 9.5s linear infinite,orb-wob-c 3.4s ease-in-out infinite}
.orb.talk,.nav .btn:hover .orb{animation:orb-pulse .6s ease-in-out infinite}
.orb.talk .o1,.nav .btn:hover .orb .o1{animation-duration:1.7s,.55s}
.orb.talk .o2,.nav .btn:hover .orb .o2{animation-duration:2.2s,.48s}
.orb.talk .o3,.nav .btn:hover .orb .o3{animation-duration:3.1s,.7s}
@keyframes orb-run{to{stroke-dashoffset:-100}}
@keyframes orb-run-back{to{stroke-dashoffset:100}}
@keyframes orb-wob-a{0%,100%{transform:scale(1,1)}25%{transform:scale(1.08,.93)}50%{transform:scale(.94,1.06)}75%{transform:scale(1.04,.97)}}
@keyframes orb-wob-b{0%,100%{transform:scale(1,1)}30%{transform:scale(.92,1.08)}60%{transform:scale(1.07,.94)}}
@keyframes orb-wob-c{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
@keyframes orb-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}
.nav-links .nav-cta .orb{margin-left:.4em}
@media (prefers-reduced-motion:reduce){.orb,.orb circle{animation:none!important}}
@media (min-width:961px) and (max-width:1100px){.nav-inner{gap:14px;padding-left:14px}.nav-links{gap:13px}.nav .btn{padding:10px 14px}}

/* footer v2 */
footer{padding:4rem 0 2.5rem}
.foot2{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:var(--gutter);align-items:start}
.foot2 .brand{color:var(--ink);margin-bottom:.9rem}
.foot2 p{max-width:34ch;color:var(--navy-60);font-size:15px}
.foot2 h4{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--navy-40);margin-bottom:.9rem}
.foot2 ul{list-style:none}
.foot2 li{margin:.45rem 0}
.foot2 a:hover{color:var(--ink)}
.foot-legal{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;border-top:1px solid var(--grey);margin-top:3rem;padding-top:1.4rem;font-size:13px;color:var(--navy-40)}
@media (max-width:860px){.foot2{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.foot2{grid-template-columns:1fr}}

/* page hero (inner pages): photo, white headline, shorter than the home hero */
.page-hero{position:relative;min-height:clamp(420px,56vh,620px);display:flex;align-items:flex-end;color:var(--white);isolation:isolate;overflow:hidden}
.page-hero-img{position:absolute;inset:-8% 0;z-index:-2;background-position:center;background-size:cover;filter:grayscale(.25) contrast(1.05) brightness(.9);will-change:transform}
.page-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(37,43,59,.28) 0%,rgba(37,43,59,.2) 40%,rgba(37,43,59,.82) 100%)}
.page-hero .container{padding-top:8rem;padding-bottom:clamp(2.4rem,5vw,4rem);width:100%;position:relative;z-index:1}
/* the kinetic grid (shared.js) over the hero photo, on the homepage and every inner page with a photo hero */
.hero-grid{position:absolute;inset:0;z-index:0;pointer-events:none;mix-blend-mode:screen}
.page-hero .eyebrow{color:var(--white-70)}
.page-hero h1{font-size:clamp(2.6rem,6vw,5.2rem);font-weight:600;letter-spacing:-.035em;max-width:16ch;margin:.7rem 0 1rem} /* same face as the homepage wheel: Grift SemiBold, tight */
.page-hero .lead{color:var(--white-70);max-width:52ch;font-size:clamp(1.05rem,1.5vw,1.3rem)}
.page-hero.short{min-height:clamp(320px,40vh,440px)}
.page-hero.plain{color:var(--ink);min-height:0;background:var(--white)}
.page-hero.plain::after{display:none}
.page-hero.plain .eyebrow,.page-hero.plain .lead{color:var(--navy-60)}
.page-hero.plain .container{padding-top:9rem;padding-bottom:1rem}

/* generic components used across inner pages */
.split{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--gutter)*1.5);align-items:center}
.split.wide-img{grid-template-columns:1.15fr 1fr}
.split .photo{border-radius:var(--r-md);overflow:hidden;background:var(--grey);aspect-ratio:4/3}
.split .photo.tall{aspect-ratio:4/5}
.split .photo img{width:100%;height:100%;object-fit:cover;filter:grayscale(.3) contrast(1.05)}
@media (max-width:860px){.split,.split.wide-img{grid-template-columns:1fr}}
.prose{max-width:62ch}
.prose p{color:var(--navy-60);margin:0 0 1.1rem}
.prose p.big{color:var(--ink);font-size:clamp(1.2rem,1.8vw,1.5rem);line-height:1.4;font-weight:500}
.prose h3{font-size:1.4rem;margin:2rem 0 .6rem}
.prose ul{padding-left:1.2rem;color:var(--navy-60);margin:0 0 1.1rem}
.prose li{margin:.35rem 0}
.pull{font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;line-height:1.15;font-size:clamp(1.6rem,3vw,2.6rem);border-left:4px solid var(--lime);padding-left:1.2rem;margin:2.4rem 0;max-width:26ch}
.pull small{display:block;font-family:var(--font-body);font-weight:500;font-size:14px;letter-spacing:0;color:var(--navy-40);margin-top:.8rem}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{font-size:13px;font-weight:600;padding:8px 14px;border:1px solid var(--grey);border-radius:999px;color:var(--navy-60);cursor:pointer;background:var(--white);font-family:inherit}
.chip.active,.chip:hover{border-color:var(--ink);color:var(--ink)}
.chip.active{background:var(--ink);color:var(--white)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gutter)}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gutter)}
@media (max-width:960px){.grid-3{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.grid-3,.grid-2{grid-template-columns:1fr}}
.photo-card{position:relative;border-radius:var(--r-md);overflow:hidden;background:var(--navy);color:var(--white);aspect-ratio:4/5;display:flex;align-items:flex-end;isolation:isolate}
.photo-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1;filter:grayscale(.3) contrast(1.05);transition:transform .8s var(--ease)}
.photo-card::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(37,43,59,0) 35%,rgba(37,43,59,.8) 100%)}
.photo-card:hover img{transform:scale(1.05)}
.photo-card .body{padding:1.5rem}
.photo-card h3{font-size:1.35rem;margin:.4rem 0 .3rem}
.photo-card p{color:var(--white-70);font-size:15px}
.photo-card .eyebrow{color:var(--white-70)}
.photo-card.wide{aspect-ratio:16/9}
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gutter);border-top:1px solid var(--grey);border-bottom:1px solid var(--grey);padding:1.8rem 0;margin:2rem 0}
.stat-row .n{font-family:var(--font-display);font-size:clamp(2rem,3.6vw,3rem);font-weight:700;letter-spacing:-.02em;line-height:1}
.stat-row .n .ph{display:inline-block;background:var(--lime);padding:.12em .3em .14em;border-radius:10px}
.stat-row .l{font-size:14px;color:var(--navy-60);margin-top:.7rem}
@media (max-width:640px){.stat-row{grid-template-columns:1fr}}
/* case studies with a highlighted ROI payback stat (27 Oct 2026): four figures across */
.stat-row-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.stat-row-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.stat-row-4{grid-template-columns:1fr}}
.form{display:grid;gap:1rem}
.form .two{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media (max-width:560px){.form .two{grid-template-columns:1fr}}
.form label{display:block;font-size:13px;font-weight:600;letter-spacing:.04em;margin-bottom:.4rem;color:var(--navy-60)}
.form input,.form textarea,.form select{width:100%;font:inherit;font-size:16px;color:var(--ink);padding:13px 14px;border:1px solid var(--grey);border-radius:10px;background:var(--white)}
.form input:focus,.form textarea:focus,.form select:focus{outline:2px solid var(--lime);outline-offset:1px;border-color:var(--ink)}
.form textarea{min-height:120px;resize:vertical}
.form .note{font-size:13px;color:var(--navy-40)}
.faq-item{border-bottom:1px solid var(--grey)}
.faq-item summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:1rem;align-items:center;padding:1.2rem 0;font-family:var(--font-display);font-weight:600;font-size:1.15rem;letter-spacing:-.01em}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-weight:400;font-size:1.6rem;color:var(--navy-40);transition:transform .3s var(--ease);flex:none}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item .a{padding:0 0 1.4rem;color:var(--navy-60);max-width:64ch}
.faq-item .a p{margin:0 0 .8rem}
.sticky-side{position:sticky;top:110px;align-self:start}
.side-list{list-style:none;border-left:1px solid var(--grey)}
.side-list a{display:block;padding:.5rem 0 .5rem 1rem;color:var(--navy-60);font-size:15px;border-left:2px solid transparent;margin-left:-1px}
.side-list a:hover,.side-list a.active{color:var(--ink);border-left-color:var(--ink)}
.meta{font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;color:var(--navy-40)}
.btn-sm{padding:10px 16px;font-size:14px}
.eyebrow.on-dark{color:var(--white-70)}

/* photo tops for text cards (situations, questions, steps, ladder, strips) */
.card-img{aspect-ratio:16/9;overflow:hidden;background:var(--grey);margin:-2rem -2rem 1.4rem;border-bottom:1px solid var(--grey)}
.card-img img{width:100%;height:100%;object-fit:cover;filter:grayscale(.3) contrast(1.05);transition:transform .6s var(--ease)}
.sit:hover .card-img img,.q:hover .card-img img,.step:hover .card-img img{transform:scale(1.04)}
.sit .card-img{margin:-2rem -2rem 1.2rem}
.q .card-img{margin:calc(-1*clamp(1.6rem,3vw,2.6rem)) calc(-1*clamp(1.6rem,3vw,2.6rem)) 1.4rem}
.step .card-img{margin:-2rem -2rem 1.4rem;border-bottom:1px solid rgba(255,255,255,.12)}
.every .card-img{margin:0 0 1rem;border-radius:12px;border:0}
.sit,.q,.step{overflow:hidden}
/* photo behind a dark section */
.dark.has-photo{isolation:isolate;overflow:hidden}
.dark.has-photo .dark-img{position:absolute;inset:0;z-index:-2;background-position:center;background-size:cover;filter:grayscale(.5) contrast(1.05)}
.dark.has-photo::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(37,43,59,.94) 0%,rgba(37,43,59,.9) 60%,rgba(37,43,59,.82) 100%)}
.dark.has-photo .container{position:relative}
.inline-wide{aspect-ratio:21/8;border-radius:var(--r-md);overflow:hidden;background:var(--grey);margin-top:2rem}
.inline-wide img{width:100%;height:100%;object-fit:cover;filter:grayscale(.3) contrast(1.05)}

/* ── Visual style v1 (Oct 2026): colour only. Fonts were Grift until 19 Oct, now Gilroy with Urbanist as back-up. ── */
body{color:var(--ink)}
.eyebrow{color:var(--navy-60)}
.eyebrow::before{display:none}
.btn{border-radius:999px}
.btn-primary{background:var(--ink);color:var(--white)}
.dark .btn-primary,.page-hero .btn-primary,.band .btn-primary,.hero .btn-primary,.cta .btn-primary{background:var(--white);color:var(--ink)}
.page-hero .btn-ghost,.band .btn-ghost,.hero .btn-ghost{border-color:rgba(255,255,255,.6);color:var(--white)}
.nav-links .nav-cta{background:var(--ink);color:var(--white)}
.nav-links a.active::after{background:var(--ink)}
.progress{background:var(--navy)}
.pull{border-left-color:var(--ink)}
.form input:focus,.form textarea:focus,.form select:focus{outline-color:var(--ink)}
.stat-row > div:not(:first-child) .ph{background:none;padding:0}
.stat-row > div.roi .ph{background:var(--lime);padding:.12em .3em .14em;border-radius:10px}

/* client logos (15 Oct 2026): a white badge on each case study tile, and the logo at the top of the facts column */
.card .img,.cs .img,.feature .img{position:relative}
.client-logo{position:absolute;top:14px;left:14px;z-index:2;height:50px;display:flex;align-items:center;padding:0 14px;background:var(--white);border-radius:12px;box-shadow:0 8px 24px rgba(37,43,59,.18);pointer-events:none}
.client-logo img{position:static!important;inset:auto!important;z-index:auto!important;width:auto!important;height:30px!important;max-width:140px;object-fit:contain!important;filter:none!important;transform:none!important;transition:none!important}
.client-logo.cl-pasta-king img{height:38px!important}
.client-logo.cl-genesis img{height:18px!important}
.client-block{display:flex;align-items:center;min-height:88px;padding:0 0 1.2rem;margin-bottom:.2rem;border-bottom:1px solid var(--grey)}
.client-block img{height:52px;width:auto;max-width:200px}
.client-block.cl-pasta-king img{height:76px}
.client-block.cl-genesis img{height:32px}
/* case study cards: logo on the white body, right of the headline figure */
.card-head{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.card-logo{flex:none;display:flex;align-items:center}
.card-logo img{width:auto!important;height:30px!important;max-width:130px;object-fit:contain!important;filter:none!important;transform:none!important;transition:none!important}
.card-logo.cl-pasta-king img{height:40px!important}
.card-logo.cl-genesis img{height:20px!important}

/* ── Blog posts (15 Oct 2026): every blog-*.html post page. From the v1 blog-post template (prototype/archive/blog-post-v1-src.html),
   plus tables, numbered lists, sources, the closing call panel (.post-cta) and the in-article call-outs (.post-aside). */
/* the mini hero: a photo card the width of the content, with the label, title and standfirst over a navy fade */
.post-top{padding-top:clamp(6.5rem,10vw,8rem)}
.post-banner{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--r-md);min-height:clamp(440px,60vh,600px);display:flex;align-items:flex-end;color:var(--white);background:var(--navy)}
.post-banner-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.post-banner::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(37,43,59,.12) 0%,rgba(37,43,59,.35) 40%,rgba(37,43,59,.9) 100%)}
.post-banner-body{position:relative;z-index:1;padding:clamp(1.6rem,4vw,3.2rem);max-width:920px}
.post-banner .meta{color:var(--white-70)}
.post-banner h1{font-size:clamp(1.9rem,3.8vw,3.3rem);font-weight:600;letter-spacing:-.035em;line-height:1.05;margin:.7rem 0 .9rem;max-width:24ch;color:var(--white)} /* the hero face: Grift SemiBold, tight */
.post-banner .lead{color:var(--white-70);max-width:60ch;font-size:clamp(1rem,1.4vw,1.15rem)}
@media (max-width:640px){.post-banner::after{background:linear-gradient(180deg,rgba(37,43,59,.4) 0%,rgba(37,43,59,.62) 40%,rgba(37,43,59,.92) 100%)}} /* on phones the text covers most of the photo */
.post-body{padding-top:clamp(2.5rem,5vw,4rem)}
.post-layout{display:grid;grid-template-columns:220px minmax(0,68ch) 1fr;gap:calc(var(--gutter)*1.5);align-items:start}
@media (max-width:960px){.post-layout{grid-template-columns:minmax(0,1fr)}.post-layout .sticky-side{position:static}} /* minmax(0,…): a wide table scrolls in its box instead of widening the page */
.article p{color:var(--navy-60);font-size:1.08rem;line-height:1.7;margin:0 0 1.3rem}
.article p.big{color:var(--ink);font-size:1.3rem;line-height:1.5;font-weight:500}
.article p b,.article li b{color:var(--ink);font-weight:600}
.article h2{font-size:1.7rem;margin:2.6rem 0 .8rem;scroll-margin-top:100px}
.article ul,.article ol{padding-left:1.3rem;color:var(--navy-60);font-size:1.05rem;line-height:1.6;margin:0 0 1.3rem}
.article li{margin:.45rem 0;padding-left:.2rem}
.article ol li::marker{font-family:var(--font-display);font-weight:700;color:var(--ink)}
.article a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--grey);text-decoration-thickness:2px;text-underline-offset:3px}
.article a:hover{text-decoration-color:var(--ink)}
.article figure{margin:2.2rem 0;border-radius:var(--r-md);overflow:hidden;background:var(--grey);aspect-ratio:16/10}
.article figure img{width:100%;height:100%;object-fit:cover}
.post-table{overflow-x:auto;margin:0 0 1.6rem;border-top:2px solid var(--ink)}
.post-table table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.45;min-width:520px}
.post-table th{text-align:left;font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;color:var(--navy-60);padding:.8rem .8rem .6rem 0}
.post-table td{padding:.8rem .8rem .8rem 0;border-top:1px solid var(--grey);color:var(--navy-60);vertical-align:top}
.post-table td:first-child{color:var(--ink)}
.article .sources-h{font-size:1.1rem;margin-top:3rem}
.article ul.sources{font-size:14px;color:var(--navy-60)}
/* in-article call-outs (savings calculator, AI Roadmap): a navy panel with a lime button, on request */
.post-aside{background:var(--navy);border-radius:var(--r-md);padding:clamp(1.3rem,2.6vw,1.8rem);margin:0 0 1.8rem;display:flex;flex-direction:column;align-items:flex-start;gap:1rem}
.post-aside p{margin:0!important;font-size:1.02rem!important;color:var(--white-70)!important}
.post-aside p b{color:var(--white)!important}
.btn.btn-lime{background:var(--lime);color:var(--ink);border-color:var(--lime)}
/* the free guide, in each blog post's sidebar */
.side-guide{display:grid;grid-template-columns:58px 1fr;gap:12px;align-items:center;margin-top:1.4rem;padding:12px;border:1px solid var(--grey);border-radius:14px;background:var(--white);transition:border-color .2s,box-shadow .3s}
.side-guide:hover{border-color:var(--ink);box-shadow:0 12px 28px rgba(37,43,59,.08)}
.side-guide img{width:58px;height:82px;object-fit:cover;border-radius:4px;border:1px solid var(--grey);display:block}
.side-guide small{display:block;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--navy-60);margin-bottom:3px}
.side-guide b{display:block;font-size:14px;line-height:1.3;font-weight:600}
.side-guide em{display:block;font-style:normal;font-size:13px;font-weight:600;margin-top:5px;text-decoration:underline;text-underline-offset:3px}
.side-box.navy{background:var(--navy);border-color:var(--navy)}
.side-box.navy h4{color:var(--white)}
.side-box.navy p{color:var(--white-70)}
.article .post-aside a.btn,.article .post-cta a.btn{text-decoration:none}
.post-cta{border-radius:var(--r-md);padding:clamp(1.6rem,3vw,2.4rem);margin:2.6rem 0 1rem}
.article .post-cta h2{margin:0 0 .6rem;color:var(--white)}
.article .post-cta p{color:var(--white-70);margin-bottom:1.4rem}
.share{font-size:13px;color:var(--navy-40)}
.share a,.share button{display:block;padding:.3rem 0;background:none;border:0;font:inherit;color:inherit;cursor:pointer;text-align:left}
.share a:hover,.share button:hover{color:var(--ink)}
/* Toolbox Talks: the series note at the top of each talk, and the tips */
.post-series{border:1px solid var(--grey);border-radius:var(--r-md);padding:1.2rem 1.4rem;margin:0 0 2rem}
.article .post-series p{font-size:.98rem;margin:0 0 .6rem}
.article .post-series p:last-child{margin:0}
.article .post-tip{border-left:3px solid var(--ink);padding:.2rem 0 .2rem 1.1rem;color:var(--ink);font-size:1.05rem}

/* website forms: spam trap, error/fallback line, thank-you panel (16 Oct 2026) */
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.form-msg{font-size:14px;color:var(--ink);background:var(--grey);border-radius:10px;padding:.7rem .9rem;margin-top:.4rem}
.form-msg a{text-decoration:underline;text-underline-offset:3px;font-weight:600}
.form-done{border:1px solid var(--grey);border-radius:var(--r-md);padding:clamp(1.4rem,3vw,2.2rem);background:var(--white)}
.form-done h3{font-size:1.4rem;margin-bottom:.4rem}
.form-done p{color:var(--navy-60)}
.form-done:focus{outline:none}

/* After a successful send (19 Oct 2026): the confirmation card. Tick draws, faint grid ripples, highlight draws, steps fade up. */
.form-done.fx{position:relative;overflow:hidden;isolation:isolate}
.fd-mark{position:relative;width:64px;height:64px;margin-bottom:1.3rem}
.fd-mark svg{position:relative;z-index:1;width:100%;height:100%;overflow:visible}
.fd-c{fill:var(--lime);stroke:var(--lime);stroke-width:2;transform-origin:center;transform:scale(0)}
.fd-t{fill:none;stroke:var(--ink);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:40;stroke-dashoffset:40}
/* the faint grid, rippling out from the tick */
.fd-mark::before{content:"";position:absolute;left:50%;top:50%;width:900px;height:900px;margin:-450px 0 0 -450px;z-index:-1;pointer-events:none;
  background-image:linear-gradient(to right,rgba(37,43,59,.09) 1px,transparent 1px),linear-gradient(to bottom,rgba(37,43,59,.09) 1px,transparent 1px);background-size:32px 32px;
  -webkit-mask-image:radial-gradient(circle,#000 0,transparent 0);mask-image:radial-gradient(circle,#000 0,transparent 0);opacity:0}
.fd-mark::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--lime);opacity:0}
.fd-hl{position:relative;z-index:0;white-space:nowrap;margin-right:.22em}   /* room so the highlight never covers the full stop */
.fd-hl::before{content:"";position:absolute;inset:-.06em -.18em -.08em;background:var(--lime);border-radius:.18em;z-index:-1;transform:scaleX(0);transform-origin:left center}
.fd-up{opacity:0;transform:translateY(10px)}
.form-done .eyebrow{display:inline-block;margin-bottom:.5rem}
.form-done.fx h3{font-size:clamp(1.45rem,2.4vw,1.9rem);margin-bottom:.5rem}
.fd-steps{list-style:none;margin:1.6rem 0 0;padding:0;border-top:1px solid var(--grey)}
.fd-step{display:grid;grid-template-columns:28px 1fr;gap:.8rem;align-items:start;padding:.9rem 0;border-bottom:1px solid var(--grey);opacity:0;transform:translateY(8px)}
.fd-step b{display:block;font-weight:600;font-size:15.5px;color:var(--ink)}
.fd-step span{font-size:14px;color:var(--navy-60)}
.fd-dot{position:relative;width:18px;height:18px;margin-top:.15rem;border-radius:50%;border:2px solid var(--grey);background:var(--white)}
.is-done .fd-dot{background:var(--ink);border-color:var(--ink)}
.is-done .fd-dot::after{content:"";position:absolute;left:4px;top:1px;width:5px;height:9px;border:solid var(--white);border-width:0 2px 2px 0;transform:rotate(45deg)}
.is-now .fd-dot{border-color:var(--ink)}
.is-now .fd-dot::before{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--lime)}
.is-now .fd-dot::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--lime);opacity:0}
.is-next{color:var(--navy-60)}
.fd-ctas{display:flex;gap:10px;flex-wrap:wrap;margin-top:1.4rem}
.form-done.compact{padding:1.2rem 1.3rem}
.form-done.compact .fd-mark{width:44px;height:44px;margin-bottom:.8rem}
.form-done.compact h3{font-size:1.2rem}

/* play */
.form-done.play .fd-c{animation:fdPop .45s cubic-bezier(.16,1,.3,1) .1s forwards}
.form-done.play .fd-t{animation:fdDraw .4s cubic-bezier(.65,0,.35,1) .42s forwards}
.form-done.play .fd-mark::after{animation:fdRing 1s ease-out .35s}
.form-done.play .fd-mark::before{animation:fdGrid 1.6s cubic-bezier(.16,1,.3,1) .25s forwards}
.form-done.play .fd-up{animation:fdUp .6s cubic-bezier(.16,1,.3,1) forwards}
.form-done.play .eyebrow.fd-up{animation-delay:.45s}
.form-done.play h3.fd-up{animation-delay:.55s}
.form-done.play p.fd-up{animation-delay:.7s}
.form-done.play .fd-hl::before{animation:fdBox .45s cubic-bezier(.16,1,.3,1) 1s forwards}
.form-done.play .fd-step{animation:fdUp .55s cubic-bezier(.16,1,.3,1) forwards;animation-delay:calc(1.1s + var(--i)*.14s)}
.form-done.play .is-now .fd-dot::after{animation:fdPulse 1.8s ease-out 1.8s infinite}
.form-done.play .fd-ctas{animation-delay:1.6s}
@keyframes fdPop{to{transform:scale(1)}}
@keyframes fdDraw{to{stroke-dashoffset:0}}
@keyframes fdRing{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(2.4)}}
@keyframes fdGrid{0%{opacity:1;-webkit-mask-image:radial-gradient(circle,#000 0,transparent 0);mask-image:radial-gradient(circle,#000 0,transparent 0)}
  60%{opacity:1}100%{opacity:0;-webkit-mask-image:radial-gradient(circle,transparent 30%,#000 42%,transparent 50%);mask-image:radial-gradient(circle,transparent 30%,#000 42%,transparent 50%)}}
@keyframes fdUp{to{opacity:1;transform:none}}
@keyframes fdBox{to{transform:scaleX(1)}}
@keyframes fdPulse{0%{opacity:.8;transform:scale(.6)}100%{opacity:0;transform:scale(1.3)}}
/* reduced motion, or no animation support: everything simply shown */
.form-done.still .fd-c,.form-done.still .fd-hl::before{transform:none;animation:none}
.form-done.still .fd-t{stroke-dashoffset:0;animation:none}
.form-done.still .fd-up,.form-done.still .fd-step{opacity:1;transform:none;animation:none}
.form-done.still .fd-mark::before,.form-done.still .fd-mark::after,.form-done.still .is-now .fd-dot::after{animation:none;opacity:0}
@media (prefers-reduced-motion:reduce){.form-done.fx *,.form-done.fx *::before,.form-done.fx *::after{animation:none!important}
  .fd-c,.fd-hl::before{transform:none!important}.fd-t{stroke-dashoffset:0!important}.fd-up,.fd-step{opacity:1!important;transform:none!important}}


/* ── AI readiness check pop-up (19 Oct 2026) ─────────────────────────────────── */
html.rd-lock{overflow:hidden}
.rd{border:0;padding:0;margin:auto;background:transparent;max-width:min(1080px,calc(100vw - 32px));width:100%;max-height:calc(100svh - 32px);overflow:visible;color:var(--ink)}
.rd::backdrop{background:rgba(20,24,33,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;transition:opacity .4s}
.rd.rd-show::backdrop{opacity:1}
.rd-shell{display:grid;grid-template-columns:.85fr 1.15fr;background:var(--white);border-radius:28px;overflow:hidden;box-shadow:0 40px 120px rgba(0,0,0,.35);
  height:min(680px,calc(100svh - 32px));opacity:0;transform:translateY(18px);transition:opacity .5s var(--ease),transform .6s var(--ease)}
.rd.rd-show .rd-shell{opacity:1;transform:none}
.rd-photo{position:relative;overflow:hidden;background:var(--navy)}
.rd-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.08);transition:transform 6s cubic-bezier(.16,1,.3,1)}
.rd.rd-show .rd-photo img{transform:scale(1)}
.rd-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(37,43,59,0) 45%,rgba(37,43,59,.88) 100%)}
.rd-photo::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:linear-gradient(to right,rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(to bottom,rgba(255,255,255,.07) 1px,transparent 1px);background-size:48px 48px;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 60%);mask-image:linear-gradient(180deg,transparent 0,#000 60%)}
.rd-photo-copy{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:1.8rem;color:var(--white)}
.rd-photo-copy p{font-size:1.15rem;line-height:1.35;font-weight:600;max-width:24ch;margin-top:.8rem}
.rd-chip{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:.45rem .8rem;border-radius:999px;background:var(--lime);color:var(--ink)}
.rd-main{position:relative;display:flex;flex-direction:column;min-height:0}
.rd-x{position:absolute;top:16px;right:16px;z-index:3;width:40px;height:40px;border-radius:50%;border:1px solid var(--grey);background:var(--white);font-size:22px;line-height:1;cursor:pointer;color:var(--ink);transition:transform .2s var(--ease),background .2s}
.rd-x:hover{background:var(--grey);transform:rotate(90deg)}
.rd-stage{flex:1;min-height:0;overflow:auto;padding:clamp(1.6rem,3.5vw,2.8rem);display:flex}
.rd-view{margin:auto 0;width:100%;opacity:0;transform:translateY(14px);transition:opacity .45s var(--ease),transform .55s var(--ease)}
.rd-view.rd-in{opacity:1;transform:none}
.rd-view.rd-out{opacity:0;transform:translateY(-14px);transition-duration:.25s}
.rd h2{font-size:clamp(1.6rem,2.8vw,2.3rem);line-height:1.12;letter-spacing:-.02em;margin:.6rem 0 .8rem}
.rd .rd-lead{color:var(--navy-60);font-size:1.02rem;line-height:1.6;max-width:46ch}
.rd-hl{position:relative;z-index:0;white-space:nowrap;margin-right:.1em}
.rd-hl::before{content:"";position:absolute;inset:-.04em -.16em -.06em;background:var(--lime);border-radius:.16em;z-index:-1;transform:scaleX(0);transform-origin:left center;transition:transform .5s cubic-bezier(.16,1,.3,1) .35s}
.rd-in .rd-hl::before{transform:none}
.rd-areas{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;grid-template-columns:repeat(6,1fr);gap:.6rem}
.rd-areas li{grid-column:span 2}
.rd-areas li:nth-child(n+4){grid-column:span 3}
.rd-areas li{border:1px solid var(--grey);border-radius:14px;padding:.8rem .95rem;opacity:0;transform:translateY(8px);transition:opacity .5s var(--ease),transform .5s var(--ease);transition-delay:calc(.25s + var(--i)*.08s)}
.rd-in .rd-areas li{opacity:1;transform:none}
.rd-areas b{display:block;font-size:14px;font-weight:600}
.rd-areas span{font-size:13px;color:var(--navy-60)}
.rd-actions{display:flex;align-items:center;gap:.6rem 1.2rem;flex-wrap:wrap;margin-top:1.6rem}
.rd-later{background:none;border:0;font:inherit;font-size:14px;font-weight:600;color:var(--navy-60);cursor:pointer;text-decoration:underline;text-underline-offset:4px}
/* questions */
.rd-top{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding-right:46px}
.rd-count{font-size:13px;font-weight:600;color:var(--navy-60);font-variant-numeric:tabular-nums}
.rd-bar{height:4px;border-radius:4px;background:var(--grey);margin:.8rem 0 1.2rem;overflow:hidden}
.rd-bar i{display:block;height:100%;background:var(--ink);border-radius:4px;transition:width .5s var(--ease)}
.rd fieldset{border:0;padding:0;margin:0;min-width:0}
.rd legend{padding:0}
.rd-q h2{font-size:clamp(1.25rem,2.1vw,1.6rem);margin:0 0 1.1rem}
.rd-opts{display:grid;gap:.5rem}
.rd-opt{display:grid;grid-template-columns:30px 1fr;gap:.8rem;align-items:center;text-align:left;width:100%;font:inherit;font-size:15px;line-height:1.4;color:var(--ink);
  background:var(--white);border:1px solid var(--grey);border-radius:14px;padding:.75rem .9rem;cursor:pointer;
  opacity:0;transform:translateY(8px);transition:opacity .4s var(--ease),transform .4s var(--ease),border-color .2s,background .2s,box-shadow .2s;transition-delay:calc(.08s + var(--i)*.05s),calc(.08s + var(--i)*.05s),0s,0s,0s}
.rd-in .rd-opt{opacity:1;transform:none}
.rd-opt:hover{border-color:var(--ink);box-shadow:0 6px 18px rgba(37,43,59,.08)}
.rd-opt:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.rd-n{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:1px solid var(--grey);font-size:13px;font-weight:600;transition:background .2s,border-color .2s}
.rd-opt.on{border-color:var(--ink);background:rgba(196,245,51,.18)}
.rd-opt.on .rd-n{background:var(--lime);border-color:var(--lime)}
.rd-nav{display:flex;justify-content:space-between;align-items:center;margin-top:1rem;min-height:28px}
.rd-back{background:none;border:0;font:inherit;font-size:14px;font-weight:600;color:var(--navy-60);cursor:pointer}
.rd-hint{font-size:12.5px;color:var(--navy-40)}
/* result */
.rd-head{display:grid;grid-template-columns:auto 1fr;gap:1.4rem;align-items:center;padding-right:46px}
.rd-head h2{margin:.4rem 0 0}
.rd-score{position:relative;width:118px;height:118px;flex:none}
.rd-score svg{width:100%;height:100%;transform:rotate(-90deg)}
.rd-track{fill:none;stroke:var(--grey);stroke-width:10}
.rd-ring{fill:none;stroke:var(--lime);stroke-width:10;stroke-linecap:round;transition:stroke-dashoffset 1.4s cubic-bezier(.16,1,.3,1)}
.rd-num{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.rd-num b{font-size:2.2rem;font-weight:700;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.rd-num small{font-size:12px;color:var(--navy-60);margin-top:.2rem}
.rd-result .rd-lead{margin-top:1rem}
.rd-bars{list-style:none;margin:1.1rem 0 0;padding:0;display:grid;gap:.55rem}
.rd-bars li{display:grid;grid-template-columns:1fr auto;gap:.3rem 1rem;font-size:14px}
.rd-bars li b{font-variant-numeric:tabular-nums}
.rd-bars li div{grid-column:1/-1;height:6px;border-radius:6px;background:var(--grey);overflow:hidden}
.rd-bars li i{display:block;height:100%;width:0;background:var(--ink);border-radius:6px;transition:width 1.1s cubic-bezier(.16,1,.3,1);transition-delay:calc(.6s + var(--i)*.12s)}
/* v3: the five areas on a spider (shared.js draws it). The shape grows from the centre once the score has counted up. */
.rd-chart{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:1rem;align-items:center;margin-top:.9rem}
.rd-spider{display:block;width:100%;max-width:420px;height:auto;overflow:visible}
.rd-sp-ring,.rd-sp-axis{fill:none;stroke:var(--grey);stroke-width:1}
.rd-sp-target{fill:none;stroke:var(--navy-40);stroke-width:1.2;stroke-dasharray:4 4;opacity:.7}
.rd-sp-shape{transform:scale(0);transform-box:view-box;transition:transform 1.1s cubic-bezier(.16,1,.3,1) .15s}
.rd-go .rd-sp-shape{transform:none}
.rd-sp-shape polygon{fill:rgba(37,43,59,.13);stroke:var(--navy);stroke-width:2.5;stroke-linejoin:round}
.rd-sp-shape circle{fill:var(--navy);stroke:var(--white);stroke-width:2}
.rd-sp-shape circle.weak{fill:var(--lime);stroke:var(--navy)}
.rd-sp-label{font-size:15px;fill:var(--navy-60);opacity:0;transition:opacity .4s ease calc(.55s + var(--i)*.08s)}
.rd-go .rd-sp-label{opacity:1}
.rd-sp-label .s{font-size:16px;font-weight:700;fill:var(--ink);font-variant-numeric:tabular-nums}
.rd-sp-label.weak .n{fill:var(--ink);font-weight:600}
.rd-key{display:flex;align-items:center;gap:.55rem;font-size:12.5px;color:var(--navy-60);margin:0 0 .2rem}
.rd-key i{display:block;width:20px;border-top:1.5px dashed var(--navy-40);opacity:.8}
.rd-chart .rd-tip{margin-top:.7rem}
.rd-next{display:inline-block;margin-top:.7rem;font-size:13.5px;font-weight:600;color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.rd-tip{margin-top:1rem;font-size:14.5px;color:var(--navy-60);background:rgba(196,245,51,.18);border-radius:12px;padding:.8rem 1rem}
.rd-tip b{color:var(--ink)}
/* details */
.rd-form{margin-top:1.2rem;gap:.8rem}
.rd-consent{display:grid!important;grid-template-columns:20px 1fr;gap:.6rem;align-items:start;font-size:13.5px!important;font-weight:500!important;letter-spacing:0!important;color:var(--navy-60)!important;line-height:1.5}
.rd-consent input{width:18px!important;height:18px;margin-top:.15rem;accent-color:var(--ink);padding:0!important}
.rd-consent a{text-decoration:underline}
.rd-sent .fd-mark{margin-bottom:1rem}
.rd-sent.play .fd-c{animation:fdPop .45s cubic-bezier(.16,1,.3,1) .1s forwards}
.rd-sent.play .fd-t{animation:fdDraw .4s cubic-bezier(.65,0,.35,1) .42s forwards}
/* phones: the small card, and the check full screen */
.rd-nudge{position:fixed;left:12px;right:12px;bottom:12px;z-index:70;display:grid;grid-template-columns:56px 1fr auto;gap:.8rem;align-items:center;
  background:var(--navy);color:var(--white);border-radius:20px;padding:10px 12px 10px 10px;box-shadow:0 18px 50px rgba(0,0,0,.35);
  transform:translateY(130%);transition:transform .55s cubic-bezier(.16,1,.3,1)}
.rd-nudge.rd-show{transform:none}
.rd-nudge img{width:56px;height:56px;border-radius:12px;object-fit:cover}
.rd-nudge b{display:block;font-size:15px;font-weight:600;line-height:1.25}
.rd-nudge span{font-size:12.5px;color:var(--white-70)}
.rd-nudge-go{border:0;border-radius:999px;background:var(--lime);color:var(--ink);font:inherit;font-weight:600;font-size:14px;padding:.6rem 1rem;cursor:pointer}
.rd-nudge-x{position:absolute;top:-10px;right:-6px;width:28px;height:28px;border-radius:50%;border:0;background:var(--white);color:var(--ink);font-size:18px;line-height:1;box-shadow:0 4px 12px rgba(0,0,0,.2);cursor:pointer}
@media (max-width:760px){
  .rd{max-width:100vw;max-height:100svh;height:100svh;margin:0}
  .rd-shell{grid-template-columns:1fr;grid-template-rows:150px 1fr;height:100svh;border-radius:0}
  .rd-photo-copy{padding:1rem 1.2rem}.rd-photo-copy p{display:none}
  .rd-areas{grid-template-columns:1fr}.rd-areas li,.rd-areas li:nth-child(n+4){grid-column:auto}
  .rd-chart{grid-template-columns:1fr}.rd-spider{margin:0 auto;max-width:360px}
  .rd-head{grid-template-columns:96px 1fr;gap:1rem;padding-right:0}.rd-score{width:96px;height:96px}.rd-num b{font-size:1.8rem}
  .rd-stage{padding:1.4rem 1.2rem 2rem}
  .rd-view{margin:0}
}
/* "Maybe later": the check folds into a bubble in the bottom right (shared.js animates the fold), and grows back out of it */
.rd.rd-morph .rd-shell{transition:none;opacity:1;transform:none;will-change:transform}
.rd.rd-morph .rd-shell>*{transition:opacity .22s var(--ease)}
.rd.rd-fold .rd-shell>*{opacity:0}
.rd-bubble{position:fixed;right:24px;bottom:calc(24px + env(safe-area-inset-bottom,0px));z-index:65;pointer-events:none}
.rd-bubble-open{pointer-events:auto;position:relative;display:flex;align-items:center;height:60px;padding:0;border:0;border-radius:999px;background:var(--navy);color:var(--white);
  font:inherit;font-size:14px;font-weight:600;letter-spacing:-.01em;cursor:pointer;box-shadow:0 14px 34px rgba(20,24,33,.32),0 0 0 1px rgba(255,255,255,.06) inset;
  opacity:0;transform:scale(.4);transition:opacity .3s,transform .55s cubic-bezier(.34,1.56,.64,1),box-shadow .3s}
.rd-bubble.rd-show .rd-bubble-open{opacity:1;transform:none}
.rd-bubble-open:hover{box-shadow:0 18px 40px rgba(20,24,33,.4),0 0 0 1px rgba(196,245,51,.35) inset}
.rd-bubble-open:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.rd-bubble-orb{display:grid;place-items:center;width:60px;height:60px;flex:none}
.rd-bubble-orb .orb{width:30px;height:30px;vertical-align:0}
.rd-bubble-open:hover .orb,.rd-bubble.rd-land .orb{animation:orb-pulse .6s ease-in-out infinite}
.rd-bubble-label{max-width:0;overflow:hidden;white-space:nowrap;opacity:0;padding-left:0;transition:max-width .5s var(--ease),opacity .3s,padding .5s var(--ease)}
.rd-bubble-open:hover .rd-bubble-label,.rd-bubble-open:focus-visible .rd-bubble-label,.rd-bubble.rd-peek .rd-bubble-label{max-width:220px;opacity:1;padding-left:22px}
/* the lime ring that ripples out when it lands, and now and then after */
.rd-bubble-open::before,.rd-bubble-open::after{content:"";position:absolute;right:0;bottom:0;width:60px;height:60px;border-radius:50%;border:2px solid var(--lime);opacity:0;pointer-events:none}
.rd-bubble.rd-land .rd-bubble-open{animation:rd-land .75s cubic-bezier(.34,1.56,.64,1);opacity:1;transition:box-shadow .3s}   /* takes over from the folding check at once */
.rd-bubble.rd-land .rd-bubble-open::before{animation:rd-ripple .9s cubic-bezier(.2,.7,.3,1) .05s}
.rd-bubble.rd-land .rd-bubble-open::after{animation:rd-ripple 1.1s cubic-bezier(.2,.7,.3,1) .22s}
.rd-bubble.rd-show:not(.rd-land) .rd-bubble-open::after{animation:rd-idle 8s ease-out 2s infinite}
@keyframes rd-land{0%{transform:scale(.8)}35%{transform:scale(1.16)}62%{transform:scale(.95)}100%{transform:scale(1)}}
@keyframes rd-ripple{0%{opacity:.85;transform:scale(1)}100%{opacity:0;transform:scale(2.3)}}
@keyframes rd-idle{0%{opacity:.6;transform:scale(1)}14%{opacity:0;transform:scale(1.9)}100%{opacity:0;transform:scale(1.9)}}
/* sparks that burst out of the bubble as it lands */
.rd-burst{position:absolute;right:30px;bottom:30px;width:0;height:0;pointer-events:none}
.rd-burst i{position:absolute;left:-3px;top:-3px;width:6px;height:6px;border-radius:50%;background:var(--lime);opacity:0}
.rd-burst i:nth-child(3n){background:var(--navy);width:5px;height:5px}
.rd-bubble.rd-land .rd-burst i{animation:rd-spark .85s cubic-bezier(.15,.7,.3,1) calc(.04s + var(--n)*.015s) forwards}
@keyframes rd-spark{0%{opacity:1;transform:rotate(var(--a)) translateX(14px) scale(1)}70%{opacity:.9}100%{opacity:0;transform:rotate(var(--a)) translateX(var(--d)) scale(.3)}}
/* hide it for the rest of the visit */
.rd-bubble-x{pointer-events:auto;position:absolute;top:-7px;right:-7px;width:24px;height:24px;border-radius:50%;border:0;background:var(--white);color:var(--ink);font-size:16px;line-height:1;
  box-shadow:0 4px 12px rgba(0,0,0,.22);cursor:pointer;opacity:0;transform:scale(.6);transition:opacity .2s,transform .25s var(--ease)}
.rd-bubble.rd-show:hover .rd-bubble-x,.rd-bubble-x:focus-visible{opacity:1;transform:none}
@media (hover:none){.rd-bubble.rd-show .rd-bubble-x{opacity:1;transform:none}}
@media (max-width:760px){.rd-bubble{right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px))}}
@media print{.rd-bubble{display:none}}
@media (prefers-reduced-motion:reduce){
  .rd-bubble-open,.rd-bubble-label,.rd-bubble-x{transition:opacity .2s!important}.rd-bubble-open{transform:none!important}
  .rd-bubble-open::before,.rd-bubble-open::after,.rd-burst i,.rd-bubble .orb{animation:none!important}
}
@media (prefers-reduced-motion:reduce){
  .rd-shell,.rd-view,.rd-areas li,.rd-opt,.rd-photo img,.rd-nudge{transition:none!important;transform:none!important;opacity:1!important}
  .rd-hl::before{transition:none;transform:none}.rd-ring,.rd-bars i{transition:none}
  .rd-sp-shape,.rd-sp-label{transition:none!important;transform:none!important;opacity:1!important}
}