/* X Gens Growth · site styles, 14 Oct 2026 rebuild on Hamish's direction: black, white and grey only (13 Oct call),
   Host Grotesk and IBM Plex Mono, his logo and photos. Motion is the Our Story kind: sections rise in as they arrive,
   one line fills down the story and the timeline as the reader scrolls, and the client names roll. No 3D strip. */
@font-face{font-family:"Host Grotesk";font-style:normal;font-weight:300 800;font-display:swap;src:url(/assets/fonts/host-grotesk-latin.woff2?v=mw079qvz) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/ibm-plex-mono-400-latin.woff2?v=mw079qvz) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/ibm-plex-mono-500-latin.woff2?v=mw079qvz) format("woff2")}
:root{
  --bg:#F7F7F5;
  --alt:#EEEEEB;
  --white:#FFFFFF;
  --ink:#0A0A0A;
  --ink-2:#333436;
  --muted:#5A5D60;
  --soft:#A9ACAF;
  --line:#E3E4E4;
  --line-strong:#CDD0D1;
  --dark:#0A0A0A;
  --dark-2:#171718;
  --on-dark:#F7F7F5;
  --on-dark-2:#A9ACAF;
  --dark-line:#2C2D2F;
  --rail:min(1200px, calc(100vw - 48px));
  --narrow:min(880px, calc(100vw - 48px));
  --nav:72px;
  --sans:"Host Grotesk", ui-sans-serif, system-ui, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;
  --out:cubic-bezier(.16,1,.3,1);
  --shadow:0 1px 2px rgba(10,10,10,.05), 0 12px 32px rgba(10,10,10,.08);
  --pad:112px;
  --z-head:40; --z-stick:50; --z-pop:60; --z-intro:1000;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:96px;scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}
html.intro-on body{overflow:hidden}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
img{display:block;max-width:100%;height:auto}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.dark :focus-visible,.foot :focus-visible,.stats :focus-visible{outline-color:var(--on-dark)}
.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}
.skip{position:absolute;left:12px;top:12px;z-index:var(--z-intro);background:var(--ink);color:var(--on-dark);padding:10px 16px;border-radius:999px;transform:translateY(-200%);transition:transform .2s var(--out)}
.skip:focus{transform:none}
.in{width:var(--rail);margin-inline:auto}
.narrow{width:var(--narrow)}
.center{text-align:center}
.center .ctas{justify-content:center}

/* type */
h1,h2,h3,h4{text-wrap:balance}
p{text-wrap:pretty}
.h2{font-weight:520;font-size:clamp(32px,3.6vw,48px);line-height:1.06;letter-spacing:-.03em;margin-bottom:40px}
.h3{font-weight:520;font-size:clamp(24px,2.3vw,30px);line-height:1.15;letter-spacing:-.02em}
.h4{font-weight:560;font-size:21px;line-height:1.25;letter-spacing:-.012em}
.label{font-family:var(--mono);font-size:12px;letter-spacing:.09em;line-height:1.3;color:var(--muted);text-transform:uppercase}
.lead{font-size:19px;line-height:1.6;color:var(--ink-2)}
.lead+.lead{margin-top:14px}
.prose p{font-size:18px;line-height:1.7;color:var(--ink-2);max-width:66ch}
.prose p+p{margin-top:18px}
.proof{font-size:15px;color:var(--muted)}
.proof b{font-weight:560;color:var(--ink)}
.ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}

/* buttons: one pill. The primary is large and filled with a grey arrow tile, the secondary smaller and outlined (Brief 3) */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;font-weight:540;white-space:nowrap;border:0;cursor:pointer;transition:background-color .2s ease,border-color .2s ease,color .2s ease,transform .14s var(--out)}
.btn-1{height:56px;font-size:16px;background:var(--ink);color:var(--on-dark);padding:0 62px 0 26px}
.btn-1 .tile{position:absolute;right:7px;top:7px;width:42px;height:42px;border-radius:999px;background:var(--muted);color:var(--white);display:grid;place-items:center;transition:transform .25s var(--out),background-color .2s ease}
.btn-1 .tile svg{width:16px;height:16px}
.btn-1.inv{background:var(--on-dark);color:var(--ink)}
.btn-2{height:48px;font-size:15px;padding:0 22px;border:1px solid var(--line-strong);background:var(--white);color:var(--ink)}
.dark .btn-2,.btn-2.inv{background:transparent;border-color:rgba(247,247,245,.32);color:var(--on-dark)}
.btn:active,.cta-sm:active,.menu-btn:active,.stick:active{transform:scale(.97)}
.btn:disabled{opacity:.45;cursor:not-allowed}

/* announcement bar */
.announce{background:var(--ink);color:var(--on-dark-2);font-size:13.5px;line-height:1.35;text-align:center;padding:10px 16px;position:relative;z-index:var(--z-head)}
.announce b{color:var(--on-dark);font-weight:600}
.announce a span{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}

/* header: floats as a white pill once the page moves */
.top{position:sticky;top:0;z-index:var(--z-head)}
.nav{position:relative;height:var(--nav);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding-inline:20px;border-radius:999px;transition:transform .35s var(--out),background-color .25s ease,box-shadow .25s ease}
.top.float .nav{transform:translateY(10px);background:var(--white);box-shadow:var(--shadow)}
.brand{justify-self:start;display:block}
.brand-logo{height:32px;width:auto}
.links{display:flex;gap:30px;font-size:15px;color:var(--ink-2)}
.links>.plain,.mlink{position:relative;display:inline-flex;align-items:center;gap:6px;padding-block:6px;background:none;border:0;font:inherit;color:inherit;cursor:pointer;transition:color .2s ease}
.links>.plain::after,.mlink::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .25s var(--out)}
.mlink svg{width:12px;height:12px;transition:transform .25s var(--out)}
.mlink[aria-expanded="true"] svg{transform:rotate(180deg)}
.links>.plain[aria-current],.mlink[aria-current],.mlink[aria-expanded="true"]{color:var(--ink)}
.links>.plain[aria-current]::after,.mlink[aria-current]::after,.mlink[aria-expanded="true"]::after{transform:scaleX(1)}
.mi{display:contents}
.mega{position:absolute;left:0;right:0;top:calc(100% + 12px);z-index:var(--z-pop);display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:14px;padding:14px;background:var(--white);border-radius:24px;box-shadow:var(--shadow);color:var(--ink);font-size:16px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s ease,transform .28s var(--out),visibility 0s linear .28s}
.mega.open{opacity:1;visibility:visible;transform:none;transition:opacity .18s ease,transform .28s var(--out),visibility 0s}
.mega-list{display:flex;flex-direction:column;padding:20px 22px 18px}
.mega-list ul{margin-top:14px;border-top:1px solid var(--line)}
.mega-list li a{display:grid;grid-template-columns:40px minmax(0,1fr) 22px;align-items:center;gap:10px;padding:16px 6px 16px 2px;border-bottom:1px solid var(--line);font-size:19px;line-height:1.2;letter-spacing:-.012em}
.mega-list .k{font-family:var(--mono);font-size:12px;color:var(--muted)}
.mega-list .go{display:grid;place-items:center;width:22px;height:22px;opacity:0;transform:translateX(-6px);transition:opacity .2s ease,transform .25s var(--out)}
.mega-list .go svg{width:14px;height:14px}
.mega-list a.on .go,.mega-list a:focus-visible .go{opacity:1;transform:none}
.mega-list a.on .k{color:var(--ink)}
.mega-cta{margin-top:auto;padding-top:22px}
.mega-art{position:relative;min-height:340px;border-radius:16px;overflow:hidden;background:var(--alt)}
.mega-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05)}
.nav-end{justify-self:end;display:flex;align-items:center;gap:8px}
.cta-sm{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 18px;border-radius:999px;background:var(--ink);color:var(--on-dark);font-size:15px;font-weight:540;white-space:nowrap;transition:background-color .2s ease,transform .14s var(--out)}
.cta-sm svg{width:14px;height:14px}
.menu-btn{position:relative;display:none;width:44px;height:44px;border-radius:999px;border:1px solid var(--line-strong);background:var(--white);align-items:center;justify-content:center;cursor:pointer}
.menu-btn svg{width:16px;height:16px}
.menu{display:none}

/* opening sequence, as on Hamish's site: the X mark spins in, "Built From Inside", then the full logo holds */
.intro{position:fixed;inset:0;z-index:var(--z-intro);background:var(--dark);display:grid;place-items:center;animation:introSelf .5s ease 5.6s forwards}
.intro.out{animation:introOut .45s ease forwards}
.i-stage{display:grid;place-items:center;color:#fff;text-align:center}
.i-stage>*{grid-area:1/1;opacity:0}
.i-mark{width:104px;height:auto;animation:introSpin 2.1s ease-in-out forwards}
.i-tag{font-weight:600;font-size:clamp(24px,4vw,36px);letter-spacing:-.01em;animation:introStep 1.3s ease 1.8s forwards}
.i-logo{width:clamp(240px,42vw,460px);height:auto;animation:introIn 1s ease 3s forwards}
.i-skip{position:absolute;bottom:26px;left:0;right:0;text-align:center;font-size:12px;color:rgba(255,255,255,.5)}
@keyframes introSpin{0%{opacity:0;transform:perspective(900px) rotateY(0deg) scale(.9)}18%{opacity:1}80%{opacity:1;transform:perspective(900px) rotateY(360deg) scale(1)}100%{opacity:0;transform:perspective(900px) rotateY(360deg) scale(1)}}
@keyframes introStep{0%{opacity:0;transform:translateY(6px)}20%{opacity:1;transform:none}80%{opacity:1}100%{opacity:0;transform:translateY(-6px)}}
@keyframes introIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes introOut{to{opacity:0;visibility:hidden}}
@keyframes introSelf{to{opacity:0;visibility:hidden;pointer-events:none}}

/* hero: Hamish's two questions either side of one line, each with its own button (a new option, no founders) */
.hero{padding:88px 0 80px}
.qa-hero{display:grid;grid-template-columns:minmax(0,1fr) 1px minmax(0,1fr);column-gap:clamp(32px,5vw,72px);font-weight:inherit}
.qa-hero .side{display:flex;flex-direction:column;gap:14px}
.qa-hero .s-pt{text-align:right;align-items:flex-end}
.qa-hero .hq{font-size:clamp(18px,1.6vw,21px);font-weight:440;letter-spacing:-.005em;color:var(--muted)}
.qa-hero .ha{font-size:clamp(34px,3.9vw,54px);font-weight:600;line-height:1.04;letter-spacing:-.032em;color:var(--ink);max-width:14ch}
.qa-hero .s-re .ha{max-width:17ch}
.spine{display:block;width:1px;background:var(--ink);transform-origin:top;animation:spine 1.1s var(--out) .2s both}
.hero-ctas{display:grid;grid-template-columns:minmax(0,1fr) 1px minmax(0,1fr);column-gap:clamp(32px,5vw,72px);margin-top:36px}
.hero-ctas .c-pt{justify-self:end}
.hero-ctas .c-re{grid-column:3;justify-self:start;align-self:center}
.hero-proof{margin-top:48px;text-align:center}
.hero .side,.hero-ctas>div,.hero-proof{animation:rise .8s var(--out) both}
.hero .s-pt,.hero-ctas .c-pt{animation-name:fromLeft}
.hero .s-re,.hero-ctas .c-re{animation-name:fromRight}
.hero-ctas>div{animation-delay:.15s}.hero-proof{animation-delay:.3s}
@keyframes spine{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes fromLeft{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none}}
@keyframes fromRight{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
html.intro-on .hero *{animation-play-state:paused}

/* stat bar: a dark band straight under the hero, a thin line left of each stat (Brief 3) */
.stats{background:var(--dark);color:var(--on-dark);padding:56px 0 48px}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--on-dark-2)}
.stat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:28px}
.stat-grid li{border-left:1px solid var(--dark-line);padding:4px 0 4px 24px}
.stat-grid .n{display:block;font-weight:540;font-size:clamp(44px,5.4vw,76px);line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.stat-grid .lb{display:block;margin-top:14px;max-width:26ch;font-family:var(--mono);font-size:12.5px;letter-spacing:.08em;line-height:1.5;text-transform:uppercase;color:var(--on-dark-2)}
.stat-date{margin-top:32px;font-size:13px;color:var(--on-dark-2)}

/* the rolling client and partner names */
.mq{overflow:hidden;border-bottom:1px solid var(--line);background:var(--bg);-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mq-track{display:flex;width:max-content;animation:mq 46s linear infinite}
.mq:hover .mq-track{animation-play-state:paused}
.mq-row{display:flex;align-items:center;padding:30px 0}
.mq-row li{display:flex;align-items:center;font-size:22px;font-weight:560;letter-spacing:-.015em;color:var(--ink-2);white-space:nowrap}
.mq-row li::after{content:"";width:6px;height:6px;margin:0 36px;border-radius:50%;background:var(--soft)}
@keyframes mq{to{transform:translateX(-50%)}}

/* sections */
.sec{padding:var(--pad) 0;background:var(--bg)}
.sec.tight{padding:56px 0}
.sec.alt{background:var(--alt)}
.sec.dark{background:var(--dark);color:var(--on-dark)}
.dark .lead,.dark .prose p{color:var(--on-dark-2)}
.dark .label{color:var(--on-dark-2)}

/* reveal: sections rise in as they arrive (Hamish's Our Story page) */
.js .rv{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s var(--out)}
.js .rv.seen{opacity:1;transform:none}

/* page header for inner pages */
.phero{padding:96px 0 72px}
.phero h1{font-weight:560;font-size:clamp(38px,4.6vw,60px);line-height:1.04;letter-spacing:-.034em}
.phero .lead{margin:24px auto 0;max-width:62ch}
.phero .ctas{justify-content:center}
.phero .proof{margin-top:24px}

/* cards */
.card{display:flex;flex-direction:column;gap:12px;padding:32px;border-radius:20px;background:var(--white);border:1px solid var(--line)}
.card p{font-size:16.5px;line-height:1.6;color:var(--ink-2)}
.card .label{color:var(--muted)}
.card-cta{margin-top:auto;padding-top:16px}
.duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.duo .card{padding:40px;min-height:360px}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.lines{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:-8px;text-align:left}
.lines p{padding:24px 28px;border-radius:16px;background:var(--white);border:1px solid var(--line);font-size:17px;line-height:1.55;color:var(--ink-2)}

/* quotes (LinkedIn recommendations) */
.quote{padding-left:20px;border-left:1px solid var(--ink);font-size:16px;line-height:1.6;color:var(--ink-2)}
.quote p+p{margin-top:12px}
.quote footer{margin-top:12px;font-family:var(--mono);font-size:12px;line-height:1.45;color:var(--muted)}
.quote.big{border:0;padding:0;font-size:clamp(20px,2vw,26px);line-height:1.45;letter-spacing:-.012em;color:var(--ink)}
.quote.big footer{font-size:12.5px}
.card .quote{margin-top:8px}
.fcard .quote{margin-top:20px;font-size:15px}

/* results: dark cards, the number first */
.cases{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.case{display:flex;flex-direction:column;gap:20px;padding:32px;border-radius:20px;background:var(--dark);color:var(--on-dark)}
.case.wide{grid-column:1/-1}
.case-h .big{display:block;font-weight:540;font-size:clamp(48px,5vw,68px);line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.case-h .what{display:block;margin-top:10px;font-size:20px;line-height:1.3;color:var(--on-dark)}
.case-m{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.case-m .who{font-weight:600}
.case-m .tag{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;padding:5px 11px;border:1px solid rgba(247,247,245,.3);border-radius:999px;color:var(--on-dark-2)}
.case .quote{border-left-color:rgba(247,247,245,.4);color:var(--on-dark-2);max-width:72ch}
.case .quote footer{color:var(--soft)}

/* founders strip on the homepage */
.fstrip{display:flex;justify-content:center;gap:32px;flex-wrap:wrap}
.fstrip figure{width:240px}
.fstrip img{width:240px;height:240px;object-fit:cover;border-radius:20px;filter:grayscale(1)}
.fstrip figcaption{margin-top:16px;font-size:15px;line-height:1.45;color:var(--muted)}
.fstrip figcaption b{display:block;font-size:18px;font-weight:600;color:var(--ink)}
.more,.li{display:inline-block;margin-top:32px;font-size:15px;font-weight:540;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.li{margin-top:14px}

/* services, steps */
.svc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.svc li{display:flex;flex-direction:column;gap:12px;padding:32px 0 0;border-top:1px solid var(--ink)}
.svc p:not(.label){font-size:16.5px;line-height:1.6;color:var(--ink-2)}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.steps li{display:flex;flex-direction:column;gap:10px;padding-top:24px;border-top:1px solid var(--line-strong)}
.steps .k{font-family:var(--mono);font-size:13px;color:var(--muted)}
.steps p:not(.k){font-size:16px;line-height:1.6;color:var(--ink-2)}
.terms{margin-top:40px;font-size:15px;color:var(--muted)}

/* faq */
.faq{border-top:1px solid var(--line-strong)}
.faq details{border-bottom:1px solid var(--line-strong)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:24px 0;font-size:20px;font-weight:520;letter-spacing:-.01em;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq .pm{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;border:1px solid var(--line-strong);transition:transform .25s var(--out)}
.faq .pm svg{width:14px;height:14px}
.faq details[open] .pm{transform:rotate(45deg)}
.faq .a{padding:0 0 26px;max-width:70ch;font-size:17px;line-height:1.65;color:var(--ink-2)}

/* final call to action */
.final{border-top:1px solid var(--line)}
.final .h2{margin-bottom:20px}

/* about: the founder timeline in a dark band; one line down the centre fills as the reader scrolls */
.tlsec{padding-bottom:120px}
.tl-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px;align-items:end;margin-bottom:72px}
.tl-head .h2{margin:0;font-size:clamp(36px,4.4vw,58px)}
.tl-legend{display:grid;grid-template-columns:minmax(0,1fr) 120px minmax(0,1fr);font-family:var(--mono);font-size:12.5px;letter-spacing:.1em;color:var(--on-dark-2);margin-bottom:24px}
.tl-legend span:first-child{text-align:right;padding-right:28px}
.tl-legend span:last-child{grid-column:3;padding-left:28px}
.tl,.st{position:relative}
.tl-line,.st-line{position:absolute;top:0;bottom:0;left:50%;width:2px;margin-left:-1px;background:var(--dark-line)}
.tl-line i,.st-line i{display:block;height:100%;background:var(--on-dark);transform:scaleY(0);transform-origin:top}
.tl ol{display:grid;gap:56px;padding:12px 0}
.tl-item{display:grid;grid-template-columns:minmax(0,1fr) 120px minmax(0,1fr);align-items:start}
.tl-yr{grid-column:2;grid-row:1;justify-self:center;position:relative;z-index:1;padding:6px 10px;background:var(--dark);font-weight:700;font-size:28px;line-height:1;letter-spacing:-.02em;color:#5f6265;transition:color .35s ease}
.tl-yr.lit{color:var(--on-dark)}
.tl-card{grid-row:1;max-width:440px}
.tl-l .tl-card{grid-column:1;justify-self:end;text-align:right;padding-right:28px}
.tl-r .tl-card{grid-column:3;padding-left:28px}
.tl-c .tl-card{grid-column:1/-1;grid-row:2;justify-self:center;text-align:center;margin-top:16px;padding:20px 24px;background:var(--dark-2);border:1px solid var(--dark-line);border-radius:16px;position:relative;z-index:1}
.tl-who{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--on-dark-2)}
.tl-card h3{margin-top:6px;font-weight:700;font-size:24px;line-height:1.05;letter-spacing:-.005em;text-transform:uppercase}
.tl-city{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font-family:var(--mono);font-size:12.5px;color:var(--on-dark-2)}
.tl-city svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.8}
.tl-card>p:not(.tl-who):not(.tl-city){margin-top:10px;font-size:16px;line-height:1.55;color:var(--on-dark-2)}
.tl-photo{margin-top:16px;width:100%;max-width:320px;border-radius:12px;filter:grayscale(1)}
.tl-l .tl-photo{margin-left:auto}
.tl-c .tl-photo{margin-inline:auto}

/* our story strip on /about */
.sstrip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.sstrip .card{transition:border-color .2s ease,transform .25s var(--out)}
.sstrip .yr{font-family:var(--mono);font-size:13px;color:var(--muted)}
.sstrip .card>p{font-size:15.5px}
.mini-stat{margin-top:auto;padding-top:16px;border-top:1px solid var(--line)}
.mini-stat b{display:block;font-weight:600;font-size:36px;line-height:1;letter-spacing:-.03em}
.mini-stat span{display:block;margin-top:8px;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
#our-story .ctas{justify-content:center;margin-top:40px}

/* team */
.founders{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.fcard{display:grid;grid-template-columns:150px minmax(0,1fr);gap:28px;align-items:start;padding:28px;border-radius:20px;background:var(--white);border:1px solid var(--line)}
.f-photo{width:150px;height:150px;object-fit:cover;border-radius:16px;filter:grayscale(1)}
.fcard h3{font-weight:560;font-size:26px;line-height:1.1;letter-spacing:-.02em}
.fcard .role{margin-top:6px;font-family:var(--mono);font-size:12.5px;color:var(--muted)}
.fcard .bio{margin-top:14px;font-size:15.5px;line-height:1.6;color:var(--ink-2)}
.crew-h{margin:56px 0 20px;font-weight:540;font-size:22px;letter-spacing:-.012em}
.crew{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.ccard{display:grid;grid-template-columns:64px minmax(0,1fr);gap:20px;padding:24px;border-radius:20px;background:var(--white);border:1px solid var(--line)}
.c-photo{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--alt);font-weight:500;font-size:24px;color:var(--muted)}
.ccard h4{font-weight:560;font-size:19px}
.ccard .role{font-family:var(--mono);font-size:12px;color:var(--muted);margin-top:4px}
.ccard p:not(.role){margin-top:10px;font-size:15px;line-height:1.55;color:var(--ink-2)}
.values{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.values li{display:flex;flex-direction:column;gap:10px;padding:28px 0 0;border-top:1px solid var(--ink)}
.values b{font-weight:600;font-size:22px;letter-spacing:-.015em}
.values span{font-size:16px;line-height:1.55;color:var(--ink-2)}

/* our story: chapters either side of one line that fills as the reader scrolls */
.st-sec{padding-top:24px}
.st-line{background:var(--line-strong)}
.st-line i{background:var(--ink)}
.st ol{display:grid;gap:64px;padding:8px 0}
.st-node{display:grid;grid-template-columns:minmax(0,1fr) 140px minmax(0,1fr);align-items:start;scroll-margin-top:120px}
.st-yr{grid-column:2;grid-row:1;justify-self:center;position:relative;z-index:1;padding:8px 14px;border-radius:999px;background:var(--bg);border:1px solid var(--line-strong);font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;color:var(--muted);transition:background-color .35s ease,color .35s ease,border-color .35s ease}
.st-yr.lit{background:var(--ink);border-color:var(--ink);color:var(--on-dark)}
.st-card{grid-row:1;padding:32px;border-radius:20px;background:var(--white);border:1px solid var(--line)}
.st-l .st-card{grid-column:1}
.st-r .st-card{grid-column:3}
.st-card .h4{font-size:24px;margin-bottom:16px}
.st-card p{font-size:16.5px;line-height:1.65;color:var(--ink-2)}
.st-card p+p{margin-top:14px}
.st-card a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;color:var(--ink)}
.st-card .quote{margin-top:20px}
.st-learned{margin-top:20px !important;padding-top:18px;border-top:1px solid var(--line)}
.st-learned strong{font-weight:600;color:var(--ink)}
.st-figs{display:grid;gap:12px;margin-top:22px}
.st-figs.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.st-photo{width:100%;max-height:440px;border-radius:12px;object-fit:cover}
.st-figs figcaption{margin-top:8px;font-family:var(--mono);font-size:12px;line-height:1.45;color:var(--muted)}
.st-stats{display:grid;gap:12px;margin:22px 0 4px}
.st-stats.n2,.st-stats.n4{grid-template-columns:repeat(2,minmax(0,1fr))}
.st-stats div{padding:18px;border-radius:14px;background:var(--dark);color:var(--on-dark)}
.st-stats b{display:block;font-weight:600;font-size:40px;line-height:1;letter-spacing:-.035em}
.st-stats span{display:block;margin-top:10px;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;line-height:1.45;text-transform:uppercase;color:var(--on-dark-2)}

/* the forms: up to two questions a screen, a progress line across the top */
.forms .h3{margin-bottom:12px}
.forms .lead{margin-bottom:28px;font-size:17px}
.flow{position:relative;padding:28px 36px 24px;border-radius:24px;background:var(--white);border:1px solid var(--line-strong)}
.fl-top{display:grid;gap:12px}
.fl-count{font-family:var(--mono);font-size:12.5px;color:var(--muted)}
.fl-bar{height:3px;border-radius:3px;background:var(--alt);overflow:hidden}
.fl-bar i{display:block;height:100%;background:var(--ink);transform-origin:left center;transition:transform .45s var(--out)}
.fl-form{padding-top:32px}
.fl-form[hidden]{display:none}
.q{min-width:0;border:0;display:none}
.q.on{display:grid;gap:32px;animation:qIn .38s var(--out) both}
.q.on[data-dir="back"]{animation-name:qBack}
.q-ask{display:block;margin-bottom:14px;font-size:21px;font-weight:520;line-height:1.25;letter-spacing:-.012em;color:var(--ink)}
.part input:not([type=radio]),.part textarea{display:block;width:100%;min-height:56px;padding:12px 2px;border:0;border-bottom:2px solid var(--soft);border-radius:0;background:transparent;font-size:21px;letter-spacing:-.01em;resize:vertical;transition:border-color .15s ease,box-shadow .15s ease}
.part input:not([type=radio]):focus,.part textarea:focus{outline:none;border-bottom-color:var(--ink);box-shadow:0 2px 0 var(--ink)}
.part.bad input:not([type=radio]),.part.bad textarea{border-bottom-color:#B3261E;box-shadow:0 2px 0 #B3261E}
.opts{display:grid;gap:8px}
.opts.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.opt{position:relative;display:grid;grid-template-columns:28px minmax(0,1fr);align-items:center;gap:14px;min-height:54px;padding:10px 14px;border:1px solid var(--line-strong);border-radius:14px;background:var(--bg);cursor:pointer;transition:background-color .15s ease,border-color .15s ease,color .15s ease,transform .12s var(--out)}
.opt input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.opt .k{display:grid;place-items:center;width:28px;height:28px;border:1px solid var(--line-strong);border-radius:8px;background:var(--white);font-family:var(--mono);font-size:12px;color:var(--muted)}
.opt .t{font-size:16px;line-height:1.3}
.opt:has(input:checked){background:var(--ink);border-color:var(--ink);color:var(--on-dark)}
.opt:has(input:checked) .k{background:var(--muted);border-color:var(--muted);color:var(--white)}
.opt:has(input:focus-visible){outline:2px solid var(--ink);outline-offset:3px}
.opt:active{transform:scale(.98)}
.part.bad .opt{border-color:rgba(179,38,30,.55)}
.q-err{display:none;align-items:center;gap:8px;margin-top:12px;font-size:14px;line-height:1.35;color:#B3261E}
.q-err::before,.fl-send-err::before{content:"!";flex:none;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#B3261E;color:var(--white);font-size:12px;font-weight:700;line-height:1}
.part.bad .q-err{display:flex}
.fl-act{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-top:36px}
.fl-act [data-next],.fl-act [data-send]{margin-left:auto}
.fl-back{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 10px 0 6px;border:0;border-radius:10px;background:none;font-size:15px;color:var(--ink-2);cursor:pointer}
.fl-back svg{width:16px;height:16px}
.fl-back[hidden],.fl-act .btn[hidden]{display:none}
.fl-send-err{display:flex;align-items:center;gap:8px;margin-top:16px;font-size:14px;line-height:1.35;color:#B3261E}
.fl-send-err[hidden]{display:none}
.fl-send-err a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.fl-ts iframe{margin-top:16px}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.btn.busy{cursor:progress}
.btn.busy .tile svg{opacity:0}
.btn.busy .tile::after{content:"";position:absolute;width:18px;height:18px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite}
.fl-done{padding:48px 0 24px;outline:none}
.fl-done[hidden]{display:none}
.fl-done svg{width:56px;height:56px}
.fl-done .tick{stroke-dasharray:30;stroke-dashoffset:30;animation:tick .5s var(--out) .1s forwards}
.fl-done-h{margin-top:20px;font-size:30px;font-weight:520;letter-spacing:-.02em}
.fl-done-p{margin-top:6px;font-size:17px;color:var(--ink-2)}
.fl-priv{margin-top:24px;padding-top:18px;border-top:1px solid var(--line);font-size:13.5px;color:var(--muted)}
.fl-priv a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
@keyframes qIn{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
@keyframes qBack{from{opacity:0;transform:translateX(-16px)}to{opacity:1;transform:none}}
@keyframes tick{to{stroke-dashoffset:0}}
@keyframes spin{to{transform:rotate(360deg)}}

/* /apply and /enquire: the founders and the promise beside the form (Hamish's layout) */
.apply{padding:72px 0 112px}
.apply-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:start}
.apply-side h1{margin-top:24px;font-weight:560;font-size:clamp(36px,4vw,54px);line-height:1.04;letter-spacing:-.034em}
.apply-side .lead{margin-top:20px}
.faces{display:flex}
.faces img{width:72px;height:72px;object-fit:cover;border-radius:50%;border:3px solid var(--bg);filter:grayscale(1)}
.faces img+img{margin-left:-14px}
.phero .faces{justify-content:center;margin-bottom:24px}
.ticks{display:grid;gap:14px;margin-top:28px}
.ticks li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;font-size:16.5px;font-weight:520}
.ticks li::before{content:"";width:22px;height:22px;border-radius:50%;background:var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}

/* thank you pages */
.cal{display:grid;place-items:center;min-height:240px;padding:24px;border-radius:20px;border:1px dashed var(--line-strong);background:var(--white);text-align:center;color:var(--muted)}
iframe.cal{display:block;padding:0;border:0}
.after{margin-top:16px;font-size:14px;color:var(--muted);text-align:center}

/* insights */
.articles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.acard{height:100%;transition:border-color .2s ease,transform .25s var(--out)}
.acard .by{margin-top:auto;padding-top:16px;font-weight:560;color:var(--ink)}
.sec .articles+.ctas{justify-content:center;margin-top:40px}

/* contact */
.contact-d{margin-top:32px;text-align:center;font-size:17px;line-height:1.9;color:var(--ink-2)}
.contact-d a{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.contact-d+.ctas{justify-content:center}

/* legal pages and the article template */
.doc h2{margin:40px 0 12px}
.doc a{text-decoration:underline;text-underline-offset:3px}
.byline{display:inline-flex;align-items:center;gap:14px;margin-top:28px;text-align:left}
.by-photo{width:52px;height:52px;border-radius:50%;object-fit:cover}
.by-mono{display:grid;place-items:center;background:var(--alt);font-weight:600}
.byline b{display:block}
.byline .mono{font-family:var(--mono);font-size:13px;color:var(--muted)}

/* footer */
.foot{background:var(--dark);color:var(--on-dark-2);padding:80px 0 32px}
.foot-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,2fr) minmax(0,3fr) minmax(0,3fr);gap:40px}
.foot-logo img{width:150px;height:auto}
.foot-brand p{margin-top:20px;max-width:34ch;font-size:16px;line-height:1.55;color:var(--on-dark)}
.foot-col{display:flex;flex-direction:column;gap:10px;font-size:15px}
.foot-col h3{margin-bottom:6px;font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--on-dark)}
.foot-col a{color:var(--on-dark);overflow-wrap:anywhere}
.foot-col a.u{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.foot-meta{gap:12px;font-size:14px;line-height:1.6}
.foot-meta b{color:var(--on-dark);font-weight:600}
.foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;margin-top:64px;padding-top:24px;border-top:1px solid var(--dark-line);font-size:13px}
.foot-legal{display:flex;flex-wrap:wrap;gap:20px}
.foot-legal a{color:var(--on-dark-2)}

/* the fixed Apply button, bottom right on every page (Brief 3, Hamish's site); it steps aside near a form */
.stick{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:var(--z-stick);display:inline-flex;align-items:center;gap:10px;height:50px;padding:0 6px 0 20px;border-radius:999px;background:var(--ink);color:var(--on-dark);font-size:15px;font-weight:540;box-shadow:0 0 0 2px var(--bg),0 10px 30px rgba(0,0,0,.25);transition:opacity .25s ease,transform .35s var(--out),visibility 0s}
.stick .tile{width:38px;height:38px;border-radius:999px;background:var(--muted);color:var(--white);display:grid;place-items:center}
.stick .tile svg{width:15px;height:15px}
.stick.away{opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .25s ease,transform .35s var(--out),visibility 0s linear .35s}

@media (hover:hover) and (pointer:fine){
  .btn-1:hover .tile,.stick:hover .tile{transform:translateX(3px)}
  .btn-1:hover .tile{background:var(--ink-2)}
  .btn-1.inv:hover{background:var(--white)}
  .btn-2:hover{border-color:var(--ink)}
  .dark .btn-2:hover,.btn-2.inv:hover{border-color:var(--on-dark)}
  .cta-sm:hover{background:var(--ink-2)}
  .links>.plain:hover,.mlink:hover{color:var(--ink)}
  .mega-list a:hover{color:var(--ink)}
  .opt:hover{border-color:var(--ink)}
  .fl-back:hover{color:var(--ink)}
  .sstrip .card:hover,.acard:hover{border-color:var(--ink);transform:translateY(-2px)}
  .faq summary:hover .pm{border-color:var(--ink)}
  .foot-col a:hover,.foot-legal a:hover{color:var(--white)}
  .more:hover,.li:hover{text-decoration-thickness:2px}
}

@media (max-width:1100px){
  .links{gap:22px;font-size:14.5px}
  .sstrip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .founders{grid-template-columns:minmax(0,1fr)}
  .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:960px){
  :root{--pad:88px}
  .links,.cta-sm{display:none}
  .nav{grid-template-columns:1fr auto}
  .menu-btn{display:inline-flex}
  .menu{position:absolute;left:12px;right:12px;top:calc(100% + 10px);display:grid;gap:4px;padding:12px;background:var(--white);border-radius:22px;box-shadow:var(--shadow);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s ease,transform .25s var(--out),visibility 0s linear .25s;max-height:calc(100dvh - 120px);overflow:auto}
  .menu.open{opacity:1;visibility:visible;transform:none;transition:opacity .18s ease,transform .25s var(--out),visibility 0s}
  .menu summary,.menu .solo{display:flex;align-items:center;justify-content:space-between;min-height:52px;padding:0 12px;border-radius:12px;font-size:18px;font-weight:520;cursor:pointer;list-style:none}
  .menu summary::-webkit-details-marker{display:none}
  .menu summary svg{width:14px;height:14px;transition:transform .25s var(--out)}
  .menu details[open] summary svg{transform:rotate(180deg)}
  .menu .sub{display:grid;padding:0 12px 8px}
  .menu .sub a{padding:12px 0;border-bottom:1px solid var(--line);font-size:16px;color:var(--ink-2)}
  .menu-cta{padding:12px}
  .menu-cta .btn{width:100%}
  .duo,.grid2,.cases,.lines{grid-template-columns:minmax(0,1fr)}
  .svc{grid-template-columns:minmax(0,1fr)}
  .steps,.values{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tl-head,.apply-grid{grid-template-columns:minmax(0,1fr);gap:32px}
  .tl-head{margin-bottom:48px}
}
@media (max-width:760px){
  :root{--rail:calc(100vw - 32px);--narrow:calc(100vw - 32px);--pad:72px;--nav:64px}
  .h2{margin-bottom:28px}
  .nav{padding-inline:14px}
  .brand-logo{height:28px}
  .announce{font-size:12.5px;padding:9px 12px}
  /* hero on a phone: the line runs down the left edge, the two answers stack, both buttons straight after */
  .hero{padding:48px 0 48px}
  .qa-hero{grid-template-columns:1px minmax(0,1fr);column-gap:20px;row-gap:28px}
  .qa-hero .spine{grid-column:1;grid-row:1/3}
  .qa-hero .side{grid-column:2}
  .qa-hero .s-pt{text-align:left;align-items:flex-start;grid-row:1}
  .qa-hero .s-re{grid-row:2}
  .qa-hero .ha,.qa-hero .s-re .ha{font-size:clamp(28px,8vw,36px);max-width:none}
  .hero-ctas{display:flex;flex-direction:column;align-items:stretch;gap:10px;margin-top:28px}
  .hero-ctas .btn{width:100%}
  .hero-proof{margin-top:24px;text-align:left}
  .stats{padding:44px 0 40px}
  .stat-grid{grid-template-columns:minmax(0,1fr);gap:24px;margin-top:22px}
  .mq-row{padding:22px 0}
  .mq-row li{font-size:18px}
  .mq-row li::after{margin:0 24px}
  .phero{padding:56px 0 48px}
  .card,.duo .card{padding:24px;min-height:0}
  .case{padding:24px}
  .fstrip figure,.fstrip img{width:150px;height:auto}
  .fstrip img{height:150px}
  .fstrip{gap:16px}
  .steps,.values,.sstrip,.crew{grid-template-columns:minmax(0,1fr)}
  .fcard{grid-template-columns:minmax(0,1fr);gap:18px;padding:22px}
  .f-photo{width:120px;height:120px}
  .faq summary{font-size:18px}
  /* timeline and story on a phone: one line down the left edge, the year above each card */
  .tl-legend{display:none}
  .tl-line,.st-line{left:7px}
  .tl ol,.st ol{gap:40px}
  .tl-item,.st-node{grid-template-columns:minmax(0,1fr);padding-left:32px}
  .tl-yr,.st-yr{grid-column:1;grid-row:1;justify-self:start;padding:0;background:none;border:0;margin-bottom:8px}
  .tl-yr{font-size:22px}
  .st-yr{padding:6px 12px;border:1px solid var(--line-strong);background:var(--bg)}
  .tl-card,.tl-l .tl-card,.tl-r .tl-card,.tl-c .tl-card,.st-l .st-card,.st-r .st-card{grid-column:1;grid-row:2;justify-self:stretch;text-align:left;padding:0;margin:0;max-width:none;background:none;border:0}
  .tl-c .tl-card{padding:0}
  .tl-l .tl-photo,.tl-c .tl-photo{margin-inline:0}
  .st-card,.st-l .st-card,.st-r .st-card{padding:22px;background:var(--white);border:1px solid var(--line);border-radius:18px}
  .st-figs.two,.st-stats.n2,.st-stats.n4{grid-template-columns:minmax(0,1fr)}
  .flow{padding:22px 18px 18px;border-radius:20px}
  .q-ask{font-size:19px}
  .part input:not([type=radio]),.part textarea{font-size:19px}
  .opts.two{grid-template-columns:minmax(0,1fr)}
  .fl-act .btn{width:100%;margin-left:0}
  .fl-act [data-back]{order:2}
  .apply{padding:40px 0 80px}
  .foot{padding:56px 0 96px}
  .foot-grid{grid-template-columns:minmax(0,1fr);gap:32px}
  .ctas .btn{flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .rv{opacity:1;transform:none;transition:none}
  .spine,.hero .side,.hero-ctas>div,.hero-proof{animation:none}
  .mq-track{animation:none;width:auto;flex-wrap:wrap;justify-content:center}
  .mq-row[aria-hidden]{display:none}
  .mq-row{flex-wrap:wrap;justify-content:center;row-gap:8px}
  .mq{-webkit-mask:none;mask:none}
  .q.on,.q.on[data-dir="back"]{animation:none}
  .fl-done .tick{animation:none;stroke-dashoffset:0}
  .tl-yr,.st-yr{transition:none}
  .btn:active,.opt:active{transform:none}
}

/* =====================================================================
   Round 3 (Shane, 14 Oct 2026): back to the original whites and lines. Cool off white #F3F4F7 and white, ink #16161A,
   two grid rails the full height of the page, a hairline under every section with a square node where it meets each
   rail, a grid pattern behind the page heads, the stat bar as white cells with pill tabs, the results as a ledger.
   No blue anywhere (Hamish, 13 Oct call); the only colours are white, off white, greys and ink.
   ===================================================================== */
:root{
  --bg:#F3F4F7; --alt:#FFFFFF; --white:#FFFFFF; --tint:#E9EBF0;
  --ink:#16161A; --ink-2:#44444B; --muted:#5F5E66; --soft:#9A9AA3;
  --line:rgba(18,22,38,.11); --line-strong:rgba(18,22,38,.22);
  --dark:#16161A; --dark-2:#1E1E23; --dark-line:#2E2E35;
  --rail:min(1240px, calc(100vw - 48px)); --gut:40px;
  --narrow:min(880px, calc(100vw - 48px));
}
.page{position:relative}
.rails{position:absolute;top:0;bottom:0;left:50%;width:var(--rail);transform:translateX(-50%);border-inline:1px solid var(--line);pointer-events:none;z-index:10}
.in{padding-inline:var(--gut)}
.in.narrow{padding-inline:0}
/* a hairline under every section, a square node where it crosses each rail */
main>section{position:relative;border-bottom:1px solid var(--line)}
main>section:not(.mq)::after{content:"";position:absolute;bottom:-4px;left:calc(50% - var(--rail) / 2 - 3px);width:7px;height:7px;background:var(--white);z-index:11;pointer-events:none;
  box-shadow:0 0 0 1px var(--line-strong),calc(var(--rail) - 1px) 0 0 0 var(--white),calc(var(--rail) - 1px) 0 0 1px var(--line-strong)}
.final{border-top:0}
/* the grid pattern behind the hero and every page head, fading out towards the edges */
.hero,.phero,.apply{position:relative}
.hero::before,.phero::before,.apply::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:48px 48px;background-position:center top;-webkit-mask:radial-gradient(ellipse 65% 75% at 50% 35%,#000 20%,transparent 72%);mask:radial-gradient(ellipse 65% 75% at 50% 35%,#000 20%,transparent 72%)}
.hero>.in,.phero>.in,.apply>.in{position:relative;z-index:1}

/* announcement bar: white, as before */
.announce{background:var(--white);color:var(--ink-2);border-bottom:1px solid var(--line)}
.announce b{color:var(--ink)}

/* buttons: the arrow tile is a light grey where it was sky blue */
.btn-1 .tile,.stick .tile{background:var(--tint);color:var(--ink)}
.btn-1.inv .tile{background:var(--ink);color:var(--white)}
@media (hover:hover) and (pointer:fine){ .btn-1:hover .tile{background:var(--white)} }
.opt:has(input:checked) .k{background:var(--tint);border-color:var(--tint);color:var(--ink)}

/* the stat bar: three white cells on the rails, the caption and the date as pill tabs on the lines */
.stats{background:var(--white);color:var(--ink);padding:0;border-top:1px solid var(--line)}
.stats .in{position:relative;padding-inline:0}
.stats .eyebrow,.stat-date{position:absolute;left:50%;z-index:12;margin:0;background:var(--white);border:1px solid var(--line-strong);border-radius:999px;padding:5px 14px;font-family:var(--mono);font-size:12.5px;letter-spacing:0;line-height:1.3;text-transform:none;color:var(--ink-2);white-space:nowrap}
.stats .eyebrow{top:0;transform:translate(-50%,-50%)}
.stat-date{bottom:0;transform:translate(-50%,50%)}
.stat-grid{margin:0;gap:0}
.stat-grid li{border-left:0;padding:56px 40px 60px}
.stat-grid li+li{border-left:1px solid var(--line)}
.stat-grid .n{font-weight:300;font-size:clamp(48px,5vw,68px);color:var(--ink)}
.stat-grid .lb{margin-top:12px;font-family:var(--sans);font-size:15.5px;letter-spacing:0;text-transform:none;color:var(--ink-2)}

/* light where the dark bands were; the founder timeline on /about keeps its dark band (Brief 3) */
.sec.dark:not(.tlsec){background:var(--white);color:var(--ink)}
.sec.dark:not(.tlsec) .lead,.sec.dark:not(.tlsec) .prose p{color:var(--ink-2)}
.sec.alt .card,.sec.alt .lines p,.sec.alt .st-card{background:var(--bg)}
.lines p{background:var(--white)}

/* results: the ledger, one row per partner between hairlines */
.cases{display:block;border-top:1px solid var(--line)}
.case,.case.wide{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,4fr);align-items:center;gap:12px 24px;padding:24px 0;border-radius:0;background:none;color:var(--ink);border-bottom:1px solid var(--line)}
.case-h{display:grid;grid-template-columns:minmax(150px,2.2fr) minmax(0,3.8fr);align-items:center;gap:24px}
.case-h .big{font-weight:300;font-size:clamp(48px,5vw,72px)}
.case-h .what{margin:0;font-size:19px;line-height:1.35;color:var(--ink)}
.case-m{justify-content:space-between}
.case-m .who{font-size:19px;font-weight:540}
.case-m .tag{border-color:var(--line-strong);color:var(--ink-2)}
.case .quote{grid-column:1/-1;margin-top:4px;border-left-color:var(--ink);color:var(--ink-2)}
.case .quote footer{color:var(--muted)}

/* our story numbers: ink tiles */
.st-stats div{background:var(--ink)}
.st-line{background:var(--line-strong)}

/* footer: ink, with the giant quiet wordmark */
.foot{background:var(--ink);overflow:hidden}
.wm{margin-top:64px;padding:0 var(--gut);color:#202027;text-align:center;user-select:none;line-height:0}
.wm-x{display:block;margin:0 auto;width:auto;height:clamp(120px,21vw,300px)}
.foot-bottom{margin-top:0}

@media (max-width:960px){
  .stat-grid li{padding:48px 24px 52px}
}
@media (max-width:760px){
  :root{--rail:calc(100vw - 16px);--gut:16px;--narrow:calc(100vw - 48px)}
  .stat-grid li{padding:28px var(--gut)}
  .stat-grid li:first-child{padding-top:40px}
  .stat-grid li:last-child{padding-bottom:44px}
  .stat-grid li+li{border-left:0;border-top:1px solid var(--line)}
  .stats .eyebrow,.stat-date{font-size:11.5px;padding:4px 11px}
  .case,.case.wide,.case-h{grid-template-columns:minmax(0,1fr);gap:8px}
  .case-m{justify-content:flex-start}
  .case-h .big{font-size:48px}
  .wm{margin-top:48px}
}

/* Round 4 (Shane, 14 Oct 2026): the client logos in the rolling row, in grey; and the two buttons balanced. Both are the
   same height and both carry the arrow: the primary is filled ink, the secondary white with a line (was smaller, no arrow) */
.mq-row{padding:28px 0}
.mq-row li{height:48px}
.mq-row li img{width:auto;max-width:200px;filter:grayscale(1) contrast(1.1);opacity:.72;transition:opacity .2s ease,filter .2s ease}
.mq-row li.word{font-size:21px;font-weight:600;letter-spacing:-.02em;color:#6E6E76}
.mq-row li::after{margin:0 44px}
@media (hover:hover) and (pointer:fine){ .mq-row li img:hover{opacity:1;filter:none} }
.btn-2{height:56px;font-size:16px;padding:0 62px 0 26px;border:1px solid var(--line-strong);background:var(--white);color:var(--ink)}
.btn-2 .tile{position:absolute;right:7px;top:7px;width:40px;height:40px;border-radius:999px;background:var(--bg);border:1px solid var(--line);color:var(--ink);display:grid;place-items:center;transition:transform .25s var(--out),background-color .2s ease}
.btn-2 .tile svg{width:16px;height:16px}
.dark .btn-2 .tile,.btn-2.inv .tile{background:transparent;border-color:rgba(247,247,245,.32);color:var(--on-dark)}
@media (hover:hover) and (pointer:fine){ .btn-2:hover .tile{transform:translateX(3px);background:var(--tint)} }
@media (max-width:760px){
  .mq-row{padding:20px 0}
  .mq-row li{height:40px}
  .mq-row li img{max-width:150px;transform:scale(.85);transform-origin:center}
  .mq-row li::after{margin:0 28px}
  .hero-ctas .btn,.ctas .btn{width:100%}
}

/* Round 5 (Shane, 14 Oct 2026, from the Creative Director's walkthrough): one warm accent, amber, used in five places only:
   the square grid nodes, the line that fills down the timeline and Our Story with its lit years, the arrow in the buttons,
   the big numbers in the stat bar and the menu underline. Photos back in colour as on Hamish's own site (his logo row stays grey).
   Line icons on two text only sections, the founders' recommendations in one row, and the timeline folded tighter. */
:root{--accent:#E0A040;--accent-ink:#A8670A;--accent-soft:#FBF1DF}
/* 1 the grid nodes */
main>section:not(.mq)::after{background:var(--accent);box-shadow:0 0 0 1px var(--accent),calc(var(--rail) - 1px) 0 0 0 var(--accent),calc(var(--rail) - 1px) 0 0 1px var(--accent)}
/* 2 the scroll line and the years it lights */
.tl-line i,.st-line i{background:var(--accent)}
.tl-yr.lit{color:var(--accent)}
.st-yr.lit{background:var(--accent);border-color:var(--accent);color:var(--ink)}
/* 3 the arrow in the buttons */
.btn-1 .tile,.stick .tile{background:var(--accent);color:var(--ink)}
.btn-2 .tile{background:var(--accent-soft);border-color:var(--accent);color:var(--ink)}
@media (hover:hover) and (pointer:fine){ .btn-1:hover .tile{background:#ECB458} .btn-2:hover .tile{background:var(--accent)} }
/* 4 the big numbers in the stat bar */
.stat-grid .n{color:var(--accent-ink)}
/* 5 the menu underline */
.links>.plain::after,.mlink::after{height:2px;background:var(--accent)}

/* photos in colour, with one light shared grade so they sit together */
.fstrip img,.f-photo,.tl-photo,.faces img,.st-photo,.mega-art img{filter:saturate(.92) contrast(1.03)}

/* line icons */
.ic{width:30px;height:30px;stroke:var(--ink);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ic .dot{fill:var(--accent);stroke:none}
.ics{display:flex;gap:8px;margin-bottom:14px}
.card>.ic{margin-bottom:4px}

/* the founders' recommendations, one row under the founder cards */
.founders{align-items:start}
.team-quotes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:16px}
.team-quotes .quote.card{margin:0;padding:28px;border:1px solid var(--line);border-left:3px solid var(--ink);border-radius:20px;background:var(--white);font-size:16px}

/* the timeline and Our Story fold tighter: gaps down by a third, and on wide screens each entry on the other side
   starts beside the one before it, so the two sides interleave */
.tl ol{gap:36px}
.st ol{gap:40px}
@media (min-width:761px){
  .tl-l+.tl-r,.tl-r+.tl-l{margin-top:-64px}
  .st-l+.st-r,.st-r+.st-l{margin-top:-160px}
}
@media (max-width:960px){ .team-quotes{grid-template-columns:minmax(0,1fr)} }
@media (max-width:760px){ .tl ol,.st ol{gap:28px} }
/* Real Flow's logo is pale green and teal, so in grey it needs darkening to sit level with the others */
.mq-row img[src*="real-flow"]{filter:grayscale(1) brightness(.4) contrast(2.6);opacity:.8}
/* phones: every pair of buttons is the same width (Shane, 14 Oct 2026) */
@media (max-width:760px){
  .hero-ctas>div{align-self:stretch;justify-self:stretch}
  main .btn{width:100%}
  .card-cta{width:100%}
}
@media (max-width:760px){
  .hero .hero-ctas .c-pt,.hero .hero-ctas .c-re{align-self:stretch;justify-self:stretch;width:100%}
  .card .card-cta,.card .card-cta .btn,main a.btn,main button.btn{width:100%}
}

/* 25 Oct 2026: at 320px the stats pill ran 7px past the screen and the page scrolled sideways; it wraps on very small phones */
@media (max-width:360px){.stats .eyebrow{white-space:normal;width:max-content;max-width:calc(100vw - 32px);text-align:center}}

/* 25 Oct 2026: Hamish and David in the home hero, two round photos in colour with name and title (Shane: friendly and trustworthy, not another SaaS company) */
.hero-founders{display:flex;justify-content:center;flex-wrap:wrap;gap:20px 40px;margin-top:40px;animation:rise .8s var(--out) .25s both}
.hero-founders figure{display:flex;align-items:center;gap:14px;margin:0}
.hero-founders .hf-pic{width:72px;height:72px;border-radius:50%;object-fit:cover;flex:none}
.hero-founders figcaption{display:flex;flex-direction:column;text-align:left;font-size:14px;line-height:1.35;color:var(--muted,inherit)}
.hero-founders figcaption b{font-size:16px;color:var(--ink)}
.hero-founders+.hero-proof{margin-top:32px}
@media (max-width:760px){.hero-founders{gap:16px;margin-top:28px;justify-content:flex-start}.hero-founders .hf-pic{width:60px;height:60px}}

/* =====================================================================
   Round 6 (Hamish's homepage file, 26 Oct 2026, and the 28 and 29 Oct emails): one big question in the hero with the
   founder cutouts either side, the stat bar four across (three with Rex off), the dark PropTech card, the two tile grid,
   the founder cards, the careers strip. Plain nav links, six of them, so the menu button takes over a little earlier.
   ===================================================================== */
/* nav: six plain links and the long button fold into the menu below 1180px */
@media (min-width:961px) and (max-width:1180px){
  .links,.cta-sm{display:none}
  .nav{grid-template-columns:1fr auto}
  .menu-btn{display:inline-flex}
  .menu{position:absolute;left:12px;right:12px;top:calc(100% + 10px);display:grid;gap:4px;padding:12px;background:var(--white);border-radius:22px;box-shadow:var(--shadow);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s ease,transform .25s var(--out),visibility 0s linear .25s}
  .menu.open{opacity:1;visibility:visible;transform:none;transition:opacity .18s ease,transform .25s var(--out),visibility 0s}
  .menu .solo{display:flex;align-items:center;min-height:52px;padding:0 12px;border-radius:12px;font-size:18px;font-weight:520}
  .menu-cta{padding:12px}
  .menu-cta .btn{width:100%}
}
.links{gap:26px}

/* hero: the question, the line, one wide button; the cutouts stand on the bottom edge */
.hero.grow{position:relative;overflow:hidden;padding:104px 0 96px;min-height:560px}
.grow-mid{position:relative;z-index:2}
.grow-h{font-weight:620;font-size:clamp(40px,6vw,80px);line-height:1;letter-spacing:-.035em;text-transform:uppercase;animation:rise .8s var(--out) both}
.grow-sub{max-width:34ch;margin:24px auto 0;font-size:clamp(19px,1.8vw,22px);animation:rise .8s var(--out) .1s both}
.grow .ctas{justify-content:center;margin-top:36px;animation:rise .8s var(--out) .2s both}
.btn-grow{min-width:min(520px,100%);height:64px;font-size:17px;font-weight:620;letter-spacing:.03em;text-transform:uppercase;padding:0 72px 0 34px}
.btn-grow .tile{width:50px;height:50px}
.grow .hero-proof{margin-top:28px;animation:rise .8s var(--out) .3s both}
.cut{position:absolute;bottom:0;z-index:1;width:300px;height:470px;color:#D5D7DD;pointer-events:none}
.cut svg,.cut img{display:block;width:300px;height:470px;object-fit:contain;object-position:bottom}
.cut-l{left:max(16px,calc(50% - var(--rail) / 2 + 8px))}
.cut-r{right:max(16px,calc(50% - var(--rail) / 2 + 8px))}
@media (max-width:1180px){ .cut{width:220px;height:345px} .cut svg,.cut img{width:220px;height:345px} }
@media (max-width:900px){ .cut{display:none} .hero.grow{min-height:0;padding:72px 0 64px} }
@media (max-width:760px){ .btn-grow{height:60px;font-size:16px;padding:0 64px 0 22px} .btn-grow .tile{width:46px;height:46px} }

/* stat bar: four across, or three with the Rex switch off */
.stat-grid.n4{grid-template-columns:repeat(4,minmax(0,1fr))}
.stat-grid.n3{grid-template-columns:repeat(3,minmax(0,1fr))}
.stat-grid.n4 .n{font-size:clamp(40px,4.2vw,60px)}
@media (max-width:960px){ .stat-grid.n4{grid-template-columns:repeat(2,minmax(0,1fr))} .stat-grid.n4 li:nth-child(3){border-left:0} .stat-grid.n4 li:nth-child(n+3){border-top:1px solid var(--line)} }
@media (max-width:760px){ .stat-grid.n4,.stat-grid.n3{grid-template-columns:minmax(0,1fr)} .stat-grid.n4 li{border-left:0} }

/* the dark PropTech card */
.flag{display:grid;grid-template-columns:minmax(0,11fr) minmax(0,10fr);gap:48px;padding:52px;border-radius:28px;background:var(--ink);color:var(--on-dark)}
.flag .label{color:var(--on-dark-2)}
.flag .h2{margin:12px 0 16px;color:var(--on-dark)}
.flag-main>p:not(.label):not(.flag-scarce){font-size:17px;line-height:1.6;color:#C9CAD0}
.flag-list{display:grid;gap:12px;margin:24px 0 4px}
.flag-list li{position:relative;padding-left:24px;font-size:16.5px;line-height:1.5;color:#E8E9EC}
.flag-list li::before{content:"";position:absolute;left:0;top:8px;width:9px;height:9px;border-radius:50%;background:var(--accent)}
.flag .ctas{margin-top:28px}
.flag-scarce{margin-top:14px;font-size:14px;color:var(--on-dark-2)}
.flag-res{display:grid;gap:12px;align-content:center}
.flag-res li{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px;border-radius:16px;background:#202026;border:1px solid #2E2E35}
.flag-res b{display:block;font-weight:540;font-size:32px;line-height:1.1;letter-spacing:-.02em;color:var(--white);font-variant-numeric:tabular-nums}
.flag-res p span{display:block;margin-top:2px;font-size:14px;color:var(--on-dark-2)}
.flag-res em{font-style:normal;font-weight:600;font-size:15px;text-align:right;color:var(--white)}
@media (max-width:960px){ .flag{grid-template-columns:minmax(0,1fr);gap:32px;padding:32px} }
@media (max-width:760px){ .flag{padding:26px 20px;border-radius:22px} .flag-res li{padding:16px} .flag-res b{font-size:28px} }

/* what we run for agencies: two tiles */
#agencies .center .h2{margin-top:10px}
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.tile-card{position:relative;padding:40px;min-height:320px}
.tile-card .h3{margin-top:2px}
.badge{position:absolute;top:-13px;right:24px;padding:6px 12px;border-radius:8px;background:var(--accent);color:var(--ink);font-size:12.5px;font-weight:620;line-height:1.2}
@media (max-width:960px){ .tiles{grid-template-columns:minmax(0,1fr)} .tile-card{min-height:0;padding:32px} }
@media (max-width:760px){ .tile-card{padding:28px 22px} }

/* you deal with the founders */
#team .label+.h2{margin-top:10px}
.fcards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.fc{flex-direction:row;align-items:center;gap:20px;margin:0;padding:24px}
.fc-pic{width:88px;height:88px;flex:none;border-radius:50%;object-fit:cover;filter:saturate(.92) contrast(1.03)}
.fc figcaption{display:flex;flex-direction:column;gap:4px;font-size:15.5px;line-height:1.5;color:var(--ink-2)}
.fc figcaption b{font-size:19px;font-weight:600;color:var(--ink)}
.founders-quote.card{display:block;margin-top:20px;padding:30px 32px;border:1px solid var(--line);border-left:3px solid var(--ink);border-radius:20px;background:var(--white);font-size:clamp(18px,1.6vw,21px);line-height:1.5;color:var(--ink)}
@media (max-width:760px){ .fcards{grid-template-columns:minmax(0,1fr)} .fc{padding:20px} .fc-pic{width:72px;height:72px} .founders-quote.card{padding:24px 20px} }

/* careers strip */
.cstrip{flex-direction:row;align-items:center;justify-content:space-between;gap:24px 40px;flex-wrap:wrap;padding:32px 36px}
.cstrip .h3{margin:8px 0 6px}
.cstrip>div{max-width:60ch}
@media (max-width:760px){ .cstrip{padding:26px 22px} }

/* the form's skip to the calendar */
.fl-skip{height:44px;padding:0 12px;border:0;border-radius:10px;background:none;font-size:15px;color:var(--ink-2);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.fl-skip[hidden]{display:none}
@media (hover:hover) and (pointer:fine){ .fl-skip:hover{color:var(--ink)} }
.apply-side .label{margin-top:24px}
.apply-side .label+h1{margin-top:10px}
@media (prefers-reduced-motion: reduce){ .grow-h,.grow-sub,.grow .ctas,.grow .hero-proof{animation:none} }

/* 29 Oct 2026 phone check: the logo link and the LinkedIn and map links get a 44px tall tap area, and the small mono labels
   step up from 11.5px to 12px on phones. Nothing moves visually. */
.brand{display:flex;align-items:center;min-height:44px}
.li{display:inline-flex;align-items:center;min-height:44px}
@media (max-width:760px){ .stat-date,.tl-who,.st-stats span,.case-m .tag{font-size:12px} }

/* =====================================================================
   Option A, Acquisition.com direction (Hamish, 30 Oct 2026). Every rule below traces to his email:
   line 4, lose the gold everywhere: the amber accent goes, black, white and greys only, on every page;
   line 1, one clear message, lots of space: more room around each homepage section;
   line 4, tidy the font sizes: one type scale on the homepage, in acquisition.com's fonts (Poppins headings, Inter text);
   line 5, the founders strip reworked like acquisition.com's About our founders; line 6, careers block off the homepage.
   ===================================================================== */
/* line 4: no gold anywhere */
:root{--accent:#16161A;--accent-ink:#16161A;--accent-soft:#E9EBF0}
main>section:not(.mq)::after{background:var(--white);box-shadow:0 0 0 1px var(--line-strong),calc(var(--rail) - 1px) 0 0 0 var(--white),calc(var(--rail) - 1px) 0 0 1px var(--line-strong)}
.tlsec .tl-line i{background:var(--on-dark)}
.tl-yr.lit{color:var(--on-dark)}
.st-yr.lit{background:var(--ink);border-color:var(--ink);color:var(--white)}
.btn-1 .tile,.stick .tile{background:var(--white);color:var(--ink)}
.btn-1.inv .tile{background:var(--ink);color:var(--white)}
.btn-2 .tile{background:var(--tint);border-color:var(--line-strong);color:var(--ink)}
@media (hover:hover) and (pointer:fine){ .btn-1:hover .tile{background:var(--tint)} .btn-1.inv:hover .tile{background:#33333A} .btn-2:hover .tile{background:var(--line)} }
.stat-grid .n{color:var(--ink)}
.flag-list li::before{background:var(--white)}
.badge{background:var(--ink);color:var(--white)}


/* Option A homepage, built to look like acquisition.com (Hamish, 30 Oct 2026; Shane: "make it look like acquisition").
   Poppins only, a dark full width nav bar, a plain light grey hero with the cutouts on the edges, black pill buttons with
   no arrow tile, stats as thick left bars, the agency offers as plain centred columns, the founders as one framed photo
   with the words beside it. No gold. Motion added (Shane, 30 Oct 2026: too static), all of it off under reduced motion. */
@font-face{font-family:"Poppins";font-style:normal;font-weight:300;font-display:swap;src:url(/assets/fonts/poppins-300-latin.woff2?v=mw079qvz) format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/poppins-400-latin.woff2?v=mw079qvz) format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/poppins-500-latin.woff2?v=mw079qvz) format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/poppins-600-latin.woff2?v=mw079qvz) format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/poppins-700-latin.woff2?v=mw079qvz) format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:800;font-display:swap;src:url(/assets/fonts/poppins-800-latin.woff2?v=mw079qvz) format("woff2")}
body.home{--sans:"Poppins", ui-sans-serif, system-ui, sans-serif;--mono:"Poppins", ui-sans-serif, system-ui, sans-serif;--navy:#131628;--grey:#F2F2F2;font-family:var(--sans);background:var(--white);color:#000}
.home .rails,.home main>section::after,.home .hero::before{display:none}
.home main>section{border-bottom:0}

/* announcement bar: one full width colour bar, white text */
.home .announce{background:var(--ink);color:#fff;border:0;font-size:14px;padding:12px 16px}
.home .announce b{color:#fff;font-weight:600}
.home .announce a span{color:#fff}

/* nav: a dark full width bar, white logo and links, a white pill button */
.home .top{background:var(--navy)}
.home .nav{border-radius:0;height:76px;width:min(1170px,calc(100vw - 40px));padding-inline:0}
.home .top.float .nav{transform:none;background:transparent;box-shadow:none}
.home .brand-logo{filter:brightness(0) invert(1)}
.home .links{gap:28px;font-size:15px;font-weight:500;color:#fff}
.home .links>.plain::after{background:#fff}
.home .cta-sm{background:#fff;color:var(--ink);font-weight:500;height:45px;padding:0 22px}
.home .cta-sm svg{display:none}
.home .menu-btn{background:transparent;border-color:rgba(255,255,255,.4);color:#fff}

/* buttons: solid pills, bold, no arrow tile */
.home main .btn{height:auto;min-height:52px;padding:14px 34px;border-radius:999px;border:0;font-weight:600;font-size:16px;background:var(--ink);color:#fff}
.home main .btn .tile{display:none}
.home main .btn.inv{background:#fff;color:var(--ink)}
@media (hover:hover) and (pointer:fine){ .home main .btn{transition:transform .25s var(--out),box-shadow .25s ease,background-color .2s ease} .home main .btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.18)} }
.home .stick .tile{display:none}
.home .stick{padding:0 22px;font-weight:600}

/* hero: light grey, centred caps question, the cutouts standing on the bottom edge */
.home .hero.grow{background:var(--grey);padding:72px 0 88px;min-height:520px}
.home .grow-h{font-weight:800;font-size:clamp(38px,4.2vw,56px);line-height:1.15;letter-spacing:0;color:var(--navy)}
.home .grow-sub{max-width:30ch;font-size:21px;line-height:1.5;color:#000;margin-top:26px}
.home .grow .ctas{margin-top:34px}
.home .btn-grow{min-width:min(420px,100%);min-height:60px;font-size:20px;font-weight:700;text-transform:uppercase;letter-spacing:0}
.home .cut{color:#C4C4CA}

/* stats: on the same grey, a thick bar on the left of each, big navy numbers, small caps labels */
.home .stats{background:var(--grey);border:0;padding:8px 0 64px}
.home .stats .in{width:min(1170px,calc(100vw - 40px));padding:0}
.home .stat-grid{gap:24px}
.home .stat-grid li,.home .stats .stat-grid li{border:0;padding:6px 0 6px 20px}
.home .stat-grid li+li{border-top:0;border-left:0}
.home .stat-grid .n{font-family:var(--sans);font-weight:800;font-size:40px;letter-spacing:0;color:var(--navy)}
.home .stat-grid .lb{margin-top:8px;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#6B6B75}
.home .stat-date{position:static;transform:none;border:0;background:none;padding:0;margin-top:28px;text-align:center;font-family:var(--sans);font-size:13px;color:#6B6B75}
@media (max-width:760px){ .home .stat-grid.n3,.home .stat-grid.n4{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:28px} .home .stat-grid .n{font-size:32px} .home .stats .stat-grid li{padding:6px 0 6px 16px} }

/* sections: white, generous, one width */
.home .sec{padding:96px 0;background:#fff}
.home .sec .in{width:min(1170px,calc(100vw - 40px));padding-inline:0}
.home .h2{font-family:var(--sans);font-weight:800;font-size:clamp(28px,2.6vw,36px);line-height:1.2;letter-spacing:0;color:var(--navy);margin-bottom:12px}
.home .h3{font-family:var(--sans);font-weight:800;font-size:20px;line-height:1.3;letter-spacing:0;color:var(--navy)}
.home .label{font-family:var(--sans);font-weight:600;font-size:12px;letter-spacing:.1em}

/* the Full Revenue Partnership card stays as Hamish likes it, in Poppins */
.home #proptech-card{background:var(--grey);padding:0 0 96px}
.home .flag .h2{color:#fff}
.home .flag-main>p:not(.label):not(.flag-scarce),.home .flag-list li{font-size:16px;font-weight:300;line-height:1.6}
.home .flag-res b{font-weight:800}

/* what we run for agencies: like acquisition.com's free training row, plain centred columns, no cards */
.home .offers-head{max-width:640px;margin:0 auto}
.home .offers-sub{font-size:16px;font-weight:300;color:var(--navy)}
.home .offers-head::after{content:"";display:block;width:min(420px,80%);height:1px;background:#CFCFD4;margin:28px auto 0}
.offers-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 56px;max-width:900px;margin:48px auto 0}
.offer{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px}
.offer p:not(.offer-tag){font-size:16px;font-weight:300;line-height:1.6;color:#000;max-width:40ch}
.offer-tag{display:inline-block;background:var(--ink);color:#fff;font-size:12px;font-weight:600;padding:4px 10px;border-radius:4px;letter-spacing:.02em}
.offer-tag-blank{background:none}
.offer .card-cta{margin-top:auto;padding-top:10px;width:100%;display:flex;justify-content:center}
.offer .btn{min-width:240px}
@media (max-width:760px){ .offers-grid{grid-template-columns:minmax(0,1fr);gap:56px} .offer-tag-blank{display:none} }

/* the founders, like acquisition.com's About our founders: one framed photo of both, the words beside it */
.home .about-f{background:var(--grey)}
.af-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,6fr);gap:56px;align-items:center;max-width:1000px;margin:40px auto 0}
.af-frame{display:grid;grid-template-columns:1fr 1fr;border:6px solid #000;background:#000;gap:6px;max-width:380px;justify-self:end;width:100%}
.af-pic{width:100%;aspect-ratio:3/4;height:auto;object-fit:cover;object-position:center top}
.af-text p{font-size:16px;font-weight:300;line-height:1.7;color:#000}
.af-text p+p{margin-top:16px}
.af-text b{font-weight:700;color:var(--navy)}
.af-quote{margin-top:24px;padding-left:18px;border-left:3px solid var(--navy);font-size:16px;font-weight:300;line-height:1.7;color:#000}
.af-quote footer{margin-top:10px;font-size:13px;font-weight:500;color:#6B6B75}
@media (max-width:760px){ .af-grid{grid-template-columns:minmax(0,1fr);gap:32px} .af-frame{justify-self:center;max-width:320px} }

/* final call to action */
.home .final{background:#fff}
.home .final .lead{font-size:18px;font-weight:300;color:#000}

/* motion: the hero builds in, the cutouts rise from the bottom edge, the stat bars draw down, sections and offers lift
   in as they arrive, the partnership results slide in one by one, the founders photo eases up, buttons lift on hover.
   Under reduced motion none of it runs. */
@keyframes xgUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes xgRise{from{opacity:0;transform:translateY(80px)}to{opacity:1;transform:none}}
.home .grow-h{animation:xgUp .9s var(--out) .1s both}
.home .grow-sub{animation:xgUp .9s var(--out) .25s both}
.home .grow .ctas{animation:xgUp .9s var(--out) .4s both}
.home .cut-l{animation:xgRise 1.1s var(--out) .2s both}
.home .cut-r{animation:xgRise 1.1s var(--out) .35s both}
.home .stat-grid li{position:relative}
.home .stat-grid li::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--navy);transform-origin:top;transform:scaleY(0);transition:transform .9s var(--out)}
.home .stat-grid li.seen::before{transform:scaleY(1)}
.home .stat-grid li:nth-child(2){transition-delay:.08s}.home .stat-grid li:nth-child(2)::before{transition-delay:.12s}
.home .stat-grid li:nth-child(3){transition-delay:.16s}.home .stat-grid li:nth-child(3)::before{transition-delay:.24s}
.home .stat-grid li:nth-child(4){transition-delay:.24s}.home .stat-grid li:nth-child(4)::before{transition-delay:.36s}
.home .offer:nth-child(2){transition-delay:.15s}
.home .flag-res li{opacity:0;transform:translateX(24px);transition:opacity .7s var(--out),transform .7s var(--out)}
.home .flag.seen .flag-res li{opacity:1;transform:none}
.home .flag.seen .flag-res li:nth-child(2){transition-delay:.1s}.home .flag.seen .flag-res li:nth-child(3){transition-delay:.2s}.home .flag.seen .flag-res li:nth-child(4){transition-delay:.3s}
.home .af-frame:not(.seen){transform:translateY(40px) scale(.97)}
.home .af-frame{transition:opacity .9s var(--out),transform 1.1s var(--out)}
@media (prefers-reduced-motion: reduce){
  .home .grow-h,.home .grow-sub,.home .grow .ctas,.home .cut-l,.home .cut-r{animation:none}
  .home .stat-grid li::before{transform:scaleY(1);transition:none}
  .home .flag-res li{opacity:1;transform:none;transition:none}
  .home .af-frame:not(.seen){transform:none}
  .home main .btn:hover{transform:none}
}

/* Placeholder founder cutouts (30 Oct 2026): Hamish's and David's existing photos with the background removed, until John's
   waist up cutouts arrive. The photos are square, so they fill the portrait slot from the bottom edge up. */
.home .cut img{object-fit:cover;object-position:center bottom}

/* Footer (Shane, 30 Oct 2026: far too long): the X watermark sits behind the footer words instead of below them, so the
   footer ends at the copyright line. The words stay on top and readable; the watermark is decoration only. */
.foot{position:relative;padding:72px 0 28px}
.foot .foot-grid,.foot .foot-bottom{position:relative;z-index:1}
.wm{position:absolute;left:50%;bottom:56px;transform:translateX(-50%);margin:0;padding:0;z-index:0;pointer-events:none;width:auto}
.wm-x{height:clamp(170px,20vw,280px)}
.foot-bottom{margin-top:56px}
@media (max-width:760px){ .foot{padding:56px 0 24px} .wm{bottom:72px} .wm-x{height:170px} .foot-bottom{margin-top:40px} }
.home .cut-l{left:max(8px,calc(50% - 712px))}
.home .cut-r{right:max(8px,calc(50% - 712px))}
@media (max-width:1366px){ .home .cut{width:250px;height:400px} .home .cut img,.home .cut svg{width:250px;height:400px} }
@media (max-width:1180px){ .home .cut{width:200px;height:330px} .home .cut img,.home .cut svg{width:200px;height:330px} }

/* =====================================================================
   Option B homepage, the luxury agency direction (Hamish, 30 Oct 2026: Bresic Whitney, Kollosche, Graya). Photos carry
   the page; quiet wide type in Archivo (the free match for Kollosche's Sohne Breit); small letter spaced capitals for
   labels; hairline rules; white, warm stone and deep navy only, no gold. A small label sits in its own left column,
   editorial style. Motion: the founders rise in, photos wipe open as they arrive, hairlines draw across, the final band
   zooms slowly. Everything still under reduced motion.
   ===================================================================== */
@font-face{font-family:"Archivo";font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url(/assets/fonts/archivo-var-latin.woff2?v=mw079qvz) format("woff2")}
body.lux{--sans:"Archivo", ui-sans-serif, system-ui, sans-serif;--mono:"Archivo", ui-sans-serif, system-ui, sans-serif;--stone:#ECE8E1;--navy:#0F1A2E;--lx-ink:#121212;--lx-mute:#6F6B66;--lx-line:rgba(18,18,18,.14);font-family:var(--sans);background:#fff;color:var(--lx-ink)}
.lux .rails,.lux main>section::after,.lux .hero::before{display:none}
.lux main>section{border-bottom:0}
.lx-in{width:min(1280px,calc(100vw - 48px));margin-inline:auto}
.lux .label,.lx-label{font-family:var(--sans);font-stretch:110%;font-weight:500;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--lx-mute)}
.lx-h2{font-family:var(--sans);font-stretch:118%;font-weight:400;font-size:clamp(26px,2.6vw,38px);line-height:1.15;letter-spacing:.01em;text-transform:uppercase;color:var(--lx-ink)}

/* announcement and nav: quiet, thin, capitals */
.lux .announce{background:var(--navy);color:#fff;border:0;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-stretch:110%;padding:11px 16px}
.lux .announce b{color:#fff;font-weight:500}
.lux .announce a span{color:#fff}
.lux .top{background:#fff;border-bottom:1px solid var(--lx-line)}
.lux .nav{border-radius:0;height:78px;width:min(1280px,calc(100vw - 48px));padding-inline:0}
.lux .top.float .nav{transform:none;background:transparent;box-shadow:none}
.lux .links{gap:32px;font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;font-stretch:110%;color:var(--lx-ink)}
.lux .links>.plain::after{background:var(--lx-ink);height:1px}
.lux .cta-sm{background:transparent;color:var(--lx-ink);border:1px solid var(--lx-ink);border-radius:0;height:42px;padding:0 20px;font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;font-stretch:110%}
.lux .cta-sm svg{display:none}
.lux .menu-btn{border-radius:0;border-color:var(--lx-ink)}

/* buttons: square edged, outlined, small capitals */
.lux main .btn{height:auto;min-height:50px;padding:14px 28px;border-radius:0;font-family:var(--sans);font-stretch:110%;font-weight:500;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;background:transparent;color:var(--lx-ink);border:1px solid var(--lx-ink)}
.lux main .btn .tile{display:none}
.lux main .btn.inv{color:#fff;border-color:rgba(255,255,255,.8)}
.lux main .btn-1.inv{background:#fff;color:var(--navy);border-color:#fff}
@media (hover:hover) and (pointer:fine){ .lux main .btn{transition:background-color .3s ease,color .3s ease} .lux main .btn:hover{background:var(--lx-ink);color:#fff} .lux main .btn.inv:hover{background:#fff;color:var(--navy)} }
.lux .stick{border-radius:0;font-size:12px;letter-spacing:.14em;text-transform:uppercase;padding:0 20px;background:var(--navy)}
.lux .stick .tile{display:none}

/* hero: stone, the question in big light wide capitals, the founders standing on the bottom edge */
.lx-hero{background:var(--stone);padding:0;overflow:hidden}
.lx-hero-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);align-items:end;min-height:min(78vh,640px)}
.lx-hero-text{align-self:center;padding:72px 0}
.lx-h1{font-family:var(--sans);font-stretch:125%;font-weight:300;font-size:clamp(40px,5.2vw,80px);line-height:1.02;letter-spacing:-.005em;text-transform:uppercase;color:var(--lx-ink);animation:xgUp 1s var(--out) .1s both}
.lx-hero-cta{margin-top:40px;animation:xgUp 1s var(--out) .3s both}
.lx-proof{margin-top:28px;font-size:13px;color:var(--lx-mute)}
.lx-proof b{color:var(--lx-ink);font-weight:500}
.lx-hero-people{position:relative;display:flex;justify-content:flex-end;align-items:flex-end;height:100%;min-height:520px}
.lx-cut{display:block;width:clamp(220px,20vw,320px);height:auto;aspect-ratio:300/470;object-fit:cover;object-position:center bottom}
.lx-cut-l{margin-right:-36px;position:relative;z-index:1;animation:xgRise 1.2s var(--out) .25s both}
.lx-cut-r{animation:xgRise 1.2s var(--out) .45s both}
.lx-sil{color:#D8D3CB}
.lx-sil svg{width:100%;height:100%}

/* statement and stats: one big line, then the numbers between hairlines */
.lx-statement{padding:120px 0 96px;background:#fff}
.lx-big{font-family:var(--sans);font-stretch:112%;font-weight:300;font-size:clamp(28px,3.4vw,52px);line-height:1.18;max-width:20ch;color:var(--lx-ink)}
.lx-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin-top:80px;border-top:1px solid var(--lx-line);border-bottom:1px solid var(--lx-line)}
.lx-stats li{padding:36px 24px 36px 0}
.lx-stats li+li{padding-left:28px;border-left:1px solid var(--lx-line)}
.lx-n{display:block;font-family:var(--sans);font-stretch:118%;font-weight:300;font-size:clamp(40px,4vw,60px);line-height:1;color:var(--lx-ink)}
.lx-lb{display:block;margin-top:14px;font-size:11.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;font-stretch:110%;color:var(--lx-mute)}
.lx-updated{margin-top:18px;font-size:12px;color:var(--lx-mute)}

/* sections and the editorial split: a small label in its own left column */
.lx-sec{padding:120px 0;background:#fff}
.lx-sec-tight{padding:0 0 120px}
.lx-stone{background:var(--stone)}
.lx-split{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,10fr);gap:24px}
.lx-split>.lx-label{padding-top:12px;border-top:1px solid var(--lx-line);align-self:start}
.lx-split>div{border-top:1px solid var(--lx-line);padding-top:12px}

/* the Full Revenue Partnership card, kept, in deep navy and the new type */
.lux .lx-flag{background:var(--navy);border-radius:0}
.lux .lx-flag .lx-h2{color:#fff;margin:14px 0 18px}
.lux .lx-flag .label{color:rgba(255,255,255,.6)}
.lux .flag-main>p:not(.label):not(.flag-scarce),.lux .flag-list li{font-size:15.5px;font-weight:300;line-height:1.65}
.lux .flag-res li{border-radius:0;background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.12)}
.lux .flag-res b{font-stretch:118%;font-weight:300;font-size:34px}
.lux .flag-res em{font-weight:500;letter-spacing:.06em}

/* what we run for agencies: two big photo tiles, the label and heading across the bottom, words and a link below */
.lux #agencies .lx-h2{margin:28px 0 40px}
.lx-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.lx-photo{position:relative;overflow:hidden;aspect-ratio:4/5;background:var(--stone)}
.lx-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;transition:transform 1.4s var(--out)}
.lx-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,26,46,0) 45%,rgba(15,26,46,.82) 100%)}
.lx-cap{position:absolute;left:0;right:0;bottom:0;z-index:1;display:flex;flex-direction:column;gap:10px;padding:28px;color:#fff}
.lx-cap span{font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;font-stretch:110%;opacity:.85}
.lx-cap b{font-stretch:115%;font-weight:400;font-size:clamp(20px,1.8vw,26px);line-height:1.2;text-transform:uppercase}
.lx-copy{margin-top:22px;font-size:15.5px;font-weight:300;line-height:1.7;color:var(--lx-ink);max-width:48ch}
.lx-link{display:inline-block;margin-top:16px;padding-bottom:6px;border-bottom:1px solid var(--lx-ink);font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;font-stretch:110%}
@media (hover:hover) and (pointer:fine){ .lx-tile:hover .lx-img{transform:scale(1.04)} }

/* the founders: words left, two portraits right */
.lx-about{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:56px;align-items:start}
.lx-about-text .lx-h2{margin:28px 0 28px}
.lx-about-text p{font-size:16px;font-weight:300;line-height:1.75;color:var(--lx-ink);max-width:56ch}
.lx-about-text p+p{margin-top:18px}
.lx-quote{margin-top:28px;padding-left:20px;border-left:1px solid var(--lx-ink);font-size:16px;font-weight:300;line-height:1.7}
.lx-quote footer{margin-top:10px;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--lx-mute)}
.lx-portraits{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:28px}
.lx-port{width:100%;aspect-ratio:4/5;height:auto;object-fit:cover;object-position:center top}
.lx-port+.lx-port{margin-top:56px}

/* final call to action: a full width photo band */
.lx-band{position:relative;overflow:hidden;min-height:560px;display:flex;align-items:flex-end;padding:0;background:var(--navy)}
.lx-band-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 25%;filter:saturate(.85)}
.lx-band::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(15,26,46,.86) 0%,rgba(15,26,46,.55) 55%,rgba(15,26,46,.25) 100%)}
.lx-band-text{position:relative;z-index:1;padding:96px 0;color:#fff}
.lx-band-text .lx-h2{color:#fff;max-width:16ch;font-size:clamp(30px,3.4vw,52px);font-weight:300}
.lx-band-text p{margin-top:20px;font-size:16px;font-weight:300;max-width:44ch;color:rgba(255,255,255,.85)}
.lx-band-cta{margin-top:36px}

/* placeholder cutouts and the shorter footer carry over from option A */
.lux .foot{font-family:var(--sans)}

/* motion */
@keyframes lxZoom{from{transform:scale(1.12)}to{transform:scale(1)}}
.lx-photo{clip-path:inset(0 0 0 0);transition:clip-path 1.2s var(--out)}
.lx-tile:not(.seen) .lx-photo{clip-path:inset(18% 0 0 0)}
.lx-tile:not(.seen) .lx-img{transform:scale(1.1)}
.lx-tile:nth-child(2){transition-delay:.15s}.lx-tile:nth-child(2) .lx-photo{transition-delay:.15s}
.lx-split>.lx-label,.lx-split>div{border-top-color:transparent;background:linear-gradient(var(--lx-line),var(--lx-line)) top left/0% 1px no-repeat;transition:background-size 1.2s var(--out)}
.lx-split>.lx-label.seen,.lx-split.seen>div,.lx-split:has(.seen)>div,.lx-split:has(.seen)>.lx-label{background-size:100% 1px}
.lx-band.seen .lx-band-img{animation:lxZoom 6s var(--out) both}
.lx-stats li{transition-delay:calc(var(--i,0) * .1s)}

/* phones */
@media (max-width:900px){
  .lx-hero-grid{grid-template-columns:minmax(0,1fr);min-height:0}
  .lx-hero-text{padding:56px 0 32px;text-align:left}
  .lx-hero-people{min-height:0;justify-content:center}
  .lx-cut{width:46%}
  .lx-split{grid-template-columns:minmax(0,1fr);gap:0}
  .lx-split>.lx-label{border-top:0;background:none;padding-top:0}
  .lx-tiles,.lx-about{grid-template-columns:minmax(0,1fr);gap:48px}
  .lx-port+.lx-port{margin-top:32px}
  .lx-statement{padding:80px 0 64px}
  .lx-sec{padding:80px 0}
  .lx-sec-tight{padding:0 0 80px}
  .lx-stats{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:48px}
  .lx-stats li+li{border-left:0;padding-left:0}
  .lx-stats li:nth-child(even){padding-left:20px;border-left:1px solid var(--lx-line)}
  .lx-stats li:nth-child(n+3){border-top:1px solid var(--lx-line)}
  .lx-band{min-height:480px}
  .lux .links{display:none}
}
@media (prefers-reduced-motion: reduce){
  .lx-h1,.lx-hero-cta,.lx-cut-l,.lx-cut-r{animation:none}
  .lx-tile:not(.seen) .lx-photo{clip-path:none}
  .lx-tile:not(.seen) .lx-img{transform:none}
  .lx-split>.lx-label,.lx-split>div{background-size:100% 1px;transition:none}
  .lx-band.seen .lx-band-img{animation:none}
}
.lux main>section.lx-band::after{display:block}
.lux main>section.lx-band::after{content:"";display:block;position:absolute;inset:0;left:0;bottom:0;width:auto;height:auto;box-shadow:none;z-index:0;pointer-events:none;background:linear-gradient(90deg,rgba(15,26,46,.88) 0%,rgba(15,26,46,.6) 50%,rgba(15,26,46,.2) 100%)}

/* Option C, the stevenbartlett.com direction (Hamish, 30 Oct 2026: Our Story lighter on words and heavier on images).
   Black pages, huge tall capitals in Anton, light Host Grotesk for reading, black and white photos that turn to colour as
   they arrive, big white numbers, white as the only accent. Homepage and Our story. No gold. */
@font-face{font-family:"Anton";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/anton-400-latin.woff2?v=mw079qvz) format("woff2")}
body.sb{--disp:"Anton", Impact, "Arial Narrow", sans-serif;--sb-bg:#000;--sb-2:#0E0E0E;--sb-3:#161616;--sb-line:rgba(255,255,255,.16);--sb-mute:#9A9A9A;--sb-text:#D6D6D6;background:var(--sb-bg);color:#fff}
.sb .rails,.sb main>section::after,.sb .hero::before{display:none}
.sb main>section{border-bottom:0;background:var(--sb-bg)}
.sb-in{width:min(1240px,calc(100vw - 48px));margin-inline:auto}
.sb ::selection{background:#fff;color:#000}

/* announcement and nav: black bar, white words, a white pill */
.sb .announce{background:#000;color:var(--sb-text);border-bottom:1px solid var(--sb-line)}
.sb .announce b,.sb .announce a span{color:#fff}
.sb .top{background:#000;border-bottom:1px solid var(--sb-line)}
.sb .nav{border-radius:0;height:76px;width:min(1240px,calc(100vw - 48px));padding-inline:0}
.sb .top.float .nav{transform:none;background:transparent;box-shadow:none}
.sb .brand-logo{filter:brightness(0) invert(1)}
.sb .links{gap:28px;font-size:14px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:#fff}
.sb .links>.plain::after{background:#fff}
.sb .cta-sm{background:#fff;color:#000;font-weight:600;height:44px;padding:0 22px}
.sb .cta-sm svg{display:none}
.sb .menu-btn{background:transparent;border-color:rgba(255,255,255,.4);color:#fff}

/* buttons: white pills, black words; the outlined one white on black */
.sb main .btn{height:auto;min-height:54px;padding:15px 32px;border-radius:999px;border:1px solid #fff;font-weight:600;font-size:15px;letter-spacing:.08em;text-transform:uppercase;background:#fff;color:#000}
.sb main .btn .tile{display:none}
.sb main .btn-2{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
@media (hover:hover) and (pointer:fine){ .sb main .btn{transition:transform .25s var(--out),background-color .2s ease,color .2s ease} .sb main .btn:hover{transform:translateY(-2px)} .sb main .btn-2:hover{background:#fff;color:#000} }
.sb .stick{background:#fff;color:#000;font-weight:600;padding:0 22px}
.sb .stick .tile{display:none}

/* type */
.sb-h1,.sb-giant,.sb-h2,.sb-h3,.sb-year,.sb-n,.sb-ch-h,.sb-yr{font-family:var(--disp);font-weight:400;text-transform:uppercase;letter-spacing:.005em;color:#fff}
.sb-h2{font-size:clamp(34px,4vw,60px);line-height:1}
.sb-h2-xl{font-size:clamp(48px,8vw,128px);line-height:.92;margin-bottom:56px}
.sb-h3{font-size:clamp(24px,2.2vw,32px);line-height:1.05;margin-top:10px}
.sb-kick{margin-top:22px;font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--sb-mute)}
.sb main p{color:var(--sb-text)}

/* photos: black and white until they arrive, then they ease into colour. Placeholders name the photo that goes there */
.sb-pic{position:relative;overflow:hidden;background:var(--sb-3);aspect-ratio:4/3}
.sb-img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05);transform:scale(1.06);transition:filter 1.6s ease .2s,transform 1.8s var(--out)}
.seen .sb-img,.seen.sb-pic .sb-img{filter:grayscale(0);transform:none}
.sb-bw .sb-img{filter:grayscale(1) contrast(1.05)}
.seen .sb-bw .sb-img{filter:grayscale(1) contrast(1.05)}
@media (hover:hover) and (pointer:fine){ .sb-tile:hover .sb-bw .sb-img{filter:grayscale(0)} }

/* hero: black, the question huge, the founders in black and white standing on the bottom edge */
.sb-hero{position:relative;overflow:hidden;padding:88px 0 0;background:#000;text-align:center}
.sb-h1{font-size:clamp(56px,10.5vw,176px);line-height:.88;max-width:11ch;margin-inline:auto;animation:xgUp 1s var(--out) .1s both}
.sb-hero-cta{margin-top:40px;animation:xgUp 1s var(--out) .3s both}
.sb-proof{margin-top:22px;font-size:14px;color:var(--sb-mute)}
.sb-proof b{color:#fff;font-weight:600}

/* statement and stats: one big line, then big white numbers between hairlines */
.sb-statement{padding:120px 0 96px;border-top:1px solid var(--sb-line)}
.sb-big{font-family:var(--disp);text-transform:uppercase;font-size:clamp(34px,5vw,80px);line-height:.98;max-width:16ch;color:#fff !important}
.sb-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin-top:72px;border-top:1px solid var(--sb-line);border-bottom:1px solid var(--sb-line)}
.sb-stats li{padding:36px 24px 36px 0}
.sb-stats li+li{padding-left:28px;border-left:1px solid var(--sb-line)}
.sb-n{display:block;font-size:clamp(56px,6.4vw,104px);line-height:.9;font-variant-numeric:tabular-nums}
.sb-lb{display:block;margin-top:14px;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--sb-mute)}
.sb-updated{margin-top:18px;font-size:12px;color:var(--sb-mute) !important}

/* sections */
.sb-sec{padding:120px 0}
.sb-sec+.sb-sec{border-top:1px solid var(--sb-line)}

/* the Full Revenue Partnership card, kept, on near black */
.sb-flag{background:var(--sb-2);border:1px solid var(--sb-line);border-radius:0}
.sb-flag .sb-kick{margin-top:0}
.sb-flag .sb-h2{margin:14px 0 18px}
.sb .flag-list li::before{background:#fff}
.sb .flag-res li{background:var(--sb-3);border-color:var(--sb-line);border-radius:0}
.sb .flag-res b{font-family:var(--disp);font-weight:400;font-size:44px;letter-spacing:0}

/* agency offers: two photo tiles */
.sb-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px}
.sb-tile p:not(.sb-kick){margin-top:14px;font-size:16px;line-height:1.65;max-width:46ch}
.sb-tile:nth-child(2){transition-delay:.15s}
.sb-link{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin-top:14px;font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#fff;border-bottom:1px solid #fff}

/* the story strip: four big years, each a photo, opening Our story */
.sb-yr{display:block;margin-top:18px;font-size:clamp(44px,4.6vw,72px);line-height:.9}
.sb-st{display:block;margin-top:10px;font-size:15px;line-height:1.4;color:var(--sb-text)}

/* the founders: black and white portraits, the words beside them */
.sb-about{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:center}
.sb-about-text .sb-h2{margin-bottom:24px}
.sb-about-text p{font-size:16px;line-height:1.7}
.sb-about-text p+p{margin-top:16px}
.sb-quote{margin-top:24px;padding-left:18px;border-left:2px solid #fff}

/* final call to action, on every option C page */
.sb .final{padding:140px 0;text-align:center;border-top:1px solid var(--sb-line)}
.sb .final .h2{font-family:var(--disp);font-weight:400;text-transform:uppercase;font-size:clamp(44px,7vw,112px);line-height:.92;letter-spacing:.005em;color:#fff;max-width:14ch;margin:0 auto 24px}
.sb .final .lead,.sb-final p{color:var(--sb-text);font-size:17px}
.sb-final{text-align:center}
.sb-final .sb-h2-xl{max-width:14ch;margin:0 auto 24px}
.sb-final-cta,.sb .final .ctas{margin-top:36px;justify-content:center}

/* Our story: the hero is the giant title with Hamish in front of it, then the line and the years to jump to */
.sb-shero{padding:64px 0 72px;background:#000;overflow:hidden}
.sb-shero-in{position:relative;display:grid;justify-items:center;text-align:center}
.sb-giant{grid-area:1/1;font-size:clamp(84px,19vw,300px);line-height:.82;white-space:nowrap;animation:xgUp 1.1s var(--out) .1s both}
.sb-scut{grid-area:1/1;align-self:end;position:relative;z-index:1;height:clamp(260px,34vw,500px);width:auto;margin-top:clamp(60px,9vw,150px);filter:grayscale(1) contrast(1.08);animation:xgRise 1.3s var(--out) .35s both,sbDrift 14s ease-in-out 1.6s infinite alternate}
@keyframes sbDrift{from{transform:translateY(0)}to{transform:translateY(-10px)}}
.sb-shero-in::after{content:"";grid-area:1/1;align-self:end;width:100%;height:120px;background:linear-gradient(transparent,#000);z-index:2;pointer-events:none}
.sb-lead{max-width:56ch;margin:40px auto 0;text-align:center;font-size:clamp(17px,1.5vw,20px);line-height:1.6}
.sb-jump{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 10px;margin-top:40px}
.sb-jump a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid var(--sb-line);border-radius:999px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#fff;transition:background-color .2s ease,color .2s ease}
.sb-jump a:hover{background:#fff;color:#000}

/* the timeline: a line down the middle that fills as you scroll, a milestone either side, photos and words alternating */
.sb-tl-sec{padding:40px 0 120px}
.sb-tl{position:relative}
.sb-line{background:var(--sb-line) !important}
.sb-line i{background:#fff !important}
.sb-tl ol{display:grid;gap:140px}
.sb-ch{display:grid;grid-template-columns:minmax(0,1fr) 96px minmax(0,1fr);align-items:start;scroll-margin-top:110px}
.sb-ch-media{grid-row:1}
.sb-ch-text{grid-row:1}
.sb-l .sb-ch-media{grid-column:1}.sb-l .sb-ch-text{grid-column:3}
.sb-r .sb-ch-media{grid-column:3}.sb-r .sb-ch-text{grid-column:1}
.sb-dot{grid-column:2;grid-row:1;justify-self:center;margin-top:36px;width:14px;height:14px;border-radius:50%;background:#000;border:2px solid rgba(255,255,255,.4);position:relative;z-index:1;transition:background-color .35s ease,border-color .35s ease,transform .35s var(--out)}
.sb-dot.lit{background:#fff;border-color:#fff;transform:scale(1.25)}
.sb-year{font-size:clamp(88px,11vw,180px);line-height:.82}
.sb-year.w{font-size:clamp(56px,7vw,112px);line-height:.9}
.sb-when{margin-top:14px;font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--sb-mute) !important}
.sb-ch-h{margin-top:18px;font-size:clamp(28px,2.6vw,40px);line-height:1}
.sb-place{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:14px;color:var(--sb-mute) !important}
.sb-ch-text>p:not([class]){margin-top:22px;font-size:16.5px;line-height:1.7}
.sb-learned{margin-top:24px;padding-left:18px;border-left:2px solid #fff;font-size:clamp(18px,1.5vw,21px);line-height:1.5;color:#fff !important}
.sb-learned span{display:block;margin-bottom:8px;font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--sb-mute)}
.sb-ch-media .st-figs{display:grid;gap:12px;margin:0}
.sb-ch-media figure img{width:100%;height:auto;filter:grayscale(1);transition:filter 1.6s ease .2s}
.sb-ch-media.seen figure img{filter:none}
.sb-ch-media figcaption{margin-top:8px;font-size:13px;color:var(--sb-mute)}
.sb-ch-text .st-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:26px;padding:22px 0;border-top:1px solid var(--sb-line);border-bottom:1px solid var(--sb-line);text-align:left}
.sb-ch-text .st-stats.n1{grid-template-columns:minmax(0,1fr)}
.sb-ch-text .st-stats b{display:block;font-family:var(--disp);font-weight:400;font-size:clamp(44px,4vw,64px);line-height:.95;color:#fff}
.sb-ch-text .st-stats span{display:block;margin-top:8px;font-size:13.5px;line-height:1.45;color:var(--sb-mute)}
.sb-full{margin-top:26px}
.sb-full summary{display:inline-flex;align-items:center;gap:10px;min-height:44px;cursor:pointer;list-style:none;font-size:12.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#fff;border-bottom:1px solid #fff}
.sb-full summary::-webkit-details-marker{display:none}
.sb-full summary::after{content:"+";font-size:18px;line-height:1;transition:transform .25s var(--out)}
.sb-full[open] summary::after{transform:rotate(45deg)}
.sb-rest{margin-top:18px;text-align:left}
.sb-rest p{font-size:16px;line-height:1.7}
.sb-rest p+p{margin-top:14px}
.sb-rest a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.sb-ch-media.rv:not(.seen){transform:translateY(48px)}
.sb-ch-media.rv{transition:opacity 1s var(--out),transform 1.2s var(--out)}
.sb-ch-text.rv{transition-delay:.12s}

@media (max-width:900px){
  .sb-tiles,.sb-about{grid-template-columns:minmax(0,1fr);gap:48px}
  .sb-ch{grid-template-columns:28px minmax(0,1fr);row-gap:26px}
  .sb-line{left:14px !important;margin-left:-1px}
  .sb-dot{grid-column:1;grid-row:1;margin-top:8px}
  .sb-l .sb-ch-media,.sb-r .sb-ch-media{grid-column:2;grid-row:1}
  .sb-l .sb-ch-text,.sb-r .sb-ch-text{grid-column:2;grid-row:2;text-align:left}
  .sb-tl ol{gap:96px}
}
@media (max-width:760px){
  .sb-in,.sb .nav{width:calc(100vw - 32px)}
  .sb-hero{padding-top:56px}
  .sb-statement,.sb-sec{padding:80px 0}
  .sb-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sb-stats li,.sb-stats li+li{padding:24px 12px 24px 0;border-left:0}
  .sb-stats li:nth-child(even){padding-left:16px;border-left:1px solid var(--sb-line)}
  .sb-stats li:nth-child(n+3){border-top:1px solid var(--sb-line)}
  .sb-h2-xl{margin-bottom:36px}
  .sb-yr{margin-top:12px}
  .sb .final{padding:96px 0}
  .sb-giant{white-space:normal}
  .sb-shero{padding:40px 0 56px}
  .sb-ch-text .st-stats{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion: reduce){
  .sb-h1,.sb-hero-cta,.sb-face,.sb-giant,.sb-scut{animation:none}
  .sb-img,.sb-ch-media figure img{transition:none;transform:none}
  .sb-ch-media.rv:not(.seen){transform:none}
  .sb main .btn:hover{transform:none}
}
/* option C fixes after the first look: white big years, round timeline dots, the current page visible in the nav,
   chapter numbers as plain big figures, a black footer */
.sb .sb-year,.sb .sb-big{color:#fff !important}
.sb .sb-dot{padding:0;border-radius:50%;font-size:0}
.sb .links>.plain[aria-current],.sb .mlink[aria-current]{color:#fff}
.sb-ch-text .st-stats div{padding:0;border-radius:0;background:none}
.sb-ch-text .st-stats span{font-family:var(--sans);font-size:13.5px;letter-spacing:0;text-transform:none}
.sb .foot{background:#000;border-top:1px solid var(--sb-line)}

/* Option C hero motion (Shane, 30 Oct 2026: tasteful, not over the top, but lively). The headline rises word by word from
   behind a mask, a light passes once across "grow?", a soft light breathes behind the founders, and the page answers the
   reader: the founders lean a few pixels with the pointer, and on scroll the headline drifts back while the founders hold. */
.sb .sb-h1{animation:none;translate:0 calc(var(--sy,0) * 70px);opacity:calc(1 - var(--sy,0) * 1.1)}
.sb-w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .02em .06em;margin-bottom:-.06em}
.sb-w>span{display:inline-block;animation:sbWord 1s var(--out) both;animation-delay:calc(.12s + var(--i) * .09s)}
.sb-w-last>span{background:linear-gradient(100deg,#fff 42%,#7d7d7d 50%,#fff 58%) 130% 0/260% 100% no-repeat,#fff;-webkit-background-clip:text;background-clip:text;color:transparent;animation:sbWord 1s var(--out) both,sbShine 1.5s cubic-bezier(.4,0,.2,1) 1.25s both;animation-delay:calc(.12s + var(--i) * .09s),1.25s}
@keyframes sbWord{from{transform:translateY(108%)}to{transform:none}}
@keyframes sbShine{from{background-position:130% 0,0 0}to{background-position:-30% 0,0 0}}
.sb-hero-cta{animation-delay:.7s}
.sb-glow{position:absolute;left:50%;bottom:0;z-index:-1;width:min(980px,120vw);aspect-ratio:2/1;transform:translateX(-50%);background:radial-gradient(closest-side at 50% 100%,rgba(255,255,255,.24),rgba(255,255,255,.07) 55%,transparent);translate:calc(var(--px,0) * -18px) 0;pointer-events:none;animation:sbBreathe 7s ease-in-out 1.6s infinite alternate both}
@keyframes sbBreathe{from{opacity:.55;scale:.94}to{opacity:1;scale:1.04}}
html.intro-on .sb-hero *{animation-play-state:paused}
@media (prefers-reduced-motion: reduce){
  .sb-w>span,.sb-w-last>span,.sb-glow{animation:none}
  .sb .sb-h1,.sb-glow{translate:none;opacity:1}
  .sb-w-last>span{background:none;color:#fff}
}

/* Option C hero, kept alive after the opening (Shane, 30 Oct 2026: "There is no motion for the mobile version?"). The pointer
   lean only exists on a computer, so on every screen: the founders float a few pixels out of step with each other, the
   light behind them is strong enough to see, the light passes over "grow?" again every eight seconds, and the founders
   come forward slightly as the reader scrolls. */
.sb-w-last>span{animation:sbWord 1s var(--out) both,sbShine 8s cubic-bezier(.4,0,.2,1) 1.25s infinite;animation-delay:calc(.12s + var(--i) * .09s),1.25s}
@keyframes sbShine{0%{background-position:130% 0,0 0}22%,100%{background-position:-30% 0,0 0}}
.sb-glow{bottom:12%;background:radial-gradient(closest-side at 50% 70%,rgba(255,255,255,.3),rgba(255,255,255,.09) 55%,transparent)}
@media (max-width:760px){ .sb-glow{width:150vw;bottom:20%} }
@media (prefers-reduced-motion: reduce){
  .sb-w-last>span{animation:none}
}

/* The founders stay still once they have risen in (Shane, 30 Oct 2026: "keep them static"): no float, no pointer lean,
   no scroll zoom. The opening rise, the light behind them and the light pass over "grow?" stay. */

/* Hamish's homepage and Our Story changes (31 Oct 2026) */

/* hero: the founders either side of the headline, each in a fixed 4 by 5 slot so the final cutouts drop straight in,
   fading into the black at the bottom; on a phone the headline first, then both founders side by side. They rise in
   once and then stay still (Shane, 30 Oct 2026) */
.sb-hero{padding-top:128px;isolation:isolate}
.sb-hero-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.45fr) minmax(0,1fr);grid-template-areas:"l mid r";align-items:end;column-gap:clamp(12px,2vw,32px)}
.sb-hero-mid{grid-area:mid;align-self:center;padding-bottom:clamp(40px,6vw,96px)}
.sb .sb-h1{font-size:clamp(44px,6.6vw,112px);max-width:none}
.sb-face{position:relative;aspect-ratio:4/5;overflow:hidden}
.sb-face-l{grid-area:l;animation:xgRise 1.2s var(--out) .3s both}
.sb-face-r{grid-area:r;animation:xgRise 1.2s var(--out) .5s both}
.sb-face img,.sb-face svg{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0;filter:grayscale(1) contrast(1.08);-webkit-mask-image:linear-gradient(#000 60%,transparent 97%);mask-image:linear-gradient(#000 60%,transparent 97%)}
.sb-face svg{color:#262626}
/* soft sides too, so a placeholder cut with a straight edge never reads as a box */
.sb-face img,.sb-face svg{-webkit-mask-image:linear-gradient(#000 60%,transparent 97%),linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(#000 60%,transparent 97%),linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-composite:intersect}
.sb-glow{bottom:0;translate:none}

/* tighter rhythm: about 96px of room per section on a computer and 56px on a phone, the stats and proof tiles closer */
.sb-statement,.sb-sec{padding:96px 0}
.sb .final{padding:96px 0}
.sb-h2-xl{margin-bottom:44px}
.sb-stats{margin-top:40px}
.sb-stats li{padding:26px 24px 26px 0}
.sb .flag-res{gap:8px}
.sb .flag-res li{padding:14px 20px}

/* the floating Book a call button: on a computer the same button is always in the nav, so it goes; below that it is
   smaller and sits tighter to the corner, so it covers less */
@media (min-width:1181px){ .sb .stick{display:none} }
.sb .stick{height:42px;padding:0 16px;font-size:13px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px))}

/* partner banner under the stats: flat white logos, slow, pausing on hover; moving on phones too (Shane, 2 Nov 2026), still under reduced motion */
.sb-mq{border-top:1px solid var(--sb-line);border-bottom:1px solid var(--sb-line);background:#000 !important;padding-top:40px}
.sb-mq-h{width:min(1240px,calc(100vw - 48px));margin:0 auto 8px;font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--sb-mute)}
.sb-mq .mq-track{animation-duration:70s}
.sb-mq .mq-row li{color:#fff}
.sb-mq .mq-row li::after{background:rgba(255,255,255,.3)}
.sb-mq .mq-row li img,.sb-mq .mq-row li img:hover,.sb-mq .mq-row img[src*="real-flow"]{filter:brightness(0) invert(1);opacity:.92}

/* founders block: words only now the founders are in the hero */
.sb-about{grid-template-columns:minmax(0,1fr);max-width:760px}
.sb-about .sb-link{margin-top:24px}

/* Our Story: whose chapter it is, above the title; a chapter with no photo yet shows its words only */
.sb-when{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.sb-who{display:inline-flex;align-items:center;height:24px;padding:0 10px;border:1px solid rgba(255,255,255,.5);border-radius:999px;color:#fff;letter-spacing:.16em}
.sb-ch-text .quote{margin-top:24px;padding-left:18px;border-left:2px solid #fff}
.sb-ch-media figure img{aspect-ratio:4/3;object-fit:cover;object-position:50% 30%}
.sb-ch-media .st-figs.two{grid-template-columns:1fr 1fr}
.sb-ch-media .st-figs.two figure:first-child:nth-last-child(3){grid-column:1/-1}

@media (max-width:760px){
  .sb-hero{padding-top:80px}
  .sb-hero-in{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"mid mid" "l r";column-gap:10px}
  .sb-hero-mid{padding-bottom:36px}
  .sb .sb-h1{font-size:clamp(52px,15vw,96px)}
  .sb-statement,.sb-sec,.sb .final{padding:56px 0}
  .sb-h2-xl{margin-bottom:28px}
  .sb-stats{margin-top:28px}
  .sb-stats li,.sb-stats li+li{padding-top:18px;padding-bottom:18px}
  .sb-mq{padding-top:28px}
  .sb-mq-h{width:calc(100vw - 32px)}
  .sb-mq .mq-track{animation-duration:24s}
}
@media (prefers-reduced-motion: reduce){
  .sb-face{animation:none}
}
.sb-tl ol{gap:104px}
.sb-nopic .sb-year:not(.w){font-size:clamp(72px,8vw,132px)}
@media (max-width:900px){ .sb-tl ol{gap:72px} }

/* Option C on every other page (Shane, 31 Oct 2026: "I need this theme across all pages"). The inner pages keep their
   layouts; the colours flip to option C's black, white and grey, headings take the tall Anton capitals, cards sit on
   near black between hairlines. */
body.sbx{--bg:#000;--alt:#0A0A0A;--white:#0E0E0E;--ink:#fff;--ink-2:#D6D6D6;--muted:#9A9A9A;--soft:#6A6A6A;--line:rgba(255,255,255,.16);--line-strong:rgba(255,255,255,.3);--dark:#0E0E0E;--dark-2:#161616;--on-dark:#fff;--on-dark-2:#9A9A9A;--dark-line:rgba(255,255,255,.16);--shadow:none}
.sbx main>section{background:var(--bg)}
.sbx main>section+section{border-top:1px solid var(--sb-line)}
.sbx main h1,.sbx .h2,.sbx .h3{font-family:var(--disp);font-weight:400;text-transform:uppercase;letter-spacing:.005em;color:#fff}
.sbx main h1{line-height:.92}
.sbx .h2{font-size:clamp(36px,4.6vw,72px);line-height:.96}
.sbx .h3{font-size:clamp(26px,2.4vw,36px);line-height:1}
.sbx .lead,.sbx .prose p,.sbx main p{color:var(--sb-text)}
.sbx .label{color:var(--sb-mute)}
/* option C edges: square cards, panels and photos, no grid pattern behind the page heads, as on the homepage */
.sbx .phero::before,.sbx .apply::before{display:none}
.sbx main [class]:not(.btn):not(.stick):not(.cta-sm):not(.menu-btn):not(.tag):not(.pm):not(.tile):not(.av):not([class*="dot"]):not(.fc-ph){border-radius:0}
.sbx .fc img,.sbx .apply-faces img,.sbx [class*="avatar"]{border-radius:50%}

/* Hamish's Home, PropTech, Our Story and Real Estate changes (1 Nov 2026) */
/* hero: a wider middle column, the headline on two lines with more air between them and above the button */
@media (min-width:761px){ .sb-hero-in{grid-template-columns:minmax(0,1fr) minmax(0,1.7fr) minmax(0,1fr)} }
.sb .sb-h1{line-height:1.02}
.sb-hero-cta{margin-top:56px}
.sb-hero-sub{max-width:46ch;margin:28px auto 0;font-size:clamp(16px,1.3vw,19px);line-height:1.6}
/* PropTech and Real Estate: the same hero, a smaller headline and an even wider middle; founders above the headline on a phone */
@media (min-width:761px){ .sb-hero-pg .sb-hero-in{grid-template-columns:minmax(0,1fr) minmax(0,2.1fr) minmax(0,1fr)} }
.sb .sb-hero-pg .sb-h1{font-size:clamp(40px,6.1vw,88px);white-space:nowrap}
.sb-hero-pg .sb-hero-cta{margin-top:40px}
/* the statement: centred across the page, two lines on a computer, wrapping freely on a phone */
.sb .sb-big{max-width:none;text-align:center;font-size:clamp(40px,6.6vw,96px)}
@media (max-width:760px){ .sb-big br{display:none} .sb .sb-big{font-size:clamp(30px,9vw,48px)} }
/* the closing founders section: two columns, signature, name and one line each, then one button */
.sb-founders .sb-h2-xl{max-width:none;margin-bottom:56px}
.sb-fnd{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px;max-width:860px;margin:0 auto;text-align:center}
.sb-sig{display:block;width:220px;height:72px;margin:0 auto 14px;object-fit:contain;filter:brightness(0) invert(1)}
.sb-fnd .sb-fnd-n{font-family:var(--disp);text-transform:uppercase;font-size:clamp(26px,2.4vw,36px);line-height:1;color:#fff !important}
.sb-fnd p:not(.sb-fnd-n){font-size:16px !important;margin-top:12px;font-size:16px;line-height:1.6}
.sb-founders .sb-final-cta{margin-top:56px}
.sb-fnd-note{margin-top:18px;font-size:15px !important}
.sb-small{display:inline-block;margin-top:18px;font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--sb-mute);border-bottom:1px solid currentColor;padding-bottom:2px}
.sb-small:hover{color:#fff}
/* Our Story: David beside Hamish in front of the title, each in the same 4 by 5 box */
.sb-scuts{grid-area:1/1;align-self:end;position:relative;z-index:1;display:flex;justify-content:center;align-items:flex-end;gap:clamp(8px,2vw,32px);margin-top:clamp(60px,9vw,150px)}
.sb-scuts .sb-scut{grid-area:auto;margin-top:0;aspect-ratio:4/5;object-fit:contain;object-position:50% 100%}
.sb-scut-d{display:block;height:clamp(260px,34vw,500px);animation-delay:.5s,1.8s}
.sb-scut-d img{display:block;width:100%;height:100%;object-fit:contain;object-position:50% 100%}
.st-credit{font-size:11.5px !important;letter-spacing:.04em}
/* the form straight under the page's closing words */
.forms-final .h2{margin-bottom:16px}
/* Real Estate: every section below the hero on the same left edge, the Rex badge and logo slots */
.re-page main .in.narrow{width:var(--rail);padding-inline:var(--gut);text-align:left}
.re-page main .in.narrow>*{max-width:820px}
.re-page main .in.narrow>.grid2,.re-page main .in.narrow>.steps{max-width:none}
.re-strong{color:#fff !important;font-weight:600}
.rex-badge{display:inline-flex;align-items:center;gap:12px;margin-top:22px;font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#fff !important}
.rex-slot{display:inline-block;flex:none}
.rex-slot.show{outline:1px dashed rgba(255,255,255,.35);outline-offset:2px}
.rex-badge-logo{filter:brightness(0) invert(1)}
.rex-suite-logo{display:block;margin-bottom:24px}
@media (max-width:760px){
  .sb-hero-pg .sb-hero-in{grid-template-areas:"l r" "mid mid"}
  .sb-hero-pg .sb-hero-mid{padding-top:20px}
  .sb .sb-hero-pg .sb-h1{font-size:clamp(36px,11vw,64px)}
  .sb-fnd{grid-template-columns:minmax(0,1fr);gap:36px}
  .sb-scuts .sb-scut,.sb-scut-d{height:clamp(200px,52vw,260px)}
}
/* the phone menu on the black pages: a near black panel with white links (it showed white on white on Home and Our Story) */
.sb .menu{background:#0E0E0E;border:1px solid var(--sb-line);box-shadow:none}
.sb .menu .solo{color:#fff}
.sb .menu .solo[aria-current]{background:rgba(255,255,255,.08)}
/* Our Story hero, the founders level (Shane, 1 Nov 2026). --h is Hamish's whole cutout height. David's file is a square
   crop cut at the chest, so he is drawn at 0.864 of that height, which makes both heads the same size; both boxes are
   0.852 of it tall, so the heads start at the same line and both figures stand on the same baseline (Hamish's hips go
   under the fade at the bottom). The two rise and drift together, never out of step. */
.sb-scuts{--h:clamp(260px,34vw,500px);gap:clamp(4px,1.2vw,20px);animation:xgRise 1.3s var(--out) .35s both,sbDrift 14s ease-in-out 1.6s infinite alternate}
.sb-cut{position:relative;display:block;flex:none;height:calc(var(--h) * .852);overflow:hidden}
.sb-cut img{position:absolute;display:block;max-width:none;filter:grayscale(1) contrast(1.08)}
.sb-cut-h{width:calc(var(--h) * .8)}
.sb-cut-h img{top:0;left:0;width:100%;height:auto}
.sb-cut-d{width:calc(var(--h) * .66)}
.sb-cut-d img{bottom:0;left:calc(var(--h) * -.035);width:calc(var(--h) * .864);height:calc(var(--h) * .864)}
@media (max-width:760px){ .sb-scuts{--h:clamp(200px,56vw,280px)} }
@media (prefers-reduced-motion: reduce){ .sb-scuts{animation:none} }
/* homepage headline: each line stays whole on a computer ("Do you want / to grow?"), phones wrap freely */
@media (min-width:761px){ .sb-h1 .sb-w{white-space:nowrap} .sb-h1{white-space:nowrap} }
@media (min-width:761px){ .sb .sb-hero:not(.sb-hero-pg) .sb-h1{font-size:clamp(44px,6.6vw,100px)} }
/* audit fixes (1 Nov 2026) */
/* banner: the repeated logos only run on the moving loop; the still phone row shows each logo once, with no stray dot */
@media (max-width:760px){ .sb-mq .mq-rep{display:none} .sb-mq .mq-row li:nth-last-child(1 of :not(.mq-rep))::after{display:none} }
@media (prefers-reduced-motion: reduce){ .sb-mq .mq-rep{display:none} }
/* phone menu button readable on every page */
.sb .menu .menu-cta .btn{background:#fff !important;color:#000 !important;border-color:#fff}
/* the same section rhythm on every page: 96px on a computer, 56px on a phone */
.sbx .sec{padding:96px 0}
.sb-tl-sec{padding-bottom:96px}
@media (max-width:760px){ .sbx .sec{padding:56px 0} .sb-tl-sec{padding-bottom:56px} }
/* the statement on phones: 40px floor, wrapping freely */
@media (max-width:760px){ .sb .sb-big{font-size:clamp(40px,10.5vw,56px)} }
/* signature slots: fixed size, hidden until the file arrives */
.sb-sig[hidden]{display:none}
/* Our Story: David's box wide enough that his arm is never cut */
.sb-cut-d{width:calc(var(--h) * .7)}
.sb-cut-d img{left:0}
/* chapter openings: two lines at most until Read the full chapter is opened */
.sb-ch-text>p[data-first]{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
.sb-ch-text:has(.sb-full[open])>p[data-first]{display:block;-webkit-line-clamp:unset;line-clamp:none}
/* the floating Book a call button is gone on every screen (Shane, 1 Nov 2026): the nav button, the phone menu and each
   page's own buttons carry it, and on a phone it passed over the words as you scrolled */
.sb .stick{display:none !important}
/* Home, Hamish's final round (1 Nov 2026): the partners label centred over the logos, and the three gaps around them the
   same, 64px on desktop and 40px on a phone: Updated October 2026 to the divider, the divider to the label, the logos to
   the Full revenue partnership card (the logo row's own bottom space plus the card section's top space) */
body.sb .sb-statement{padding-bottom:64px}
body.sb .sb-mq{padding-top:64px}
body.sb .sb-mq-h{text-align:center}
body.sb .sb-mq .mq-row{padding-bottom:31px}
body.sb #proptech-card{padding-top:31px}
@media (max-width:760px){
  body.sb .sb-statement{padding-bottom:40px}
  body.sb .sb-mq{padding-top:40px}
  body.sb .sb-mq .mq-row{padding-bottom:17px}
  body.sb #proptech-card{padding-top:17px}
}
/* Real Estate (1 Nov 2026): the small line under the partner badge */
.re-built{margin-top:10px;font-size:14px;color:var(--sb-mute) !important}
/* Hamish's final round (2 Nov 2026). Stat grid: the numbers scale to their column so 43,000+ always fits on one line,
   all the same size, a little right padding on each, labels level. 3.25em is the width of 43,000+ in Anton plus room. */
body.sb .sb-stats{container-type:inline-size;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));--pad:60px}
body.sb .sb-stats li{padding-right:32px}
body.sb .sb-n{white-space:nowrap;font-size:min(6.4vw,104px,calc((100cqi / var(--cols,3) - var(--pad)) / 3.25))}
/* Every gap about 64px: the card to the divider, and the divider to You deal with the founders */
body.sb #proptech-card{padding-bottom:64px}
body.sb #team{padding-top:63px}
/* The closing section: signatures only, writing on left to right once (1.3s with its delay), static with reduced motion */
.sb-sig-w{display:block;width:240px;max-width:100%;aspect-ratio:3/1;margin:0 auto 14px}
.sb-sig-w .sb-sig{width:100%;height:100%;margin:0;object-fit:contain;filter:none}
.sb-fnd li.rv .sb-sig-w{clip-path:inset(0 100% 0 0);transition:clip-path 1.1s cubic-bezier(.45,.05,.35,1) .2s}
.sb-fnd li.rv.seen .sb-sig-w{clip-path:inset(0 0 0 0)}
body.sb .sb-founders{padding-bottom:160px}
/* The partner logos in the Full revenue partnership card, flat white like the strip */
.flag-res .flag-logo{display:block;height:var(--h);width:auto;max-width:132px;object-fit:contain;filter:brightness(0) invert(1);opacity:.92;flex:none}
@media (max-width:760px){
  body.sb .sb-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.sb .sb-n{font-size:calc((50cqi - 40px) / 3.25)}
  body.sb .sb-stats li{padding-right:16px}
  body.sb #proptech-card{padding-bottom:40px}
  body.sb #team{padding-top:39px}
  body.sb .sb-founders{padding-bottom:112px}
  .sb-sig-w{width:200px}
  .flag-res .flag-logo{max-width:104px;height:calc(var(--h) * .85)}
}
@media (prefers-reduced-motion:reduce){ .sb-fnd li.rv .sb-sig-w{clip-path:none;transition:none} }