/* GENERATED FILE - do not edit by hand.
   Source: site/index.html <style> block (the locked homepage design).
   Regenerate: python3 tools/sync-home-core-css.py */

  :root{
    --paper:#FAFAF7;
    --ink:#141412;
    --muted:#6E6E68;
    --faint:#B9B9B2;
    --line:#E7E7E1;
    --cream:#FAF8F3;
    --serif:'Instrument Serif', Georgia, serif;
    /* body font = his round-24 pick (bf opt 6, Epilogue): sharper letterforms, a bit of edge,
       still readable. Replaces Inter Tight everywhere the sans is used. */
    --sans:'Epilogue', -apple-system, 'Helvetica Neue', sans-serif;
    --mono:'IBM Plex Mono', 'SF Mono', monospace;
    --gutter:clamp(1.25rem, 4vw, 4rem);
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:auto;}
  html.lenis{height:auto;}
  .lenis.lenis-smooth{scroll-behavior:auto!important;}
  body{
    background:var(--paper);
    color:var(--ink);
    font-family:var(--sans);
    font-weight:300;
    font-size:1rem;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    overflow-x:hidden;
  }
  ::selection{background:var(--ink);color:var(--paper);}
  a{color:inherit;text-decoration:none;}
  a:focus-visible{outline:1px solid var(--ink);outline-offset:4px;}

  /* ---- atmosphere: whisper-subtle warm washes + paper grain (the pre-round-8 restraint) ---- */
  .atmo{
    position:fixed;inset:0;z-index:3;pointer-events:none;
    mix-blend-mode:multiply;
    background:
      radial-gradient(58% 46% at 78% 8%, rgba(196,190,180,.13), transparent 72%),
      radial-gradient(50% 42% at 8% 92%, rgba(178,178,170,.11), transparent 70%);
  }
  /* Round 34 "less plain" pass: the yellow-leaning wash is gone for good; richness now comes
     from a NEUTRAL drifting light layer + firmer paper grain. Keep everything grey-toned. */
  /* world 11 quiet blend, Round-47 state: linen weave + grain only. The pressed sprigs and
     the falling leaf are OFF (Reece 2026-07-21, pending a leaf refinement round he approves). */
  .weave{
    position:fixed;inset:0;z-index:3;pointer-events:none;
    mix-blend-mode:multiply;opacity:.35;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Crect x='0' y='0' width='1' height='6' fill='%23C8C0AE' fill-opacity='.20'/%3E%3Crect x='3' y='0' width='1' height='6' fill='%23C8C0AE' fill-opacity='.10'/%3E%3Crect x='0' y='0' width='6' height='1' fill='%23C8C0AE' fill-opacity='.16'/%3E%3Crect x='0' y='3' width='6' height='1' fill='%23C8C0AE' fill-opacity='.08'/%3E%3C/svg%3E");
  }
  /* Round-52 pick (his round-15 favourite, option 4 "dusk"): pale lavender calm, deeper at
     the corners. A fixed multiply wash, so the paper and the baked-bg images tint identically
     (colour can never leave the pictures sitting in boxes). */
  /* Round-57 pick (his round-17 board, tone option 3): dusk DEEPER. The tone rides one
     variable so the header tint below always matches the page wash. */
  body{
    --tone:
      linear-gradient(165deg, rgba(182,172,204,.30), transparent 62%),
      radial-gradient(52% 46% at 100% 100%, rgba(146,132,184,.34), transparent 74%),
      radial-gradient(46% 42% at 0% 100%, rgba(146,132,184,.26), transparent 74%);
  }
  .dusk{
    position:fixed;inset:0;z-index:3;pointer-events:none;
    mix-blend-mode:multiply;
    background:var(--tone);
  }
  body{position:relative;}
  .grain{
    position:fixed;inset:0;z-index:3;pointer-events:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.075'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  /* ---- architectural frame: two faint plumb lines ---- */
  .frame{position:fixed;inset:0;pointer-events:none;z-index:1;}
  .frame::before,.frame::after{
    content:"";position:absolute;top:0;bottom:0;width:1px;background:var(--line);
  }
  .frame::before{left:var(--gutter);}
  .frame::after{right:var(--gutter);}
  @media(max-width:700px){.frame{display:none;}}

  .wrap{position:relative;z-index:2;}
  .inner{padding-left:calc(var(--gutter) + clamp(1rem,3vw,3rem));padding-right:calc(var(--gutter) + clamp(1rem,3vw,3rem));max-width:90rem;margin:0 auto;}
  @media(max-width:700px){.inner{padding-left:1.25rem;padding-right:1.25rem;}}

  .mono{font-family:var(--mono);font-weight:300;font-size:.72rem;letter-spacing:.08em;text-transform:lowercase;color:var(--muted);}

  /* ---- header: real nav, links as distinct spread buttons, solid audit button ---- */
  header{
    position:fixed;top:0;left:0;right:0;z-index:10;
    display:flex;justify-content:space-between;align-items:center;
    padding:1.05rem calc(var(--gutter) + clamp(1rem,3vw,3rem));
    background:color-mix(in srgb, var(--paper) 82%, transparent);
    -webkit-backdrop-filter:blur(10px);
    backdrop-filter:blur(10px);
  }
  @media(max-width:700px){header{padding:.85rem 1.25rem;}}
  /* Round-57 (navbar pick 8 "fewer things" + the stark-white fix): the bar carries only the
     logo, phone and the two buttons, and a fixed-attachment multiply layer paints the page's
     own tone across the bar so it can never read stark white against the tinted page. */
  header::before{
    content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
    mix-blend-mode:multiply;
    background:var(--tone),
      radial-gradient(58% 46% at 78% 8%, rgba(196,190,180,.13), transparent 72%),
      radial-gradient(50% 42% at 8% 92%, rgba(178,178,170,.11), transparent 70%);
    background-attachment:fixed;
  }
  .wordmark{display:flex;align-items:center;}
  .wordmark img{display:block;height:22px;width:auto;}
  .head-right{display:flex;gap:.55rem;align-items:center;}
  .nav-link{
    display:inline-block;font-size:.88rem;font-weight:400;letter-spacing:.005em;color:var(--ink);
    padding:.52rem 1.05rem;border-radius:999px;border:1px solid transparent;
    transition:border-color .3s ease, background-color .3s ease;
  }
  .nav-link:hover{border-color:var(--line);background:color-mix(in srgb, var(--ink) 4%, transparent);}
  .nav-cta{
    display:inline-block;margin-left:.7rem;
    background:var(--ink);color:var(--paper);
    border-radius:999px;padding:.56rem 1.25rem;
    font-size:.88rem;font-weight:400;letter-spacing:.01em;
    box-shadow:0 10px 22px -14px rgba(20,20,18,.5);
    transition:transform .3s ease, box-shadow .3s ease;
  }
  .nav-cta:hover{transform:translateY(-1px);box-shadow:0 14px 28px -16px rgba(20,20,18,.55);}
  .nav-phone{
    font-family:var(--mono);font-weight:400;font-size:.8rem;letter-spacing:.04em;
    color:var(--ink);padding:.52rem .5rem;white-space:nowrap;
  }
  .nav-ghost{
    background:#fff;color:var(--ink);border:1px solid var(--ink);
    box-shadow:none;margin-left:0;padding:.5rem 1.05rem;font-size:.84rem;
  }
  .nav-ghost:hover{background:color-mix(in srgb, var(--ink) 5%, #fff);transform:none;box-shadow:none;}
  @media(max-width:700px){.nav-link{display:none;}.nav-ghost{display:none;}.nav-cta{margin-left:0;}}
  @media(max-width:430px){
    .nav-phone{font-size:.72rem;padding:.4rem .25rem;}
    .nav-cta{padding:.5rem .95rem;font-size:.8rem;}
  }

  /* ---- hero ---- */
  /* hero-spacing = his round-21 pick (opt 4/hs4): fill the real device height (dvh) so the audit
     button is the last thing on screen and the reviews peek just below the fold. */
  .hero{min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding-top:5.5rem;padding-bottom:clamp(1.6rem,4vh,3rem);position:relative;}
  .hero .eyebrow{margin-bottom:clamp(1.2rem,2.6vh,2rem);display:flex;gap:1.5rem;flex-wrap:wrap;}
  /* Round 50: one thin quiet line instead of the two text lines (his pick, "perfect") */
  .eb-rule{display:block;width:min(9rem,30vw);height:1px;background:var(--ink);opacity:.35;}
  .hero h1{
    font-weight:250;
    font-size:clamp(2.9rem, 9.2vw, 8.4rem);
    line-height:1.01;
    letter-spacing:-.035em;
  }
  /* heading = his round-21 pick (opt 3/dd3): the italic words breathe a touch bigger. */
  .hero h1 .serif{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em;font-size:1.06em;}
  /* H1 line-size variant (toggle .h1-alt on body to compare) */
  .h1-alt .hero h1 .l2{display:inline-block;font-size:.68em;color:var(--ink);}

  /* ---- hero roll: the heading's last words cycle as one sentence ("We handle the marketing.") ----
     No-JS and reduced-motion resolve to the locked line "We handle the rest." */
  .roll{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em;}
  /* baseline-true rolling word (Round 48): ONE in-flow inline-block word, so its baseline is
     the line's baseline by construction; clip-path masks the vertical slide without touching
     layout. Width is only pinned during the swap tween, then released to auto. */
  .js .roll.armed{
    display:inline-block;position:relative;text-align:left;
    clip-path:inset(-0.12em 0 -0.18em 0);
    white-space:nowrap;will-change:width;
  }
  .js .roll.armed .rw{
    display:inline-block;white-space:nowrap;
    will-change:transform,opacity;
  }
  /* the itch question above the audit button */
  .cta-q{
    margin-top:clamp(1.5rem,3vh,2.2rem);
    font-weight:400;font-size:1.18rem;letter-spacing:-.012em;color:var(--ink);
  }
  .cta-q .serif{font-family:var(--serif);font-style:italic;font-weight:400;}
  .hero-foot{
    display:flex;justify-content:space-between;align-items:flex-end;gap:3rem;
    margin-top:clamp(2.4rem,6vh,4rem);
  }
  .hero-sub{max-width:26rem;font-size:1.02rem;color:var(--muted);font-weight:300;line-height:1.65;}
  .hero-sub strong{color:var(--ink);font-weight:400;}
  .hero-cta{
    display:inline-block;margin-top:1.5rem;
    background:var(--ink);color:var(--paper);
    border-radius:999px;padding:1.05rem 2.3rem;
    font-size:1.02rem;font-weight:400;letter-spacing:.01em;
    box-shadow:0 14px 30px -18px rgba(20,20,18,.55);
    transition:transform .35s ease, box-shadow .35s ease;
  }
  .hero-cta:hover{transform:translateY(-2px);box-shadow:0 20px 38px -20px rgba(20,20,18,.6);}
  /* Round 47: Contact sits to the right of the audit button on every CTA, one aligned row */
  .hero-ctas{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:1.5rem;}
  .hero-ctas .hero-cta{margin-top:0;}
  .hero-ghost{
    display:inline-block;background:#fff;color:var(--ink);border:1px solid var(--ink);
    border-radius:999px;padding:1rem 2rem;font-size:1.02rem;font-weight:400;letter-spacing:.01em;
    transition:background-color .3s ease;
  }
  .hero-ghost:hover{background:color-mix(in srgb, var(--ink) 5%, #fff);}
  @media(max-width:430px){
    .hero-ctas{gap:.7rem;}
    .hero-ctas .hero-cta{padding:.95rem 1.5rem;font-size:.94rem;}
    .hero-ghost{padding:.9rem 1.3rem;font-size:.94rem;}
  }
  .cta-note{margin-top:.9rem;max-width:24rem;}
  @media(max-width:700px){
    .hero-foot{flex-direction:column;align-items:flex-start;}
    /* mobile only: hs4 leaves ~40% of a phone screen empty above the heading. Keep the
       round-21 intent (fill the device height, audit button last thing on screen) but
       split the spare height around the headline so it composes instead of sinking. */
    .hero .eyebrow{margin-top:auto;}
    .hero-foot{margin-top:auto;}
  }

  /* ---- section scaffolding ---- */
  section{position:relative;}
  .sec-head{display:flex;align-items:baseline;gap:1.25rem;margin-bottom:clamp(2rem,5vh,3.6rem);}
  .sec-head .rule{flex:1;height:1px;background:var(--line);}

  /* ---- one partner: six specialist roles resolve into one line ---- */
  .handover{padding-top:clamp(5.5rem,11vh,8.5rem);padding-bottom:clamp(5.5rem,11vh,8.5rem);}
  /* ---- google proof strip: RETIRED round 35 part A. The rail under the hero was replaced by
     the real review cards on his instruction; the .gp-* rules below are kept because the
     Newcastle source still carries the badge markup. ---- */
  .gp-rail{display:grid;grid-template-columns:auto 1fr 1fr;gap:clamp(1.4rem,3.5vw,3.5rem);align-items:center;}
  .gp-badge{display:flex;align-items:center;gap:.55rem;white-space:nowrap;}
  .gp-g{flex:none;}
  .gp-score{font-weight:500;font-size:1.05rem;letter-spacing:-.01em;}
  .gp-stars{color:#FBBC04;font-size:.95rem;letter-spacing:.12em;}
  .gp-src{color:var(--faint);}
  .gp-q{margin:0;}
  .gp-q blockquote{font-family:var(--serif);font-style:italic;font-size:1.02rem;line-height:1.4;color:#3a3a36;}
  .gp-q figcaption{margin-top:.45rem;color:var(--faint);}
  @media(max-width:900px){
    .gp-rail{grid-template-columns:1fr;gap:1.2rem;}
    .gp-badge{justify-content:flex-start;}
  }

  /* one partner, centred cinema (Round 37 pick): the juggled roles pile up,
     a clear arrow points down, and the one-partner line lands centre-stage */
  .op{max-width:56rem;margin:0 auto;text-align:center;}
  .op-label{color:var(--ink);font-size:.95rem;letter-spacing:.09em;margin-bottom:1rem;}
  .op-label-after{margin-bottom:1rem;}
  .op-roles{display:flex;flex-wrap:wrap;gap:.7rem .8rem;justify-content:center;max-width:44rem;margin:0 auto;}
  /* clean drawn arrow (Round 45: the hand-drawn ink stroke is dead — "looks weird") */
  .op-arrow{
    display:flex;flex-direction:column;align-items:center;
    margin:clamp(1.6rem,4vh,2.6rem) auto clamp(1.4rem,3.5vh,2.2rem);
  }
  .op-arrow .stem{width:1px;height:clamp(2.4rem,6vh,3.6rem);background:var(--ink);}
  .op-arrow .head{
    width:.55rem;height:.55rem;margin-top:-.5rem;
    border-right:1px solid var(--ink);border-bottom:1px solid var(--ink);
    transform:rotate(45deg);
  }
  /* Round 49: bigger and plainer, a small icon on every role (12-year-old obvious) */
  .op-role{
    font-family:var(--mono);font-size:clamp(.88rem,1.7vw,1.08rem);letter-spacing:.05em;text-transform:lowercase;
    color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:.6rem 1.3rem;background:#fff;
  }
  .op-ico{display:inline-block;width:15px;height:15px;margin-right:.5rem;vertical-align:-2px;}
  .op-ico svg{display:block;width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.5;}
  .op-line{
    font-weight:250;font-size:clamp(2rem,5vw,3.6rem);letter-spacing:-.025em;line-height:1.16;color:var(--ink);
    text-wrap:balance;
  }
  /* Round 49 (his idea): week gets a clean strike, life lands. Static page shows the
     finished state (strike drawn, life visible); JS animates it within the section moment. */
  .op-line .wk{position:relative;white-space:nowrap;}
  .op-line .wkline{position:absolute;left:-3%;right:-3%;top:55%;height:2.5px;background:var(--ink);
    transform:scaleX(1);transform-origin:left center;border-radius:2px;}
  .op-line .lf{display:inline-block;}
  @media(max-width:640px){.op-line .br-m{display:block;height:0;}}
  .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
  .op-line .serif{font-family:var(--serif);font-style:italic;font-weight:400;}

  /* ---- reviews: ONE big quote (Reece Round 42): Otua's review, big text,
     the speech-mark effect. Pinned notes retired same day. ---- */
  .reviews{padding-top:clamp(4.5rem,10vh,7rem);padding-bottom:clamp(4.5rem,10vh,7rem);}
  .bigquote{max-width:54rem;margin:0 auto;text-align:center;}
  .bq-mark{
    display:block;font-family:var(--serif);font-style:italic;
    font-size:clamp(6rem,12vw,10rem);line-height:.5;color:#DCD8CB;
    margin-bottom:1.4rem;user-select:none;
  }
  .bigquote blockquote{
    font-family:var(--serif);font-style:italic;letter-spacing:-.01em;
    font-size:clamp(1.65rem,3.5vw,2.9rem);line-height:1.4;color:var(--ink);text-wrap:balance;
  }
  .bigquote figcaption{margin-top:1.7rem;color:var(--muted);}
  .bq-stars{color:#FBBC04;letter-spacing:.14em;margin-right:.7rem;}

  /* ---- Round-25 pick (ts opt 3): three across as Google review cards, with colour ---- */
  .tsrow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.6rem;align-items:stretch;}
  .tsrow figure{margin:0;background:#fff;border:1px solid var(--line);border-radius:12px;
    padding:1.3rem 1.25rem;display:flex;flex-direction:column;
    box-shadow:0 12px 30px -24px rgba(20,20,18,.5);}
  .tsrow .ts-stars{color:#FBBC04;letter-spacing:.12em;display:block;margin-bottom:.7rem;font-size:.95rem;}
  .tsrow blockquote{margin:0;font-size:1rem;line-height:1.6;font-weight:300;color:var(--ink);flex:1;}
  .tsrow .ts-who{display:flex;align-items:center;gap:.65rem;margin-top:1.1rem;}
  .tsrow .ts-av{flex:none;width:2.15rem;height:2.15rem;border-radius:50%;display:flex;
    align-items:center;justify-content:center;font-size:.88rem;font-weight:500;color:#fff;}
  .tsrow .ts-av.a1{background:#4285F4;} .tsrow .ts-av.a2{background:#34A853;} .tsrow .ts-av.a3{background:#EA4335;}
  .tsrow .ts-nm{font-family:var(--mono);font-size:.7rem;letter-spacing:.05em;color:var(--muted);line-height:1.55;}
  @media(max-width:760px){.tsrow{grid-template-columns:1fr;gap:1.1rem;}}

  /* ---- Round-31: the reviews loop, and his round-30 note "can the scroll be way smoother
     its super choppy right now".
     IT WAS REAL AND IT WAS MEASURED. Paused the page ran 60fps; running it dropped to the low 30s.
     THREE CAUSES, in order of size:
     1. The keyframe travelled a PERCENTAGE (-50%). A percentage transform depends on the element's
        own box, so it cannot be handed to the compositor and gets recomputed on the main thread
        every frame. Travelling an absolute LENGTH instead was worth about 20fps on its own.
     2. No layer promotion, so the track was re-rastered rather than just moved.
     3. mask-image on a very wide box, re-composited every frame. The edge fade is now two painted
        gradient overlays instead, which cost nothing once drawn and look identical on flat paper.
     A HAPPY SIDE EFFECT: the distance is now exact rather than 0.03px short, because it is built
     from the same expression as the card width instead of from a percentage of the doubled track.
     THE MATH: five cards render twice; one full set is 5 cards plus 5 gaps. Change the card width
     or the gap and you MUST change both places, or the loop jumps every cycle. ---- */
  .rvmq{overflow:hidden;position:relative;}
  .rvmq::before,.rvmq::after{content:"";position:absolute;top:0;bottom:0;width:5%;z-index:2;
    pointer-events:none;}
  .rvmq::before{left:0;background:linear-gradient(90deg,var(--paper),rgba(250,250,247,0));}
  .rvmq::after{right:0;background:linear-gradient(270deg,var(--paper),rgba(250,250,247,0));}
  .rvmq-track{display:flex;gap:1.6rem;width:max-content;animation:rvroll 50s linear infinite;
    will-change:transform;backface-visibility:hidden;}
  .rvmq:hover .rvmq-track,.rvmq:focus-within .rvmq-track{animation-play-state:paused;}
  .rvmq figure{flex:0 0 min(21rem,78vw);}
  @keyframes rvroll{
    from{transform:translate3d(0,0,0);}
    to{transform:translate3d(calc(-5 * (min(21rem,78vw) + 1.6rem)),0,0);}
  }
  /* reduced motion resolves to a complete static section: the duplicate set is dropped and the
     five real cards wrap and centre. */
  @media(prefers-reduced-motion:reduce){
    .rvmq::before,.rvmq::after{display:none;}
    .rvmq-track{animation:none;width:auto;flex-wrap:wrap;justify-content:center;will-change:auto;}
    .rvmq-track .rvdup{display:none;}
    .rvmq figure{flex:0 1 calc(33.333% - 1.07rem);min-width:16rem;}
    @media(max-width:760px){.rvmq figure{flex:1 1 100%;min-width:0;}}
  }

  /* ---- Round-31 pick (his round-30 rc opt 2): the review card carries a real Google mark, a
     quieter border and more room. His words: "this one is the best for me". ---- */
  .rvmq-track figure{border-color:#EFEDE6;padding:1.7rem 1.6rem;border-radius:14px;
    box-shadow:0 14px 34px -26px rgba(20,20,18,.45);}
  .rvmq-track .gmark{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem;}
  .rvmq-track .gmark svg{width:1.15rem;height:1.15rem;display:block;flex:none;}
  .rvmq-track .ts-stars{margin:0;font-size:.9rem;}
  .rvmq-track blockquote{font-size:1.02rem;line-height:1.68;}
  .rvmq-track .ts-who{margin-top:1.35rem;}
  /* the colour discs must be beaten on specificity, not with !important: .tsrow .ts-av.a1 carries
     three classes, so the override has to carry three too. */
  .rvmq-track .ts-av.a1,.rvmq-track .ts-av.a2,.rvmq-track .ts-av.a3{
    background:#F1EFE8;color:var(--ink);font-weight:500;box-shadow:inset 0 0 0 1px #E2DFD4;}
  .rvmq-track .ts-nm{font-family:var(--sans);font-size:.86rem;letter-spacing:0;font-weight:500;
    color:var(--ink);}
  .rvmq-track .ts-nm .lbl{display:block;font-weight:300;font-size:.76rem;color:var(--muted);
    margin-top:.1rem;}

  /* ---- Round-31 pick (his round-30 cta opt 2): one button after the twelve chapters. Until now
     there was one at the very top and one at the very bottom and nothing in between. ---- */
  .midcta{text-align:center;padding:clamp(1.2rem,3vh,2rem) 0 clamp(2.6rem,6vh,4rem);}
  .midcta .midcta-line{font-size:clamp(1.15rem,2.2vw,1.5rem);font-weight:250;letter-spacing:-.02em;
    color:var(--ink);margin-bottom:1.1rem;}
  .midcta .begin-btn{margin-top:0;padding:.95rem 2.1rem;font-size:1rem;}

  /* ---- terms/expect title ---- */
  .terms-title{
    font-weight:250;font-size:clamp(1.9rem,4.2vw,3.4rem);
    letter-spacing:-.03em;line-height:1.08;max-width:44rem;
    margin-bottom:clamp(2.2rem,5vh,3.6rem);
  }
  .terms-title .serif{font-family:var(--serif);font-style:italic;font-weight:400;}

  /* ---- faq ---- */
  .faq{padding-top:clamp(4.5rem,10vh,7.5rem);padding-bottom:clamp(4.5rem,10vh,7.5rem);}
  .faq-list{max-width:52rem;}
  .faq-item{border-top:1px solid var(--line);}
  .faq-item:last-child{border-bottom:1px solid var(--line);}
  .faq-item summary{
    list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:baseline;gap:2rem;
    padding:clamp(1.1rem,2.4vh,1.5rem) 0;
    font-weight:400;font-size:1.08rem;letter-spacing:-.01em;
  }
  .faq-item summary::-webkit-details-marker{display:none;}
  .faq-item summary::after{content:"+";font-family:var(--mono);font-weight:300;color:var(--faint);
    font-size:1.1rem;transition:transform .3s ease;flex-shrink:0;}
  .faq-item[open] summary::after{transform:rotate(45deg);}
  .faq-item p{color:var(--muted);font-size:.98rem;line-height:1.65;max-width:42rem;
    padding:0 0 clamp(1.2rem,2.6vh,1.6rem);}
  /* two columns of questions, side by side (Reece's Round 39 pick, section 04 option 2) */
  .s04-twocol{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(2.5rem,6vw,5rem);align-items:start;}
  .s04-twocol .faq-list{max-width:none;}
  @media(max-width:800px){.s04-twocol{grid-template-columns:1fr;}}

  /* ---- who it's for / who it's not for (Round-21: his qualifier, replaced the FAQ) ---- */
  .qual{padding-top:clamp(4.5rem,10vh,7rem);padding-bottom:clamp(4.5rem,10vh,7rem);}
  .qual-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);max-width:64rem;}
  @media(max-width:760px){.qual-grid{grid-template-columns:1fr;gap:2.2rem;}}
  .qual-col h3{font-weight:400;font-size:1.14rem;letter-spacing:-.01em;margin-bottom:1.3rem;color:var(--ink);}
  .qual-col.no h3{color:var(--muted);}
  .qual-col ul{list-style:none;display:flex;flex-direction:column;gap:.95rem;}
  .qual-col li{display:flex;gap:.7rem;font-size:1.02rem;line-height:1.5;color:var(--ink);}
  .qual-col.no li{color:var(--muted);}
  .qual-col li::before{content:"";flex:none;width:1.15rem;height:1.15rem;margin-top:.18rem;border-radius:50%;border:1px solid var(--line);
    background:no-repeat center/68% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23141412' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");}
  .qual-col.no li::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 5l6 6M11 5l-6 6' fill='none' stroke='%238A8A84' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");}

  /* ---- the eight (visual showcase) — framed folio (Reece's Round 40 pick, option Q):
     the spread inside fine hairline frames, folio marks carry the number + a plain
     say-what-it-is label (his obviousness rule). Air: generous padding + gaps
     (Round 40: "the homeowner stuff is too close together"). Images frameless, as always. ---- */
  .six{padding-top:clamp(4.5rem,9vh,7rem);padding-bottom:clamp(4rem,8vh,6rem);}
  .s02-folio{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.4rem,5vw,4.2rem) clamp(2.4rem,5.5vw,4.8rem);}
  .s02-folio .fg{
    border:1px solid var(--line);border-radius:16px;
    padding:clamp(1.5rem,3.2vw,2.5rem);
    display:flex;flex-direction:column;gap:1.05rem;background:transparent;
  }
  .s02-folio .fg:nth-of-type(even){transform:translateY(clamp(1.4rem,4vh,2.8rem));}
  .s02-folio .folio{
    display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
    border-bottom:1px solid var(--line);padding-bottom:.85rem;
  }
  .s02-folio .fnum{font-family:var(--serif);font-style:italic;font-size:1.4rem;color:#c9c5b8;line-height:1;}
  .s02-folio .flabel{font-weight:500;font-size:.8rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink);text-align:right;}
  .s02-folio .mg-title{font-weight:250;font-size:clamp(1.35rem,2.6vw,2.05rem);letter-spacing:-.02em;line-height:1.18;color:var(--ink);}
  .s02-folio .mg-title .serif{font-family:var(--serif);font-style:italic;font-weight:400;}
  .s02-folio .mg-line{color:var(--muted);font-size:clamp(.92rem,1.35vw,1.05rem);line-height:1.6;max-width:26rem;}
  .s02-folio img{display:block;width:auto;height:auto;max-width:100%;max-height:21rem;object-fit:contain;margin-top:.6rem;align-self:center;}
  @media(max-width:800px){
    .s02-folio{grid-template-columns:1fr;gap:1.8rem;}
    .s02-folio .fg:nth-of-type(even){transform:none;}
  }

  /* ---- terms ---- */
  .terms{padding-top:clamp(4.5rem,10vh,7.5rem);padding-bottom:clamp(4.5rem,10vh,7.5rem);}
  .terms-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(2rem,4vw,4rem);}
  @media(max-width:800px){.terms-grid{grid-template-columns:1fr;gap:2.4rem;}}
  .term .n{display:block;margin-bottom:1.4rem;}
  .term h3{font-weight:400;font-size:1.15rem;letter-spacing:-.01em;margin-bottom:.7rem;}
  .term p{color:var(--muted);font-size:.95rem;max-width:20rem;}

  /* ---- final cta ---- */
  .begin{padding-top:clamp(5.5rem,12vh,9rem);padding-bottom:clamp(5rem,10vh,7.5rem);text-align:center;}
  .begin .lede{margin-bottom:clamp(1.8rem,4vh,2.6rem);}
  /* Round 39: the close reads as ONE line at a calmer size (was clamp(2.7,8.5vw,7.4) and wrapped) */
  .begin h2{
    font-weight:250;font-size:clamp(1.9rem,4.6vw,4.6rem);letter-spacing:-.034em;line-height:1.05;
    white-space:nowrap;
  }
  @media(max-width:700px){.begin h2{white-space:normal;text-wrap:balance;}}
  .begin h2 .serif{font-family:var(--serif);font-style:italic;font-weight:400;}

  /* ---- the close line: his locked question + the cycling word (round-24 pick za opt 3:
     type-and-erase, slower, with a soft cursor blinking between words).
     ROUND-25 FIX (his defect C1): the slot is held at the width of the longest word so the rest
     of the sentence never slides, but the SHORTER words are now centred inside that slot instead
     of sitting hard left. His words: "it'd be good if it could be like centered in the sentence
     instead without looking unnatural and weird." The way it stays natural: the resting position
     is centred, but each word still TYPES from its own fixed left origin, so only one edge ever
     moves while the letters appear. Both edges moving is what reads as weird. ---- */
  .begin h2.zclose{white-space:normal;text-wrap:balance;}
  .zcyc{position:relative;display:inline-block;white-space:nowrap;vertical-align:baseline;
    text-align:left;min-width:var(--zwmax,auto);}
  .zcyc .zw{display:inline-block;margin-left:var(--zoff,0px);
    font-family:var(--serif);font-style:italic;font-weight:400;color:var(--ink);}
  .zcyc .zpad{position:absolute;left:0;top:0;visibility:hidden;pointer-events:none;
    white-space:nowrap;font-family:var(--serif);font-style:italic;font-weight:400;}
  .zcyc .zcar{display:inline-block;width:.06em;min-width:1px;height:.86em;background:currentColor;
    vertical-align:-.06em;margin-left:.03em;opacity:0;border-radius:1px;}
  /* his round-25 note: "keep this all as one line, no breaks/new line", so the box is wide enough
     to hold the whole sentence on one row on a desktop. On a phone it still has to wrap, since no
     screen that narrow can hold it, but it never breaks mid-sentence into a stacked block. */
  .begin .zsub{display:block;margin:1.15rem auto 0;font-size:1rem;color:var(--muted);
    font-weight:300;max-width:52rem;line-height:1.55;text-wrap:pretty;}
  @media(max-width:700px){.begin .zsub{max-width:34rem;}}
  /* no-JS and reduced-motion resolve to the finished sentence, never a half-typed word */
  .reduced .zcyc .zw,html:not(.js) .zcyc .zw{opacity:1!important;}
  .begin-btn{
    display:inline-block;margin-top:clamp(2.2rem,5vh,3.4rem);
    background:var(--ink);color:var(--paper);
    border-radius:999px;padding:1.2rem 2.7rem;
    font-size:1.08rem;font-weight:400;letter-spacing:.01em;
    box-shadow:0 18px 36px -20px rgba(20,20,18,.55);
    transition:transform .35s ease, box-shadow .35s ease;
  }
  .begin-btn:hover{transform:translateY(-2px);box-shadow:0 24px 44px -22px rgba(20,20,18,.6);}
  .begin-ctas{display:flex;justify-content:center;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:clamp(2.2rem,5vh,3.4rem);}
  .begin-ctas .begin-btn{margin-top:0;}
  .begin-ghost{
    display:inline-block;background:#fff;color:var(--ink);border:1px solid var(--ink);
    border-radius:999px;padding:.85rem 1.7rem;font-size:.95rem;font-weight:400;letter-spacing:.01em;
    transition:background-color .3s ease;
  }
  .begin-ghost:hover{background:color-mix(in srgb, var(--ink) 5%, #fff);}
  @media(max-width:430px){
    .begin-ctas{gap:.7rem;}
    .begin-ctas .begin-btn{padding:.95rem 1.5rem;font-size:.94rem;}
    .begin-ghost{padding:.9rem 1.3rem;font-size:.94rem;}
  }
  .begin .fine{margin-top:1.5rem;max-width:34rem;margin-left:auto;margin-right:auto;}
  .begin .addr{margin-top:.9rem;}
  .begin .addr a{border-bottom:1px solid var(--line);padding-bottom:2px;transition:border-color .4s;color:var(--ink);}
  .begin .addr a:hover{border-color:var(--ink);}

  /* ---- footer ---- */
  footer{border-top:1px solid var(--line);padding-top:2rem;padding-bottom:2.4rem;}
  .foot-row{display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap;align-items:center;}
  .foot-brand{display:flex;align-items:center;gap:.7rem;}
  .foot-brand img{display:block;height:14px;width:auto;opacity:.85;}

  /* Round-57 pick (his round-17 board, authority option 4 "the ledger"): precise hairlines
     and numbering — ink monos, ink rules, ink folio numerals, a hairline opening every
     section, a thin rule down each chapter card. Placed last so it wins the cascade,
     exactly as the board's option layer did. */
  .nav-link{display:none;}
  .mono{color:var(--ink);}
  .sec-head .rule{background:var(--ink);opacity:.25;}
  .s02-folio .fnum{color:var(--ink);opacity:.9;}
  .wrap>section{border-top:1px solid rgba(20,20,18,.1);}
  .wrap>section:first-child{border-top:none;}
  .s02-folio .fg{border-left:1px solid rgba(20,20,18,.12);padding-left:1.2rem;}
  @media(max-width:700px){.s02-folio .fg{border-left:none;padding-left:0;}}

  /* Round-58 picks (his round-17b paste-back, shipped as seen on the board):
     n6 phone steps up · u3 ledger + black ink headings · d6 promise line leads ·
     e4 growth partner under the logo · f3 ink rule down the paragraph ·
     g6 roles in solid ink chips · h3 ink underline slab on chapter titles ·
     i4 buttons step up. Order matters: u3 before d6, exactly as the board layered them. */
  .nav-phone{font-size:.95rem;color:#000;font-weight:500;letter-spacing:.06em;}
  .hero h1{color:#000;}
  .s02-folio .mg-title{color:#000;font-weight:450;}
  .sec-head .mono{color:#000;font-weight:500;}
  .op-line{color:#000;}
  .hero h1{color:var(--muted);font-weight:300;}
  .hero h1 .l2{color:#000;font-weight:450;}
  .wm-tag{display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;color:var(--muted);text-transform:lowercase;}
  .wordmark{flex-direction:column;align-items:flex-start;gap:2px;}
  .hero-sub{border-left:2px solid var(--ink);padding-left:1.2rem;}
  .op-role{background:var(--ink);color:#F4F2EC;border-color:var(--ink);}
  .op-line{font-weight:450;}
  /* Round-24 ship: the ink bar under chapter titles is removed (his round-23 pick, em opt 5:
     strip both the italic word and the bar). Kept the rule slot so the cascade order is unchanged. */
  .hero-cta{padding:1.15rem 2.6rem;font-size:1.08rem;}
  .hero-ghost{padding:1.1rem 2.2rem;font-size:1.05rem;}
  .nav-cta{padding:.62rem 1.45rem;font-size:.95rem;}
  .nav-ghost{padding:.58rem 1.25rem;font-size:.92rem;}
  .begin-ghost{padding:1.1rem 2.2rem;font-size:1.05rem;}

  /* Round-60 picks (his round-18 paste-back, shipped as seen on the board):
     section-01 second line -> "with spareday, you don't have to be" (edited inline above);
     g3 = the warm charcoal band behind section 01 with light chips (his softer-take pick,
     not a page base: a single section moment he chose across rounds 16/17b/18);
     i8 = the small labels step up in full ink. Cascade-last so they win, like the board layer.
     Held to round 19 (not shipped): heading, logo, brand paragraph, chapter titles, 09/10
     copy + pictures, the close line, hero spacing — all "more options" per his notes. */
  .handover{background:#2A2925;}
  .handover .sec-head .mono{color:#C4BFB2;}
  .handover .sec-head .rule{background:#45433C;opacity:1;}
  .handover .op-label{color:#F1EFE8;}
  .handover .op-role{background:#F6F4EE;border-color:#F6F4EE;color:#2A2925;}
  .handover .op-arrow .stem{background:#F1EFE8;}
  .handover .op-arrow .head{border-color:#F1EFE8;}
  .handover .op-line{color:#F6F4EE;}
  .handover .op-line .wkline{background:#F1EFE8;}
  .s02-folio .flabel{font-size:.92rem;color:#000;}
  .sec-head .mono{font-size:.85rem;}

  /* Round-62 ship (his round-19 definitive picks): heading = uniform ink, both lines equal (d11,
     "I like this the best"); logo = refined masthead, tiny tag off a hairline (e4, "happy to roll
     with this"). Cascade-last + specificity that beats the .h1-alt and round-58 rules. */
  .h1-alt .hero h1 .l1{display:inline-block;}
  .h1-alt .hero h1 .l1,.h1-alt .hero h1 .l2{font-size:.72em;color:#141412;font-weight:350;}
  .hero h1{line-height:1.04;}
  /* Round-21 ship: logo = his pick (opt 5/ee5) on the masthead base -> crisper wordmark image
     + a wider-spaced, softer tag (keeps the baked wordmark font; he did NOT take the typeset fix). */
  .wordmark{flex-direction:row;align-items:center;gap:.6rem;}
  .wm-tag{border-left:1px solid rgba(20,20,18,.3);padding-left:.6rem;font-size:.56rem;letter-spacing:.22em;color:var(--muted);}
  .wordmark img{height:22px;opacity:.92;filter:contrast(1.05);}

  /* ===== Round-22 mobile optimisation: an uncramped header + calmer rhythm on phones ===== */
  section[id]{scroll-margin-top:4.5rem;}
  @media(max-width:600px){
    /* header: drop the "growth partner" tag+divider, keep logo + phone + one compact button, no wrap */
    header{padding:.8rem 1.1rem;}
    .wm-tag{display:none;}
    .wordmark img{height:20px;}
    .head-right{gap:.45rem;align-items:center;}
    .nav-phone{font-size:.76rem;padding:.4rem .3rem;letter-spacing:.02em;white-space:nowrap;}
    .nav-cta{white-space:nowrap;padding:.52rem 1rem;font-size:.8rem;margin-left:0;line-height:1;}
    /* section rhythm: tighter gaps, images never oversized on a phone */
    .s02-folio{gap:2.2rem;}
    .s02-folio img{max-height:16.5rem;}
    .s02-folio .fg{padding-left:1rem;}
    /* the one-partner + qualifier read better with a touch less side padding eaten by the border */
    .qual-grid{gap:1.9rem;}
  }
  @media(max-width:390px){
    /* ROUND 38: the "drop the number below 390px" rule that used to live here is GONE. It was the
       reason a ready customer on a phone could not tap to call, which is his round-37 pick #4.
       The narrowest phones are handled in the Round-38 block at the bottom of this stylesheet,
       where the number becomes a handset mark instead of disappearing. */
    .nav-cta{font-size:.82rem;padding:.55rem 1.05rem;}
  }

  @media (prefers-reduced-motion: reduce){
    *{animation:none!important;transition:none!important;}
  }
  /* ---- Round-35 part A: the reviews now open the page, directly under the hero, where the
     .gproof rail used to be. His words: "make it all clean and smooth transition from her ot
     the reviews".
     THIS IS THE JOIN, NOT A REDESIGN. The cards and the loop are untouched approved decisions.
     What changes is only the spacing either side: at full .reviews section padding the strip
     read as a second block bolted under the hero, so it opens tight under .hero-foot and closes
     tighter into 02, and its head sits closer to the cards. ---- */
  .reviews.rvfirst{padding-top:clamp(1.9rem,4.2vh,3rem);padding-bottom:clamp(3rem,7vh,4.6rem);}
  .reviews.rvfirst .sec-head{margin-bottom:clamp(1.3rem,2.8vh,2rem);}
  .reviews.rvfirst + .handover{padding-top:clamp(4rem,8.5vh,6.5rem);}
  /* THE JOIN ITSELF. Every .wrap>section carries a hard full-width hairline on top (the round-58
     rule), and directly under a 100svh hero that hairline is exactly the "two stacked blocks"
     edge he asked to lose. The rule is not deleted, it is FADED: same weight, same colour, same
     page grammar, but it dissolves at both ends so the hero reads as flowing into the proof
     instead of stopping at a line. Nothing else about the section changes. */
  .reviews.rvfirst{border-top:none;}
  .reviews.rvfirst::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
    pointer-events:none;
    background:linear-gradient(90deg,rgba(20,20,18,0),rgba(20,20,18,.1) 26%,
      rgba(20,20,18,.1) 74%,rgba(20,20,18,0));}
  /* ---- Round 35, his four page picks. ---- */
  /* join = his opt 2, NO LINE AT ALL between the hero and the reviews. The round-58 hairline is
     suppressed on this one section and nothing replaces it, so the hero simply becomes the proof. */
  .reviews.rvfirst{border-top:none;}
  .reviews.rvfirst::before{display:none;}

  /* the Google line, UNDER the cards (his gp opt 2 -> shipped as opt 3, under). Centred and quiet:
     it signs the cards off on the way out rather than competing with them. */
  .gline{display:flex;align-items:center;justify-content:center;gap:.55rem;flex-wrap:wrap;
    margin-top:clamp(1.4rem,3vh,2rem);}
  .gline-g{flex:none;display:block;}
  .gline-stars{color:#FBBC04;font-size:.95rem;letter-spacing:.12em;}
  .gline-src{font-size:.62rem;letter-spacing:.13em;text-transform:uppercase;color:var(--faint);}

  /* the quiet text link between 01 and 02 (his cta2 opt 2). Deliberately NOT a button. */
  .tcta{padding-top:clamp(2.4rem,5.5vh,3.6rem);padding-bottom:clamp(2.4rem,5.5vh,3.6rem);
    display:flex;flex-direction:column;align-items:center;gap:.9rem;text-align:center;}
  .tcta-line{font-size:clamp(1.05rem,1.9vw,1.28rem);color:var(--ink);font-weight:300;margin:0;}
  .tcta-link{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
    color:var(--ink);border-bottom:1px solid var(--line);padding-bottom:.22rem;
    transition:border-color .25s ease;}
  .tcta-link:hover{border-bottom-color:var(--ink);}

  /* the close form (his form opt 2), replacing the two buttons. No placeholders anywhere. */
  .begin-form{max-width:26rem;margin:clamp(1.9rem,4.5vh,2.8rem) auto 0;display:grid;gap:.75rem;
    text-align:left;}
  /* the honeypot is hidden with display:none, exactly as /start/ does it. An off-screen
     left:-9999px version worked but sat outside the viewport, which trips every overflow
     check forever and buries a real regression in a false positive. */
  .begin-form .bf-hp{display:none;}
  .begin-form .bf-field label{font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;
    text-transform:uppercase;color:var(--faint);display:block;margin-bottom:.3rem;}
  /* ROUND 38, HIS CORRECTION 3, AND THE REASON IT MATTERS. This form is styled BY INPUT TYPE.
     The round-37 board added an email box and it rendered visibly the wrong size, because
     type=email was not in this list and fell through to the browser's own field styling. He spotted
     it. The fix is to ADD email to the selector, never to downgrade the box to type=text: type=email
     is what makes a phone show the keyboard with the @ key on it. Any future field type must be
     added here too. */
  .begin-form input[type=text],.begin-form input[type=tel],
  .begin-form input[type=email]{width:100%;border:1px solid var(--line);
    /* .82rem vertical, not .75rem: at .75rem the field measured 43px tall on a phone, just under
       the 44px minimum tap target, and this form is now the main way anyone enquires. */
    border-radius:10px;padding:.82rem .85rem;font-family:var(--sans);font-size:1rem;
    color:var(--ink);background:#fff;transition:border-color .2s ease;}
  .begin-form input[type=text]:focus,.begin-form input[type=tel]:focus,
  .begin-form input[type=email]:focus{outline:none;
    border-color:var(--ink);}
  .begin-form .bf-btn{width:100%;background:var(--ink);color:#f4f2ec;border:none;border-radius:999px;
    padding:1rem 1.5rem;font-family:var(--sans);font-size:1rem;cursor:pointer;margin-top:.35rem;
    box-shadow:0 16px 34px -22px rgba(20,20,18,.6);transition:transform .25s ease;}
  .begin-form .bf-btn:hover{transform:translateY(-2px);}
  .begin-form .bf-note{font-size:.62rem;letter-spacing:.08em;color:var(--faint);text-align:center;
    margin:.1rem 0 0;}

  /* ==========================================================================
     ROUND 38. Cascade-last, exactly like every board layer before it, so these
     win without !important and without touching the rules they override.
     PART ONE = his round-37 picks. PART TWO = the mobile pass he asked for.
     ========================================================================== */

  /* --- #13 (sm option 3, the STRONGER one he chose): the nearly invisible small text gets
     darker AND bigger. Measured before this: about a fifth of the contrast an ordinary reader
     needs, at under 10px. These three are the ones his board hint named: the form labels, the
     "from google reviews" line, and the reassurance line under the button, which is the exact
     piece of text that lifts form completions and was the least readable thing on the page.
     #5A5A54 on the paper is a real contrast pass, not a nudge. --- */
  .begin-form .bf-note,
  .begin-form .bf-field label,
  .gline .gline-src{color:#5A5A54;font-size:.72rem;letter-spacing:.09em;}

  /* --- #14 (bd option 3, again the stronger one): the body copy goes TWO shades darker.
     Only the genuinely muted body copy moves. The who-it's-for YES column is already full ink
     and must not be lightened to meet this, so only the NOT-for column is listed. Headings,
     labels and mono text are untouched: this is about paragraphs a person has to read.
     .loc-copy p and the Newcastle areas copy are handled in tools/build_newcastle.py, because
     that stylesheet is injected AFTER this block on that page and would otherwise win. --- */
  /* .s02-folio .mg-line, not a bare .mg-line: the chapter line is set with two classes further up,
     so a one-class rule loses the cascade and the twelve chapter paragraphs silently stay light.
     Measured after the first attempt at exactly that mistake. */
  .hero-sub,.zsub,.s02-folio .mg-line,.qual-col.no li,.faq-item p{color:#57574F;}

  /* --- the footer address block (#6). Sized and coloured to clear the same readability bar as
     #13 from the outset, so shipping a local ranking signal does not quietly add a new patch of
     unreadable grey text to the page. --- */
  .foot-nap{font-family:var(--mono);font-weight:300;font-size:.72rem;letter-spacing:.05em;
    line-height:1.95;color:#5A5A54;padding-top:1.4rem;margin-top:1.2rem;
    border-top:1px solid var(--line);}
  .foot-nap a{color:#5A5A54;border-bottom:1px solid var(--line);padding-bottom:1px;
    transition:border-color .3s ease;}
  .foot-nap a:hover{border-bottom-color:var(--ink);}
  .foot-nap .lbl{color:#8A8A84;text-transform:lowercase;}
  /* the address is one line and phone/email share the second, which is how a footer normally reads.
     On a phone that second line wraps mid-pair and leaves a dangling "email ·", so below 560px each
     part gets its own line instead. Measured at 390: the wrap was real, not theoretical. */
  .foot-nap .nap-line{display:inline;}
  .foot-nap .nap-line:first-child::after{content:"";display:block;}
  .foot-nap .nap-line + .nap-line + .nap-line::before{content:"·";color:var(--faint);padding:0 .5rem;}
  @media(max-width:560px){
    .foot-nap .nap-line{display:block;}
    .foot-nap .nap-line + .nap-line + .nap-line::before{content:none;}
  }

  /* ==========================================================================
     PART TWO: THE MOBILE PASS. His words: "fully optimise both pages for mobile so that the
     pages look largely the same across both platforms." So this is not a shrink-to-fit pass,
     it is a PARITY pass: the things that make the design what it is were being switched off on
     phones, and they come back.
     ========================================================================== */

  /* PARITY 1: the two faint plumb lines. They are the architectural signature of the whole page
     and they were switched off entirely below 700px, so a phone got a plain page. They come back
     inset tighter than the desktop gutter, so they frame the content instead of landing on top of
     the text edge. */
  @media(max-width:700px){
    .frame{display:block;}
    .frame::before{left:.55rem;}
    .frame::after{right:.55rem;}
  }

  /* PARITY 2: the hairline down the left of every chapter card. Below 700px the card lost its
     left border completely, so the twelve chapters read as open-sided blocks on a phone and as
     closed ledger cards on a computer. Same card, both platforms. */
  @media(max-width:700px){
    .s02-folio .fg{border-left:1px solid rgba(20,20,18,.12);padding-left:1rem;}
  }

  /* PARITY 3: a readable floor for the small mono text on a phone. Measured at 390px, text was
     landing at 8.96px and 9.92px in places, which is below anything a person reads comfortably
     at arm's length outdoors. Nothing here changes the desktop. */
  @media(max-width:700px){
    .mono{font-size:.76rem;}
    .rvmq-track .ts-nm .lbl{font-size:.8rem;color:#6E6E68;}
  }

  /* --- #15 (tap option 2): more room around the taps. Nothing gets bigger to LOOK at, there is
     just more of it to hit. Apple and Google both publish 44px as the minimum. Measured before
     this: the top-bar button 31px, the quiet 01-to-02 link 23px, the footer links 15 to 18px.
     The quiet link stays a text link, which is a locked call and is not being reopened here. --- */
  @media(max-width:760px){
    .nav-cta{padding-top:1.02rem;padding-bottom:1.02rem;}
    .tcta-link{display:inline-block;padding-top:1.05rem;padding-bottom:1.05rem;}
    /* .begin .addr a is written with two classes in the block above, so matching it needs two
       classes here as well. A one-class .addr a rule loses on specificity and the link stays 31px,
       which is exactly the kind of near-miss this pick exists to remove. */
    .foot-row a,.foot-nap a,.begin .addr a{display:inline-block;
      padding-top:.8rem;padding-bottom:.8rem;}
    /* the underline on these two is a border on the BOX, so once the box grows to 44px the line
       detaches and floats well under the words, reading as a stray rule. Swap it for a real text
       underline, which stays attached to the letters however tall the tap area gets. */
    .foot-nap a,.begin .addr a{border-bottom:none;padding-bottom:.8rem;
      text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px;}
    .foot-row{gap:.6rem 2rem;}
    .faq-item summary{padding-top:1.15rem;padding-bottom:1.15rem;}
    /* the logo is a real link back to the top and was a 20px-tall target. Given a 44px box
       without changing how big the wordmark looks, and it fits inside the bar's existing height. */
    .wordmark{min-height:44px;}
  }

  /* --- #4 (tel option 2): the phone number comes back into the top bar on a phone. It was
     display:none below 390px and this is the single easiest thing a ready customer can do on the
     device most of them are holding. Tap it and it rings.
     THE NARROW-PHONE PROBLEM THIS SOLVES AT THE SAME TIME: logo + number + a full-width button
     will not fit across a 360px bar without something wrapping or spilling. So on the narrowest
     phones the button keeps its words and the NUMBER becomes a tap-to-call handset mark, which
     costs nothing to understand and never overflows. --- */
  @media(max-width:760px){
    .nav-phone{display:inline-flex;align-items:center;justify-content:center;
      font-size:.78rem;padding:.55rem .45rem;letter-spacing:.03em;
      min-height:44px;box-sizing:border-box;}
  }
  .nav-phone .tel-ico{display:none;width:16px;height:16px;vertical-align:-3px;}
  .nav-phone .tel-ico svg{display:block;width:100%;height:100%;
    stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
  @media(max-width:412px){
    .nav-phone .tel-num{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
      overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
    .nav-phone .tel-ico{display:inline-block;}
    .nav-phone{padding:.5rem;min-width:44px;}
    .nav-cta{font-size:.82rem;padding-left:1rem;padding-right:1rem;}
  }

  /* ==========================================================================
     ROUND 39. His round-38 picks, then the mobile proportions.
     ========================================================================== */

  /* --- his pick 12: the call bar across the bottom, phone only. --- */
  .callbar{display:none;}
  @media(max-width:760px){
    .callbar{display:flex;align-items:center;justify-content:center;gap:.55rem;
      position:fixed;left:0;right:0;bottom:0;z-index:40;
      background:var(--ink);color:#f4f2ec;padding:1.05rem 1rem;
      font-family:var(--mono);font-weight:400;font-size:.84rem;letter-spacing:.06em;
      box-shadow:0 -10px 30px -18px rgba(20,20,18,.5);}
    .callbar svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.6;
      stroke-linecap:round;stroke-linejoin:round;flex:none;}
    /* it is fixed over the page, so the page has to end above it or it covers the footer
       and the last thing anyone reads is hidden behind a bar. */
    footer{padding-bottom:4.6rem;}
  }

  /* ==========================================================================
     THE MOBILE PROPORTIONS. His words: "the mobile still doesnt look good the
     proportions are wrong."

     HE IS RIGHT, AND IT MEASURES. Against the body copy, on a computer the page has
     a real hierarchy: the headline is 5.1x body, the one-partner line 3.4x, the close
     3.5x. On a phone all three collapse to about 2.1x, which is barely louder than a
     paragraph. So the three moments that carry the page stop being moments. Nothing
     else on either page drifted more than a quarter, so this is the whole fault.

     THE SECOND HALF IS THE COMPOSITION. On a computer the hero is one block sitting
     at the bottom with the empty space above it: gap above 240px, gap between the
     headline and the paragraph 54px. On a phone the spare height was being split in
     TWO, so the gap under the headline was 144px against a headline only 97px tall.
     The page's own headline was smaller than the hole beneath it. All the spare space
     now sits above, exactly like the computer.
     ========================================================================== */
  /* the line break before the rolling word exists only on a phone; on a computer the
     headline is two lines and must stay two lines. Declared BEFORE the media query so the
     phone rule wins, not after it, where it would silently cancel it. */
  .h1br{display:none;}
  @media(max-width:700px){
    /* one void above, tight join below, same shape as the desktop hero */
    .hero-foot{margin-top:clamp(1.5rem,3.2vh,2.2rem);}

    /* the headline steps up from 2.05x the paragraph to 2.69x. It cannot reach the
       computer's 5.1x, because at that size a phone would need six lines, but this is
       the largest step that keeps all twelve rotating words on screen with the buttons.
       Measured across every word, not estimated. */
    .hero h1{font-size:3.8rem;}

    /* AND THE ROLLING WORD GETS ITS OWN LINE, which is what makes the bigger size safe.
       Without this the headline is a different height depending on which word is showing
       (measured: 164px on "the AI", 201px on "the follow-ups"), so the whole hero would
       jump every few seconds. On its own line every word occupies exactly one line and
       the height never changes. */
    .h1br{display:block;height:0;}

    /* AND THE FIRST LINE GETS BALANCED. At the new size "You do what you love." no longer fits
       one line on a phone, and left alone the browser wrapped it as "You do what you" over a
       lonely "love." Balancing splits it evenly instead, so the headline reads as four composed
       lines rather than three and an orphan. */
    .hero h1 .l1{text-wrap:balance;}

    /* AND THE LINE SPACING HAD TO BE EVENED OUT, which only showed up once the headline wrapped
       to four lines. The gap above "you love." was visibly bigger than the gap above "the SEO."
       Measured: 63px against 49px. The cause is that the headline's own font-size is 3.8rem but
       every visible word sits inside a wrapper at .72 of that, so a line-height of 1.04 builds a
       63px line box around 44px text on the first half of the headline, while the second half,
       which breaks differently, builds a 46px box around the same 44px text.
       IT HAS TO BE AN ABSOLUTE LENGTH, not a factor. A factor is inherited and re-multiplied by
       each element's own font-size, so any factor makes one half right and the other half wrong:
       .75 fixed the top two lines and squashed the bottom two to 33px. A fixed 2.9rem is handed
       down as the same 46.4px to every line, whatever size the wrapper around it claims to be. */
    .hero h1{line-height:2.9rem;}

    /* the other two big statements, brought back up the same way */
    .op-line{font-size:2.55rem;}
    .begin h2{font-size:2.55rem;}

    /* THE CALL BAR IS FIXED OVER THE PAGE, so the first screen has to end above it or it sits
       on top of the Contact us button, which is exactly what it did on the first attempt.
       The hero fills the space a person can actually see, not the space behind the bar. */
    .hero{min-height:calc(100svh - 3.4rem);}
  }