/* ==========================================================================
   AZHA website — components. Uses only tokens from tokens.css.
   Order: base · header · page banner · type & buttons · sections ·
   service-page components · home & company components · forms · footer · responsive
   ========================================================================== */

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--soft);color:var(--body);font:400 var(--fs-body)/1.7 var(--f-body);-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--white)}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
p{margin:0}
h1,h2,h3,h4{font-family:var(--f-display);color:var(--navy);margin:0;font-weight:700;line-height:1.22;text-wrap:balance}
ul,ol{margin:0;padding:0}
button{font:inherit}
.wrap{max-width:var(--maxw);margin-inline:auto;width:100%;padding-left:var(--gutter);padding-right:max(16px,env(safe-area-inset-right,0px))}
.sel{user-select:all}
:focus-visible{outline:2px solid var(--navy-700);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--navy);color:#fff;padding:10px 16px;border-radius:var(--r-ctl);text-decoration:none}
.skip:focus{top:12px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Header + navigation ---------- */
.site-head{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:var(--white);border-bottom:1px solid var(--line)}
.head-in{display:flex;align-items:center;gap:24px;min-height:var(--head-h)}
.logo{flex:none;display:block}
.logo-img{width:140px;height:auto}
.nav{margin-inline-start:auto;display:flex;align-items:center;gap:6px}
.nav>a,.dd-btn{display:inline-flex;align-items:center;gap:6px;font:700 15px var(--f-display);color:var(--ink);text-decoration:none;padding:10px 12px;border:0;background:none;cursor:pointer;border-radius:var(--r-ctl);position:relative}
.nav>a:hover,.dd-btn:hover{color:var(--navy-700);background:var(--soft)}
.nav>a.on,.dd.on>.dd-btn{color:var(--navy)}
.nav>a.on::after,.dd.on>.dd-btn::after{content:"";position:absolute;left:12px;right:12px;bottom:4px;height:2px;background:var(--navy)}
.dd{position:relative}
.dd-btn svg{width:14px;height:14px;transition:transform .2s}
.dd[data-open] .dd-btn svg{transform:rotate(180deg)}
.dd-menu{position:absolute;top:calc(100% + 8px);left:-8px;min-width:300px;background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--sh-2);padding:8px;display:grid;gap:2px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s,transform .18s,visibility .18s}
.dd[data-open] .dd-menu{opacity:1;visibility:visible;transform:none}
.dd-menu a{display:grid;gap:2px;padding:10px 12px;border-radius:var(--r-ctl);text-decoration:none}
.dd-menu a:hover,.dd-menu a[aria-current=page]{background:var(--soft)}
.dd-menu b{font:700 15px var(--f-display);color:var(--navy)}
.dd-menu small{font-size:13px;line-height:1.4;color:var(--body)}
.dd-menu .dd-tag{font:700 11px var(--f-body);letter-spacing:.12em;color:var(--teal);text-transform:uppercase}
.lang{flex:none;font:600 14px var(--f-body);color:var(--navy);text-decoration:none;border:1px solid var(--line);border-radius:var(--r-ctl);padding:6px 12px}
.lang:hover{border-color:var(--navy)}
.head-cta{flex:none}
.menu-btn{display:none;flex:none;margin-inline-start:auto;width:44px;height:44px;border:1px solid var(--line);border-radius:var(--r-ctl);background:var(--white);cursor:pointer;padding:0;align-items:center;justify-content:center}
.menu-btn span{display:block;width:20px;height:2px;background:var(--navy);position:relative;transition:background .2s}
.menu-btn span::before,.menu-btn span::after{content:"";position:absolute;left:0;width:20px;height:2px;background:var(--navy);transition:transform .2s}
.menu-btn span::before{top:-6px}.menu-btn span::after{top:6px}
.menu-open .menu-btn span{background:transparent}
.menu-open .menu-btn span::before{transform:translateY(6px) rotate(45deg)}
.menu-open .menu-btn span::after{transform:translateY(-6px) rotate(-45deg)}
.m-nav{display:none}

/* ---------- Page banner (inner pages) ---------- */
.banner{position:relative;margin:0;border-radius:0;overflow:hidden;background:var(--navy);isolation:isolate}
.banner-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;opacity:.42}
.banner::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(16,31,80,.96) 20%,rgba(16,31,80,.72) 60%,rgba(16,31,80,.45))}
.banner::after{content:"";position:absolute;inset:auto 0 0 0;height:70%;z-index:-1;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 300' preserveAspectRatio='none'%3E%3Cpath d='M-20 280 C 300 150, 700 110, 1220 190' fill='none' stroke='%238BB9E8' stroke-width='1.4' opacity='.55'/%3E%3C/svg%3E") center bottom/100% 100% no-repeat;pointer-events:none}
.banner-in{padding-block:64px 68px;text-align:center}
.crumb{color:var(--on-navy);font-size:14px;margin-bottom:10px}
.crumb a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.45)}
.crumb a:hover{border-bottom-color:#fff}
.banner-t{color:#fff;font-size:var(--fs-h1);line-height:1.12;letter-spacing:-.01em}
.banner-t::after{content:"";display:block;width:72px;height:2px;background:var(--baby);margin:18px auto 0}
.banner-sub{color:var(--on-navy);max-width:58ch;margin:16px auto 0;font-size:17px}

/* ---------- Type + labels ---------- */
.eyebrow{display:flex;align-items:center;gap:14px;font:700 14px/1.3 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.tog{flex:none;width:32px;height:2px;background:currentColor}
.on-dark .eyebrow,.eyebrow.on-dark{color:var(--baby)}
.display{font-size:var(--fs-display);line-height:1.1;letter-spacing:-.012em}
.h2{font-size:var(--fs-h2);line-height:1.15;letter-spacing:-.008em;margin-bottom:28px}
.h2.tight{margin-bottom:14px}
.hl{color:var(--accent)}
.on-dark .hl,.band-navy .hl,.close .hl{color:var(--baby)}
.lead{font-size:var(--fs-lead);max-width:58ch;margin-top:20px}
.rule{display:block;width:72px;height:2px;background:var(--navy);margin:24px 0}
.on-dark .rule,.band-navy .rule{background:var(--baby)}
.sub{margin:-12px 0 24px;font-size:17px;max-width:62ch}
.note{margin-top:22px;max-width:70ch;font-size:15px}
.tag{display:inline-block;align-self:flex-start;border:1px solid var(--teal);color:var(--teal);font:700 11px var(--f-body);letter-spacing:.12em;text-transform:uppercase;padding:4px 10px;border-radius:var(--r-ctl)}
.badge{display:inline-block;background:var(--amber);color:var(--ink);font:700 11px var(--f-body);letter-spacing:.1em;padding:4px 8px;border-radius:var(--r-ctl)}
.sec-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 40px;margin-bottom:36px}
.sec-head .h2{margin-bottom:0}
.sec-head .sub{margin:0}
.center{text-align:center}
.center .eyebrow{justify-content:center}

/* ---------- Buttons ---------- */
.ctas{display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center;margin-top:30px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 24px;border:1px solid transparent;border-radius:var(--r-ctl);background:var(--navy);color:#fff;font:600 15px var(--f-body);text-decoration:none;cursor:pointer;transition:background .18s,color .18s,border-color .18s}
.btn:hover{background:var(--navy-700)}
.bi{order:2;display:inline-grid;place-items:center}
.bi svg,.btn>svg{width:16px;height:16px}
.btn-light{background:var(--light);color:var(--navy)}
.btn-light:hover{background:var(--line-strong)}
.btn-baby{background:var(--baby);color:var(--navy)}
.btn-baby:hover{background:var(--light)}
.btn-outline{background:transparent;color:var(--navy);border-color:var(--navy)}
.btn-outline:hover{background:var(--navy);color:#fff}
.btn-outline-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn-outline-light:hover{background:#fff;color:var(--navy)}
.btn-sm{min-height:40px;padding:0 18px;font-size:14px}
.btn-ghost{display:inline-flex;align-items:center;gap:8px;color:var(--navy);font:700 15px var(--f-display);text-decoration:none;border-bottom:2px solid var(--accent);padding-bottom:2px}
.btn-ghost svg{width:18px;height:18px;transition:transform .18s}
.btn-ghost:hover svg{transform:translateX(3px)}
.btn-ghost.on-dark,.on-dark .btn-ghost{color:#fff;border-bottom-color:var(--baby)}
.close .btn,.band-navy .btn:not(.btn-outline-light),.tier-ent .btn,.ent .btn{background:var(--baby);color:var(--navy)}
.close .btn:hover,.band-navy .btn:not(.btn-outline-light):hover,.tier-ent .btn:hover,.ent .btn:hover{background:var(--light)}
.circ{width:44px;height:44px;border-radius:50%;display:inline-grid;place-items:center;border:1px solid currentColor;background:transparent;color:inherit;cursor:pointer;transition:background .18s,color .18s}
.circ svg{width:18px;height:18px}

/* ---------- Section grounds ---------- */
.band-white{background:var(--white)}
.band-soft{background:var(--soft)}
.band-light{background:var(--light)}
.band-navy{background:var(--navy);color:var(--on-navy);position:relative;overflow:hidden}
.band-navy h2,.band-navy h3{color:#fff}
.block{padding-block:var(--sec)}
.signal{position:absolute;inset:auto 0 0 0;width:100%;height:45%;color:var(--baby);opacity:.45;pointer-events:none}

/* ---------- Journey bar (Plan / Build / Run) ---------- */
.journey{display:flex;align-items:center;margin-top:-30px;position:relative;z-index:2;background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);padding:10px;box-shadow:var(--sh-1);max-width:min(var(--maxw),calc(100% - 32px))}
.jstep{position:relative;display:flex;align-items:center;gap:10px;text-decoration:none;padding:6px 10px;border-radius:var(--r-ctl);flex:1 1 0;min-width:0;transition:transform .25s ease,box-shadow .25s ease,opacity .2s ease,background-color .2s ease}
.jstep b{display:block;font:700 15px var(--f-display);color:var(--ink)}
.jstep small{display:block;font-size:12px;line-height:1.3;color:var(--body)}
.jn{flex:none;width:30px;height:30px;border-radius:var(--r-ctl);display:grid;place-items:center;font:700 13px var(--f-display);border:1.5px solid var(--navy);color:var(--navy)}
.jline{flex:0 0 18px;height:1.5px;background:var(--line)}
.journey:has(.jstep.on) .jstep:not(.on){opacity:.62}
.journey:has(.jstep.on) .jstep:not(.on):hover{opacity:1}
.jstep:not(.on):hover{background:var(--light)}
.jstep.on{z-index:1;background:var(--navy);padding:12px 16px;margin-block:-8px;transform:scale(1.05);box-shadow:var(--sh-2),0 0 0 2px var(--baby)}
.jstep.on b,.jstep.on small{color:#fff}
.jstep.on .jn{background:var(--baby);border-color:var(--baby);color:var(--navy)}
.jstep.on::after{content:"";position:absolute;left:50%;bottom:-7px;width:12px;height:12px;background:var(--navy);transform:translateX(-50%) rotate(45deg);box-shadow:2px 2px 0 0 var(--baby)}
.formats{padding-inline:18px}
.fmt{flex:1 1 0;min-width:0;padding:6px 10px}
.fmt b{display:block;font:700 15px var(--f-display);color:var(--ink)}
.fmt small{display:block;font-size:12px;line-height:1.3;color:var(--body)}

/* ---------- Service-page hero with the photo circle ---------- */
.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center;padding-block:72px 64px}
.hero-txt{min-width:0}
.hero-txt .display::after{content:"";display:block;width:72px;height:2px;background:var(--navy);margin-top:28px}
.hub-hero{grid-template-columns:1fr}
.hero-art{position:relative;aspect-ratio:1/1;max-width:440px;width:100%;justify-self:end}
.orb{position:absolute;inset:0;border-radius:50%;background:var(--navy);overflow:hidden;z-index:0}
.orb-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%}
.orb::before{content:"";position:absolute;inset:0;z-index:1;border-radius:50%;background:linear-gradient(200deg,rgba(16,31,80,0) 45%,rgba(16,31,80,.5));pointer-events:none}
.orb .contour{position:absolute;inset:-20%;z-index:2;opacity:.5;background:repeating-radial-gradient(circle at 30% 70%,transparent 0 16px,rgba(255,255,255,.07) 17px 18px)}
.orb .ring{position:absolute;inset:-6% -6% 14% 14%;z-index:2;border:2px solid var(--baby);border-radius:50%}
.pill-stat{position:absolute;left:-8%;bottom:14%;display:flex;align-items:center;gap:14px;background:var(--white);border-radius:var(--r-card);padding:10px 22px 10px 10px;box-shadow:var(--sh-2);font:600 15px var(--f-display);color:var(--navy);max-width:90%}
.ps-n{width:60px;height:60px;border-radius:var(--r-ctl);background:var(--navy);color:#fff;display:grid;place-items:center;font-size:14px;flex:none}
.ps-n.big{font-size:22px}

/* ---------- Service-page sections ---------- */
.msg{background:var(--light)}
.msg-in{display:grid;grid-template-columns:1.2fr .8fr;gap:48px;padding-block:72px;align-items:start}
.msg-copy{min-width:0}
.msg-p{font:600 clamp(20px,2.2vw,26px)/1.5 var(--f-display);color:var(--navy);max-width:40ch}
.probs{background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);padding:28px;min-width:0}
.probs h3{font-size:21px;margin-bottom:16px}
.probs ul,.ticks{list-style:none;display:grid;gap:14px}
.probs li,.ticks li{display:grid;grid-template-columns:24px 1fr;gap:12px;align-items:start}
.probs svg{width:22px;height:22px;color:var(--accent);margin-top:2px}
.ticks svg{width:22px;height:22px;color:var(--teal);margin-top:2px}
.ticks span{color:var(--ink)}
.on-dark .ticks span,.ent .ticks span{color:#fff}
.on-dark .ticks svg,.ent .ticks svg{color:var(--baby)}
.inc{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));border-top:1px solid var(--line)}
.inc-i{padding:26px 26px 28px 0;border-bottom:1px solid var(--line);min-width:0}
.inc-i h3{font-size:21px;margin-bottom:8px}
.inc-i h3:empty{display:none}
.tiers-band{background:var(--light)}
.tiers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.tier{border:1px solid var(--line);border-radius:var(--r-card);background:var(--white);padding:34px;display:flex;flex-direction:column;gap:22px}
.tier-ent{background:var(--navy);border-color:var(--navy)}
.tier-k{font:700 22px var(--f-display);color:var(--navy)}
.tier-ent .tier-k{color:#fff}
.tier dl{margin:0;display:grid;flex:1}
.dl-r{display:grid;grid-template-columns:120px 1fr;gap:14px;padding-block:12px;border-top:1px solid var(--line)}
.tier-ent .dl-r{border-color:rgba(255,255,255,.18)}
.dl-r dt{font:700 13px var(--f-body);letter-spacing:.05em;text-transform:uppercase;color:var(--navy)}
.tier-ent dt{color:var(--baby)}
.dl-r dd{margin:0;color:var(--ink);min-width:0}
.tier-ent dd{color:#fff}
.tier .btn{align-self:flex-start}
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-card);background:var(--white)}
.tbl{border-collapse:collapse;width:100%;min-width:640px}
.tbl th,.tbl td{text-align:left;padding:16px 20px;border-bottom:1px solid var(--line);vertical-align:top}
.tbl thead th{font:700 16px var(--f-display);color:#fff;background:var(--navy)}
.tbl tbody th{font:700 15px var(--f-display);color:var(--navy);white-space:nowrap}
.tbl td{color:var(--ink)}
.tbl tbody tr:last-child>*{border-bottom:0}
.ent .ent-card{background:var(--navy);border-radius:var(--r-card);padding:44px;position:relative;overflow:hidden}
.ent .ent-card .h2{color:#fff}
.ent .btn{margin-top:28px}
.steps{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:28px}
.steps:has(> li:nth-child(6)){grid-template-columns:repeat(3,1fr)}
.steps li{position:relative;padding-top:58px;min-width:0}
.steps li::before{content:"";position:absolute;top:22px;left:44px;right:-28px;height:1.5px;background:repeating-linear-gradient(90deg,var(--line) 0 6px,transparent 6px 12px)}
.steps li:last-child::before{display:none}
.sn{position:absolute;top:0;left:0;width:44px;height:44px;border-radius:var(--r-ctl);background:var(--white);border:2px solid var(--teal);display:grid;place-items:center;font:700 16px var(--f-display);color:var(--teal)}
.steps li:first-child .sn{background:var(--teal);color:#fff}
.steps h3{font-size:20px;margin-bottom:6px}
.out{background:var(--light)}
.out-in{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;padding-block:80px;align-items:center}
.out-in>div{min-width:0}
.proof{border:2px dashed var(--line-strong);border-radius:var(--r-card);padding:28px;background:var(--white);min-width:0}
.proof-k{font:700 12px var(--f-body);letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:10px}
.proof-s{font-size:14px;margin-top:10px}
.faqs{display:grid;gap:14px;max-width:880px}
details{border:1px solid var(--line);border-radius:var(--r-card);background:var(--white);padding:0 24px;transition:border-color .2s}
details[open]{border-color:var(--navy)}
summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding-block:20px;font:700 17px var(--f-display);color:var(--ink)}
summary::-webkit-details-marker{display:none}
.pm{width:28px;height:28px;border-radius:var(--r-ctl);background:var(--light);position:relative;flex:none}
.pm::before,.pm::after{content:"";position:absolute;left:8px;right:8px;top:13px;height:2px;background:var(--navy);transition:transform .2s}
.pm::after{transform:rotate(90deg)}
details[open] .pm::after{transform:rotate(0)}
details p{padding-bottom:20px;max-width:70ch}

/* ---------- Closing CTA (navy) ---------- */
.close{position:relative;overflow:hidden;background:var(--navy)}
.close::before{content:"";position:absolute;inset:auto 0 0 0;height:60%;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 300' preserveAspectRatio='none'%3E%3Cpath d='M-20 270 C 320 120, 720 90, 1220 170' fill='none' stroke='%238BB9E8' stroke-width='1.4' opacity='.5'/%3E%3C/svg%3E") center/100% 100% no-repeat;pointer-events:none}
.close-in{position:relative;z-index:1;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:28px;padding-block:64px}
.close-in>div{min-width:0;max-width:640px}
.close h2{color:#fff;font-size:clamp(28px,3.3vw,40px);line-height:1.18}
.close p{color:var(--on-navy);margin-top:10px;font-size:17px}
.close .ctas{margin-top:0}

/* ---------- Service hub cards ---------- */
.hub{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:24px}
.hub-4{grid-template-columns:repeat(2,minmax(0,1fr))}
.hub-card{border:1px solid var(--line);border-radius:var(--r-card);padding:30px;text-decoration:none;display:flex;flex-direction:column;gap:10px;background:var(--white);transition:border-color .2s,box-shadow .2s,transform .2s}
.hub-card:hover{border-color:var(--navy);box-shadow:var(--sh-2);transform:translateY(-3px)}
.hub-step{align-self:flex-start;font:700 11px var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--teal);border:1px solid var(--teal);border-radius:var(--r-ctl);padding:4px 10px}
.hub-card h3{font-size:26px}
.hub-h{font:700 17px var(--f-display);color:var(--ink)}
.hub-go{margin-top:auto;padding-top:10px;display:inline-flex;align-items:center;gap:8px;font:700 15px var(--f-display);color:var(--navy)}
.hub-go svg{width:18px;height:18px;transition:transform .18s}
.hub-card:hover .hub-go svg{transform:translateX(3px)}
.train-band{background:var(--light)}
.train-in{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.train-copy{min-width:0}
.train-list{list-style:none;display:grid;border-top:1px solid var(--line-strong)}
.train-list li{display:grid;grid-template-columns:150px 1fr;gap:14px;padding-block:16px;border-bottom:1px solid var(--line-strong)}
.train-list b{font:700 16px var(--f-display);color:var(--navy)}
.train-list span{color:var(--ink);min-width:0}

/* ---------- Framed images and splits ---------- */
.frame{border-radius:var(--r-img);overflow:hidden;background:var(--line)}
.frame{position:relative}
.frame img{width:100%;height:100%;object-fit:cover}
.split{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.split.wide-l{grid-template-columns:1.1fr .9fr}
.split>div{min-width:0}

/* ---------- Home: hero slider ---------- */
.hslider{position:relative;margin:0;border-radius:0;overflow:hidden;background:var(--navy);color:var(--on-navy)}
.hslider .signal{height:55%}
.slides{display:grid}
.slide{grid-area:1/1;display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;padding-block:72px 40px;opacity:0;visibility:hidden;transition:opacity .6s,visibility .6s}
.slide.on{opacity:1;visibility:visible}
.slide .display{color:#fff}
.slide .lead{color:var(--on-navy)}
.slide .hero-art{max-width:420px}
.slide .orb{background:var(--navy-950)}
.slider-ctl{position:relative;z-index:2;display:flex;align-items:center;gap:16px;padding-bottom:40px;color:#fff}
.counter{font:600 13px var(--f-body);letter-spacing:.12em;color:var(--on-navy)}
.counter b{color:#fff}
.sbar{display:block;height:2px;width:120px;background:rgba(139,185,232,.25);margin-right:auto;position:relative}
.sbar i{position:absolute;inset:0 auto 0 0;width:33.3%;background:var(--baby);transition:width .7s cubic-bezier(.65,0,.35,1)}
.sbar i.drain{transition:width .3s cubic-bezier(.4,0,1,1)}
.slider-ctl .circ:hover{background:var(--baby);color:var(--navy);border-color:var(--baby)}

/* ---------- Home: about + stats ---------- */
.about-art{position:relative;aspect-ratio:1/1;width:100%;max-width:520px}
.about-art .orb{inset:0 10% 10% 0}
.about-art .pill-stat{left:auto;right:0;bottom:6%}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:32px}
.stat{border-top:2px solid var(--navy);padding-top:14px}
.stat b{display:block;font:700 34px/1 var(--f-display);color:var(--navy)}
.stat span{display:block;font-size:14px;margin-top:6px}

/* ---------- Home: services checkerboard ---------- */
.checker{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.ck{border-radius:var(--r-card);min-height:300px;overflow:hidden}
.ck-i img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.ck-i:hover img{transform:scale(1.03)}
.ck-t{background:var(--white);border:1px solid var(--line);padding:28px;display:flex;flex-direction:column;gap:12px;text-decoration:none;transition:border-color .2s,box-shadow .2s}
.ck-t:nth-child(4n+3),.ck-t:nth-child(4n+6){background:var(--light);border-color:var(--light)}
.ck-t h3{font-size:22px}
.ck-t p{font-size:15px}
.ck-t:hover{border-color:var(--navy);box-shadow:var(--sh-1)}
.ck-t .hub-go{margin-top:auto}
.ck-wide{grid-column:span 2}

/* ---------- Home: Vision 2030 band ---------- */
.v-art{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
.v-art .frame{aspect-ratio:3/4}
.v-art .frame:last-child{margin-top:64px}

/* ---------- Programme cards (expanding) ---------- */
.pcards{display:flex;gap:14px;height:440px;padding:16px;background:var(--light);border-radius:var(--r-img)}
.pc{position:relative;flex:1 1 0;min-width:0;border-radius:var(--r-card);overflow:hidden;background:var(--navy);cursor:pointer;transition:flex-grow .5s}
.pc>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.45}
.pc::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(16,31,80,.2),rgba(10,30,63,.92))}
.pc-plus{position:absolute;z-index:2;top:20px;left:50%;transform:translateX(-50%);width:34px;height:34px;border-radius:var(--r-ctl);background:var(--baby);color:var(--navy);display:grid;place-items:center}
.pc-plus svg{width:16px;height:16px}
.pc-v{position:absolute;z-index:2;left:50%;bottom:28px;transform:translateX(-50%) rotate(180deg);writing-mode:vertical-rl;color:#fff;font:700 19px var(--f-display);white-space:nowrap}
.pc-panel{position:absolute;z-index:3;inset:14px;background:var(--white);border-radius:var(--r-card);padding:24px;display:flex;flex-direction:column;gap:10px;opacity:0;visibility:hidden;transition:opacity .3s .15s}
.pc-panel h3{font-size:21px}
.pc-panel .ticks{gap:8px;font-size:15px}
.pc-panel .hub-go{margin-top:auto;text-decoration:none}
.pc.on{flex-grow:3.4;cursor:default}
.pc.on .pc-panel{opacity:1;visibility:visible}
.pc.on .pc-v,.pc.on .pc-plus{opacity:0}

/* ---------- Vision panel ---------- */
.vis-art{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:40px 0 40px 40px}
.vis-art::before{content:"";position:absolute;inset:0 30% 0 0;background:var(--navy);border-radius:var(--r-img)}
.vis-art .frame{position:relative;aspect-ratio:4/5}
.vis-art .frame:last-child{margin-top:48px}

/* ---------- Logo grid ---------- */
.logos{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.logo-slot{display:grid;place-items:center;height:96px;background:var(--white);border:1px dashed var(--control);border-radius:var(--r-card);font:600 12px var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--control);text-align:center;padding:8px}
.logo-note{text-align:center;font-size:14px;margin-top:16px}

/* ---------- Get in touch strip ---------- */
.touch{background:var(--white);border-top:1px solid var(--line)}
.touch-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 40px;padding-block:52px}
.touch h2{font-size:clamp(24px,2.6vw,30px)}
.touch h2::after{content:"";display:block;width:72px;height:2px;background:var(--navy);margin-top:14px}
.touch-links{display:flex;flex-wrap:wrap;gap:12px 32px}
.touch-links a{display:inline-flex;align-items:center;gap:10px;color:var(--navy);text-decoration:none;font:600 16px var(--f-body)}
.touch-links svg{width:20px;height:20px;color:var(--accent)}

/* ---------- Company pages ---------- */
.intro2{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.g-art{position:relative;aspect-ratio:1/.9}
.g-art .g1{position:absolute;inset:0 30% 18% 0}
.g-art .g2{position:absolute;right:0;top:14%;width:42%;aspect-ratio:3/4;border:8px solid var(--white)}
.vm{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.vm>.frame{aspect-ratio:4/3}
.acc{display:grid;gap:14px}
.values{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center}
.vnav{display:flex;gap:10px;margin-top:28px;color:var(--navy)}
.vnav .circ:hover{background:var(--navy);color:#fff}
.vtrack{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(260px,46%);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px;scrollbar-width:thin}
.vcard{scroll-snap-align:start;border:1px solid var(--line);border-radius:var(--r-card);padding:28px;display:grid;gap:10px;align-content:start;background:var(--white);min-height:220px}
.vcard:nth-child(even){background:var(--light);border-color:var(--light)}
.vcard h3{font-size:21px}
.num{font:700 12px var(--f-body);letter-spacing:.12em;color:var(--accent)}
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.cards4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);padding:28px;display:flex;flex-direction:column;gap:10px;min-width:0}
.card h3{font-size:21px}
.card .ticks{gap:10px;font-size:15px;margin-top:6px}
.icon{width:44px;height:44px;border-radius:var(--r-ctl);background:var(--light);color:var(--navy);display:grid;place-items:center}
.icon svg{width:22px;height:22px}
.band-navy .card{background:var(--navy-950);border-color:rgba(255,255,255,.14)}
.band-navy .card p{color:var(--on-navy)}
.band-navy .icon{background:rgba(139,185,232,.16);color:var(--baby)}
.statement{display:grid;grid-template-columns:auto 1fr;gap:48px;align-items:center;padding-block:var(--sec)}
.statement .quote{font:600 clamp(22px,2.6vw,32px)/1.4 var(--f-display);color:#fff;max-width:36ch}
.statement img{width:220px}

/* ---------- Training list + detail ---------- */
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:28px}
.chip{border:1px solid var(--line);background:var(--white);color:var(--navy);font:600 14px var(--f-body);padding:9px 16px;border-radius:var(--r-ctl);cursor:pointer;transition:background .18s,color .18s,border-color .18s}
.chip:hover{border-color:var(--navy)}
.chip[aria-pressed=true]{background:var(--navy);border-color:var(--navy);color:#fff}
.courses{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.course{background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;display:flex;flex-direction:column;text-decoration:none;transition:box-shadow .2s,transform .2s,border-color .2s}
.course:hover{box-shadow:var(--sh-2);transform:translateY(-3px);border-color:var(--navy)}
.course[hidden]{display:none}
.course-img{position:relative;aspect-ratio:16/10;overflow:hidden}
.course-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.course-img .tag{position:absolute;left:14px;top:14px;background:var(--white)}
.course-b{padding:22px 24px 26px;display:flex;flex-direction:column;gap:10px;flex:1}
.course-b h3{font-size:21px}
.course-meta{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:14px;color:var(--body)}
.course-meta span{display:inline-flex;align-items:center;gap:6px}
.course-meta svg{width:16px;height:16px;color:var(--accent)}
.course-b .hub-go{margin-top:auto}
.cdetail{display:grid;grid-template-columns:1fr 360px;gap:48px;align-items:start}
.cdetail-img{aspect-ratio:16/9}
.side{display:grid;gap:16px;position:sticky;top:calc(var(--head-h) + 20px)}
.side-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);padding:24px;display:grid;gap:16px}
.side-card h3{font-size:19px}
.info-row{display:grid;grid-template-columns:40px 1fr;gap:12px;align-items:start}
.info-row .icon{width:40px;height:40px}
.info-row b{display:block;font:700 14px var(--f-display);color:var(--navy)}
.info-row span,.info-row a{font-size:14px;color:var(--body);text-decoration:none}
.info-row a:hover{color:var(--navy)}
.side-links{display:grid;gap:2px}
.side-links a{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line);font:600 15px var(--f-display);color:var(--navy);text-decoration:none}
.side-links a:last-child{border-bottom:0}
.side-links a:hover{color:var(--navy-700)}
.side-links svg{width:16px;height:16px;flex:none}

/* ---------- Contact ---------- */
.icards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.icard{background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);padding:30px;display:flex;flex-direction:column;gap:10px}
.icard h3{font-size:21px}
.icard .hub-go{text-decoration:none;margin-top:auto}
.contact-in{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start}

/* ---------- Forms ---------- */
.panel{background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--sh-1);padding:32px;min-width:0}
.form{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px}
.f1{grid-column:1/-1}
.form label{display:block;font:600 14px var(--f-body);color:var(--ink);margin-bottom:8px}
.form label i,.req i{color:var(--danger);font-style:normal}
.form label span{font-weight:400;color:var(--body)}
.form input:not([type=checkbox]):not([type=file]),.form select,.form textarea{width:100%;min-height:48px;border:1px solid var(--control);border-radius:var(--r-ctl);background:var(--white);color:var(--ink);font:400 15px var(--f-body);padding:12px 14px;transition:border-color .15s,box-shadow .15s}
.form textarea{min-height:120px;resize:vertical}
.form input[type=file]{width:100%;border:1px dashed var(--control);border-radius:var(--r-ctl);background:var(--soft);padding:12px;font:400 14px var(--f-body);color:var(--ink)}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--navy-700);box-shadow:0 0 0 3px rgba(139,185,232,.45)}
.form [aria-invalid=true]{border-color:var(--danger)!important}
.err{display:none;color:var(--danger);font-size:13px;margin-top:6px}
.err.show{display:block}
.form-foot{grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-top:4px}
.req{font-size:13px}
.ok{grid-column:1/-1;display:flex;gap:10px;align-items:flex-start;background:#ECF6F1;border:1px solid #B7DDCB;color:var(--ink);border-radius:var(--r-ctl);padding:12px 14px;font-size:14px}
.ok[hidden]{display:none}
.ok svg{width:20px;height:20px;color:var(--success);flex:none;margin-top:1px}

/* ---------- Footer ---------- */
.site-foot{background:var(--navy-950);color:var(--on-navy)}
.foot-in{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px;padding-block:64px 40px}
.foot-in>div{min-width:0;display:flex;flex-direction:column;gap:9px}
.foot-in .logo-img{width:150px;margin-bottom:6px}
.foot-in h2{font:700 15px var(--f-display);color:#fff;padding-bottom:8px;box-shadow:inset 0 -2px 0 var(--baby);align-self:flex-start;margin-bottom:6px}
.foot-in a{text-decoration:none;font-size:15px;color:var(--on-navy)}
.foot-in a:hover{color:#fff}
.foot-in p{font-size:14px}
.social{display:flex;gap:10px;margin-top:8px}
.social a{width:38px;height:38px;border-radius:var(--r-ctl);border:1px solid rgba(139,185,232,.35);display:grid;place-items:center}
.social a:hover{background:var(--baby);color:var(--navy);border-color:var(--baby)}
.social svg{width:18px;height:18px}
.foot-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;align-items:center;padding-block:20px 28px;border-top:1px solid rgba(255,255,255,.1);font-size:13px}
.foot-base .rule-sm{display:inline-block;width:40px;height:2px;background:var(--baby);vertical-align:middle;margin-right:10px}

/* ---------- Scroll reveal ---------- */
.js .reveal{opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .5s ease}
.js .reveal.in{opacity:1;transform:none}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .nav>a,.dd-btn{padding:10px 8px;font-size:14px}
  .head-cta{display:none}
  .checker{grid-template-columns:repeat(2,1fr)}
  .ck{order:var(--o,0)}
  .ck-t:nth-child(n){background:var(--white);border-color:var(--line)}
  .logos{grid-template-columns:repeat(3,1fr)}
  .courses{grid-template-columns:repeat(2,1fr)}
  .cards4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .nav,.lang,.head-cta{display:none}
  .menu-btn{display:inline-flex}
  .menu-open .m-nav{display:block;border-top:1px solid var(--line);max-height:calc(100vh - var(--head-h) - 1px);overflow-y:auto;padding:8px 16px 20px;background:var(--white)}
  .m-nav a,.m-nav summary{display:flex;justify-content:space-between;align-items:center;padding:14px 4px;font:700 16px var(--f-display);color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
  .m-nav details{border:0;border-radius:0;padding:0;background:none}
  .m-nav details[open]{border:0}
  .m-nav summary{padding-block:14px;list-style:none;cursor:pointer}
  .m-nav summary svg{width:18px;height:18px;flex:none;transition:transform .2s}
  .m-nav details[open] summary svg{transform:rotate(180deg)}
  .m-nav a[aria-current=page]{color:var(--navy);font-weight:700}
  .m-nav details a{font:500 15px var(--f-body);padding:12px 4px 12px 16px;color:var(--body)}
  .m-nav .m-actions{display:flex;gap:10px;padding-top:16px}
  .m-nav .m-actions a{border:0}
  .m-nav .m-actions .btn{color:#fff;flex:1;justify-content:center;padding:0 18px;font:600 15px var(--f-body)}
  .m-nav .m-actions .lang{display:inline-flex;align-items:center;color:var(--navy);border:1px solid var(--line)}
  .hero,.msg-in,.out-in,.slide,.split,.split.wide-l,.intro2,.vm,.values,.contact-in,.cdetail,.train-in{grid-template-columns:1fr;gap:40px}
  .hero-art,.slide .hero-art{justify-self:center;max-width:320px}
  .about-art{margin-inline:auto;max-width:400px}
  .tiers,.cards3,.icards{grid-template-columns:1fr}
  .hub-4{grid-template-columns:1fr}
  .foot-in{grid-template-columns:1fr 1fr}
  .journey{flex-wrap:wrap;gap:6px}
  .jline{display:none}
  .jstep{flex:1 1 45%}
  .jstep.on{margin-block:0;padding:6px 10px;transform:scale(1.02)}
  .jstep.on::after{display:none}
  .fmt{flex:1 1 45%}
  .steps:has(> li:nth-child(6)){grid-template-columns:repeat(2,1fr)}
  .steps li::before{display:none}
  .pcards{flex-direction:column;height:auto;padding:12px}
  .pc{flex:none;height:68px}
  .pc.on{height:auto}
  .pc.on .pc-panel{position:relative;inset:auto;margin:12px}
  .pc-v{writing-mode:horizontal-tb;transform:none;left:20px;bottom:auto;top:22px;font-size:17px}
  .pc-plus{left:auto;right:14px;transform:none;top:17px}
  .vtrack{grid-auto-columns:80%}
  .side{position:static}
  .statement{grid-template-columns:1fr;gap:28px}
}
@media (max-width:560px){
  .logo-img{width:120px}
  .checker,.courses,.cards4,.stats{grid-template-columns:1fr}
  .stats{gap:12px}
  .ck{min-height:220px}
  .form,.foot-in{grid-template-columns:1fr}
  .dl-r,.train-list li{grid-template-columns:1fr;gap:2px}
  .tier,.ent .ent-card,.panel{padding:24px}
  .pill-stat{left:0}
  .jstep,.fmt{flex:1 1 100%}
  .steps:has(> li:nth-child(6)){grid-template-columns:1fr}
  .logos{grid-template-columns:repeat(2,1fr)}
  .vis-art{padding:24px 0 24px 24px}
  .banner-in{padding-block:48px 52px}
}

/* ---------- Home hero: white variant (add class "light" to .hslider) ---------- */
.hslider.light{background:var(--white);border:1px solid var(--line);color:var(--body);isolation:isolate}
.hslider.light::before{content:"";position:absolute;z-index:-1;right:-140px;top:-160px;width:620px;height:620px;border-radius:50%;background:var(--light);opacity:.75;pointer-events:none}
.hslider.light .signal{color:var(--accent);opacity:.35}
.hslider.light .slide .display{color:var(--navy)}
.hslider.light .hl{color:var(--accent)}
.hslider.light .slide .lead{color:var(--body)}
.hslider.light .on-dark .eyebrow,.hslider.light .eyebrow.on-dark{color:var(--accent)}
.hslider.light .btn-baby{background:var(--navy);color:#fff}
.hslider.light .btn-baby:hover{background:var(--navy-700)}
.hslider.light .btn-outline-light{color:var(--navy);border-color:var(--navy)}
.hslider.light .btn-outline-light:hover{background:var(--navy);color:#fff}
.hslider.light .slide .orb{background:var(--navy);box-shadow:var(--sh-2)}
.hslider.light .slider-ctl{color:var(--navy)}
.hslider.light .counter{color:var(--body)}
.hslider.light .counter b{color:var(--navy)}
.hslider.light .sbar{background:var(--line)}
.hslider.light .sbar i{background:var(--navy)}
.hslider.light .slider-ctl .circ:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
@media (max-width:900px){.hslider.light::before{width:420px;height:420px;right:-160px;top:auto;bottom:-120px}}

/* Typography: eyebrow scales down a step on small phones */
@media (max-width:560px){.eyebrow{font-size:13px;gap:12px}.tog,.js .reveal.in .tog{width:28px}}
/* Home headline: keep the first two words together on wider screens */
@media (min-width:901px){.nw{white-space:nowrap}}
/* Never allow decorative rings to cause sideways scrolling */
main{overflow-x:clip}
/* Two-beat headline with the coloured beat on its own line */
.stack .hl{display:block}

/* Closing call to action (replaces the contact strip) */
.touch.cta{background:var(--light);border-top:0}
.touch.cta .touch-in{padding-block:64px;gap:24px 48px}
.cta-txt{max-width:680px;min-width:0}
.touch.cta h2{font-size:var(--fs-h2);margin-bottom:12px}
.touch.cta h2::after{display:none}
.touch.cta p{color:var(--body);font-size:17px;margin:0}
.touch.cta .btn{padding-inline:32px}
.touch.cta .eyebrow{color:var(--accent)}

/* Client logos */
.logos .dup{display:none}
.marquee .logos .dup{display:grid}
.logo-slot.client{border:1px solid var(--line);height:104px;padding:18px 22px}
.logo-slot.client img{max-width:100%;max-height:52px;width:auto;height:auto;object-fit:contain}
.logo-slot.client.sq img{max-height:80px}
.logo-slot.client.sq{padding-block:10px}
.marquee .logo-slot.client{width:220px}

/* Client logos: muted monochrome at rest, full colour on hover / focus / tap */
.logo-slot.client img{filter:grayscale(100%);opacity:.55;transition:filter .3s ease,opacity .3s ease;will-change:filter,opacity}
.logo-slot.client{transition:border-color .3s ease}
.logo-slot.client:hover img,.logo-slot.client:focus-within img,.logo-slot.client:active img{filter:grayscale(0%);opacity:1}
.logo-slot.client:hover{border-color:var(--line-strong,#cfd5de)}

/* Footer offices: one block per location, same type and colours as the old address */
.foot-in .office{display:flex;flex-direction:column;gap:4px;margin-bottom:8px}
.foot-in .office b{font:600 14px var(--f-body);color:#fff}
.foot-in .office a{align-self:flex-start}

/* Our Team */
.center-sub{max-width:60ch;margin:12px auto 0;text-align:center}
.team{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:40px}
.member{background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);padding:14px 14px 22px;text-align:center}
.member-ph{aspect-ratio:4/5;border-radius:var(--r-img,16px);background:linear-gradient(160deg,var(--light),#eef4fb);display:grid;place-items:center;color:var(--baby);margin-bottom:16px;overflow:hidden}
.member-ph svg{width:38%;height:38%}
.member-ph img{width:100%;height:100%;object-fit:cover}
.member h3{font-size:19px}
.member p{margin:4px 0 0;font-size:15px;color:var(--accent)}
/* Products */
.products{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px}
.product{background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);padding:28px;display:flex;flex-direction:column;gap:12px;transition:box-shadow .2s,border-color .2s}
.product:hover{box-shadow:var(--sh-2);border-color:var(--navy)}
.product-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.product h3{font-size:22px}
.product p{margin:0}
.product .ticks{margin:4px 0}
.product-plan{font:600 14px var(--f-body);color:var(--accent);border-top:1px solid var(--line);padding-top:14px;margin-top:auto!important}
.product .ctas{margin-top:4px;flex-wrap:wrap;gap:12px 20px;align-items:center}
@media (max-width:1100px){.team{grid-template-columns:repeat(3,1fr)}.products{grid-template-columns:repeat(2,1fr)}}
@media (max-width:900px){.team{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.products{grid-template-columns:1fr}.team{gap:14px}.member{padding:10px 10px 16px}.member h3{font-size:16px}}
@media (max-width:1100px){.head-in{gap:14px}.nav{gap:2px}.nav>a,.dd-btn{padding:10px 7px}}
/* Dropdowns near the end of the menu open toward the page so they never spill off-screen */
.nav .dd:nth-last-of-type(-n+2) .dd-menu{left:auto;right:-8px}
[dir=rtl] .nav .dd:nth-last-of-type(-n+2) .dd-menu{right:auto;left:-8px}

/* Text fills the full width of its container before wrapping:
   headings no longer "balance" into short equal lines, and paragraphs have no character-count caps. */
h1,h2,h3,h4{text-wrap:pretty}
.lead,.sub,.note,.banner-sub,.center-sub,.msg-p,.statement .quote,details p{max-width:none}
.close-in>div{max-width:none;flex:1 1 420px}
.cta-txt{max-width:none;flex:1 1 420px}

/* ---------- Content from the 2026 company profile ---------- */
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 28px;margin:26px 0 4px;padding-top:22px;border-top:1px solid var(--line)}
.facts dt{font:700 12px var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.facts dd{margin:4px 0 0;font:700 18px var(--f-display);color:var(--navy)}
.whatwe{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:0;border-top:1px solid var(--line)}
.whatwe li{display:grid;grid-template-columns:110px 1fr;gap:16px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--line);color:var(--body)}
.whatwe a{font:700 17px var(--f-display);color:var(--navy);text-decoration:none}
.whatwe a:hover{color:var(--accent)}
.whatwe .num,.inc-i .num{font:700 12px var(--f-body);letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.inc-i .num{display:block;margin-bottom:8px}
.inc-i .best,.product-best{margin-top:10px;font-size:15px;color:var(--navy);font-weight:600}
.steps .sn-get{margin-top:8px;font-size:15px;color:var(--navy);font-weight:600}
.reasons{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px}
.reasons .vcard{min-height:0}
.team-eb{margin:44px 0 0}
.products{grid-template-columns:repeat(2,1fr)}
.product .product-plan{margin-top:auto!important}
@media (max-width:900px){.reasons{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.reasons,.facts{grid-template-columns:1fr}.whatwe li{grid-template-columns:1fr;gap:4px}.products{grid-template-columns:1fr}}
[dir=rtl] .whatwe .num,[dir=rtl] .inc-i .num,[dir=rtl] .facts dt{letter-spacing:0;text-transform:none}
.reasons .vcard,.reasons .vcard:nth-child(even){background:var(--white);border-color:var(--line)}
.inc.ways{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}

/* Forms: live-submission states */
.ok[hidden]{display:none}
.ok.fail{background:#FDF0EF;border-color:#F2C4C0}
.ok.fail a{color:var(--navy)}
.form[aria-busy=true] button[type=submit]{opacity:.7;cursor:progress}
.hp{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;margin:-1px;padding:0;border:0}

/* ---------- Products: catalogue with filter sidebar ---------- */
.shop{display:grid;grid-template-columns:268px minmax(0,1fr);gap:32px;align-items:start;margin-top:44px}
.filters{position:sticky;top:calc(var(--head-h,80px) + 20px);background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);padding:22px 20px;display:grid;gap:22px}
.filters-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.filters-head h2{font-size:18px}
.freset{border:0;background:none;padding:0;font:600 14px var(--f-body);color:var(--accent);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.facet{border:0;margin:0;padding:18px 0 0;border-top:1px solid var(--line);display:grid;gap:4px;min-width:0}
.facet legend{font:700 12px var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--accent);padding:0;margin-bottom:10px;float:left;width:100%}
.fopt{display:grid;grid-template-columns:18px 1fr auto;align-items:center;gap:10px;padding:7px 8px;margin:0 -8px;border-radius:var(--r-ctl);cursor:pointer;font-size:15px;color:var(--ink)}
.fopt:hover{background:var(--soft)}
.fopt input{width:18px;height:18px;margin:0;accent-color:var(--navy);cursor:pointer}
.fopt .ct{font-size:12px;color:var(--body);background:var(--soft);border-radius:999px;padding:2px 8px;min-width:24px;text-align:center}
.fopt.zero{opacity:.45}
.fopt:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:1px}
.filters-note{border-top:1px solid var(--line);padding-top:18px;font-size:14px}
.filters-note p{margin:0 0 6px}
.shop-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.shop-count{margin:0;font:600 15px var(--f-body);color:var(--navy)}
.filters-toggle{display:none;align-items:center;gap:8px;border:1px solid var(--navy);background:var(--white);color:var(--navy);font:700 14px var(--f-body);padding:10px 16px;border-radius:var(--r-ctl);cursor:pointer}
.filters-toggle svg{width:18px;height:18px}
.filters-toggle .badge{background:var(--navy);color:#fff;border-radius:999px;font-size:12px;min-width:20px;padding:1px 6px;text-align:center}
.active-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.active-chips:empty{display:none}
.fchip{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--light);color:var(--navy);font:600 13px var(--f-body);padding:6px 12px;border-radius:999px;cursor:pointer}
.fchip::after{content:"×";font-size:16px;line-height:1}
.fchip:hover{border-color:var(--navy)}
.shop .products{margin-top:0}
.product[hidden]{display:none}
.ptags{display:flex;flex-wrap:wrap;gap:6px}
.ptag{font:600 12px var(--f-body);color:var(--navy);background:var(--soft);border-radius:999px;padding:3px 10px}
.shop-empty{background:var(--white);border:1px dashed var(--line-strong,#cfd5de);border-radius:var(--r-card);padding:36px;text-align:center}
.shop-empty h3{font-size:22px}
.shop-empty .ctas{justify-content:center}
.shop-empty .btn-ghost{border:0;background:none;cursor:pointer;font:inherit}
.custom-card{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;margin-top:24px;padding:22px 24px;border-radius:var(--r-card);background:var(--navy);color:#fff;text-decoration:none}
.custom-card .icon{background:rgba(139,185,232,.18);color:var(--baby)}
.custom-card b{display:block;font:700 19px var(--f-display);color:#fff}
.custom-card small{display:block;font-size:15px;color:var(--on-navy);margin-top:2px}
.custom-card .hub-go{color:var(--baby);margin:0;padding:0}
@media (max-width:1100px){.shop{grid-template-columns:240px minmax(0,1fr);gap:24px}.shop .products{grid-template-columns:1fr}}
@media (max-width:900px){
  .shop{grid-template-columns:1fr;margin-top:32px}
  .filters{position:static;display:none}
  .filters.open{display:grid}
  .filters-toggle{display:inline-flex}
  .shop .products{grid-template-columns:1fr 1fr}
  .custom-card{grid-template-columns:auto 1fr}.custom-card .hub-go{grid-column:1/-1}
}
@media (max-width:560px){.shop .products{grid-template-columns:1fr}}
[dir=rtl] .facet legend{float:right;letter-spacing:0;text-transform:none}
[dir=rtl] .fchip::after{order:-1}

/* ---------- Need a Custom Product? ---------- */
.cp-intro{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.9fr);gap:48px;align-items:start}
.cp-next{background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);padding:28px}
.cp-next h3{font-size:20px;margin-bottom:16px}
.cp-steps{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.cp-steps li{display:grid;grid-template-columns:36px 1fr;gap:14px;align-items:start}
.cp-steps h3{font-size:17px;margin:0}
.cp-steps p{margin:4px 0 0;font-size:15px}
.cp-form .form{max-width:820px;margin:32px auto 0}
@media (max-width:900px){.cp-intro{grid-template-columns:1fr;gap:28px}}
.cp-steps .sn{position:static;width:36px;height:36px;font-size:15px}
@media (max-width:900px){
  .shop{gap:14px}
  .shop-main{display:contents}
  .shop-bar{order:0;margin-bottom:0}
  .filters{order:1}
  .active-chips{order:2;margin-bottom:0}
  .shop .products,.shop-empty{order:3}
  .custom-card{order:4;margin-top:10px}
}

/* Services hub: sixth tile, "Start here" call to action (same card frame, brand-navy surface) */
.hub-cta{position:relative;overflow:hidden;isolation:isolate;background:var(--navy);border-color:var(--navy);color:var(--on-navy)}
.hub-cta::before{content:"";position:absolute;inset:auto -30% -45% auto;width:85%;aspect-ratio:1;border-radius:50%;z-index:-1;
  background:radial-gradient(closest-side,rgba(139,185,232,.32),rgba(139,185,232,0));pointer-events:none}
.hub-cta::after{content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;z-index:-1;border:1px solid rgba(139,185,232,.25);
  box-shadow:0 0 0 28px rgba(139,185,232,.05),0 0 0 56px rgba(139,185,232,.035);pointer-events:none}
.hub-cta:hover{transform:none;border-color:var(--navy)}
.hub-cta .hub-step{color:var(--baby);border-color:var(--baby)}
.hub-cta h3{color:#fff}
.hub-cta .hub-h{color:var(--baby)}
.hub-cta p{color:var(--on-navy)}
.hub-path{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:4px 0 0;padding:0}
.hub-path span{font:700 11px var(--f-body);letter-spacing:.1em;text-transform:uppercase;color:#fff;background:rgba(139,185,232,.14);border:1px solid rgba(139,185,232,.3);border-radius:999px;padding:4px 10px}
.hub-cta-go{margin-top:auto;padding-top:14px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}
.hub-cta-go .hub-go{margin:0;padding:0;color:var(--baby);font-size:14px}
.hub-cta-go .hub-go:hover{color:#fff}
[dir=rtl] .hub-cta::after{right:auto;left:-60px}
[dir=rtl] .hub-cta::before{inset:auto auto -45% -30%}
[dir=rtl] .hub-path span{letter-spacing:0}

/* Home hero fills the first screen on laptops and desktops: viewport minus the header,
   never shorter than 600px and capped at 900px so very tall screens don't get an empty hero.
   Content is centred vertically, the slider controls sit on the bottom edge, and the photo
   circle scales with the screen height. Tablets and phones keep their natural stacked height. */
@media (min-width:901px){
  .hslider{min-height:clamp(600px,calc(100vh - var(--head-h) - 1px),900px);min-height:clamp(600px,calc(100svh - var(--head-h) - 1px),900px);display:flex;flex-direction:column}
  .hslider>.wrap{flex:1;display:flex;flex-direction:column;width:100%}
  .hslider .slides{flex:1;align-items:center}
  .slide{padding-block:clamp(28px,5vh,72px) clamp(20px,3vh,40px)}
  .slide .hero-art{max-width:min(460px,54vh)}
  .slider-ctl{padding-bottom:clamp(24px,4vh,44px)}
}

/* ---------- News & event detail ---------- */
.article-wrap{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:48px;align-items:start}
.article{min-width:0;max-width:780px}
.art-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px;font-size:14px;color:var(--body)}
.art-meta span:not(.tag){display:inline-flex;align-items:center;gap:6px}
.art-meta svg{width:16px;height:16px;color:var(--accent)}
.art-lead{font:600 clamp(19px,1.8vw,23px)/1.5 var(--f-display);color:var(--navy);margin:20px 0 26px}
.art-img{aspect-ratio:16/9;margin:0 0 32px}
.art-img img{width:100%;height:100%;object-fit:cover}
.prose{font-size:17px;line-height:1.8;color:var(--ink)}
.prose p{margin:0 0 18px}
.prose h2{font-size:clamp(22px,2.2vw,28px);margin:34px 0 12px}
.prose ul{margin:0 0 20px;padding-inline-start:22px}
.prose li{margin-bottom:8px}
.prose li::marker{color:var(--teal)}
.prose blockquote{margin:28px 0;padding:22px 26px;border-inline-start:4px solid var(--baby);background:var(--white);border-radius:var(--r-card)}
.prose blockquote p{font:600 20px/1.5 var(--f-display);color:var(--navy);margin:0 0 8px}
.prose cite{font-style:normal;font-size:14px;color:var(--body)}
.art-ph{font-size:13px;color:var(--body);border:1px dashed var(--line-strong,#cfd5de);border-radius:var(--r-ctl);padding:10px 14px;margin:8px 0 0}
.art-side{display:grid;gap:18px;position:sticky;top:calc(var(--head-h) + 20px)}
.art-side .side-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);padding:24px;display:grid;gap:14px}
.art-side .side-card h3{font-size:19px}
.art-side .side-card p{margin:0;font-size:15px}
.art-side .btn{justify-self:start}
.ev-card{border-top:4px solid var(--teal)!important}
.ev-dl{display:grid;gap:12px;margin:0}
.ev-dl div{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;padding-bottom:12px;border-bottom:1px solid var(--line)}
.ev-dl dt{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--body)}
.ev-dl dt svg{width:17px;height:17px;color:var(--teal)}
.ev-dl dd{margin:0;font-weight:600;color:var(--navy);font-size:14px;text-align:end}
.share{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.share-k{font:700 12px var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-inline-end:6px}
.share-b{position:relative;width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--line);border-radius:var(--r-ctl);background:var(--white);color:var(--navy);cursor:pointer;transition:background .2s,color .2s,border-color .2s,transform .2s}
.share-b svg{width:17px;height:17px}
.share-b:hover{background:var(--navy);color:#fff;border-color:var(--navy);transform:translateY(-2px)}
.share-b.done{background:var(--teal);border-color:var(--teal);color:#fff}
.share-b.done::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);white-space:nowrap;background:var(--navy);color:#fff;font:600 12px var(--f-body);padding:5px 9px;border-radius:var(--r-ctl)}
.back-link{margin:0;padding:0}
[dir=rtl] .back-link svg,[dir=rtl] .pager svg{transform:scaleX(-1)}
.pager{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:36px;padding-top:28px;border-top:1px solid var(--line)}
.pager a{display:grid;gap:6px;padding:18px 20px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--white);text-decoration:none;transition:border-color .2s,box-shadow .2s}
.pager a:hover{border-color:var(--navy);box-shadow:var(--sh-1)}
.pager small{display:inline-flex;align-items:center;gap:6px;font:700 12px var(--f-body);letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.pager small svg{width:15px;height:15px}
.pager b{font:700 17px var(--f-display);color:var(--navy)}
.pager .nx{text-align:end}.pager .nx small{justify-content:flex-end}
[dir=rtl] .share-k,[dir=rtl] .pager small{letter-spacing:0;text-transform:none}
@media (max-width:1000px){.article-wrap{grid-template-columns:1fr;gap:32px}.art-side{position:static;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}.article{max-width:none}}
@media (max-width:560px){.pager{grid-template-columns:1fr}.prose{font-size:16px}}
@media (max-width:1000px){.article-wrap:has(.ev-card) .art-side{order:-1}}
.head-cta.on{box-shadow:0 0 0 3px var(--light),0 0 0 4px var(--navy)}

/* ==========================================================================
   Navigation: CMS icons and sub-menus (added with the CMS; nothing here applies
   until a menu item uses an icon or a sub-menu, so the original pages are unchanged)
   ========================================================================== */
.nav-ic{display:inline-grid;place-items:center;flex:none}
.nav-ic svg{width:16px;height:16px}
.dd[data-open] .dd-btn .nav-ic svg{transform:none}

/* Dropdown entries with an icon: a tinted chip, then the text */
.dd-menu a.has-ic,.dd-sub-full.has-ic{grid-template-columns:36px minmax(0,1fr);column-gap:12px;align-items:start}
.dd-menu a.has-ic>.nav-ic,.dd-sub-full>.nav-ic{width:36px;height:36px;border-radius:var(--r-ctl);background:var(--light);color:var(--navy)}
.dd-menu a.has-ic>.nav-ic svg,.dd-sub-full>.nav-ic svg{width:20px;height:20px}
.dd-txt{display:grid;gap:2px;min-width:0}

/* Level 3: a vertical sub-menu (accordion) inside the dropdown */
.dd-sub{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start}
.dd-sub-btn{width:36px;height:36px;margin-top:6px;border:0;border-radius:var(--r-ctl);background:none;color:var(--navy);cursor:pointer;display:grid;place-items:center;padding:0}
.dd-sub-btn:hover{background:var(--soft)}
.dd-sub-btn svg{width:14px;height:14px;transition:transform .2s}
.dd-sub-btn[aria-expanded=true]>svg{transform:rotate(180deg)}
.dd-sub-full{grid-column:1/-1;width:100%;height:auto;margin-top:0;padding:10px 12px;text-align:start;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;align-items:center;font:inherit;color:inherit}
.dd-sub-full.has-ic{grid-template-columns:36px minmax(0,1fr) auto}
.dd-sub-full b{font:700 15px var(--f-display);color:var(--navy)}
.dd-sub-full small{font-size:13px;line-height:1.4;color:var(--body)}
.dd-sub-full .dd-tag{font:700 11px var(--f-body);letter-spacing:.12em;color:var(--teal);text-transform:uppercase}
.dd-sub-menu{grid-column:1/-1;display:grid;gap:2px;margin-inline-start:12px;padding-inline-start:10px;border-inline-start:2px solid var(--light)}
.dd-sub-menu[hidden]{display:none}

/* Footer links with an icon */
.foot-in a.has-ic{display:inline-flex;align-items:center;gap:8px}
.foot-in a.has-ic .nav-ic svg{width:16px;height:16px}
@media (min-width:901px){.foot-in[data-cols="3"]{grid-template-columns:1.4fr 1fr 1fr 1fr 1.2fr}}

@media (max-width:900px){
  .m-nav a.has-ic{justify-content:flex-start;gap:10px}
  .m-lbl{display:inline-flex;align-items:center;gap:10px}
  .m-nav .nav-ic svg{width:18px;height:18px}
  .m-nav details[open] summary .nav-ic svg{transform:none}
  /* nested details: the chevron of a closed sub-menu must not follow its open parent */
  .m-nav details.m-sub>summary>svg{transform:none}
  .m-nav details.m-sub[open]>summary>svg{transform:rotate(180deg)}
  .m-nav details details>summary{font:500 15px var(--f-body);color:var(--body);padding:12px 4px 12px 16px}
  .m-nav details details a{padding-left:32px}
}

/* ==========================================================================
   Draft preview bar (only rendered while an editor previews unpublished changes)
   ========================================================================== */
.preview-bar{position:fixed;z-index:1000;inset-inline:0;bottom:0;display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;justify-content:center;padding:10px 16px;background:var(--amber);color:var(--ink);font:600 14px var(--f-body);box-shadow:0 -2px 12px rgba(16,31,80,.25)}
.preview-bar a{color:var(--navy);font-weight:700;text-decoration:underline}