@font-face{font-family:'Manrope';font-weight:200 800;font-display:swap;src:url(../fonts/manrope.woff2) format('woff2')}
  @font-face{font-family:'Fraunces';font-weight:300;font-style:normal;font-display:swap;src:url(../fonts/fraunces.woff2) format('woff2')}
  @font-face{font-family:'PlexMono';font-weight:400 600;font-display:swap;src:url(../fonts/plexmono.woff2) format('woff2')}
  :root{
    --ink:#0A1F4D; --ink-2:#0C2A63; --cream:#E5EDF8; --cream-2:#D8E3F4;
    --gold:#C8102E; --gold-lo:#A00C22; --gold-hi:#E01B30; --red:#C8102E;
    --amber:#ECB84C; /* warm gold accent — legible on navy, distinct from white/red/blue */
    --white:#fff; --muted:rgba(255,255,255,.70); --muted-2:rgba(255,255,255,.52);
    --line:rgba(255,255,255,.16); --line-d:rgba(10,31,77,.16);
    --e:cubic-bezier(.22,1,.36,1); --maxw:1440px;
  }
  *{box-sizing:border-box;margin:0}
  html{-webkit-text-size-adjust:100%;overflow-x:clip}
  body{background:var(--ink);color:var(--white);font-family:'Manrope',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:clip;line-height:1.5}
  a{color:inherit;text-decoration:none}
  img{display:block;max-width:100%}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(18px,3.4vw,48px)}
  .mono{font-family:'PlexMono',ui-monospace,Menlo,monospace}
  .kick{font-family:'PlexMono',ui-monospace,monospace;font-size:.82rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-hi);display:inline-flex;align-items:center;gap:12px}
  .kick::before{content:"";width:30px;height:1px;background:var(--gold)}
  /* moving dot-marquee eyebrow */
  .eyebrow{overflow:hidden;max-width:230px;-webkit-mask:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
  .etrack{display:inline-flex;align-items:center;white-space:nowrap;animation:marq 11s linear infinite;
    font-family:'PlexMono',monospace;font-size:.82rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-lo);will-change:transform}
  .etrack span{padding:0 12px}
  .etrack i{color:inherit;font-style:normal;font-size:.9em;line-height:1}
  @keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
  @media(prefers-reduced-motion:reduce){.etrack{animation:none}}
  /* ---------- floating pill nav ---------- */
  .navwrap{position:fixed;top:0;left:0;right:0;z-index:100;padding:18px clamp(18px,3.4vw,48px)}
  .pill{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;gap:20px;
    background:rgba(10,31,77,.55);backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);
    border:1px solid rgba(255,255,255,.12);border-radius:60px;padding:9px 9px 9px 22px;
    transition:max-width .55s var(--e),background .5s var(--e),border-color .5s,box-shadow .5s}
  .scrolled .pill{max-width:1080px;background:#0A1D45;border-color:rgba(255,255,255,.06);box-shadow:0 18px 50px rgba(0,0,0,.4)}
  /* over the dark stat stage: glass pill like the hero, so it doesn't blend navy-on-navy */
  .on-statdark .pill{background:rgba(12,26,63,.45);backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);border-color:rgba(255,255,255,.28);box-shadow:0 20px 54px rgba(0,0,0,.5)}
  .brand{display:flex;align-items:center;white-space:nowrap}
  .brand img{height:58px;width:auto;background:#fff;border-radius:9px;padding:2px 7px;box-shadow:0 6px 18px rgba(0,0,0,.18)}
  .scrolled .brand img{height:48px}
  .nlinks{display:flex;align-items:center;gap:2px;flex:1;justify-content:center}
  .nlinks a{position:relative;display:inline-flex;align-items:center;gap:5px;padding:9px 15px;font-size:.9rem;font-weight:500;color:rgba(255,255,255,.82);border-radius:40px;transition:color .3s,background .3s}
  .nlinks a:hover{color:#fff;background:rgba(255,255,255,.07)}
  .nlinks a.active{color:#fff}
  .nlinks a .cv{display:inline-flex;align-items:center;margin-top:1px}
  .nlinks a .cv svg{width:11px;height:11px;stroke:#fff;transition:transform .35s var(--e)}
  .nlinks a.active::after{content:"";position:absolute;left:15px;right:15px;bottom:3px;height:2px;border-radius:2px;background:var(--gold)}
  /* hover dropdowns (About / Services) */
  .ndrop{position:relative}
  .ndrop::after{content:"";position:absolute;left:0;right:0;top:100%;height:16px}
  .dmenu{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(8px);
    min-width:220px;background:#0B2560;border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:8px;
    box-shadow:0 26px 64px rgba(0,0,0,.5);opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .32s var(--e),transform .32s var(--e);z-index:130}
  .ndrop:hover .dmenu{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
  .ndrop:hover .cv svg{transform:rotate(180deg)}
  .dmenu a{display:block;padding:11px 15px;font-size:.85rem;font-weight:500;color:rgba(255,255,255,.82);border-radius:11px;white-space:nowrap;transition:background .25s,color .25s}
  .dmenu a:hover{background:rgba(255,255,255,.08);color:#fff}
  .nright{display:flex;align-items:center;gap:12px}
  .cart{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.22);display:grid;place-items:center;color:#fff;transition:background .3s,border-color .3s}
  .cart:hover{background:rgba(255,255,255,.08);border-color:var(--gold-hi)}
  .cart svg{width:19px;height:19px}
  .book{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:.86rem;padding:12px 20px;border-radius:44px;color:#fff;white-space:nowrap;
    background:linear-gradient(120deg,var(--gold-hi),var(--gold));box-shadow:0 8px 24px rgba(200,16,46,.35);transition:transform .3s var(--e),box-shadow .3s}
  .book .dot{width:24px;height:24px;border-radius:50%;background:#fff;color:var(--gold-hi);display:grid;place-items:center}
  .dot svg{width:13px;height:13px}
  .book:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(200,16,46,.5)}
  /* account control in .nright, BEFORE the quote button. Kept compact so it never
     widens the nav: signed out is a small text link only; signed in is a small avatar
     with a greeting + first name beneath it. */
  .bb-acct{display:inline-flex;align-items:center;text-decoration:none;color:#fff;white-space:nowrap;
    transition:color .3s,opacity .3s,transform .3s var(--e)}
  .bb-acct--out{font-weight:700;font-size:.9rem;padding:6px 2px}
  .bb-acct--out:hover,.bb-acct--out:focus-visible{color:var(--gold-hi)}
  .bb-acct--in{flex-direction:column;gap:3px;line-height:1;padding:2px}
  .bb-acct--in:hover{transform:translateY(-1px)}
  .bb-acct-av{flex:none;width:38px;height:38px;border-radius:50%;overflow:hidden;display:grid;place-items:center;
    background:linear-gradient(120deg,#2f5bc4,#1e3f8f);color:#fff;font-weight:800;font-size:.98rem;text-transform:uppercase}
  .bb-acct-av img{width:100%;height:100%;object-fit:cover;display:block}
  .bb-acct-hi{font-size:.58rem;font-weight:500;color:rgba(255,255,255,.8);max-width:90px;overflow:hidden;text-overflow:ellipsis}
  .bb-acct-hi b{font-weight:500;color:#fff}
  @media(max-width:1080px){.bb-acct-hi{display:none}}
  /* avatar menu: hover (or keyboard focus) opens the My Account sections. Same visual
     language as the primary-nav .dmenu, right-aligned so it never leaves the viewport.
     CSS only — no JS, so it cannot interfere with the nav script. */
  .bb-acctwrap{position:relative;display:inline-flex}
  .bb-acctwrap::after{content:"";position:absolute;left:0;right:0;top:100%;height:16px}
  .bb-acct-menu{position:absolute;top:calc(100% + 14px);right:0;transform:translateY(8px);
    min-width:232px;background:#0B2560;border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:8px;
    box-shadow:0 26px 64px rgba(0,0,0,.5);opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .32s var(--e),transform .32s var(--e);z-index:130}
  .bb-acctwrap:hover .bb-acct-menu,.bb-acctwrap:focus-within .bb-acct-menu{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}
  .bb-acct-menu-head{margin:0 0 6px;padding:9px 15px 11px;border-bottom:1px solid rgba(255,255,255,.12);
    font-size:.85rem;font-weight:600;color:#fff;line-height:1.25}
  .bb-acct-menu-head span{display:block;margin-top:3px;font-size:.72rem;font-weight:400;color:rgba(255,255,255,.6);
    overflow:hidden;text-overflow:ellipsis}
  .bb-acct-menu a{display:block;padding:11px 15px;font-size:.85rem;font-weight:500;color:rgba(255,255,255,.82);
    border-radius:11px;white-space:nowrap;text-decoration:none;transition:background .25s,color .25s}
  .bb-acct-menu a:hover,.bb-acct-menu a:focus-visible{background:rgba(255,255,255,.08);color:#fff}
  .bb-acct-menu-out{margin-top:6px;border-top:1px solid rgba(255,255,255,.12);border-radius:0 0 11px 11px;color:rgba(255,255,255,.62)}
  @media(prefers-reduced-motion:reduce){.bb-acct-menu{transition:none}}
  .burger{display:none}
  @media(max-width:1080px){.nlinks{display:none}.burger{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.08);margin-left:auto}
    .burger span{width:18px;height:2px;background:#fff;position:relative;box-shadow:0 -6px #fff,0 6px #fff}
    .navwrap.nav-open .nlinks{display:flex;flex-direction:column;align-items:stretch;gap:2px;
      position:absolute;top:calc(100% + 10px);left:clamp(12px,3vw,24px);right:clamp(12px,3vw,24px);
      padding:14px;border-radius:18px;background:rgba(9,20,48,.97);
      -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
      border:1px solid var(--line);box-shadow:0 30px 80px rgba(0,0,0,.5);z-index:60;max-height:calc(100vh - 108px);max-height:calc(100dvh - 108px);overflow-y:auto;-webkit-overflow-scrolling:touch}
    .navwrap.nav-open .nlinks a{width:100%;justify-content:flex-start}
    .navwrap.nav-open .dmenu{position:static;transform:none;opacity:1;visibility:visible;pointer-events:auto;
      box-shadow:none;background:transparent;padding-left:12px}}

  /* ---------- hero ---------- */
  .hero{position:relative;min-height:clamp(520px,80svh,760px);display:flex;align-items:stretch;overflow:hidden;padding-top:clamp(112px,13vh,150px);padding-bottom:clamp(24px,3.4vw,44px)}
  .media{position:absolute;inset:0;z-index:0;overflow:hidden;will-change:transform,opacity}
  .media video,.media .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 38%}
  .media .poster{background-size:cover;background-position:center 30%;transform:none;animation:none}
  @keyframes kb{to{transform:scale(1.16) translate(-1.5%,-1%)}}
  .media video{opacity:1}
  .media.playing video{opacity:1}
  .media::after{content:"";position:absolute;inset:0;
    background:linear-gradient(90deg,rgba(8,24,64,.92) 0%,rgba(8,24,64,.66) 34%,rgba(8,24,64,.18) 62%,rgba(8,24,64,.42) 100%),
    linear-gradient(0deg,rgba(8,24,64,.9) 2%,rgba(8,24,64,.05) 46%)}
  @media(prefers-reduced-motion:reduce){.media .poster{animation:none}}

  .hero>.wrap{width:100%;display:flex}
  .hgrid{position:relative;z-index:2;width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:40px;align-items:stretch}

  .hcopy{max-width:680px;display:flex;flex-direction:column;justify-content:center;gap:clamp(24px,4vh,44px);padding-bottom:2vh}
  .hcopy h1{font-weight:800;letter-spacing:-.028em;line-height:.9;font-size:clamp(3.3rem,7.4vw,7.3rem);text-transform:none}
  .hcopy h1 .l2{color:var(--gold-hi);display:block}
  .hbot{display:flex;flex-direction:column;align-items:flex-start;gap:26px;max-width:500px}
  .hsub{font-size:clamp(1.02rem,1.35vw,1.22rem);color:var(--muted);line-height:1.5}
  .hactions{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
  .cta{display:inline-flex;align-items:center;gap:14px;font-weight:600;font-size:1rem;padding:16px 26px 16px 16px;border-radius:50px;color:#fff;
    background:linear-gradient(120deg,var(--gold-hi),var(--gold));box-shadow:0 12px 34px rgba(200,16,46,.4);transition:transform .3s var(--e),box-shadow .3s}
  .cta .dot{width:34px;height:34px;border-radius:50%;background:#fff;color:var(--gold-hi);display:grid;place-items:center;transition:transform .35s var(--e)}
  .cta .dot svg{width:16px;height:16px}
  .cta:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(200,16,46,.55)}
  .cta:hover .dot{transform:translateX(3px)}
  .cta.ghost{background:transparent;border:1px solid var(--line);color:#fff;box-shadow:none;padding:16px 26px}
  .cta.ghost:hover{border-color:var(--gold-hi);background:rgba(255,255,255,.04)}

  .htrust{margin-top:40px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
  .tlogos{display:flex;align-items:center}
  .tlogos .chip{width:46px;height:46px;border-radius:50%;background:#fff;display:grid;place-items:center;margin-left:-10px;border:2px solid rgba(255,255,255,.9);box-shadow:0 4px 14px rgba(0,0,0,.3);overflow:hidden}
  .tlogos .chip:first-child{margin-left:0}
  .tlogos .chip img{width:78%;height:78%;object-fit:contain}
  .tlogos .chip.fmb{background:var(--red)}
  .tlogos .chip.fmb img{width:100%;height:100%}
  .ttext{font-size:.9rem;color:var(--muted);max-width:24ch;line-height:1.4}
  .ttext b{color:#fff;font-weight:700}

  /* ---------- right: auto-cycling accreditation deck (3 small cards) ---------- */
  .accred{position:relative;width:270px;justify-self:end;align-self:flex-end;display:flex;flex-direction:column;gap:18px}
  .deck{position:relative;height:216px}
  .dcard{position:absolute;bottom:0;right:0;width:150px;height:206px;border-radius:16px;overflow:hidden;transform-origin:right bottom;
    background:linear-gradient(165deg,#ffffff,#dce7f6);border:1px solid rgba(255,255,255,.55);box-shadow:0 20px 44px rgba(0,0,0,.46);
    transition:transform .7s var(--e),opacity .7s var(--e);display:flex;flex-direction:column}
  .dcard{pointer-events:none}                          /* only the front badge is clickable */
  .dcard.s-front{pointer-events:auto;cursor:pointer}
  .dcard .im{flex:1;display:grid;place-items:center;padding:26px 18px 16px;transition:opacity .45s var(--e)}
  .dcard .im img{max-width:100%;max-height:100%;object-fit:contain}
  .dcard.red .im{background:var(--red)}
  .dcard .dl{padding:9px 10px;background:rgba(10,31,77,.92);color:#fff;font-family:'PlexMono',monospace;
    font-size:.58rem;letter-spacing:.09em;text-transform:uppercase;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .dcard .rd{position:absolute;top:11px;right:11px;width:9px;height:9px;border-radius:50%;background:var(--red);box-shadow:0 0 0 3px rgba(176,23,58,.3);opacity:0}
  .dcard.red .rd{opacity:1}
  .dcard.s-front{transform:translate(0,0) scale(1);opacity:1;z-index:4}
  .dcard.s-mid{transform:translate(-52px,-14px) scale(.9);opacity:.72;z-index:3}
  .dcard.s-back{transform:translate(-92px,-26px) scale(.8);opacity:.46;z-index:2}
  .dcard.s-deep{transform:translate(-122px,-35px) scale(.72);opacity:.22;z-index:1}
  .dcard.s-out{transform:translate(54px,14px) scale(1.04);opacity:0;z-index:5}
  .dcard.s-hidden{transform:translate(-122px,-35px) scale(.72);opacity:0;z-index:0}
  .acounter{display:flex;align-items:center;gap:14px;color:#fff}
  .acounter .n{font-family:'PlexMono',monospace;font-size:.9rem;color:rgba(255,255,255,.9);min-width:22px;font-variant-numeric:tabular-nums}
  .acounter .n.tot{color:var(--muted-2);text-align:right}
  .abar{flex:1;height:2px;background:rgba(255,255,255,.18);border-radius:2px;overflow:hidden;position:relative}
  .abar i{position:absolute;left:0;top:0;height:100%;width:0;background:linear-gradient(90deg,var(--gold),var(--gold-hi));transition:width .6s linear}
  .accap{font-family:'PlexMono',monospace;font-size:clamp(.82rem,1vw,.95rem);letter-spacing:.05em;text-transform:uppercase;color:var(--muted-2);line-height:1.5}

  @media(max-width:1000px){
    .hgrid{grid-template-columns:1fr}
    .accred{display:none}
    .hero{align-items:flex-end;padding-top:130px}
  }


  /* ---------- why-choose : pinned diagonal "stairs" section (cream) ---------- */
  .why{position:relative;background:var(--cream);color:var(--ink);border-radius:44px 44px 0 0;z-index:5}
  .why .kick{color:var(--gold-lo)} .why .kick::before{background:var(--gold-lo)}
  .whywrap{position:relative;min-height:68vh;padding:clamp(66px,8.5vh,110px) clamp(18px,3.4vw,48px) clamp(12px,1.6vh,24px)}
  .creamtail{height:64vh;background:var(--cream)}
  /* left block (heading + points + wide FMB) */
  .whyLeft{position:relative;z-index:2;max-width:none;padding-left:0}
  .whyLeft h2{font-weight:800;letter-spacing:-.03em;line-height:1.02;font-size:clamp(2.1rem,4vw,3.4rem);margin:14px 0 clamp(22px,3vh,36px);max-width:470px}
  .whyLeft h2 em{font-style:normal;color:var(--red)}
  .pts{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(4,auto);grid-auto-flow:column;
    gap:22px 32px;margin-bottom:clamp(24px,3.2vh,38px);max-width:500px}
  .pts li{display:flex;flex-direction:row;align-items:center;gap:15px;font-weight:600;font-size:1rem;line-height:1.24;letter-spacing:-.01em;color:var(--ink)}
  .pts .ic{flex:none;width:48px;height:48px;border-radius:13px;background:var(--ink);box-shadow:0 8px 20px rgba(11,20,28,.14);display:grid;place-items:center}
  .pts .ic img{width:23px;height:23px;object-fit:contain;filter:brightness(0) invert(1)}
  .pts li.hl .ic{background:var(--red)}
  /* FMB block — stretched wide */
  .fmbBlock{display:flex;align-items:center;gap:26px;background:#fff;border:1px solid var(--line-d);border-radius:20px;
    padding:24px 34px;max-width:820px;box-shadow:0 22px 54px rgba(11,20,28,.09)}
  .fmbBlock .lg{flex:none;width:96px;background:var(--red);border-radius:12px;padding:9px}
  .fmbBlock .lg img{width:100%;display:block}
  .fmbBlock p{color:#48535f;font-size:1.02rem;line-height:1.55;max-width:60ch}
  .fmbBlock p b{color:var(--ink);font-weight:700}
  /* right: diagonal fan of full cards — evenly spaced, all visible at once (no scroll reveal) */
  .whyRight{position:absolute;z-index:3;top:clamp(84px,11.5vh,132px);right:0;width:min(63%,842px);height:70vh;pointer-events:none}
  .scard{position:absolute;width:min(94%,286px);border-radius:22px;overflow:hidden;background:#fff;text-decoration:none;color:var(--ink);pointer-events:auto;opacity:.32;filter:grayscale(.9) brightness(1.05) contrast(.95);
    box-shadow:0 36px 82px rgba(11,20,28,.24);border:1px solid rgba(11,20,28,.06);transition:transform .4s var(--e),box-shadow .4s;will-change:transform,opacity}
  .scard:hover{transform:translateY(-5px);box-shadow:0 44px 94px rgba(11,20,28,.32)}
  .scard .ph{position:relative;aspect-ratio:16/9;overflow:hidden}
  .scard .ph img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--e)}
  .scard:hover .ph img{transform:scale(1.05)}
  .scard .ph .rb{position:absolute;left:0;bottom:0;height:5px;width:100%;background:var(--red)}
  .scard .num{position:absolute;top:14px;left:14px;font-family:'PlexMono',monospace;font-size:.66rem;letter-spacing:.14em;color:#fff;
    background:rgba(10,31,77,.55);backdrop-filter:blur(4px);padding:6px 11px;border-radius:20px}
  .scard .bd{padding:17px 22px 20px}
  .scard h3{font-weight:800;font-size:1.28rem;letter-spacing:-.02em}
  .scard p{margin-top:9px;color:#4a5560;font-size:.92rem;line-height:1.48}
  .scard .go{margin-top:14px;display:inline-flex;align-items:center;gap:8px;font-family:'PlexMono',monospace;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-lo)}
  .sc1{top:0;left:0;z-index:1}
  .sc2{top:96px;left:32%;z-index:2}
  .sc3{top:192px;left:64%;z-index:3}
  .fan-nav{display:none}
  /* ---------- stats bar: slim full-width navy band, horizontal counters (count up from 0) ---------- */
  .statbar{background:var(--ink);color:#fff;margin-top:clamp(26px,3.6vh,44px)}   /* space below the accreditation card */
  .statbar-inner{max-width:var(--maxw);margin:0 auto;
    display:grid;grid-template-columns:repeat(4,1fr);align-items:start;gap:clamp(16px,2.4vw,40px);
    padding:clamp(11px,1.6vh,18px) clamp(18px,3.4vw,48px)}
  .statcell{display:flex;flex-direction:column;align-items:center;gap:clamp(2px,.4vh,6px);text-align:center}
  .stnum{display:inline-flex;align-items:baseline;gap:2px;font-weight:700;letter-spacing:-.015em;line-height:1;
    font-size:clamp(1.3rem,2.1vw,1.95rem);font-variant-numeric:tabular-nums lining-nums}
  .stnum .su{color:var(--red);font-weight:700;font-size:.68em}
  .stlbl{font-weight:500;font-size:clamp(.74rem,.86vw,.9rem);color:rgba(255,255,255,.82);letter-spacing:.01em}

  /* ---------- trust: partner strip + centred intro + accreditation marquee ---------- */
  .trust{background:var(--cream);color:var(--ink);position:relative;z-index:5;padding:clamp(30px,3.4vh,38px) 0 clamp(30px,3.4vh,38px)}
  .pstrip{display:flex;align-items:center;gap:clamp(16px,2.4vw,30px);
    font-family:'PlexMono',monospace;font-weight:700;font-size:clamp(.76rem,.92vw,.88rem);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-lo)}
  .pstrip .pdots{flex:1;height:0;align-self:flex-end;margin-bottom:.32em;border-top:3px dotted rgba(10,31,77,.62)}
  .pstrip .pr{color:var(--ink);opacity:.85;white-space:nowrap}
  .intro{max-width:768px;margin:clamp(40px,6vh,80px) auto 0;text-align:center;display:flex;flex-direction:column;gap:16px}
  .intro h2{font-weight:800;letter-spacing:-.025em;line-height:1.05;font-size:clamp(1.9rem,3.5vw,3.1rem);margin-bottom:6px;text-wrap:balance}
  .intro p{color:#4a5560;font-size:clamp(1rem,1.12vw,1.12rem);line-height:1.66}
  .acmarq{margin-top:clamp(20px,3vh,36px);overflow:hidden;
    -webkit-mask:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
  .actrack{display:flex;width:max-content;gap:16px;animation:acmove 26s linear infinite;will-change:transform}
  .actrack:hover{animation-play-state:paused}
  @keyframes acmove{from{transform:translateX(0)}to{transform:translateX(-50%)}}
  .accard{flex:none;display:flex;align-items:center;gap:15px;background:#fff;border:1.5px solid rgba(10,31,77,.5);
    border-radius:18px;padding:14px 26px 14px 15px;box-shadow:0 12px 30px rgba(11,20,28,.06);
    text-decoration:none;cursor:pointer;transition:transform .3s var(--e),box-shadow .3s var(--e),border-color .3s var(--e)}
  .accard:hover{transform:translateY(-3px);border-color:var(--gold);box-shadow:0 18px 40px rgba(11,20,28,.12)}
  .accard .lg{width:48px;height:48px;flex:none;border-radius:12px;display:grid;place-items:center;overflow:hidden;background:#e3ebf8;border:1px solid rgba(11,20,28,.05)}
  .accard .lg img{max-width:80%;max-height:80%;object-fit:contain}
  .accard.red .lg{background:var(--red);border-color:transparent}
  .accard.red .lg img{max-width:100%;max-height:100%}
  .accard .nm{font-weight:600;font-size:.98rem;color:var(--ink);white-space:nowrap;letter-spacing:-.01em}
  @media(prefers-reduced-motion:reduce){.actrack{animation:none;flex-wrap:wrap;justify-content:center}}

  /* ---------- services: stacking cards ---------- */
  .svc{background:var(--cream);color:var(--ink);position:relative;z-index:5;padding:clamp(30px,3.4vh,38px) 0 clamp(30px,3.4vh,38px)}
  .svchead{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;margin-bottom:clamp(20px,3vh,32px);flex-wrap:wrap}
  .svchl .eyebrow{margin-bottom:18px}
  .svchl .etrack{color:var(--gold-hi);font-family:'PlexMono',ui-monospace,monospace;font-size:.82rem;letter-spacing:.22em;text-transform:uppercase}
  .svchl h2{font-weight:800;letter-spacing:-.03em;line-height:1.03;font-size:clamp(2.1rem,4.1vw,3.5rem);max-width:15ch;text-wrap:balance}
  .cta.sm{font-size:.92rem;padding:12px 22px 12px 12px;box-shadow:0 8px 22px rgba(200,16,46,.32)}
  .cta.sm .dot{width:28px;height:28px}
  .cta.sm .dot svg{width:14px;height:14px}
  /* padding-bottom gives the deck a "tail": sticky containment extends past the last
     card so the back cards can reach their staircase offset and hold, instead of the
     container bottom shoving the last two together (2nd-last too high, last too low). */
  .svcstack{position:relative;padding-bottom:clamp(10px,1.6vh,26px)}
  /* stacking cards: each sticks near the top as you scroll and piles into a deck,
     fanned a touch to the right so the pile reads as separate cards, not one block */
  .svccard{position:sticky;top:calc(96px + var(--i,0) * 20px);
    display:grid;grid-template-columns:1fr 1.04fr;align-items:center;gap:clamp(18px,2.4vw,40px);
    background:#b9c6e4;border-radius:26px;padding:clamp(16px,1.7vw,26px);
    box-shadow:0 28px 70px rgba(10,31,77,.22);border:1.75px solid var(--ink);
    min-height:clamp(216px,24vh,292px);max-width:1000px;margin:0 auto clamp(16px,2.2vh,26px);
    transform:translateX(calc(var(--i,0) * 22px))}
  .svccard:last-child{margin-bottom:0}
  .svcinfo{padding:clamp(18px,1.9vw,30px);display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:clamp(9px,1.2vh,15px);position:relative;align-self:stretch;background:var(--cream);border:1.5px solid rgba(10,31,77,.5);border-radius:18px}
  .svcic{width:52px;height:52px;flex:none;border-radius:14px;border:1.5px solid var(--gold);display:grid;place-items:center;color:var(--gold-lo)}
  .svcic svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
  .svcnum{position:absolute;top:clamp(16px,1.8vw,34px);right:clamp(16px,1.8vw,34px);font-family:'PlexMono',monospace;font-size:.8rem;letter-spacing:.12em;color:var(--gold-lo)}
  .svccard h3{font-weight:800;letter-spacing:-.02em;line-height:1.08;font-size:clamp(1.45rem,2.3vw,2.05rem);margin-top:2px}
  .svcinfo p{color:#4a5560;font-size:clamp(.96rem,1.05vw,1.06rem);line-height:1.58;max-width:44ch}
  .svcinfo .cta{margin-top:clamp(8px,1.4vh,18px)}
  .svcph{position:relative;overflow:hidden;border-radius:18px;align-self:stretch;min-height:clamp(188px,23vh,286px);background:#dbe6f6}
  .svcph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s var(--e)}
  .svccard:hover .svcph img{transform:scale(1.04)}

  /* back-to-top (hero) button */
  .totop{position:fixed;right:clamp(20px,3vw,40px);bottom:clamp(20px,3vw,36px);z-index:120;width:54px;height:54px;border-radius:16px;border:none;cursor:pointer;
    display:grid;place-items:center;background:var(--ink);color:#fff;
    box-shadow:0 14px 34px rgba(200,16,46,.42);opacity:0;pointer-events:none;
    transform:translateY(18px);transition:opacity .4s var(--e),transform .4s var(--e),box-shadow .3s}
  .totop.on{opacity:1;pointer-events:auto;transform:translateY(0)}
  .totop.on:hover{transform:translateY(-4px);box-shadow:0 18px 42px rgba(200,16,46,.55)}
  .totop svg{width:21px;height:21px}
  /* over a navy/blue section the dark button vanishes — flip it to a white button so the arrow reads */
  .totop.light{background:#fff;color:var(--ink);box-shadow:0 14px 34px rgba(10,31,77,.45)}
  .totop.light.on:hover{box-shadow:0 18px 42px rgba(10,31,77,.55)}

  /* ---------- 404 and the generic page fallback ----------------------------
     Both templates ship classes that nothing styled: a wrong URL landed on raw
     text bleeding off the left edge, under the fixed nav, with the buttons as
     bare links. .bb-wrap is the container both of them ask for. */
  .bb-wrap{max-width:var(--maxw);margin:0 auto;padding-left:clamp(18px,3.4vw,48px);padding-right:clamp(18px,3.4vw,48px)}

  .bb-404{min-height:70vh;display:flex;flex-direction:column;justify-content:center;
    padding-top:clamp(150px,20vh,230px);padding-bottom:clamp(60px,8vh,110px)}
  /* the shared .eyebrow is a 230px masked window built for the marquee, which
     clipped this plain kicker to "rror 404" — undo it here */
  .bb-404 .eyebrow{overflow:visible;max-width:none;-webkit-mask:none;mask:none;
    font-family:'PlexMono',ui-monospace,monospace;font-size:.82rem;letter-spacing:.22em;
    text-transform:uppercase;color:var(--gold-hi);margin:0 0 16px}
  .bb-404 h1{font-family:'Manrope',system-ui,sans-serif;font-weight:800;letter-spacing:-.035em;
    line-height:1.02;font-size:clamp(2.4rem,5.6vw,4.2rem);margin:0;max-width:16ch;text-wrap:balance}
  .bb-404>p{margin:clamp(14px,2vw,20px) 0 0;max-width:56ch;font-size:clamp(1rem,1.3vw,1.12rem);
    line-height:1.6;color:var(--muted)}
  .bb-404-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(24px,3vw,34px)}
  .bb-btn{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;
    padding:13px 24px;font-weight:800;font-size:.96rem;letter-spacing:-.01em;
    background:transparent;color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.3);
    transition:transform .3s var(--e),background .3s var(--e),box-shadow .3s var(--e)}
  .bb-btn:hover,.bb-btn:focus-visible{transform:translateY(-2px);box-shadow:inset 0 0 0 2px #fff}
  .bb-btn-primary{background:var(--gold);box-shadow:0 16px 30px -16px rgba(200,16,46,.8)}
  .bb-btn-primary:hover,.bb-btn-primary:focus-visible{background:var(--gold-hi);box-shadow:0 18px 34px -16px rgba(200,16,46,.9)}

  .bb-generic{padding-top:clamp(140px,18vh,200px);padding-bottom:clamp(50px,7vh,90px)}
  .bb-generic-title{font-family:'Manrope',system-ui,sans-serif;font-weight:800;letter-spacing:-.03em;
    line-height:1.05;font-size:clamp(2rem,4.2vw,3.2rem);margin:0}
  .bb-generic-body{margin-top:clamp(16px,2vw,24px);max-width:72ch;font-size:1.02rem;line-height:1.7;color:var(--muted)}
  .bb-generic-body a{color:#fff;text-decoration:underline;text-underline-offset:2px}
  @media(prefers-reduced-motion:reduce){.bb-btn:hover,.bb-btn:focus-visible{transform:none}}

  /* Narrowed desktop (981–1400): keep the desktop composition instead of the
     old full-width card-row reflow — heading + points on the left, the diagonal
     card fan on the right, and the FMB accreditation as a full-width bar across
     the bottom (a 2-column grid; the FMB spans both columns in row 2). Below 981
     the rule further down stacks everything to one column for phones. */
  @media(min-width:981px) and (max-width:1400px){
    .whywrap{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:clamp(20px,2.6vw,44px);row-gap:clamp(16px,2vh,28px);align-items:start;min-height:0;padding-top:clamp(56px,7vh,90px);padding-bottom:clamp(14px,1.8vh,26px)}
    .whyLeft{grid-column:1;grid-row:1;max-width:none}
    .pts{margin-bottom:0}
    /* the 3 service cards overlap too much to read side-by-side at this width, so
       they become a click carousel: stacked in 3 slots, the .fan-nav arrow rotates
       which card is fully in front. */
    .whyRight{--fan-w:clamp(380px,calc(100vw - 620px),600px);--fan-c:clamp(230px,24vw,286px);--fan-vstep:clamp(76px,9.4vw,112px);
      grid-column:2;grid-row:1 / span 2;position:relative;display:block;width:var(--fan-w);height:clamp(600px,58vw,650px);top:auto;margin-top:2px;pointer-events:auto;overflow:visible}
    .scard{position:absolute;top:0;left:0;width:var(--fan-c);box-shadow:0 26px 60px rgba(11,20,28,.22)}
    .whyRight.fan-anim .scard{transition:transform .55s var(--e),opacity .4s,box-shadow .3s}
    .scard[data-pos]{opacity:1;filter:none}
    .scard[data-pos="2"],.scard.sc1:not([data-pos]){transform:translate(0,0);z-index:1;opacity:1;filter:none}
    .scard[data-pos="1"],.scard.sc2:not([data-pos]){transform:translate(calc((var(--fan-w) - var(--fan-c))/2),var(--fan-vstep));z-index:2;opacity:1;filter:none}
    .scard[data-pos="0"],.scard.sc3:not([data-pos]){transform:translate(calc(var(--fan-w) - var(--fan-c)),calc(var(--fan-vstep) * 2));z-index:3;opacity:1;filter:none}
    .fan-nav{display:grid;place-items:center;position:absolute;z-index:30;top:calc(var(--fan-vstep) - 20px);left:calc((var(--fan-w) - var(--fan-c))/2 + var(--fan-c)/2 - 26px);
      width:52px;height:52px;border-radius:50%;border:2px solid #fff;cursor:pointer;background:var(--red);color:#fff;
      box-shadow:0 10px 26px rgba(200,16,46,.5);transition:transform .25s var(--e),box-shadow .25s}
    .fan-nav:hover{transform:scale(1.09)}
    .fan-nav:active{transform:scale(.96)}
    .fan-nav svg{width:22px;height:22px}
    .fmbBlock{grid-column:1;grid-row:2;max-width:none;padding:22px 32px;gap:24px}
    .fmbBlock .lg{width:88px}
    .statbar{margin-top:clamp(20px,3vh,40px)}
  }
  @media(max-width:980px){
    .whywrap{min-height:auto;padding:clamp(44px,6vh,66px) clamp(18px,3.4vw,48px)}
    .whyLeft{max-width:none}
    .pts{grid-template-columns:repeat(2,1fr);grid-auto-flow:row;grid-template-rows:none;max-width:none}
    .fmbBlock{max-width:100%}
    .whyRight{position:static;width:auto;height:auto;margin-top:36px;display:flex;flex-direction:column;gap:20px;pointer-events:auto}
    /* Stacked in flow, but the reveal is now the desktop one, so nothing here may be
       !important: GSAP's inline values have to win while it animates. These stay as the
       no-JS fallback — if the script never runs the cards are simply there, in colour. */
    .scard{position:relative;width:100%;top:auto!important;left:auto!important;opacity:1;transform:none;filter:none}
    .statbar-inner{grid-template-columns:repeat(2,1fr);gap:clamp(24px,5vh,38px) 16px}
    .svchead{flex-direction:column;align-items:flex-start;gap:20px}
    /* one column, but keep the desktop sticky deck: each card still pins near the top and
       the next scrolls over it. The sideways fan is scaled down (22px per card would run
       a six-card deck off a phone screen), everything else is the desktop behaviour. */
    .svccard{grid-template-columns:1fr;margin:0 auto 26px!important;
      transform:translateX(calc(var(--i,0) * 3px))}
    .svcph{min-height:0;aspect-ratio:16/10}
    .svcnum{top:24px;right:26px}
  }
  @media(max-width:520px){.hcopy h1{font-size:clamp(2.8rem,13vw,4rem)}.pts{grid-template-columns:1fr;grid-auto-flow:row}
    .pstrip{flex-wrap:wrap;gap:10px}.pstrip .pdots{display:none}}
  /* ---------- The Master Builders Standard (navy — unified with the photo bg #12223C) ---------- */
  .bb-master-builders-standard{background:#12223C;color:#fff;position:relative;z-index:5;
    padding:clamp(30px,3.4vh,38px) 0 clamp(30px,3.4vh,38px)}
  /* red-on-navy label swapped for cream so it stays legible without blending */
  .bb-master-builders-standard .etrack{color:var(--amber);font-family:'PlexMono',ui-monospace,monospace;font-weight:700;font-size:.82rem;letter-spacing:.22em;text-transform:uppercase}
  .bb-master-builders-standard .etrack i{color:var(--amber)}   /* dot matches the label on navy, not red */

  /* header — eyebrow + big heading (left), accreditation badge (right, lowered & nudged right) */
  .mbs-head{display:flex;align-items:flex-start;justify-content:space-between;gap:28px;flex-wrap:wrap;margin-bottom:clamp(6px,1vh,12px)}
  .mbs-headL .eyebrow{margin-bottom:16px}
  .mbs-headL h2{font-weight:800;letter-spacing:-.03em;line-height:1.03;font-size:clamp(2.1rem,4.3vw,3.5rem);color:#fff;max-width:16ch;text-wrap:balance}
  .mbs-badge{flex:none;position:relative;z-index:4;width:clamp(88px,8vw,120px);margin-top:clamp(4px,1.2vh,14px);border-radius:13px;overflow:hidden;
    box-shadow:0 14px 36px rgba(0,0,0,.45);transform:translateX(clamp(0px,1.4vw,26px));transition:transform .3s var(--e)}
  .mbs-badge:hover{transform:translateX(clamp(0px,1.4vw,26px)) translateY(-3px)}
  .mbs-badge img{width:100%;display:block}

  /* checklist + worker photo (raised up; the statement sits below them) */
  .mbs-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(22px,3vw,52px);align-items:center}
  .mbs-list{list-style:none;display:flex;flex-direction:column;position:relative;overflow:hidden;
    background:linear-gradient(168deg,rgba(255,255,255,.075),rgba(255,255,255,.02));
    border:1px solid rgba(255,255,255,.12);border-radius:24px;
    padding:clamp(4px,.7vw,10px) clamp(18px,1.7vw,26px);box-shadow:0 24px 54px rgba(0,0,0,.30)}
  .mbs-list::before{content:"";position:absolute;left:0;top:0;height:3px;width:100%;
    background:linear-gradient(90deg,var(--amber),rgba(236,184,76,.35) 46%,transparent 82%)}
  .mbs-list li{display:flex;gap:clamp(14px,1.1vw,18px);align-items:center;
    padding:clamp(9px,1.1vh,13px) 0;border-top:1px solid rgba(255,255,255,.09);
    font-size:clamp(.98rem,1.05vw,1.08rem);line-height:1.5;color:rgba(255,255,255,.72);
    transition:transform .35s var(--e)}
  .mbs-list li:first-child{border-top:0}
  .mbs-list b{color:#fff;font-weight:700}
  .mbs-list .mbs-ic{flex:none;width:clamp(32px,2.5vw,38px);height:clamp(32px,2.5vw,38px);border-radius:11px;
    display:grid;place-items:center;color:var(--amber);border:1.5px solid rgba(236,184,76,.5);
    background:rgba(236,184,76,.09);transition:background .35s var(--e),color .35s var(--e),border-color .35s var(--e),box-shadow .35s var(--e)}
  .mbs-list .mbs-ic svg{width:50%;height:50%;display:block}
  .mbs-list li:hover{transform:translateX(5px)}
  .mbs-list li:hover .mbs-ic{background:var(--amber);color:#12223C;border-color:var(--amber);box-shadow:0 8px 22px rgba(236,184,76,.28)}
  .mbs-photo{position:relative;z-index:1;min-height:clamp(320px,38vh,440px);align-self:stretch;
    transform:translate(-14px,-34px)}
  .mbs-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;
    -webkit-mask:radial-gradient(120% 120% at 50% 45%,#000 62%,transparent 100%);mask:radial-gradient(120% 120% at 50% 45%,#000 62%,transparent 100%)}

  /* soft amber glow grounding the worker photo */
  .mbs-photo::before{content:"";position:absolute;left:50%;bottom:5%;width:80%;height:58%;transform:translateX(-50%);
    background:radial-gradient(60% 60% at 50% 62%,rgba(236,184,76,.17),transparent 70%);filter:blur(6px);pointer-events:none}

  /* statement — reworked into a featured pull-quote callout card */
  .mbs-statement{position:relative;margin:clamp(26px,3.4vh,46px) auto 0;width:fit-content;max-width:min(960px,94%);text-align:center;overflow:hidden;
    padding:clamp(4px,.6vh,8px) clamp(20px,2vw,30px) clamp(14px,1.8vh,22px);
    background:linear-gradient(168deg,rgba(255,255,255,.06),rgba(255,255,255,.015));
    border:1px solid rgba(255,255,255,.12);border-radius:13px;box-shadow:0 24px 56px rgba(0,0,0,.28)}
  .mbs-statement::before{content:"";position:absolute;left:0;top:0;height:3px;width:100%;
    background:linear-gradient(90deg,transparent,var(--amber) 30%,var(--gold-hi) 70%,transparent)}
  .mbs-statement .mbs-q{display:block;font-family:'Fraunces',Georgia,serif;font-weight:300;
    font-size:clamp(1.7rem,2.5vw,2.3rem);line-height:1;height:.44em;color:var(--amber);opacity:.5}
  .mbs-statement p{margin:0;font-weight:400;line-height:1.62;
    font-size:1.05rem;color:rgba(255,255,255,.78)}
  .mbs-statement strong{color:#fff;font-weight:700}
  .mbs-statement em{font-style:normal;color:var(--amber);font-weight:600}

  @media(max-width:900px){
    .mbs-head{flex-direction:column;align-items:flex-start}
    .mbs-badge{transform:none;margin-top:8px}
    .mbs-badge:hover{transform:translateY(-3px)}
    .mbs-grid{grid-template-columns:1fr}
    .mbs-photo{min-height:0;aspect-ratio:16/12;transform:none}
    .mbs-statement{margin-top:clamp(28px,5vh,48px)}
    .mbs-statement p{font-size:1.05rem}
  }
  /* ---------- Recent Projects (horizontal pinned scroll gallery) ---------- */
  .bb-recent-projects{background:var(--cream);color:var(--ink);position:relative;z-index:5;overflow:hidden;
    border-radius:44px 44px 0 0;padding:clamp(30px,3.4vh,38px) 0 clamp(30px,3.4vh,38px)}
  /* while pinned it fills the viewport, clears the nav pill; header up top, cards just below it */
  .bb-recent-projects.rp-pinned{min-height:100vh;padding:clamp(124px,14.5vh,150px) 0 clamp(16px,2.2vh,30px);
    display:flex;flex-direction:column;justify-content:flex-start}

  /* header: standard centred wrap — same placement as every other section header */
  .rp-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;
    width:100%;max-width:var(--maxw);margin:0 auto clamp(20px,3vh,32px);padding:0 clamp(18px,3.4vw,48px)}
  .bb-recent-projects .eyebrow{margin-bottom:16px}
  .bb-recent-projects .etrack{color:var(--gold-hi);font-family:'PlexMono',ui-monospace,monospace;font-size:.82rem;letter-spacing:.22em;text-transform:uppercase}
  .bb-recent-projects h2{margin:0;font-weight:800;letter-spacing:-.03em;line-height:1.02;font-size:clamp(2.1rem,4.3vw,3.4rem)}

  .rp-viewall{flex:none;display:inline-flex;align-items:center;gap:12px;padding:10px 11px 10px 24px;border-radius:999px;
    background:var(--ink);color:#fff;text-decoration:none;font-weight:700;font-size:.95rem;border:1.6px solid var(--ink);
    transition:background .4s var(--e),color .4s var(--e)}
  .rp-viewall .arw{flex:none;width:34px;height:34px;border-radius:50%;background:#fff;color:var(--ink);display:grid;place-items:center;
    transition:background .4s var(--e),color .4s var(--e),transform .4s var(--e)}
  .rp-viewall .arw svg{width:18px;height:18px}
  .rp-viewall:hover{background:transparent;color:var(--ink)}
  .rp-viewall:hover .arw{background:var(--ink);color:#fff;transform:translateX(3px)}

  /* viewport + track — native swipe by default, GSAP drives it while pinned */
  .rp-viewport{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .rp-viewport::-webkit-scrollbar{display:none}
  .rp-pinned .rp-viewport{overflow:visible}
  .rp-track{display:flex;align-items:flex-start;gap:clamp(16px,1.7vw,28px);width:max-content;
    padding:6px clamp(18px,3.4vw,48px);will-change:transform}
  /* first card lines up with the wrap's left edge (header), then the row bleeds right */
  .rp-track{padding-left:calc(max(0px,(100vw - var(--maxw)) / 2) + clamp(18px,3.4vw,48px))}

  /* auto-scrolling marquee driven by scrollLeft (JS) so the ‹ › arrows + touch swipe all work;
     the track is duplicated in JS and loops at half the scroll width. Hover pauses the drift. */
  .rp-marquee .rp-track{padding:6px 0;gap:0}
  .rp-marquee .rp-card{margin-right:clamp(16px,1.7vw,28px)}

  /* header controls: ‹ › manual arrows + View-All */
  .rp-ctrls{display:flex;align-items:center;gap:clamp(8px,1vw,14px);flex-wrap:wrap}
  .rp-arrow{flex:none;width:46px;height:46px;border-radius:50%;border:1.6px solid var(--ink);background:transparent;color:var(--ink);
    display:grid;place-items:center;cursor:pointer;transition:background .3s var(--e),color .3s var(--e),transform .2s var(--e)}
  .rp-arrow svg{width:20px;height:20px}
  .rp-arrow:hover{background:var(--ink);color:#fff}
  .rp-arrow:active{transform:scale(.93)}
  .rp-free .rp-arrow{display:none}   /* reduced-motion fallback is a native swipe — arrows n/a */

  /* card — alternating orientation (horizontal / vertical) sized so 4 fit + a 5th peeks */
  .rp-card{flex:none;text-decoration:none;color:inherit;display:block}
  .rp-card.rp-h{width:clamp(300px,25vw,440px)}
  .rp-card.rp-v{width:clamp(230px,18vw,320px)}
  /* media heights scale with viewport height so the row fills the pinned frame (less empty space) */
  .rp-media{position:relative;overflow:hidden;border-radius:16px;
    border:2px solid transparent;box-shadow:0 12px 30px rgba(10,31,77,.10);
    transition:border-color .4s var(--e),box-shadow .4s var(--e)}
  .rp-card.rp-h .rp-media{height:clamp(238px,34vh,400px)}
  .rp-card.rp-v .rp-media{height:clamp(330px,48vh,560px)}
  .rp-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .65s var(--e)}
  .rp-card:hover .rp-media{border-color:var(--red);box-shadow:0 22px 48px rgba(10,31,77,.18)}
  .rp-card:hover .rp-media img{transform:scale(1.07)}

  .rp-date{display:inline-flex;align-items:center;gap:8px;margin-top:15px;
    font-family:'PlexMono',ui-monospace,monospace;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-hi)}
  .rp-date i{color:var(--red);font-style:normal;font-size:1.1em;line-height:1}
  .rp-title{margin-top:8px;font-weight:700;letter-spacing:-.01em;line-height:1.28;
    font-size:clamp(1.04rem,1.2vw,1.2rem);color:var(--ink);transition:color .3s var(--e)}
  .rp-card:hover .rp-title{color:var(--red)}
  /* two-line project description */
  .rp-desc{margin-top:8px;font-size:clamp(.9rem,.95vw,1rem);line-height:1.45;color:#47536a;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

  /* hint that the row scrolls sideways in native (mobile / reduced-motion) mode */
  .rp-free .rp-track{scroll-snap-type:x mandatory}
  .rp-free .rp-card{scroll-snap-align:start}

  @media(max-width:900px){
    .rp-head{align-items:flex-start;margin-bottom:26px}
    .bb-recent-projects{padding:clamp(26px,3.4vh,42px) 0 clamp(20px,2.6vh,34px)}
  }
  /* ---------- Testimonials — hover-driven horizontal accordion of customer reviews ---------- */
  .bb-testimonials{background:var(--cream);color:var(--ink);position:relative;z-index:5;overflow:hidden;
    padding:clamp(30px,3.4vh,38px) 0 clamp(30px,3.4vh,38px)}
  .tm-inner{width:100%;display:flex;flex-direction:column;justify-content:center;
    padding-bottom:clamp(4px,1vh,12px)}

  /* header: eyebrow + heading (left), rating (right) */
  .tm-head{display:flex;align-items:flex-end;justify-content:space-between;gap:26px;flex-wrap:wrap;
    margin:0 0 clamp(20px,3vh,32px)}
  .bb-testimonials .eyebrow{margin-bottom:16px}
  .bb-testimonials .etrack{color:var(--gold-hi);font-family:'PlexMono',ui-monospace,monospace;font-size:.82rem;letter-spacing:.22em;text-transform:uppercase}
  .bb-testimonials h2{margin:0;font-weight:800;letter-spacing:-.03em;line-height:1.02;font-size:clamp(2.1rem,4.3vw,3.4rem)}
  .tm-stat{flex:none;display:flex;align-items:center;gap:16px;text-decoration:none;color:inherit}
  .tm-big{font-weight:800;letter-spacing:-.02em;line-height:1;font-size:clamp(2.6rem,4vw,3.7rem)}
  .tm-big i{font-style:normal;font-weight:600;font-size:.42em;opacity:.5}
  .tm-lbl{font-size:clamp(.86rem,.95vw,.98rem);line-height:1.35;font-weight:600;color:var(--ink)}
  .tm-tp{font-style:normal;color:#00B67A;font-weight:700}
  .tm-stat:hover .tm-tp{text-decoration:underline}

  /* accordion row (all six fit): first card open by default, hover any card to open it — no scroll */
  .tm-row{display:flex;gap:clamp(12px,1.2vw,18px);align-items:stretch}
  /* closed = blue border; the red ring (--ring) fades in smoothly as a card opens */
  /* the flag artwork, kept in one place so the phone layout can reuse it behind the
     review text instead of behind the whole card */
  .tm-row{--tm-flag:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2060%2030%27%3E%3CclipPath%20id%3D%27tmuj%27%3E%3Cpath%20d%3D%27M30%2C15%20h30%20v15%20z%20v15%20h-30%20z%20h-30%20v-15%20z%20v-15%20h30%20z%27%2F%3E%3C%2FclipPath%3E%3Crect%20width%3D%2760%27%20height%3D%2730%27%20fill%3D%27%23012169%27%2F%3E%3Cpath%20d%3D%27M0%2C0%20L60%2C30%20M60%2C0%20L0%2C30%27%20stroke%3D%27%23fff%27%20stroke-width%3D%276%27%2F%3E%3Cpath%20d%3D%27M0%2C0%20L60%2C30%20M60%2C0%20L0%2C30%27%20clip-path%3D%27url%28%23tmuj%29%27%20stroke%3D%27%23C8102E%27%20stroke-width%3D%274%27%2F%3E%3Cpath%20d%3D%27M30%2C0%20v30%20M0%2C15%20h60%27%20stroke%3D%27%23fff%27%20stroke-width%3D%2710%27%2F%3E%3Cpath%20d%3D%27M30%2C0%20v30%20M0%2C15%20h60%27%20stroke%3D%27%23C8102E%27%20stroke-width%3D%276%27%2F%3E%3C%2Fsvg%3E")}
  .tm-card{position:relative;flex:0 0 clamp(80px,7vw,104px);height:clamp(344px,46vh,440px);
    border-radius:20px;background:#fff;border:1.5px solid rgba(10,31,77,.55);isolation:isolate;
    box-shadow:0 0 0 2px rgba(200,16,46,var(--ring,0)),0 16px 40px rgba(10,31,77,calc(.10 + .08*var(--ring,0)));
    overflow:hidden;text-decoration:none;color:inherit;cursor:pointer;
    transition:flex-basis .55s cubic-bezier(.4,0,.2,1),box-shadow .4s ease}
  /* semi-transparent Union Jack: the whole flag shows, but only on the OPEN review; closed columns stay plain white */
  .tm-card::before{content:"";position:absolute;inset:-9%;z-index:0;opacity:0;pointer-events:none;transition:opacity .45s ease;
    background-image:var(--tm-flag);
    background-size:cover;background-position:50% 50%;background-repeat:no-repeat}
  /* wind sway: pure GPU transform (no background-position change, which would re-run the
     filter each frame). The static folds are baked once; this just sways the cached result. */
  @keyframes tmFlag{
    0%{transform:skewX(0deg) skewY(0deg) translate3d(0,0,0)}
    20%{transform:skewX(-2.1deg) skewY(.6deg) translate3d(-5px,-2px,0)}
    40%{transform:skewX(.9deg) skewY(-.4deg) translate3d(3px,1px,0)}
    60%{transform:skewX(2.1deg) skewY(.5deg) translate3d(5px,2px,0)}
    80%{transform:skewX(-.9deg) skewY(-.3deg) translate3d(-3px,-1px,0)}
    100%{transform:skewX(0deg) skewY(0deg) translate3d(0,0,0)}
  }
  @media(prefers-reduced-motion:reduce){.tm-card::before{animation:none;filter:none}}
  .tm-collapsed,.tm-open{z-index:1}
  /* reveal the flag only on the open card */
  @media(min-width:901px) and (prefers-reduced-motion:no-preference){
    .tm-row:not(.tm-js) .tm-card:first-child::before,
    .tm-card.tm-active::before{opacity:.2}
    /* run the costly wind filter/animation ONLY on the open card AND only while the
       testimonials are on screen — otherwise it churns the main thread the whole time
       and makes other sections (e.g. the projects marquee) stutter */
    .tm-inview .tm-row:not(.tm-js) .tm-card:first-child::before,
    .tm-inview .tm-card.tm-active::before{filter:url(#tmWind);animation:tmFlag 8s ease-in-out infinite;will-change:transform}
  }
  .tm-free .tm-card::before{opacity:.2}

  /* ---- phones/tablets: the same accordion, driven sideways by a swipe ----------------
     The row keeps its horizontal shape (a wide open review with the other cards as
     slivers beside it) and slides: swiping left opens the next review and collapses the
     one you were reading, exactly as moving the cursor does on a desktop. Widths are
     fixed custom properties so the script can work out the slide distance without
     measuring mid-animation. Reduced motion keeps the plain stacked list below. */
  @media(max-width:900px) and (prefers-reduced-motion:no-preference){
    .tm-swipe .tm-inner{display:block}
    .tm-swipe .tm-head{margin-bottom:clamp(20px,3.4vh,30px)}
    .tm-swipe .tm-row{--tmc:58px;--tmg:10px;--tma:min(320px,74vw);
      flex-direction:row;gap:var(--tmg);max-width:none;margin:0;width:max-content;
      transition:transform .5s cubic-bezier(.4,0,.2,1);will-change:transform;touch-action:pan-y}
    .tm-swipe .tm-card{flex:0 0 var(--tmc);height:auto;min-height:clamp(210px,28vh,260px)}
    .tm-swipe .tm-card.tm-active{flex-basis:var(--tma);--ring:1}
    /* No flag across the whole card on a phone: it is a 2:1 image in a portrait box, so it
       either blew up into giant stripes or left the card looking half-empty. The flag now
       sits behind the review itself — washed out under the sentence, where it reads as a
       watermark rather than wallpaper. */
    .tm-swipe .tm-card::before{display:none}
    .tm-swipe .tm-text{background-image:linear-gradient(rgba(255,255,255,.84),rgba(255,255,255,.84)),var(--tm-flag);
      background-size:cover;background-position:50% 50%;background-repeat:no-repeat;
      border-radius:10px;padding:10px 11px;margin:0 -2px;line-height:1.42}
    /* the open review sets the card's height, so there is no empty space under it */
    .tm-swipe .tm-open{position:relative;height:auto;width:var(--tma);padding:clamp(15px,3.8vw,19px)}
    .tm-swipe .tm-card.tm-active .tm-open{opacity:1;visibility:visible}
    .tm-swipe .tm-card.tm-active .tm-collapsed{opacity:0;visibility:hidden}
    .tm-swipe .tm-text{font-size:.98rem}
    .tm-swipe .tm-stars{margin-bottom:11px}
    .tm-swipe .tm-stars svg{width:19px;height:19px}
    .tm-swipe .tm-author{margin-top:13px;gap:9px}
    .tm-swipe .tm-author .tm-ava{width:46px;height:46px;border-radius:12px;font-size:.98rem}
    .tm-swipe .tm-who b{font-size:1.02rem}
    .tm-swipe .tm-who span{margin-top:2px;font-size:.82rem}
  }

  /* avatar (monogram — swap for a photo later) */
  .tm-ava{flex:none;width:clamp(54px,4.6vw,66px);height:clamp(54px,4.6vw,66px);border-radius:15px;overflow:hidden;
    display:grid;place-items:center;background:var(--ink);color:#fff;font-weight:700;font-size:1.16rem;letter-spacing:.02em}
  .tm-ava img{width:100%;height:100%;object-fit:cover;display:block}

  /* collapsed layer: avatar top, vertical name bottom */
  .tm-collapsed{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:space-between;
    padding:clamp(16px,1.6vw,22px) 0;transition:opacity .4s ease,visibility .4s}
  .tm-vname{writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap;
    font-weight:600;font-size:clamp(.95rem,1.05vw,1.12rem);letter-spacing:.01em;color:var(--ink)}

  /* open layer: laid out at full width so text doesn't reflow while the card widens */
  .tm-open{position:absolute;left:0;top:0;height:100%;width:min(660px,50vw);
    display:flex;flex-direction:column;padding:clamp(26px,2.2vw,44px);opacity:0;visibility:hidden;
    transition:opacity .4s ease,visibility .4s}

  /* Hover-driven accordion (desktop, motion OK) — JS sets .tm-active on the card under the
     cursor and keeps it there while the cursor crosses a gap, so reviews open one-by-one with
     no jump-to-first flicker; leaving the row returns to the first review. Before JS runs (or if
     it's disabled) the first card is open as a fallback. No scroll, no pin. */
  @media(min-width:901px) and (prefers-reduced-motion:no-preference){
    .tm-row:not(.tm-js) .tm-card:first-child,
    .tm-card.tm-active{flex-basis:min(660px,50vw);--ring:1}
    .tm-row:not(.tm-js) .tm-card:first-child .tm-open,
    .tm-card.tm-active .tm-open{opacity:1;visibility:visible}
    .tm-row:not(.tm-js) .tm-card:first-child .tm-collapsed,
    .tm-card.tm-active .tm-collapsed{opacity:0;visibility:hidden}
  }
  .tm-stars{display:flex;gap:5px;margin-bottom:clamp(18px,2.6vh,28px)}
  .tm-stars svg{width:23px;height:23px;color:#F5A623;flex:none}
  .tm-text{font-weight:500;letter-spacing:-.01em;line-height:1.5;color:var(--ink);
    font-size:clamp(1.08rem,1.4vw,1.4rem);text-wrap:balance}
  /* author: sits just below the review text (small gap), avatar on its own line */
  .tm-author{margin-top:clamp(26px,3.6vh,44px);display:flex;flex-direction:column;align-items:flex-start;gap:14px}
  .tm-author .tm-ava{width:84px;height:84px;border-radius:19px;font-size:1.46rem}
  .tm-who b{display:block;font-weight:700;font-size:clamp(1.3rem,1.7vw,1.6rem);letter-spacing:-.02em}
  .tm-who span{display:block;margin-top:4px;font-size:.9rem;color:rgba(10,31,77,.55)}

  /* fallback (mobile / reduced-motion): stacked full cards, all shown (blue + red) */
  .tm-free .tm-inner{display:block}
  .tm-free .tm-head{margin-bottom:clamp(28px,5vh,44px)}
  .tm-free .tm-row{flex-direction:column;gap:18px;max-width:620px;margin-inline:auto}
  .tm-free .tm-card{flex:none;width:100%;height:auto;--ring:1}
  .tm-free .tm-collapsed{display:none}
  .tm-free .tm-open{position:static;width:100%;height:auto;opacity:1;visibility:visible;padding:clamp(24px,6vw,36px)}

  @media(max-width:900px){
    .tm-head{align-items:flex-start}
    .tm-stat{margin-top:4px}
    .bb-testimonials{padding:clamp(26px,3.4vh,42px) 0 clamp(20px,2.6vh,34px)}
  }
  /* ---------- Subscriptions (cream — bg matches the "Why British Builders" block) ---------- */
  /* The block ends on the Terms link, a single small line, and the section that follows
     shares this background — so a full bottom padding met the next section's full top
     padding and read as one 76px void under one line of text. */
  .bb-pricing{background:var(--cream);color:var(--ink);position:relative;z-index:5;
    padding:clamp(30px,3.4vh,38px) 0 clamp(10px,1.2vh,14px)}

  /* header (left-aligned, marquee eyebrow + heading) — lowered so it clears the nav pill */
  .bb-pricing .sub-head{margin-bottom:clamp(20px,3vh,32px)}
  .bb-pricing .eyebrow{margin-bottom:16px}
  .bb-pricing .etrack{color:var(--gold-hi);font-family:'PlexMono',ui-monospace,monospace;font-size:.82rem;letter-spacing:.22em;text-transform:uppercase}
  .bb-pricing h2{margin:0;font-weight:800;letter-spacing:-.03em;line-height:1.03;font-size:clamp(2.1rem,4.3vw,3.4rem);max-width:22ch;text-wrap:balance}
  /* Why a membership exists, set under the heading so the three prices are read
     as an answer to something rather than as three numbers. */
  .bb-pricing .sub-intro{margin:clamp(14px,2vh,20px) 0 0;font-size:clamp(.98rem,1.35vw,1.08rem);line-height:1.65;color:rgba(10,31,77,.82)}
  /* Stops where "Agency Partner Package" stops, rather than running the full
     width of the row: 90% lands on the end of that title at desktop widths and
     stays just short of it as the row narrows, so it never overshoots. Below the
     card row there is nothing to align to, so the paragraph takes the width. */
  @media(min-width:901px){.bb-pricing .sub-intro{max-width:90%}}

  /* 3-up grid */
  /* Two plans. The cards keep the width they had as one of three, so the pair sits centred
     rather than stretching to half the row each. */
  .sub-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,1.8vw,30px);align-items:stretch;
    max-width:920px;margin-inline:auto;position:relative}

  /* Placeholder slots, drawn while the cards are still off the screen so the block is not a
     band of empty ground waiting for them. Absolutely positioned, so they are not grid items
     and the two cards still fill the row on their own; the grid's height is the cards'
     height, so a ghost lands exactly where its card will.

     Hidden by default and switched on by whatever is running the entrance — home.js for the
     pricing block, html.as-anim for About Subscriptions — so a page with no entrance to
     wait for (reduced motion, no JS) never shows them. */
  .sub-ghost{position:absolute;inset:0;z-index:0;display:grid;
    grid-template-columns:repeat(2,1fr);gap:clamp(18px,1.8vw,30px);
    pointer-events:none;opacity:0;transition:opacity .55s var(--e)}
  /* assets/js/subghost.js fills this with a copy of each card. The translucency sits on the
     copies and the show/hide on the host, so the two multiply: the host fades 0 -> 1 as the
     entrance begins and back to 0 as the cards land, and a copy is never more than a
     suggestion of the card while it is up. No shadow — a faded card should read as an
     outline waiting to be filled, not as a second card floating over the ground. */
  .sub-ghost .sc-copy{opacity:.2;box-shadow:none}

  /* card shell */
  /* .sc-copy is the faded stand-in built by assets/js/subghost.js — the same shell, so the
     copy is the card's shape exactly, but none of the rules that move or re-price one. */
  .subcard,.sub-ghost .sc-copy{display:flex;flex-direction:column;border-radius:22px;
    padding:clamp(26px,2.3vw,40px);
    box-shadow:0 12px 28px rgba(10,31,77,.09);transition:transform .45s var(--e),box-shadow .45s var(--e)}
  .subcard{position:relative;z-index:1}
  .subcard:hover{transform:translateY(-6px);box-shadow:0 20px 44px rgba(10,31,77,.15)}
  .sc-blue{background:var(--ink);color:#fff}
  .sc-red{background:var(--red);color:#fff}
  /* white card: red border on the side by the blue card, blue border on the side by the red card */
  .sc-white{background:#fff;color:var(--ink);
    border-left:2.5px solid var(--red);border-right:2.5px solid var(--ink);
    border-top:1px solid var(--line-d);border-bottom:1px solid var(--line-d)}

  /* title + price */
  .sc-title{font-weight:800;letter-spacing:-.01em;line-height:1.18;font-size:clamp(1.12rem,1.35vw,1.32rem);min-height:2.55em}
  .sc-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;margin:clamp(12px,1.6vh,20px) 0 clamp(18px,2.2vh,26px)}
  .sc-price .pre{font-weight:600;font-size:1rem;opacity:.72}
  .sc-price .amt{font-weight:800;letter-spacing:-.02em;font-size:clamp(2.35rem,3.4vw,3rem);line-height:1;font-variant-numeric:tabular-nums}
  .sc-price .per{width:100%;font-weight:500;font-size:.95rem;opacity:.6;margin-top:4px}

  /* per-card annual saving line (shown only when Annual is selected) — amber pill,
     navy text, legible on every card colour (navy / white / red) */
  .sc-save{width:auto;margin-top:9px;display:inline-flex;align-items:center;font-size:.8rem;font-weight:800;
    color:var(--ink);background:var(--amber);border-radius:999px;padding:3px 12px;line-height:1.3;opacity:1}
  .sc-save[hidden]{display:none}

  /* billing-period toggle (Monthly / Annual, annual saves 20%) — segmented control under
     the heading. Active period is navy-filled; the annual button carries an amber badge. */
  .bb-pricing .sub-toggle{display:inline-flex;gap:5px;margin-top:clamp(16px,2vh,22px);
    background:#fff;border:1px solid var(--line-d);border-radius:999px;padding:5px;
    box-shadow:0 12px 28px -20px rgba(10,31,77,.55)}
  .bb-pricing .sub-toggle-btn{display:inline-flex;align-items:center;gap:8px;font:inherit;font-weight:700;font-size:.95rem;
    color:var(--ink);background:transparent;border:0;border-radius:999px;padding:9px 20px;cursor:pointer;
    transition:background .2s var(--e),color .2s var(--e),box-shadow .2s var(--e)}
  .bb-pricing .sub-toggle-btn:hover{background:rgba(10,31,77,.06)}
  .bb-pricing .sub-toggle-btn.is-on{background:var(--ink);color:#fff;box-shadow:0 8px 18px -10px rgba(10,31,77,.6)}
  .bb-pricing .sub-toggle-btn.is-on:hover{background:var(--ink)}
  .bb-pricing .sub-toggle-btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
  .bb-pricing .sub-toggle-save{display:inline-flex;align-items:center;font-size:.68rem;font-weight:800;letter-spacing:.03em;
    color:var(--ink);background:var(--amber);border-radius:999px;padding:2px 8px;white-space:nowrap}

  /* dashed divider (inherits the card text colour) */
  .sc-divider{display:block;height:0;border-top:2px dashed currentColor;opacity:.3;margin-bottom:clamp(20px,2.4vh,28px)}

  /* checklist with round check icons */
  .sc-list{list-style:none;display:flex;flex-direction:column;gap:clamp(11px,1.4vh,15px);margin:0 0 clamp(26px,3.4vh,40px)}
  .sc-list li{display:flex;gap:12px;align-items:flex-start;font-size:clamp(.95rem,1vw,1.02rem);line-height:1.42;font-weight:500}
  .sc-check{flex:none;width:21px;height:21px;margin-top:1px}
  .sc-check svg{width:100%;height:100%;display:block}
  .sc-blue .sc-check,.sc-red .sc-check{color:#fff}
  .sc-white .sc-check{color:var(--ink)}
  .sc-white .sc-list li{color:#33405c}
  .sc-white .sc-list b{color:var(--ink)}

  /* Subscribe button — bottom-aligned across cards; on hover it fills with the CARD's own colour */
  .sc-btn{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:14px;
    padding:10px 11px 10px 26px;border-radius:999px;text-decoration:none;font-weight:700;font-size:1rem;letter-spacing:.005em;
    border:1.6px solid transparent;cursor:pointer;
    transition:background .45s var(--e),color .45s var(--e),border-color .45s var(--e)}
  .sc-btn .arw{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
    transition:background .45s var(--e),color .45s var(--e),transform .45s var(--e)}
  .sc-btn .arw svg{width:19px;height:19px}
  .sc-btn:hover .arw{transform:translateX(3px)}

  .sc-blue .sc-btn{background:#fff;color:var(--ink);border-color:#fff}
  .sc-blue .sc-btn .arw{background:var(--ink);color:#fff}
  .sc-blue .sc-btn:hover{background:var(--ink);color:#fff;border-color:#fff}
  .sc-blue .sc-btn:hover .arw{background:#fff;color:var(--ink)}

  .sc-white .sc-btn{background:var(--ink);color:#fff;border-color:var(--ink)}
  .sc-white .sc-btn .arw{background:#fff;color:var(--ink)}
  .sc-white .sc-btn:hover{background:#fff;color:var(--ink);border-color:var(--ink)}
  .sc-white .sc-btn:hover .arw{background:var(--ink);color:#fff}

  .sc-red .sc-btn{background:#fff;color:var(--red);border-color:#fff}
  .sc-red .sc-btn .arw{background:var(--red);color:#fff}
  .sc-red .sc-btn:hover{background:var(--red);color:#fff;border-color:#fff}
  .sc-red .sc-btn:hover .arw{background:#fff;color:var(--red)}

  /* Qualifying-period note under the card row. The cards list the included annual
     check next to benefits that start on day one, so the difference has to be
     readable here and not only in the Terms. Carried by every page that prints the
     pricing block, which is why it sits in base rather than a page sheet. */
  /* Capped to the same 920px as .sub-grid so the note ends where the cards end, instead
     of sitting as a narrower column inside them. */
  .sc-note{max-width:920px;margin:clamp(20px,2.6vh,28px) auto 0;text-align:center;
    font-size:.86rem;line-height:1.6;color:rgba(10,31,77,.72)}
  .sc-note a{color:inherit;text-decoration:underline;text-underline-offset:2px}
  .sc-note a:hover{color:var(--ink)}

  @media(max-width:980px){
    .sub-grid{grid-template-columns:1fr;max-width:560px;margin-inline:auto;gap:22px}
    .sc-title{min-height:0}
    .sub-ghost{display:none}
  }
  /* ---------- News (Latest Update) ---------- */
  .bb-news{background:var(--cream);color:var(--ink);position:relative;z-index:5;
    padding:clamp(30px,3.4vh,38px) 0 clamp(30px,3.4vh,38px)}

  /* header — same layout as every other section (eyebrow + heading left, button right) */
  .nw-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;
    margin-bottom:clamp(20px,3vh,32px)}
  .bb-news .eyebrow{margin-bottom:16px}
  .bb-news .etrack{color:var(--gold-hi);font-family:'PlexMono',ui-monospace,monospace;font-size:.82rem;letter-spacing:.22em;text-transform:uppercase}
  .bb-news h2{margin:0;font-weight:800;letter-spacing:-.03em;line-height:1.02;font-size:clamp(2.1rem,4.3vw,3.4rem)}
  .nw-viewall{flex:none;display:inline-flex;align-items:center;gap:12px;padding:10px 11px 10px 24px;border-radius:999px;
    background:var(--ink);color:#fff;text-decoration:none;font-weight:700;font-size:.95rem;border:1.6px solid var(--ink);
    transition:background .4s var(--e),color .4s var(--e)}
  .nw-viewall .arw{flex:none;width:34px;height:34px;border-radius:50%;background:#fff;color:var(--ink);display:grid;place-items:center;
    transition:background .4s var(--e),color .4s var(--e),transform .4s var(--e)}
  .nw-viewall .arw svg{width:18px;height:18px}
  .nw-viewall:hover{background:transparent;color:var(--ink)}
  .nw-viewall:hover .arw{background:var(--ink);color:#fff;transform:translateX(3px)}

  /* grid — one large featured story (left) + two compact items stacked (right) */
  .nw-grid{display:grid;grid-template-columns:1.1fr 1fr;grid-auto-rows:1fr;
    gap:clamp(14px,1.4vw,22px);align-items:stretch}
  .nw-feat{grid-row:1 / span 2}

  /* card shell — amber accent bar wipes down the left edge on hover */
  .nw-card{position:relative;display:flex;background:#b9c6e4;border-radius:22px;overflow:hidden;
    border:1.75px solid var(--ink);box-shadow:0 16px 40px rgba(10,31,77,.10);text-decoration:none;color:inherit;
    transition:transform .4s var(--e),box-shadow .4s var(--e),border-color .4s var(--e)}
  .nw-card:hover{border-color:var(--ink)}
  .nw-card::after{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;z-index:4;
    background:linear-gradient(180deg,var(--amber),var(--gold-hi));transform:scaleY(0);transform-origin:top;
    transition:transform .5s var(--e)}
  .nw-card:hover{transform:translateY(-6px);box-shadow:0 30px 62px rgba(10,31,77,.17)}
  .nw-card:hover::after{transform:scaleY(1)}
  .nw-feat{flex-direction:column}
  .nw-mini{flex-direction:row;align-items:stretch}

  /* media — navy/amber duotone so the photos read as ours, not lifted from the old site.
     the white meta panel still slides off on hover to reveal the full (toned) image. */
  .nw-media{position:relative;overflow:hidden;flex:none;border-radius:13px;border:1.75px solid var(--ink)}
  .nw-feat .nw-media{height:clamp(210px,27vh,300px);margin:clamp(13px,1.3vw,17px)}
  .nw-feat .nw-img img{object-position:58% 14%}
  .nw-mini .nw-media{width:clamp(116px,13vw,168px);align-self:stretch;margin:clamp(11px,1vw,15px)}
  .nw-img{position:absolute;inset:0}
  .nw-img img{width:100%;height:100%;object-fit:cover;object-position:60% 28%;display:block;transition:transform .6s var(--e)}
  .nw-img svg.nw-appshot{width:100%;height:100%;display:block}
  .nw-img video.nw-vid{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
  .nw-meta{position:absolute;left:0;top:0;bottom:0;width:min(52%,186px);background:#b9c6e4;z-index:3;
    display:flex;flex-direction:column;gap:clamp(10px,1.5vh,16px);padding:clamp(14px,1.4vw,22px);
    transition:transform .55s var(--e)}
  .nw-mini .nw-meta{width:100%;transform:translateX(-100%)}
  .nw-feat .nw-meta{border-right:1.75px solid var(--ink)}
  .nw-ico{width:24px;height:24px;color:var(--red);flex:none}
  .nw-ico svg{width:100%;height:100%;display:block}
  .nw-field{display:flex;flex-direction:column;gap:2px}
  .nw-lbl{font-family:'PlexMono',ui-monospace,monospace;font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(10,31,77,.92)}
  .nw-val{font-weight:700;font-size:.9rem;letter-spacing:-.01em;color:var(--ink)}
  .nw-feat:hover .nw-meta{transform:translateX(-100%)}
  .nw-mini:hover .nw-meta{transform:translateX(0)}
  .nw-card:hover .nw-img img{transform:scale(1.05)}

  /* body */
  .nw-body{padding:clamp(15px,1.4vw,23px);display:flex;flex-direction:column;flex:1 1 auto;min-width:0}
  .nw-tag{align-self:flex-start;font-family:'PlexMono',ui-monospace,monospace;font-size:.62rem;letter-spacing:.14em;
    text-transform:uppercase;font-weight:700;color:var(--gold-lo);background:rgba(200,16,46,.08);
    border:1px solid rgba(200,16,46,.22);padding:5px 11px;border-radius:999px;margin-bottom:clamp(12px,1.6vh,18px)}
  .nw-mini .nw-tag{margin-bottom:9px}
  .nw-title{font-weight:800;letter-spacing:-.02em;line-height:1.2;color:var(--ink);transition:color .3s var(--e)}
  .nw-feat .nw-title{font-size:clamp(1.26rem,1.6vw,1.64rem)}
  .nw-mini .nw-title{font-size:clamp(1.02rem,1.15vw,1.16rem);
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .nw-card:hover .nw-title{color:var(--red)}
  .nw-excerpt{margin-top:12px;font-size:clamp(.94rem,1vw,1.02rem);line-height:1.55;color:#47536a;
    display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
  .nw-feat .nw-excerpt{-webkit-line-clamp:3}
  .nw-mini .nw-excerpt{-webkit-line-clamp:2;margin-top:9px;font-size:.9rem}
  .nw-excerpt b{color:var(--ink);font-weight:700}
  /* section lede — frames the block as our curated read on the industry */
  .nw-lede{margin-top:14px;max-width:62ch;font-size:clamp(1rem,1.05vw,1.1rem);line-height:1.55;color:#47536a}
  /* per-card "why it matters" — our take, so a curated link reads as ours, not a repost */
  .nw-note{margin-top:14px;padding:9px 0 9px 14px;border-left:3px solid var(--red);
    font-size:.9rem;line-height:1.5;color:#3a4457}
  .nw-note b{color:var(--gold-lo);font-weight:700}
  .nw-mini .nw-note{margin-top:11px;font-size:.82rem;padding:7px 0 7px 12px}
  /* our take — the prominent voice of the card (why we posted it / why we're the ones to call) */
  .nw-take{margin-top:11px;color:var(--ink);line-height:1.46;font-weight:500;
    border-left:3px solid var(--red);padding-left:16px}
  .nw-take b{font-weight:800;color:var(--ink)}
  .nw-feat .nw-take{font-size:clamp(1rem,1.12vw,1.16rem);padding-left:18px}
  .nw-mini .nw-take{font-size:clamp(.98rem,1.05vw,1.08rem);padding-left:13px;margin-top:12px}
  /* the news itself — demoted to a small source line */
  .nw-src{margin-top:12px;font-family:'PlexMono',ui-monospace,monospace;font-size:.84rem;
    line-height:1.5;color:var(--ink)}
  .nw-src b{color:var(--ink);font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:.72rem}
  .nw-mini .nw-src{display:none}
  /* read-more pill — solid navy; a semi-transparent Union Jack waves in on hover */
  .nw-more{position:relative;overflow:hidden;isolation:isolate;
    margin-top:clamp(18px,2.4vh,26px);align-self:flex-start;display:inline-flex;align-items:center;gap:9px;
    padding:10px 18px;border-radius:999px;border:1.7px solid var(--ink);background:var(--ink);
    font-family:'PlexMono',ui-monospace,monospace;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:#fff;
    transition:background .35s var(--e),color .35s var(--e),border-color .35s var(--e),transform .35s var(--e)}
  .nw-more::before{content:"";position:absolute;inset:-25%;z-index:-1;opacity:0;
    background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2060%2030%27%3E%3CclipPath%20id%3D%27nwuj%27%3E%3Cpath%20d%3D%27M30%2C15%20h30%20v15%20z%20v15%20h-30%20z%20h-30%20v-15%20z%20v-15%20h30%20z%27%2F%3E%3C%2FclipPath%3E%3Crect%20width%3D%2760%27%20height%3D%2730%27%20fill%3D%27%23012169%27%2F%3E%3Cpath%20d%3D%27M0%2C0%20L60%2C30%20M60%2C0%20L0%2C30%27%20stroke%3D%27%23fff%27%20stroke-width%3D%276%27%2F%3E%3Cpath%20d%3D%27M0%2C0%20L60%2C30%20M60%2C0%20L0%2C30%27%20clip-path%3D%27url%28%23nwuj%29%27%20stroke%3D%27%23C8102E%27%20stroke-width%3D%274%27%2F%3E%3Cpath%20d%3D%27M30%2C0%20v30%20M0%2C15%20h60%27%20stroke%3D%27%23fff%27%20stroke-width%3D%2710%27%2F%3E%3Cpath%20d%3D%27M30%2C0%20v30%20M0%2C15%20h60%27%20stroke%3D%27%23C8102E%27%20stroke-width%3D%276%27%2F%3E%3C%2Fsvg%3E");
    background-size:150% 150%;background-position:50% 50%;background-repeat:no-repeat;
    animation:nwFlag 5s ease-in-out infinite;transition:opacity .35s var(--e)}
  @keyframes nwFlag{0%,100%{transform:skewX(0deg) translateY(0);background-position:40% 50%}25%{transform:skewX(-2.6deg) translateY(-1px)}50%{transform:skewX(0deg) translateY(0);background-position:60% 50%}75%{transform:skewX(2.6deg) translateY(1px)}}
  @media(prefers-reduced-motion:reduce){.nw-more::before{animation:none}}
  .nw-feat .nw-more{margin-top:auto}
  .nw-mini .nw-more{padding:8px 15px;font-size:.64rem;gap:8px}
  .nw-more .nw-arw{width:16px;height:16px;color:#fff;transition:transform .35s var(--e),color .35s var(--e)}
  .nw-more .nw-arw svg{width:100%;height:100%;display:block}
  .nw-card:hover .nw-more{background:#fff;color:var(--ink);border-color:var(--ink);transform:translateY(-2px)}
  .nw-card:hover .nw-more::before{opacity:.4}
  .nw-card:hover .nw-more .nw-arw{color:var(--red);transform:translateX(3px)}

  @media(max-width:900px){
    .nw-head{align-items:flex-start}
    .nw-grid{grid-template-columns:1fr;max-width:540px;margin-inline:auto;gap:20px}
    .nw-feat{grid-row:auto}
    .nw-feat .nw-media{height:auto;aspect-ratio:76 / 31}
    .nw-feat .nw-meta{transform:translateX(-100%)}
    .nw-feat .nw-img video.nw-vid,.nw-feat .nw-img svg.nw-appshot{object-fit:contain}
    .nw-mini .nw-media{width:clamp(120px,32vw,150px)}
  }
  /* ---------- Contact / Footer (navy) ---------- */
  .bb-contact{background:var(--ink);color:#fff;position:relative;z-index:5;overflow:hidden;
    padding:clamp(22px,3vh,40px) 0 clamp(18px,2.4vh,30px);border-radius:44px 44px 0 0}
  .bb-contact a{color:inherit;text-decoration:none}

  /* top row: brand mark (left) + contact information (right, same row) */
  .ct-top{display:flex;align-items:flex-start;justify-content:flex-start;gap:clamp(26px,3vw,56px);
    flex-wrap:wrap;padding-bottom:clamp(20px,2.8vh,32px)}
  .ct-mark{font-weight:800;letter-spacing:-.03em;line-height:.92;text-transform:uppercase;
    font-size:clamp(3.2rem,8.8vw,7.8rem);color:rgba(255,255,255,.12);max-width:8ch;flex:none}
  /* app card sits just right of the brand mark, dropped down, and stretches
     to fill the remaining width so no empty space is left beside it */
  .ct-top .ct-app{margin:clamp(34px,7vh,74px) 0 0 0;flex:1 1 auto;min-width:0}
  .ct-top .ct-app .ct-app-arw{margin-left:auto}

  /* contact information (top-right) — a clean bordered panel of icon rows */
  .ct-info{display:flex;flex-direction:column;gap:clamp(14px,1.7vh,20px);min-width:0;align-self:start;
    background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:20px;
    padding:clamp(22px,2.2vw,30px)}
  .ct-info h4{font-family:'PlexMono',ui-monospace,monospace;font-weight:700;font-size:.8rem;letter-spacing:.16em;
    text-transform:uppercase;color:var(--amber);margin-bottom:2px}
  .ct-irow{display:flex;align-items:center;gap:12px}
  .ct-info .ci{flex:none;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
    background:rgba(200,16,46,.14);color:var(--gold-hi)}
  .ct-info .ci svg{width:19px;height:19px;display:block}
  .ct-itx{display:flex;flex-direction:column;gap:2px;min-width:0}
  .ct-itx .ct-ilbl{font-size:.74rem;letter-spacing:.02em;color:rgba(255,255,255,.5);white-space:nowrap}
  .ct-itx a{font-weight:700;font-size:.85rem;color:#fff;white-space:nowrap;transition:color .3s var(--e)}
  .ct-itx a:hover{color:var(--gold-hi)}

  /* nav row (centred) */
  .ct-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(18px,3vw,48px);align-items:center;
    padding:clamp(16px,2.2vh,24px) 0;border-top:1px solid rgba(255,255,255,.14);border-bottom:1px solid rgba(255,255,255,.14)}
  .ct-nav a{font-weight:600;font-size:clamp(1rem,1.25vw,1.2rem);color:rgba(255,255,255,.88);transition:color .3s var(--e)}
  .ct-nav a:hover{color:#fff}

  /* footer grid: CTA (left, wider) + link columns clustered to the right */
  .ct-cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:clamp(22px,2.6vw,44px);
    padding:clamp(28px,3.8vh,46px) 0 clamp(24px,3.2vh,38px)}

  /* CTA block */
  .ct-cta{max-width:420px}
  .ct-cta .eyebrow{margin-bottom:13px}
  .ct-cta .etrack{color:var(--amber);font-family:'PlexMono',ui-monospace,monospace;font-weight:700;font-size:.88rem;letter-spacing:.2em;text-transform:uppercase}
  .ct-cta .etrack i{color:var(--amber)}   /* on navy the dot matches the label (gold), not red */
  .ct-cta h3{font-weight:800;letter-spacing:-.02em;line-height:1.1;font-size:clamp(1.4rem,2vw,1.9rem);max-width:15ch}

  /* join-us-in-the-app card (QR placeholder) */
  .ct-app{display:inline-flex;align-items:center;gap:clamp(13px,1.3vw,18px);margin-top:0;position:relative;overflow:hidden;isolation:isolate;
    background:#fff;color:var(--ink);border-radius:18px;padding:13px 18px 13px 13px;max-width:100%;
    box-shadow:0 14px 34px rgba(10,31,77,.28);transition:transform .35s var(--e),box-shadow .35s var(--e)}
  .ct-app > *{position:relative;z-index:1}
  /* semi-transparent Union Jack waving in the empty white space on the right */
  .ct-app::before{content:"";position:absolute;top:-25%;bottom:-25%;right:-4%;width:64%;z-index:0;opacity:.26;pointer-events:none;
    background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2060%2030%27%3E%3CclipPath%20id%3D%27ctuj%27%3E%3Cpath%20d%3D%27M30%2C15%20h30%20v15%20z%20v15%20h-30%20z%20h-30%20v-15%20z%20v-15%20h30%20z%27%2F%3E%3C%2FclipPath%3E%3Crect%20width%3D%2760%27%20height%3D%2730%27%20fill%3D%27%23012169%27%2F%3E%3Cpath%20d%3D%27M0%2C0%20L60%2C30%20M60%2C0%20L0%2C30%27%20stroke%3D%27%23fff%27%20stroke-width%3D%276%27%2F%3E%3Cpath%20d%3D%27M0%2C0%20L60%2C30%20M60%2C0%20L0%2C30%27%20clip-path%3D%27url%28%23ctuj%29%27%20stroke%3D%27%23C8102E%27%20stroke-width%3D%274%27%2F%3E%3Cpath%20d%3D%27M30%2C0%20v30%20M0%2C15%20h60%27%20stroke%3D%27%23fff%27%20stroke-width%3D%2710%27%2F%3E%3Cpath%20d%3D%27M30%2C0%20v30%20M0%2C15%20h60%27%20stroke%3D%27%23C8102E%27%20stroke-width%3D%276%27%2F%3E%3C%2Fsvg%3E");
    background-size:150% 150%;background-position:50% 50%;background-repeat:no-repeat;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 55%);mask-image:linear-gradient(90deg,transparent,#000 55%);
    animation:nwFlag 5s ease-in-out infinite}
  @media(prefers-reduced-motion:reduce){.ct-app::before{animation:none}}
  .ct-app:hover{transform:translateY(-3px);box-shadow:0 20px 44px rgba(10,31,77,.36)}
  .ct-qr{flex:none;width:clamp(90px,7vw,112px);height:clamp(90px,7vw,112px);border-radius:10px;overflow:hidden}
  .ct-qr .qr-svg{width:100%;height:100%;display:block}
  .ct-app-tx b{display:block;font-weight:800;letter-spacing:-.01em;font-size:clamp(1.02rem,1.15vw,1.16rem);color:var(--ink)}
  .ct-app-tx span{display:block;margin-top:3px;font-size:.85rem;color:rgba(10,31,77,.58)}
  .ct-app-arw{flex:none;width:24px;height:24px;color:var(--ink);transition:transform .35s var(--e)}
  .ct-app-arw svg{width:100%;height:100%;display:block}
  .ct-app:hover .ct-app-arw{transform:translateX(4px)}

  /* link columns — red headings a touch bigger + bolder */
  .ct-col h4{font-family:'PlexMono',ui-monospace,monospace;font-weight:700;font-size:.84rem;letter-spacing:.13em;text-transform:uppercase;
    color:var(--amber);margin-bottom:clamp(15px,2.2vh,22px)}
  .ct-col{display:flex;flex-direction:column;gap:clamp(10px,1.4vh,14px)}
  .ct-col a{color:rgba(255,255,255,.72);font-size:.98rem;transition:color .3s var(--e),padding-left .3s var(--e)}
  .ct-col a:hover{color:#fff;padding-left:5px}

  /* trust line — single-line linear marquee */
  .ct-trust{overflow:hidden;border-top:1px solid rgba(255,255,255,.14);border-bottom:1px solid rgba(255,255,255,.14);
    padding:clamp(15px,2.2vh,22px) 0;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
  .ct-trust-track{display:inline-flex;align-items:center;white-space:nowrap;will-change:transform;animation:marq 34s linear infinite}
  .ct-trust-track span{padding:0 4px;font-weight:600;line-height:1.4;font-size:clamp(.98rem,1.1vw,1.12rem);color:rgba(255,255,255,.82)}
  .ct-trust-track i{color:var(--amber);font-style:normal;font-size:.62em;padding:0 clamp(14px,1.6vw,22px)}
  .ct-trust:hover .ct-trust-track{animation-play-state:paused}
  @media(prefers-reduced-motion:reduce){.ct-trust-track{animation:none}}

  /* bottom bar — copyright, and the trading disclosure the Companies Act requires */
  .ct-bottom{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
    padding-top:clamp(14px,1.8vh,20px)}
  .ct-copy{color:rgba(255,255,255,.6);font-size:.88rem;text-align:center}
  /* Quieter than the copyright line: it has to be present and legible, not prominent.
     No measure cap: this is one line of registration data that is scanned, not read, and
     a 78ch limit broke it across three lines with the footer half empty either side. */
  .ct-reg{max-width:100%;color:rgba(255,255,255,.42);font-size:.78rem;line-height:1.55;text-align:center}

  /* online-chat button — sits in the footer only, at the bottom of the last column */
  .bb-contact .ct-chat{margin:auto 0 clamp(-32px,-3.2vh,-18px);align-self:flex-start;display:inline-flex;align-items:center;gap:10px;
    padding:11px 20px;border-radius:999px;font-weight:700;font-size:.95rem;color:#fff;background:var(--red);
    box-shadow:0 12px 26px rgba(200,16,46,.32);transition:background .35s var(--e),transform .35s var(--e),color .35s var(--e)}
  .bb-contact .ct-chat .ic{flex:none;width:18px;height:18px}
  .bb-contact .ct-chat .ic svg{width:100%;height:100%;display:block}
  .bb-contact .ct-chat:hover{color:#fff;padding-left:20px;background:var(--gold-hi);transform:translateY(-2px)}

  @media(max-width:980px){
    .ct-cols{grid-template-columns:1fr 1fr;gap:34px 28px}
    .ct-cols .ct-info{grid-column:1 / -1}
    .ct-cta{grid-column:1 / -1;max-width:none}
    .bb-contact .ct-chat{margin:clamp(16px,2.4vh,24px) 0 0}
  }
  @media(max-width:720px){
    .ct-top{flex-direction:column;gap:22px}
    .ct-info{min-width:0}
  }
  @media(max-width:560px){
    .ct-cols{grid-template-columns:1fr}
  }

  /* ================= sideways card rows on phones =================================
     Three sections stack into a long column on a narrow screen — the plans, the service
     cards and the news. Each becomes one horizontal, snapping row instead: one card per
     screen with the next peeking, dots underneath. Native scroll, so the momentum and
     the accessibility come from the browser; the script only builds the dots and keeps
     the current one in step. Appended last on purpose: these rules must win over each
     section's own mobile grid. */
  .bb-dots{display:flex;gap:7px;justify-content:center;margin:16px 0 0}
  .bb-dots button{width:7px;height:7px;padding:0;border:0;border-radius:50%;background:rgba(10,31,77,.22);
    cursor:pointer;transition:background .3s ease,transform .3s ease}
  .bb-dots button[aria-current="true"]{background:var(--red);transform:scale(1.5)}
  @media(max-width:900px){
    .bb-hswipe{--hs-pad:clamp(18px,3.4vw,48px);
      display:flex;flex-direction:row;gap:14px;align-items:stretch;
      max-width:none;margin-inline:calc(-1 * var(--hs-pad));padding:4px var(--hs-pad);
      overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-inline:var(--hs-pad);
      -webkit-overflow-scrolling:touch;scrollbar-width:none}
    .bb-hswipe::-webkit-scrollbar{display:none}
    /* While the entrance animation is moving the cards, each card's snap area travels with
       it — a snap area is the TRANSFORMED border box — and a browser that answers by
       re-snapping the row reads as a stutter on whichever card is in flight. Snapping is
       only wanted once they are in place, so the page lifts it for the length of the
       reveal: home.js drives this class, about-subscriptions.js does the same. */
    .bb-hswipe.hs-no-snap{scroll-snap-type:none}
    .bb-hswipe > *{flex:0 0 min(86%,340px);scroll-snap-align:start;scroll-snap-stop:always}
    /* plans: each card keeps its own height — stretching them to the tallest left a band
       of empty colour under the shorter ones */
    .sub-grid.bb-hswipe{align-items:flex-start}
    /* the three service cards keep their stacked-card look, just side by side */
    .whyRight.bb-hswipe{margin-top:30px;height:auto}
    .whyRight.bb-hswipe > .scard{width:auto}
    /* news: the two small cards take the featured card's shape so every slide matches */
    .nw-grid.bb-hswipe > .nw-mini{flex-direction:column}
    .nw-grid.bb-hswipe > .nw-mini .nw-media{width:auto;height:clamp(180px,26vh,240px);align-self:auto}
  }

  /* ================= phone-only polish ============================================
     Everything below applies at 900px and under only — the desktop layout keeps the
     approved colours and controls exactly as they are. */
  @media(max-width:900px){
    /* The projects strip is swiped with a finger here, so the arrows are just clutter. */
    .rp-ctrls .rp-arrow{display:none}
    /* The news clip fills its frame instead of sitting letterboxed with white slivers
       down each side. */
    .nw-feat .nw-img video.nw-vid{object-fit:cover}
    /* The logo was being squeezed flat: .brand is a flex item of the pill, and on a phone
       the pill runs out of room, so the image lost two thirds of its width (27px wide for
       58px tall, from a 261x174 file) while the burger was pinched as well. Nothing that
       must keep its shape may shrink now; the logo is a little smaller so it fits at its
       real proportions, the white plate hugs it evenly instead of carrying 7px wings down
       each side, and the quote pill gives back the width this needs. */
    /* Scoped under .navwrap for the same reason as the footer: the Meet the Team page
       still carries an older copy of this stylesheet, and at equal specificity that copy
       would win and leave its header with the squeezed logo these rules exist to fix. */
    .navwrap .pill{padding-left:12px;gap:10px}
    .navwrap .nright{gap:9px;margin-left:auto;justify-content:flex-end}
    .navwrap .brand,.navwrap .brand img,.navwrap .burger{flex:none}
    .navwrap .brand img{height:50px;padding:2px;border-radius:8px;object-fit:contain}
    .navwrap.scrolled .brand img{height:44px}
    .navwrap .book{padding:10px 13px;font-size:.8rem;gap:7px}
    .navwrap .book .dot{width:21px;height:21px}
    .navwrap .book .dot svg{width:11px;height:11px}
    /* Very narrow phones (iPhone SE and friends): a few more pixels out of the quote pill
       and the logo, so the row still fits without anything being squeezed out of shape. */
    @media(max-width:400px){
      .navwrap .pill{padding-left:10px;gap:8px}
      .navwrap .nright{gap:7px}
      .navwrap .brand img{height:46px}
      .navwrap .book{padding:9px 8px;font-size:.76rem;gap:6px}
      .navwrap .book .dot{width:19px;height:19px}
      .navwrap .book .dot svg{width:10px;height:10px}
    }
    /* Under 340px (an SE-sized screen) even that is not enough room for the words, so the
       quote button keeps only its arrow — still the same link, still tappable at 40px. */
    @media(max-width:340px){
      .navwrap .book{font-size:0;gap:0;padding:8px}
      .navwrap .book .dot{width:24px;height:24px}
      .navwrap .book .dot svg{width:12px;height:12px}
    }
    /* "British Builders" and the app message were pushed ~80px apart by a desktop
       margin the column layout does not need. */
    /* Scoped to .bb-contact on purpose: the Meet the Team page still ships its own older
       copy of the shared stylesheet, and at equal specificity that copy would win and
       leave this page's footer spaced differently from every other one. */
    .bb-contact .ct-top .ct-app{margin-top:0}
    /* Footer link lists: one long ladder of 17 links becomes three tidy groups, each
       laid out in two columns under its heading, separated by a hairline. Shorter
       labels sit on the left, longer ones on the right (see the models in inc/menus.php),
       and a link left alone on the last row spans the full width so it never wraps. */
    .bb-contact .ct-cols{gap:0;padding-top:clamp(22px,3vh,32px)}
    .bb-contact .ct-cols .ct-col{display:grid;grid-template-columns:1fr 1fr;column-gap:16px;row-gap:11px;
      align-items:start;padding:18px 0;border-top:1px solid rgba(255,255,255,.14)}
    .bb-contact .ct-cols .ct-col h4{grid-column:1 / -1;margin:0 0 2px;color:var(--amber)}
    .bb-contact .ct-cols .ct-col > a{font-size:.94rem;line-height:1.35}
    .bb-contact .ct-cols .ct-col > a:nth-of-type(odd):last-of-type,
    .bb-contact .ct-cols .ct-col > a:nth-of-type(odd):nth-last-of-type(2){grid-column:1 / -1}
    .bb-contact .ct-cols .ct-col .ct-chat{grid-column:1 / -1;justify-self:end;width:auto;margin-top:6px}
  }