/* Alte Haas Grotesk carries every label, button and nav item on the site */
  @font-face{
    font-family:'Alte Haas Grotesk';
    src:url('fonts/AlteHaasGrotesk-Regular.woff2') format('woff2');
    font-weight:400;
    font-style:normal;
    font-display:swap;
  }

  :root{
    --ink:#060606;
    --card:#111420;
    --card-line:#23273a;
    --paper:#FBFCF8;
    --paper-dim:#c7c9c2;
    --blue:#1338BE;
    --blue-bright:#3f5eea;
    --red:#D21404;
    --mono-text:#8b90a6;
    --font-display:'Barlow Condensed',Impact,'Arial Narrow',sans-serif;
    --font-body:'Barlow','Helvetica Neue',Helvetica,Arial,sans-serif;
    /* still called --font-mono so every existing rule picks it up */
    --font-mono:'Alte Haas Grotesk','Helvetica Neue',Helvetica,Arial,sans-serif;
  }

  *,*::before,*::after{box-sizing:border-box;}
  [hidden]{display:none !important;}
  html{scroll-behavior:smooth;}
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;}
  }
  /* the per-component accessibility overrides live at the END of this file,
     so they win the cascade against the component rules they are overriding */

  body{
    margin:0;
    background:var(--ink);
    color:var(--paper);
    font-family:var(--font-body);
    font-size:16px;
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
  }

  img{max-width:100%;}

  h1,h2,h3{
    font-family:var(--font-display);
    text-transform:uppercase;
    font-weight:800;
    /* tracking and leading are set per size below, never one value for all of them:
       large display type reads too loose as it grows, small type needs the room back */
    letter-spacing:0;
    line-height:1.0;
    margin:0;
    text-wrap:balance;
  }
  /* large display: tighten as it grows */
  .hero h1{letter-spacing:-0.016em;line-height:0.96;}
  .g-head{letter-spacing:-0.012em;line-height:0.98;}
  .section-head h2{letter-spacing:-0.01em;line-height:0.99;}
  /* small headings: leave tracking alone and give the lines room to breathe */
  .split-copy h3,.card h3{letter-spacing:0;line-height:1.06;}
  .fstep h3{letter-spacing:0;line-height:1.1;}

  a{color:inherit;}

  .eyebrow{
    font-family:var(--font-mono);
    font-size:0.72rem;
    letter-spacing:0.16em;
    text-transform:uppercase;
    color:var(--mono-text);
  }

  .wrap{
    max-width:1120px;
    margin:0 auto;
    padding:0 clamp(20px,4vw,48px);
  }

  /* ---------- header ---------- */
  .site-header{
    position:sticky;
    top:0;
    z-index:50;
    background:rgba(6,6,6,0.86);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--card-line);
  }
  .site-header .wrap{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding-top:16px;
    padding-bottom:16px;
  }
  .brand{
    display:flex;
    align-items:baseline;
    gap:8px;
    font-family:var(--font-display);
    font-weight:800;
    font-size:1.15rem;
    letter-spacing:0.02em;
    text-transform:uppercase;
    text-decoration:none;
    color:var(--paper);
  }
  /* logo accent matches the "METHOD" blue in the hero */
  .brand .dot{color:var(--blue-bright);}
  nav.primary-nav{
    display:flex;
    align-items:center;
    gap:28px;
  }
  nav.primary-nav a{
    font-family:var(--font-mono);
    font-size:0.78rem;
    letter-spacing:0.08em;
    text-transform:uppercase;
    text-decoration:none;
    color:var(--paper-dim);
    transition:color .15s ease;
  }
  nav.primary-nav a:hover,nav.primary-nav a:focus-visible{color:var(--paper);}
  .btn{
    font-family:var(--font-mono);
    font-size:0.78rem;
    letter-spacing:0.06em;
    text-transform:uppercase;
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    gap:8px;
    border-radius:2px;
    cursor:pointer;
    border:1px solid transparent;
    transition:transform .12s ease, background .15s ease, border-color .15s ease, color .15s ease;
  }
  .btn:focus-visible{outline:2px solid var(--blue-bright);outline-offset:2px;}
  .btn-primary{
    background:var(--blue);
    color:var(--paper);
    padding:12px 20px;
  }
  .btn-primary:hover{background:var(--blue-bright);}
  .btn-primary:active{transform:translateY(1px);}
  .btn-ghost{
    background:transparent;
    color:var(--paper);
    border-color:var(--card-line);
    padding:11px 19px;
  }
  .btn-ghost:hover{border-color:var(--paper-dim);}
  .header-cta{display:inline-flex;}



  /* honeypot: off-screen, never focusable, invisible to real people */
  .hp-field{
    position:absolute !important;
    left:-9999px;
    width:1px;
    height:1px;
    opacity:0;
    pointer-events:none;
  }
  .confirm-meta{
    font-family:var(--font-mono);
    font-size:0.78rem;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:var(--mono-text);
    margin-top:14px;
  }
  .fbtn-next[disabled]{cursor:progress;}

  /* ---------- mobile menu ---------- */
  .nav-toggle{
    display:none;
    width:44px;
    height:44px;
    align-items:center;
    justify-content:center;
    background:transparent;
    border:1px solid var(--card-line);
    border-radius:3px;
    cursor:pointer;
    padding:0;
    color:var(--paper);
    transition:border-color .15s ease, background .15s ease, transform .12s ease;
  }
  .nav-toggle:active{transform:scale(0.94);}
  .nav-toggle:hover{border-color:var(--paper-dim);}
  .nav-toggle:focus-visible{outline:2px solid var(--blue-bright);outline-offset:2px;}
  .nav-bars{display:block;width:18px;height:12px;position:relative;}
  .nav-bars i{
    position:absolute;
    left:0;
    width:100%;
    height:2px;
    background:currentColor;
    border-radius:2px;
    transition:transform .26s cubic-bezier(.22,.61,.36,1), opacity .16s ease;
  }
  .nav-bars i:nth-child(1){top:0;}
  .nav-bars i:nth-child(2){top:5px;}
  .nav-bars i:nth-child(3){top:10px;}
  /* the bars become the close mark, so open and close are one continuous movement */
  .nav-toggle[aria-expanded="true"] .nav-bars i:nth-child(1){transform:translateY(5px) rotate(45deg);}
  .nav-toggle[aria-expanded="true"] .nav-bars i:nth-child(2){opacity:0;}
  .nav-toggle[aria-expanded="true"] .nav-bars i:nth-child(3){transform:translateY(-5px) rotate(-45deg);}

  .mobile-nav{display:none;}
  .mobile-nav > div{overflow:hidden;min-height:0;}
  .mobile-nav-inner{
    display:flex;
    flex-direction:column;
    padding:6px clamp(20px,4vw,48px) 14px;
  }
  .mobile-nav-inner a{
    font-family:var(--font-mono);
    font-size:0.92rem;
    letter-spacing:0.07em;
    text-transform:uppercase;
    text-decoration:none;
    color:var(--paper-dim);
    padding:15px 0;
    border-bottom:1px solid var(--card-line);
    transition:color .15s ease, padding-left .18s ease;
  }
  .mobile-nav-inner a:last-child{border-bottom:none;}
  .mobile-nav-inner a:hover,.mobile-nav-inner a:focus-visible{color:var(--paper);}
  .mobile-nav-inner a:active{color:var(--blue-bright);padding-left:4px;}

  /* ---------- hero ---------- */
  .hero{
    padding:clamp(56px,9vw,110px) 0 clamp(48px,7vw,80px);
    border-bottom:1px solid var(--card-line);
    position:relative;
    overflow:hidden;
  }
  .hero::before{
    content:"";
    position:absolute;
    top:-40%;
    right:-10%;
    width:560px;
    height:560px;
    background:radial-gradient(circle,rgba(19,56,190,0.28) 0%,rgba(19,56,190,0) 70%);
    pointer-events:none;
  }
  .hero-grid{
    position:relative;
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,0.82fr);
    gap:clamp(28px,4vw,64px);
    align-items:center;
  }
  .hero-copy{min-width:0;}
  .hero-media{
    min-width:0;
    line-height:0;
    background:#000;
    border:1px solid var(--card-line);
    overflow:hidden;
  }
  .hero-media img{
    display:block;
    width:100%;
    height:clamp(320px,38vw,480px);
    object-fit:cover;
    object-position:center 22%;
  }
  .hero h1{
    font-size:clamp(2.6rem,5.2vw,4.1rem);
    max-width:14ch;
  }
  .hero h1 em{
    font-style:normal;
    color:var(--blue-bright);
  }
  .hero-sub{
    margin-top:22px;
    max-width:46ch;
    font-size:1.08rem;
    color:var(--paper-dim);
  }
  .hero-actions{
    margin-top:32px;
    display:flex;
    align-items:center;
    gap:20px;
    flex-wrap:wrap;
  }
  .hero-meta{
    font-family:var(--font-mono);
    font-size:0.78rem;
    color:var(--mono-text);
    letter-spacing:0.04em;
  }

  /* ---------- methodology marquee ---------- */
  /* sits above the footer now, so the hairline goes on top */
  .method-band{
    border-top:1px solid var(--card-line);
    padding:22px 0;
    background:var(--card);
    overflow:hidden;
  }
  .method-band-inner{
    display:flex;
    align-items:center;
    gap:40px;
  }
  .method-band .eyebrow{white-space:nowrap;padding-left:clamp(20px,4vw,48px);}
  .marquee{
    flex:1;
    overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  }
  .marquee-track{
    display:flex;
    width:max-content;
    gap:14px;
    animation:scroll-left 32s linear infinite;
  }
  @media (prefers-reduced-motion: reduce){
    .marquee-track{animation:none;flex-wrap:wrap;width:auto;}
  }
  @keyframes scroll-left{
    from{transform:translateX(0);}
    to{transform:translateX(-50%);}
  }
  .pill{
    font-family:var(--font-mono);
    font-size:0.78rem;
    letter-spacing:0.03em;
    white-space:nowrap;
    color:var(--paper);
    border:1px solid var(--card-line);
    padding:7px 14px;
    border-radius:999px;
    background:var(--ink);
  }
  .pill span{color:var(--mono-text);}

  /* ---------- section shell ---------- */
  section{padding:clamp(56px,8vw,96px) 0;}
  .section-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:24px;
    flex-wrap:wrap;
    margin-bottom:40px;
    border-bottom:1px solid var(--card-line);
    padding-bottom:24px;
  }
  .section-head h2{font-size:clamp(1.9rem,4vw,2.7rem);}
  .section-head .eyebrow{margin-bottom:10px;}
  .section-note{max-width:34ch;color:var(--paper-dim);font-size:0.95rem;text-align:right;}

  /* ---------- coaching cards ---------- */
  .cards{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:1px;
    background:var(--card-line);
    border:1px solid var(--card-line);
  }
  .card{
    background:var(--ink);
    padding:28px;
    display:flex;
    flex-direction:column;
    gap:14px;
  }
  /* section numbers match the FAQ's 01/02/03 blue */
  .card .num{font-family:var(--font-mono);font-size:0.78rem;color:var(--blue-bright);}
  .card h3{font-size:1.4rem;}
  .card p{color:var(--paper-dim);font-size:0.95rem;margin:0;}
  .card .tag{
    margin-top:auto;
    font-family:var(--font-mono);
    font-size:0.72rem;
    color:var(--mono-text);
    letter-spacing:0.06em;
    text-transform:uppercase;
    padding-top:14px;
    border-top:1px dashed var(--card-line);
  }

  /* ---------- split rows: image integrated beside copy ---------- */
  .split-rows{
    display:flex;
    flex-direction:column;
    gap:1px;
    background:var(--card-line);
    border:1px solid var(--card-line);
  }
  .split{
    display:grid;
    grid-template-columns:minmax(0,0.8fr) minmax(0,1fr);
    background:var(--ink);
  }
  /* alternate the photo to the right without changing source order */
  .split.flip .split-media{order:2;}
  .split-media{
    position:relative;
    line-height:0;
    background:#000;
    overflow:hidden;
  }
  .split-media img{
    display:block;
    width:100%;
    /* fixed band height keeps every row the same and stops photos dominating */
    height:clamp(280px,29vw,410px);
    object-fit:cover;
    object-position:center 20%;
  }
  .split-copy{
    padding:clamp(26px,3.2vw,44px);
    display:flex;
    flex-direction:column;
    gap:14px;
    justify-content:center;
  }
  .split-media img.pos-mid{object-position:center 42%;}
  .split-copy .num{font-family:var(--font-mono);font-size:0.78rem;color:var(--blue-bright);}
  .split-copy h3{font-size:clamp(1.3rem,2.3vw,1.7rem);}
  .split-copy p{color:var(--paper-dim);font-size:0.98rem;margin:0;max-width:46ch;}
  .split-copy .tag{
    margin-top:6px;
    font-family:var(--font-mono);
    font-size:0.72rem;
    color:var(--mono-text);
    letter-spacing:0.06em;
    text-transform:uppercase;
    padding-top:14px;
    border-top:1px dashed var(--card-line);
  }

  /* guarantee split: photo column beside the full guarantee copy */
  .g-split{
    grid-template-columns:minmax(0,0.68fr) minmax(0,1fr);
    gap:clamp(28px,4vw,64px);
    background:transparent;
    align-items:stretch;
  }
  .g-media{border:1px solid var(--card-line);}
  .g-media{height:100%;}
  .g-media img{height:100%;min-height:clamp(320px,42vw,560px);object-position:center 16%;}
  .g-split .g-inner{max-width:none;padding:clamp(4px,1vw,12px) 0;}

  @media (max-width:860px){
    .split,.g-split{grid-template-columns:1fr;}
    .split.flip .split-media{order:0;}
    .split-media img{height:clamp(220px,52vw,320px);}
    .g-media img{height:auto;min-height:clamp(260px,62vw,380px);}
  }

  /* ---------- process ---------- */
  .process-list{
    list-style:none;
    margin:0;
    padding:0;
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:24px;
  }
  .process-list li{
    border-left:2px solid var(--blue);
    padding-left:18px;
  }
  .process-list .step-no{
    font-family:var(--font-mono);
    color:var(--blue-bright);
    font-size:0.82rem;
    display:block;
    margin-bottom:8px;
  }
  .process-list h3{font-size:1.15rem;text-transform:none;letter-spacing:0;font-weight:600;font-family:var(--font-body);}
  .process-list p{color:var(--paper-dim);font-size:0.92rem;margin:8px 0 0;}

  /* ---------- results / transformations ---------- */
  .results{
    background:var(--card);
    border-top:1px solid var(--card-line);
    border-bottom:1px solid var(--card-line);
  }
  .results-intro{max-width:46ch;color:var(--paper-dim);font-size:1rem;margin:0;}

  .transform-shell{
    margin-top:40px;
    background:var(--ink);
    border:1px solid var(--card-line);
    border-radius:4px;
    overflow:hidden;
    max-width:760px;
    margin-left:auto;
    margin-right:auto;
  }

  /* the pair fills the card edge to edge; the shell width is what keeps it compact */
  .ba-stage{
    position:relative;
    background:#000;
    width:100%;
  }
  .ba-pair{
    display:grid;
    grid-template-columns:1fr 1fr;
  }
  .ba-half{
    position:relative;
    aspect-ratio:4/5;
    overflow:hidden;
    background:linear-gradient(160deg,#161a29 0%,#0c0e17 100%);
  }
  .ba-half img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }
  .ba-half + .ba-half{border-left:1px solid rgba(251,252,248,0.14);}
  .ba-label{
    position:absolute;
    top:14px;
    left:14px;
    font-family:var(--font-mono);
    font-size:0.66rem;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--paper);
    background:rgba(6,6,6,0.62);
    backdrop-filter:blur(6px);
    padding:6px 12px;
    border-radius:999px;
    border:1px solid rgba(251,252,248,0.18);
  }
  .ba-empty{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:8px;
    text-align:center;
    padding:20px;
    color:var(--mono-text);
    font-family:var(--font-mono);
    font-size:0.72rem;
    letter-spacing:0.06em;
  }
  .ba-empty strong{
    display:block;
    font-family:var(--font-display);
    font-size:1.05rem;
    letter-spacing:0.04em;
    color:var(--paper-dim);
    text-transform:uppercase;
  }

  .duration-pill{
    position:absolute;
    left:50%;
    bottom:18px;
    transform:translateX(-50%);
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-family:var(--font-mono);
    font-size:0.7rem;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--paper);
    background:rgba(6,6,6,0.72);
    backdrop-filter:blur(6px);
    padding:9px 16px;
    border-radius:999px;
    border:1px solid rgba(251,252,248,0.18);
    white-space:nowrap;
  }
  .duration-pill svg{width:13px;height:13px;flex:none;}

  .carousel-btn{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:44px;
    height:44px;
    border-radius:50%;
    border:1px solid rgba(251,252,248,0.22);
    background:rgba(6,6,6,0.6);
    backdrop-filter:blur(6px);
    color:var(--paper);
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    z-index:2;
    transition:background .15s ease, border-color .15s ease, transform .12s ease;
  }
  .carousel-btn:active{transform:translateY(-50%) scale(0.92);}
  /* ~8px of invisible hit padding so the tap target is bigger than the circle */
  .carousel-btn::after{content:"";position:absolute;inset:-8px;border-radius:50%;}
  .carousel-btn:hover{background:var(--blue);border-color:var(--blue);}
  .carousel-btn:focus-visible{outline:2px solid var(--blue-bright);outline-offset:2px;}
  .carousel-btn.prev{left:14px;}
  .carousel-btn.next{right:14px;}
  .carousel-btn svg{width:18px;height:18px;}

  .transform-body{padding:clamp(22px,4vw,34px);}
  .transform-quote{
    font-size:clamp(1.02rem,2.1vw,1.28rem);
    font-style:italic;
    line-height:1.6;
    color:var(--paper);
    margin:0;
    text-wrap:pretty;
  }
  .transform-attr{
    margin-top:18px;
    font-family:var(--font-mono);
    font-size:0.76rem;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--mono-text);
  }
  .transform-attr b{color:var(--paper);font-weight:500;}
  .transform-body .btn{margin-top:24px;}

  .thumb-strip{
    display:flex;
    gap:12px;
    margin-top:20px;
    overflow-x:auto;
    padding-bottom:10px;
    scrollbar-width:thin;
    /* flick the strip and it lands on a card rather than stopping mid-thumbnail */
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
  }
  .thumb{scroll-snap-align:start;}
  .thumb{
    flex:0 0 168px;
    background:var(--ink);
    border:1px solid var(--card-line);
    border-radius:4px;
    overflow:hidden;
    cursor:pointer;
    text-align:left;
    padding:0;
    color:inherit;
    font:inherit;
    transition:border-color .15s ease, transform .12s ease;
  }
  .thumb:active{transform:scale(0.985);}
  .thumb:hover{border-color:var(--paper-dim);}
  .thumb:focus-visible{outline:2px solid var(--blue-bright);outline-offset:2px;}
  .thumb[aria-selected="true"]{border-color:var(--blue-bright);}
  .thumb-pair{display:grid;grid-template-columns:1fr 1fr;position:relative;}
  .thumb-half{
    position:relative;
    aspect-ratio:4/5;
    overflow:hidden;
    background:linear-gradient(160deg,#161a29 0%,#0c0e17 100%);
  }
  .thumb-half img{width:100%;height:100%;object-fit:cover;display:block;}
  .thumb-half + .thumb-half{border-left:1px solid rgba(251,252,248,0.14);}
  .thumb-tag{
    position:absolute;
    top:6px;
    left:6px;
    font-family:var(--font-mono);
    font-size:0.52rem;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--paper);
    background:rgba(6,6,6,0.66);
    padding:3px 6px;
    border-radius:999px;
  }
  .thumb-meta{padding:12px 14px 14px;}
  .thumb-name{font-family:var(--font-display);text-transform:uppercase;font-weight:700;font-size:1rem;letter-spacing:0.02em;}
  .thumb-role{font-family:var(--font-mono);font-size:0.66rem;letter-spacing:0.06em;color:var(--mono-text);text-transform:uppercase;margin-top:3px;}

  /* ---------- full-bleed photo bands ---------- */
  .photo-band{
    position:relative;
    width:100%;
    overflow:hidden;
    border-top:1px solid var(--card-line);
    border-bottom:1px solid var(--card-line);
    background:#000;
    line-height:0;
  }
  .photo-band img{
    display:block;
    width:100%;
    height:auto;
    max-height:min(68vh,600px);
    object-fit:cover;
    /* keep the subject's head in frame when the band crops */
    object-position:center 22%;
  }
  .photo-band::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(to bottom,rgba(6,6,6,0.30) 0%,rgba(6,6,6,0) 32%,rgba(6,6,6,0) 58%,rgba(6,6,6,0.62) 100%);
    pointer-events:none;
  }
  .band-pill{
    position:absolute;
    left:clamp(20px,5vw,56px);
    bottom:clamp(20px,4vw,40px);
    z-index:2;
    display:inline-flex;
    align-items:center;
    gap:10px;
    font-family:var(--font-mono);
    font-size:clamp(0.68rem,1.6vw,0.8rem);
    letter-spacing:0.14em;
    text-transform:uppercase;
    line-height:1;
    background:var(--blue);
    color:var(--paper);
    padding:14px 22px;
    border-radius:999px;
  }

  /* two-up portrait strip, sits flush under the coaching cards */
  .photo-duo{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:1px;
    background:var(--card-line);
    border:1px solid var(--card-line);
    border-top:none;
    line-height:0;
  }
  .photo-duo img{
    display:block;
    width:100%;
    /* fixed band height rather than 4:5, which stops the pair dominating the page */
    height:clamp(240px,30vw,400px);
    object-fit:cover;
    object-position:center 22%;
  }

  /* ---------- guarantee ---------- */
  .guarantee{
    background:var(--card);
    border-top:1px solid var(--card-line);
    border-bottom:1px solid var(--card-line);
  }
  .g-inner{max-width:640px;}
  .g-head{
    margin-top:14px;
    font-size:clamp(2rem,4.6vw,3.1rem);
    line-height:1.02;
  }
  .g-head em{
    font-style:italic;
    text-transform:none;
    font-family:var(--font-body);
    font-weight:500;
    color:var(--blue-bright);
    letter-spacing:0;
  }
  .g-body{
    margin-top:22px;
    color:var(--paper-dim);
    font-size:1.04rem;
    max-width:52ch;
  }

  .tick-list{
    list-style:none;
    margin:32px 0 0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:20px;
  }
  .tick-list li{
    display:flex;
    align-items:flex-start;
    gap:14px;
  }
  .tick-list svg{
    width:20px;
    height:20px;
    flex:none;
    margin-top:3px;
    color:var(--blue-bright);
  }
  .tick-list strong{
    display:block;
    font-weight:600;
    font-size:1.06rem;
    color:var(--paper);
  }
  .tick-list span{
    display:block;
    margin-top:3px;
    color:var(--mono-text);
    font-size:0.92rem;
  }

  .g-note{
    margin:28px 0 0;
    padding-top:24px;
    border-top:1px solid var(--card-line);
    color:var(--mono-text);
    font-size:0.94rem;
  }
  .g-cta{
    margin-top:26px;
    background:var(--paper);
    color:var(--ink);
    padding:16px 26px;
    border-radius:4px;
  }
  .g-cta:hover{background:var(--blue);color:var(--paper);}
  .g-free{
    margin:20px 0 0;
    font-weight:600;
    color:var(--paper);
    font-size:0.98rem;
  }
  .g-fine{
    margin:10px 0 0;
    color:var(--mono-text);
    font-size:0.86rem;
    max-width:56ch;
  }

  /* ---------- intake funnel ---------- */
  .intake{
    background:var(--card);
    border-top:1px solid var(--card-line);
    border-bottom:1px solid var(--card-line);
  }
  .funnel-shell{
    border:1px solid var(--card-line);
    background:var(--ink);
    max-width:720px;
    margin:0 auto;
    border-radius:4px;
    overflow:hidden;
  }
  .funnel-top{padding:28px clamp(20px,4vw,40px) 0;}
  .funnel-bar{
    height:8px;
    width:100%;
    background:var(--card-line);
    border-radius:999px;
    overflow:hidden;
  }
  .funnel-bar i{
    display:block;
    height:100%;
    width:12%;
    background:var(--blue-bright);
    border-radius:999px;
    transition:width .3s cubic-bezier(.4,0,.2,1);
  }
  .funnel-count{
    margin:14px 0 0;
    font-family:var(--font-mono);
    font-size:0.72rem;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--mono-text);
    text-align:center;
  }

  form#intake-form{padding:22px clamp(20px,4vw,40px) 34px;}
  /* forward slides in from the right, Back slides in from the left, so the motion
     matches the direction of travel instead of every step arriving the same way */
  .fstep{animation:stepFwd .3s cubic-bezier(.22,.61,.36,1) both;}
  form.is-back .fstep{animation-name:stepBack;}
  @keyframes stepFwd{from{opacity:0;transform:translate3d(18px,0,0);}to{opacity:1;transform:none;}}
  @keyframes stepBack{from{opacity:0;transform:translate3d(-18px,0,0);}to{opacity:1;transform:none;}}
  .fstep h3{
    font-family:var(--font-display);
    text-transform:uppercase;
    font-size:clamp(1.35rem,3.2vw,1.85rem);
    font-weight:800;
    text-align:center;
    margin-bottom:8px;
  }
  .fstep .hint{
    color:var(--paper-dim);
    font-size:0.92rem;
    margin:0 auto 26px;
    text-align:center;
    max-width:46ch;
  }

  .opt-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:12px;
    margin-bottom:8px;
  }
  .opt-grid.one-col{grid-template-columns:1fr;}
  .opt{
    position:relative;
    display:block;
  }
  .opt input{
    position:absolute;
    inset:0;
    opacity:0;
    width:100%;
    height:100%;
    margin:0;
    cursor:pointer;
  }
  .opt span{
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    min-height:56px;
    padding:12px 20px;
    background:var(--paper);
    color:var(--ink);
    border:1px solid var(--paper);
    border-radius:999px;
    font-size:0.98rem;
    font-weight:500;
    transition:background .15s ease, color .15s ease, border-color .15s ease, transform .12s ease;
  }
  .opt:hover span{transform:translateY(-1px);}
  .opt input:checked + span{
    background:var(--blue);
    border-color:var(--blue-bright);
    color:var(--paper);
  }
  .opt input:focus-visible + span{outline:2px solid var(--blue-bright);outline-offset:3px;}
  /* the press itself is the feedback, so it fires on pointer-down */
  .opt:active span{transform:scale(0.98);}
  /* hover shows you what picking it will look like, and breathes gently while you decide.
     hover:hover keeps it off touch screens, where :hover sticks after a tap. */
  @media (hover:hover){
    .opt:hover input:not(:checked) + span{
      background:var(--blue);
      border-color:var(--blue);
      color:var(--paper);
      animation:optBreathe 1.8s ease-in-out infinite;
    }
  }
  /* a ring, not a scale: it reads as soft and shifts nothing around it */
  @keyframes optBreathe{
    0%,100%{box-shadow:0 0 0 0 rgba(63,94,234,0.0);}
    50%{box-shadow:0 0 0 7px rgba(63,94,234,0.16);}
  }

  .f-field{margin-bottom:14px;}
  .f-field label{
    display:block;
    font-family:var(--font-mono);
    font-size:0.7rem;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--mono-text);
    margin-bottom:7px;
  }
  .funnel-shell input[type="text"],
  .funnel-shell input[type="email"],
  .funnel-shell input[type="tel"],
  .funnel-shell select,
  .funnel-shell textarea{
    width:100%;
    background:var(--paper);
    border:1px solid var(--paper);
    color:var(--ink);
    font-family:var(--font-body);
    font-size:1rem;
    padding:15px 16px;
    border-radius:10px;
    transition:border-color .15s ease, box-shadow .15s ease;
  }
  .funnel-shell textarea{resize:vertical;min-height:132px;border-radius:12px;}
  .funnel-shell input:focus-visible,
  .funnel-shell select:focus-visible,
  .funnel-shell textarea:focus-visible{
    outline:none;
    border-color:var(--blue-bright);
    box-shadow:0 0 0 3px rgba(63,94,234,0.28);
  }
  .funnel-shell input::placeholder,
  .funnel-shell textarea::placeholder{color:#8d9099;}
  .phone-row{display:flex;gap:10px;}
  .phone-row select{flex:0 0 132px;}
  .phone-row input{flex:1;}

  .funnel-nav{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:12px;
    margin-top:26px;
  }
  .fbtn{
    font-family:var(--font-mono);
    font-size:0.78rem;
    letter-spacing:0.08em;
    text-transform:uppercase;
    padding:14px 30px;
    border-radius:999px;
    cursor:pointer;
    border:1px solid transparent;
    transition:background .15s ease, color .15s ease, border-color .15s ease, transform .12s ease;
  }
  .fbtn:focus-visible{outline:2px solid var(--blue-bright);outline-offset:2px;}
  .fbtn-back{background:transparent;color:var(--paper);border-color:var(--card-line);}
  .fbtn-back:hover{border-color:var(--paper-dim);}
  .fbtn-next{background:var(--paper);color:var(--ink);}
  .fbtn-next:hover:not(:disabled){background:var(--blue);color:var(--paper);}
  .fbtn-next:active:not(:disabled){transform:translateY(1px);}
  .fbtn-back:active{transform:translateY(1px);}
  .fbtn-next:disabled{opacity:0.34;cursor:not-allowed;}

  #confirm{padding:0 clamp(20px,4vw,40px) 36px;}
  #confirm .confirm-box{
    border:1px solid var(--blue-bright);
    background:rgba(19,56,190,0.1);
    padding:24px;
    border-radius:8px;
  }
  #confirm h3{font-family:var(--font-display);text-transform:uppercase;font-size:1.5rem;margin-bottom:10px;}
  #confirm p{color:var(--paper-dim);font-size:0.94rem;margin:0 0 16px;}
  #confirm textarea{
    width:100%;
    min-height:180px;
    background:var(--card);
    border:1px solid var(--card-line);
    color:var(--paper-dim);
    font-family:var(--font-mono);
    font-size:0.78rem;
    padding:14px;
    border-radius:8px;
    margin-bottom:14px;
  }
  .copy-status{font-family:var(--font-mono);font-size:0.75rem;color:var(--blue-bright);margin-left:12px;}

  /* ---------- personal message bar ---------- */
  .personal-msg{background:var(--blue);}
  .personal-msg .wrap{max-width:800px;text-align:center;}
  .personal-msg p{
    margin:0;
    color:var(--paper);
    font-size:clamp(1.05rem,2.4vw,1.3rem);
    line-height:1.6;
  }

  /* ---------- footer ---------- */
  footer{padding:44px 0 60px;}
  .footer-grid{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:24px;
    flex-wrap:wrap;
    padding-top:32px;
    border-top:1px solid var(--card-line);
  }
  .footer-brand{font-family:var(--font-display);text-transform:uppercase;font-size:1.1rem;font-weight:800;}
  .footer-links{display:flex;gap:22px;flex-wrap:wrap;}
  .footer-links a{
    font-family:var(--font-mono);
    font-size:0.78rem;
    letter-spacing:0.05em;
    text-transform:uppercase;
    text-decoration:none;
    color:var(--paper-dim);
  }
  .footer-links a:hover{color:var(--paper);}
  .footer-fine{
    font-family:var(--font-mono);
    font-size:0.72rem;
    color:var(--mono-text);
    margin-top:26px;
  }

  @media (max-width:860px){
    nav.primary-nav{display:none;}
    .nav-toggle{display:inline-flex;}
    /* grid-rows 0fr to 1fr animates open without guessing a max-height */
    .mobile-nav{
      display:grid;
      grid-template-rows:0fr;
      background:rgba(6,6,6,0.97);
      backdrop-filter:blur(10px);
      border-top:1px solid transparent;
      transition:grid-template-rows .3s cubic-bezier(.22,.61,.36,1), border-top-color .3s ease;
    }
    .mobile-nav.is-open{grid-template-rows:1fr;border-top-color:var(--card-line);}
    /* hero stacks: copy first, photo beneath it */
    .hero-grid{grid-template-columns:1fr;gap:28px;}
    .hero-media img{height:clamp(300px,64vw,420px);}
    .cards{grid-template-columns:1fr;}
    .process-list{grid-template-columns:1fr 1fr;}
    .carousel-btn{width:38px;height:38px;}
    .carousel-btn.prev{left:8px;}
    .carousel-btn.next{right:8px;}
  }
  @media (max-width:520px){
    .header-cta{display:none;}
    .process-list{grid-template-columns:1fr;}
    .section-note{text-align:left;}
    .opt-grid{grid-template-columns:1fr;}
    .duration-pill{font-size:0.62rem;padding:7px 12px;}
    .thumb{flex:0 0 140px;}
  }


  /* ============================================================
     ACCESSIBILITY PREFERENCES
     Last in the file on purpose: these override component rules
     defined above, and equal-specificity rules are won by the later one.
     ============================================================ */

  @keyframes stepFade{from{opacity:0;}to{opacity:1;}}

  /* Reduced motion is not "no feedback", it is a gentler, non-vestibular
     equivalent: cross-fade instead of travel, and no snap-driven scrolling. */
  @media (prefers-reduced-motion: reduce){
    .fstep{animation:stepFade .2s ease both !important;}
    .thumb-strip{scroll-snap-type:none;}
    .opt:active span,.thumb:active,.carousel-btn:active,.nav-toggle:active{transform:none;}
    .opt:hover input:not(:checked) + span{animation:none;}
    .mobile-nav{transition:none;}
    .nav-bars i{transition:opacity .16s ease;}
  }

  /* Translucent surfaces become frosty and solid. */
  @media (prefers-reduced-transparency: reduce){
    .site-header{background:var(--ink);backdrop-filter:none;}
    .carousel-btn{background:var(--ink);backdrop-filter:none;}
    .duration-pill,.ba-label,.thumb-tag{backdrop-filter:none;}
    .mobile-nav{background:var(--ink);backdrop-filter:none;}
  }

  /* Near-solid backgrounds with defined, contrasting edges. */
  @media (prefers-contrast: more){
    :root{--paper-dim:#e8eae4;--mono-text:#b9bed2;--card-line:#4a5068;}
    .site-header{background:var(--ink);backdrop-filter:none;}
    .carousel-btn{background:var(--ink);border-color:var(--paper);backdrop-filter:none;}
    .btn-ghost{border-color:var(--paper);}
    .tag{border-top-color:var(--card-line);}
    .mobile-nav{background:var(--ink);backdrop-filter:none;}
    .nav-toggle{border-color:var(--paper);}
  }