: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%}
  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:hidden;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}}

  /* ---------- hero ---------- */
  .hero{position:relative;min-height:87svh;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:scale(1.06);animation:kb 26s var(--e) infinite alternate}
  @keyframes kb{to{transform:scale(1.16) translate(-1.5%,-1%)}}
  .media video{opacity:0;transition:opacity 1s ease}
  .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}.mt-hmedia img{animation:none;transform: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(40px,7vh,84px);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) 0 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:18px 0 clamp(40px,5vh,62px);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:26px 36px;margin-bottom:clamp(48px,6.5vh,84px);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(112px,14.5vh,166px);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}
  /* ---------- stats bar: slim full-width navy band, horizontal counters (count up from 0) ---------- */
  .statbar{background:var(--ink);color:#fff;margin-top:clamp(48px,7vh,84px)}   /* 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(40px,5.5vh,78px) 0 clamp(28px,4vh,54px)}
  .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(46px,7vh,88px);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(34px,5vh,70px) 0 clamp(26px,4vh,52px)}
  .svchead{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;margin-bottom:clamp(54px,8.5vh,110px);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(170px,21vh,280px)}
  /* 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(238px,29vh,338px);max-width:1000px;margin:0 auto clamp(22px,3vh,38px);
    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)}

  @media(max-width:980px){
    .whywrap{min-height:auto;padding:clamp(44px,6vh,66px) 0}
    .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!important;transform:none!important;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(38px,5vh,62px) 0 clamp(20px,2.6vh,34px)}
  /* 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(46px,6.5vh,80px) 0 clamp(30px,4.5vh,54px)}
  /* 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(46px,6vh,74px);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(40px,5.5vh,66px) 0 clamp(26px,4vh,44px)}
  }
  /* ---------- 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(46px,6.5vh,80px) 0 clamp(30px,4.5vh,54px)}
  .tm-inner{width:100%;display:flex;flex-direction:column;justify-content:center;
    padding-bottom:clamp(28px,4vh,56px)}

  /* 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(54px,6.8vh,84px)}
  .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(40px,5.5vh,66px) 0 clamp(30px,4.5vh,52px)}
  }
  /* ---------- Subscriptions (cream — bg matches the "Why British Builders" block) ---------- */
  .bb-pricing{background:var(--cream);color:var(--ink);position:relative;z-index:5;
    padding:clamp(72px,10vh,128px) 0 clamp(48px,7vh,84px)}

  /* header (left-aligned, marquee eyebrow + heading) — lowered so it clears the nav pill */
  .bb-pricing .sub-head{margin-bottom:clamp(48px,6.5vh,80px)}
  .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 24px 60px rgba(10,31,77,.12);transition:transform .45s var(--e),box-shadow .45s var(--e)}
  .subcard:hover{transform:translateY(-6px);box-shadow:0 34px 78px rgba(10,31,77,.20)}
  .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(36px,5vh,60px) 0 clamp(60px,9vh,108px)}

  /* 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(24px,3.4vh,42px)}
  .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:clamp(200px,42vw,260px)}
    .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(34px,4.5vh,56px) 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}
  }


  /* ==========================================================================
     MEET THE TEAM — modules scoped under .mt-* (never touches homepage sections)
     ========================================================================== */
  .mt-main{position:relative;overflow:hidden}
  .mt-sec{position:relative;padding:clamp(38px,5vw,64px) 0}
  .mt-sec>.wrap{position:relative;z-index:2}
  .mt-glow{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
  .mt-glow::before,.mt-glow::after{content:"";position:absolute;border-radius:50%;filter:blur(42px)}
  .mt-glow::before{width:52vw;height:52vw;max-width:760px;max-height:760px;background:radial-gradient(circle,rgba(200,16,46,.12),transparent 62%);top:-16vw;right:-9vw}
  .mt-glow::after{width:46vw;height:46vw;max-width:640px;max-height:640px;background:radial-gradient(circle,rgba(20,58,130,.5),transparent 64%);bottom:-18vw;left:-11vw}

  /* amber moving eyebrow — same marquee as homepage master-builders / footer CTA */
  .mt-eyebrow{margin-bottom:20px}
  .mt-eyebrow .etrack{color:var(--amber);font-weight:700;font-size:.82rem;letter-spacing:.22em}
  .mt-eyebrow .etrack i{color:var(--amber)}

  /* section header */
  .mt-head{max-width:760px;margin-bottom:clamp(20px,3vw,36px)}
  .mt-head h2{font-weight:800;letter-spacing:-.022em;line-height:1.03;font-size:clamp(1.9rem,4.2vw,3.3rem)}
  .mt-head p{margin-top:18px;color:var(--muted);font-size:clamp(1rem,1.2vw,1.12rem);line-height:1.62;max-width:58ch}
  .mt-note{margin-top:16px;display:inline-block;font-family:'PlexMono',monospace;font-size:.82rem;letter-spacing:.18em;text-transform:uppercase;color:var(--amber)}
  .mt-head.center{margin-left:auto;margin-right:auto;text-align:center}
  .mt-head.center p{margin-left:auto;margin-right:auto}
  .mt-head.center .mt-eyebrow{margin-left:auto;margin-right:auto}
  .mt-head.center .mt-note{justify-content:center}

  /* hero — the team photo IS the background and stays whole: the hero box takes the
     photo's own ~2:1 aspect, so object-fit:cover never crops it (everyone in frame
     at every width). The copy is overlaid and scales with the viewport, so it
     shrinks to fit the box on narrow screens instead of cropping the photo. */
  .mt-hero{position:relative;aspect-ratio:1600/803;overflow:hidden;display:flex;align-items:flex-end;
    padding:clamp(60px,9vw,132px) 0 clamp(14px,2.4vw,54px)}
  .mt-hmedia{position:absolute;inset:0;z-index:0;background:#071436;overflow:hidden}
  .mt-hmedia img{width:100%;height:100%;object-fit:cover;object-position:center;transform-origin:50% 0%;animation:mthz 18s ease-in-out infinite alternate}
  @keyframes mthz{from{transform:scale(1)}to{transform:scale(1.16)}}
  .mt-hmedia::after{content:"";position:absolute;inset:0;pointer-events:none;background:
    linear-gradient(0deg,rgba(6,16,46,.94) 0%,rgba(7,20,54,.5) 26%,rgba(7,20,54,0) 56%),
    linear-gradient(90deg,rgba(7,20,54,.66) 0%,rgba(7,20,54,.12) 44%,rgba(7,20,54,0) 68%)}
  .mt-hero>.wrap{position:relative;z-index:2;width:100%}
  .mt-hero .mt-eyebrow{margin-bottom:clamp(4px,1vw,20px)}
  .mt-hero h1{font-weight:800;letter-spacing:-.03em;line-height:.92;font-size:clamp(1.6rem,6.2vw,6.6rem)}
  .mt-hero h1 .r{color:var(--gold-hi);display:block}
  .mt-lead{margin-top:clamp(5px,1.2vw,26px);max-width:52ch;color:var(--muted);font-size:clamp(.7rem,1.5vw,1.3rem);line-height:1.5}
  .mt-stats{margin-top:clamp(8px,1.6vw,44px);display:flex;flex-wrap:wrap;gap:clamp(5px,.9vw,14px)}
  .mt-chip{display:inline-flex;align-items:center;gap:clamp(5px,.9vw,13px);padding:clamp(5px,1vw,13px) clamp(8px,1.4vw,20px);border:1px solid var(--line);border-radius:46px;background:rgba(255,255,255,.045);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
  .mt-chip b{font-family:'Fraunces',Georgia,serif;font-weight:300;font-size:clamp(.95rem,1.8vw,1.7rem);line-height:1;color:#fff;font-variant-numeric:tabular-nums}
  .mt-chip span{font-family:'PlexMono',monospace;font-size:clamp(.4rem,.68vw,.64rem);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);line-height:1.22;max-width:12ch}
  /* phones: a 2:1 hero is too short to also fit the nav + all the copy over the
     photo, so the full photo sits as a band and the copy drops just beneath it —
     still the whole team, never cropped — with the copy back to a readable size */
  @media(max-width:600px){
    .mt-hero{aspect-ratio:auto;min-height:0;display:block;padding:clamp(80px,21vw,104px) 0 clamp(26px,7vw,40px)}
    .mt-hmedia{position:relative;inset:auto;width:100%;aspect-ratio:1600/803;overflow:hidden}
    .mt-hmedia::after{background:linear-gradient(0deg,rgba(7,20,54,.5),rgba(7,20,54,0) 45%)}
    .mt-hero>.wrap{margin-top:clamp(18px,5vw,26px)}
    .mt-hero .mt-eyebrow{margin-bottom:14px}
    .mt-hero h1{font-size:clamp(2.6rem,11vw,3.6rem)}
    .mt-lead{font-size:clamp(.95rem,3.8vw,1.08rem);margin-top:14px}
    .mt-stats{margin-top:18px;gap:10px}
    .mt-chip{padding:11px 16px;gap:11px}
    .mt-chip b{font-size:1.5rem}
    .mt-chip span{font-size:.6rem}
  }

  /* director spotlight */
  .mt-dir{background:linear-gradient(160deg,#0d2c67 0%,#0a1f4d 62%)}
  .mt-dir-grid{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:clamp(48px,7vw,116px);align-items:center}
  /* portrait with an offset amber outline frame (the signature leadership look) */
  .mt-portrait-frame{position:relative;isolation:isolate}
  .mt-portrait-frame::before{content:"";position:absolute;inset:0;border:1.5px solid rgba(236,184,76,.5);border-radius:30px;transform:translate(20px,20px);z-index:0;pointer-events:none}
  .mt-portrait{position:relative;z-index:1;border-radius:26px;overflow:hidden;aspect-ratio:1/1;border:1px solid var(--line);box-shadow:0 46px 100px rgba(0,0,0,.55);background:linear-gradient(160deg,#0c2a63,#0a1f4d)}
  .mt-portrait img{width:100%;height:100%;object-fit:cover;object-position:center 22%}
  .mt-badge{position:absolute;left:16px;bottom:16px;z-index:3;display:inline-flex;align-items:center;gap:9px;padding:10px 16px;border-radius:44px;background:linear-gradient(120deg,var(--gold-hi),var(--gold));font-family:'PlexMono',monospace;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:#fff;box-shadow:0 14px 34px rgba(200,16,46,.42)}
  .mt-badge .pdot{width:7px;height:7px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.28)}
  .mt-dir-copy{position:relative}
  .mt-quote{position:relative;z-index:0;margin-top:6px;font-family:'Fraunces',Georgia,serif;font-weight:300;font-style:italic;font-size:clamp(1.7rem,3.5vw,2.8rem);line-height:1.16;letter-spacing:-.01em;color:#fff}
  .mt-quote::before{content:"\201C";position:absolute;z-index:-1;top:-.42em;left:-.08em;font-family:'Fraunces',Georgia,serif;font-style:normal;font-weight:300;font-size:3.1em;line-height:1;color:var(--amber);opacity:.14;pointer-events:none}
  .mt-quote .mk{color:var(--gold-hi);font-style:normal}
  .mt-dir-by{margin-top:26px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
  .mt-dir-by b{font-size:1.2rem;font-weight:700;letter-spacing:-.01em}
  .mt-dir-by .rl{font-family:'PlexMono',monospace;font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;color:var(--amber)}
  .mt-dir-by .ln{flex:0 0 34px;height:1px;background:var(--line)}
  .mt-mission{margin-top:26px;color:var(--muted);font-size:clamp(1rem,1.15vw,1.1rem);line-height:1.72;max-width:60ch}
  /* email presented exactly like the footer contact rows (icon + label + value),
     pulled out of the paragraph and sitting lower and to the right of the copy */
  .mt-dir-contact{margin-top:clamp(22px,3vw,34px);display:flex;justify-content:flex-end}
  .mt-dir-contact .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)}
  .mt-dir-contact .ci svg{width:19px;height:19px;display:block}
  .mt-dir-contact .ct-itx a{color:#fff;font-weight:600;transition:color .3s var(--e)}
  .mt-dir-contact .ct-itx a:hover{color:var(--gold-hi)}
  @media(max-width:820px){
    .mt-dir-grid{grid-template-columns:1fr;gap:clamp(30px,7vw,46px)}
    .mt-portrait-frame{max-width:240px;margin-inline:auto}
    .mt-portrait-frame::before{transform:translate(14px,14px)}
  }

  /* team carousels — reference-style cards: colour photo on top, name+role below */
  .mt-carousel{position:relative}
  .mt-track{display:flex;align-items:flex-start;gap:clamp(16px,1.6vw,24px);overflow-x:auto;
    padding:6px 2px 22px;scrollbar-width:none;-ms-overflow-style:none;
    -webkit-mask:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
  .mt-track::-webkit-scrollbar{display:none}
  .mt-cc{flex:0 0 clamp(160px,16vw,205px)}   /* smaller team/worker photos (client request) */
  .mt-cc.lo{margin-top:clamp(30px,4vw,56px)}                       /* zigzag: even cards sit lower */
  .mt-cc-ph{position:relative;aspect-ratio:4/5;border-radius:16px;overflow:hidden;background:#0c2456;
    box-shadow:0 18px 42px rgba(0,0,0,.36)}
  .mt-cc-ph img{width:100%;height:100%;object-fit:cover;object-position:center top;transition:transform .7s var(--e)}
  .mt-cc:hover .mt-cc-ph img{transform:scale(1.05)}
  .mt-cc-li{position:absolute;right:10px;bottom:10px;width:34px;height:34px;border-radius:9px;display:grid;place-items:center;
    background:rgba(10,26,64,.82);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);color:#fff;box-shadow:0 6px 16px rgba(0,0,0,.34)}
  .mt-cc-li svg{width:19px;height:19px}
  .mt-cc-li{display:none}   /* LinkedIn badges removed from team photos */
  .mt-cc-name{margin-top:16px;font-weight:700;font-size:1.16rem;letter-spacing:-.01em;color:#fff}
  .mt-cc-role{margin-top:6px;font-family:'PlexMono',monospace;font-size:.78rem;letter-spacing:.08em;line-height:1.45;text-transform:uppercase;color:var(--muted-2)}
  /* centred static row (site managers — only 3): no zigzag */
  .mt-carousel.is-centered .mt-cc.lo{margin-top:0}
  .mt-carousel.is-centered .mt-track{justify-content:center;overflow-x:visible;flex-wrap:wrap;
    gap:clamp(28px,4.4vw,64px);-webkit-mask:none;mask:none}   /* more space between the three */
  .mt-carousel.is-centered .mt-arrow{display:none}
  /* wider cards + a thick translucent frame so the row fills the width (less empty
     space at the sides). Scoped to the centred site-managers row only. */
  .mt-carousel.is-centered .mt-cc{flex:0 0 clamp(210px,21vw,300px);box-sizing:border-box;   /* a bit smaller (client request) */
    padding:clamp(12px,1.2vw,20px);border-radius:26px;
    border:clamp(4px,.5vw,7px) solid rgba(255,255,255,.5);background:rgba(255,255,255,.28);
    -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);box-shadow:0 24px 56px rgba(10,31,77,.17)}
  .mt-carousel.is-centered .mt-cc-name{margin-top:18px;padding-inline:4px}
  .mt-carousel.is-centered .mt-cc-role{padding-inline:4px}
  /* prev/next arrows */
  .mt-arrow{position:absolute;top:38%;transform:translateY(-50%);z-index:6;width:52px;height:52px;border-radius:50%;
    border:1px solid var(--line);background:rgba(9,22,58,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
    color:#fff;display:grid;place-items:center;cursor:pointer;transition:background .3s,border-color .3s,opacity .3s,transform .3s var(--e)}
  .mt-arrow:hover{background:var(--gold-hi);border-color:var(--gold-hi)}
  .mt-arrow svg{width:22px;height:22px}
  .mt-arrow.prev{left:-8px}
  .mt-arrow.next{right:-8px}
  .mt-arrow[disabled]{opacity:0;pointer-events:none}
  @media(max-width:720px){.mt-arrow{display:none}}   /* mobile: native swipe */

  /* full-screen-width auto-scrolling carousels (management / maintenance / field):
     the section header stays inside .wrap, only the track breaks out to 100vw.
     Edge fade (the .mt-track mask) keeps content off the very screen edges. */
  .mt-carousel:not(.is-centered){position:relative;left:50%;right:50%;width:100vw;margin-left:-50vw;margin-right:-50vw}
  .mt-carousel:not(.is-centered) .mt-arrow.prev{left:clamp(8px,2.4vw,34px)}
  .mt-carousel:not(.is-centered) .mt-arrow.next{right:clamp(8px,2.4vw,34px)}
  /* worker cards are frameless (only the director portrait keeps a frame) */

  /* site-managers entrance — the three cards fly in: left card from the left edge,
     middle from below, right from the right edge.
     TWO delivery paths, because the Claude Artifact preview renders the page in an
     auto-sized iframe that its PARENT scrolls — inside that iframe NO scroll signal
     (scroll events, IntersectionObserver, or animation-timeline:view()) can fire,
     so a scroll-triggered reveal is invisible there.
       • Normal viewports (the real website): JS adds .is-in when the row scrolls
         into view and REMOVES it when the row leaves — so the fly-in replays every
         time you scroll back to the block.
       • The auto-height preview (innerHeight is abnormally huge): JS adds .loop and
         the fly-in plays on a seamless loop so the recurring entrance is ALWAYS
         visible (the preview cannot sense scrolling, so a loop stands in for it). */
  html.js .mt-carousel[data-reveal] .mt-cc{opacity:0;will-change:transform,opacity;
    transition:opacity .8s var(--e),transform 1.7s cubic-bezier(.16,.86,.3,1)}
  html.js .mt-carousel[data-reveal] .mt-cc:nth-child(1){transform:translateX(-82vw)}   /* left  <- from left screen edge  */
  html.js .mt-carousel[data-reveal] .mt-cc:nth-child(2){transform:translateY(130px)}   /* middle <- rises from below      */
  html.js .mt-carousel[data-reveal] .mt-cc:nth-child(3){transform:translateX(82vw)}    /* right <- from right screen edge */
  html.js .mt-carousel[data-reveal].is-in .mt-cc{opacity:1;transform:none}
  html.js .mt-carousel[data-reveal].is-in .mt-cc:nth-child(2){transition-delay:.06s}   /* middle settles a touch after */
  /* looping fly-in (auto-height preview): a short pause, then fly in slowly -> hold
     -> fade out in place -> snap back off-screen while invisible -> repeat every 9s.
     Unhurried so the recurring entrance is calm, not busy. 100% == 0% is seamless. */
  @keyframes mtLoopLeft {0%{opacity:0;transform:translateX(-82vw)}24%{opacity:1;transform:none}64%{opacity:1;transform:none}78%{opacity:0;transform:none}78.01%{opacity:0;transform:translateX(-82vw)}100%{opacity:0;transform:translateX(-82vw)}}
  @keyframes mtLoopUp   {0%{opacity:0;transform:translateY(130px)}24%{opacity:1;transform:none}64%{opacity:1;transform:none}78%{opacity:0;transform:none}78.01%{opacity:0;transform:translateY(130px)}100%{opacity:0;transform:translateY(130px)}}
  @keyframes mtLoopRight{0%{opacity:0;transform:translateX(82vw)}24%{opacity:1;transform:none}64%{opacity:1;transform:none}78%{opacity:0;transform:none}78.01%{opacity:0;transform:translateX(82vw)}100%{opacity:0;transform:translateX(82vw)}}
  html.js .mt-carousel[data-reveal].loop .mt-cc{animation:mtLoopUp 9s var(--e) infinite;animation-delay:1.4s}
  html.js .mt-carousel[data-reveal].loop .mt-cc:nth-child(1){animation-name:mtLoopLeft}
  html.js .mt-carousel[data-reveal].loop .mt-cc:nth-child(3){animation-name:mtLoopRight}

  /* accreditation marquee band (headerless; reuses homepage .acmarq/.actrack/.accard) */
  .mt-accred{padding:clamp(28px,3.4vw,46px) 0}
  .mt-accred .acmarq{margin-top:0}
  .mt-accred .actrack{animation-duration:26s}   /* faster marquee than the homepage's 46s */

  /* join / work with us — centred frosted CTA card (fills the band, no empty gap) */
  .mt-join{padding:clamp(26px,3vw,44px) 0}
  .mt-join-card{max-width:860px;margin:0 auto;text-align:center;padding:clamp(22px,2.8vw,36px) clamp(26px,5vw,72px);
    border-radius:30px;background:rgba(255,255,255,.42);border:1px solid rgba(255,255,255,.6);
    box-shadow:0 34px 80px rgba(10,31,77,.16);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
  .mt-join-card .mt-eyebrow{margin:0 auto 20px}
  .mt-join-card h2{font-weight:800;letter-spacing:-.022em;line-height:1.03;font-size:clamp(2rem,4.6vw,3.3rem)}
  .mt-join-card p{margin:18px auto 0;max-width:52ch;font-size:clamp(1rem,1.2vw,1.12rem);line-height:1.6}
  .mt-join-card .acts{margin-top:clamp(26px,3.4vw,38px);display:flex;justify-content:center}

  /* scroll reveal — progressive enhancement (visible when JS is off) */
  .mt-rev{transition:opacity .7s var(--e),transform .75s var(--e);transition-delay:var(--d,0ms)}
  html.js .mt-rev:not(.is-in){opacity:0;transform:translateY(26px)}
  .mt-rev.is-in{opacity:1;transform:none}

  /* mobile nav menu (the pill hides its links below 1080px) */
  button.burger{border:0;cursor:pointer;padding:0}
  .mt-mnav{position:fixed;top:92px;left:clamp(18px,3.4vw,48px);right:clamp(18px,3.4vw,48px);z-index:99;
    background:#0B2560;border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:10px;
    box-shadow:0 30px 70px rgba(0,0,0,.55);display:none;flex-direction:column;gap:2px;
    opacity:0;transform:translateY(-10px);transition:opacity .3s var(--e),transform .3s var(--e)}
  .mt-mnav.open{display:flex;opacity:1;transform:none}
  .mt-mnav a{padding:13px 16px;border-radius:12px;font-size:.95rem;font-weight:500;color:rgba(255,255,255,.85)}
  .mt-mnav a:hover{background:rgba(255,255,255,.08);color:#fff}
  .mt-mnav a.cta{margin-top:6px;justify-content:center;color:#fff}
  @media(min-width:1081px){.mt-mnav{display:none!important}}

  /* ---- light-blue zone: Management → Accreditations (contacts stay navy) ----
     Dark text + red eyebrows — the homepage's own convention for light sections. */
  .mt-lightzone{background:#b3c4e4}
  .mt-lightzone .mt-dir{background:transparent}                    /* one flat light-blue field (no alternating band) */
  .mt-lightzone .mt-glow{display:none}
  .mt-lightzone .mt-head h2{color:var(--ink)}
  .mt-lightzone .mt-head p{color:rgba(10,31,77,.72)}
  .mt-lightzone .mt-eyebrow .etrack,.mt-lightzone .mt-eyebrow .etrack i{color:var(--gold-lo)}
  .mt-lightzone .mt-note{color:var(--gold-lo)}
  .mt-lightzone .mt-cc-name{color:var(--ink)}
  .mt-lightzone .mt-cc-role,.mt-lightzone .mt-sm .mt-cc-role{color:rgba(10,31,77,.6)}
  .mt-lightzone .mt-cc-ph{background:#c7d3ec;box-shadow:0 16px 34px rgba(10,31,77,.18)}
  /* tighter vertical spacing — light-blue (lightzone) sections only; navy hero/director keep theirs */
  .mt-lightzone .mt-sec{padding-top:clamp(20px,2.4vh,28px);padding-bottom:clamp(20px,2.4vh,28px)}
  .mt-lightzone .mt-head{margin-bottom:clamp(14px,2vh,24px)}
  .mt-lightzone .mt-arrow{background:rgba(255,255,255,.92);border-color:rgba(10,31,77,.16);color:var(--ink)}
  .mt-lightzone .mt-arrow:hover{background:var(--gold-hi);border-color:var(--gold-hi);color:#fff}
  .mt-lightzone .mt-join h2{color:var(--ink)}
  .mt-lightzone .mt-join p{color:rgba(10,31,77,.72)}

  @media(prefers-reduced-motion:reduce){
    html.js .mt-rev:not(.is-in){opacity:1;transform:none}
    /* the site-managers fly-in is intentionally exempt — it must always play */
    .mt-rev,.mt-cc-ph img{transition:none}
    .mt-track{scroll-behavior:auto}
    .mt-hmedia img{animation:none}
  }