/* ==========================================================================
   Work With Brian landing page.

   Every selector is scoped under body.wwb so this stylesheet cannot touch the
   rest of infintechdesigns.com, and the main theme's rules cannot reach
   inside the landing page. Generated from the design by tools/css_scope.py
   — edit the source, not this file.
   ========================================================================== */

/* ===========================================================================
   Work With Brian, improved landing page.
   Direction B ("two hard hats"), the photo banner removed.
   THEME UNCHANGED: same palette, same typeface, same component idiom as the
   live Infintechdesigns theme. Every token below was read off the live page's
   :root on 2026-09-07, not invented.
   =========================================================================== */
body.wwb{
  /* live site, measured: text #212529, dark #02182D, orange #EA4517 (210 uses),
     gold #ED9924, grey #414141, light #EEEFFA, coral #FF4E5E, Raleway
     throughout, H1 weight 500, primary button 20px/700 uppercase radius 0 */
  --ink:#02182D; --ink-2:#0A2740; --navy:#123A5C;
  --orange:#EA4517; --orange-dk:#C93A13; --orange-ink:#B03210;
  --gold:#ED9924; --coral:#FF4E5E;
  --text:#212529; --muted:#414141; --faint:#6B7378;
  --bg:#FFFFFF; --surface:#EEEFFA; --surface-2:#E4E6F4;
  --border:#DDDEEC; --border-strong:#C3C5DA;
  --on-ink:#F2F5F9; --on-ink-muted:#A9B6C6;
  --green:#127A3E;

  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:40px; --s6:48px;
  --s7:64px; --s8:80px; --s9:96px;

  --t-xs:12px; --t-sm:14px; --t-base:16px; --t-md:18px; --t-lg:20px;
  --t-xl:25px; --t-2xl:31px; --t-3xl:39px; --t-4xl:49px; --t-5xl:61px;

  --ease-out:cubic-bezier(0.23,1,0.32,1);
  --ease-reveal:cubic-bezier(0.16,1,0.3,1);
  --shadow:0 1px 2px rgba(12,47,85,.06),0 8px 28px rgba(12,47,85,.08);
  --shadow-lg:0 2px 8px rgba(10,36,68,.10),0 24px 60px rgba(10,36,68,.18);

  --sans:"Raleway","Segoe UI",system-ui,-apple-system,sans-serif;
}
body.wwb *, body.wwb *::before, body.wwb *::after{box-sizing:border-box}
body.wwb{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body.wwb{margin:0;font-family:var(--sans);color:var(--text);background:var(--bg);
  line-height:1.62;-webkit-font-smoothing:antialiased}
/* height:auto is NOT optional here. The img tags carry width/height
   attributes for layout stability, and without this the presentational
   height wins and the photograph renders stretched. */
body.wwb img{max-width:100%;height:auto;display:block}
body.wwb a{color:inherit}
body.wwb h1, body.wwb h2, body.wwb h3, body.wwb h4{margin:0;line-height:1.16;letter-spacing:normal;font-weight:700}
body.wwb p{margin:0}
body.wwb ul{margin:0;padding:0;list-style:none}
/* a grid child defaults to min-width:auto, so one long word can push a track
   past the viewport */
body.wwb .wall>*, body.wwb .fit-grid>*, body.wwb .steps>*, body.wwb .book-grid>*, body.wwb .story>*, body.wwb .tracks>*, body.wwb .brian>*, body.wwb .hero-in>*, body.wwb .statrow>*{min-width:0}

body.wwb .skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);
  color:#fff;padding:14px 22px;font-weight:800;text-decoration:none}
body.wwb .skip:focus{left:0}

body.wwb .wrap{max-width:1200px;margin:0 auto;padding:0 var(--s5)}
@media (max-width:640px){body.wwb .wrap{padding:0 20px}}

/* #EA4517 on white is 3.92:1, so any small orange text takes the darker token */
body.wwb .eyebrow{font-size:var(--t-xs);font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--orange-ink);display:block}
body.wwb .ink .eyebrow{color:var(--gold)}
body.wwb .preline{display:block;font-size:var(--t-sm);color:var(--muted);margin-bottom:10px;
  animation:riseIn 720ms var(--ease-out) 40ms both}
body.wwb .preline b{color:var(--ink);font-weight:700}
body.wwb .lede{font-size:var(--t-lg);color:var(--muted)}
body.wwb .ink .lede{color:var(--on-ink-muted)}

/* 19px/800 is LARGE text under WCAG, so white on the brand orange takes the
   3:1 threshold (3.92:1) and the brand colour is kept exactly */
body.wwb .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:16px 30px;border-radius:0;font-weight:700;font-size:20px;
  text-transform:uppercase;text-decoration:none;border:2px solid transparent;
  cursor:pointer;line-height:1.25;
  transition:background-color 180ms var(--ease-out),border-color 180ms var(--ease-out),
             color 180ms var(--ease-out)}
body.wwb .btn-primary{background:var(--orange);color:#fff}
body.wwb .btn-light{background:#fff;color:var(--ink);border-color:#fff}
@media (hover:hover) and (pointer:fine){
  body.wwb .btn-primary:hover{background:var(--ink)}
  body.wwb .btn-light:hover{background:var(--gold);border-color:var(--gold);color:var(--ink)}
}
body.wwb .btn:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
body.wwb .tlink{font-weight:700;font-size:var(--t-base);color:var(--orange-ink);text-decoration:none;
  border-bottom:2px solid var(--border-strong);padding-bottom:2px;
  transition:border-color 180ms var(--ease-out),color 180ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){body.wwb .tlink:hover{color:var(--ink);border-color:var(--orange)}}

/* ---------------------------------------------------------------- header */
body.wwb .hdr{position:sticky;top:0;z-index:80;background:#fff;border-bottom:1px solid var(--border)}
body.wwb .hdr-in{max-width:1200px;margin:0 auto;padding:14px var(--s5);display:flex;
  align-items:center;gap:var(--s4)}
body.wwb .brandrow{display:flex;align-items:center;gap:11px;color:var(--ink);
  text-decoration:none;flex:none}
body.wwb .brandrow img{width:168px;height:auto;display:block}
@media (max-width:820px){body.wwb .brandrow img{width:158px}}
body.wwb .nav{display:flex;gap:var(--s3);margin-left:auto;font-size:var(--t-sm);font-weight:400}
body.wwb .nav a{color:#000;text-decoration:none;padding:6px 0;border-bottom:2px solid transparent;
  white-space:nowrap;text-transform:uppercase;letter-spacing:.01em;
  transition:color 160ms var(--ease-out),border-color 160ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){body.wwb .nav a:hover{color:var(--orange);border-color:var(--orange)}}
body.wwb .hdr-tel{font-weight:700;font-size:var(--t-md);color:var(--ink);text-decoration:none;
  white-space:nowrap;font-variant-numeric:tabular-nums}
@media (hover:hover) and (pointer:fine){body.wwb .hdr-tel:hover{color:var(--orange-ink)}}
body.wwb .hdr-cta{background:var(--orange);color:#fff;text-decoration:none;font-weight:700;
  font-size:19px;padding:12px 20px;border-radius:0;white-space:nowrap;
  text-transform:uppercase;transition:background-color 160ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){body.wwb .hdr-cta:hover{background:var(--ink)}}

/* The right-hand group. On a wide screen it is just a row; on a narrow one it
   becomes the panel the menu button opens. */
body.wwb .hdr-menu{display:flex;align-items:center;gap:var(--s4);margin-left:auto}
body.wwb .hdr-menu .nav{margin-left:0}

/* Menu button. Hidden until the script adds `js-nav`, so the panel is never
   collapsed behind a button that cannot open it. */
body.wwb .nav-toggle{display:none;align-items:center;gap:9px;margin-left:auto;
  padding:9px 12px;background:#fff;border:1px solid var(--border-strong);color:var(--ink);
  font:inherit;font-size:var(--t-sm);font-weight:700;text-transform:uppercase;
  letter-spacing:.02em;line-height:1;cursor:pointer;
  transition:border-color 160ms var(--ease-out),color 160ms var(--ease-out)}
body.wwb .nav-toggle:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
body.wwb .nav-toggle__bars{position:relative;display:block;width:20px;height:2px;
  background:currentColor;transition:background-color 120ms var(--ease-out)}
body.wwb .nav-toggle__bars::before,
body.wwb .nav-toggle__bars::after{content:"";position:absolute;left:0;width:20px;height:2px;
  background:currentColor;
  transition:transform 220ms var(--ease-out),top 220ms var(--ease-out)}
body.wwb .nav-toggle__bars::before{top:-6px}
body.wwb .nav-toggle__bars::after{top:6px}
body.wwb .nav-toggle[aria-expanded="true"] .nav-toggle__bars{background:transparent}
body.wwb .nav-toggle[aria-expanded="true"] .nav-toggle__bars::before{top:0;transform:rotate(45deg)}
body.wwb .nav-toggle[aria-expanded="true"] .nav-toggle__bars::after{top:0;transform:rotate(-45deg)}
@media (hover:hover) and (pointer:fine){
  body.wwb .nav-toggle:hover{border-color:var(--orange);color:var(--orange-ink)}
}

/* Mobile only: the call-to-action gets its own strip under the logo row. */
body.wwb .hdr-strip{display:none}


/* ------------------------------------------------------------------ hero */
/* No photo banner. A landing page hero: one claim, one ask, the proof beside it. */
body.wwb .hero{position:relative;overflow:hidden;isolation:isolate;
  background:linear-gradient(180deg,var(--surface),#fff 66%);
  border-bottom:1px solid var(--border);padding:var(--s9) 0 var(--s8)}
/* the arc echoes the curved shape the live homepage runs behind its hero,
   drawn in Infintech's own colours instead of that page's purple */
body.wwb .hero-art{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
/* the big shape the proof card sits on, the same move the live homepage makes
   with its blue curve, in Infintech's own navy */
body.wwb .hero-arc{position:absolute;right:-20%;top:-46%;width:86%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 38% 44%,rgba(18,58,92,.22),rgba(18,58,92,.10) 42%,rgba(18,58,92,.03) 62%,transparent 74%);
  animation:breathe 15s ease-in-out infinite alternate}
body.wwb .hero-arc.two{right:-34%;top:2%;width:70%;
  background:radial-gradient(circle at 58% 42%,rgba(234,69,23,.16),rgba(237,153,36,.07) 44%,transparent 68%);
  animation:breathe 19s ease-in-out 2s infinite alternate-reverse}
@keyframes breathe{from{transform:scale(1)}to{transform:scale(1.07)}}
/* a hairline ring, so the shape reads as drawn rather than as a smudge */
body.wwb .hero-ring{position:absolute;right:2%;top:-14%;width:52%;aspect-ratio:1;border-radius:50%;
  border:1px solid rgba(18,58,92,.16);
  animation:breathe 21s ease-in-out 1s infinite alternate}
body.wwb .hero-ring.b{right:14%;top:4%;width:34%;border-color:rgba(234,69,23,.16);
  animation-duration:17s;animation-delay:.5s}
/* one slow light sweep across the shape, and a soft brand-tinted wash. No
   floating confetti: at this size it read as clip art rather than as craft. */
body.wwb .hero-sweep{position:absolute;inset:-20% -10%;
  background:linear-gradient(104deg,transparent 34%,rgba(255,255,255,.55) 46%,transparent 58%);
  animation:sweep 11s ease-in-out 1.2s infinite}
@keyframes sweep{0%{transform:translateX(-38%)}55%,100%{transform:translateX(38%)}}
body.wwb .hero-wash{position:absolute;right:-8%;bottom:-30%;width:64%;aspect-ratio:1.4;
  background:radial-gradient(ellipse at 50% 50%,rgba(237,153,36,.13),transparent 66%)}
body.wwb .hero-grid-lines{position:absolute;right:-6%;bottom:-24%;width:58%;aspect-ratio:1;opacity:.9;
  background-image:linear-gradient(rgba(18,58,92,.16) 1px,transparent 1px),
    linear-gradient(90deg,rgba(18,58,92,.16) 1px,transparent 1px);
  background-size:38px 38px;
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000,transparent 70%);
          mask-image:radial-gradient(circle at 50% 50%,#000,transparent 70%)}
body.wwb .hero-in{position:relative;display:grid;grid-template-columns:1.08fr .92fr;gap:var(--s8);
  align-items:center}

/* Entrance. These animate FROM opacity 0 with no fill-mode backwards, so the
   resting state in the stylesheet is fully visible. If the animation never
   runs, nothing is hidden. That is the whole reason the earlier scroll-reveal
   was removed, and it is not being reintroduced here. */
@keyframes riseIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes cardIn{from{opacity:0;transform:translateY(24px) scale(.985)}to{opacity:1;transform:none}}
body.wwb .hero .eyebrow{animation:riseIn 620ms var(--ease-out) both}
body.wwb .hero h1{animation:riseIn 720ms var(--ease-out) 90ms both}
body.wwb .hero-sub{animation:riseIn 720ms var(--ease-out) 190ms both}
body.wwb .hero-cta{animation:riseIn 720ms var(--ease-out) 290ms both}
body.wwb .hero-trust{animation:riseIn 720ms var(--ease-out) 380ms both}
body.wwb .proof{animation:cardIn 820ms var(--ease-out) 240ms both}
body.wwb .hero h1{font-size:clamp(31px,3.7vw,52px);font-weight:500;line-height:1.16;
  margin:var(--s3) 0;max-width:19ch;color:#121212}
body.wwb .hero h1 .fig{color:var(--orange);font-weight:700;white-space:nowrap}
body.wwb .hero-sub{font-size:var(--t-md);color:var(--muted);max-width:52ch}
body.wwb .hero-sub b{color:var(--text);font-weight:800}
body.wwb .hero-cta{margin-top:var(--s5);display:flex;gap:var(--s4);align-items:center;flex-wrap:wrap}
body.wwb .hero-trust{margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--border);
  display:flex;flex-wrap:wrap;gap:12px var(--s5);font-size:var(--t-sm);font-weight:700}
body.wwb .hero-trust li{display:flex;align-items:center;gap:9px}
body.wwb .hero-trust svg{color:var(--orange-ink);flex:none}
/* ---- hero: the objection in the headline, the terms beside it ------------ */

/* Both columns start at the top: the panel is a sidebar to the headline, not
   something floating against the middle of it. */
body.wwb .hero-in{align-items:start}

/* The headline carries a full sentence now, so the cap that suited the old
   short one has to go. */
body.wwb .hero h1{max-width:24ch;margin:var(--s3) 0 0}

/* A short rule before the eyebrow, in the brand orange. */
body.wwb .hero .eyebrow{display:inline-flex;align-items:center;gap:12px}
body.wwb .hero .eyebrow::before{content:"";flex:none;width:34px;height:2px;background:var(--orange)}

/* The claim they have already been sold: same face, stepped well down and
   greyed back, so the answer underneath is plainly the louder line. */
body.wwb .hero-q{display:block;margin-bottom:12px;font-size:.56em;font-weight:500;
  line-height:1.25;letter-spacing:.005em;color:var(--faint)}

/* p is margin:0 here, so every block below states its own spacing. */
body.wwb .hero-proof{margin:var(--s4) 0 var(--s3);max-width:44ch;font-size:var(--t-lg);
  font-weight:800;line-height:1.4;color:var(--ink);
  animation:riseIn 720ms var(--ease-out) 150ms both}
body.wwb .hero-proof em{font-style:normal;color:var(--orange-ink)}

body.wwb .hero-sub{margin:0}

body.wwb .hero-note{margin:var(--s3) 0 0;max-width:50ch;font-size:var(--t-sm);
  line-height:1.62;color:var(--faint);
  animation:riseIn 720ms var(--ease-out) 330ms both}
body.wwb .hero-note b{color:var(--text);font-weight:800}

/* ---- the fine-print panel ---- */
body.wwb .terms{position:relative;background:#fff;border:1px solid var(--border-strong);
  padding:var(--s4);box-shadow:var(--shadow);
  animation:cardIn 820ms var(--ease-out) 240ms both}
body.wwb .terms::before{content:"";position:absolute;left:-1px;right:-1px;top:-4px;
  height:4px;background:var(--orange)}

/* Stacked, not side by side: at this width the strapline could only sit on its
   own line anyway, and pushed right it read as a stray fragment. */
body.wwb .terms-head{padding-bottom:var(--s3);border-bottom:1px solid var(--border)}
body.wwb .terms-title{margin:0;font-size:var(--t-lg);font-weight:800;line-height:1.25;
  color:var(--ink)}
body.wwb .terms-sub{display:block;margin-top:6px;font-size:var(--t-xs);line-height:1.5;
  color:var(--faint)}

body.wwb .terms-list{counter-reset:term;list-style:none;margin:0;padding:0}
body.wwb .term{counter-increment:term;display:grid;grid-template-columns:22px 1fr;
  gap:var(--s2);padding:var(--s3) 0;border-bottom:1px dashed var(--border)}
body.wwb .term:last-child{border-bottom:0;padding-bottom:0}
body.wwb .term::before{content:counter(term);font-size:var(--t-sm);font-weight:800;
  line-height:1.62;color:var(--orange-ink)}
body.wwb .term p{margin:0;font-size:var(--t-sm);line-height:1.62;color:var(--muted)}
body.wwb .term p + p{margin-top:8px}
body.wwb .term b{color:var(--ink);font-weight:800}
body.wwb .term-stat{font-size:var(--t-base);font-weight:800;line-height:1.45;color:var(--ink)}
body.wwb .term-stat em{font-style:normal;color:var(--orange-ink)}

body.wwb .terms-foot{margin:var(--s3) 0 0;padding-top:var(--s3);
  border-top:1px solid var(--border);font-size:var(--t-xs);line-height:1.62;
  color:var(--faint)}

@media (max-width:1080px){
  body.wwb .hero h1{max-width:none}
  body.wwb .hero-proof{max-width:none}
  body.wwb .terms{padding:var(--s3)}
}
@media (max-width:520px){
  body.wwb .hero .eyebrow{font-size:var(--t-sm);letter-spacing:.13em;gap:10px}
  body.wwb .hero .eyebrow::before{width:26px}
  body.wwb .hero-q{font-size:.85em}
}

/* the proof card, the number the whole page rests on */
body.wwb .proof{position:relative;background:#fff;border:1px solid var(--border-strong);
  box-shadow:var(--shadow-lg);border-top:5px solid var(--orange)}
body.wwb .proof::after{content:"";position:absolute;left:0;right:0;top:-5px;height:5px;overflow:hidden;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent);
  background-size:44% 100%;background-repeat:no-repeat;
  animation:sheen 4.2s linear 1.4s infinite}
@keyframes sheen{from{background-position:-60% 0}to{background-position:170% 0}}
body.wwb .proof-h{padding:var(--s4) var(--s4) 0}
body.wwb .proof .cap{font-size:10px;letter-spacing:.19em;text-transform:uppercase;font-weight:800;
  color:var(--muted)}
body.wwb .proof .fig{font-size:clamp(42px,5vw,58px);font-weight:700;letter-spacing:-.02em;
  color:var(--ink);line-height:1;margin:8px 0 6px;font-variant-numeric:tabular-nums}
body.wwb .proof-rows{padding:var(--s3) var(--s4) 0}
body.wwb .proof-row{display:flex;align-items:baseline;gap:10px;padding:11px 0;font-size:var(--t-sm);
  border-bottom:1px dotted var(--border-strong)}
body.wwb .proof-row:last-child{border-bottom:0}
body.wwb .proof-row .lead{flex:1}
body.wwb .proof-row b{font-weight:800;white-space:nowrap;font-variant-numeric:tabular-nums}
body.wwb .proof-row.out b{color:var(--orange-dk)}
body.wwb .proof-eq{margin:var(--s3) var(--s4) 0;padding-top:var(--s3);border-top:2px solid var(--ink);
  font-size:var(--t-sm);font-weight:700;color:var(--ink)}
body.wwb .proof-note{padding:12px var(--s4) 0;font-size:var(--t-xs);color:var(--muted);line-height:1.55}
body.wwb .proof-foot{padding:var(--s4);margin-top:var(--s3)}
body.wwb .proof-foot .btn{width:100%}
body.wwb .proof-foot .sub{text-align:center;font-size:var(--t-xs);color:var(--muted);margin-top:11px}
body.wwb .proof-foot .sub b{color:var(--text)}

/* -------------------------------------------------------------- ink band */
body.wwb .ink{background:var(--ink);color:var(--on-ink)}
body.wwb .ink h2, body.wwb .ink h3{color:#fff}
body.wwb .statband{padding:var(--s7) 0}
body.wwb .statband .h{text-align:center;font-size:var(--t-xl);margin-bottom:var(--s5)}
body.wwb .statrow{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s4) var(--s7)}
body.wwb .statrow .i{text-align:center}
body.wwb .statrow .n{font-size:var(--t-2xl);font-weight:700;color:var(--gold);
  line-height:1.05;font-variant-numeric:tabular-nums}
body.wwb .statrow .l{font-size:var(--t-sm);color:var(--on-ink-muted)}
body.wwb .statrow .i.nofig .l{font-size:var(--t-md);color:#fff;font-weight:800;padding-top:var(--s2)}
/* the press row moved down here from the stat band, so Brian's credentials sit
   with Brian. Recoloured for the light ground: --faint reads 4.22:1 on the tint
   and the old white separator 1.49:1, so both take --muted. */
body.wwb .bpress{margin-top:var(--s5);padding-top:var(--s4);
  border-top:1px solid var(--border-strong)}
body.wwb .feat{display:flex;flex-wrap:wrap;align-items:center;gap:11px}
body.wwb .feat-label{font-size:10px;letter-spacing:.18em;text-transform:uppercase;font-weight:800;
  color:var(--muted);margin-right:4px}
body.wwb .feat-name{font-size:var(--t-md);color:var(--navy);font-weight:800;letter-spacing:-.01em}
body.wwb .feat-dot{color:var(--muted)}

/* --------------------------------------------------------------- sections */
body.wwb .sec{padding:var(--s9) 0}
body.wwb .sec.alt{background:var(--surface)}
body.wwb .sec-head{max-width:66ch;margin-bottom:var(--s6)}
body.wwb .sec-head h2{font-size:clamp(26px,2.9vw,36px);margin:var(--s2) 0;font-weight:700}
body.wwb .sec-head h2 em{font-style:normal;color:var(--orange)}
body.wwb .sec-head .lede{max-width:62ch}
body.wwb .sec-head.mid{margin-left:auto;margin-right:auto;text-align:center}

/* story */
/* The story sits over a montage of six live sites Infintech built. The tiles
   are real screenshots, captured 2026-09-07, not stock. A navy wash carries the
   copy; the montage drifts and slowly scales so the section is never static. */
body.wwb #story{position:relative;overflow:hidden;isolation:isolate;background-color:var(--ink)}
/* two reels of real client sites running in opposite directions. The strip is
   ONE image repeated on x, so an endless scroll costs a single request. */
body.wwb #story .work-bg{position:absolute;inset:0;z-index:-2;overflow:hidden;opacity:1}
body.wwb #story .reel{position:absolute;left:0;height:34%;width:400%;
  background-repeat:repeat-x;background-size:auto 100%;opacity:.92;
  will-change:transform}
body.wwb #story .reel.r1{top:8%;animation:reelL 64s linear infinite}
body.wwb #story .reel.r2{top:47%;animation:reelR 78s linear infinite}
/* the pitch is 6 tiles x 492px = 2952px, so translating by exactly that
   distance loops with no visible seam */
@keyframes reelL{from{transform:translate3d(0,0,0)}to{transform:translate3d(-2952px,0,0)}}
@keyframes reelR{from{transform:translate3d(-2952px,0,0)}to{transform:translate3d(0,0,0)}}
/* lighter than before so the work is legible, with the wash concentrated over
   the copy column where it is actually needed */
body.wwb #story::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(2,24,45,.97) 0%,rgba(2,24,45,.93) 34%,
    rgba(2,24,45,.72) 56%,rgba(2,24,45,.52) 100%),
    linear-gradient(0deg,rgba(2,24,45,.72),rgba(2,24,45,.20) 42%,rgba(2,24,45,.46))}
body.wwb #story .eyebrow{color:var(--gold)}
body.wwb #story .sec-head h2{color:#fff}
body.wwb #story .sec-head h2 em{color:var(--gold)}
body.wwb .work-note{margin-top:var(--s6);padding-top:var(--s4);
  border-top:1px solid rgba(255,255,255,.18);display:flex;gap:var(--s3);
  align-items:center;flex-wrap:wrap;font-size:var(--t-sm);color:var(--on-ink-muted)}
body.wwb .work-note b{color:#fff;font-weight:800}
body.wwb .work-note .dotrow{display:flex;gap:7px}
body.wwb .work-note .dotrow i{width:9px;height:9px;border-radius:50%;background:var(--gold);opacity:.55;
  animation:blip 2.6s ease-in-out infinite}
body.wwb .work-note .dotrow i:nth-child(2){animation-delay:.35s;background:var(--orange)}
body.wwb .work-note .dotrow i:nth-child(3){animation-delay:.7s;background:#48A8CC}
@keyframes blip{0%,100%{opacity:.35;transform:scale(1)}50%{opacity:1;transform:scale(1.25)}}

body.wwb .story{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--s7);align-items:start}
body.wwb .story p{font-size:var(--t-md);color:#CBD8E6;margin-bottom:var(--s3);line-height:1.7}
body.wwb .story p b{color:#fff;font-weight:800}
body.wwb .story p.first{font-size:var(--t-lg);color:#fff}
body.wwb .quote{background:var(--ink-2);color:#fff;padding:var(--s5);
  border:1px solid rgba(255,255,255,.22);border-top:5px solid var(--orange);
  box-shadow:0 24px 60px rgba(0,0,0,.35)}
body.wwb .quote q{font-weight:400}
body.wwb .quote q{display:block;font-size:var(--t-lg);line-height:1.5;font-style:italic;quotes:none}
body.wwb .quote q::before{content:'\201C'}body.wwb .quote q::after{content:'\201D'}
body.wwb .quote .who{margin-top:var(--s4);padding-top:var(--s3);
  border-top:1px solid rgba(255,255,255,.2);font-weight:800;font-size:var(--t-sm)}
body.wwb .quote .role{font-size:var(--t-xs);color:var(--on-ink-muted)}

/* the two tracks, the idea direction B is built on */
body.wwb .tracks{display:grid;grid-template-columns:1fr 1fr;gap:var(--s8);position:relative;
  align-items:start}
/* the last paragraph in a track kept its 24px margin as dead space at the foot */
body.wwb .track > :last-child{margin-bottom:0}
body.wwb .tracks::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;
  background:linear-gradient(180deg,transparent,var(--border-strong) 8%,var(--border-strong) 92%,transparent)}
body.wwb .track-h{display:flex;align-items:center;gap:11px;margin-bottom:var(--s4);
  padding-bottom:var(--s3);border-bottom:2px solid var(--border)}
body.wwb .track-h .dot{width:11px;height:11px;border-radius:50%;flex:none}
body.wwb .track-h .t{font-size:var(--t-xs);letter-spacing:.17em;text-transform:uppercase;font-weight:800}
body.wwb .track.shop .track-h .dot{background:var(--orange)}
body.wwb .track.shop .track-h .t{color:var(--orange-ink)}
body.wwb .track.sys .track-h .dot{background:var(--ink)}
body.wwb .track.sys .track-h .t{color:var(--ink)}
body.wwb .track h3{font-size:var(--t-xl);margin-bottom:12px}
body.wwb .track p{color:var(--muted);margin-bottom:var(--s3)}
body.wwb .track .slot{position:relative;height:200px;margin-bottom:var(--s3);
  background-color:var(--ink-2);
  background-image:linear-gradient(135deg,var(--ink-2),var(--navy));color:#DCE7F4;
  display:flex;align-items:flex-end;overflow:hidden;isolation:isolate}
body.wwb .slot::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.14;
  background-image:linear-gradient(rgba(255,255,255,.6) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.6) 1px,transparent 1px);background-size:28px 28px}
body.wwb .slot span{padding:14px 16px;font-size:var(--t-xs);letter-spacing:.11em;
  text-transform:uppercase;font-weight:800;line-height:1.5}
/* a real brand mark instead of a placeholder, on a light plate so a grey or
   blue logo keeps its own colours against the navy */
body.wwb .logo-panel{background:#fff;border:1px solid var(--border-strong);display:flex;
  flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;
  padding:var(--s5) var(--s4)}
body.wwb .logo-panel img{max-width:190px;width:100%;height:auto}
body.wwb .logo-panel .cap{font-size:var(--t-xs);letter-spacing:.13em;text-transform:uppercase;
  font-weight:800;color:var(--muted)}
/* dark treatment: the grey in the Renovators mark is lifted to white so it
   holds on navy, and the blue is kept as blue */
body.wwb .logo-panel.dark{background:var(--ink);border-color:rgba(255,255,255,.16);position:relative;
  overflow:hidden;isolation:isolate}
body.wwb .logo-panel.dark .cap{color:var(--gold)}
body.wwb .logo-panel.dark::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:26px 26px}
body.wwb .track .logo-panel{height:150px;margin-bottom:var(--s3)}
body.wwb .slot span b{display:block;color:var(--gold);font-size:10px;letter-spacing:.17em;margin-bottom:4px}
body.wwb .datacard{background:#fff;border:1px solid var(--border-strong);box-shadow:var(--shadow);
  padding:var(--s4);margin-bottom:var(--s3)}
body.wwb .datarow{display:flex;justify-content:space-between;gap:12px;padding:11px 0;
  border-bottom:1px dotted var(--border);font-size:var(--t-sm)}
body.wwb .datarow:last-child{border-bottom:0}
body.wwb .datarow b{font-weight:800;font-variant-numeric:tabular-nums;color:var(--ink)}
body.wwb .converge{margin-top:var(--s7);text-align:center}
body.wwb .converge .sec-head{margin-bottom:0}
body.wwb .converge .vee{width:2px;height:var(--s6);background:var(--border-strong);margin:0 auto var(--s4)}
/* Social feed under the two columns. Only rendered when an embed code has been
   pasted in, so the section is untouched for anyone who leaves it empty. */
body.wwb .feed{margin-top:var(--s7)}
body.wwb .feed__label{display:flex;align-items:center;justify-content:center;gap:14px;
  margin:0 0 var(--s5);font-size:var(--t-xs);font-weight:800;letter-spacing:.17em;
  text-transform:uppercase;color:var(--orange-ink)}
body.wwb .feed__label::before,
body.wwb .feed__label::after{content:"";flex:1;max-width:120px;height:1px;
  background:var(--border-strong)}
body.wwb .feed__embed{position:relative}
body.wwb .feed__embed iframe{display:block;max-width:100%;border:0}
body.wwb .feed__embed img{max-width:100%;height:auto}
@media (max-width:760px){
  body.wwb .feed{margin-top:var(--s6)}
  body.wwb .feed__label::before, body.wwb .feed__label::after{max-width:40px}
}

/* THE MAN BEHIND IT, a big photograph */
body.wwb .brian{display:grid;grid-template-columns:minmax(300px,400px) 1fr;gap:var(--s8);align-items:center}
body.wwb .brian-ph{position:relative;isolation:isolate;padding:0 20px 20px 0}
body.wwb .brian-ph img{width:100%;border:1px solid var(--border-strong);position:relative;z-index:1}
body.wwb .brian-ph::after{content:"";position:absolute;left:20px;right:0;top:20px;bottom:0;
  border:3px solid var(--orange);z-index:0}
body.wwb .brian h2{font-size:clamp(30px,3.4vw,42px);margin:var(--s2) 0;font-weight:700}
body.wwb .brian .role{color:var(--orange-ink);font-weight:700;font-size:var(--t-md)}
body.wwb .brian .line{font-size:26px;line-height:1.5;font-style:italic;color:var(--text);
  margin:var(--s5) 0;max-width:30ch;padding-left:var(--s4);border-left:4px solid var(--gold)}
body.wwb .brian .btn{margin-top:var(--s2)}


/* ===========================================================================
   PROOF HE'S REAL, "the wall". Five holdings, one owner, one ground.
   Direction B, picked 2026-09-07. Replaced a card grid whose five full-colour
   website screenshots put five competing brand palettes side by side and made
   this the tallest section on the page.
   =========================================================================== */
body.wwb .wall{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;
  background:var(--border-strong);border:1px solid var(--border-strong);
  box-shadow:var(--shadow)}
body.wwb .wcol{background:#fff;padding:var(--s4) var(--s3) var(--s5);
  display:flex;flex-direction:column;position:relative;
  transition:background 220ms var(--ease-out)}
body.wwb .wcol::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--accent,var(--orange))}
/* a uniform white tile is what neutralises five different logo palettes */
body.wwb .wtile{height:78px;display:flex;align-items:center;justify-content:center;
  background:var(--surface);border:1px solid var(--border);border-radius:3px;
  padding:12px;margin-bottom:var(--s3)}
/* Flowbots and Magister ship light-on-dark marks. Put those on a dark plate
   rather than recolouring somebody else's logo. */
body.wwb .wtile.plate{background:var(--ink);border-color:var(--ink)}
body.wwb .wlogo{max-height:46px;width:auto;max-width:100%;object-fit:contain}
body.wwb .wrole{font-size:10px;letter-spacing:.18em;text-transform:uppercase;font-weight:800;
  color:var(--orange-ink);display:block;margin-bottom:6px}
body.wwb .wcol h3{font-size:var(--t-md);font-weight:700;color:var(--ink);line-height:1.25;text-wrap:balance}
body.wwb .wcol h3 a{text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--border-strong);
  transition:text-decoration-color 180ms var(--ease-out)}
body.wwb .wcat{font-size:var(--t-xs);font-weight:700;color:var(--navy);display:block;
  margin:7px 0 12px;padding-bottom:12px;border-bottom:1px solid var(--border)}
body.wwb .wcol p{font-size:var(--t-sm);color:var(--muted);line-height:1.7}
@media (hover:hover) and (pointer:fine){
  body.wwb .wcol:hover{background:#FBFBFE}
  body.wwb .wcol h3 a:hover{text-decoration-color:var(--orange)}
}
@media (max-width:1080px){body.wwb .wall{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){body.wwb .wall{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){body.wwb .wall{grid-template-columns:1fr}}

/* fit and skip */
/* The two boxes read as a matched pair now, with the YES side clearly the one
   he wants and the NO side deliberately quieter. Rows are numbered so the two
   lists scan against each other. */
/* Dark section. The fit side is the lit one and the skip side deliberately
   recedes, so the choice reads before a word is. Colours are the same tokens
   used everywhere else, no new palette. */
body.wwb #fit{position:relative;overflow:hidden;isolation:isolate}
body.wwb #fit::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.55;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:44px 44px}
body.wwb #fit::after{content:"";position:absolute;left:-10%;top:-30%;width:60%;aspect-ratio:1;z-index:-1;
  border-radius:50%;background:radial-gradient(circle at 50% 50%,rgba(18,122,62,.16),transparent 66%)}
body.wwb .fit-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5);position:relative}
body.wwb .fit-grid::after{content:"OR";position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);z-index:2;background:var(--ink);color:var(--on-ink-muted);
  font-size:var(--t-xs);font-weight:800;letter-spacing:.18em;padding:12px 6px;
  border:1px solid rgba(255,255,255,.22);border-radius:99px;line-height:1}
@media (max-width:760px){body.wwb .fit-grid::after{display:none}}
body.wwb .fitbox{background:#0A2740;border:1px solid rgba(255,255,255,.14);padding:0;
  box-shadow:0 28px 70px rgba(0,0,0,.34);position:relative;overflow:hidden;
  display:flex;flex-direction:column}
body.wwb .fitbox::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:#2FA362}
body.wwb .fitbox.no{background:transparent;border-style:dashed;border-color:rgba(255,255,255,.20);
  box-shadow:none}
body.wwb .fitbox.no::before{background:rgba(255,255,255,.22)}
body.wwb .fitbox h3{display:flex;align-items:center;gap:13px;font-size:var(--t-xl);color:#fff;
  margin:0;padding:var(--s5) var(--s5) var(--s4);border-bottom:1px solid rgba(255,255,255,.14)}
body.wwb .fitbox h3 .ic{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:#2FA362;color:#04210F;box-shadow:0 0 0 6px rgba(47,163,98,.14)}
body.wwb .fitbox.no h3 .ic{background:rgba(255,255,255,.13);color:#C7D2DE;box-shadow:none}
body.wwb .fitbox.no h3{color:#C7D2DE;border-bottom-color:rgba(255,255,255,.14)}
body.wwb .fitbox ul{padding:var(--s3) var(--s5) var(--s5)}
body.wwb .fitbox li{display:grid;grid-template-columns:32px 1fr;gap:15px;align-items:start;
  padding:16px 0;border-bottom:1px solid rgba(255,255,255,.10);color:#E4ECF4;
  font-size:var(--t-md)}
body.wwb .fitbox li:last-child{border-bottom:0}
body.wwb .fitbox li .n{font-size:var(--t-xs);font-weight:800;color:#6FE0A0;
  border:1px solid rgba(111,224,160,.55);border-radius:50%;width:28px;height:28px;
  display:grid;place-items:center;line-height:1}
body.wwb .fitbox.no li{color:#9FAEBE}
body.wwb .fitbox.no li .n{color:#8B99A8;border-color:rgba(255,255,255,.20)}
body.wwb .fitbox.yes .foot{margin-top:auto;background:#0F3845;
  border-top:1px solid rgba(47,163,98,.34);padding:var(--s4) var(--s5);
  font-size:var(--t-md);font-weight:700;color:#9CEFC1;display:flex;align-items:center;gap:10px}
body.wwb .fitbox.no .foot{margin-top:auto;background:transparent;
  border-top:1px dashed rgba(255,255,255,.20);padding:var(--s4) var(--s5);
  font-size:var(--t-md);color:#9FAEBE}
body.wwb .fit-end{margin-top:var(--s6);display:flex;align-items:center;justify-content:center;
  gap:var(--s4);flex-wrap:wrap;text-align:center}
body.wwb .fit-end span{color:var(--on-ink-muted);font-size:var(--t-lg)}

/* steps */
/* Three flat boxes said nothing about sequence. This is a timeline: a rule
   runs through numbered discs, each step carries the minute it happens at,
   and the last marker is the outcome rather than a fourth step. */
body.wwb .steps{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5);
  padding-top:var(--s7)}
body.wwb .steps::before{content:"";position:absolute;top:33px;left:8%;right:8%;height:2px;
  background:linear-gradient(90deg,var(--orange) 0%,var(--orange) 66%,var(--border-strong) 66%);
  transform-origin:left center}
@media (max-width:760px){body.wwb .steps::before{display:none}}
body.wwb .step{position:relative;background:#fff;border:1px solid var(--border-strong);
  padding:var(--s6) var(--s5) var(--s5);box-shadow:var(--shadow);
  transition:box-shadow 240ms var(--ease-out),transform 240ms var(--ease-out),
             border-color 240ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  body.wwb .step:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:var(--orange)}
  body.wwb .step:hover .disc{background:var(--orange);color:#fff;border-color:var(--orange)}
}
body.wwb .step .disc{position:absolute;top:-34px;left:var(--s5);width:68px;height:68px;border-radius:50%;
  background:#fff;border:2px solid var(--orange);color:var(--orange-ink);
  display:grid;place-items:center;font-size:26px;font-weight:800;line-height:1;
  box-shadow:0 6px 20px rgba(2,24,45,.12);
  transition:background-color 240ms var(--ease-out),color 240ms var(--ease-out),
             border-color 240ms var(--ease-out)}
body.wwb .step .clock{display:inline-block;font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:800;color:var(--muted);background:var(--surface);border:1px solid var(--border);
  padding:5px 10px;border-radius:99px;margin-bottom:var(--s3)}
body.wwb .step .n{font-size:var(--t-xs);font-weight:800;color:var(--orange-ink);letter-spacing:.16em;
  display:block;margin-bottom:8px}
body.wwb .step h3{font-size:var(--t-xl);margin:0 0 11px}
body.wwb .step p{color:var(--muted)}
body.wwb .step .who{margin-top:var(--s4);padding-top:var(--s3);border-top:1px dotted var(--border);
  font-size:var(--t-sm);font-weight:700;color:var(--ink);display:flex;align-items:center;gap:9px}
body.wwb .step .who svg{color:var(--orange);flex:none}
/* the outcome, not a fourth step */
body.wwb .steps-end{margin-top:var(--s5);background:var(--ink);color:#fff;padding:var(--s5) var(--s6);
  display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap}
body.wwb .steps-end .mark{width:52px;height:52px;border-radius:50%;background:var(--orange);
  display:grid;place-items:center;flex:none;color:#fff}
body.wwb .steps-end b{display:block;font-size:var(--t-xl);font-weight:700}
body.wwb .steps-end span{color:var(--on-ink-muted);font-size:var(--t-md)}
body.wwb .steps-end .t{flex:1;min-width:240px}
body.wwb .steps-end .btn{white-space:nowrap}
@media (max-width:760px){
  body.wwb .steps{padding-top:var(--s6)}
  body.wwb .step{padding-top:var(--s7)}
  body.wwb .steps-end{padding:var(--s5) var(--s4)}
}

/* testimonial */
body.wwb .testi{max-width:900px;margin:0 auto;text-align:center;background:#fff;
  border:1px solid var(--border-strong);box-shadow:var(--shadow-lg);padding:var(--s7) var(--s6)}
body.wwb .stars{color:var(--gold);display:inline-flex;gap:4px}
body.wwb .testi q{display:block;font-size:clamp(21px,2.4vw,var(--t-2xl));line-height:1.45;
  margin:var(--s3) 0;font-style:italic;quotes:none}
body.wwb .testi q::before{content:'\201C'}body.wwb .testi q::after{content:'\201D'}
body.wwb .testi .who{font-weight:800;font-size:var(--t-sm);color:var(--muted)}
body.wwb .flag{border-left:4px solid var(--gold);background:#FFF8EC;color:#5A4415;padding:15px 19px;
  font-size:var(--t-sm);line-height:1.55;text-align:left;margin-top:var(--s5)}
body.wwb .flag b{color:#3E2E0B}

/* booking */
body.wwb .book-grid{display:grid;grid-template-columns:.9fr 1fr;gap:var(--s6);align-items:center}
/* Live pins the COPY column and lets the 800px calendar scroll past it, so the
   heading and the three checks stay beside the calendar the whole way down.
   The calendar itself cannot be the sticky one: it is as tall as the grid track,
   so it has zero travel. Offset clears our 90px sticky header. */
body.wwb .book-grid > :first-child{position:sticky;top:114px;align-self:start}
body.wwb .book-checks li{display:flex;gap:12px;align-items:flex-start;padding:14px 0;
  border-bottom:1px solid rgba(255,255,255,.15);font-weight:700;color:#fff;font-size:var(--t-md)}
body.wwb .book-checks svg{color:var(--gold);flex:none;margin-top:4px}
body.wwb .book-ask{margin-top:var(--s5);border:1px solid rgba(255,255,255,.22);padding:var(--s4)}
body.wwb .book-ask h3{font-size:var(--t-sm);letter-spacing:.11em;text-transform:uppercase;
  color:var(--gold);margin-bottom:12px}
body.wwb .book-ask li{font-size:var(--t-sm);color:var(--on-ink-muted);padding:8px 0 8px 20px;position:relative}
body.wwb .book-ask li::before{content:"";position:absolute;left:0;top:17px;width:9px;height:2px;background:var(--gold)}
body.wwb .book-face{margin-top:var(--s5);display:flex;gap:15px;align-items:center}
body.wwb .book-face img{width:68px;height:68px;border-radius:50%;object-fit:cover;object-position:50% 42%;
  border:2px solid var(--gold);flex:none}
body.wwb .book-face span{font-size:var(--t-sm);color:var(--on-ink-muted);line-height:1.5}
body.wwb .book-face b{color:#fff;display:block;font-size:var(--t-md)}
body.wwb .widget{background:#fff;overflow:hidden;border:1px solid #DBE2EC;border-radius:0;
  box-shadow:var(--shadow-lg)}
body.wwb .widget-h{background:#0C2F55;color:#F3F7FC;padding:18px 24px;display:flex;
  align-items:center;justify-content:space-between;gap:var(--s2)}
body.wwb .widget-h b{display:block;font-size:var(--t-md);font-weight:800}
body.wwb .widget-h span{font-size:var(--t-xs);color:#D6E5F6}
body.wwb .widget-b{background:#fff}
body.wwb .widget-b .calendly-inline-widget{min-width:320px;height:800px}
body.wwb .widget-b iframe{display:block;width:100%;border:0}

/* faq */
body.wwb .faqwrap{max-width:880px;margin:0 auto}
body.wwb .fq{background:#fff;border:1px solid var(--border-strong);margin-bottom:12px}
body.wwb .fq summary{list-style:none;cursor:pointer;padding:var(--s4);display:flex;gap:var(--s3);
  align-items:center;font-weight:800;font-size:var(--t-md)}
body.wwb .fq summary::-webkit-details-marker{display:none}
body.wwb .fq summary span{flex:1}
body.wwb .fq summary i{width:15px;height:15px;position:relative;flex:none}
body.wwb .fq summary i::before, body.wwb .fq summary i::after{content:"";position:absolute;background:var(--orange-dk);
  transition:transform 200ms var(--ease-out)}
body.wwb .fq summary i::before{left:0;right:0;top:6.5px;height:2px}
body.wwb .fq summary i::after{top:0;bottom:0;left:6.5px;width:2px}
body.wwb .fq[open] summary i::after{transform:scaleY(0)}
body.wwb .fq .ans{padding:0 var(--s4) var(--s4);color:var(--muted);line-height:1.7}
body.wwb .fq .src{margin-top:12px;font-size:var(--t-xs)}
body.wwb .fq .src a{color:var(--orange-ink);font-weight:700}
@media (hover:hover) and (pointer:fine){body.wwb .fq summary:hover{background:var(--surface)}}

/* final */
body.wwb .final{text-align:center;padding:var(--s9) 0}
body.wwb .final h2{font-size:clamp(28px,3.4vw,42px);max-width:22ch;margin:var(--s2) auto var(--s3);
  font-weight:500}
body.wwb .final h2 em{font-style:normal;color:var(--gold);display:block}
body.wwb .final .lede{max-width:56ch;margin:0 auto var(--s6)}

/* legal + footer */
/* live carries this as fine print under the CTA button, on the same navy
   ground, not as a band of its own between the CTA and the footer */
body.wwb .fineprint{font-size:12.5px;line-height:1.6;color:#AFC4DD;max-width:476px;
  margin:26px auto 0;text-align:center}
/* Footer, matched to the live page: lighter navy ground, two tidy link columns
   rather than one long list, and much tighter vertical spacing. */
body.wwb .ft{background:#0A2440;color:#AFC4DD;padding:var(--s5) 0 0}
body.wwb .foot-grid{display:flex;gap:var(--s3);align-items:flex-start;flex-wrap:wrap}
body.wwb .foot-grid>:first-child{flex:1 1 340px;min-width:0}
body.wwb .foot-brand{display:block}
body.wwb .foot-brand-logo{width:100%;max-width:150px;height:auto}
body.wwb .foot-tag{margin-top:14px;font-size:var(--t-sm);line-height:1.5;max-width:34ch;color:#AFC4DD}
body.wwb .foot-links{display:flex;gap:var(--s5);flex:none}
body.wwb .foot-col{display:flex;flex-direction:column}
body.wwb .foot-col b{color:#fff;font-size:13px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;margin-bottom:12px}
body.wwb .foot-col a{color:#AFC4DD;text-decoration:none;font-size:var(--t-sm);line-height:1.6;
  padding:3px 0;transition:color 180ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){body.wwb .foot-col a:hover{color:#fff}}
body.wwb .foot-bot{display:flex;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;
  margin-top:34px;padding-top:20px;border-top:1px solid rgba(255,255,255,.12);
  font-size:12.5px;color:#AFC4DD;padding-bottom:76px}
@media (max-width:620px){
  body.wwb .foot-links{gap:var(--s4)}
  body.wwb .foot-grid{gap:var(--s5)}
}

/* sticky ask. LAST in the container on purpose: a bottom-sticky element only
   pins when its flow position sits below the fold. */
body.wwb .stickybar{position:sticky;bottom:0;z-index:70;background:rgba(2,24,45,.97);color:#fff;
  border-top:3px solid var(--orange);padding:12px var(--s5)}
body.wwb .sb-in{max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap}
body.wwb .sb-in img{width:44px;height:44px;border-radius:50%;object-fit:cover;object-position:50% 42%;flex:none}
body.wwb .sb-txt{font-size:var(--t-sm);line-height:1.4;margin-right:auto}
body.wwb .sb-txt b{display:block;font-size:var(--t-base)}
body.wwb .sb-txt span{color:var(--on-ink-muted)}
body.wwb .stickybar .btn{padding:13px 26px;font-size:19px}

/* Scroll animation, CSS only. Guarded by @supports, so a browser without
   animation-timeline shows plain static sections rather than blank ones.
   There is no JS path here on purpose. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    @keyframes enter{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
    @keyframes enterL{from{opacity:0;transform:translateX(-26px)}to{opacity:1;transform:none}}
    @keyframes enterR{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
    @keyframes growIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
    body.wwb .story > div, body.wwb .quote, body.wwb .brian-ph, body.wwb .brian > div:last-child, body.wwb .wcol, body.wwb .fitbox, body.wwb .step, body.wwb .testi, body.wwb .widget, body.wwb .statrow .i, body.wwb .book-checks li, body.wwb .sec-head, body.wwb .converge, body.wwb .mrow{
      animation:enter linear both;
      animation-timeline:view();
      animation-range:entry 4% cover 26%;
    }
    body.wwb .track.shop{animation:enterL linear both;animation-timeline:view();animation-range:entry 4% cover 24%}
    body.wwb .track.sys{animation:enterR linear both;animation-timeline:view();animation-range:entry 4% cover 24%}
    body.wwb .proof-row, body.wwb .datarow{animation:enter linear both;animation-timeline:view();animation-range:entry 2% cover 20%}
    /* the fit and skip rows arrive one after another so the two lists read as
       a comparison being made, not two blocks appearing */
    body.wwb .fitbox li{animation:enterL linear both;animation-timeline:view();animation-range:entry 2% cover 22%}
    body.wwb .fitbox.no li{animation-name:enterR}
    body.wwb .fitbox li:nth-child(2){animation-range:entry 5% cover 25%}
    body.wwb .fitbox li:nth-child(3){animation-range:entry 8% cover 28%}
    body.wwb .fitbox li:nth-child(4){animation-range:entry 11% cover 31%}
    body.wwb .fitbox .foot{animation:enter linear both;animation-timeline:view();animation-range:entry 14% cover 34%}
    body.wwb .fitbox h3 .ic{animation:growIn linear both;animation-timeline:view();animation-range:entry 0% cover 18%}
    /* the timeline rule draws itself, then the discs pop in one after another */
    body.wwb .steps::before{animation:drawX linear both;animation-timeline:view();animation-range:entry 4% cover 30%}
    @keyframes drawX{from{transform:scaleX(0)}to{transform:scaleX(1)}}
    body.wwb .step .disc{animation:popIn linear both;animation-timeline:view();animation-range:entry 6% cover 26%}
    @keyframes popIn{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:none}}
    body.wwb .step:nth-child(2) .disc{animation-range:entry 10% cover 30%}
    body.wwb .step:nth-child(3) .disc{animation-range:entry 14% cover 34%}
    body.wwb .steps-end{animation:enter linear both;animation-timeline:view();animation-range:entry 8% cover 32%}
    body.wwb .logo-panel img{animation:growIn linear both;animation-timeline:view();animation-range:entry 6% cover 30%}
    /* the vertical rule between the two tracks draws itself as you scroll */
    body.wwb .tracks::before{animation:drawLine linear both;animation-timeline:view();animation-range:entry 0% cover 40%}
    @keyframes drawLine{from{transform:scaleY(0)}to{transform:scaleY(1)}}
    body.wwb .converge .vee{animation:drawLine linear both;animation-timeline:view();animation-range:entry 10% cover 46%}
  }
}
/* the counter animates only once JS confirms it can; the final figure is in
   the HTML, so it reads correctly with scripting off */
body.wwb .count{font-variant-numeric:tabular-nums}

/* hover polish, gated so a tap never sticks it */
@media (hover:hover) and (pointer:fine){
  body.wwb .btn-primary{position:relative;overflow:hidden}
  body.wwb .statrow .i{transition:transform 240ms var(--ease-out)}
  body.wwb .statrow .i:hover{transform:translateY(-4px)}
  body.wwb .fq summary i{transition:transform 240ms var(--ease-out)}
  body.wwb .fq summary:hover i{transform:rotate(90deg)}
}

/* reduced motion: gentler, never zero */
@media (prefers-reduced-motion:reduce){
  body.wwb .hdr-menu, body.wwb .nav-toggle,
  body.wwb .nav-toggle__bars,
  body.wwb .nav-toggle__bars::before,
  body.wwb .nav-toggle__bars::after{transition:none}
  body.wwb{scroll-behavior:auto}
  body.wwb .statrow .i:hover{transform:none}
  body.wwb .fq summary i::before, body.wwb .fq summary i::after{transition:none}
  body.wwb .hero-arc, body.wwb .hero-ring, body.wwb .hero-sweep, body.wwb #story .reel{animation:none}
  body.wwb .proof::after{animation:none}
  body.wwb .hero .eyebrow, body.wwb .hero h1, body.wwb .hero-sub, body.wwb .hero-cta, body.wwb .hero-trust, body.wwb .proof{
    animation-duration:1ms;animation-delay:0ms}
}

/* ------------------------------------------------------------ responsive */
@media (max-width:1080px){
  body.wwb .hero-in, body.wwb .story, body.wwb .brian, body.wwb .book-grid{grid-template-columns:1fr;gap:var(--s6)}
  body.wwb .book-grid > :first-child{position:static;top:auto}
  body.wwb .brian-ph{max-width:400px}
  body.wwb .brian-ph{padding:0 14px 14px 0}
  body.wwb .brian-ph::after{right:0;bottom:0;left:14px;top:14px}
}
@media (max-width:900px){
  body.wwb .tracks{grid-template-columns:1fr;gap:var(--s7)}
  body.wwb .tracks::before{display:none}
  body.wwb .converge .vee{height:var(--s5)}
}
@media (max-width:820px){
  /* A menu button instead of a scrolling chip row. The panel carries the phone
     number and the call-to-action as well, so nothing that used to be one tap
     away has been buried. If the script never runs, `js-nav` is never added and
     the panel simply stays open in the flow — a hidden nav with no working
     opener would strand a mobile visitor. */
  body.wwb .hdr-in{flex-wrap:wrap;gap:var(--s3) var(--s4);padding:12px 20px}
  body.wwb .hdr.js-nav .nav-toggle{display:inline-flex}

  body.wwb .hdr-menu{order:3;width:100%;margin-left:0;
    flex-direction:column;align-items:stretch;gap:0}
  body.wwb .nav{flex-direction:column;gap:0;margin-left:0;width:100%;font-size:var(--t-md)}
  body.wwb .nav a{padding:14px 2px;border-bottom:1px solid var(--border);white-space:normal}
  body.wwb .hdr-tel{margin-left:0;padding:14px 2px;border-bottom:1px solid var(--border)}
  body.wwb .hdr-cta{display:block;margin:14px 0 4px;padding:14px 16px;text-align:center;
    font-size:var(--t-sm)}

  body.wwb .hdr.js-nav .hdr-menu{max-height:0;opacity:0;visibility:hidden;overflow:hidden;
    transition:max-height 260ms var(--ease-out),opacity 180ms var(--ease-out),
      visibility 260ms var(--ease-out)}
  body.wwb .hdr.js-nav .hdr-menu.is-open{max-height:78vh;opacity:1;visibility:visible;
    overflow-y:auto;margin-top:4px;border-top:1px solid var(--border)}

  /* The ask stays on screen at all times, so it never depends on the
     menu being opened first. The panel's own copy is hidden here. */
  body.wwb .hdr-strip{display:block;padding:10px 20px;background:var(--surface);
    border-top:1px solid var(--border)}
  body.wwb .hdr-strip__cta{display:block;padding:14px 16px;background:var(--orange);color:#fff;
    font-weight:700;font-size:var(--t-sm);text-transform:uppercase;letter-spacing:.02em;
    text-align:center;text-decoration:none;
    transition:background-color 160ms var(--ease-out)}
  body.wwb .hdr-strip__cta:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
  body.wwb .hdr-menu .hdr-cta{display:none}
}
@media (max-width:760px){
  body.wwb .sec{padding:var(--s7) 0}
  body.wwb .hero{padding:var(--s7) 0 var(--s6)}
  body.wwb .fit-grid, body.wwb .steps{grid-template-columns:1fr}
    body.wwb .sb-txt{display:none}
  body.wwb .stickybar .btn{flex:1}
  body.wwb .testi{padding:var(--s5) var(--s4)}
  body.wwb .brian .line{font-size:var(--t-lg)}
}

/* ===========================================================================
   Compatibility with copy the client has already saved.

   The previous design marked highlighted words with .hl-o / .hl-b / .hl-g, and
   those spans are sitting in the saved heading fields right now. This design
   uses .fig instead. Rather than ask the client to re-edit every heading, the
   old classes are given the same treatment, so saved copy keeps its emphasis.
   =========================================================================== */
body.wwb .hl-o{color:var(--orange);font-weight:700}
body.wwb .hl-b{color:var(--navy);font-weight:700}
body.wwb .hl-g{color:var(--gold);font-weight:700}
body.wwb .hero h1 .hl-o, body.wwb .hero h1 .hl-b, body.wwb .hero h1 .hl-g{white-space:nowrap}

/* ===========================================================================
   Pieces the page needs that the design file did not include.

   The video is switched off at the moment but is coming back, so it is styled
   here rather than left to inherit nothing the day it is switched on. The rest
   are small states the editor can produce: a company with no logo uploaded, a
   booking widget with nothing pasted in yet, a second closing button.
   =========================================================================== */

/* Meet Brian: the video, below his row. ----------------------------------- */
body.wwb .brian-video{margin-top:var(--s8)}
body.wwb .brian-video .sec-head{margin-bottom:var(--s4)}
body.wwb .video-frame{position:relative;max-width:900px;margin:0 auto;
  border:1px solid var(--border);background:var(--ink);overflow:hidden}
body.wwb .video-play{display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;
  position:relative;line-height:0}
body.wwb .video-play:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
body.wwb .video-poster{width:100%;height:auto;display:block;
  transition:transform .5s var(--ease-out),opacity .3s ease}
@media (hover:hover) and (pointer:fine){
  body.wwb .video-play:hover .video-poster{transform:scale(1.03);opacity:.86}
}
body.wwb .video-btn{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:84px;height:84px;border-radius:50%;background:var(--orange);color:#fff;
  display:grid;place-items:center;box-shadow:var(--shadow-lg);
  transition:transform .18s var(--ease-out),background .18s ease}
body.wwb .video-btn svg{margin-left:5px}
@media (hover:hover) and (pointer:fine){
  body.wwb .video-play:hover .video-btn{transform:translate(-50%,-50%) scale(1.08);background:var(--orange-dk)}
}
body.wwb .video-frame iframe{display:block;width:100%;aspect-ratio:16/9;height:auto;border:0}
body.wwb .video-caption{margin:var(--s2) auto 0;max-width:900px;font-size:var(--t-sm);
  color:var(--muted);text-align:center}
@media (max-width:640px){ body.wwb .video-btn{width:62px;height:62px} }

/* A company card whose logo has not been uploaded yet. --------------------- */
body.wwb .wlogo-text{font-family:var(--sans);font-weight:700;font-size:38px;color:var(--accent,var(--navy));
  line-height:1;display:block}

/* Booking widget with no embed pasted in, and the link-style variant. ------ */
body.wwb .widget-note{margin:0;padding:var(--s4);font-size:var(--t-sm);color:var(--muted);text-align:center}
body.wwb .widget-b .btn{margin:var(--s4) auto;display:inline-flex}

/* Closing section: the optional second link beside the button. ------------- */
body.wwb .final-cta{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center;justify-content:center;
  margin-top:var(--s5)}
body.wwb .tlink.light{color:var(--on-ink)}
@media (hover:hover) and (pointer:fine){ body.wwb .tlink.light:hover{color:#fff} }

/* Header phone, shown only when the client switches the number on. --------- */
body.wwb .hdr-tel{white-space:nowrap}