/* Lato, self-hosted (SIL Open Font License, see fonts/OFL.txt) */
@font-face{font-family:'Lato';font-style:normal;font-weight:300;font-display:swap;src:url(fonts/lato-light.woff) format('woff')}
@font-face{font-family:'Lato';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/lato-regular.woff) format('woff')}
@font-face{font-family:'Lato';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/lato-bold.woff) format('woff')}
@font-face{font-family:'Lato';font-style:normal;font-weight:900;font-display:swap;src:url(fonts/lato-black.woff) format('woff')}
@font-face{font-family:'Lato';font-style:italic;font-weight:700;font-display:swap;src:url(fonts/lato-bolditalic.woff) format('woff')}
@font-face{font-family:'Lato';font-style:italic;font-weight:900;font-display:swap;src:url(fonts/lato-blackitalic.woff) format('woff')}
/* ============ BRAND TOKENS (swap here) ============ */
:root{
  --navy:#0B4E7D;        /* logo blue: nav, headings, "Cross" wordmark */
  --slate:#4F7399;       /* "Cross" in hero */
  --gold:#EBC46C;        /* buttons, "Connect" */
  --gold-deep:#D9AE4E;
  --ice:#E8EFF4;         /* header + footer background */
  --cream:#FEFBF3;       /* page background */
  --ink:#111418;
  --muted:#4A5563;
  --white:#FFFFFF;
  --radius:4px;
  --ease:cubic-bezier(.22,.8,.26,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Lato',system-ui,sans-serif;background:var(--cream);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{width:min(1200px,100% - 32px);margin-inline:auto}

/* ============ ANNOUNCEMENT ============ */
.announce{background:var(--navy);color:var(--white);text-align:center;font-size:14px;font-weight:700;padding:9px 16px;position:relative;overflow:hidden}
.announce a{position:relative;z-index:1}
.announce a:hover{color:var(--gold)}
.announce::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(235,196,108,.25) 50%,transparent 70%);transform:translateX(-100%);animation:shimmer 5s ease-in-out infinite}
@keyframes shimmer{60%,100%{transform:translateX(100%)}}

/* ============ HEADER ============ */
header{position:sticky;top:0;z-index:50;background:var(--ice);transition:box-shadow .3s,padding .3s}
header.scrolled{box-shadow:0 6px 24px rgba(11,78,125,.12)}
.nav-wide{width:100%;padding-inline:clamp(16px,3.5vw,56px)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px;height:92px;transition:height .3s var(--ease)}
header.scrolled .nav{height:68px}
.logo img{height:38px;width:auto;transition:height .3s var(--ease)}
header.scrolled .logo img{height:30px}
.logo-360 img{height:40px;width:auto;transition:height .3s var(--ease)}
header.scrolled .logo-360 img{height:32px}
.menu{display:flex;gap:clamp(24px,3vw,48px);list-style:none;align-items:center}
.menu>li{position:relative}
.menu>li>a{font-weight:700;font-size:17px;letter-spacing:.02em;color:var(--navy);padding:8px 0;display:inline-flex;align-items:center;gap:6px;position:relative}
.menu>li>a::after{content:"";position:absolute;left:0;bottom:2px;height:2px;width:100%;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.menu>li:hover>a::after{transform:scaleX(1)}
.caret{width:10px;height:10px;transition:transform .3s}
.has-drop:hover .caret{transform:rotate(180deg)}
.drop{position:absolute;top:calc(100% + 14px);left:-24px;width:340px;background:var(--white);border-radius:8px;box-shadow:0 20px 50px rgba(17,20,24,.15);padding:10px;list-style:none;opacity:0;visibility:hidden;transform:translateY(10px);transition:all .3s var(--ease)}
.drop::before{content:"";position:absolute;top:-14px;left:0;right:0;height:14px}
.has-drop:hover .drop{opacity:1;visibility:visible;transform:translateY(0)}
.drop a{display:block;padding:10px 14px;font-size:14px;font-weight:700;letter-spacing:.02em;color:var(--navy);border-radius:6px;transition:background .2s,padding .2s}
.drop a:hover{background:var(--ice);padding-left:20px}
.burger{display:none;background:none;border:0;width:44px;height:44px;cursor:pointer;position:relative}
.burger span{position:absolute;left:10px;right:10px;height:2px;background:var(--navy);transition:all .3s}
.burger span:nth-child(1){top:15px}.burger span:nth-child(2){top:21px}.burger span:nth-child(3){top:27px}
.burger.open span:nth-child(1){top:21px;transform:rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){top:21px;transform:rotate(-45deg)}

/* ============ HERO ============ */
.hero{position:relative;min-height:clamp(480px,calc(100vh - 200px),780px);min-height:clamp(480px,calc(100svh - 200px),780px);display:flex;align-items:center;overflow:hidden;color:var(--white);background:#1A2330}

.hero-inner{position:relative;z-index:2;padding:80px 0}
.hero h1{font-size:clamp(40px,7vw,84px);font-weight:900;line-height:1.05;letter-spacing:-.01em;display:flex;flex-wrap:wrap;align-items:baseline;gap:0 .28em}
.hero h1 .c1{color:var(--slate)}
.hero h1 .c2{color:var(--gold)}
.hero h1 .bar{color:var(--white);font-weight:300}
.hero h1 .name::after{content:"|";color:var(--white);font-weight:300;margin-left:.28em}
.typed{color:var(--white);min-width:1ch;flex-basis:100%;min-height:1.05em;width:fit-content;padding-right:.15em;isolation:isolate}
.typed::after{content:"";display:inline-block;width:4px;height:.86em;margin-left:4px;vertical-align:-.06em;background:rgba(255,255,255,.85);animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.hero p{font-size:clamp(17px,1.6vw,21px);max-width:620px;margin:22px 0 34px;opacity:.95}
.hero-ctas{display:flex;gap:16px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--gold);color:var(--ink);font-weight:700;font-size:17px;padding:16px 34px;border-radius:var(--radius);position:relative;overflow:hidden;transition:transform .3s var(--ease),box-shadow .3s}
.btn::before{content:"";position:absolute;inset:0;background:var(--gold-deep);transform:translateY(101%);transition:transform .35s var(--ease)}
.btn span,.btn svg{position:relative}
.btn svg{width:16px;height:16px;transition:transform .3s var(--ease)}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(235,196,108,.35)}
.btn:hover::before{transform:translateY(0)}
.btn:hover svg{transform:translateX(4px)}
.btn-ghost{background:transparent;color:var(--white);box-shadow:inset 0 0 0 2px rgba(255,255,255,.7)}
.btn-ghost::before{background:rgba(255,255,255,.12)}
.btn-ghost:hover{box-shadow:inset 0 0 0 2px var(--white)}
.scroll-cue{position:absolute;z-index:3;left:50%;bottom:22px;transform:translateX(-50%);width:26px;height:42px;border:2px solid rgba(255,255,255,.7);border-radius:14px}
.scroll-cue::after{content:"";position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;background:#fff;border-radius:2px;animation:cue 1.8s ease-in-out infinite}
@keyframes cue{0%{opacity:0;transform:translateY(0)}40%{opacity:1}100%{opacity:0;transform:translateY(14px)}}

/* ============ SECTIONS ============ */
section{position:relative}
.pad{padding:clamp(56px,7vw,96px) 0}
.eyebrow{display:inline-flex;align-items:center;gap:12px;font-size:14px;font-weight:900;letter-spacing:.18em;color:var(--ink);text-transform:uppercase;margin-bottom:14px}
.eyebrow::before{content:"";width:32px;height:2px;background:var(--gold)}
h2{font-size:clamp(32px,4.2vw,52px);font-weight:900;color:var(--navy);line-height:1.12;letter-spacing:-.01em}
.lead{font-size:18px;color:var(--muted);max-width:640px}

/* Creating connections */
.connect-sec{padding:clamp(40px,4vw,56px) 0 clamp(48px,6vw,88px)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,80px);align-items:center}
.connect-copy{text-align:center}
.connect-copy h2{font-style:italic;margin-bottom:22px;color:var(--ink)}
.connect-copy p{font-size:18px;max-width:540px;margin-inline:auto}
.connect-visual{position:relative;height:clamp(360px,calc(100vh - 260px),560px);border-radius:6px;overflow:hidden;background:#dfe6ea}
.connect-visual img{width:100%;height:120%;object-fit:cover;will-change:transform}
.connect-visual canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair}
.net-ui{position:absolute;left:14px;right:14px;bottom:14px;display:flex;justify-content:space-between;align-items:center;gap:10px;pointer-events:none}
.net-ui span{background:rgba(255,255,255,.88);backdrop-filter:blur(6px);color:var(--navy);font-size:13px;font-weight:700;padding:8px 14px;border-radius:30px;box-shadow:0 4px 14px rgba(17,20,24,.08)}
.net-ui button{pointer-events:auto;border:0;background:var(--navy);color:#fff;font:700 12px 'Lato',sans-serif;letter-spacing:.08em;text-transform:uppercase;padding:9px 16px;border-radius:30px;cursor:pointer}
.net-ui button[hidden]{display:none}
.connect-visual .fallback{position:absolute;inset:0;background:linear-gradient(135deg,#e6ecef,#cfd9df)}

/* Who we are */
.who{background:#1A2330;color:var(--white);overflow:hidden}
.who .eyebrow{color:var(--gold)}
.who h2,.cta h2{color:var(--white)}
.who .lead{color:rgba(255,255,255,.82);margin:18px 0 32px}
.who-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(32px,6vw,80px);align-items:center}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,.15);border-radius:8px;overflow:hidden}
.stat{background:var(--navy);padding:32px 20px;text-align:center}
.stat b{display:block;font-size:clamp(38px,4.5vw,56px);font-weight:900;color:var(--gold);line-height:1}
.stat small{display:block;margin-top:10px;font-size:13px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;opacity:.85}
@keyframes spin{to{transform:rotate(360deg)}}

/* Services */
.services-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:48px}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.card{background:var(--white);border-radius:8px;padding:32px 26px 28px;position:relative;overflow:hidden;display:flex;flex-direction:column;gap:14px;box-shadow:0 1px 0 rgba(17,20,24,.06),0 0 0 1px rgba(11,78,125,.08);transition:transform .45s var(--ease),box-shadow .45s var(--ease);transform-style:preserve-3d}
.card::before{content:"";position:absolute;inset:auto 0 0 0;height:4px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.card:hover{box-shadow:0 24px 50px rgba(11,78,125,.16);}
.card:hover::before{transform:scaleX(1)}
.card .ic{width:56px;height:56px;border-radius:12px;background:var(--ice);display:grid;place-items:center;color:var(--navy);transition:background .4s,color .4s,transform .4s var(--ease)}
.card:hover .ic{background:var(--navy);color:var(--gold);transform:rotate(-6deg) scale(1.05)}
.card .ic svg{width:28px;height:28px}
.card h3{font-size:19px;font-weight:900;line-height:1.25;color:var(--ink)}
.card p{font-size:15px;color:var(--muted);flex:1}
.card .more{font-size:13px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);display:inline-flex;align-items:center;gap:8px}
.card .more svg{width:14px;height:14px;transition:transform .3s var(--ease)}
.card:hover .more svg{transform:translateX(5px)}
.card .num{position:absolute;right:18px;top:12px;font-size:44px;font-weight:900;color:rgba(11,78,125,.06);line-height:1}

/* Clients (renders only when logos are added) */
.clients{background:var(--white);text-align:center}
.clients h2{color:var(--ink)}
.clients[hidden]{display:none}

/* Marquee */
.marquee{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);margin-top:48px}
.marquee-track{display:flex;gap:72px;width:max-content;animation:marquee 30s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee img{height:64px;width:auto;max-width:220px;object-fit:contain;filter:grayscale(1);opacity:.75;transition:filter .3s,opacity .3s}
.marquee img:hover{filter:none;opacity:1}
@keyframes marquee{to{transform:translateX(-50%)}}

/* CTA */
.cta{color:var(--white);overflow:hidden;min-height:420px;display:flex;align-items:center}
.cta-bg{position:absolute;inset:-15% 0;background:linear-gradient(120deg,#8a3b1e,#b5582c 40%,#6b2f1a 70%,#2b4b6f);background-size:cover;background-position:center;will-change:transform}
.cta::after{content:"";position:absolute;inset:0;background:rgba(17,20,24,.45)}
.cta .wrap{position:relative;z-index:1}
.cta h2{margin-bottom:10px}
.cta p{font-size:19px;margin-bottom:30px;opacity:.92}

/* Partners */
.partners{text-align:center}
.partners h2{max-width:720px;margin-inline:auto;color:var(--ink)}
.partner-row{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;align-items:center;margin:48px auto 0;max-width:900px}
.partner-row img{height:64px;width:100%;object-fit:contain;transition:transform .4s var(--ease),filter .4s}
.partner-row a:hover img{transform:translateY(-6px) scale(1.04)}

/* Footer */
footer{background:var(--ice);padding:48px 0 32px;font-size:15px}
.foot{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.3fr;gap:40px}
.foot img{height:32px;width:auto;margin-bottom:22px}
.foot h4{font-size:19px;font-weight:700;color:var(--ink);margin-bottom:14px;letter-spacing:.01em}
.foot ul{list-style:none;display:grid;gap:10px}
.foot ul a{position:relative;transition:color .2s}
.foot ul a:hover{color:var(--navy)}
.foot ul a::after{content:"";position:absolute;left:0;bottom:-2px;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.foot ul a:hover::after{transform:scaleX(1)}
.social{display:flex;gap:10px;margin-bottom:16px}
.social a{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:#fff;transition:transform .3s var(--ease)}
.social a:hover{transform:translateY(-4px) rotate(-8deg)}
.social svg{width:17px;height:17px}
.s-li{background:#2F6FA8}.s-yt{background:#C7322B}.s-fb{background:#3B5998}.s-ig{background:#E0645F}
.copy{font-size:14px}

/* Reveal */
.reveal{opacity:0;transform:translateY(34px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}

/* Back to top */
.totop{position:fixed;right:20px;bottom:20px;z-index:40;width:48px;height:48px;border-radius:50%;border:0;background:var(--gold);color:var(--ink);cursor:pointer;display:grid;place-items:center;box-shadow:0 10px 24px rgba(17,20,24,.18);opacity:0;transform:translateY(20px);pointer-events:none;transition:all .35s var(--ease)}
.totop.show{opacity:1;transform:none;pointer-events:auto}
.totop svg{width:18px;height:18px}

/* ============ RESPONSIVE ============ */
@media (max-width:1100px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .menu{gap:22px}
  .logo-360{display:none}
}
@media (max-width:900px){
  .burger{display:block}
  .menu{position:fixed;inset:0 0 0 auto;top:0;width:min(360px,86vw);height:100vh;background:var(--white);flex-direction:column;align-items:flex-start;gap:0;padding:100px 28px 28px;transform:translateX(100%);transition:transform .45s var(--ease);box-shadow:-20px 0 50px rgba(17,20,24,.2);overflow-y:auto}
  .menu.open{transform:none}
  .menu>li{width:100%;border-bottom:1px solid var(--ice)}
  .menu>li>a{padding:16px 0;width:100%}
  .drop{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;width:100%;padding:0 0 12px;display:none}
  .has-drop.open .drop{display:block}
  .burger{z-index:60}
  .split,.who-grid{grid-template-columns:1fr}
  .connect-visual{height:auto;aspect-ratio:16/10}
  .foot{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  .grid{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr}
  .partner-row{grid-template-columns:repeat(3,1fr);gap:18px;margin-top:36px}
  .partner-row img{height:48px}
  .foot{grid-template-columns:1fr}
  .nav{height:76px}
  .logo img{height:34px}
  .scroll-cue{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
}

/* ============ ABOUT PAGE ============ */
.page-hero{position:relative;background:#1A2330;color:var(--white);overflow:hidden;padding:clamp(88px,12vw,150px) 0 clamp(72px,9vw,110px)}
.page-hero canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.85}
.page-hero .wrap{position:relative;z-index:1}
.crumbs{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;opacity:.7;margin-bottom:22px}
.crumbs a:hover{color:var(--gold)}
.page-hero h1{font-size:clamp(42px,6.4vw,80px);font-weight:900;line-height:1.05;letter-spacing:-.01em}
.page-hero h1 .c1{color:var(--slate)}.page-hero h1 .c2{color:var(--gold)}
.page-hero p{font-size:clamp(17px,1.6vw,20px);max-width:680px;margin-top:22px;opacity:.9}

.overview-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(32px,6vw,80px);align-items:center}
.overview-grid h2{margin-bottom:22px;color:var(--ink)}
.overview-grid p{font-size:18px;color:var(--muted);margin-bottom:16px}
.overview-stats{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ostat{background:var(--white);border-radius:10px;padding:30px 24px;box-shadow:0 0 0 1px rgba(11,78,125,.08);position:relative;overflow:hidden}
.ostat::after{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--gold);transform:scaleY(0);transform-origin:top;transition:transform .6s var(--ease)}
.ostat.in::after,.reveal.in .ostat::after{transform:scaleY(1)}
.ostat b{display:block;font-size:clamp(36px,4vw,50px);font-weight:900;color:var(--navy);line-height:1}
.ostat small{display:block;margin-top:10px;font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

.mv{background:#1A2330;color:var(--white);overflow:hidden}
.mv .eyebrow{color:var(--gold)}.mv .eyebrow::before{background:var(--gold)}
.mv h2{color:var(--white);margin-bottom:44px}
.mv-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.mv-card{position:relative;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:44px 36px 40px;transition:background .4s,transform .4s var(--ease)}
.mv-card:hover{background:rgba(255,255,255,.1);transform:translateY(-4px)}
.mv-card .tag{display:inline-block;font-size:13px;font-weight:900;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);background:var(--gold);padding:6px 14px;border-radius:30px;margin-bottom:22px}
.mv-card p{font-size:clamp(19px,1.9vw,24px);line-height:1.5;font-weight:400}
.mv-card .q{position:absolute;right:26px;top:10px;font-size:120px;line-height:1;font-weight:900;color:rgba(235,196,108,.18);font-family:Georgia,serif}

.values-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:48px}
.value{background:var(--white);border-radius:10px;padding:32px 26px;box-shadow:0 0 0 1px rgba(11,78,125,.08);position:relative;overflow:hidden;transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.value:hover{transform:translateY(-6px);box-shadow:0 24px 50px rgba(11,78,125,.14)}
.value::before{content:"";position:absolute;inset:auto 0 0 0;height:4px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.value:hover::before{transform:scaleX(1)}
.value .ic{width:56px;height:56px;border-radius:12px;background:var(--ice);display:grid;place-items:center;color:var(--navy);margin-bottom:20px;transition:background .4s,color .4s,transform .4s var(--ease)}
.value:hover .ic{background:var(--navy);color:var(--gold);transform:rotate(-6deg)}
.value .ic svg{width:28px;height:28px}
.value h3{font-size:21px;font-weight:900;margin-bottom:10px}
.value p{font-size:15px;color:var(--muted)}

.team-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:36px}
.team-head h2{color:var(--ink)}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{border:1.5px solid rgba(11,78,125,.2);background:transparent;color:var(--ink);font:700 13px 'Lato',sans-serif;letter-spacing:.06em;padding:9px 16px;border-radius:30px;cursor:pointer;transition:all .25s}
.chip:hover{border-color:var(--navy)}
.chip.on{background:var(--navy);border-color:var(--navy);color:#fff}
.team-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:22px}
.member{transition:opacity .35s,transform .35s var(--ease)}
.member.hide{display:none}
.member .ph{position:relative;aspect-ratio:4/5;border-radius:10px;overflow:hidden;background:linear-gradient(160deg,var(--ice),#cfdbe4)}
.member img{width:100%;height:100%;object-fit:cover;object-position:top center;filter:grayscale(1);transform:scale(1.02);transition:filter .5s,transform .7s var(--ease)}
.member:hover img{filter:none;transform:scale(1.07)}
.member .ph::after{content:"";position:absolute;inset:auto 0 0 0;height:4px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.member:hover .ph::after{transform:scaleX(1)}
.member .init{position:absolute;inset:0;display:grid;place-items:center;font-size:48px;font-weight:900;color:var(--navy);opacity:.35}
.member h3{font-size:18px;font-weight:900;margin-top:16px;line-height:1.3}
.member p{font-size:14px;color:var(--muted);margin-top:4px}

.closing{background:#1A2330;color:#fff;text-align:center;overflow:hidden}
.closing h2{color:#fff;max-width:760px;margin:0 auto 30px}
.closing .glow{position:absolute;width:640px;height:640px;left:50%;top:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(235,196,108,.18),transparent 60%);pointer-events:none;animation:pulse 6s ease-in-out infinite}
@keyframes pulse{50%{transform:translate(-50%,-50%) scale(1.15);opacity:.7}}
.closing .wrap{position:relative}

.menu>li>a.active{color:var(--navy)}
.menu>li>a.active::after{transform:scaleX(1)}

@media (max-width:1100px){.values-grid,.team-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:900px){.overview-grid,.mv-grid{grid-template-columns:1fr}.values-grid,.team-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.values-grid{grid-template-columns:1fr}.team-grid{gap:16px}.member h3{font-size:16px}.overview-stats{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.typed{min-height:2.1em}}

/* Hero: wider content area, single-line headline on desktop (size auto-fitted in JS) */
.hero .hero-inner{width:100%;max-width:none;padding-inline:clamp(16px,3.5vw,56px)}
@media (min-width:901px){
  .hero h1{flex-wrap:nowrap;white-space:nowrap;font-size:var(--h1-fit,clamp(34px,4.4vw,68px))}
  .typed{flex-basis:auto;min-height:0}
}

.who .who-grid{position:relative;z-index:1}
/* Who We Are: semicircle with a travelling dot */
.who-ring{position:absolute;right:-270px;top:50%;margin-top:-270px;width:540px;height:540px;border-radius:50%;border:1.5px solid rgba(235,196,108,.4);pointer-events:none;animation:spin 22s linear infinite;animation-delay:-2s;z-index:0}
.who-ring i{position:absolute;left:50%;top:50%;width:0;height:0}
.who-ring i::after{content:"";position:absolute;left:-7px;top:-277px;width:14px;height:14px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 6px rgba(235,196,108,.18),0 0 18px rgba(235,196,108,.6)}
.who-ring i:nth-child(2){transform:rotate(180deg)}
.who .stats{background:none}
.who .stat{background:transparent}
.who .stat+.stat{border-left:1px solid rgba(255,255,255,.15)}
@media (max-width:900px){.who-ring{right:-200px;width:400px;height:400px;margin-top:-200px}.who-ring i::after{top:-207px}}
@media (max-width:600px){.who .stat+.stat{border-left:0;border-top:1px solid rgba(255,255,255,.15)}}

/* Who We Are stats: bounce on hover */
.who .stat{cursor:default;transition:background .35s}
.who .stat b{display:inline-block;transform-origin:50% 100%}
.who .stat small{transition:color .3s,letter-spacing .35s var(--ease)}
.who .stat:hover{background:rgba(255,255,255,.05)}
.who .stat:hover b{animation:statBounce .8s cubic-bezier(.28,.84,.42,1)}
.who .stat:hover small{color:var(--gold);letter-spacing:.16em}
@keyframes statBounce{
  0%{transform:translateY(0) scale(1,1)}
  12%{transform:translateY(0) scale(1.12,.86)}
  35%{transform:translateY(-18px) scale(.94,1.08)}
  55%{transform:translateY(0) scale(1.08,.92)}
  70%{transform:translateY(-6px) scale(.98,1.03)}
  85%{transform:translateY(0) scale(1.02,.98)}
  100%{transform:translateY(0) scale(1,1)}
}
@media (prefers-reduced-motion:reduce){.who .stat:hover b{animation:none}}

/* ============ TESTIMONIALS PAGE ============ */
.story{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(32px,5vw,72px);align-items:start}
.story-quote{position:sticky;top:110px;background:var(--navy);color:#fff;border-radius:14px;padding:clamp(32px,4vw,52px);overflow:hidden}
.story-quote::before{content:"\201C";position:absolute;right:18px;top:-30px;font:900 220px/1 Georgia,serif;color:rgba(235,196,108,.16)}
.story-quote .tag{display:inline-block;font-size:12px;font-weight:900;letter-spacing:.18em;text-transform:uppercase;background:var(--gold);color:var(--ink);padding:6px 14px;border-radius:30px;margin-bottom:26px}
.story-quote blockquote{position:relative;font-size:clamp(24px,2.6vw,34px);line-height:1.3;font-weight:700}
.story-quote blockquote em{font-style:normal;color:var(--gold)}
.who-said{display:flex;gap:16px;align-items:center;margin-top:34px;padding-top:26px;border-top:1px solid rgba(255,255,255,.18)}
.avatar{flex:none;width:54px;height:54px;border-radius:50%;background:var(--gold);color:var(--ink);display:grid;place-items:center;font-weight:900;font-size:18px}
.who-said .avatar{display:grid}
.who-said b{display:block;font-size:17px}
.who-said span{display:block;font-size:14px;opacity:.8;line-height:1.45}
.story-body .eyebrow{margin-bottom:18px}
.story-body p{font-size:18px;color:var(--muted);margin-bottom:18px}
.story-body p:first-of-type{font-size:21px;color:var(--ink);font-weight:700;line-height:1.5}
.handled{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:30px}
.handled div{display:flex;gap:14px;align-items:center;background:var(--white);border-radius:10px;padding:18px;box-shadow:0 0 0 1px rgba(11,78,125,.08);transition:transform .35s var(--ease),box-shadow .35s}
.handled div:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(11,78,125,.12)}
.handled .ic{flex:none;width:44px;height:44px;border-radius:10px;background:var(--ice);color:var(--navy);display:grid;place-items:center}
.handled svg{width:22px;height:22px}
.handled b{font-size:15px;font-weight:900;line-height:1.3}

.more-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:36px}
.more-head h2{color:var(--ink)}
.arrows{display:flex;gap:10px}
.arrows button{width:48px;height:48px;border-radius:50%;border:1.5px solid rgba(11,78,125,.25);background:transparent;color:var(--navy);cursor:pointer;display:grid;place-items:center;transition:all .25s}
.arrows button:hover{background:var(--navy);border-color:var(--navy);color:#fff}
.arrows svg{width:18px;height:18px}
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 48px)/3);gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:6px 2px 24px}
.rail::-webkit-scrollbar{display:none}
.tcard{scroll-snap-align:start;background:var(--white);border-radius:12px;padding:32px 28px;display:flex;flex-direction:column;gap:20px;box-shadow:0 0 0 1px rgba(11,78,125,.08);position:relative;overflow:hidden;transition:transform .4s var(--ease),box-shadow .4s}
.tcard:hover{transform:translateY(-6px);box-shadow:0 24px 50px rgba(11,78,125,.14)}
.tcard::after{content:"";position:absolute;inset:auto 0 0 0;height:4px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.tcard:hover::after{transform:scaleX(1)}
.tcard .tag{align-self:flex-start;font-size:12px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:var(--navy);background:var(--ice);padding:6px 12px;border-radius:30px}
.tcard q{quotes:"\201C" "\201D";font-size:19px;line-height:1.5;font-weight:700;color:var(--ink);flex:1}
.tcard .who-said{margin-top:0;border-top-color:rgba(11,78,125,.12)}
.tcard .who-said b{color:var(--ink)}.tcard .who-said span{color:var(--muted);opacity:1}
.tcard.pending{background:repeating-linear-gradient(135deg,#fff,#fff 14px,#f7f9fb 14px,#f7f9fb 28px);box-shadow:0 0 0 1.5px rgba(11,78,125,.2) inset}
.tcard.pending q{color:var(--muted);font-weight:400;font-style:italic}
.tcard.pending q::before,.tcard.pending q::after{content:none}

.trust{background:var(--white);text-align:center}
.trust h2{color:var(--ink)}

@media (max-width:1000px){.rail{grid-auto-columns:calc((100% - 24px)/2)}}
@media (max-width:900px){.story{grid-template-columns:1fr}.story-quote{position:relative;top:0}}
@media (max-width:600px){.rail{grid-auto-columns:88%}.handled{grid-template-columns:1fr}}

/* ============ VIDEO TESTIMONIALS ============ */
.vids{background:#1A2330;color:#fff;overflow:hidden}
.vids .eyebrow{color:var(--gold)}.vids .eyebrow::before{background:var(--gold)}
.vids h2{color:#fff}
.vids .lead{color:rgba(255,255,255,.75);margin-top:14px}
.vid-grid{display:grid;grid-template-columns:1.6fr 1fr;grid-template-rows:1fr 1fr;gap:22px;margin-top:44px}
.vcard{position:relative;border-radius:14px;overflow:hidden;background:#0f1620;cursor:pointer;min-height:240px;isolation:isolate;border:0;padding:0;text-align:left;color:#fff;font:inherit;display:block;width:100%}
.vid-grid .vcard:first-child{grid-row:1 / span 2;min-height:480px}
.vcard .poster{position:absolute;inset:0;background:radial-gradient(ellipse at 30% 30%,#2a4e73 0%,#13202e 70%);background-size:cover;background-position:center;transition:transform .8s var(--ease),filter .5s;z-index:-2}
.vcard::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,22,32,0) 35%,rgba(15,22,32,.92) 100%);z-index:-1}
.vcard:hover .poster{transform:scale(1.06);filter:brightness(1.1)}
.vcard .play{position:absolute;left:50%;top:40%;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;background:var(--gold);color:var(--ink);display:grid;place-items:center;box-shadow:0 12px 40px rgba(0,0,0,.35);transition:transform .4s var(--ease)}
.vid-grid .vcard:first-child .play{width:96px;height:96px;margin:-48px 0 0 -48px}
.vcard .play::before{content:"";position:absolute;inset:-10px;border-radius:50%;border:2px solid rgba(235,196,108,.6);animation:ring 2.2s ease-out infinite}
@keyframes ring{0%{transform:scale(.85);opacity:1}100%{transform:scale(1.5);opacity:0}}
.vcard .play svg{width:26px;height:26px;margin-left:4px}
.vcard:hover .play{transform:scale(1.1)}
.vcard .meta{position:absolute;left:0;right:0;bottom:0;padding:24px 26px}
.vcard .tag{display:inline-block;font-size:11px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;background:rgba(235,196,108,.18);color:var(--gold);padding:5px 11px;border-radius:30px;margin-bottom:10px}
.vcard .dur{position:absolute;top:18px;right:18px;font-size:12px;font-weight:700;background:rgba(0,0,0,.45);backdrop-filter:blur(6px);padding:5px 10px;border-radius:30px}
.vcard h3{font-size:clamp(18px,1.6vw,22px);font-weight:900;line-height:1.3}
.vid-grid .vcard:first-child h3{font-size:clamp(22px,2.2vw,30px)}
.vcard p{font-size:14px;opacity:.75;margin-top:4px}
.vcard.pending{cursor:default}
.vcard.pending .play{background:rgba(255,255,255,.12);color:#fff}
.vcard.pending .play::before{display:none}
.vcard.pending:hover .poster{transform:none;filter:none}
.vcard.pending:hover .play{transform:none}
.vcard.pending .soon{position:absolute;top:18px;right:18px;font-size:11px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;background:rgba(0,0,0,.45);backdrop-filter:blur(6px);padding:6px 11px;border-radius:30px;white-space:nowrap}

.vmodal{position:fixed;inset:0;z-index:100;background:rgba(10,14,20,.92);backdrop-filter:blur(6px);display:grid;place-items:center;padding:24px;opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s}
.vmodal.open{opacity:1;visibility:visible}
.vmodal .frame{width:min(1100px,100%);aspect-ratio:16/9;background:#000;border-radius:12px;overflow:hidden;transform:scale(.94);transition:transform .45s var(--ease);box-shadow:0 30px 80px rgba(0,0,0,.5)}
.vmodal.open .frame{transform:none}
.vmodal iframe,.vmodal video{width:100%;height:100%;border:0;display:block}
.vmodal .close{position:absolute;top:20px;right:20px;width:48px;height:48px;border-radius:50%;border:1.5px solid rgba(255,255,255,.4);background:transparent;color:#fff;cursor:pointer;display:grid;place-items:center;transition:all .25s}
.vmodal .close:hover{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.vmodal .close svg{width:18px;height:18px}
.vmodal .cap{position:absolute;bottom:22px;left:0;right:0;text-align:center;font-size:14px;opacity:.8}

@media (max-width:900px){.vid-grid{grid-template-columns:1fr;grid-template-rows:auto}.vid-grid .vcard:first-child{grid-row:auto;min-height:320px}.vcard{min-height:220px}}

/* Testimonials: grids + see more */
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.tgrid .tcard{min-height:280px}
.extra{display:none}
.extra.shown{display:flex}
.vcard.extra.shown{display:block}
.vid-more{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:22px}
.vid-more:not(:has(.shown)){margin-top:0}
.vid-more .vcard{min-height:230px}
.vid-more .vcard .play{width:64px;height:64px;margin:-32px 0 0 -32px}
.more-wrap{display:flex;justify-content:center;margin-top:40px}
@media (max-width:1000px){.tgrid,.vid-more{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.tgrid,.vid-more{grid-template-columns:1fr}}
.btn-more svg{transition:transform .35s var(--ease)}
.btn-more:hover svg{transform:translateY(3px)}
.btn-more[aria-expanded="true"] svg{transform:rotate(180deg)}
.btn-more[aria-expanded="true"]:hover svg{transform:rotate(180deg) translateY(3px)}
/* match card corners to Home and About */
.story-quote,.tcard,.vcard,.handled div{border-radius:8px}
button.btn{font-family:'Lato',system-ui,sans-serif;font-weight:700;font-size:17px;line-height:1.6;border:0;cursor:pointer}

/* ============ SERVICES PAGE ============ */
.svc-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:36px}
.svc-head h2{color:var(--ink)}
.svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.svc-grid .card.hide{display:none}
.svc-grid .card .cat{display:block;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--slate);margin:22px 0 -6px;background:none;box-shadow:none;padding:0;border:0}
.svc-grid .card h3{font-size:clamp(20px,1.7vw,23px);line-height:1.2}
.card .ext{width:12px;height:12px;margin-left:2px}
.card.new{box-shadow:0 0 0 2px var(--gold)}
.card .badge{position:absolute;top:16px;right:16px;font-size:11px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;background:var(--gold);color:var(--ink);padding:5px 10px;border-radius:30px}

.media{background:#1A2330;color:#fff;overflow:hidden}
.media .eyebrow{color:var(--gold)}.media .eyebrow::before{background:var(--gold)}
.media h2{color:#fff}
.media-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(32px,6vw,80px);align-items:center}
.media .lead{color:rgba(255,255,255,.82);margin:18px 0 32px}
.media-list{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.mitem{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:8px;padding:26px 24px;transition:background .35s,transform .35s var(--ease)}
.mitem:hover{background:rgba(255,255,255,.1);transform:translateY(-4px)}
.mitem .ic{width:48px;height:48px;border-radius:10px;background:rgba(235,196,108,.16);color:var(--gold);display:grid;place-items:center;margin-bottom:16px;transition:transform .4s var(--ease)}
.mitem:hover .ic{transform:rotate(-6deg) scale(1.05)}
.mitem .ic svg{width:24px;height:24px}
.mitem h3{font-size:18px;font-weight:900;margin-bottom:8px}
.mitem p{font-size:15px;opacity:.8}

@media (max-width:1100px){.svc-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:900px){.svc-grid{grid-template-columns:repeat(2,1fr)}.media-grid{grid-template-columns:1fr}}
@media (max-width:600px){.svc-grid,.media-list{grid-template-columns:1fr}}

/* ============ CORE: CUSTOMS & LOGISTICS ============ */
.core{background:var(--white)}
.core-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(32px,6vw,90px);align-items:start}
.core-intro{position:sticky;top:120px}
.core-intro h2{color:var(--ink);margin-bottom:20px}
.core-intro p{font-size:18px;color:var(--muted);margin-bottom:16px}
.core-stats{display:flex;gap:36px;margin:30px 0 34px;flex-wrap:wrap}
.core-stats div{border-left:3px solid var(--gold);padding-left:14px}
.core-stats b{display:block;font-size:40px;font-weight:900;color:var(--navy);line-height:1}
.core-stats small{display:block;margin-top:6px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

.chain{position:relative;list-style:none;padding-left:58px}
.chain::before{content:"";position:absolute;left:19px;top:22px;bottom:22px;width:2px;background:rgba(11,78,125,.15)}
.chain .fill{position:absolute;left:19px;top:22px;width:2px;height:0;background:var(--gold);transition:height .15s linear}
.chain .runner{position:absolute;left:14px;top:22px;width:12px;height:12px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 6px rgba(235,196,108,.25),0 0 16px rgba(235,196,108,.8);transform:translateY(-6px);transition:top .15s linear}
.step{position:relative;padding:4px 0 38px}
.step:last-child{padding-bottom:0}
.step .dot{position:absolute;left:-58px;top:0;width:40px;height:40px;border-radius:50%;background:var(--white);border:2px solid rgba(11,78,125,.2);color:var(--navy);display:grid;place-items:center;font-weight:900;font-size:15px;transition:all .4s var(--ease);z-index:1}
.step.lit .dot{background:var(--navy);border-color:var(--navy);color:var(--gold)}
.step .when{font-size:12px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:8px 0 6px}
.step h3{font-size:22px;font-weight:900;margin-bottom:8px}
.step p{font-size:16px;color:var(--muted);max-width:520px}
.step .links{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.step .links a{font-size:13px;font-weight:700;color:var(--navy);background:var(--ice);padding:7px 12px;border-radius:30px;transition:background .25s,color .25s}
.step .links a:hover{background:var(--navy);color:#fff}

@media (max-width:900px){.core-grid{grid-template-columns:1fr}.core-intro{position:static}}
@media (prefers-reduced-motion:reduce){.chain .fill{height:calc(100% - 44px)!important}.chain .runner{display:none}}
.chain .runner{z-index:2}
.new-pill{display:inline-block;margin-left:6px;font-size:11px;font-weight:900;letter-spacing:.14em;background:var(--gold);color:var(--ink);padding:4px 10px;border-radius:30px;animation:newPulse 2.4s ease-in-out infinite}
@keyframes newPulse{0%,100%{box-shadow:0 0 0 0 rgba(235,196,108,.55)}50%{box-shadow:0 0 0 7px rgba(235,196,108,0)}}

/* ============ SERVICE DETAIL PAGES ============ */
.svc-hero .hero-row{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.svc-hero .svc-ic{flex:none;width:72px;height:72px;border-radius:14px;background:rgba(235,196,108,.14);border:1px solid rgba(235,196,108,.35);color:var(--gold);display:grid;place-items:center}
.svc-hero .svc-ic svg{width:36px;height:36px}
.svc-hero .cat-chip{display:inline-block;font-size:12px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:18px}
.svc-hero .hero-ctas{margin-top:34px}
.offer-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(32px,6vw,80px);align-items:start}
.offer-body h2{color:var(--ink);margin-bottom:22px}
.offer-body p{font-size:18px;color:var(--muted);margin-bottom:18px}
.offer-body p:first-of-type{font-size:20px;color:var(--ink);line-height:1.55}
.glance{position:sticky;top:110px;background:var(--white);border-radius:10px;padding:34px 32px;box-shadow:0 0 0 1px rgba(11,78,125,.08),0 20px 50px rgba(11,78,125,.08);border-top:4px solid var(--gold)}
.glance h3{font-size:14px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);margin-bottom:18px}
.glance ul{list-style:none;display:grid;gap:14px;margin-bottom:28px}
.glance li{display:flex;gap:12px;align-items:flex-start;font-size:16px;font-weight:700;color:var(--ink);line-height:1.45}
.glance li svg{flex:none;width:22px;height:22px;color:var(--navy);margin-top:1px}
.glance .btn{width:100%;justify-content:center}
.glance small{display:block;text-align:center;margin-top:12px;font-size:13px;color:var(--muted)}
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px}
.sec-title h2{color:var(--ink)}
.sec-dark{background:#1A2330;color:#fff}
.sec-dark .eyebrow{color:var(--gold)}.sec-dark .eyebrow::before{background:var(--gold)}
.sec-dark h2{color:#fff}
.sec-dark .value{background:rgba(255,255,255,.06);box-shadow:0 0 0 1px rgba(255,255,255,.12)}
.sec-dark .value h3{color:#fff}.sec-dark .value p{color:rgba(255,255,255,.78)}
.sec-dark .value .ic{background:rgba(235,196,108,.16);color:var(--gold)}
.sec-dark .outro{margin-top:40px;font-size:20px;max-width:820px;opacity:.9}
.split2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.split2 .box{background:var(--white);border-radius:10px;padding:40px 36px;box-shadow:0 0 0 1px rgba(11,78,125,.08);border-left:4px solid var(--gold)}
.split2 h3{font-size:24px;font-weight:900;margin-bottom:12px}
.split2 p{font-size:17px;color:var(--muted)}
.tagset{margin-top:34px}
.tagset h4{font-size:15px;font-weight:900;color:var(--ink);margin:26px 0 14px}
.tagset .tags{display:flex;gap:10px;flex-wrap:wrap}
.tagset .tags span{font-size:14px;font-weight:700;color:var(--navy);background:var(--ice);padding:10px 16px;border-radius:30px;transition:background .25s,color .25s,transform .25s}
.tagset .tags span:hover{background:var(--navy);color:#fff;transform:translateY(-2px)}
.ems-list{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:22px}
.ems-list div{display:flex;gap:14px;background:var(--white);border-radius:10px;padding:22px;box-shadow:0 0 0 1px rgba(11,78,125,.08)}
.ems-list .n{flex:none;width:34px;height:34px;border-radius:50%;background:var(--navy);color:var(--gold);display:grid;place-items:center;font-weight:900;font-size:14px}
.ems-list b{display:block;font-size:17px;margin-bottom:4px}
.ems-list p{font-size:15px;color:var(--muted)}
.note{margin-top:28px;padding:20px 24px;border-radius:10px;background:rgba(235,196,108,.14);font-size:16px;color:var(--ink)}
.careers{display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap;background:var(--white);border-radius:10px;padding:40px;box-shadow:0 0 0 1px rgba(11,78,125,.08)}
.careers h2{color:var(--ink);margin-bottom:10px}
.careers p{max-width:640px;color:var(--muted);font-size:17px}
.careers a.mail{font-weight:900;color:var(--navy);border-bottom:2px solid var(--gold)}

.fits{background:var(--white)}
.fits h2{color:var(--ink)}
.minichain{display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin-top:40px;position:relative}
.minichain::before{content:"";position:absolute;left:10%;right:10%;top:21px;height:2px;background:rgba(11,78,125,.15)}
.minichain .mc{position:relative;text-align:center;padding:0 10px}
.minichain .mc .d{width:44px;height:44px;margin:0 auto 14px;border-radius:50%;background:var(--white);border:2px solid rgba(11,78,125,.2);display:grid;place-items:center;font-weight:900;color:var(--navy);position:relative;z-index:1}
.minichain .mc.on .d{background:var(--navy);border-color:var(--navy);color:var(--gold);box-shadow:0 0 0 6px rgba(235,196,108,.3)}
.minichain .mc small{display:block;font-size:11px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.minichain .mc b{display:block;font-size:16px;margin-top:4px;color:var(--ink)}
.minichain .mc.on b{color:var(--navy)}
.minichain .mc .here{display:inline-block;margin-top:8px;font-size:11px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;background:var(--gold);color:var(--ink);padding:3px 9px;border-radius:30px}
.fits .links-row{text-align:center;margin-top:34px}
.fits .links-row a{font-weight:900;color:var(--navy);border-bottom:2px solid var(--gold)}

.qstrip{background:#1A2330;color:#fff;text-align:center;overflow:hidden}
.qstrip blockquote{font-size:clamp(22px,2.6vw,32px);font-weight:700;line-height:1.35;max-width:880px;margin:0 auto}
.qstrip blockquote em{font-style:normal;color:var(--gold)}
.qstrip .qwho{margin-top:22px;font-size:15px;opacity:.8}
.qstrip .qwho b{opacity:1;color:#fff}
.qstrip a.more{display:inline-block;margin-top:24px;font-weight:900;color:var(--gold);border-bottom:2px solid rgba(235,196,108,.5)}
.qstrip .qm{font:900 120px/0.6 Georgia,serif;color:rgba(235,196,108,.35);display:block;margin-bottom:10px}

@media (max-width:1000px){.feat-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:900px){.offer-grid,.split2,.ems-list{grid-template-columns:1fr}.glance{position:static}.minichain{grid-template-columns:1fr;gap:14px}.minichain::before{display:none}.minichain .mc{display:flex;align-items:center;gap:14px;text-align:left}.minichain .mc .d{margin:0}}
@media (max-width:600px){.feat-grid{grid-template-columns:1fr}.careers{padding:28px}}

/* Security: 5 per row */
.values-grid.five{grid-template-columns:repeat(5,1fr)}
@media (max-width:1100px){.values-grid.five{grid-template-columns:repeat(3,1fr)}}
@media (max-width:900px){.values-grid.five{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.values-grid.five{grid-template-columns:1fr}}

/* Media Production page */
.msteps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:44px;position:relative}
.mstep{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:34px 30px;transition:background .35s,transform .35s var(--ease)}
.mstep:hover{background:rgba(255,255,255,.1);transform:translateY(-4px)}
.mstep .num{display:block;font-size:44px;font-weight:900;color:var(--gold);line-height:1;margin-bottom:18px}
.mstep h3{font-size:22px;font-weight:900;margin-bottom:10px}
.mstep p{font-size:15px;opacity:.8}
.split2 .for{display:block;font-size:12px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:40px}
.work-grid .vcard{aspect-ratio:16/10;min-height:0}
.cat-chip .new-pill{vertical-align:middle}
.btn .ext{width:14px;height:14px}
@media (max-width:900px){.msteps,.work-grid{grid-template-columns:1fr}}
.qstrip .eyebrow::before{background:var(--gold)}
.qstrip .qhead{color:#fff;max-width:760px;margin:0 auto}
.qstrip .qwho{max-width:620px;margin:18px auto 30px;font-size:18px}
.mstep{background:#243143}.mstep:hover{background:#2b3a50}

/* ============ CONTACT PAGE ============ */
.quick{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
.quick a{display:inline-flex;align-items:center;gap:10px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);padding:12px 18px;border-radius:8px;font-weight:700;transition:background .25s,border-color .25s,transform .25s var(--ease)}
.quick a:hover{background:var(--gold);border-color:var(--gold);color:var(--ink);transform:translateY(-2px)}
.quick svg{width:18px;height:18px}
.contact-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:start}
.form-card{background:var(--white);border-radius:10px;padding:clamp(28px,4vw,48px);box-shadow:0 0 0 1px rgba(11,78,125,.08),0 20px 50px rgba(11,78,125,.08);border-top:4px solid var(--gold)}
.form-card h2{color:var(--ink);margin-bottom:8px}
.form-card .sub{color:var(--muted);margin-bottom:28px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{display:flex;flex-direction:column;gap:8px;margin-bottom:18px}
.field label{font-size:14px;font-weight:700;color:var(--ink)}
.field label .req{color:#c0392b}
.field label .opt{font-weight:400;color:var(--muted)}
.field input,.field select,.field textarea{font:inherit;font-size:16px;color:var(--ink);background:var(--cream);border:1.5px solid rgba(11,78,125,.18);border-radius:6px;padding:14px 16px;transition:border-color .2s,box-shadow .2s,background .2s;width:100%}
.field textarea{min-height:150px;resize:vertical}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1 3l4 4 4-4' fill='none' stroke='%230B4E7D' stroke-width='1.6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;background-size:12px;padding-right:40px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--navy);background:#fff;box-shadow:0 0 0 4px rgba(11,78,125,.1)}
.field.bad input,.field.bad select,.field.bad textarea{border-color:#c0392b;box-shadow:0 0 0 4px rgba(192,57,43,.08)}
.field .err{font-size:13px;color:#c0392b;display:none}
.field.bad .err{display:block}
.form-card .btn{width:100%;justify-content:center;margin-top:6px}
.form-card .btn[disabled]{opacity:.7;pointer-events:none}
.privacy{font-size:13px;color:var(--muted);margin-top:14px;text-align:center}
.privacy a{color:var(--navy);text-decoration:underline}
.sent{display:none;text-align:center;padding:30px 0}
.sent .tick{width:72px;height:72px;margin:0 auto 20px;border-radius:50%;background:var(--navy);color:var(--gold);display:grid;place-items:center;animation:pop .6s var(--ease)}
.sent .tick svg{width:34px;height:34px}
@keyframes pop{0%{transform:scale(.4);opacity:0}70%{transform:scale(1.1)}100%{transform:scale(1);opacity:1}}
.sent h3{font-size:28px;font-weight:900;margin-bottom:8px}
.sent p{color:var(--muted)}
.form-card.done form{display:none}.form-card.done .sent{display:block}
.side{display:grid;gap:18px}
.side-card{background:var(--navy);color:#fff;border-radius:10px;padding:32px;position:relative;overflow:hidden}
.side-card h3{font-size:14px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:18px}
.side-card a.line{display:flex;align-items:center;gap:14px;padding:14px 0;border-top:1px solid rgba(255,255,255,.14);font-size:18px;font-weight:700;transition:color .2s}
.side-card a.line:first-of-type{border-top:0;padding-top:0}
.side-card a.line:hover{color:var(--gold)}
.side-card a.line .i{flex:none;width:42px;height:42px;border-radius:10px;background:rgba(235,196,108,.16);color:var(--gold);display:grid;place-items:center}
.side-card a.line svg{width:20px;height:20px}
.side-card a.line small{display:block;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;opacity:.7}
.side-card.light{background:var(--white);color:var(--ink);box-shadow:0 0 0 1px rgba(11,78,125,.08)}
.side-card.light h3{color:var(--ink)}
.side-card.light p{color:var(--muted);margin-bottom:18px}
.side-card .social{margin:0}

.offices{background:var(--white)}
.offices h2{color:var(--ink)}
.office-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:24px;margin-top:40px;align-items:stretch}
.olist{display:grid;gap:14px}
.office{display:flex;gap:16px;align-items:flex-start;text-align:left;width:100%;background:var(--cream);border:1.5px solid transparent;border-radius:10px;padding:22px;cursor:pointer;font:inherit;color:var(--ink);transition:border-color .25s,background .25s,transform .25s var(--ease)}
.office:hover{transform:translateX(4px)}
.office.on{background:#fff;border-color:var(--navy);box-shadow:0 14px 30px rgba(11,78,125,.12)}
.office .pin{flex:none;width:44px;height:44px;border-radius:50%;background:var(--ice);color:var(--navy);display:grid;place-items:center;transition:background .25s,color .25s}
.office.on .pin{background:var(--navy);color:var(--gold)}
.office .pin svg{width:20px;height:20px}
.office small{display:block;font-size:11px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.office b{display:block;font-size:19px;font-weight:900;margin:2px 0 6px}
.office span.addr{display:block;font-size:15px;color:var(--muted);line-height:1.5}
.office a.dir{display:inline-block;margin-top:8px;font-size:13px;font-weight:900;color:var(--navy);border-bottom:2px solid var(--gold)}
.map{position:relative;border-radius:10px;overflow:hidden;min-height:420px;background:linear-gradient(135deg,#e6ecef,#cfd9df);box-shadow:0 0 0 1px rgba(11,78,125,.08)}
.map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:saturate(.85)}
.map .fallback{position:absolute;inset:0;display:grid;place-items:center;text-align:center;color:var(--muted);font-weight:700;padding:20px}

@media (max-width:900px){.contact-grid,.office-wrap{grid-template-columns:1fr}.map{min-height:320px}}
@media (max-width:600px){.frow{grid-template-columns:1fr}}
.olist.three{grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
.olist.three .office{cursor:default;background:var(--cream);border:1.5px solid transparent;flex-direction:column;padding:30px 28px}
.olist.three .office:hover{transform:translateY(-4px);background:#fff;border-color:var(--navy);box-shadow:0 14px 30px rgba(11,78,125,.12)}
.olist.three .office:hover .pin{background:var(--navy);color:var(--gold)}
@media (max-width:900px){.olist.three{grid-template-columns:1fr}}

/* ============ RESOURCES ============ */
.announce-card{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);background:var(--navy);color:#fff;border-radius:12px;overflow:hidden;position:relative}
.announce-card .txt{padding:clamp(32px,4vw,56px);position:relative;z-index:1}
.announce-card .tagrow{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:22px}
.announce-card .tag{font-size:12px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;background:var(--gold);color:var(--ink);padding:6px 12px;border-radius:30px}
.announce-card time{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;opacity:.75}
.announce-card h2{color:#fff;font-size:clamp(26px,2.8vw,38px);margin-bottom:18px}
.announce-card p{font-size:18px;opacity:.88;margin-bottom:28px}
.announce-card .vis{position:relative;background:radial-gradient(ellipse at 60% 40%,#2a6aa0 0%,#0b3558 75%);display:grid;place-items:center;min-height:320px;overflow:hidden}
.announce-card .vis .ring{position:absolute;width:420px;height:420px;border-radius:50%;border:1.5px solid rgba(235,196,108,.35);animation:spin 26s linear infinite}
.announce-card .vis .ring::after{content:"";position:absolute;top:50%;left:-7px;width:14px;height:14px;border-radius:50%;background:var(--gold);box-shadow:0 0 16px rgba(235,196,108,.8)}
.announce-card .vis img{position:relative;width:min(260px,70%);filter:brightness(0) invert(1);opacity:.95}
.announce-card .vis .bmo{position:relative;text-align:center}
.announce-card .vis .bmo b{display:block;font-size:clamp(28px,3vw,40px);font-weight:900;line-height:1.1}
.announce-card .vis .bmo small{display:block;margin-top:8px;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}

.cats{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:40px}
.cats .cat{position:relative;display:flex;flex-direction:column;gap:14px;background:var(--white);border-radius:10px;padding:34px 30px;box-shadow:0 0 0 1px rgba(11,78,125,.08);overflow:hidden;transition:transform .45s var(--ease),box-shadow .45s}
.cats .cat:hover{transform:translateY(-6px);box-shadow:0 24px 50px rgba(11,78,125,.14)}
.cats .cat::after{content:"";position:absolute;inset:auto 0 0 0;height:4px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.cats .cat:hover::after{transform:scaleX(1)}
.cats .cat .ic{width:60px;height:60px;border-radius:12px;background:var(--ice);color:var(--navy);display:grid;place-items:center;transition:background .4s,color .4s,transform .4s var(--ease)}
.cats .cat:hover .ic{background:var(--navy);color:var(--gold);transform:rotate(-6deg)}
.cats .cat .ic svg{width:30px;height:30px}
.cats .cat h3{font-size:24px;font-weight:900}
.cats .cat p{color:var(--muted);flex:1}
.cats .cat .soon{align-self:flex-start;font-size:11px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;background:rgba(235,196,108,.2);color:var(--ink);padding:5px 10px;border-radius:30px}
.cats .cat .topics{display:flex;gap:8px;flex-wrap:wrap}
.cats .cat .topics span{font-size:12px;font-weight:700;color:var(--navy);background:var(--ice);padding:6px 10px;border-radius:30px}

.playlist{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:22px;margin-top:40px;align-items:start}
.player{position:relative;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:radial-gradient(ellipse at 30% 30%,#2a4e73 0%,#13202e 70%)}
.player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.player .ph{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:28px;background:linear-gradient(180deg,rgba(15,22,32,0) 40%,rgba(15,22,32,.9))}
.player .ph .play{position:absolute;left:50%;top:45%;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;background:rgba(255,255,255,.12);display:grid;place-items:center;color:#fff}
.player .ph .play svg{width:28px;height:28px;margin-left:4px}
.player .ph .tag{align-self:flex-start;font-size:11px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;background:rgba(0,0,0,.45);padding:6px 11px;border-radius:30px;margin-bottom:12px}
.player .ph h3{font-size:clamp(20px,2vw,26px);font-weight:900}
.plist{list-style:none;max-height:520px;overflow-y:auto;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:8px;scrollbar-width:thin;scrollbar-color:rgba(235,196,108,.5) transparent}
.plist li button{display:flex;gap:14px;align-items:center;width:100%;text-align:left;background:transparent;border:0;color:#fff;font:inherit;padding:12px;border-radius:8px;cursor:pointer;transition:background .2s}
.plist li button:hover{background:rgba(255,255,255,.07)}
.plist li button.on{background:rgba(235,196,108,.16)}
.plist .n{flex:none;width:28px;font-size:13px;font-weight:900;color:rgba(255,255,255,.5);text-align:center}
.plist button.on .n{color:var(--gold)}
.plist .th{flex:none;width:92px;aspect-ratio:16/9;border-radius:6px;background:radial-gradient(ellipse at 30% 30%,#2a4e73 0%,#13202e 70%);background-size:cover;background-position:center}
.plist .t{flex:1;font-size:15px;font-weight:700;line-height:1.35}
.plist .d{flex:none;font-size:12px;font-weight:700;opacity:.65}
.vids .count{font-size:14px;opacity:.7;margin-top:8px}

@media (max-width:900px){.announce-card,.playlist,.cats{grid-template-columns:1fr}.announce-card .vis{min-height:220px}.plist{max-height:380px}}
/* Resources: video section in brand blue so it separates from the dark closing banner */
#videos{background:#1A2330}
#videos .plist{background:rgba(0,0,0,.16);border-color:rgba(255,255,255,.14)}
#videos .plist li button.on{background:rgba(235,196,108,.22)}
#videos .player{box-shadow:0 24px 60px rgba(0,0,0,.3)}

/* Creating Connections: dots panel blends into the section */
.connect-visual{background:transparent;overflow:visible}
.connect-visual .fallback{display:none}
.net-ui span{background:#fff;box-shadow:0 0 0 1px rgba(11,78,125,.1),0 4px 14px rgba(17,20,24,.06)}

/* ============ SEAMLESS DOT NETWORK (banner + Creating Connections) ============ */
.flow{position:relative}
.flow-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.flow .hero-inner,.flow .connect-copy,.flow .net-ui,.flow .scroll-cue{position:relative;z-index:2}
.flow .net-ui{position:absolute}
.flow .scroll-cue{position:absolute}
.flow .connect-sec{position:relative}
.flow .connect-visual{border-radius:0}
.flow.dragging,.flow.dragging *{user-select:none;-webkit-user-select:none;cursor:grabbing!important}
/* Phones: dots first, then the Creating Connections text below (no overlap) */
@media (max-width:900px){
  .flow .connect-sec .split{display:flex;flex-direction:column;gap:28px}
  .flow .connect-visual{order:-1;aspect-ratio:auto;height:340px;width:100%;align-self:stretch}
  .flow .connect-sec{padding-top:0}
}
@media (max-width:900px){.menu{box-shadow:none}.menu.open{box-shadow:-20px 0 50px rgba(17,20,24,.2)}}

/* Homepage: Media Production (new) band */
.mp-band{background:#1A2330;color:#fff;overflow:hidden;position:relative}
.mp-band .eyebrow{color:var(--gold)}.mp-band .eyebrow::before{background:var(--gold)}
.mp-band h2{color:#fff;margin-bottom:18px}
.mp-band .lead{color:rgba(255,255,255,.84);margin-bottom:22px}
.mp-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(32px,5vw,70px);align-items:center;position:relative;z-index:1}
.mp-tags{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:30px}
.mp-tags span{font-size:13px;font-weight:700;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);padding:7px 12px;border-radius:30px}
.mp-tiles{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.mp-tile{position:relative;display:block;aspect-ratio:16/10;border-radius:10px;overflow:hidden;background:radial-gradient(ellipse at 30% 30%,#2a6aa0 0%,#0b3558 75%);box-shadow:0 18px 40px rgba(0,0,0,.25)}
.mp-tile:first-child{grid-column:1 / span 2;aspect-ratio:16/8}
.mp-tile .img{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .7s var(--ease)}
.mp-tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,20,32,0) 40%,rgba(10,20,32,.85))}
.mp-tile:hover .img{transform:scale(1.06)}
.mp-tile .pl{position:absolute;left:50%;top:45%;z-index:1;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;background:var(--gold);color:var(--ink);display:grid;place-items:center;transition:transform .35s var(--ease)}
.mp-tile:first-child .pl{width:70px;height:70px;margin:-35px 0 0 -35px}
.mp-tile .pl svg{width:22px;height:22px;margin-left:3px}
.mp-tile:hover .pl{transform:scale(1.1)}
.mp-tile .cap{position:absolute;left:16px;right:16px;bottom:12px;z-index:1;font-size:14px;font-weight:900}
@media (max-width:900px){.mp-grid{grid-template-columns:1fr}}
/* Media Production as a card inside Services */
.mp-card{margin-top:22px;border-radius:12px;padding:clamp(32px,4.5vw,60px);box-shadow:0 24px 60px rgba(11,78,125,.18)}
.mp-card .mp-grid{width:auto;margin:0}
.mp-card h2{margin-bottom:6px}
.mp-card .mp-sub{font-size:clamp(18px,1.6vw,22px);font-weight:700;color:var(--gold);margin-bottom:16px}
.mp-card .who-ring{right:-300px}
/* tighter gap between the Media Production card and the clients strip */
#services{padding-bottom:clamp(40px,5vw,64px)}
.clients{padding-top:clamp(48px,5.5vw,76px)}
/* Media card: compact banner, no videos */
.mp-card{padding:clamp(28px,3.2vw,44px) clamp(28px,4vw,56px)}
.mp-card .mp-grid{grid-template-columns:minmax(0,1fr) auto;gap:clamp(24px,4vw,56px)}
.mp-card h2{font-size:clamp(28px,3vw,40px);margin-bottom:4px}
.mp-card .mp-sub{margin-bottom:10px;font-size:clamp(16px,1.4vw,19px)}
.mp-card .lead{font-size:16px;margin-bottom:16px;max-width:720px}
.mp-card .mp-tags{margin-bottom:0}
.mp-card .eyebrow{margin-bottom:10px}
.mp-actions{display:flex;flex-direction:column;gap:12px;align-items:stretch}
.mp-actions .btn{justify-content:center;white-space:nowrap}
.mp-card .who-ring{top:50%;margin-top:-270px;right:-330px}
@media (max-width:900px){.mp-card .mp-grid{grid-template-columns:1fr}.mp-actions{flex-direction:row;flex-wrap:wrap}}
/* Phones: hide the dots hint/count/reset and shorten the dots area */
@media (max-width:900px){
  .flow .net-ui{display:none}
  .flow .connect-visual{height:200px}
  .flow .connect-sec{padding-bottom:48px}
  .flow .connect-sec .split{gap:16px}
}
/* Security & EMS: partner notice */
.partner-note{display:flex;gap:12px;align-items:flex-start;max-width:760px;margin-top:22px!important;padding:16px 18px;border-radius:10px;background:rgba(235,196,108,.12);border:1px solid rgba(235,196,108,.35);font-size:16px!important;line-height:1.55}
.partner-note .pn-ic{flex:none;width:24px;height:24px;border-radius:50%;background:var(--gold);color:var(--ink);display:grid;place-items:center;font-size:13px;font-weight:900;margin-top:1px}
.overview-stats .ostat:nth-child(3):last-child{grid-column:1 / -1}
/* smooth count-up stats */
[data-count]{font-variant-numeric:tabular-nums}
[data-count] .cnum{display:inline-block;text-align:right;font-variant-numeric:tabular-nums}
[data-count] .cplus{display:inline-block}
.net-ui span{background:transparent!important;box-shadow:none!important;backdrop-filter:none;padding-left:0}

/* ---------- Resource hubs (blog, case studies, guides) ---------- */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.drop-res .drop{width:260px}
.drop a.active-sub{background:var(--ice)}
.cats .cat .more{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:900;letter-spacing:.04em;color:var(--ink);margin-top:4px}
.cats .cat .more svg{width:14px;height:14px;transition:transform .3s var(--ease)}
.cats .cat:hover .more svg{transform:translateX(4px)}
.btn-line{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px rgba(26,35,48,.25);cursor:pointer;border:0;font-family:inherit}
.btn-line::before{background:var(--ice)}
button.btn{border:0;font-family:inherit;cursor:pointer}
.hub-feat{padding-bottom:0}
.hub-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:32px}
.hub-search{position:relative;display:flex;align-items:center;min-width:min(280px,100%)}
.hub-search svg{position:absolute;left:14px;width:18px;height:18px;color:var(--muted);pointer-events:none}
.hub-search input{width:100%;font:400 15px 'Lato',sans-serif;padding:11px 16px 11px 42px;border:1.5px solid rgba(11,78,125,.2);border-radius:30px;background:#fff;color:var(--ink);transition:border-color .25s,box-shadow .25s}
.hub-search input:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 4px rgba(11,78,125,.1)}
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:28px}
.post{display:flex;flex-direction:column;background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 0 0 1px rgba(11,78,125,.08);transition:transform .45s var(--ease),box-shadow .45s}
.post:hover{transform:translateY(-6px);box-shadow:0 24px 50px rgba(11,78,125,.14)}
.post[hidden]{display:none}
.post .pv{position:relative;height:150px;background:radial-gradient(circle at 1px 1px,rgba(255,255,255,.12) 1px,transparent 1.5px) 0 0/18px 18px,linear-gradient(135deg,#1A2330,#0B4E7D);display:grid;place-items:center;overflow:hidden}
.post .pv .ic{width:64px;height:64px;border-radius:14px;background:rgba(255,255,255,.08);color:var(--gold);display:grid;place-items:center;transition:transform .5s var(--ease)}
.post:hover .pv .ic{transform:scale(1.08) rotate(-6deg)}
.post .pv .ic svg{width:32px;height:32px}
.post .pv .soon{position:absolute;top:14px;right:14px;font-size:11px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:rgba(0,0,0,.35);padding:5px 10px;border-radius:30px}
.post .pb{display:flex;flex-direction:column;gap:10px;padding:24px 24px 26px;flex:1}
.post .ptag{font-size:11px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--slate)}
.post h3{font-size:20px;font-weight:900;line-height:1.25;color:var(--ink)}
.post p{color:var(--muted);font-size:15px;flex:1}
.post .rt{font-size:13px;font-weight:700;color:var(--muted)}
.post .svcs{display:flex;gap:6px;flex-wrap:wrap}
.post .svcs span{font-size:12px;font-weight:700;color:var(--navy);background:var(--ice);padding:5px 10px;border-radius:30px}
.hub-empty{margin-top:28px;padding:28px;text-align:center;color:var(--muted);background:#fff;border-radius:10px;box-shadow:0 0 0 1px rgba(11,78,125,.08)}
.hub-ask{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:40px;padding:26px 30px;border-radius:10px;background:var(--ice)}
.hub-ask p{margin:0;font-size:17px;color:var(--ink)}
.cs-how{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:40px;align-items:center;background:var(--ice);border-radius:12px;padding:clamp(28px,4vw,48px)}
.cs-how h2{color:var(--ink)}
.cs-how p{color:var(--muted);margin-top:14px}
.cs-steps{list-style:none;counter-reset:s;display:grid;gap:10px}
.cs-steps li{counter-increment:s;display:grid;grid-template-columns:40px 1fr;column-gap:14px;align-items:center;background:#fff;border-radius:8px;padding:12px 16px;box-shadow:0 0 0 1px rgba(11,78,125,.06)}
.cs-steps li::before{content:counter(s);grid-row:span 2;width:36px;height:36px;border-radius:50%;background:var(--navy);color:var(--gold);font-weight:900;display:grid;place-items:center}
.cs-steps b{color:var(--ink)}.cs-steps span{font-size:14px;color:var(--muted)}
.ck-sec{background:var(--cream)}
.ck-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:48px;align-items:start}
.ck-grid h2{color:var(--ink)}
.ck-grid>div>p{color:var(--muted);margin:14px 0 22px}
.ck-prog{display:flex;align-items:center;gap:14px;margin-bottom:24px}
.ck-prog .bar{flex:1;height:8px;border-radius:8px;background:rgba(11,78,125,.12);overflow:hidden}
.ck-prog .bar i{display:block;height:100%;width:0;background:var(--gold);border-radius:8px;transition:width .5s var(--ease)}
.ck-prog span{font-size:14px;font-weight:700;color:var(--ink);min-width:150px}
.ck{list-style:none;display:grid;gap:10px}
.ck label{display:flex;gap:14px;align-items:flex-start;background:#fff;border-radius:8px;padding:14px 18px;cursor:pointer;box-shadow:0 0 0 1px rgba(11,78,125,.08);transition:box-shadow .25s,background .25s}
.ck label:hover{box-shadow:0 0 0 1.5px var(--navy)}
.ck input{position:absolute;opacity:0;pointer-events:none}
.ck .box{flex:none;width:22px;height:22px;border-radius:6px;border:2px solid rgba(11,78,125,.35);margin-top:1px;position:relative;transition:all .25s}
.ck .box::after{content:"";position:absolute;left:6px;top:2px;width:6px;height:11px;border:solid var(--ink);border-width:0 2.5px 2.5px 0;transform:rotate(45deg) scale(0);transition:transform .25s var(--ease)}
.ck input:checked+.box{background:var(--gold);border-color:var(--gold)}
.ck input:checked+.box::after{transform:rotate(45deg) scale(1)}
.ck input:checked~.t{color:var(--muted);text-decoration:line-through}
.ck input:focus-visible+.box{box-shadow:0 0 0 4px rgba(11,78,125,.2)}
.ck .t{color:var(--ink);transition:color .25s}
.gl-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}
.gl-head h2{color:var(--ink)}
.gl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:32px;align-items:start}
.term{background:#fff;border-radius:8px;box-shadow:0 0 0 1px rgba(11,78,125,.08);overflow:hidden}
.term[hidden]{display:none}
.term summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:18px 22px;cursor:pointer;font-weight:900;font-size:17px;color:var(--ink)}
.term summary::-webkit-details-marker{display:none}
.term summary i{flex:none;width:14px;height:14px;position:relative}
.term summary i::before,.term summary i::after{content:"";position:absolute;left:0;top:6px;width:14px;height:2px;background:var(--navy);transition:transform .3s var(--ease)}
.term summary i::after{transform:rotate(90deg)}
.term[open] summary i::after{transform:rotate(0)}
.term[open]{box-shadow:0 0 0 1.5px var(--navy)}
.term p{padding:0 22px 20px;color:var(--muted)}
.hub-links{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:28px}
.hub-link{display:flex;align-items:center;gap:16px;background:#fff;border-radius:10px;padding:20px 22px;box-shadow:0 0 0 1px rgba(11,78,125,.08);transition:transform .4s var(--ease),box-shadow .4s}
.hub-link:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(11,78,125,.12)}
.hub-link .ic{width:46px;height:46px;border-radius:10px;background:var(--ice);color:var(--navy);display:grid;place-items:center;flex:none;transition:background .3s,color .3s}
.hub-link:hover .ic{background:var(--navy);color:var(--gold)}
.hub-link .ic svg{width:24px;height:24px}
.hub-link b{flex:1;color:var(--ink);font-size:17px}
.hub-link>svg{width:16px;height:16px;color:var(--ink);transition:transform .3s var(--ease)}
.hub-link:hover>svg{transform:translateX(4px)}
@media (max-width:980px){.posts{grid-template-columns:repeat(2,1fr)}.cs-how,.ck-grid{grid-template-columns:1fr}.hub-links{grid-template-columns:1fr}}
@media (max-width:640px){.posts,.gl{grid-template-columns:1fr}.hub-bar{flex-direction:column;align-items:stretch}.hub-bar .chips{overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px}.hub-bar .chip{white-space:nowrap}.hub-ask{flex-direction:column;align-items:flex-start}}
@media print{.site-header,header,footer,.page-hero,.hub-feat,.hub-list,.hub-more,.closing,.gl-sec,.ck-sec .hero-ctas,.back-top,#toTop{display:none!important}.ck-sec{background:#fff;padding:0}.reveal{opacity:1!important;transform:none!important}.ck label{box-shadow:none;border:1px solid #999}}
/* ---------- end resource hubs ---------- */

/* ---------- Text pages (policies, blog posts) ---------- */
.page-hero-sm{padding:clamp(72px,9vw,110px) 0 clamp(56px,7vw,80px)}
.page-hero-sm h1{font-size:clamp(34px,4.6vw,56px);max-width:900px}
.prose{max-width:760px;font-size:18px;line-height:1.7;color:var(--ink)}
.prose>*+*{margin-top:1.1em}
.prose h2{font-size:clamp(22px,2.2vw,28px);font-weight:900;margin-top:1.8em;line-height:1.25}
.prose ol{padding-left:1.3em;display:grid;gap:.8em}
.prose li::marker{font-weight:900;color:var(--navy)}
.prose a{color:var(--navy);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(11,78,125,.35)}
.prose a:hover{text-decoration-color:var(--gold)}
.prose address{font-style:normal;background:var(--ice);border-radius:10px;padding:20px 24px;line-height:1.8}
.post-cta{max-width:760px}
.post-back{margin-top:28px;font-weight:700}
.post-back a{color:var(--navy)}
a.post{color:inherit}
.post .pv .soon.live{background:var(--gold);color:var(--ink)}
/* ---------- end text pages ---------- */
.prose h2{color:var(--ink)}
.page-hero .cat-chip{display:inline-block;font-size:12px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:14px}

/* Who We Are background video: dark-blue overlay keeps text and stats readable */
.who{position:relative}
.who-video{position:absolute;inset:0;z-index:0;opacity:0;transition:opacity 1.2s ease;pointer-events:none}
.who-video.on{opacity:1}
.who-video video{width:100%;height:100%;object-fit:cover;display:block}
.who-video::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(26,35,48,.93) 0%,rgba(26,35,48,.82) 50%,rgba(26,35,48,.74) 100%)}

/* Creating Connections: shorter section; dots now roam the whole section, so the visual box is just breathing room */
.flow .connect-sec{padding:clamp(28px,3vw,44px) 0 clamp(36px,4vw,56px)}
.flow .connect-visual{height:clamp(220px,30vh,300px)}
@media (max-width:900px){.flow .connect-visual{height:220px}}
@media (max-width:600px){.flow .connect-visual{height:150px}}

/* Hint: bottom-centre of Creating Connections, small and quiet */
.flow .connect-sec .net-ui{position:absolute;left:auto;right:clamp(16px,3.5vw,56px);bottom:14px;justify-content:flex-end;gap:12px;pointer-events:none}
.flow .connect-sec .net-ui span{font-size:12px;font-weight:400;letter-spacing:.02em;color:var(--muted);opacity:.65;padding:0}
.flow .connect-sec .net-ui button{font-size:10px;padding:5px 11px;opacity:.75;background:transparent;color:var(--navy);box-shadow:inset 0 0 0 1px rgba(11,78,125,.35)}
.flow .connect-sec .net-ui button:hover{opacity:1}

/* Video testimonials: featured + three stacked when there are four */
@media (min-width:901px){
  .vid-grid:has(.vcard:nth-child(4)){grid-template-rows:repeat(3,1fr)}
  .vid-grid:has(.vcard:nth-child(4)) .vcard:first-child{grid-row:1 / span 3;min-height:540px}
  .vid-grid:has(.vcard:nth-child(4)) .vcard:first-child{min-height:620px}
  .vid-grid:has(.vcard:nth-child(4)) .vcard:not(:first-child){min-height:190px}
  .vid-grid:has(.vcard:nth-child(4)) .vcard:not(:first-child) .play{left:auto;right:26px;top:50%;width:56px;height:56px;margin:-28px 0 0 0}
  .vid-grid:has(.vcard:nth-child(4)) .vcard:not(:first-child) .meta{padding-right:110px}
}

/* Team: security partner (separate company) shown as its own quiet block under the main team */
.partner-team{display:grid;grid-template-columns:repeat(5,1fr);gap:22px;margin-top:64px;padding-top:44px;border-top:1px solid rgba(11,78,125,.12);align-items:start}
.partner-team .pt-copy{grid-column:span 3;padding-right:clamp(0px,4vw,60px);align-self:center}
.partner-team .pt-copy h3{font-size:clamp(22px,2vw,28px);font-weight:900;color:var(--ink);margin-bottom:10px}
.partner-team .pt-copy p{color:var(--muted);font-size:15px;max-width:560px}
.partner-team .member .ph{opacity:.92}
@media (max-width:1100px){.partner-team{grid-template-columns:repeat(3,1fr)}.partner-team .pt-copy{grid-column:1/-1;padding-right:0}}
@media (max-width:900px){.partner-team{grid-template-columns:repeat(2,1fr)}}

/* CTA: rotating B&W photos with a dark-blue overlay (matches Who We Are video) */
.cta{position:relative}
.cta-bg{background:#1A2330}
.cta-slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transform:scale(1.04);transition:opacity 1.6s ease,transform 7s ease-out}
.cta-slide.on{opacity:1;transform:scale(1)}
.cta::after{background:linear-gradient(90deg,rgba(26,35,48,.92) 0%,rgba(26,35,48,.82) 50%,rgba(26,35,48,.74) 100%)}
@media (prefers-reduced-motion: reduce){.cta-slide{transition:none;transform:none}}

/* Closing contact banners on every page share the homepage CTA treatment */
.closing.has-photos{position:relative;isolation:isolate}
.closing .cta-bg{position:absolute;inset:0;z-index:-2;background:#1A2330}
.closing.has-photos::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(26,35,48,.88) 0%,rgba(26,35,48,.80) 50%,rgba(26,35,48,.88) 100%)}
.closing.has-photos .glow{display:none}

/* Contact: tighter gap between the form and the offices */
section.pad:has(+ section.offices){padding-bottom:clamp(40px,4.5vw,56px)}
section.pad.offices{padding-top:clamp(24px,3vw,36px)}

/* No white page sections: everything sits on cream (cards stay white) */
.clients,.trust,.core,.fits,.offices{background:var(--cream)}
.offices .office,.offices .olist.three .office{background:var(--white);box-shadow:0 0 0 1px rgba(11,78,125,.08)}

/* Contact: compact banner and lift the form so "Send us a message" is above the fold */
.page-hero-contact{padding:clamp(44px,5vw,64px) 0 clamp(120px,11vw,150px)}
.page-hero-contact h1{font-size:clamp(40px,5vw,64px)}
.page-hero-contact p{margin-top:14px}
.page-hero-contact .quick{margin-top:22px}
.contact-main{padding-top:0}
.contact-main .contact-grid{position:relative;z-index:2;margin-top:clamp(-120px,-9vw,-80px)}

/* ---------- CC: website assistant ---------- */
.has-cc .totop{bottom:88px}
.cc{position:fixed;right:20px;bottom:20px;z-index:60;font-family:'Lato',sans-serif}
.cc-launch{display:flex;align-items:center;gap:10px;height:52px;padding:0 20px 0 6px;border:0;border-radius:30px;background:#1A2330;color:#fff;cursor:pointer;box-shadow:0 12px 30px rgba(17,20,24,.28);font:700 15px 'Lato',sans-serif;transition:transform .3s var(--ease),box-shadow .3s}
.cc-launch:hover{transform:translateY(-2px);box-shadow:0 16px 36px rgba(17,20,24,.34)}
.cc-mark,.cc-av{width:40px;height:40px;border-radius:50%;background:var(--gold);color:var(--ink);display:grid;place-items:center;font-weight:900;font-size:14px;letter-spacing:.04em;flex:none}
.cc.open .cc-launch{display:none}
.cc-panel{position:absolute;right:0;bottom:0;width:min(380px,calc(100vw - 32px));height:min(580px,calc(100vh - 120px));height:min(580px,calc(100svh - 120px));background:var(--cream);border-radius:16px;box-shadow:0 24px 60px rgba(17,20,24,.3);display:flex;flex-direction:column;overflow:hidden;animation:ccIn .35s var(--ease)}
.cc-panel[hidden]{display:none}
@keyframes ccIn{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
.cc-head{display:flex;align-items:center;gap:12px;padding:14px 14px 14px 16px;background:#1A2330;color:#fff}
.cc-head b{display:block;font-size:16px;font-weight:900;line-height:1.1}
.cc-head small{font-size:12px;opacity:.7}
.cc-x{margin-left:auto;width:36px;height:36px;border:0;border-radius:50%;background:rgba(255,255,255,.08);color:#fff;font-size:24px;line-height:1;cursor:pointer}
.cc-x:hover{background:rgba(255,255,255,.16)}
.cc-log{flex:1;overflow-y:auto;padding:18px 16px 8px;display:flex;flex-direction:column;gap:10px;scrollbar-width:thin}
.cc-msg{max-width:86%;padding:10px 14px;border-radius:14px;font-size:14.5px;line-height:1.5}
.cc-msg p+p,.cc-msg p+ul,.cc-msg ul+p{margin-top:8px}
.cc-msg ul{padding-left:18px;margin:4px 0}
.cc-msg a{color:var(--navy);text-decoration:underline;text-underline-offset:2px}
.cc-bot{align-self:flex-start;background:#fff;color:var(--ink);border-bottom-left-radius:4px;box-shadow:0 0 0 1px rgba(11,78,125,.08)}
.cc-user{align-self:flex-end;background:var(--navy);color:#fff;border-bottom-right-radius:4px}
.cc-err{box-shadow:0 0 0 1px rgba(217,174,78,.6)}
.cc-typing{display:flex;gap:5px;padding:14px}
.cc-typing span{width:7px;height:7px;border-radius:50%;background:var(--slate);animation:ccDot 1.2s infinite ease-in-out}
.cc-typing span:nth-child(2){animation-delay:.15s}.cc-typing span:nth-child(3){animation-delay:.3s}
@keyframes ccDot{0%,80%,100%{opacity:.3;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
.cc-sugg{display:flex;flex-wrap:wrap;gap:6px;padding:0 16px 10px}
.cc-sugg:empty{display:none}
.cc-sugg button{border:1.5px solid rgba(11,78,125,.2);background:#fff;color:var(--navy);font:700 12.5px 'Lato',sans-serif;padding:7px 12px;border-radius:30px;cursor:pointer}
.cc-sugg button:hover{border-color:var(--navy)}
.cc-form{display:flex;gap:8px;align-items:flex-end;padding:10px 12px;border-top:1px solid rgba(11,78,125,.1);background:#fff}
.cc-form textarea{flex:1;resize:none;border:0;outline:none;font:400 15px/1.45 'Lato',sans-serif;color:var(--ink);padding:9px 6px;max-height:120px;background:transparent}
.cc-form button{width:42px;height:42px;border:0;border-radius:50%;background:var(--gold);color:var(--ink);display:grid;place-items:center;cursor:pointer;flex:none}
.cc-form button svg{width:20px;height:20px}
.cc-note{font-size:11px;color:var(--muted);padding:0 14px 10px;background:#fff;line-height:1.4}
.cc-note a{color:var(--muted);text-decoration:underline}
@media (max-width:600px){
  .cc{right:12px;bottom:12px}
  .cc-launch-t{display:none}.cc-launch{padding:0 6px}
  .cc.open{left:0;right:0;bottom:0}
  .cc-panel{position:fixed;inset:auto 0 0 0;width:100%;height:min(88vh,640px);height:min(88svh,640px);border-radius:16px 16px 0 0}
  .has-cc .totop{bottom:76px;right:12px}
}
@media (prefers-reduced-motion: reduce){.cc-panel{animation:none}.cc-typing span{animation:none}}

/* CC badge: "CC" in the logo colours, first C blue, second C gold */
.cc-mark,.cc-av{background:var(--cream)}
.cc-lt{font-weight:900;font-size:17px;letter-spacing:.01em;line-height:1}
.cc-lt .c1{color:var(--navy)}.cc-lt .c2{color:var(--gold-deep)}

/* 404 page */
.nf-hero{padding:clamp(72px,9vw,120px) 0 clamp(64px,8vw,96px)}
.nf-code{font-size:clamp(84px,12vw,160px);font-weight:900;line-height:1;letter-spacing:-.02em;color:var(--slate);margin-bottom:8px}
.nf-code span{color:var(--gold)}
.nf-hero .hero-ctas{margin-top:30px}
.nf-links{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:30px}
.nf-link{position:relative;display:flex;flex-direction:column;gap:4px;background:#fff;border-radius:10px;padding:22px 52px 22px 24px;box-shadow:0 0 0 1px rgba(11,78,125,.08);transition:transform .35s var(--ease),box-shadow .35s}
.nf-link:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(11,78,125,.12)}
.nf-link b{font-size:17px;font-weight:900;color:var(--ink)}
.nf-link span{font-size:14px;color:var(--muted)}
.nf-link svg{position:absolute;right:22px;top:50%;width:16px;height:16px;margin-top:-8px;color:var(--ink);transition:transform .3s var(--ease)}
.nf-link:hover svg{transform:translateX(4px)}
@media (max-width:900px){.nf-links{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.nf-links{grid-template-columns:1fr}}
.nf-hero{background:#1A2330 url('/assets/img/scaffold-bw.jpg') 70% center/cover no-repeat}
.nf-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(26,35,48,.94) 0%,rgba(26,35,48,.84) 45%,rgba(26,35,48,.62) 100%)}
.nf-hero canvas{z-index:0}

/* Creating Connections: copy centred in the section, dots roam all around it (desktop) */
@media (min-width:901px){
  .flow .connect-sec .split{display:flex;justify-content:center}
  .flow .connect-sec .connect-visual{display:none}
  .flow .connect-sec .connect-copy{max-width:780px;margin-inline:auto;text-align:center}
  .flow .connect-sec .connect-copy p{max-width:680px}
  .flow .connect-sec{padding:clamp(64px,7vw,96px) 0 clamp(72px,8vw,104px)}
}
/* Creating Connections heading: a step above section headings, below the homepage headline */
.flow .connect-copy h2{font-size:clamp(36px,4.2vw,64px);line-height:1.08}
@media (min-width:901px){.flow .connect-sec .net-ui{right:170px}}
/* Hint centred under the centred copy */
.flow .connect-sec .net-ui{left:0;right:0;justify-content:center}
@media (min-width:901px){.flow .connect-sec .net-ui{right:0}}

/* Homepage banner: rotating B&W photos under a strong dark-blue overlay (dots + headline stay on top) */
.hero-photos{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-photos::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(26,35,48,.93) 0%,rgba(26,35,48,.86) 50%,rgba(26,35,48,.80) 100%)}
/* Creating Connections heading: quick lift-and-bounce on hover, like the partner logos */
.flow .connect-copy h2{display:inline-block;transition:transform .45s cubic-bezier(.34,1.56,.64,1)}
.flow .connect-copy h2:hover{transform:translateY(-6px) scale(1.03)}
@media (prefers-reduced-motion: reduce){.flow .connect-copy h2{transition:none}.flow .connect-copy h2:hover{transform:none}}

/* Ask CC button: text only, "CC" in brand blue + gold */
.cc-launch{padding:0 22px;gap:0;font-size:16px;font-weight:900;letter-spacing:.01em}
.cc-launch-t .c1{color:#6F93BA}.cc-launch-t .c2{color:var(--gold)}
@media (max-width:600px){.cc-launch-t{display:inline}.cc-launch{padding:0 18px;height:48px}}
/* Ask CC button as a chat bubble: rounded box with a tail at the bottom-right */
.cc-launch{position:relative;border-radius:16px 16px 4px 16px;height:48px;box-shadow:none;filter:drop-shadow(0 10px 18px rgba(17,20,24,.28))}
.cc-launch::after{content:"";position:absolute;right:0;bottom:-9px;width:16px;height:10px;background:#1A2330;clip-path:polygon(0 0,100% 0,100% 100%)}
.cc-launch:hover{box-shadow:none;filter:drop-shadow(0 14px 22px rgba(17,20,24,.34))}
.cc{bottom:28px}
@media (max-width:600px){.cc{bottom:20px}.cc-launch{height:46px}}
.has-cc .totop{bottom:100px}@media (max-width:600px){.has-cc .totop{bottom:86px}}
/* Ask CC: round chat-bubble icon, bigger text */
.cc-launch{width:92px;height:92px;padding:0;border-radius:50%;justify-content:center;font-size:19px;line-height:1}
.cc-launch::after{right:2px;bottom:-4px;width:26px;height:26px;clip-path:polygon(0 0,100% 100%,55% 0);transform:none}
.cc-launch-t{display:inline-block;transform:translateY(-1px)}
.has-cc .totop{bottom:136px}
@media (max-width:600px){
  .cc-launch{width:76px;height:76px;font-size:16px}
  .cc-launch::after{width:22px;height:22px}
  .has-cc .totop{bottom:112px}
}

/* Ask CC: circular button, speech bubble with "CC" inside, notification badge, hover label */
.cc-launch{width:68px;height:68px;padding:0;border-radius:50%;justify-content:center;background:#1A2330;filter:none;
  box-shadow:0 0 0 5px rgba(26,35,48,.14),0 0 0 6px rgba(26,35,48,.22),0 12px 28px rgba(17,20,24,.3);overflow:visible}
.cc-launch::after{display:none}
.cc-launch:hover{transform:translateY(-2px) scale(1.04);filter:none;box-shadow:0 0 0 6px rgba(26,35,48,.16),0 0 0 7px rgba(26,35,48,.24),0 16px 34px rgba(17,20,24,.34)}
.cc-bub{position:relative;display:grid;place-items:center;width:40px;height:30px;border-radius:9px;background:var(--cream);font:900 15px/1 'Lato',sans-serif;letter-spacing:.01em;display:flex;align-items:center;justify-content:center;margin-top:-4px}
.cc-bub::after{content:"";position:absolute;left:7px;bottom:-7px;width:10px;height:9px;background:var(--cream);clip-path:polygon(0 0,100% 0,0 100%)}
.cc-bub .c1{color:var(--navy)}.cc-bub .c2{color:var(--gold-deep)}
.cc-badge{position:absolute;top:-3px;right:-3px;min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:#D9453B;color:#fff;font:900 12px/22px 'Lato',sans-serif;text-align:center;box-shadow:0 0 0 2px var(--cream);animation:ccPop .5s 1.2s both cubic-bezier(.34,1.56,.64,1)}
.cc.seen .cc-badge{display:none}
@keyframes ccPop{from{transform:scale(0)}to{transform:scale(1)}}
.cc-tip{position:absolute;right:calc(100% + 14px);top:50%;transform:translate(8px,-50%);opacity:0;pointer-events:none;white-space:nowrap;background:#1A2330;color:#fff;font:700 14px 'Lato',sans-serif;padding:8px 14px;border-radius:20px;transition:opacity .25s,transform .25s var(--ease)}
.cc-launch:hover .cc-tip,.cc-launch:focus-visible .cc-tip{opacity:1;transform:translate(0,-50%)}
.cc-launch-t{display:none}
.has-cc .totop{bottom:110px}
@media (max-width:600px){.cc-launch{width:60px;height:60px}.cc-bub{width:36px;height:27px;font-size:14px}.has-cc .totop{bottom:92px}.cc-tip{display:none}}
@media (prefers-reduced-motion: reduce){.cc-badge{animation:none}}

/* Top banner photos on every inner page (404 keeps its scaffold) */
.page-hero.has-photos{isolation:isolate}
.page-hero > .cta-bg{position:absolute;inset:0;z-index:-1;background:#1A2330;overflow:hidden}
.page-hero > .cta-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(26,35,48,.92) 0%,rgba(26,35,48,.85) 50%,rgba(26,35,48,.80) 100%)}
.page-hero.photos-dim > .cta-bg::after{background:linear-gradient(90deg,rgba(26,35,48,.95) 0%,rgba(26,35,48,.90) 55%,rgba(26,35,48,.86) 100%)}
.page-hero.has-photos{background:#1A2330}

/* Video testimonial card */
.tcard .tvid{position:relative;display:block;width:100%;aspect-ratio:16/9;border:0;padding:0;border-radius:8px;overflow:hidden;cursor:pointer;background:#1A2330}
.tcard .tvid .poster{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .6s var(--ease)}
.tcard .tvid::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(26,35,48,.05),rgba(26,35,48,.55))}
.tcard .tvid .play{position:absolute;left:50%;top:50%;z-index:1;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;background:var(--gold);color:var(--ink);display:grid;place-items:center;transition:transform .3s var(--ease)}
.tcard .tvid .play svg{width:22px;height:22px;margin-left:3px}
.tcard .tvid .watch{position:absolute;left:14px;bottom:12px;z-index:1;color:#fff;font-size:12px;font-weight:900;letter-spacing:.16em;text-transform:uppercase}
.tcard .tvid:hover .poster{transform:scale(1.05)}.tcard .tvid:hover .play{transform:scale(1.1)}
.tcard .tvid:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.tcard.has-video .who-said{margin-top:auto}

/* Primary video testimonials on the Testimonials page (light section after the dark banner) */
.vids-primary{background:var(--cream)}
.vids-primary .lead{margin-top:14px;max-width:640px}
.vids-primary .vcard{box-shadow:0 18px 40px rgba(11,78,125,.14)}
.vids-primary .vcard .poster{filter:none}
.vids-primary .vid-grid .vcard:not(:first-child) .play{width:60px;height:60px;margin:-30px 0 0 -30px;top:34%}
.vids-primary .vid-grid .vcard:not(:first-child) .play svg{width:22px;height:22px}
.partner-team[hidden]{display:none}
/* Team photos in full colour */
.member img{filter:none}
.member img,.member:hover img{filter:brightness(.93)}
/* Smaller team cards: 5 across, narrower grid */
.team-grid,.partner-team{max-width:none;column-gap:clamp(20px,3vw,40px);row-gap:36px}
.partner-team{grid-template-columns:repeat(5,1fr)}.partner-team .pt-copy{grid-column:span 3}
@media (max-width:1100px){.team-grid,.partner-team{grid-template-columns:repeat(4,1fr)}.partner-team .pt-copy{grid-column:1/-1}}
@media (max-width:900px){.team-grid,.partner-team{grid-template-columns:repeat(3,1fr)}}
@media (max-width:1100px){.team-grid,.partner-team{column-gap:28px}}
@media (max-width:600px){.team-grid,.partner-team{grid-template-columns:repeat(2,1fr);gap:14px}}
.member h3{font-size:16px}.member p{font-size:13px}
/* Blog post extras */
.prose .post-note{margin-top:36px;padding:16px 20px;border-left:3px solid var(--gold);background:var(--ice);border-radius:6px;font-size:15px;color:var(--muted)}
.prose .post-sources{margin-top:28px;font-size:14px;color:var(--muted)}
.prose .post-sources a{color:var(--slate)}
/* Blog: Cross Connect calls to action */
.prose .post-inline-cta{margin:36px 0;padding:22px 24px;border-radius:12px;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.prose .post-inline-cta p{margin:0;color:rgba(255,255,255,.88);max-width:520px}
.prose .post-inline-cta b{color:var(--gold);display:block;margin-bottom:4px}
.prose .post-inline-cta .btn{flex:none}
.prose .post-helps{margin-top:48px;padding-top:36px;border-top:1px solid rgba(11,78,125,.12)}
.prose .ph-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:18px}
.prose .ph-card{position:relative;display:flex;flex-direction:column;gap:6px;padding:18px 44px 18px 18px;border-radius:10px;background:#fff;box-shadow:0 0 0 1px rgba(11,78,125,.12);text-decoration:none;color:var(--ink);transition:transform .3s var(--ease),box-shadow .3s}
.prose .ph-card b{color:var(--navy);font-size:16px}
.prose .ph-card span{font-size:14px;color:var(--muted);line-height:1.5}
.prose .ph-card svg{position:absolute;right:16px;top:20px;width:16px;height:16px;color:var(--gold)}
.prose .ph-card:hover{transform:translateY(-3px);box-shadow:0 0 0 1px var(--gold),0 14px 30px rgba(11,78,125,.12)}
.post-cta-box{max-width:760px;margin:48px 0 0;padding:clamp(28px,4vw,44px);border-radius:14px;background:#1A2330;color:#fff;border-top:4px solid var(--gold)}
.post-cta-box .pcb-logo{height:28px;width:auto;margin-bottom:18px;filter:brightness(0) invert(1);opacity:.9}
.post-cta-box h2{font-size:clamp(24px,2.6vw,32px);font-weight:900;color:#fff;line-height:1.2}
.post-cta-box p{color:rgba(255,255,255,.8);margin-top:10px}
.post-cta-box .pcb-btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.post-cta-box .btn-ghost{color:#fff;border-color:rgba(255,255,255,.4)}
.post-cta-box .pcb-call{font-size:14px;margin-top:18px}
.post-cta-box .pcb-call a{color:var(--gold)}
@media (max-width:640px){.prose .ph-grid{grid-template-columns:1fr}}
.prose .post-inline-cta .btn,.post-cta-box .btn,.prose .ph-card{text-decoration:none}
.qa-split{margin-top:36px}.qa-split .box p a{color:var(--navy);font-weight:700}
@media (max-width:900px){.split2.qa-split{grid-template-columns:1fr}}
.post-cta-box .pcb-logo{height:22px;width:auto;filter:none;opacity:1}

/* Customs sub-services: indented under Customs Clearance in the Services menu */
.drop a[href="/convention-tradeshow-customs"],.drop a[href="/live-entertainment-customs"]{position:relative;padding-left:32px;font-size:13px}
.drop a[href="/convention-tradeshow-customs"]::before,.drop a[href="/live-entertainment-customs"]::before{content:"";position:absolute;left:16px;top:50%;width:8px;height:2px;background:var(--gold)}
.drop a[href="/convention-tradeshow-customs"]:hover,.drop a[href="/live-entertainment-customs"]:hover{padding-left:38px}
/* Customs overview: two photo banners linking to the sub-services */
.subtiles{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:40px}
.subtile{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end;min-height:340px;padding:34px;border-radius:12px;overflow:hidden;color:#fff;text-decoration:none;background:#1A2330}
.subtile::before{content:"";position:absolute;inset:0;z-index:-2;background:var(--img) center/cover;filter:grayscale(1);transition:transform .8s var(--ease)}
.subtile::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(11,78,125,.45) 0%,rgba(26,35,48,.92) 75%)}
.subtile:hover::before{transform:scale(1.05)}
.subtile .st-ic{width:48px;height:48px;border-radius:50%;background:var(--gold);color:#1A2330;display:grid;place-items:center;margin-bottom:18px}
.subtile .st-ic svg{width:26px;height:26px}
.subtile h3{font-size:clamp(24px,2.4vw,30px);font-weight:900;margin:0 0 10px;color:#fff}
.subtile p{margin:0 0 18px;opacity:.88;font-size:17px;max-width:46ch}
.subtile .more{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--gold)}
.subtile .more svg{width:16px;height:16px;transition:transform .3s}
.subtile:hover .more svg{transform:translateX(4px)}
@media (max-width:800px){.subtiles{grid-template-columns:1fr}.subtile{min-height:280px;padding:26px}}
/* Services page: the live entertainment journey sits under the trade show journey */
.core-live{border-top:1px solid var(--line, #e6e6e6)}

/* Coming soon: Case Studies and Guides hubs, and their cards on Resources */
.soon-tag{display:inline-block;background:var(--gold);color:#1A2330;font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;padding:6px 12px;border-radius:30px}
.soon-card{max-width:760px;margin:0 auto;text-align:center;background:var(--white);border:1px solid rgba(11,78,125,.12);border-radius:14px;padding:clamp(32px,5vw,56px);box-shadow:0 20px 50px rgba(17,20,24,.06)}
.soon-card h2{color:var(--ink);margin:18px 0 14px}
.soon-card p{font-size:18px;color:var(--muted);max-width:56ch;margin:0 auto 26px}
.soon-card .hero-ctas{justify-content:center}
.cat.is-soon{position:relative}
.cat.is-soon .soon-tag{position:absolute;top:18px;right:18px}
.soon-card .btn-ghost{color:var(--navy);box-shadow:inset 0 0 0 2px var(--navy)}
.soon-card .btn-ghost::before{background:rgba(11,78,125,.08)}
.soon-card .btn-ghost:hover{box-shadow:inset 0 0 0 2px var(--navy)}

/* Creating Connections: a clear, friendly hint for playing with the dots */
.flow .connect-sec .net-ui span.net-hint{display:inline-flex;align-items:center;gap:12px;font-size:15px;font-weight:700;letter-spacing:0;color:var(--navy);opacity:1;
  background:#fff!important;padding:11px 20px 11px 12px!important;border-radius:40px;box-shadow:0 0 0 1px rgba(11,78,125,.12),0 10px 26px rgba(17,20,24,.10)!important;animation:hintIn .8s .6s both var(--ease)}
.flow .connect-sec .net-ui span.net-hint::before{content:"";flex:none;width:30px;height:30px;border-radius:50%;
  background:var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A2330' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 11V5.5a1.5 1.5 0 013 0V11m0-1.5a1.5 1.5 0 013 0V11m0-.5a1.5 1.5 0 013 0V15a6 6 0 01-6 6h-1a6 6 0 01-4.9-2.5L4.3 15a1.5 1.5 0 012.4-1.8L9 15'/%3E%3C/svg%3E") center/18px no-repeat;
  box-shadow:0 0 0 0 rgba(235,196,108,.7);animation:hintPulse 1.8s infinite}
.flow .connect-sec .net-ui span.net-hint.done::before{animation:none;background-color:var(--navy);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EBC46C' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")}
@keyframes hintPulse{0%{box-shadow:0 0 0 0 rgba(235,196,108,.7)}70%{box-shadow:0 0 0 12px rgba(235,196,108,0)}100%{box-shadow:0 0 0 0 rgba(235,196,108,0)}}
@keyframes hintIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.flow .connect-sec .net-ui span.net-hint,.flow .connect-sec .net-ui span.net-hint::before{animation:none}}
.flow .connect-sec .net-ui button{font-size:11px;padding:8px 14px;opacity:1}
/* Phones: show the hint too, centred under the dots */
@media (max-width:900px){
  .flow .connect-sec .net-ui{display:flex;position:static;justify-content:center;margin-top:18px;padding:0 16px;flex-wrap:wrap}
  .flow .connect-sec .net-ui span.net-hint{font-size:14px;text-align:left}
}

/* Banner: side tab inviting visitors to play with the dots (computers); chip under the buttons (phones) */
.net-tab{position:absolute;z-index:4;right:0;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:12px;
  padding:16px 11px 18px;border:0;border-radius:12px 0 0 12px;background:rgba(255,255,255,.94);color:var(--navy);cursor:pointer;
  box-shadow:0 12px 30px rgba(0,0,0,.25);font:700 13px/1 'Lato',sans-serif;letter-spacing:.04em;
  animation:tabIn .7s 1.2s both var(--ease);transition:transform .5s var(--ease),opacity .4s,background .3s}
.net-tab .nt-label{writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap}
.net-tab .nt-ic,.net-tab .nt-ok,.net-chip .nt-ic{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--gold);color:#1A2330}
.net-tab .nt-ic{animation:hintPulse 1.8s 2s infinite}
.net-tab .nt-ic svg,.net-tab .nt-ok svg,.net-chip .nt-ic svg{width:18px;height:18px}
.net-tab .nt-ok{display:none;background:var(--navy);color:var(--gold)}
.net-tab:hover,.net-tab.open{background:#fff}
.net-tab:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.net-tab.done .nt-ic{display:none}.net-tab.done .nt-ok{display:grid}
.net-tab.gone,.net-tab.off{transform:translate(110%,-50%);opacity:0;pointer-events:none}
.net-tab-pop{position:absolute;z-index:4;right:66px;top:50%;width:270px;transform:translate(12px,-50%);opacity:0;visibility:hidden;pointer-events:none;
  background:#fff;color:var(--ink);font-size:15px;line-height:1.5;padding:16px 18px;border-radius:12px;box-shadow:0 16px 40px rgba(0,0,0,.28);transition:all .3s var(--ease)}
.net-tab-pop b{display:block;color:var(--navy);margin-bottom:4px}
.net-tab-pop::after{content:"";position:absolute;right:-7px;top:50%;width:14px;height:14px;background:#fff;transform:translateY(-50%) rotate(45deg)}
.net-tab-pop.open{opacity:1;visibility:visible;transform:translate(0,-50%)}
.net-chip{display:none}
@keyframes tabIn{from{opacity:0;transform:translate(100%,-50%)}to{opacity:1;transform:translate(0,-50%)}}
@media (prefers-reduced-motion:reduce){.net-tab,.net-tab .nt-ic{animation:none}}
@media (max-width:900px){
  .net-tab,.net-tab-pop{display:none}
  .net-chip{display:inline-flex;align-items:center;gap:10px;margin-top:22px;padding:7px 14px 7px 7px;border-radius:40px;background:rgba(255,255,255,.12);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.3);color:#fff;font-size:14px;font-weight:700;transition:opacity .5s}
  .net-chip .nt-ic{width:26px;height:26px}.net-chip .nt-ic svg{width:16px;height:16px}
  .net-chip.gone{opacity:0}
}
/* Side tab v2: stays fixed on screen through the banner and Creating Connections; short lines of normal text */
.net-tab{position:fixed;z-index:40;width:74px;padding:14px 8px 16px;gap:10px}
.net-tab .nt-label{writing-mode:horizontal-tb;transform:none;white-space:normal;text-align:center;font-size:12.5px;line-height:1.35;letter-spacing:.01em}
.net-tab-pop{position:fixed;z-index:40;right:86px}
/* the hint under Creating Connections is no longer needed (the Reset button stays) */
.flow .connect-sec .net-ui span.net-hint{display:none}
/* Side tab v3: see-through navy glass, readable over the dark banner and the light section below */
.net-tab,.net-tab:hover,.net-tab.open{background:rgba(11,78,125,.62);-webkit-backdrop-filter:blur(10px) saturate(1.2);backdrop-filter:blur(10px) saturate(1.2);
  color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),0 10px 26px rgba(17,20,24,.18)}
.net-tab:hover,.net-tab.open{background:rgba(11,78,125,.78)}
.net-tab .nt-label{text-shadow:0 1px 2px rgba(0,0,0,.35)}
.net-tab .nt-ok{background:var(--gold);color:#1A2330}
/* the slide-in animation must not hold the tab on screen once it should hide */
.net-tab.off,.net-tab.gone{animation:none;transform:translate(110%,-50%);opacity:0;pointer-events:none}
/* Side tab v4: slides with a transition (no keyframes), so it hides and comes back instantly */
.net-tab{animation:none;opacity:0;transform:translate(110%,-50%);pointer-events:none}
.net-tab.in{opacity:1;transform:translate(0,-50%);pointer-events:auto}
.net-tab.in.off,.net-tab.in.gone,.net-tab.off,.net-tab.gone{opacity:0;transform:translate(110%,-50%);pointer-events:none}
/* Who We Are: still photo when the video is skipped (reduced motion, data saver, phones) */
.who-video.still{background:center/cover no-repeat;filter:grayscale(1)}
/* Who We Are: photo shows at once, video fades in over it when playing */
.who-video{background:center/cover no-repeat}
.who-video video{opacity:0;transition:opacity 1s ease;filter:none}
.who-video.playing video,.who-video.still video{opacity:1}
/* stats: keep "100+" on one line at mid widths */
.who .stat b{white-space:nowrap;font-size:clamp(34px,4vw,56px)}
@media (max-width:1100px){.who .stat{padding-left:12px;padding-right:12px}.who .stat small{letter-spacing:.08em}}
/* Who We Are: pin the layers (Safari can paint a fading video above the overlay) */
.who-video video{position:relative;z-index:0}
.who-video::after{z-index:1}
/* the photo is already black and white; a filter here also greyed out the dark navy overlay */
.who-video.still{filter:none}
/* Who We Are: dark brand-blue overlay (navy #0B4E7D family) instead of the near-black slate */
.who-video::after{background:linear-gradient(90deg,rgba(6,34,60,.93) 0%,rgba(9,52,90,.84) 50%,rgba(11,78,125,.74) 100%)}
/* Who We Are: exactly the same overlay as the homepage top banner */
.who-video::after{background:linear-gradient(90deg,rgba(26,35,48,.93) 0%,rgba(26,35,48,.86) 50%,rgba(26,35,48,.80) 100%)}
/* Related services on service pages: one card per row on phones, two on tablets (the grid sets 3 columns inline) */
@media (max-width:900px){.grid[style*="repeat(3,1fr)"]{grid-template-columns:repeat(2,1fr)!important}}
@media (max-width:600px){.grid[style*="repeat(3,1fr)"]{grid-template-columns:1fr!important}}