@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%;scroll-behavior:smooth;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:var(--red);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)}
  .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}
    .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)}

  /* 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}
    .scard{position:relative;width:100%;top:auto!important;left:auto!important;opacity:1;transform:none;filter:none!important}
    .statbar-inner{grid-template-columns:repeat(2,1fr);gap:clamp(24px,5vh,38px) 16px}
    .svchead{flex-direction:column;align-items:flex-start;gap:20px}
    .svccard{grid-template-columns:1fr;position:relative!important;top:auto!important;margin:0 0 26px 0!important;transform:none!important}
    .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 */
  .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: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");
    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}

  /* 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) ---------- */
  .bb-pricing{background:var(--cream);color:var(--ink);position:relative;z-index:5;
    padding:clamp(30px,3.4vh,38px) 0 clamp(30px,3.4vh,38px)}

  /* 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}

  /* 3-up grid */
  .sub-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,1.8vw,30px);align-items:stretch}

  /* card shell */
  .subcard{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: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}

  /* 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)}

  @media(max-width:980px){
    .sub-grid{grid-template-columns:1fr;max-width:560px;margin-inline:auto;gap:22px}
    .sc-title{min-height:0}
  }
  /* ---------- 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 only, compact */
  .ct-bottom{display:flex;align-items:center;justify-content:center;
    padding-top:clamp(14px,1.8vh,20px)}
  .ct-copy{color:rgba(255,255,255,.6);font-size:.88rem;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}
  }