:root{
  --bg:#FBFAF6;--bg-2:#F1F5FA;--bg-3:#E9EFF7;--card:#FFFFFF;
  --ink:#0E1E33;--ink-2:#2C3E5A;--muted:#6B7889;
  --blue:#1E5BAA;--blue-2:#0F4585;--blue-3:#08305F;
  --yellow:#F5C518;--yellow-2:#E0AE0E;--yellow-soft:#FFF6D6;--blue-soft:#E1ECF8;
  --rule:rgba(14,30,51,.10);--rule-2:rgba(14,30,51,.18);--rule-3:rgba(14,30,51,.32);
  --serif:"Fraunces",ui-serif,Georgia,serif;
  --sans:"Manrope",ui-sans-serif,system-ui,-apple-system,sans-serif;
  --container:1320px;--gutter:clamp(20px,4vw,56px);--radius:6px;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:120px}
body{font-family:var(--sans);background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-size:16px;line-height:1.6;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
h1,h2,h3,h4,h5{font-family:var(--serif);font-weight:400;letter-spacing:-.015em;margin:0;color:var(--ink)}
h1{font-size:clamp(44px,6.6vw,104px);line-height:.98;letter-spacing:-.025em}
h2{font-size:clamp(34px,4.6vw,64px);line-height:1.04;letter-spacing:-.02em}
h3{font-size:clamp(22px,2.2vw,32px);line-height:1.15}
h4{font-size:20px;line-height:1.25}
p{margin:0}
.lead{font-size:clamp(17px,1.35vw,21px);line-height:1.55;color:var(--ink-2)}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--sans);font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--blue)}
.eyebrow::before{content:"";width:24px;height:1px;background:currentColor;display:inline-block}
.eyebrow.light{color:var(--yellow)}
.eyebrow.light::before{background:var(--yellow)}
::selection{background:var(--yellow);color:var(--ink)}
.btn{display:inline-flex;align-items:center;gap:10px;padding:13px 22px;border-radius:999px;font-family:var(--sans);font-weight:600;font-size:14px;border:1px solid var(--blue-2);background:var(--blue-2);color:#fff;transition:transform .25s ease,background .25s ease,color .25s ease,border-color .25s ease;cursor:pointer;line-height:1}
.btn:hover{background:var(--blue-3);border-color:var(--blue-3);transform:translateY(-1px)}
.btn .arr{display:inline-block;transition:transform .3s ease}
.btn:hover .arr{transform:translate(3px,-3px)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:#fff}
.btn.yellow{background:var(--yellow);color:var(--ink);border-color:var(--yellow)}
.btn.yellow:hover{background:var(--yellow-2);border-color:var(--yellow-2)}
.btn.outline-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.btn.outline-light:hover{background:#fff;color:var(--blue-2);border-color:#fff}
.link-arrow{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--blue-2);border-bottom:1px solid var(--blue-2);padding-bottom:3px;transition:gap .25s ease,color .25s ease}
.link-arrow:hover{gap:14px;color:var(--yellow-2)}

.topbar{background:var(--blue-3);color:#E0EBFA;font-size:12.5px}
.topbar .inner{display:flex;justify-content:space-between;align-items:center;padding:9px 0;gap:24px;flex-wrap:wrap}
.topbar a{color:#E0EBFA;transition:color .2s}
.topbar a:hover{color:var(--yellow)}
.topbar .left,.topbar .right{display:flex;gap:22px;flex-wrap:wrap;align-items:center}
.topbar .dot{width:6px;height:6px;border-radius:50%;background:var(--yellow);display:inline-block;margin-right:8px;vertical-align:middle;animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

nav.primary{position:sticky;top:0;z-index:80;background:rgba(251,250,246,.94);backdrop-filter:saturate(150%) blur(12px);-webkit-backdrop-filter:saturate(150%) blur(12px);border-bottom:1px solid var(--rule)}
nav.primary .inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0;gap:24px}
.brand-mark{display:flex;align-items:center;gap:14px;cursor:pointer}
.brand-mark img{height:44px;width:auto}
@media (max-width:600px){.brand-mark img{height:36px}}
.nav-links{display:flex;align-items:center;gap:24px;font-size:14px;font-weight:600}
.nav-links a{position:relative;padding:10px 0;color:var(--ink-2);transition:color .2s;cursor:pointer}
.nav-links a:hover{color:var(--blue-2)}
.nav-toggle{display:none;background:none;border:0;padding:8px;cursor:pointer}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--ink);margin:5px 0;transition:.3s}
@media (max-width:1100px){.nav-links,nav.primary .btn{display:none}.nav-toggle{display:block}.topbar .left a:nth-child(n+3),.topbar .right a:nth-child(n+2){display:none}}

.mobile-menu{position:fixed;inset:0;background:var(--blue-3);color:#fff;z-index:90;display:none;flex-direction:column;padding:24px var(--gutter);overflow-y:auto}
.mobile-menu.open{display:flex}
.mobile-menu .top{display:flex;justify-content:space-between;align-items:center;padding-bottom:24px;border-bottom:1px solid rgba(255,255,255,.18)}
.mobile-menu .close{background:none;border:0;color:#fff;font-size:28px;cursor:pointer;line-height:1}
.mobile-menu nav{display:flex;flex-direction:column;gap:6px;margin-top:32px}
.mobile-menu nav a{font-family:var(--serif);font-size:28px;color:#fff;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.12);cursor:pointer}
.mobile-menu nav a:hover{color:var(--yellow)}
.mobile-menu .foot{margin-top:auto;padding:24px 0;border-top:1px solid rgba(255,255,255,.18);font-size:14px;color:#cdd9eb}
.mobile-menu .foot a{color:var(--yellow);font-weight:600}

.section{padding:120px 0;position:relative;scroll-margin-top:80px}
.section.tight{padding:88px 0}
.section.alt{background:var(--bg-2)}
.section.dark{background:var(--ink);color:#E6EDF7}
.section.dark h1,.section.dark h2,.section.dark h3,.section.dark h4{color:#fff}
.section.dark p{color:rgba(230,237,247,.78)}
.section.blue{background:var(--blue-3);color:#fff}
.section.blue h1,.section.blue h2,.section.blue h3{color:#fff}
.section.blue p{color:rgba(255,255,255,.82)}
@media (max-width:880px){.section{padding:72px 0}.section.tight{padding:56px 0}}

.sec-head{display:grid;grid-template-columns:1fr 1.4fr;gap:60px;align-items:end;margin-bottom:64px;padding-bottom:24px;border-bottom:1px solid var(--rule)}
.sec-head h2{max-width:18ch}
.sec-head .lead{max-width:52ch}
.sec-head.center{grid-template-columns:1fr;text-align:center;border:0;padding:0}
.sec-head.center h2,.sec-head.center .lead{max-width:none;margin-left:auto;margin-right:auto}
@media (max-width:880px){.sec-head{grid-template-columns:1fr;gap:24px;margin-bottom:40px}}

.section-divider{padding:56px 0 0;background:var(--bg);text-align:center;border-top:1px solid var(--rule)}
.section-divider .container{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap}
.section-divider .num{font-family:var(--serif);font-style:italic;color:var(--yellow-2);font-size:18px}
.section-divider h6{font-family:var(--sans);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--blue-2);font-weight:700;margin:0}
.section-divider .dots{color:var(--rule-3)}

.card{background:var(--card);border:1px solid var(--rule);border-radius:var(--radius);padding:36px;transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}
.card:hover{transform:translateY(-4px);border-color:var(--rule-2);box-shadow:0 24px 48px -32px rgba(14,30,51,.25)}
.tag{display:inline-block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--rule-2);padding:5px 11px;border-radius:999px;color:var(--ink-2);font-weight:700;background:var(--card)}
.tag.solid{background:var(--blue-2);color:#fff;border-color:var(--blue-2)}
.tag.yellow{background:var(--yellow);color:var(--ink);border-color:var(--yellow)}

footer.site{background:var(--ink);color:#E0E7F1;padding:88px 0 32px;border-top:6px solid var(--yellow)}
footer.site .foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:48px;padding-bottom:48px;border-bottom:1px solid rgba(255,255,255,.14)}
footer.site h5{font-family:var(--sans);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--yellow);margin:0 0 18px;font-weight:700}
footer.site ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}
footer.site ul a{font-size:14px;color:rgba(224,231,241,.78);transition:color .2s;cursor:pointer}
footer.site ul a:hover{color:#fff}
footer.site .brand-block img{height:42px;filter:brightness(0) invert(1);margin-bottom:18px}
footer.site .brand-block p{color:rgba(224,231,241,.7);max-width:38ch;font-size:14px}
footer.site address{font-style:normal;font-size:13.5px;color:rgba(224,231,241,.78);line-height:1.7}
footer.site address strong{color:#fff;font-family:var(--serif);font-style:italic;font-weight:400;font-size:14.5px;display:block;margin-bottom:5px}
footer.site address + address{margin-top:18px}
footer.site .foot-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:32px;font-size:12px;color:rgba(224,231,241,.55);flex-wrap:wrap;gap:16px}
footer.site .foot-bottom .legal{display:flex;gap:24px;flex-wrap:wrap}
footer.site .foot-bottom .legal a{cursor:pointer}
footer.site .foot-bottom .legal a:hover{color:#fff}
@media (max-width:880px){footer.site .foot-grid{grid-template-columns:1fr 1fr;gap:32px}footer.site .brand-block{grid-column:1/-1}}

.reveal{opacity:0;transform:translateY(20px);transition:opacity .9s ease,transform .9s ease}
.reveal.in{opacity:1;transform:none}

.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
@media (max-width:1000px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:680px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}

/* hero */
.hero{padding:80px 0 60px;position:relative;overflow:hidden}
.hero .meta{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--rule);padding-bottom:14px;margin-bottom:48px;font-weight:700;flex-wrap:wrap;gap:12px}
.hero .meta span:first-child{color:var(--blue-2)}
.hero .grid{display:grid;grid-template-columns:1.4fr 1fr;gap:60px;align-items:end}
.hero h1 .accent{font-style:italic;color:var(--blue-2);font-weight:300}
.hero .right{display:flex;flex-direction:column;gap:32px}
.hero .lead{max-width:46ch}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.loop-strip{margin-top:64px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:24px 0;display:grid;grid-template-columns:auto 1fr auto 1fr auto 1fr auto;align-items:center;gap:18px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--ink-2);overflow-x:auto}
.loop-strip .dot{width:10px;height:10px;border-radius:50%;background:var(--blue-2);flex:0 0 auto}
.loop-strip .dot.y{background:var(--yellow);box-shadow:0 0 0 4px var(--yellow-soft)}
.loop-strip .line{height:1px;background:var(--rule-3);min-width:30px}
.loop-strip span{white-space:nowrap}
.loop-strip .return{display:flex;align-items:center;gap:6px;color:var(--blue-2)}
@media (max-width:880px){.hero{padding:48px 0 36px}.hero .grid{grid-template-columns:1fr;gap:36px}.hero .right{order:2}.loop-strip{font-size:10px;gap:10px;padding:18px 0;letter-spacing:.1em}}

.stats{background:var(--ink);color:#fff;padding:80px 0;position:relative;overflow:hidden}
.stats::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 90% 10%,rgba(245,197,24,.12),transparent 40%),radial-gradient(circle at 10% 90%,rgba(30,91,170,.18),transparent 40%);pointer-events:none}
.stats .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:40px;position:relative}
.stat .num{font-family:var(--serif);font-size:clamp(56px,6vw,96px);font-weight:300;letter-spacing:-.03em;line-height:1;display:flex;align-items:flex-start;gap:6px;color:#fff}
.stat .num sup{font-size:.32em;font-weight:400;color:var(--yellow);margin-top:.4em}
.stat .label{margin-top:14px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--yellow);font-weight:700}
.stat .desc{margin-top:6px;font-size:14px;color:rgba(255,255,255,.78);max-width:24ch}
@media (max-width:880px){.stats{padding:56px 0}.stats .grid{grid-template-columns:1fr 1fr;gap:32px 24px}}

.split{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
@media (max-width:880px){.split{grid-template-columns:1fr;gap:40px}}
.split .visual{aspect-ratio:4/5;border-radius:var(--radius);background:linear-gradient(135deg,var(--blue-soft) 0%,var(--bg-2) 50%,var(--yellow-soft) 100%);position:relative;overflow:hidden;display:grid;place-items:center;border:1px solid var(--rule)}
.split .visual.dark{background:linear-gradient(135deg,var(--blue-3) 0%,var(--blue-2) 100%);color:#fff}

.positioning{background:linear-gradient(180deg,var(--bg-2) 0%,var(--bg-3) 100%);padding:120px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);scroll-margin-top:80px}
.positioning .grid{display:grid;grid-template-columns:1.1fr 1fr;gap:80px;align-items:center}
.positioning h2 .ital{font-style:italic;color:var(--blue-2)}
.positioning .quote{border-left:3px solid var(--yellow);padding:8px 0 8px 24px;margin-top:36px;font-family:var(--serif);font-style:italic;font-size:22px;line-height:1.4;color:var(--ink-2);max-width:38ch}
.loop-diagram{aspect-ratio:1/1;width:100%;max-width:520px;margin-left:auto}
@media (max-width:880px){.positioning .grid{grid-template-columns:1fr;gap:40px}.loop-diagram{margin:0 auto}.positioning{padding:80px 0}}

.solutions .grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden}
.sol{background:var(--card);padding:48px;display:flex;flex-direction:column;gap:18px;min-height:340px;transition:background .3s ease;position:relative;cursor:pointer}
.sol:hover{background:var(--bg-2)}
.sol .num{font-family:var(--serif);font-style:italic;font-size:14px;color:var(--yellow-2);letter-spacing:.04em;font-weight:500}
.sol .desc{color:var(--ink-2);max-width:42ch;font-size:15.5px}
.sol .tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto}
.sol.feature{grid-column:1/-1;background:linear-gradient(135deg,var(--blue-3) 0%,var(--blue-2) 100%);color:#E6EDF7;padding:64px 48px;display:grid;grid-template-columns:1fr 1.2fr;gap:60px;align-items:center;position:relative;overflow:hidden}
.sol.feature::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 90% 0%,rgba(245,197,24,.16),transparent 50%);pointer-events:none}
.sol.feature h3{font-size:clamp(28px,3vw,44px);max-width:14ch;color:#fff;position:relative}
.sol.feature .num{color:var(--yellow);position:relative}
.sol.feature .desc{color:rgba(230,237,247,.85);max-width:48ch;font-size:17px;position:relative}
.sol.feature .tag{border-color:rgba(255,255,255,.3);color:#fff;background:transparent}
.sol .arrow{align-self:flex-end;width:42px;height:42px;border-radius:50%;border:1px solid var(--rule-2);display:grid;place-items:center;font-family:var(--serif);font-size:16px;margin-top:12px;transition:background .3s ease,color .3s ease,border-color .3s ease;color:var(--ink-2)}
.sol:hover .arrow{background:var(--yellow);color:var(--ink);border-color:var(--yellow)}
.sol.feature .arrow{border-color:rgba(255,255,255,.35);color:#fff;position:relative}
.sol.feature:hover .arrow{background:var(--yellow);color:var(--ink);border-color:var(--yellow)}
@media (max-width:880px){.solutions .grid{grid-template-columns:1fr}.sol{padding:36px 28px;min-height:0}.sol.feature{grid-template-columns:1fr;padding:40px 28px;gap:24px}}

.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden}
.feat{background:var(--card);padding:36px 28px;display:flex;flex-direction:column;gap:14px;min-height:220px}
.feat .big-num{font-family:var(--serif);font-size:clamp(36px,4vw,52px);line-height:1;font-weight:300;color:var(--blue-2)}
.feat h4{font-size:19px;font-family:var(--serif);font-weight:500}
.feat p{font-size:14.5px;color:var(--ink-2)}
@media (max-width:1000px){.feat-grid{grid-template-columns:1fr 1fr}}
@media (max-width:680px){.feat-grid{grid-template-columns:1fr}}

.process{display:grid;grid-template-columns:repeat(4,1fr);gap:0;counter-reset:step;border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden}
.process .step{padding:36px 28px;background:var(--card);border-right:1px solid var(--rule);display:flex;flex-direction:column;gap:12px;position:relative}
.process .step:last-child{border-right:0}
.process .step::before{counter-increment:step;content:"0" counter(step);font-family:var(--serif);font-style:italic;color:var(--yellow-2);font-size:24px;font-weight:400}
.process .step h4{font-size:18px;font-family:var(--serif);font-weight:500}
.process .step p{font-size:14px;color:var(--ink-2)}
@media (max-width:1000px){.process{grid-template-columns:1fr 1fr}.process .step:nth-child(even){border-right:0}.process .step:nth-child(-n+2){border-bottom:1px solid var(--rule)}}
@media (max-width:600px){.process{grid-template-columns:1fr}.process .step{border-right:0;border-bottom:1px solid var(--rule)}.process .step:last-child{border-bottom:0}}

.specs{border-top:1px solid var(--rule)}
.specs .row{display:grid;grid-template-columns:1fr 2fr;gap:32px;padding:20px 0;border-bottom:1px solid var(--rule);align-items:start}
.specs .row dt{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--blue-2);font-weight:700}
.specs .row dd{margin:0;font-size:15.5px;color:var(--ink-2)}
@media (max-width:680px){.specs .row{grid-template-columns:1fr;gap:6px}}

.ind-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--rule)}
.ind{padding:32px 24px;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);display:flex;flex-direction:column;gap:12px;transition:background .3s ease;background:var(--bg-2)}
.ind:nth-child(4n){border-right:0}
.ind:hover{background:var(--card)}
.ind .num{font-family:var(--serif);font-style:italic;font-size:13px;color:var(--yellow-2)}
.ind h4{font-family:var(--serif);font-weight:500;font-size:19px;letter-spacing:-.01em}
.ind small{font-size:12px;color:var(--muted);letter-spacing:.02em}
@media (max-width:1000px){.ind-grid{grid-template-columns:repeat(2,1fr)}.ind:nth-child(4n){border-right:1px solid var(--rule)}.ind:nth-child(2n){border-right:0}}

.marquee{overflow:hidden;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:32px 0;background:var(--bg-2)}
.marquee-track{display:flex;gap:64px;animation:scroll 40s linear infinite;width:max-content}
.marquee-track .item{font-family:var(--serif);font-size:32px;font-weight:400;letter-spacing:-.01em;color:var(--ink-2);white-space:nowrap;display:flex;align-items:center;gap:32px}
.marquee-track .item::after{content:"●";color:var(--yellow);font-size:10px}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquee:hover .marquee-track{animation-play-state:paused}

.featured{padding:120px 0;background:var(--ink);color:#fff;position:relative;overflow:hidden}
.featured::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 100% 0%,rgba(245,197,24,.10),transparent 50%);pointer-events:none}
.featured .grid{display:grid;grid-template-columns:1fr 1.3fr;gap:80px;align-items:center;position:relative}
.featured .eyebrow{color:var(--yellow)}
.featured h2{color:#fff}
.featured h2 em{color:var(--yellow);font-weight:300}
.featured p{color:rgba(255,255,255,.78);max-width:50ch}
.featured .stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:36px;border-top:1px solid rgba(255,255,255,.18);padding-top:28px}
.featured .stats-row .n{font-family:var(--serif);font-size:36px;line-height:1;font-weight:300;color:#fff}
.featured .stats-row .l{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--yellow);margin-top:8px;font-weight:700}
.featured-card{aspect-ratio:4/5;background:linear-gradient(135deg,var(--blue-2) 0%,var(--blue-3) 100%);border-radius:var(--radius);padding:40px;display:flex;flex-direction:column;justify-content:space-between;color:#fff;position:relative;overflow:hidden}
.featured-card::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 20%,rgba(245,197,24,.20),transparent 50%),radial-gradient(circle at 10% 90%,rgba(255,255,255,.06),transparent 45%);pointer-events:none}
.featured-card .pill{align-self:flex-start;font-size:11px;letter-spacing:.16em;text-transform:uppercase;border:1px solid rgba(255,255,255,.4);padding:6px 12px;border-radius:999px;font-weight:700;background:rgba(0,0,0,.18);position:relative}
.featured-card h3{font-size:clamp(28px,3vw,40px);color:#fff;max-width:14ch;position:relative}
.featured-card .meta{display:grid;grid-template-columns:1fr 1fr;gap:18px;font-size:13px;color:rgba(255,255,255,.75);position:relative}
.featured-card .meta strong{display:block;color:var(--yellow);font-weight:500;font-family:var(--serif);font-size:18px;margin-bottom:4px}
@media (max-width:880px){.featured{padding:80px 0}.featured .grid{grid-template-columns:1fr;gap:40px}.featured .stats-row{grid-template-columns:1fr 1fr}.featured-card{aspect-ratio:1/1.1}}

.why-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden}
.why-card{background:var(--card);padding:42px;display:flex;flex-direction:column;gap:14px;min-height:220px;transition:background .3s ease}
.why-card:hover{background:var(--bg-2)}
.why-card .num{font-family:var(--serif);font-style:italic;color:var(--yellow-2);font-size:14px;font-weight:500}
.why-card h3{font-size:24px}
.why-card p{color:var(--ink-2);font-size:15px}
@media (max-width:880px){.why-grid{grid-template-columns:1fr}.why-card{padding:32px 24px;min-height:0}}

.leaders-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.leader{background:var(--card);border:1px solid var(--rule);border-radius:var(--radius);padding:28px;display:flex;flex-direction:column;gap:18px;transition:transform .3s ease,box-shadow .3s ease}
.leader:hover{transform:translateY(-4px);box-shadow:0 24px 48px -32px rgba(14,30,51,.25)}
.leader .portrait{aspect-ratio:4/5;background:linear-gradient(180deg,var(--blue-soft),var(--bg-3));position:relative;overflow:hidden;display:grid;place-items:center;border-radius:var(--radius)}
.leader .portrait .initials{font-family:var(--serif);font-style:italic;font-size:80px;font-weight:300;color:var(--blue-2)}
.leader .portrait::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.5),transparent 50%)}
.leader h4{font-family:var(--serif);font-size:24px;font-weight:500}
.leader .role{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--yellow-2);font-weight:700;margin-top:-12px}
.leader p{font-size:14px;color:var(--ink-2)}
@media (max-width:880px){.leaders-grid{grid-template-columns:1fr;gap:24px}}

.project-card{background:var(--card);border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:transform .3s ease,box-shadow .3s ease}
.project-card:hover{transform:translateY(-4px);box-shadow:0 24px 48px -32px rgba(14,30,51,.25)}
.project-card .visual{aspect-ratio:4/3;background:linear-gradient(135deg,var(--blue-2) 0%,var(--blue-3) 100%);position:relative;overflow:hidden;display:flex;align-items:flex-end;padding:24px;color:#fff}
.project-card .visual.alt{background:linear-gradient(135deg,var(--ink) 0%,var(--blue-3) 100%)}
.project-card .visual.gold{background:linear-gradient(135deg,var(--yellow-2) 0%,#A87905 100%)}
.project-card .visual::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 20%,rgba(245,197,24,.16),transparent 50%);pointer-events:none}
.project-card .visual .pill{font-size:10px;letter-spacing:.16em;text-transform:uppercase;border:1px solid rgba(255,255,255,.5);padding:5px 11px;border-radius:999px;font-weight:700;background:rgba(0,0,0,.18);position:relative}
.project-card .body{padding:24px;display:flex;flex-direction:column;gap:10px;flex:1}
.project-card h4{font-size:20px;font-family:var(--serif);font-weight:500}
.project-card p{font-size:14px;color:var(--ink-2)}
.project-card .meta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:auto;padding-top:16px;border-top:1px solid var(--rule);font-size:12px;color:var(--muted);font-weight:600;letter-spacing:.05em;text-transform:uppercase}
.project-card .meta-row span+span::before{content:"·";margin-right:8px;color:var(--rule-3)}

.form{display:grid;gap:18px}
.form .row-2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:600px){.form .row-2{grid-template-columns:1fr}}
.form label{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--blue-2);font-weight:700;display:block;margin-bottom:6px}
.form input,.form select,.form textarea{width:100%;padding:14px 16px;border:1px solid var(--rule-2);border-radius:6px;font-family:var(--sans);font-size:15px;background:var(--card);color:var(--ink);transition:border-color .2s,box-shadow .2s}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--blue-2);box-shadow:0 0 0 3px var(--blue-soft)}
.form textarea{min-height:140px;resize:vertical;font-family:var(--sans)}
.form .submit-row{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:8px}
.form .small{font-size:12.5px;color:var(--muted)}

.job-row{display:grid;grid-template-columns:auto 1fr auto auto;gap:24px;align-items:center;padding:28px 32px;background:#fff;border:1px solid var(--rule);border-radius:6px;transition:transform .25s ease,border-color .25s ease;text-decoration:none;color:inherit;cursor:pointer}
.job-row:hover{transform:translateY(-2px);border-color:var(--blue-2)}
.job-row .meta{font-size:13px;color:var(--muted);font-weight:600;letter-spacing:.05em}
.job-row .arr{color:var(--blue-2);font-size:18px}
@media (max-width:880px){.job-row{grid-template-columns:1fr;gap:14px}.job-row .meta,.job-row .arr{display:none}}

.cta-banner{padding:120px 0;background:var(--blue-3);color:#fff;position:relative;overflow:hidden;border-top:6px solid var(--yellow);scroll-margin-top:80px}
.cta-banner::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 90% 10%,rgba(245,197,24,.18),transparent 40%),radial-gradient(circle at 5% 90%,rgba(0,0,0,.18),transparent 40%);pointer-events:none}
.cta-banner .grid{display:grid;grid-template-columns:1.2fr 1fr;gap:80px;align-items:end;position:relative}
.cta-banner h2{color:#fff;max-width:18ch}
.cta-banner h2 em{font-style:italic;color:var(--yellow);font-weight:300}
.cta-banner .lead{color:rgba(255,255,255,.85);max-width:42ch;margin-top:20px}
.cta-banner .contact-block{border-top:1px solid rgba(255,255,255,.3);padding-top:24px;display:grid;gap:0}
.cta-banner .contact-block .row{display:flex;gap:16px;align-items:baseline;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.18);padding:14px 0;font-size:14px}
.cta-banner .contact-block .row strong{font-family:var(--serif);font-weight:400;font-size:18px;font-style:italic;color:var(--yellow)}
.cta-banner .actions{margin-top:32px;display:flex;gap:14px;flex-wrap:wrap}
@media (max-width:880px){.cta-banner{padding:80px 0}.cta-banner .grid{grid-template-columns:1fr;gap:48px}}

/* Services dropdown nav */
.has-dropdown{position:relative}
.dropdown-trigger{display:flex;align-items:center;gap:6px;cursor:pointer;background:none;border:0;padding:10px 0;font:inherit;color:var(--ink-2);font-size:14px;font-weight:600;transition:color .2s}
.dropdown-trigger:hover{color:var(--blue-2)}
.dropdown-trigger::after{content:"▾";font-size:10px;transition:transform .25s ease;display:inline-block}
.has-dropdown:hover .dropdown-trigger::after,
.has-dropdown.open .dropdown-trigger::after,
.has-dropdown:focus-within .dropdown-trigger::after{transform:rotate(180deg)}
.dropdown-menu{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);min-width:300px;background:#fff;border:1px solid var(--rule);border-radius:8px;box-shadow:0 24px 48px -16px rgba(14,30,51,.18);padding:12px;display:none;z-index:100}
.has-dropdown:hover .dropdown-menu,
.has-dropdown.open .dropdown-menu,
.has-dropdown:focus-within .dropdown-menu{display:block}
.dropdown-menu::before{content:"";position:absolute;top:-6px;left:50%;transform:translateX(-50%) rotate(45deg);width:12px;height:12px;background:#fff;border-left:1px solid var(--rule);border-top:1px solid var(--rule)}
.dropdown-menu a{display:block;padding:11px 14px;font-size:13.5px;font-weight:500;color:var(--ink-2);border-radius:5px;transition:background .2s,color .2s;white-space:nowrap;cursor:pointer;text-decoration:none}
.dropdown-menu a:hover{background:var(--bg-2);color:var(--blue-2)}
.dropdown-menu a small{display:block;font-size:11px;color:var(--muted);font-weight:400;margin-top:2px;letter-spacing:0;text-transform:none}
.dropdown-menu .group-label{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--yellow-2);font-weight:700;padding:8px 14px 4px;font-family:var(--sans)}

/* Services overview grid */
.services-overview{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden}
.svc-card{background:var(--card);padding:32px 28px;display:flex;flex-direction:column;gap:10px;min-height:200px;transition:background .3s ease;cursor:pointer;text-decoration:none;color:inherit}
.svc-card:hover{background:var(--bg-2)}
.svc-card .svc-num{font-family:var(--serif);font-style:italic;font-size:13px;color:var(--yellow-2);letter-spacing:.04em;font-weight:500}
.svc-card h4{font-size:20px;font-family:var(--serif);font-weight:500;line-height:1.2}
.svc-card p{font-size:14px;color:var(--ink-2);line-height:1.5}
.svc-card .arr{margin-top:auto;padding-top:14px;font-size:13px;color:var(--blue-2);font-weight:600;border-top:1px solid var(--rule);transition:gap .25s,color .25s;display:flex;align-items:center;gap:8px}
.svc-card:hover .arr{gap:14px;color:var(--yellow-2)}
@media (max-width:1000px){.services-overview{grid-template-columns:1fr 1fr}}
@media (max-width:680px){.services-overview{grid-template-columns:1fr}}

/* Service section marker */
.svc-marker{display:inline-flex;align-items:center;gap:14px;font-family:var(--sans);font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--blue-2);margin-bottom:32px;padding-bottom:14px;border-bottom:1px solid var(--rule)}
.svc-marker .num{font-family:var(--serif);font-style:italic;font-size:24px;color:var(--yellow-2);font-weight:400;letter-spacing:0}
.svc-marker .of{color:var(--muted);font-weight:400}

/* Sub-section heading inside services */
.subhead{font-size:24px;font-family:var(--serif);font-weight:500;color:var(--blue-2);margin:64px 0 24px;padding-top:24px;border-top:1px solid var(--rule);letter-spacing:-.01em}
.subhead.first{border-top:0;padding-top:0;margin-top:48px}

/* Mobile menu services group */
.mobile-menu .svc-group{margin:8px 0;padding:8px 0;border-top:1px solid rgba(255,255,255,.18);border-bottom:1px solid rgba(255,255,255,.18)}
.mobile-menu .svc-group-label{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--yellow);font-weight:700;padding:10px 0 6px;display:block;font-family:var(--sans)}
.mobile-menu .svc-group a{font-family:var(--sans);font-size:16px;font-weight:500;padding:8px 0;border-bottom:0}


/* Multi-page additions */
.nav-links a.active{color:var(--blue-2)}
.nav-links a.active::after{content:"";position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--blue-2)}
.dropdown-trigger.active{color:var(--blue-2)}


/* ===== Homepage v2 sections ===== */

/* Trust badges */
.trust-band{padding:48px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);background:var(--bg-2)}
.trust-badges{display:grid;grid-template-columns:repeat(6,1fr);gap:24px;align-items:center}
.trust-badge{display:flex;align-items:center;gap:14px;color:var(--ink-2);min-width:0}
.trust-badge .icon{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;color:var(--blue-2);background:var(--blue-soft);font-family:var(--serif);font-style:italic;font-size:13px;font-weight:500;flex:0 0 auto;letter-spacing:-.02em}
.trust-badge strong{font-family:var(--serif);font-weight:500;font-size:14.5px;display:block;color:var(--ink);font-style:normal}
.trust-badge small{font-size:10.5px;color:var(--muted);letter-spacing:1px;text-transform:uppercase;font-weight:600;display:block;margin-top:2px}
@media (max-width:1100px){.trust-badges{grid-template-columns:repeat(3,1fr);gap:24px 32px}}
@media (max-width:600px){.trust-badges{grid-template-columns:1fr 1fr;gap:18px 16px}.trust-badge .icon{width:40px;height:40px;font-size:11px}}

/* Flagship callout */
.flagship-callout{padding:88px 0;background:linear-gradient(135deg,var(--ink) 0%,var(--blue-3) 100%);color:#fff;border-top:6px solid var(--yellow);position:relative;overflow:hidden}
.flagship-callout::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 90% 0%,rgba(245,197,24,.14),transparent 50%);pointer-events:none}
.flagship-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:60px;align-items:center;position:relative}
.flagship-callout h3{color:#fff;font-family:var(--serif);font-weight:400;font-size:clamp(28px,3vw,42px);line-height:1.05;letter-spacing:-.015em;max-width:14ch}
.flagship-callout p{color:rgba(255,255,255,.85);max-width:50ch}
.flagship-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;border-top:1px solid rgba(255,255,255,.18);padding-top:32px}
.flagship-stat .n{font-family:var(--serif);font-size:clamp(40px,4vw,56px);font-weight:300;line-height:1;color:#F5C518}
.flagship-stat .l{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,.85);margin-top:10px;font-weight:700}
@media (max-width:880px){.flagship-grid{grid-template-columns:1fr;gap:40px}.flagship-stats{grid-template-columns:1fr 1fr 1fr;gap:18px}}

/* How we engage */
.engage-process{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--rule);border-radius:6px;overflow:hidden;counter-reset:eng}
.engage-step{padding:36px 28px;background:var(--card);border-right:1px solid var(--rule);position:relative;transition:background .25s}
.engage-step:hover{background:var(--bg-2)}
.engage-step:last-child{border-right:0}
.engage-step::before{counter-increment:eng;content:counter(eng,decimal-leading-zero);font-family:var(--serif);font-style:italic;color:var(--yellow-2);font-size:32px;font-weight:300;display:block;margin-bottom:14px;letter-spacing:-.02em}
.engage-step h4{font-size:18px;font-family:var(--serif);font-weight:500;margin-bottom:10px}
.engage-step p{font-size:14px;color:var(--ink-2);line-height:1.5}
@media (max-width:1000px){.engage-process{grid-template-columns:1fr 1fr}.engage-step:nth-child(even){border-right:0}.engage-step:nth-child(-n+2){border-bottom:1px solid var(--rule)}}
@media (max-width:600px){.engage-process{grid-template-columns:1fr}.engage-step{border-right:0;border-bottom:1px solid var(--rule)}.engage-step:last-child{border-bottom:0}}

/* Logo grid (rotating) */
.logo-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:6px;overflow:hidden;transition:opacity .35s ease;min-height:160px}
.logo-cell{background:var(--card);padding:20px 14px;display:grid;place-items:center;text-align:center;font-family:var(--serif);font-style:italic;color:var(--ink-2);font-size:13px;line-height:1.2;min-height:80px;transition:background .25s}
.logo-cell:hover{background:var(--bg-2);color:var(--blue-2)}
.logo-cell.empty{background:var(--bg-2);opacity:.4}
.logo-grid.fading{opacity:.15}
.logo-grid-controls{display:flex;justify-content:space-between;align-items:center;margin-top:24px;flex-wrap:wrap;gap:12px}
.logo-grid-dots{display:flex;gap:8px}
.logo-dot{width:8px;height:8px;border-radius:50%;background:var(--rule-2);transition:background .25s,width .25s,border-radius .25s;cursor:pointer;border:0;padding:0}
.logo-dot.active{background:var(--blue-2);width:24px;border-radius:4px}
@media (max-width:1100px){.logo-grid{grid-template-columns:repeat(4,1fr)}}
@media (max-width:600px){.logo-grid{grid-template-columns:repeat(3,1fr)}.logo-cell{font-size:11.5px;min-height:64px;padding:14px 8px}}

/* Testimonials */
.testimonial-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.testimonial{background:var(--card);border:1px solid var(--rule);border-radius:6px;padding:36px 32px;display:flex;flex-direction:column;gap:20px;transition:transform .3s ease,box-shadow .3s ease}
.testimonial:hover{transform:translateY(-4px);box-shadow:0 24px 48px -32px rgba(14,30,51,.25)}
.testimonial .quote-mark{font-family:var(--serif);font-style:italic;font-size:72px;line-height:.4;color:var(--yellow);margin:0;height:24px}
.testimonial blockquote{font-family:var(--serif);font-style:italic;font-size:18px;line-height:1.45;color:var(--ink);margin:0;font-weight:400;letter-spacing:-.005em}
.testimonial cite{font-style:normal;font-size:11.5px;color:var(--muted);font-weight:600;margin-top:auto;padding-top:18px;border-top:1px solid var(--rule);letter-spacing:.06em;text-transform:uppercase}
.testimonial cite strong{display:block;color:var(--ink);font-family:var(--serif);font-style:italic;font-size:15.5px;font-weight:400;letter-spacing:0;margin-bottom:3px;text-transform:none}
.placeholder-note{margin-top:36px;text-align:center;font-size:12.5px;color:var(--muted);font-style:italic}
@media (max-width:880px){.testimonial-grid{grid-template-columns:1fr;gap:16px}}

/* Callback form */
.callback-form{background:linear-gradient(135deg,var(--blue-3) 0%,var(--blue-2) 100%);color:#fff;padding:56px 56px;border-radius:8px;display:grid;grid-template-columns:1.1fr 1fr;gap:60px;align-items:center;position:relative;overflow:hidden}
.callback-form::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 100% 0%,rgba(245,197,24,.16),transparent 50%);pointer-events:none}
.callback-form > *{position:relative}
.callback-form h3{color:#fff;font-size:clamp(26px,2.6vw,34px);line-height:1.15;font-family:var(--serif);font-weight:400}
.callback-form h3 em{color:var(--yellow);font-style:italic;font-weight:300}
.callback-form p{color:rgba(255,255,255,.85);margin-top:14px;max-width:38ch}
.callback-form p a{color:#F5C518;font-weight:600}
.callback-form input,.callback-form select{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.3);color:#fff}
.callback-form input::placeholder{color:rgba(255,255,255,.55)}
.callback-form input:focus,.callback-form select:focus{border-color:var(--yellow);box-shadow:0 0 0 3px rgba(245,197,24,.2);background:rgba(255,255,255,.15)}
.callback-form select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='%23ffffff'><polygon points='0,0 6,8 12,0'/></svg>");background-repeat:no-repeat;background-position:right 16px center;background-size:10px;padding-right:40px}
.callback-form select option{color:var(--ink);background:#fff}
.callback-form label{color:rgba(255,255,255,.85)}
.callback-form .submit-row .small{color:rgba(255,255,255,.65)}
@media (max-width:880px){.callback-form{grid-template-columns:1fr;padding:36px 28px;gap:24px}}


/* ===== Homepage v3 — image rich ===== */

/* Hero with background image (dark theme override) */
.hero.with-bg{
  background:
    linear-gradient(135deg, rgba(8,48,95,.78) 0%, rgba(14,30,51,.84) 100%),
    url('images/hero-bg.jpg') center/cover no-repeat;
  color:#fff;
  padding:96px 0 80px;
}
.hero.with-bg h1{color:#fff}
.hero.with-bg h1 .accent{color:var(--yellow);font-style:italic;font-weight:300}
.hero.with-bg .lead{color:rgba(255,255,255,.88)}
.hero.with-bg .meta{color:rgba(255,255,255,.7);border-bottom-color:rgba(255,255,255,.18)}
.hero.with-bg .meta span:first-child{color:var(--yellow)}
.hero.with-bg .loop-strip{
  border-top-color:rgba(255,255,255,.18);
  border-bottom-color:rgba(255,255,255,.18);
  color:rgba(255,255,255,.85);
  background:rgba(0,0,0,.18);
  padding:28px 24px;
  border-radius:6px;
}
.hero.with-bg .loop-strip .line{background:rgba(255,255,255,.3)}
.hero.with-bg .loop-strip .return{color:var(--yellow)}
.hero.with-bg .loop-strip .dot{background:#fff}
.hero.with-bg .loop-strip .dot.y{background:var(--yellow);box-shadow:0 0 0 4px rgba(245,197,24,.18)}
.hero.with-bg .btn.ghost{border-color:rgba(255,255,255,.5);color:#fff;background:transparent}
.hero.with-bg .btn.ghost:hover{background:#fff;color:var(--blue-2)}
.hero.with-bg .link-arrow{color:var(--yellow);border-color:var(--yellow)}
.hero.with-bg .link-arrow:hover{color:#fff;border-color:#fff}
.hero.with-bg .btn{background:var(--yellow);color:var(--ink);border-color:var(--yellow)}
.hero.with-bg .btn:hover{background:var(--yellow-2);border-color:var(--yellow-2)}

/* Project card visuals — photo support */
.project-card .visual.has-photo{background-size:cover;background-position:center;background-repeat:no-repeat}
.project-card .visual.has-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 30%,rgba(0,0,0,.55) 100%);pointer-events:none}
.project-card .visual.has-photo .pill{position:relative;z-index:1}

.featured-card.has-photo{background-size:cover !important;background-position:center !important}
.featured-card.has-photo::before{background:linear-gradient(to right, rgba(4,20,38,.78) 0%, rgba(4,20,38,.35) 55%, rgba(4,20,38,.15) 100%), linear-gradient(to bottom, rgba(4,20,38,.15) 0%, rgba(4,20,38,.55) 100%) !important}

/* Flagship callout image side */
.flagship-image{aspect-ratio:3/2;border-radius:6px;overflow:hidden;background-size:cover;background-position:center;background-image:url('images/flagship.jpg');position:relative}
.flagship-image::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(8,48,95,.25) 0%,rgba(14,30,51,.35) 100%);pointer-events:none}

/* Products deployed gallery */
.products-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.product-card{background:var(--card);border:1px solid var(--rule);border-radius:6px;overflow:hidden;display:flex;flex-direction:column;transition:transform .3s ease,box-shadow .3s ease}
.product-card:hover{transform:translateY(-4px);box-shadow:0 24px 48px -32px rgba(14,30,51,.25)}
.product-card .photo{aspect-ratio:4/3;background-size:cover;background-position:center;background-repeat:no-repeat;position:relative;overflow:hidden}
.product-card .photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 50%,rgba(0,0,0,.45) 100%);pointer-events:none}
.product-card .photo .badge{position:absolute;top:14px;left:14px;background:rgba(255,255,255,.92);color:var(--ink);font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:5px 10px;border-radius:999px;backdrop-filter:blur(4px);z-index:1}
.product-card .body{padding:24px;display:flex;flex-direction:column;gap:8px;flex:1}
.product-card h4{font-size:20px;font-family:var(--serif);font-weight:500;letter-spacing:-.005em}
.product-card p{font-size:14px;color:var(--ink-2);line-height:1.5}
.product-card .meta-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:auto;padding-top:14px;border-top:1px solid var(--rule);font-size:11px;color:var(--muted);font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.product-card .meta-row span+span::before{content:"·";margin-right:6px;color:var(--rule-3)}
@media (max-width:1000px){.products-gallery{grid-template-columns:1fr 1fr;gap:18px}}
@media (max-width:680px){.products-gallery{grid-template-columns:1fr}}

/* Featured project photo handler */
.featured-card.has-photo h3,
.featured-card.has-photo .pill,
.featured-card.has-photo .meta{position:relative;z-index:1}


/* ===== Homepage v4 — tighter spacing + image-rich ===== */

/* Tighter section padding across the site */
.section{padding:80px 0}
.section.tight{padding:64px 0}
.positioning{padding:80px 0}
.featured{padding:88px 0}
.cta-banner{padding:80px 0}
.flagship-callout{padding:72px 0}
.stats{padding:64px 0}
.trust-band{padding:36px 0}
.hero.with-bg{padding:80px 0 64px}

@media (max-width:880px){
  .section{padding:56px 0}
  .section.tight{padding:48px 0}
  .positioning{padding:56px 0}
  .featured{padding:64px 0}
  .cta-banner{padding:64px 0}
  .flagship-callout{padding:56px 0}
  .stats{padding:48px 0}
  .trust-band{padding:28px 0}
}

/* Tighter section-head spacing */
.sec-head{gap:40px;margin-bottom:44px;padding-bottom:20px}
@media (max-width:880px){.sec-head{gap:20px;margin-bottom:32px}}
.subhead{margin:48px 0 20px;padding-top:20px}
.subhead.first{margin-top:32px}

/* Hero internal grid spacing */
.hero .grid{gap:48px}
.hero .meta{margin-bottom:36px}
.loop-strip{margin-top:48px;padding:20px 0}

/* Flagship callout — now image on right (override v2 grid) */
.flagship-grid{grid-template-columns:1.05fr 1fr;gap:48px}
.flagship-image{aspect-ratio:4/3;border-radius:6px;overflow:hidden;background-size:cover;background-position:center;background-image:url('images/flagship.jpg');position:relative;border:1px solid rgba(255,255,255,.18)}
.flagship-image::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(8,48,95,.20) 0%,rgba(14,30,51,.30) 100%);pointer-events:none}
.flagship-stats-inline{display:grid;grid-template-columns:repeat(3,auto);gap:32px;margin-top:28px;padding-top:24px;border-top:1px solid rgba(255,255,255,.18)}
.flagship-stats-inline .n{font-family:var(--serif);font-size:36px;font-weight:300;line-height:1;color:#F5C518}
.flagship-stats-inline .l{font-size:10.5px;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,.85);margin-top:8px;font-weight:700}
@media (max-width:880px){
  .flagship-grid{grid-template-columns:1fr;gap:32px}
  .flagship-image{aspect-ratio:16/10}
  .flagship-stats-inline{grid-template-columns:repeat(3,1fr);gap:16px}
  .flagship-stats-inline .n{font-size:30px}
}

/* Service overview cards — now have photo thumbnails */
.svc-card{padding:0;overflow:hidden}
.svc-thumb{aspect-ratio:5/3;background-size:cover;background-position:center;background-repeat:no-repeat;border-bottom:1px solid var(--rule);position:relative}
.svc-thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 60%,rgba(0,0,0,.35) 100%);pointer-events:none}
.svc-body{padding:24px 24px 22px;display:flex;flex-direction:column;gap:8px;flex:1;min-height:160px}
.svc-body .arr{margin-top:auto;padding-top:14px;font-size:13px;color:var(--blue-2);font-weight:600;border-top:1px solid var(--rule);transition:gap .25s,color .25s;display:flex;align-items:center;gap:8px}
.svc-card:hover .arr{gap:14px;color:var(--yellow-2)}

/* "Behind the build" wide band */
.build-band{padding:120px 0;color:#fff;background:linear-gradient(135deg,rgba(8,48,95,.78) 0%,rgba(14,30,51,.88) 100%),url('images/build-band.jpg') center/cover no-repeat;border-top:6px solid var(--yellow);border-bottom:6px solid var(--yellow);position:relative;overflow:hidden}
.build-band::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 90% 0%,rgba(245,197,24,.12),transparent 50%);pointer-events:none}
.build-band .container{position:relative}
.build-band .grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.build-band h2{color:#fff;max-width:18ch}
.build-band h2 em{color:var(--yellow);font-style:italic;font-weight:300}
.build-band .lead{color:rgba(255,255,255,.88);max-width:50ch;margin-top:16px}
.build-band ul{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:10px}
.build-band ul li{display:flex;gap:12px;align-items:flex-start;color:rgba(255,255,255,.9);font-size:14.5px}
.build-band ul li::before{content:"";flex:0 0 auto;width:6px;height:6px;border-radius:50%;background:var(--yellow);margin-top:8px}
.build-band .actions{margin-top:28px;display:flex;gap:14px;flex-wrap:wrap}
.build-band-stats{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.build-band-stat{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);border-radius:6px;padding:24px;backdrop-filter:blur(4px)}
.build-band-stat .n{font-family:var(--serif);font-size:40px;font-weight:300;line-height:1;color:#F5C518}
.build-band-stat .l{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:#fff;margin-top:8px;font-weight:700}
.build-band-stat .desc{font-size:13px;color:rgba(255,255,255,.78);margin-top:8px}
@media (max-width:880px){
  .build-band{padding:80px 0}
  .build-band .grid{grid-template-columns:1fr;gap:40px}
}

/* Trust band slightly tighter */
.trust-badges{gap:18px}


/* ===== Homepage v5 — animations ===== */

/* Hero word reveal */
.hero-headline .word{display:inline-block;opacity:0;transform:translateY(40px) scale(.96);transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1);will-change:opacity,transform}
.hero-headline .word.reveal-word{opacity:1;transform:none}
.hero .lead,.hero .hero-actions,.hero .loop-strip,.hero .meta{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s ease}
.hero .meta.reveal-fade,.hero .lead.reveal-fade,.hero .hero-actions.reveal-fade,.hero .loop-strip.reveal-fade{opacity:1;transform:none}

/* Sticky nav scroll behaviour */
nav.primary{transition:transform .35s cubic-bezier(.4,0,.2,1),box-shadow .3s ease,background-color .3s ease,padding .3s ease}
nav.primary.scrolled{background:rgba(251,250,246,.98);box-shadow:0 2px 18px rgba(14,30,51,.07)}
nav.primary.scrolled .inner{padding:10px 0}
nav.primary.hidden{transform:translateY(-100%)}

/* SVG loop diagram path drawing */
.loop-diagram svg path[stroke]{stroke-dasharray:1500;stroke-dashoffset:1500;transition:stroke-dashoffset 2.2s cubic-bezier(.5,0,.2,1)}
.loop-diagram svg.animate-loop path[stroke]{stroke-dashoffset:0}
.loop-diagram svg.animate-loop path[stroke]:nth-of-type(2){transition-delay:.35s}
.loop-diagram svg.animate-loop path[stroke]:nth-of-type(3){transition-delay:.7s}
.loop-diagram svg.animate-loop path[stroke]:nth-of-type(4){transition-delay:1.05s}

/* Cards: 3D tilt prep + smoother transform */
.svc-card,.product-card,.project-card{transition:transform .25s ease,box-shadow .3s ease;transform-style:preserve-3d;will-change:transform}

/* Image fade-in on load */
.product-card .photo,.project-card .visual.has-photo,.featured-card.has-photo,.flagship-image,.svc-thumb,.build-band{opacity:0;transition:opacity .7s ease}
.product-card .photo.loaded,.project-card .visual.has-photo.loaded,.featured-card.has-photo.loaded,.flagship-image.loaded,.svc-thumb.loaded,.build-band.loaded{opacity:1}

/* Logo grid cell fade between batches (override v2) */
.logo-grid{transition:opacity .45s ease}

/* Subtle pulse for closed-loop yellow dot in hero strip */
.loop-strip .dot.y{animation:pulseY 2.4s ease-in-out infinite}
@keyframes pulseY{0%,100%{box-shadow:0 0 0 4px rgba(245,197,24,.18)}50%{box-shadow:0 0 0 9px rgba(245,197,24,0)}}

/* Stats numbers — counting-up smoothness */
.stats .stat .num,.flagship-stats-inline .n{font-variant-numeric:tabular-nums}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  .hero-headline .word,.hero .lead,.hero .hero-actions,.hero .loop-strip,.hero .meta{opacity:1 !important;transform:none !important;transition:none !important}
  .loop-diagram svg path[stroke]{stroke-dasharray:none !important;stroke-dashoffset:0 !important}
  nav.primary.hidden{transform:none !important}
  .product-card .photo,.project-card .visual.has-photo,.featured-card.has-photo,.flagship-image,.svc-thumb,.build-band{opacity:1 !important}
  .loop-strip .dot.y{animation:none !important}
}


/* ===== Homepage v6 — rich hover + animations ===== */

/* Scroll progress bar (fixed) */
.scroll-progress{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--blue-2) 0%,var(--blue-3) 40%,var(--yellow) 100%);z-index:200;pointer-events:none;transition:width .1s linear;box-shadow:0 0 8px rgba(245,197,24,.5)}

/* Photo zoom layer (added by JS — wraps the bg image) */
.zoom-wrap{position:absolute;inset:0;overflow:hidden;z-index:0}
.zoom-layer{position:absolute;inset:0;background-size:cover;background-position:center;background-repeat:no-repeat;transition:transform .8s cubic-bezier(.2,.8,.2,1);will-change:transform}
.svc-card:hover .zoom-layer,
.product-card:hover .zoom-layer,
.project-card:hover .zoom-layer,
.featured-card.has-photo:hover .zoom-layer{transform:scale(1.08)}

/* Hover overlay on product/project cards (added by JS) */
.hover-overlay{position:absolute;inset:0;background:linear-gradient(135deg,rgba(8,48,95,.92) 0%,rgba(14,30,51,.94) 100%);display:grid;place-items:center;opacity:0;transition:opacity .35s ease;color:#fff;font-family:var(--serif);font-style:italic;font-size:20px;z-index:3;pointer-events:none;letter-spacing:-.005em}
.hover-overlay::after{content:"";position:absolute;inset:0;border:1px solid rgba(245,197,24,.4);transform:scale(.92);opacity:0;transition:transform .4s ease,opacity .35s ease}
.hover-overlay span{transform:translateY(12px);transition:transform .4s ease;display:flex;align-items:center;gap:10px}
.hover-overlay span::after{content:"→";color:var(--yellow);transition:transform .3s ease}
.product-card:hover .hover-overlay,
.project-card:hover .hover-overlay{opacity:1}
.product-card:hover .hover-overlay::after,
.project-card:hover .hover-overlay::after{transform:scale(1);opacity:1}
.product-card:hover .hover-overlay span,
.project-card:hover .hover-overlay span{transform:none}
.product-card:hover .hover-overlay span::after,
.project-card:hover .hover-overlay span::after{transform:translateX(6px)}

/* Section card stagger entry (set initial state) */
.section .svc-card,.section .product-card,.section .project-card,.section .why-card,.section .feat,.section .testimonial,.section .ind,.featured .featured-card,.engage-process .engage-step,.flagship-callout .flagship-stat,.build-band .build-band-stat,.stats .stat,.specs .row{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1)}
.staggered-in{opacity:1 !important;transform:none !important}

/* Trust badge hover */
.trust-badge{transition:transform .3s cubic-bezier(.5,1.5,.5,1)}
.trust-badge:hover{transform:translateY(-4px)}
.trust-badge .icon{transition:transform .4s cubic-bezier(.5,1.5,.5,1),background .3s ease,color .3s ease,box-shadow .3s ease}
.trust-badge:hover .icon{transform:scale(1.12) rotate(-8deg);background:var(--yellow-soft);color:var(--yellow-2);box-shadow:0 8px 24px -6px rgba(245,197,24,.5)}

/* Why-us cards: stronger hover */
.why-card{position:relative;overflow:hidden}
.why-card .num{transition:color .3s ease,transform .45s cubic-bezier(.5,1.5,.5,1);display:inline-block}
.why-card:hover .num{color:var(--blue-2);transform:translateX(6px) scale(1.1)}
.why-card::after{content:"";position:absolute;bottom:0;left:0;width:0;height:3px;background:linear-gradient(90deg,var(--yellow) 0%,var(--yellow-2) 100%);transition:width .55s cubic-bezier(.2,.8,.2,1)}
.why-card:hover::after{width:100%}
.why-card h3{transition:color .3s ease}
.why-card:hover h3{color:var(--blue-2)}

/* Engage steps: stronger hover */
.engage-step{position:relative;overflow:hidden}
.engage-step::before{transition:color .3s ease,transform .45s cubic-bezier(.5,1.5,.5,1)}
.engage-step:hover::before{color:var(--yellow-2);transform:translateX(6px)}
.engage-step::after{content:"";position:absolute;bottom:0;left:0;width:0;height:3px;background:linear-gradient(90deg,var(--yellow) 0%,var(--yellow-2) 100%);transition:width .55s cubic-bezier(.2,.8,.2,1)}
.engage-step:hover::after{width:100%}

/* Cursor glow on dark sections (added by JS) */
.cursor-glow{position:absolute;width:480px;height:480px;border-radius:50%;background:radial-gradient(circle,rgba(245,197,24,.20) 0%,rgba(245,197,24,.06) 35%,transparent 70%);pointer-events:none;transform:translate(-50%,-50%);opacity:0;transition:opacity .35s ease;z-index:1;filter:blur(20px);will-change:left,top}
.hero.with-bg .cursor-glow,.build-band .cursor-glow,.flagship-callout .cursor-glow,.featured .cursor-glow,.cta-banner .cursor-glow{display:block}

/* Particles in hero (added by JS) */
.particles{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:1}
.particle{position:absolute;width:5px;height:5px;border-radius:50%;background:rgba(245,197,24,.6);box-shadow:0 0 12px rgba(245,197,24,.4);animation:floatUp linear infinite;opacity:0}
.particle.small{width:3px;height:3px;background:rgba(255,255,255,.5)}
@keyframes floatUp{
  0%{transform:translateY(0) scale(0);opacity:0}
  10%{opacity:.8;transform:scale(1)}
  90%{opacity:.6}
  100%{transform:translateY(-110vh) scale(0);opacity:0}
}

/* Shimmer sweep on buttons */
.btn{position:relative;overflow:hidden}
.btn::before{content:"";position:absolute;top:0;left:-120%;width:100%;height:100%;background:linear-gradient(110deg,transparent 0%,transparent 35%,rgba(255,255,255,.35) 50%,transparent 65%,transparent 100%);transition:left .8s cubic-bezier(.2,.8,.2,1);pointer-events:none;z-index:1}
.btn:hover::before{left:120%}
.btn > *{position:relative;z-index:2}
.btn.yellow::before{background:linear-gradient(110deg,transparent 0%,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%,transparent 100%)}

/* Magnetic button effect — handled in JS, but transition prep */
.btn{transition:transform .25s cubic-bezier(.2,.8,.2,1),background .25s ease,color .25s ease,border-color .25s ease,box-shadow .3s ease}
.btn.yellow:hover{box-shadow:0 12px 32px -8px rgba(245,197,24,.5)}
.btn:not(.yellow):not(.ghost):not(.outline-light):hover{box-shadow:0 12px 32px -8px rgba(15,69,133,.4)}

/* Footer link underline draw */
footer.site ul a,.cta-banner a{position:relative;display:inline-block}
footer.site ul a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:1px;background:var(--yellow);transition:width .35s cubic-bezier(.2,.8,.2,1)}
footer.site ul a:hover::after{width:100%}

/* Nav links underline draw */
.nav-links a:not(.btn){position:relative}
.nav-links a:not(.btn)::after{content:"";position:absolute;left:0;bottom:6px;width:0;height:2px;background:var(--blue-2);transition:width .3s cubic-bezier(.2,.8,.2,1)}
.nav-links a:not(.btn):hover::after,.nav-links a.active::after{width:calc(100% - 0px)}
.dropdown-trigger{position:relative}
.dropdown-trigger::before{content:"";position:absolute;left:0;bottom:6px;width:0;height:2px;background:var(--blue-2);transition:width .3s cubic-bezier(.2,.8,.2,1)}
.has-dropdown:hover .dropdown-trigger::before,.dropdown-trigger.active::before{width:100%}

/* Loop strip dots: hover effect */
.loop-strip .dot{transition:transform .35s cubic-bezier(.5,1.5,.5,1),box-shadow .3s ease;cursor:default}
.loop-strip .dot:hover{transform:scale(1.5)}
.loop-strip .dot.y:hover{box-shadow:0 0 0 12px rgba(245,197,24,.25)}

/* Service card thumbnails: caption shift on card hover */
.svc-card{position:relative;overflow:hidden}
.svc-card .svc-body{transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.svc-card:hover .svc-body{transform:translateY(-4px)}
.svc-card .svc-num{transition:color .3s ease}
.svc-card:hover .svc-num{color:var(--blue-2)}

/* Industry tile hover */
.ind{transition:background .3s ease,transform .3s ease;position:relative}
.ind::before{content:"";position:absolute;left:0;top:0;width:3px;height:0;background:var(--yellow);transition:height .4s cubic-bezier(.2,.8,.2,1)}
.ind:hover::before{height:100%}
.ind:hover{background:var(--card)}
.ind .num{transition:color .3s ease,transform .35s cubic-bezier(.5,1.5,.5,1);display:inline-block}
.ind:hover .num{color:var(--blue-2);transform:translateX(4px)}

/* Testimonial hover effect */
.testimonial{position:relative;overflow:hidden}
.testimonial .quote-mark{transition:transform .45s cubic-bezier(.5,1.5,.5,1),color .3s ease}
.testimonial:hover .quote-mark{transform:scale(1.15) rotate(-4deg);color:var(--yellow-2)}
.testimonial::before{content:"";position:absolute;top:0;left:0;right:0;height:0;background:linear-gradient(90deg,var(--yellow) 0%,var(--yellow-2) 100%);transition:height .35s ease}
.testimonial:hover::before{height:3px}

/* Job row hover */
.job-row{position:relative;overflow:hidden}
.job-row .arr{transition:transform .35s cubic-bezier(.5,1.5,.5,1)}
.job-row:hover .arr{transform:translate(6px,-6px) scale(1.2);color:var(--yellow-2)}

/* Logo grid cell hover */
.logo-cell{transition:background .25s ease,color .25s ease,transform .35s cubic-bezier(.5,1.5,.5,1)}
.logo-cell:hover{transform:scale(1.04);color:var(--blue-2);background:var(--card)}

/* Stats: number hover scale */
.stats .stat{transition:transform .35s cubic-bezier(.5,1.5,.5,1)}
.stats .stat:hover{transform:translateY(-6px)}
.stats .stat .num{transition:color .3s ease}
.stats .stat:hover .num{color:var(--yellow)}

/* Flagship stat hover */
.flagship-stat{transition:transform .35s cubic-bezier(.5,1.5,.5,1)}
.flagship-stat:hover{transform:translateY(-4px)}

/* Featured-card hover */
.featured-card{transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease}
.featured-card:hover{transform:translateY(-6px) scale(1.005);box-shadow:0 32px 64px -16px rgba(8,48,95,.45)}

/* Build-band stat cards hover */
.build-band-stat{transition:transform .35s cubic-bezier(.5,1.5,.5,1),background .3s ease,border-color .3s ease}
.build-band-stat:hover{transform:translateY(-4px);background:rgba(245,197,24,.10);border-color:rgba(245,197,24,.45)}

/* Brand mark logo subtle hover */
.brand-mark{transition:transform .25s cubic-bezier(.5,1.5,.5,1)}
.brand-mark:hover{transform:scale(1.04)}

/* Scroll-up reveal — for hero loop strip dots */
.loop-strip span:not(.dot):not(.line){transition:color .3s ease}
.loop-strip:hover span:not(.dot):not(.line){color:rgba(255,255,255,.95)}

/* CTA banner button hover */
.cta-banner .btn.outline-light{transition:all .3s cubic-bezier(.2,.8,.2,1)}
.cta-banner .btn.outline-light:hover{transform:translateY(-2px) scale(1.02);background:#fff;color:var(--blue-2);box-shadow:0 12px 32px -8px rgba(0,0,0,.4)}

/* Smooth photo loading state on cards */
.svc-card,.product-card,.project-card,.featured-card,.flagship-image{contain:layout paint}

/* Reduced motion overrides for v7 */
@media (prefers-reduced-motion:reduce){
  .zoom-layer,.cursor-glow,.particle,.scroll-progress{transition:none !important;animation:none !important}
  .section .svc-card,.section .product-card,.section .project-card,.section .why-card,.section .feat,.section .testimonial,.section .ind,.featured .featured-card,.engage-process .engage-step,.flagship-callout .flagship-stat,.build-band .build-band-stat,.stats .stat,.specs .row{opacity:1 !important;transform:none !important}
  .hover-overlay,.particles,.cursor-glow{display:none !important}
}


/* ===== Site v7 — page strip + legal pages ===== */

.page-strip{position:relative;height:280px;background-size:cover;background-position:center;border-bottom:4px solid var(--yellow);overflow:hidden}
.page-strip::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(8,48,95,.55) 0%,rgba(14,30,51,.7) 100%);z-index:1}
.page-strip .container{position:relative;z-index:2;height:100%;display:flex;align-items:flex-end;padding-bottom:30px;padding-top:30px}
.page-strip .label{font-family:var(--serif);font-size:34px;font-style:italic;font-weight:400;color:var(--yellow);letter-spacing:-.01em;line-height:1.1}
@media (max-width:880px){.page-strip{height:200px}.page-strip .label{font-size:24px}.page-strip .container{padding-bottom:22px;padding-top:22px}}

.legal-content{max-width:800px;margin:0 auto;font-size:16px;line-height:1.7;color:var(--ink-2)}
.legal-content h2{font-size:clamp(36px,4.5vw,56px);font-family:var(--serif);color:var(--ink);font-weight:500;letter-spacing:-.015em;line-height:1.05}
.legal-content h3{font-size:22px;margin-top:40px;margin-bottom:8px;color:var(--blue-2);font-family:var(--serif);font-weight:500;letter-spacing:-.005em}
.legal-content p{margin-top:14px}
.legal-content ul{margin-top:12px;padding-left:22px}
.legal-content ul li{margin-top:8px}
.legal-content a{color:var(--blue-2);border-bottom:1px solid var(--blue-2);text-decoration:none;transition:color .25s ease}
.legal-content a:hover{color:var(--yellow-2);border-bottom-color:var(--yellow-2)}
.legal-content .lead-meta{font-size:14px;color:var(--muted);margin-top:14px;font-style:italic}
.legal-content .legal-banner{margin:28px 0 36px;padding:18px 22px;background:var(--yellow-soft);border-left:4px solid var(--yellow);border-radius:4px;font-size:14px;color:var(--ink);line-height:1.55}
.legal-content strong{color:var(--ink);font-weight:700}


/* =====================================================
   Site v9 — final touchups
   ----------------------------------------------------- */

/* --- Tighter section rhythm across the whole site --- */
.section{padding:64px 0}
.section.tight{padding:48px 0}
.positioning{padding:64px 0}
.featured{padding:64px 0}
.cta-banner{padding:64px 0}
.flagship-callout{padding:56px 0}
.stats{padding:56px 0}
.trust-band{padding:30px 0}
.hero.with-bg{padding:72px 0 56px}

.sec-head{margin-bottom:40px;gap:48px;padding-bottom:20px}
.sec-head h2{font-size:clamp(34px,4vw,52px)}
.sec-head .lead{margin-top:14px;font-size:17px}

@media (max-width:880px){
  .section{padding:48px 0}
  .section.tight{padding:36px 0}
  .positioning{padding:48px 0}
  .featured{padding:48px 0}
  .cta-banner{padding:48px 0}
  .flagship-callout{padding:40px 0}
  .stats{padding:40px 0}
  .trust-band{padding:22px 0}
  .hero.with-bg{padding:48px 0 36px}
  .sec-head{margin-bottom:28px;gap:24px}
}

/* --- Tighter breadcrumb top padding (was 28px) --- */
section[style*="padding:28px 0 0;background:var(--bg)"]{padding:20px 0 0 !important}

/* --- Page-strip gets a touch less height to match new rhythm --- */
.page-strip{height:240px}
@media (max-width:880px){.page-strip{height:170px}.page-strip .label{font-size:22px}}

/* --- Leader card: fix name/designation overlap & spacing --- */
.leaders-grid{gap:24px}
.leader{padding:24px;gap:14px}
.leader > div:last-child{display:flex;flex-direction:column;gap:0}
.leader h4{font-size:22px;line-height:1.2;margin:0}
.leader .role{margin-top:6px;margin-bottom:0;font-size:11px;letter-spacing:.16em;line-height:1.4}
.leader p:last-child{margin-top:12px;font-size:14px;line-height:1.55;color:var(--ink-2)}
.leader .portrait{aspect-ratio:5/4}
.leader .portrait .initials{font-size:64px}

/* --- Tighter stats band on team page (.section.blue with grid-4) --- */
.section.blue .grid-4{gap:18px}
.section.blue .grid-4 > div{padding:28px 18px}
.section.blue .grid-4 > div > div:first-child{font-size:54px !important}

/* --- Card grid spacing harmony --- */
.grid-3{gap:24px}
.grid-4{gap:20px}

/* --- Hero meta strip a little quieter --- */
.hero .meta{margin-bottom:36px;font-size:11px}

/* --- Footer breathing room reduction --- */
footer.site{padding:56px 0 28px}
@media (max-width:880px){footer.site{padding:40px 0 24px}}


/* =====================================================
   Site v10 — section rhythm + sec-head alignment
   Fixes: stacked sections too airy, sec-head columns
   creating visual misalignment with content below.
   ===================================================== */

/* --- 1) MORE AGGRESSIVE section padding reduction --- */
.section{padding:48px 0}
.section.tight{padding:36px 0}
.positioning{padding:48px 0}
.featured{padding:48px 0}
.cta-banner{padding:56px 0}
.flagship-callout{padding:44px 0}
.stats{padding:44px 0}
.trust-band{padding:24px 0}
.hero.with-bg{padding:64px 0 48px}

/* --- 2) Collapse top-padding when sections stack consecutively --- */
.section + .section{padding-top:16px}

/* But keep proper separation when bg color changes (alt/blue/dark) */
.section + .section.alt,
.section.alt + .section,
.section + .section.blue,
.section.blue + .section,
.section + .section.dark,
.section.dark + .section{padding-top:48px}

/* --- 3) Page-strip → section gap is also tighter --- */
.page-strip + .section{padding-top:36px}

/* --- 4) sec-head: stack into single column, left-align everything ---
   The 2-column eyebrow|headline layout left a visual gap that made
   the content below appear to "drift left" relative to the headline.
   Stacking it (eyebrow on top, headline below) means everything in
   the section aligns to the same left edge. */
.sec-head{
  display:block;
  margin-bottom:32px;
  padding-bottom:18px;
  max-width:920px;
}
.sec-head .eyebrow{display:block;margin-bottom:12px}
.sec-head h2{font-size:clamp(32px,3.6vw,48px);line-height:1.1}
.sec-head .lead{margin-top:14px;font-size:17px;max-width:72ch}
.sec-head > div{display:block}

/* Mobile: keep stacked + tighter */
@media (max-width:880px){
  .section{padding:36px 0}
  .section.tight{padding:28px 0}
  .positioning{padding:36px 0}
  .featured{padding:36px 0}
  .cta-banner{padding:40px 0}
  .flagship-callout{padding:32px 0}
  .stats{padding:32px 0}
  .trust-band{padding:20px 0}
  .hero.with-bg{padding:40px 0 28px}
  .sec-head{margin-bottom:24px}
  .sec-head h2{font-size:clamp(28px,5vw,38px)}
}


/* =====================================================
   Site v11 — service-card padding fix + tighter stacked sections
   ===================================================== */

/* --- 1) SERVICE CARD PADDING FIX ---
   The earlier override `.svc-card{padding:0}` was meant for the
   homepage image-card variant (which has a .svc-thumb at top and
   a .svc-body wrapper that supplies its own padding).
   On services.html the cards are text-only — no thumb, no body
   wrapper — so they were jamming content into the corner.
   Restore proper interior padding for cards that DON'T have a
   thumbnail. */
.svc-card:not(:has(.svc-thumb)){
  padding:32px 28px;
  display:flex;
  flex-direction:column;
  gap:10px;
  min-height:200px;
}
.svc-card:not(:has(.svc-thumb)) .svc-num{
  font-family:var(--serif);font-style:italic;font-size:13px;
  color:var(--yellow-2);letter-spacing:.04em;font-weight:500;
}
.svc-card:not(:has(.svc-thumb)) h4{
  font-size:20px;font-family:var(--serif);font-weight:500;line-height:1.2;
  margin:0;
}
.svc-card:not(:has(.svc-thumb)) p{
  font-size:14px;color:var(--ink-2);line-height:1.5;margin:0;
}
.svc-card:not(:has(.svc-thumb)) .arr{
  margin-top:auto;padding-top:14px;font-size:13px;
  color:var(--blue-2);font-weight:600;
  border-top:1px solid var(--rule);
  transition:gap .25s,color .25s;
  display:flex;align-items:center;gap:8px;
}

/* --- 2) TIGHTER STACKED SECTIONS ---
   When two .section blocks stack with no background change between
   them, eliminate the top padding of the second AND reduce the
   bottom padding of the first. The earlier 16px top + 48px bottom
   was still ~64px of air between the sections. */
.section + .section{padding-top:0}

/* The first section gets reduced bottom padding ONLY when the next
   sibling is another regular .section (not alt/blue/dark — those
   need full padding for proper colored-band separation). */
.section:has(+ .section:not(.alt):not(.blue):not(.dark)){padding-bottom:24px}

/* Mobile: same treatment, slightly tighter */
@media (max-width:880px){
  .section:has(+ .section:not(.alt):not(.blue):not(.dark)){padding-bottom:16px}
  .svc-card:not(:has(.svc-thumb)){padding:24px 22px;min-height:auto}
}


/* =====================================================
   Site v12 — real client logos + certifications
   ===================================================== */

/* --- Image-based logo cells (homepage rotating grid) --- */
.logo-cell{padding:16px 12px;min-height:88px}
.logo-cell img{max-width:100%;max-height:60px;width:auto;height:auto;
  object-fit:contain;display:block;
  filter:grayscale(60%) opacity(0.78);
  transition:filter .3s ease,transform .3s ease}
.logo-cell:hover img{filter:grayscale(0%) opacity(1);transform:scale(1.06)}
@media (max-width:600px){
  .logo-cell{min-height:72px;padding:12px 8px}
  .logo-cell img{max-height:48px}
}

/* --- Partners page client grid (static, all logos visible) --- */
.client-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:1px;
  background:var(--rule);
  border:1px solid var(--rule);
  border-radius:6px;
  overflow:hidden;
}
.client-cell{
  background:var(--card);
  padding:24px 18px;
  display:grid;
  place-items:center;
  min-height:120px;
  transition:background .25s ease;
}
.client-cell:hover{background:var(--bg-2)}
.client-cell img{
  max-width:100%;max-height:72px;width:auto;height:auto;
  object-fit:contain;display:block;
  filter:grayscale(35%) opacity(0.88);
  transition:filter .3s ease,transform .3s ease
}
.client-cell:hover img{filter:grayscale(0%) opacity(1);transform:scale(1.05)}
@media (max-width:1100px){.client-grid{grid-template-columns:repeat(4,1fr)}}
@media (max-width:680px){.client-grid{grid-template-columns:repeat(3,1fr)}.client-cell{padding:18px 12px;min-height:96px}}
@media (max-width:420px){.client-grid{grid-template-columns:repeat(2,1fr)}}

/* --- Certs grid: square tiles, name caption underneath --- */
.cert-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:24px;
}
.cert-cell{
  background:var(--card);
  border:1px solid var(--rule);
  border-radius:8px;
  padding:24px 18px 20px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;
}
.cert-cell:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 36px -28px rgba(14,30,51,.25);
  border-color:var(--yellow);
}
.cert-cell .cert-img{
  width:100%;
  aspect-ratio:1/1;
  display:grid;place-items:center;
  background:#fff;
  border-radius:6px;
  padding:12px;
  border:1px solid var(--rule-2,rgba(14,30,51,.06));
}
.cert-cell .cert-img img{
  max-width:100%;max-height:100%;width:auto;height:auto;
  object-fit:contain;display:block
}
.cert-cell .cert-label{
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink-2);
  font-weight:700;
  text-align:center;
  line-height:1.35;
}
@media (max-width:1000px){.cert-grid{grid-template-columns:repeat(4,1fr);gap:18px}}
@media (max-width:760px){.cert-grid{grid-template-columns:repeat(3,1fr);gap:14px}.cert-cell{padding:16px 12px}}
@media (max-width:480px){.cert-grid{grid-template-columns:repeat(2,1fr)}}


/* =====================================================
   Site v13 — cert logos on home + dedicated category pages
   ===================================================== */

/* --- Home page certifications band --- */
.cert-logos-band{padding:48px 0;background:var(--bg);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);position:relative}
.cert-logos-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:32px;flex-wrap:wrap}
.cert-logos-head .eyebrow{margin-bottom:0}
.cert-logos-head .lead{font-size:14px;color:var(--ink-2);margin:0;max-width:720px;line-height:1.5}
.cert-logos-strip{display:grid;grid-template-columns:repeat(13,1fr);gap:16px;align-items:center}
.cert-logo-cell{background:#fff;border:1px solid var(--rule);border-radius:6px;padding:10px;aspect-ratio:1/1;display:grid;place-items:center;transition:border-color .25s ease,transform .25s ease}
.cert-logo-cell:hover{border-color:var(--yellow);transform:translateY(-2px)}
.cert-logo-cell img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;filter:grayscale(15%) opacity(0.92);transition:filter .25s ease}
.cert-logo-cell:hover img{filter:none}
.cert-logos-cta{text-align:right;margin-top:24px}
@media (max-width:1100px){.cert-logos-strip{grid-template-columns:repeat(7,1fr)}}
@media (max-width:760px){.cert-logos-strip{grid-template-columns:repeat(5,1fr);gap:10px}.cert-logos-band{padding:36px 0}.cert-logos-cta{text-align:left}}
@media (max-width:420px){.cert-logos-strip{grid-template-columns:repeat(4,1fr)}}

/* --- Category headings on clients/certifications pages --- */
.cat-head{display:flex;justify-content:space-between;align-items:baseline;gap:24px;margin-bottom:24px;padding-bottom:16px;border-bottom:1px solid var(--rule);flex-wrap:wrap}
.cat-head h3{font-family:var(--serif);font-size:clamp(24px,2.6vw,32px);font-weight:500;color:var(--ink);letter-spacing:-.01em;line-height:1.15}
.cat-head p{font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.12em;font-weight:700;margin:0}


/* =====================================================
   Site v14 — image text overlays + footer logo color
   ===================================================== */

/* --- Featured-card with photo bg: STRONG overlay so text is readable --- */
.featured-card.has-photo{position:relative;background-size:cover;background-position:center;background-repeat:no-repeat}
.featured-card.has-photo::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(to right, rgba(4,20,38,.78) 0%, rgba(4,20,38,.35) 55%, rgba(4,20,38,.15) 100%),
    linear-gradient(to bottom, rgba(4,20,38,.15) 0%, rgba(4,20,38,.55) 100%);
  z-index:0;
  border-radius:inherit;
}
.featured-card.has-photo > *{position:relative;z-index:1;text-shadow:0 1px 12px rgba(0,0,0,.6)}
.featured-card.has-photo h3{text-shadow:0 2px 18px rgba(0,0,0,.7)}
.featured-card.has-photo .pill{backdrop-filter:blur(8px) saturate(1.2);background:rgba(8,48,95,.6) !important}

/* Brighter, more confident text inside featured-card */
.featured-card.has-photo h3{color:#fff}
.featured-card.has-photo p{color:rgba(255,255,255,.85) !important}
.featured-card.has-photo .pill{
  background:rgba(0,0,0,.4);
  border:1px solid rgba(245,197,24,.5);
  color:#fff;
  backdrop-filter:blur(4px);
}
.featured-card.has-photo .meta strong{color:var(--yellow);font-size:28px}
.featured-card.has-photo .meta div{color:rgba(255,255,255,.6)}

/* Footer brand logo sizing (now transparent PNG) */
footer.site .brand-block img{
  max-width:160px;
  width:auto;
  height:auto;
  display:block;
  margin-bottom:18px;
  /* In case logo is dark — invert to white-ish for dark footer */
  filter:brightness(0) invert(1) opacity(.92);
}

/* About page: in-house manufacturing visual — convert SVG to photo backdrop */
.visual.dark.has-photo{
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  position:relative;
  border-radius:6px;
  overflow:hidden;
  min-height:420px;
  aspect-ratio:auto;
}
.visual.dark.has-photo::before{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(8,48,95,.45) 0%,rgba(4,20,38,.7) 100%);
  z-index:1;
}
.visual.dark.has-photo .photo-caption{
  position:absolute;
  bottom:0;left:0;right:0;
  padding:22px 28px;
  background:linear-gradient(180deg,transparent,rgba(4,20,38,.85));
  z-index:2;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:16px;
  flex-wrap:wrap;
}
.visual.dark.has-photo .photo-caption .pill{
  display:inline-block;
  padding:6px 14px;
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  background:var(--yellow);
  color:var(--ink);
  font-weight:700;
  border-radius:999px;
}
.visual.dark.has-photo .photo-caption .caption-text{
  font-family:var(--serif);
  font-style:italic;
  font-size:18px;
  color:#fff;
}


/* Story stats card — styled replacement for SVG mockup */
.visual.story-stats{display:flex;justify-content:center;align-items:flex-start;padding:0}
.story-stats-card{
  width:100%;
  max-width:380px;
  background:linear-gradient(135deg,var(--blue-2) 0%,var(--blue-3) 100%);
  border-radius:8px;
  padding:60px 36px 36px;
  position:relative;
  overflow:hidden;
  box-shadow:0 24px 48px -24px rgba(8,48,95,.45);
}
.story-stats-card::before{
  content:"";
  position:absolute;
  top:0;left:0;right:0;
  height:44px;
  background:var(--ink);
  border-radius:8px 8px 0 0;
}
.story-stats-card .window-dots{
  position:absolute;
  top:14px;left:20px;
  display:flex;gap:8px;
  z-index:2;
}
.story-stats-card .window-dots span{
  width:10px;height:10px;border-radius:50%;
  background:rgba(255,255,255,.3);
}
.story-stats-card .window-dots span:first-child{background:var(--yellow)}
.story-stats-card .big-num{
  font-family:var(--serif);
  font-style:italic;
  font-weight:300;
  font-size:72px;
  color:#fff;
  text-align:center;
  line-height:1;
  margin-top:24px;
  letter-spacing:-.02em;
}
.story-stats-card .big-num sup{
  font-size:.45em;
  font-weight:400;
  margin-left:2px;
}
.story-stats-card .big-label{
  color:var(--yellow);
  text-align:center;
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:700;
  margin-top:10px;
}
.story-stats-card .divider{
  height:1px;background:rgba(255,255,255,.18);
  margin:24px 0 18px;
}
.story-stats-card .sub-stat{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  padding:10px 0;
  color:rgba(255,255,255,.78);
  font-size:14px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.story-stats-card .sub-stat:last-child{border-bottom:none}
.story-stats-card .sub-stat strong{
  font-family:var(--serif);
  font-weight:500;
  color:#fff;
  font-size:18px;
  font-style:italic;
}


/* =====================================================
   Site v15 — featured-card photo layering fix
   Properly stack: photo (zoom-layer) → overlay (::before) → text
   ===================================================== */

/* 1) When card has a photo, kill the solid blue gradient so the photo shows */
.featured-card.has-photo{
  background:#0E1E33 !important;  /* fallback color only — photo covers it */
}

/* 2) Zoom-layer (the actual photo) must sit above the card's bg but below the overlay */
.featured-card.has-photo .zoom-layer{
  z-index:0 !important;
  opacity:1 !important;
}

/* 3) Overlay above the photo, below text */
.featured-card.has-photo::before{
  z-index:1 !important;
  background:linear-gradient(to right,
    rgba(4,20,38,.78) 0%,
    rgba(4,20,38,.42) 45%,
    rgba(4,20,38,.18) 100%) !important;
}

/* 4) Text content above the overlay */
.featured-card.has-photo > *,
.featured-card.has-photo .pill,
.featured-card.has-photo h3,
.featured-card.has-photo p,
.featured-card.has-photo .meta{
  position:relative !important;
  z-index:2 !important;
}

/* 5) Fallback: if JS didn't run and there's no zoom-layer yet, use card's inline bg */
.featured-card.has-photo:not(:has(.zoom-layer)){
  background-size:cover !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
}

/* 6) Make sure the loading-opacity rule doesn't keep the card hidden forever */
.featured-card.has-photo{opacity:1 !important}


/* =====================================================
   Site v16 — Life at Agile + Awards & recognition
   ===================================================== */

/* --- Life at Agile masonry grid --- */
.life-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-auto-rows:170px;
  gap:14px;
}
.life-tile{
  position:relative;
  margin:0;
  overflow:hidden;
  border-radius:6px;
  background:var(--ink);
  cursor:pointer;
  transition:transform .35s ease,box-shadow .35s ease;
}
.life-tile:hover{transform:translateY(-3px);box-shadow:0 24px 48px -24px rgba(8,48,95,.4)}
.life-tile img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s cubic-bezier(.2,.8,.2,1),filter .3s ease;
}
.life-tile:hover img{transform:scale(1.06)}
.life-tile figcaption{
  position:absolute;left:0;right:0;bottom:0;
  padding:14px 16px 12px;
  background:linear-gradient(0deg,rgba(4,20,38,.92) 0%,rgba(4,20,38,.0) 100%);
  color:#fff;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-weight:700;
  opacity:0;
  transform:translateY(8px);
  transition:opacity .25s ease,transform .25s ease;
}
.life-tile:hover figcaption{opacity:1;transform:translateY(0)}

/* Masonry-style varied row spans by nth-child for visual rhythm */
.life-tile:nth-child(1){grid-row:span 2}    /* tall */
.life-tile:nth-child(2){grid-column:span 2} /* wide */
.life-tile:nth-child(5){grid-column:span 2} /* wide */
.life-tile:nth-child(7){grid-row:span 2}    /* tall */
.life-tile:nth-child(8){grid-column:span 2} /* wide */

@media (max-width:1000px){
  .life-grid{grid-template-columns:repeat(3,1fr);grid-auto-rows:160px}
  .life-tile:nth-child(2),.life-tile:nth-child(5),.life-tile:nth-child(8){grid-column:span 2}
  .life-tile:nth-child(1),.life-tile:nth-child(7){grid-row:span 1;grid-column:span 1}
}
@media (max-width:680px){
  .life-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:140px;gap:10px}
  .life-tile:nth-child(2),.life-tile:nth-child(5),.life-tile:nth-child(8){grid-column:span 2}
  .life-tile:nth-child(1),.life-tile:nth-child(7){grid-row:span 1;grid-column:span 1}
}


/* --- Awards full grid (certifications page) --- */
.awards-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}
.award-tile{
  position:relative;
  margin:0;
  overflow:hidden;
  border-radius:8px;
  background:var(--card);
  border:1px solid var(--rule);
  aspect-ratio:4/3;
  transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease;
}
.award-tile:hover{transform:translateY(-4px);box-shadow:0 28px 48px -24px rgba(8,48,95,.35);border-color:var(--yellow)}
.award-tile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.award-tile:hover img{transform:scale(1.04)}
.award-tile figcaption{
  position:absolute;left:0;right:0;bottom:0;
  padding:18px 20px 16px;
  background:linear-gradient(0deg,rgba(4,20,38,.92) 0%,rgba(4,20,38,.0) 100%);
  color:#fff;
  font-family:var(--serif);
  font-style:italic;
  font-weight:500;
  font-size:17px;
  line-height:1.3;
}
@media (max-width:880px){.awards-grid{grid-template-columns:repeat(2,1fr);gap:16px}}
@media (max-width:520px){.awards-grid{grid-template-columns:1fr}}


/* --- Home awards strip — compact 4-tile preview --- */
.awards-band{background:var(--bg)}
.home-awards-strip{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
}
.home-award-tile{
  position:relative;
  display:block;
  overflow:hidden;
  border-radius:6px;
  aspect-ratio:1/1;
  background:var(--ink);
  text-decoration:none;
  transition:transform .35s ease,box-shadow .35s ease;
}
.home-award-tile:hover{transform:translateY(-4px);box-shadow:0 20px 40px -20px rgba(8,48,95,.4)}
.home-award-tile img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:brightness(.9);
  transition:transform .6s cubic-bezier(.2,.8,.2,1),filter .35s ease;
}
.home-award-tile:hover img{transform:scale(1.06);filter:brightness(1)}
.home-award-label{
  position:absolute;left:0;right:0;bottom:0;
  padding:14px 16px 12px;
  background:linear-gradient(0deg,rgba(4,20,38,.92) 0%,rgba(4,20,38,0) 100%);
  color:#fff;
  font-size:12px;
  letter-spacing:.06em;
  font-weight:600;
}
@media (max-width:880px){.home-awards-strip{grid-template-columns:repeat(2,1fr)}}


/* =====================================================
   Site v17 — hide all captions on life/award tiles
   ===================================================== */
.life-tile figcaption,
.award-tile figcaption,
.home-award-label{display:none !important}

/* Remove the dark gradient overlay at bottom — no caption means no gradient needed */
.life-tile::after,
.award-tile::after,
.home-award-tile::after{display:none !important}


/* =====================================================
   Site v18 — show full life/award photos (no face-cropping)
   ===================================================== */

/* Life tiles: show the whole photo */
.life-tile{background:#0E1E33}
.life-tile img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  object-position:center !important;
  background:#0E1E33;
}

/* Award tiles: same treatment */
.award-tile{background:#0E1E33;aspect-ratio:4/3}
.award-tile img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  object-position:center !important;
  background:#0E1E33;
}

/* Home awards preview strip */
.home-award-tile{background:#0E1E33}
.home-award-tile img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  object-position:center !important;
  background:#0E1E33;
}

/* On hover, keep the zoom but slightly less aggressive since
   we're not cropping (no need to compensate for cropped edges) */
.life-tile:hover img,
.award-tile:hover img,
.home-award-tile:hover img{transform:scale(1.03)}


/* =====================================================
   Site v19 — redesigned hero: simpler tagline, more attractive
   ===================================================== */

.hero.with-bg{
  position:relative;
  min-height:88vh;
  display:flex;
  align-items:center;
  padding:120px 0 90px;
  background:
    url('images/hero-bg.jpg') center/cover no-repeat fixed;
  color:#fff;
  overflow:hidden;
}
/* Cinematic gradient: dark on left (text side) fading to clearer on right,
   plus a bottom-up dark fade so it grounds into the stats section below */
.hero.with-bg .hero-overlay-gradient{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    linear-gradient(105deg, rgba(4,20,38,.92) 0%, rgba(8,48,95,.72) 42%, rgba(8,48,95,.30) 78%, rgba(8,48,95,.18) 100%),
    linear-gradient(to bottom, rgba(4,20,38,.30) 0%, rgba(4,20,38,0) 30%, rgba(4,20,38,.55) 100%);
}
.hero.with-bg .container{position:relative;z-index:1}

.hero-inner{max-width:760px}

.hero-eyebrow{
  display:inline-block;
  font-size:12px;
  letter-spacing:.24em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--yellow);
  padding:8px 16px;
  border:1px solid rgba(245,197,24,.4);
  border-radius:999px;
  background:rgba(245,197,24,.08);
  backdrop-filter:blur(6px);
  margin-bottom:28px;
}

.hero.with-bg .hero-headline{
  font-family:var(--serif);
  font-weight:500;
  color:#fff;
  line-height:1.02;
  letter-spacing:-.02em;
  margin:0;
  font-size:clamp(40px,6.4vw,86px);
  text-shadow:0 2px 30px rgba(0,0,0,.4);
}
.hero.with-bg .hero-headline .hero-line-1,
.hero.with-bg .hero-headline .hero-line-2{display:block}
.hero.with-bg .hero-headline .accent{
  font-style:italic;
  font-weight:300;
  color:var(--yellow);
}

.hero-sub{
  margin-top:26px;
  font-size:clamp(16px,1.5vw,20px);
  line-height:1.6;
  color:rgba(255,255,255,.9);
  max-width:60ch;
  text-shadow:0 1px 12px rgba(0,0,0,.4);
}

.hero.with-bg .hero-actions{
  display:flex;gap:18px;flex-wrap:wrap;align-items:center;
  margin-top:38px;
}
.hero.with-bg .link-arrow{color:#fff;border-color:rgba(255,255,255,.5)}
.hero.with-bg .link-arrow:hover{color:var(--yellow);border-color:var(--yellow)}

.hero-trust{
  display:flex;align-items:center;gap:20px;flex-wrap:wrap;
  margin-top:48px;
  padding-top:28px;
  border-top:1px solid rgba(255,255,255,.2);
}
.hero-trust span{
  font-size:14px;
  color:rgba(255,255,255,.78);
  letter-spacing:.02em;
}
.hero-trust span strong{
  color:#fff;
  font-family:var(--serif);
  font-style:italic;
  font-weight:500;
  font-size:20px;
  margin-right:4px;
}
.hero-trust .sep{
  width:5px;height:5px;border-radius:50%;
  background:var(--yellow);
  padding:0;
}

/* Subtle zoom-in animation on the bg for life */
@keyframes heroZoom{from{transform:scale(1.08)}to{transform:scale(1)}}
.hero.with-bg{animation:none}

@media (max-width:880px){
  .hero.with-bg{
    min-height:auto;
    padding:64px 0 56px;
    background-attachment:scroll;  /* fixed bg janky on mobile */
  }
  .hero-inner{max-width:100%}
  .hero-eyebrow{margin-bottom:20px;font-size:11px}
  .hero-sub{margin-top:20px}
  .hero.with-bg .hero-actions{margin-top:28px}
  .hero-trust{margin-top:32px;padding-top:20px;gap:14px}
  .hero-trust span strong{font-size:18px}
}
@media (prefers-reduced-motion:reduce){
  .hero.with-bg{animation:none}
}


/* Hero entrance animation states (v19) */
.hero-eyebrow,
.hero-headline .hero-line-1,
.hero-headline .hero-line-2,
.hero-sub,
.hero .hero-actions,
.hero-trust{
  opacity:0;
  transform:translateY(20px);
  transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1);
}
.hero-eyebrow.reveal-fade,
.hero-headline .hero-line-1.reveal-fade,
.hero-headline .hero-line-2.reveal-fade,
.hero-sub.reveal-fade,
.hero .hero-actions.reveal-fade,
.hero-trust.reveal-fade{
  opacity:1;
  transform:translateY(0);
}
/* Fallback: if JS disabled, show everything */
.no-js .hero-eyebrow,
.no-js .hero-headline .hero-line-1,
.no-js .hero-headline .hero-line-2,
.no-js .hero-sub,
.no-js .hero .hero-actions,
.no-js .hero-trust{opacity:1;transform:none}


/* =====================================================
   Site v20 — photo gallery walls (culture + awards)
   Many mixed-orientation photos → uniform tile wall
   ===================================================== */

/* Culture gallery: uniform responsive wall */
.life-grid{
  display:grid !important;
  grid-template-columns:repeat(4,1fr) !important;
  grid-auto-rows:auto !important;
  gap:12px !important;
}
.life-tile{
  margin:0;
  overflow:hidden;
  border-radius:6px;
  background:#0E1E33;
  aspect-ratio:1/1;
  cursor:pointer;
  transition:transform .35s ease,box-shadow .35s ease;
  /* reset any nth-child row/col spans from old masonry */
  grid-row:auto !important;
  grid-column:auto !important;
}
.life-tile:hover{transform:translateY(-3px);box-shadow:0 20px 40px -20px rgba(8,48,95,.4);z-index:2}
.life-tile img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center 28% !important;  /* bias toward faces (usually upper-middle) */
  background:#0E1E33;
  transition:transform .6s cubic-bezier(.2,.8,.2,1);
}
.life-tile:hover img{transform:scale(1.06)}
.life-tile:nth-child(1),.life-tile:nth-child(2),
.life-tile:nth-child(5),.life-tile:nth-child(7),
.life-tile:nth-child(8){grid-row:auto !important;grid-column:auto !important}

@media (max-width:1000px){.life-grid{grid-template-columns:repeat(3,1fr) !important}}
@media (max-width:680px){.life-grid{grid-template-columns:repeat(2,1fr) !important;gap:8px !important}}

/* Awards/Exhibitions gallery: mostly portrait phone shots → portrait tiles */
.awards-grid{
  display:grid !important;
  grid-template-columns:repeat(4,1fr) !important;
  gap:16px !important;
}
.award-tile{
  margin:0;
  overflow:hidden;
  border-radius:8px;
  background:#0E1E33;
  border:1px solid var(--rule);
  aspect-ratio:3/4 !important;  /* portrait, matches phone photos */
  transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease;
}
.award-tile:hover{transform:translateY(-4px);box-shadow:0 28px 48px -24px rgba(8,48,95,.35);border-color:var(--yellow);z-index:2}
.award-tile img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center 30% !important;
  background:#0E1E33;
  transition:transform .6s cubic-bezier(.2,.8,.2,1);
}
.award-tile:hover img{transform:scale(1.04)}

@media (max-width:980px){.awards-grid{grid-template-columns:repeat(3,1fr) !important}}
@media (max-width:640px){.awards-grid{grid-template-columns:repeat(2,1fr) !important;gap:12px !important}}

/* Home preview tiles — bias toward faces too */
.home-award-tile img{object-position:center 30% !important}


/* =====================================================
   Site v21 — leadership: real photos + 4-up grid
   ===================================================== */

/* 4 equal columns on desktop */
.leaders-grid{
  grid-template-columns:repeat(4,1fr) !important;
  gap:24px !important;
}

/* Portrait now holds a real photo */
.leader .portrait{
  aspect-ratio:4/5 !important;
  background:#0E1E33 !important;
  border-radius:var(--radius);
  overflow:hidden;
}
.leader .portrait img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:center top;
  display:block;
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
.leader:hover .portrait img{transform:scale(1.05)}
/* Remove the old gloss overlay + hide any leftover initials */
.leader .portrait::after{display:none !important}
.leader .portrait .initials{display:none !important}

/* Tighten card text for the 4-up layout */
.leader{padding:18px !important;gap:14px !important}
.leader h4{font-size:19px !important;line-height:1.2;margin:0}
.leader .role{
  margin-top:6px !important;margin-bottom:0 !important;
  font-size:10.5px !important;letter-spacing:.14em;line-height:1.4;
  color:var(--yellow-2);font-weight:700;text-transform:uppercase;
}
.leader p:last-child{
  margin-top:12px !important;font-size:13.5px !important;
  line-height:1.55;color:var(--ink-2);
}

/* Responsive: 2-up on tablet, 1-up on phone */
@media (max-width:1000px){.leaders-grid{grid-template-columns:repeat(2,1fr) !important;gap:20px !important}}
@media (max-width:560px){.leaders-grid{grid-template-columns:1fr !important;gap:18px !important}}


/* =====================================================
   Site v22 — projects photo gallery
   ===================================================== */
.proj-gallery{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}
.proj-tile{
  position:relative;margin:0;overflow:hidden;border-radius:8px;
  background:#0E1E33;aspect-ratio:4/3;
  border:1px solid var(--rule);
  transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease;
}
.proj-tile:hover{transform:translateY(-4px);box-shadow:0 28px 48px -24px rgba(8,48,95,.35);border-color:var(--yellow);z-index:2}
.proj-tile img{
  width:100%;height:100%;object-fit:cover;object-position:center;display:block;
  transition:transform .6s cubic-bezier(.2,.8,.2,1);
}
.proj-tile:hover img{transform:scale(1.05)}
.proj-tile figcaption{
  position:absolute;left:0;right:0;bottom:0;
  padding:18px 18px 14px;
  background:linear-gradient(0deg,rgba(4,20,38,.92) 0%,rgba(4,20,38,0) 100%);
  color:#fff;font-size:13px;font-weight:600;letter-spacing:.02em;
  opacity:0;transform:translateY(8px);
  transition:opacity .3s ease,transform .3s ease;
}
.proj-tile:hover figcaption{opacity:1;transform:translateY(0)}
@media (max-width:900px){.proj-gallery{grid-template-columns:repeat(2,1fr);gap:12px}}
@media (max-width:520px){.proj-gallery{grid-template-columns:1fr}}


/* =====================================================
   Site v23 — hero refinement: attractive layout + pinned trust bar
   ===================================================== */

.hero.with-bg{
  position:relative;
  min-height:92vh;
  display:flex;
  align-items:center;
  padding:0;
  background:url('images/hero-bg.jpg') center/cover no-repeat;
  color:#fff;
  overflow:hidden;
}
/* Richer cinematic overlay: deep on the left + bottom, clearer top-right
   so the blue treatment vessels still read through */
.hero.with-bg .hero-overlay-gradient{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    linear-gradient(100deg, rgba(4,16,33,.94) 0%, rgba(6,32,68,.80) 38%, rgba(8,48,95,.42) 70%, rgba(8,48,95,.22) 100%),
    linear-gradient(to top, rgba(4,16,33,.85) 0%, rgba(4,16,33,0) 38%);
}
.hero.with-bg .container{position:relative;z-index:1;width:100%}

.hero-inner{max-width:720px;padding:60px 0 120px}

.hero-eyebrow{
  display:inline-block;
  font-size:12px;letter-spacing:.26em;text-transform:uppercase;font-weight:700;
  color:var(--yellow);
  padding:9px 18px;
  border:1px solid rgba(245,197,24,.45);
  border-radius:999px;
  background:rgba(245,197,24,.1);
  backdrop-filter:blur(8px);
  margin-bottom:30px;
}

.hero.with-bg .hero-headline{
  font-family:var(--serif);
  font-weight:500;
  color:#fff;
  line-height:1.0;
  letter-spacing:-.02em;
  margin:0;
  font-size:clamp(44px,7vw,94px);
  text-shadow:0 4px 40px rgba(0,0,0,.45);
}
.hero.with-bg .hero-headline .hero-line-1,
.hero.with-bg .hero-headline .hero-line-2{display:block}
.hero.with-bg .hero-headline .accent{font-style:italic;font-weight:300;color:var(--yellow)}

.hero-sub{
  margin-top:28px;
  font-size:clamp(16px,1.55vw,21px);
  line-height:1.6;
  color:rgba(255,255,255,.92);
  max-width:56ch;
  text-shadow:0 2px 16px rgba(0,0,0,.5);
}

.hero.with-bg .hero-actions{
  display:flex;gap:16px;flex-wrap:wrap;align-items:center;
  margin-top:40px;
}
.hero.with-bg .btn.ghost{
  border:1px solid rgba(255,255,255,.55);
  color:#fff;background:rgba(255,255,255,.04);
  backdrop-filter:blur(6px);
}
.hero.with-bg .btn.ghost:hover{background:#fff;color:var(--blue-3);border-color:#fff}

/* Trust bar pinned to the bottom of the hero, full-width translucent strip */
.hero-trust-bar{
  position:absolute;
  left:0;right:0;bottom:0;
  z-index:1;
  background:linear-gradient(to top, rgba(4,16,33,.72), rgba(4,16,33,.3));
  border-top:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(10px);
  padding:22px 0;
}
.hero-trust{
  display:flex;align-items:center;gap:clamp(16px,3vw,40px);flex-wrap:wrap;
}
.hero-trust span{
  font-size:15px;color:rgba(255,255,255,.82);letter-spacing:.02em;
  display:flex;align-items:baseline;gap:7px;
}
.hero-trust span strong{
  color:var(--yellow);
  font-family:var(--serif);font-style:italic;font-weight:500;
  font-size:26px;
}
.hero-trust .sep{
  width:6px;height:6px;border-radius:50%;
  background:rgba(255,255,255,.35);gap:0;
}

@media (max-width:880px){
  .hero.with-bg{min-height:auto;background-attachment:scroll}
  .hero-inner{padding:48px 0 120px}
  .hero-eyebrow{margin-bottom:22px}
  .hero-sub{margin-top:20px}
  .hero.with-bg .hero-actions{margin-top:30px}
  .hero-trust-bar{padding:16px 0}
  .hero-trust span{font-size:13px}
  .hero-trust span strong{font-size:20px}
}
@media (max-width:560px){
  .hero-trust{gap:12px 16px;justify-content:space-between}
  .hero-trust .sep{display:none}
}


/* =====================================================
   Site v24 — hero slider (3-slide rotator)
   ===================================================== */

.hero.hero-slider{
  position:relative;
  min-height:92vh;
  display:block;
  padding:0;
  background:#0E1E33;
  color:#fff;
  overflow:hidden;
}

.hero-slides{position:relative;width:100%;height:92vh;min-height:560px}

.hero-slide{
  position:absolute;inset:0;
  background-size:cover;background-position:center;background-repeat:no-repeat;
  display:flex;align-items:center;
  opacity:0;
  visibility:hidden;
  transition:opacity 1s cubic-bezier(.4,0,.2,1),visibility 0s linear 1s,transform 8s linear;
  transform:scale(1.04);
  z-index:0;
}
.hero-slide.is-active{
  opacity:1;
  visibility:visible;
  transition:opacity 1s cubic-bezier(.4,0,.2,1),visibility 0s,transform 8s linear;
  transform:scale(1);  /* ken-burns effect: slowly settles to 1.0 */
  z-index:1;
}

.hero-slide .hero-overlay-gradient{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    linear-gradient(100deg, rgba(4,16,33,.92) 0%, rgba(6,32,68,.78) 38%, rgba(8,48,95,.42) 70%, rgba(8,48,95,.22) 100%),
    linear-gradient(to top, rgba(4,16,33,.82) 0%, rgba(4,16,33,0) 40%);
}
.hero-slide .container{position:relative;z-index:1;width:100%}

.hero-slide .hero-inner{max-width:720px;padding:60px 0 140px}

/* Reuse the v23 typography styles for eyebrow/headline/sub/buttons */
.hero-eyebrow{
  display:inline-block;font-size:12px;letter-spacing:.26em;text-transform:uppercase;font-weight:700;
  color:var(--yellow);
  padding:9px 18px;border:1px solid rgba(245,197,24,.45);border-radius:999px;
  background:rgba(245,197,24,.1);backdrop-filter:blur(8px);
  margin-bottom:30px;
}
.hero-slider .hero-headline{
  font-family:var(--serif);font-weight:500;color:#fff;line-height:1.0;letter-spacing:-.02em;margin:0;
  font-size:clamp(44px,7vw,94px);text-shadow:0 4px 40px rgba(0,0,0,.45);
}
.hero-slider .hero-headline .hero-line-1,
.hero-slider .hero-headline .hero-line-2{display:block}
.hero-slider .hero-headline .accent{font-style:italic;font-weight:300;color:var(--yellow)}
.hero-slider .hero-sub{
  margin-top:28px;font-size:clamp(16px,1.55vw,21px);line-height:1.6;
  color:rgba(255,255,255,.92);max-width:56ch;text-shadow:0 2px 16px rgba(0,0,0,.5);
}
.hero-slider .hero-actions{display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin-top:40px}
.hero-slider .btn.ghost{
  border:1px solid rgba(255,255,255,.55);color:#fff;background:rgba(255,255,255,.04);
  backdrop-filter:blur(6px);
}
.hero-slider .btn.ghost:hover{background:#fff;color:var(--blue-3);border-color:#fff}

/* Slider chrome — arrows */
.hero-arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  z-index:5;
  width:52px;height:52px;border-radius:50%;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.28);
  color:#fff;font-size:32px;line-height:46px;text-align:center;
  cursor:pointer;backdrop-filter:blur(8px);
  transition:background .3s,border-color .3s,transform .3s;
  font-family:-apple-system,sans-serif;
}
.hero-arrow:hover{background:var(--yellow);color:var(--ink);border-color:var(--yellow);transform:translateY(-50%) scale(1.08)}
.hero-arrow-prev{left:clamp(16px,3vw,40px)}
.hero-arrow-next{right:clamp(16px,3vw,40px)}

/* Slider chrome — dots */
.hero-dots{
  position:absolute;left:0;right:0;bottom:84px;
  z-index:5;
  display:flex;justify-content:center;gap:10px;
  pointer-events:none;
}
.hero-dot{
  width:38px;height:3px;border-radius:0;
  background:rgba(255,255,255,.32);border:none;
  cursor:pointer;pointer-events:auto;
  transition:background .3s,width .3s;
  padding:0;
}
.hero-dot:hover{background:rgba(255,255,255,.5)}
.hero-dot.active{background:var(--yellow);width:60px}

/* Trust bar stays at the bottom of the hero, above all slides */
.hero-slider .hero-trust-bar{
  position:absolute;left:0;right:0;bottom:0;z-index:4;
  background:linear-gradient(to top, rgba(4,16,33,.78), rgba(4,16,33,.32));
  border-top:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(10px);
  padding:22px 0;
}
.hero-trust{display:flex;align-items:center;gap:clamp(16px,3vw,40px);flex-wrap:wrap}
.hero-trust span{font-size:15px;color:rgba(255,255,255,.82);letter-spacing:.02em;display:flex;align-items:baseline;gap:7px}
.hero-trust span strong{color:var(--yellow);font-family:var(--serif);font-style:italic;font-weight:500;font-size:26px}
.hero-trust .sep{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.35)}

/* Mobile adjustments */
@media (max-width:880px){
  .hero.hero-slider{min-height:auto}
  .hero-slides{height:auto;min-height:560px}
  .hero-slide{position:absolute;height:100%}
  .hero-slides{height:600px}
  .hero-slide .hero-inner{padding:48px 0 130px}
  .hero-arrow{width:42px;height:42px;font-size:26px;line-height:38px}
  .hero-dots{bottom:80px}
  .hero-dot{width:30px}
  .hero-dot.active{width:46px}
  .hero-trust-bar{padding:16px 0}
  .hero-trust span{font-size:13px}
  .hero-trust span strong{font-size:20px}
}
@media (max-width:560px){
  .hero-trust{gap:12px 16px;justify-content:space-between}
  .hero-trust .sep{display:none}
  .hero-arrow{display:none}  /* hide arrows on small phones, dots + swipe still work */
}

/* Respect reduced motion: no auto-rotate, no zoom, no fade */
@media (prefers-reduced-motion: reduce) {
  .hero-slide{transition:opacity .3s ease}
  .hero-slide.is-active{transform:none}
}


/* =====================================================
   Site v25 — hero slider robust fallback
   First slide visible without JS, robust CSS only.
   ===================================================== */

/* The v19 rule made all hero text opacity:0 by default —
   that's brittle if JS doesn't fire. Override so text is visible
   by default and only animated when explicitly marked. */
.hero-slider .hero-eyebrow,
.hero-slider .hero-headline .hero-line-1,
.hero-slider .hero-headline .hero-line-2,
.hero-slider .hero-sub,
.hero-slider .hero-actions,
.hero-slider .hero-trust{
  opacity:1 !important;
  transform:none !important;
  transition:opacity .7s ease, transform .7s ease;
}

/* Only NON-active slides hide their content — active slide is fully visible */
.hero-slide:not(.is-active) .hero-inner{opacity:0;pointer-events:none}
.hero-slide.is-active .hero-inner{opacity:1;pointer-events:auto;transition:opacity .8s ease .2s}

/* Slide visibility — first slide visible by default via .is-active class.
   This OVERRIDES the previous opacity:0/visibility:hidden default. */
.hero-slide{
  opacity:1 !important;
  visibility:visible !important;
  transform:none !important;
}
/* Stack slides; only the active one shows above. Use z-index instead of opacity for swap. */
.hero-slide{z-index:0}
.hero-slide.is-active{z-index:2}
.hero-slide.is-prev{z-index:1}

/* Cross-fade between slides via the inner wrapper opacity (above) */


/* =====================================================
   Site v26 — FINAL hero slider CSS (overrides all prior)
   ===================================================== */

/* Hero container */
header.hero.hero-slider {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: 88vh !important;
  min-height: 600px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #08305F !important;
  color: #fff !important;
  overflow: hidden !important;
}

/* Slides container — fills the hero */
header.hero.hero-slider .hero-slides {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

/* Each slide */
header.hero.hero-slider .hero-slide {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity .9s ease, visibility 0s linear .9s !important;
  z-index: 1 !important;
  display: flex !important;
  align-items: center !important;
  transform: none !important;
}
header.hero.hero-slider .hero-slide.is-active {
  opacity: 1 !important;
  visibility: visible !important;
  transition: opacity .9s ease, visibility 0s linear 0s !important;
  z-index: 2 !important;
}

/* Overlay gradient on each slide */
header.hero.hero-slider .hero-slide .hero-overlay-gradient {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background:
    linear-gradient(100deg, rgba(4,16,33,.92) 0%, rgba(6,32,68,.78) 38%, rgba(8,48,95,.42) 70%, rgba(8,48,95,.22) 100%),
    linear-gradient(to top, rgba(4,16,33,.82) 0%, rgba(4,16,33,0) 40%) !important;
}

/* Container inside each slide */
header.hero.hero-slider .hero-slide > .container {
  position: relative !important;
  z-index: 1 !important;
  width: 100% !important;
}

/* Inner content wrap */
header.hero.hero-slider .hero-inner {
  max-width: 720px !important;
  padding: 60px 0 140px !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

/* TEXT — VISIBLE BY DEFAULT (no JS reveal needed) */
header.hero.hero-slider .hero-eyebrow,
header.hero.hero-slider .hero-headline,
header.hero.hero-slider .hero-headline .hero-line-1,
header.hero.hero-slider .hero-headline .hero-line-2,
header.hero.hero-slider .hero-sub,
header.hero.hero-slider .hero-actions,
header.hero.hero-slider .hero-trust {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  display: revert;
}

/* Typography */
header.hero.hero-slider .hero-eyebrow {
  display: inline-block !important;
  font-size: 12px;
  letter-spacing: .26em;
  text-transform: uppercase;
  font-weight: 700;
  color: #F5C518;
  padding: 9px 18px;
  border: 1px solid rgba(245,197,24,.45);
  border-radius: 999px;
  background: rgba(245,197,24,.1);
  margin-bottom: 30px;
}
header.hero.hero-slider .hero-headline {
  font-family: var(--serif, "Fraunces", Georgia, serif) !important;
  font-weight: 500;
  color: #fff;
  line-height: 1.0;
  letter-spacing: -.02em;
  margin: 0;
  font-size: clamp(40px, 7vw, 90px);
  text-shadow: 0 4px 40px rgba(0,0,0,.45);
}
header.hero.hero-slider .hero-headline .hero-line-1,
header.hero.hero-slider .hero-headline .hero-line-2 {
  display: block !important;
}
header.hero.hero-slider .hero-headline .accent {
  font-style: italic;
  font-weight: 300;
  color: #F5C518;
}
header.hero.hero-slider .hero-sub {
  margin-top: 26px;
  font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.6;
  color: rgba(255,255,255,.92);
  max-width: 56ch;
  text-shadow: 0 2px 16px rgba(0,0,0,.5);
}
header.hero.hero-slider .hero-actions {
  display: flex !important;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 38px;
}
header.hero.hero-slider .btn.ghost {
  border: 1px solid rgba(255,255,255,.55);
  color: #fff;
  background: rgba(255,255,255,.04);
}
header.hero.hero-slider .btn.ghost:hover {
  background: #fff;
  color: #08305F;
  border-color: #fff;
}

/* Arrows */
header.hero.hero-slider .hero-arrow {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 5 !important;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.3);
  color: #fff;
  font-size: 30px;
  line-height: 46px;
  text-align: center;
  cursor: pointer;
  padding: 0;
  transition: background .3s, color .3s, transform .3s;
  font-family: -apple-system, sans-serif;
}
header.hero.hero-slider .hero-arrow:hover {
  background: #F5C518;
  color: #0E1E33;
  border-color: #F5C518;
  transform: translateY(-50%) scale(1.08);
}
header.hero.hero-slider .hero-arrow-prev { left: 24px; }
header.hero.hero-slider .hero-arrow-next { right: 24px; }

/* Dots */
header.hero.hero-slider .hero-dots {
  position: absolute !important;
  left: 0;
  right: 0;
  bottom: 88px;
  z-index: 5;
  display: flex !important;
  justify-content: center;
  gap: 10px;
  pointer-events: none;
}
header.hero.hero-slider .hero-dot {
  width: 38px;
  height: 3px;
  background: rgba(255,255,255,.32);
  border: none;
  border-radius: 0;
  cursor: pointer;
  pointer-events: auto;
  padding: 0;
  transition: background .3s, width .3s;
}
header.hero.hero-slider .hero-dot:hover { background: rgba(255,255,255,.5); }
header.hero.hero-slider .hero-dot.active {
  background: #F5C518;
  width: 56px;
}

/* Trust bar pinned to bottom of hero */
header.hero.hero-slider .hero-trust-bar {
  position: absolute !important;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  background: linear-gradient(to top, rgba(4,16,33,.78), rgba(4,16,33,.32));
  border-top: 1px solid rgba(255,255,255,.14);
  padding: 22px 0;
}
header.hero.hero-slider .hero-trust {
  display: flex !important;
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
  flex-wrap: wrap;
}
header.hero.hero-slider .hero-trust span {
  font-size: 15px;
  color: rgba(255,255,255,.82);
  display: flex !important;
  align-items: baseline;
  gap: 7px;
}
header.hero.hero-slider .hero-trust span strong {
  color: #F5C518;
  font-family: var(--serif, "Fraunces", Georgia, serif);
  font-style: italic;
  font-weight: 500;
  font-size: 26px;
}
header.hero.hero-slider .hero-trust .sep {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,.35);
}

/* Mobile */
@media (max-width: 880px) {
  header.hero.hero-slider {
    height: auto !important;
    min-height: 580px !important;
  }
  header.hero.hero-slider .hero-inner {
    padding: 48px 0 130px !important;
  }
  header.hero.hero-slider .hero-arrow {
    width: 42px;
    height: 42px;
    font-size: 24px;
    line-height: 38px;
  }
  header.hero.hero-slider .hero-arrow-prev { left: 12px; }
  header.hero.hero-slider .hero-arrow-next { right: 12px; }
  header.hero.hero-slider .hero-dots { bottom: 80px; }
  header.hero.hero-slider .hero-trust-bar { padding: 16px 0; }
  header.hero.hero-slider .hero-trust span { font-size: 13px; }
  header.hero.hero-slider .hero-trust span strong { font-size: 20px; }
}
@media (max-width: 560px) {
  header.hero.hero-slider .hero-trust { gap: 12px 16px; justify-content: space-between; }
  header.hero.hero-slider .hero-trust .sep { display: none; }
  header.hero.hero-slider .hero-arrow { display: none; }
}


/* =====================================================
   Site v27 — ensure stats band visible, hide any trust bar
   ===================================================== */

/* Hide any leftover hero-trust-bar markup */
.hero-trust-bar { display: none !important; }

/* Force .stats section to be fully visible and properly sized */
section.stats {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  padding: 64px 0 !important;
  background: var(--ink, #0E1E33) !important;
  color: #fff !important;
}
section.stats .grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 40px !important;
}
section.stats .stat {
  opacity: 1 !important;
  visibility: visible !important;
}
section.stats .stat .num {
  font-family: var(--serif, "Fraunces", Georgia, serif) !important;
  font-size: clamp(56px, 6vw, 84px) !important;
  font-weight: 300 !important;
  line-height: 1 !important;
  color: #fff !important;
  letter-spacing: -.02em !important;
}
section.stats .stat .num sup {
  font-size: .45em !important;
  color: var(--yellow, #F5C518) !important;
  font-weight: 400 !important;
}
section.stats .stat .label {
  font-size: 11px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  margin-top: 14px !important;
  color: var(--yellow, #F5C518) !important;
}
section.stats .stat .desc {
  font-size: 14px !important;
  line-height: 1.55 !important;
  color: rgba(255,255,255,.7) !important;
  margin-top: 8px !important;
}
@media (max-width: 880px) {
  section.stats .grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 32px 24px !important;
  }
}


/* =====================================================
   Site v28 — tighten section margins sitewide
   Final authoritative rules at end of CSS (high specificity + !important)
   ===================================================== */

/* Standard section padding */
section.section { padding: 48px 0 !important; }
section.section.tight { padding: 36px 0 !important; }

/* Named hero/feature bands */
section.stats { padding: 56px 0 !important; }
section.positioning { padding: 48px 0 !important; }
section.featured { padding: 48px 0 !important; }
section.cta-banner { padding: 56px 0 !important; }
section.flagship-callout { padding: 48px 0 !important; }
section.trust-band { padding: 24px 0 !important; }
section.build-band { padding: 64px 0 !important; }
section.cert-logos-band { padding: 40px 0 !important; }
section.awards-band { padding: 48px 0 !important; }

/* Stacking rule: consecutive sections with same-ish background collapse the gap */
section + section.section,
section.section + section.section { padding-top: 12px !important; }

/* Color-changing sections keep their full padding to preserve visual rhythm */
section + section.section.alt,
section.section.alt + section.section,
section + section.section.blue,
section.section.blue + section.section,
section + section.section.dark,
section.section.dark + section.section,
section + section.stats,
section.stats + section,
section + section.featured,
section.featured + section,
section + section.cta-banner,
section.cta-banner + section,
section + section.build-band,
section.build-band + section,
section + section.flagship-callout,
section.flagship-callout + section { padding-top: 48px !important; }

/* Section heads — tighter margin below */
.sec-head {
  margin-bottom: 28px !important;
  padding-bottom: 16px !important;
  gap: 24px !important;
}

/* Container vertical margin (where present) tightened */
.container > h2,
.container > h3 { margin-top: 0 !important; }

/* Mobile */
@media (max-width: 880px) {
  section.section { padding: 36px 0 !important; }
  section.section.tight { padding: 28px 0 !important; }
  section.stats { padding: 40px 0 !important; }
  section.positioning { padding: 36px 0 !important; }
  section.featured { padding: 36px 0 !important; }
  section.cta-banner { padding: 40px 0 !important; }
  section.flagship-callout { padding: 36px 0 !important; }
  section.build-band { padding: 48px 0 !important; }
  section.cert-logos-band { padding: 32px 0 !important; }
  section.awards-band { padding: 36px 0 !important; }
  .sec-head { margin-bottom: 20px !important; padding-bottom: 12px !important; gap: 16px !important; }
}

/* Footer breathing room reduced */
footer.site { padding: 48px 0 24px !important; }
@media (max-width: 880px) { footer.site { padding: 36px 0 20px !important; } }


/* =====================================================
   Site v29 — FORCE VISIBLE: kill all opacity:0 defaults
   Lots of content was hidden by default and only made visible
   when JS observers fired. Brittle. Now everything is visible
   from the first paint. Animations are layered on top.
   ===================================================== */

/* Cards — these were hidden by line 656 in style.css */
.svc-card, .product-card, .project-card, .why-card, .feat, .testimonial, .ind,
.featured-card, .engage-step, .flagship-stat, .build-band-stat, .stats .stat,
.specs .row, .leader, .step, .sol, .card, .feat, .job-row, .split, .sec-head {
  opacity: 1 !important;
  transform: none !important;
}

/* Image-bg elements — these were hidden by line 605 */
.product-card .photo,
.project-card .visual.has-photo,
.featured-card.has-photo,
.flagship-image,
.svc-thumb,
.build-band {
  opacity: 1 !important;
}

/* Reveal class (used by reveal-on-scroll) — start visible */
.reveal {
  opacity: 1 !important;
  transform: none !important;
}

/* Section-anchored content always visible */
section, header { opacity: 1 !important; visibility: visible !important; }

/* Hero text already forced visible by v26 rules — re-assert */
header.hero.hero-slider .hero-eyebrow,
header.hero.hero-slider .hero-headline,
header.hero.hero-slider .hero-headline .hero-line-1,
header.hero.hero-slider .hero-headline .hero-line-2,
header.hero.hero-slider .hero-sub,
header.hero.hero-slider .hero-actions {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

/* Hover effects still work — these only ADD opacity transitions on :hover */


/* =====================================================
   Site v30 — animations as ENHANCEMENTS, not requirements
   Content is visible by default. JS opts elements into animation
   by adding .pre-anim, then removes it after entry. If JS fails,
   nothing is hidden.
   ===================================================== */

/* JS-only opt-in: when the .has-js class is on <html>, eligible
   elements start slightly faded and slid down, then animate to visible.
   Without .has-js, content displays normally and immediately. */

html.has-js .anim-fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1);
}
html.has-js .anim-fade-up.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered grid children entrance */
html.has-js .anim-stagger-children > *:nth-child(1) { transition-delay: 0ms; }
html.has-js .anim-stagger-children > *:nth-child(2) { transition-delay: 80ms; }
html.has-js .anim-stagger-children > *:nth-child(3) { transition-delay: 160ms; }
html.has-js .anim-stagger-children > *:nth-child(4) { transition-delay: 240ms; }
html.has-js .anim-stagger-children > *:nth-child(5) { transition-delay: 320ms; }
html.has-js .anim-stagger-children > *:nth-child(6) { transition-delay: 400ms; }
html.has-js .anim-stagger-children > *:nth-child(n+7) { transition-delay: 480ms; }

/* Reduced motion: no animation */
@media (prefers-reduced-motion: reduce) {
  html.has-js .anim-fade-up,
  html.has-js .anim-fade-up.in-view {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}


/* =====================================================
   Site v31 — restore word-by-word entrance + counter visibility
   ===================================================== */

/* Word-by-word entrance on the positioning headline */
.pos-headline .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1);
}
.pos-headline.in-view .word {
  opacity: 1;
  transform: none;
}
/* Stagger each word */
.pos-headline.in-view .word:nth-child(1)  { transition-delay: 0ms; }
.pos-headline.in-view .word:nth-child(2)  { transition-delay: 90ms; }
.pos-headline.in-view .word:nth-child(3)  { transition-delay: 180ms; }
.pos-headline.in-view .word:nth-child(4)  { transition-delay: 270ms; }
.pos-headline.in-view .word:nth-child(5)  { transition-delay: 360ms; }
.pos-headline.in-view .word:nth-child(6)  { transition-delay: 480ms; }
.pos-headline.in-view .word:nth-child(7)  { transition-delay: 570ms; }
.pos-headline.in-view .word:nth-child(8)  { transition-delay: 660ms; }
.pos-headline.in-view .word:nth-child(9)  { transition-delay: 750ms; }

/* If JS doesn't run, words are visible immediately */
html:not(.has-js) .pos-headline .word {
  opacity: 1 !important;
  transform: none !important;
}

/* Counter element must remain visible and styled correctly while text changes */
.stats .stat .num {
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
}


/* =====================================================
   Site v32 — Products photo strip (replaces fake product cards)
   ===================================================== */
.products-photo-strip{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:12px;
}
.product-photo-tile{
  display:block;
  overflow:hidden;
  border-radius:6px;
  aspect-ratio:1/1;
  background:#0E1E33;
  border:1px solid var(--rule);
  transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease;
  text-decoration:none;
}
.product-photo-tile:hover{
  transform:translateY(-4px);
  box-shadow:0 20px 40px -20px rgba(8,48,95,.4);
  border-color:var(--yellow);
  z-index:2;
}
.product-photo-tile img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
  transition:transform .6s cubic-bezier(.2,.8,.2,1),filter .35s ease;
  filter:brightness(.92);
}
.product-photo-tile:hover img{
  transform:scale(1.06);
  filter:brightness(1);
}
@media (max-width:1000px){
  .products-photo-strip{grid-template-columns:repeat(3,1fr);gap:10px}
}
@media (max-width:560px){
  .products-photo-strip{grid-template-columns:repeat(2,1fr);gap:8px}
}


/* =====================================================
   Site v33 — mailto CTAs + footer social icons + favicon
   ===================================================== */

/* Footer social icons */
footer.site .footer-social{display:flex;gap:12px;margin-top:18px;flex-wrap:wrap}
footer.site .footer-social a{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:36px !important;height:36px !important;
  border-radius:50% !important;
  background:rgba(255,255,255,.08) !important;
  color:rgba(255,255,255,.7) !important;
  transition:background .25s, color .25s, transform .25s !important;
  text-decoration:none !important;
}
footer.site .footer-social a:hover{
  background:var(--yellow) !important;
  color:var(--ink) !important;
  transform:translateY(-2px) !important;
}
footer.site .footer-social svg{display:block}

/* Mailto CTA card */
.enquiry-cta, .callback-cta{
  opacity:1 !important;
  visibility:visible !important;
}

/* Legal page typography refinement */
.lead-meta{
  font-size:14px;
  color:var(--muted);
  font-weight:500;
  margin:0 0 28px;
}
.legal-banner{
  background:var(--yellow-soft);
  border:1px solid var(--yellow);
  border-left:4px solid var(--yellow);
  padding:18px 22px;
  border-radius:4px;
  color:var(--ink);
  font-size:14.5px;
  line-height:1.6;
  margin-bottom:28px;
}


/* =====================================================
   Site v34 — Responsive polish
   ===================================================== */

/* 1) Hide topbar entirely on mobile (clutter, especially with wrapping items)
   Tablet (1100px) already hides extra items via existing rule.
   Now also hide on small mobile. */
@media (max-width: 600px) {
  .topbar { display: none !important; }
}

/* On mobile (under 880px), hide the dot+text "Engineering since 2013" too,
   keep only email + phone on the topbar in a compact single line */
@media (max-width: 880px) and (min-width: 601px) {
  .topbar .left span:first-child { display: none !important; }
  .topbar .inner { padding: 7px 0 !important; gap: 16px !important; }
  .topbar { font-size: 11.5px !important; }
}

/* 2) Closed-loop SVG diagram: ensure container is sized so labels fit
   The labels (REUSE, PROCESS) sit OUTSIDE the 520x520 viewBox so we need
   the parent to give them room. Add horizontal margin/padding on small viewports. */
.loop-diagram {
  overflow: visible !important;
  padding: 0 28px;
}
.loop-diagram svg {
  overflow: visible !important;
}
@media (max-width: 1100px) {
  .loop-diagram { padding: 0 24px !important; }
}
@media (max-width: 880px) {
  .loop-diagram { padding: 0 16px !important; }
}

/* 3) Hero slide background-position adjustment per viewport.
   The collage slide 1 looks great on desktop but on narrow screens
   the center crop hides edge content. Bias the position slightly. */
@media (max-width: 1100px) {
  .hero-slide[data-slide="0"] {
    background-position: center center !important;
    background-size: cover !important;
  }
}
@media (max-width: 700px) {
  /* On phones: zoom out a touch so more of the collage shows */
  .hero-slide {
    background-size: cover !important;
  }
  /* Cap headline + tighten the inner padding on phones for visual breathing room */
  header.hero.hero-slider .hero-inner {
    padding: 36px 0 110px !important;
  }
  header.hero.hero-slider .hero-headline {
    font-size: clamp(34px, 9vw, 52px) !important;
  }
  header.hero.hero-slider .hero-sub {
    font-size: 15px !important;
    line-height: 1.55 !important;
  }
  header.hero.hero-slider .hero-eyebrow {
    font-size: 10.5px !important;
    letter-spacing: .2em !important;
    padding: 7px 14px !important;
    margin-bottom: 20px !important;
  }
  header.hero.hero-slider .hero-actions .btn {
    font-size: 13px !important;
    padding: 11px 18px !important;
  }
  /* Dots higher up so they don't collide with the bottom of the viewport */
  header.hero.hero-slider .hero-dots {
    bottom: 26px !important;
  }
}

/* 4) Tighten the topbar on very small screens (kept-visible variant) */
@media (max-width: 1100px) and (min-width: 881px) {
  .topbar .left { gap: 14px !important; }
  .topbar .right { gap: 14px !important; }
}

/* 5) Mobile mobile menu button — bigger tap target */
@media (max-width: 1100px) {
  .nav-toggle { padding: 10px !important; }
}

/* 6) Footer social icons — wrap better on narrow */
@media (max-width: 600px) {
  footer.site .footer-social {
    gap: 10px !important;
    justify-content: flex-start !important;
  }
  footer.site .footer-social a {
    width: 38px !important;
    height: 38px !important;
  }
}

/* 7) Container/grid edge cases on phones */
@media (max-width: 560px) {
  .container { padding: 0 18px !important; }
  /* Stat numbers on home — keep them readable */
  section.stats .stat .num {
    font-size: clamp(46px, 13vw, 64px) !important;
  }
}


/* =====================================================
   Site v35 — Footer credit (Website designed by ...)
   ===================================================== */
footer.site .foot-bottom span .credit {
  color: rgba(255,255,255,.4);
  margin-left: 4px;
}
footer.site .foot-bottom span .credit::before {
  content: "·";
  margin: 0 8px;
  color: rgba(255,255,255,.3);
}
footer.site .foot-bottom span .credit a {
  color: rgba(255,255,255,.6) !important;
  text-decoration: none;
  transition: color .2s ease;
  border-bottom: 1px dotted rgba(255,255,255,.25);
}
footer.site .foot-bottom span .credit a:hover {
  color: var(--yellow) !important;
  border-bottom-color: var(--yellow);
}

/* Mobile: stack the credit onto its own line so copyright + credit don't crowd */
@media (max-width: 560px) {
  footer.site .foot-bottom span .credit {
    display: block;
    margin-left: 0;
    margin-top: 8px;
    font-size: 12px;
  }
  footer.site .foot-bottom span .credit::before {
    display: none;
  }
}


/* =====================================================
   Site v36 — Industries detail grid + Specifier CTA
   ===================================================== */

/* Detailed industry cards (replacing the simple .ind grid) */
.ind-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--rule);
  margin-top: 16px;
}
.ind-detail {
  background: var(--bg);
  padding: 32px 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  transition: background .25s ease;
}
.ind-detail:hover {
  background: #fff;
}
.ind-detail .num {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 14px;
  color: var(--blue-2);
  letter-spacing: .04em;
}
.ind-detail h4 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.2;
  color: var(--ink);
  margin: 0;
  letter-spacing: -.01em;
}
.ind-detail .signature {
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--blue-2);
  text-transform: none;
  font-weight: 600;
  margin: 0;
  line-height: 1.5;
}
.ind-detail .body {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0 0 8px;
}
.ind-detail .meta {
  border-top: 1px solid var(--rule);
  padding-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ind-detail .meta-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 14px;
  align-items: start;
}
.ind-detail .meta .lbl {
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--blue-2);
  padding-top: 2px;
}
.ind-detail .meta .val {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-2);
}

@media (max-width: 880px) {
  .ind-detail-grid { grid-template-columns: 1fr; }
  .ind-detail { padding: 24px 22px; }
  .ind-detail h4 { font-size: 20px; }
  .ind-detail .meta-row { grid-template-columns: 1fr; gap: 4px; }
  .ind-detail .meta .lbl { padding-top: 0; }
}

/* Specifier CTA — distinct banner that follows the industries grid */
.specifier-cta {
  background: var(--blue-3);
  color: #fff;
  padding: 72px 0;
  position: relative;
  overflow: hidden;
}
.specifier-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 88% 12%, rgba(245,197,24,.16), transparent 45%),
    radial-gradient(circle at 8% 88%, rgba(30,91,170,.22), transparent 45%);
  pointer-events: none;
}
.specifier-cta-inner {
  display: grid;
  grid-template-columns: 1.4fr auto;
  gap: 48px;
  align-items: center;
  position: relative;
  z-index: 1;
}
.specifier-cta .eyebrow {
  color: var(--yellow);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 700;
}
.specifier-cta h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.15;
  color: #fff;
  margin: 14px 0 0;
  letter-spacing: -.01em;
}
.specifier-cta .lead {
  font-size: 16px;
  line-height: 1.65;
  color: rgba(255,255,255,.82);
  margin-top: 18px;
  max-width: 56ch;
}
.specifier-cta-actions {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-end;
}
.specifier-cta-actions .btn.ghost {
  border-color: rgba(255,255,255,.4);
  color: #fff;
  background: rgba(255,255,255,.04);
}
.specifier-cta-actions .btn.ghost:hover {
  background: #fff;
  color: var(--blue-3);
  border-color: #fff;
}

@media (max-width: 880px) {
  .specifier-cta { padding: 48px 0; }
  .specifier-cta-inner { grid-template-columns: 1fr; gap: 28px; }
  .specifier-cta-actions { flex-direction: row; align-items: stretch; flex-wrap: wrap; }
}


/* =====================================================
   Site v37 — Dropdown hover bridge fix + uniformity pass
   ===================================================== */

/* Bridge the 8px gap between the trigger button and the menu
   so moving the cursor down into the menu doesn't drop the hover state. */
.has-dropdown::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 14px;  /* covers the 8px gap + a touch extra */
  background: transparent;
  pointer-events: auto;
  z-index: 99;
  display: none;  /* only show on hover so it doesn't intercept other UI */
}
.has-dropdown:hover::after,
.has-dropdown:focus-within::after,
.has-dropdown.open::after {
  display: block;
}

/* Tighten the dropdown gap slightly and ensure it stays open when cursor is inside */
.dropdown-menu {
  top: calc(100% + 4px) !important;  /* reduce visible gap from 8px to 4px */
}

/* Small UX nicety — keep dropdown open during quick mouse movements
   by adding a small grace via transition delay on visibility */
.has-dropdown .dropdown-menu {
  transition: opacity .15s ease, transform .15s ease;
}


/* =====================================================
   Site v38 — Floating WhatsApp button
   ===================================================== */
.wa-float {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  display: flex !important;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(37, 211, 102, .35), 0 4px 12px rgba(0, 0, 0, .15);
  z-index: 90;
  text-decoration: none;
  transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s ease, background .25s ease;
  cursor: pointer;
}
.wa-float:hover {
  background: #20bd5a;
  transform: scale(1.08);
  box-shadow: 0 12px 32px rgba(37, 211, 102, .5), 0 6px 16px rgba(0, 0, 0, .2);
}
.wa-float:active {
  transform: scale(0.96);
}
.wa-float svg {
  width: 32px;
  height: 32px;
  display: block;
}

/* Subtle pulse animation to draw attention */
.wa-float::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: #25D366;
  opacity: .35;
  z-index: -1;
  animation: wa-pulse 2.4s ease-out infinite;
}
@keyframes wa-pulse {
  0% { transform: scale(1); opacity: .35; }
  70% { transform: scale(1.4); opacity: 0; }
  100% { transform: scale(1.4); opacity: 0; }
}

/* Hide pulse on hover (replaced by scale animation) */
.wa-float:hover::before {
  animation: none;
}

/* Hide if user prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
  .wa-float::before { animation: none; }
  .wa-float { transition: background .25s ease; }
  .wa-float:hover { transform: none; }
}

/* Tooltip on hover for desktop */
.wa-float::after {
  content: "Chat on WhatsApp";
  position: absolute;
  right: 72px;
  top: 50%;
  transform: translateY(-50%) translateX(8px);
  background: #0E1E33;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  font-family: var(--sans, "Manrope", sans-serif);
}
.wa-float:hover::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* Mobile: smaller button, no tooltip, no pulse */
@media (max-width: 600px) {
  .wa-float {
    bottom: 20px;
    right: 20px;
    width: 54px;
    height: 54px;
  }
  .wa-float svg {
    width: 28px;
    height: 28px;
  }
  .wa-float::after {
    display: none;
  }
}