/* ============================================================
BOSIO tokens — overrides on top of Modulabs styles.css.
Load AFTER styles.css. Colours + fonts only. Fully reversible
(delete this file + its (z-index:-100) and below all hero content */
.hero-home-b-section .video-home-b::before{content:"";position:absolute;inset:0;z-index:-50;pointer-events:none;background:linear-gradient(180deg,rgba(9,10,12,.52) 0%,rgba(9,10,12,.28) 45%,rgba(9,10,12,.40) 100%)}
/* Hero supporting paragraph (sits between the H1 and the CTAs) */
.hero-sub-b{max-width:56ch;margin:-10px 0 0;font-family:"Geist",sans-serif;font-size:clamp(15px,1.1vw,17px);line-height:1.55;letter-spacing:-.005em;color:rgba(255,255,255,.74)}
@media (max-width:767px){.hero-sub-b{max-width:none;margin-top:-6px;font-size:15px;line-height:1.5}}
/* Hero EASA verification box (card style, bottom-right, downloadable rows) */
.hero-verifications{position:absolute;right:clamp(16px,4vw,56px);bottom:clamp(16px,4vw,48px);z-index:6;width:min(340px,82vw);display:flex;flex-direction:column;padding:16px 18px;background:rgba(11,11,13,.52);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.18);color:#fff}
.hero-verifications .vc-head{display:flex;align-items:center;gap:10px;padding-bottom:12px;margin-bottom:4px;border-bottom:1px solid rgba(255,255,255,.14)}
/* EASA logo chip: white plate so the blue mark stays legible on the dark card */
.hero-verifications .vc-badge{flex:none;display:inline-flex;align-items:center;width:auto;height:auto;padding:5px 7px;background:#fff}
.hero-verifications .vc-badge img{display:block;width:auto;height:22px}
.hero-verifications .vc-head-txt{font-family:"Switzer",sans-serif;font-size:12.5px;font-weight:600;letter-spacing:-.01em}
.vc-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:9px 2px;text-decoration:none;color:rgba(255,255,255,.8);cursor:pointer;transition:color .18s}
.vc-row+.vc-row{border-top:1px solid rgba(255,255,255,.08)}
.vc-row:hover{color:#fff}
.vc-row-txt{font-size:11.5px;letter-spacing:.01em}
.vc-row-txt b{font-weight:600;color:#fff}
.vc-dl{width:18px;height:18px;flex:none;color:var(--color-base-accent-secondary);transition:transform .2s,color .2s}
.vc-row:hover .vc-dl{transform:translateY(2px);color:#fff}
.vc-dl svg{width:100%;height:100%;display:block}
@media (max-width:820px){.hero-verifications{display:none}}
/* Light sections need an explicit background (body is dark) */
.section.light-mode{background:var(--color-base-background-base-light)}
.section.light-mode.is-warm{background:var(--color-base-background-depth-light)}
/* ---- Approvals & proof band (warm light section) ----
Row A: intro copy left, EASA certificates right. Row B: stat strip on a rule. */
.bosio-proof{display:flex;flex-direction:column;gap:clamp(44px,5vw,72px)}
.bproof-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:clamp(32px,5vw,96px);align-items:start}
.bproof-intro{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.bproof-intro h2{max-width:19ch}
.bproof-intro .body-medium{max-width:52ch}
.bproof-certs{display:flex;flex-direction:column;gap:10px}
.bcert-head{display:flex;align-items:center;gap:12px;padding-bottom:14px;margin-bottom:2px;border-bottom:1px solid var(--color-tokens-border-subtle)}
.bcert-logo{width:auto;height:26px;display:block;flex:none}
.bcert-head-txt{font-size:12.5px;letter-spacing:.01em;color:var(--color-tokens-text-body-medium)}
.bcert{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:20px;padding:18px 20px;text-decoration:none;background:var(--color-base-background-lift-light);border:1px solid var(--color-tokens-border-subtle);transition:border-color .25s ease}
.bcert:hover{border-color:var(--color-base-neutral-dark-48)}
.bcert-txt{display:flex;flex-direction:column;gap:5px;min-width:0}
.bcert-code{font-family:"Switzer",sans-serif;font-weight:600;font-size:20px;letter-spacing:-.02em;line-height:1;color:var(--color-tokens-text-heading-strong)}
.bcert-scope{font-size:12.5px;line-height:1.4;color:var(--color-tokens-text-body-medium)}
.bcert-dl{display:inline-flex;align-items:center;gap:8px;flex:none;font-family:"Geist Mono",ui-monospace,monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--color-base-accent-primary)}
.bcert-dl svg{width:15px;height:15px;display:block;transition:transform .25s ease}
.bcert:hover .bcert-dl svg{transform:translateY(2px)}
.bproof-strip{display:grid;grid-template-columns:repeat(4,1fr);padding-top:clamp(28px,3vw,44px);border-top:1px solid var(--color-tokens-border-subtle)}
.bstat{display:flex;flex-direction:column;padding:0 clamp(18px,2.6vw,44px)}
.bstat:first-child{padding-left:0}
.bstat:last-child{padding-right:0}
.bstat+.bstat{border-left:1px solid var(--color-tokens-border-subtle)}
.bstat-top{display:flex;align-items:center;gap:clamp(10px,1vw,16px)}
/* muted brand red: keeps the strip on-brand without the full-strength CTA red */
.bstat-ico{flex:none;display:block;width:clamp(26px,2.1vw,34px);height:clamp(26px,2.1vw,34px);color:#C45858}
.bstat-ico svg{width:100%;height:100%;display:block;fill:currentColor}
.bstat-num{font-family:"Switzer",sans-serif;font-weight:600;font-size:clamp(34px,4vw,58px);letter-spacing:-.035em;line-height:1;color:var(--color-tokens-text-heading-strong)}
.bstat-lab{margin-top:14px;font-size:13px;line-height:1.4;color:var(--color-tokens-text-body-medium)}
@media (max-width:991px){
.bproof-top{grid-template-columns:1fr;gap:40px}
.bproof-intro{max-width:56ch}
.bproof-intro h2,.bproof-intro .body-medium{max-width:none}
}
@media (max-width:700px){
.bproof-strip{grid-template-columns:1fr 1fr;gap:28px 0}
.bstat{padding:0 clamp(14px,4vw,24px)}
.bstat:nth-child(odd){padding-left:0;border-left:0}
.bstat:nth-child(even){padding-right:0}
.bcert{grid-template-columns:1fr;gap:14px}
}
/* Why Bosio: client story card sits in the bottom-left of the image, not centred */
.overlay-client-story{justify-content:flex-start;align-items:flex-end;padding:clamp(16px,2.2vw,28px)}
.card-client-story{max-width:320px}
/* Testimonials headline: left-aligned so it lines up with the prev/next arrows below */
.headline-testimonials{text-align:left;align-items:flex-start;margin-left:0}
.heading-testimonials{align-items:flex-start}
.heading-testimonials .body-medium{max-width:52ch}
/* Osmo testimonials (crossfade, ported from old redesign) */
.testimonial-lines{display:flex;flex-flow:wrap;justify-content:flex-start;align-items:flex-start;gap:1.25em}
.testimonial-lines__controls{display:flex;gap:1em;width:33.333%}
.testimonial-lines__button{display:flex;justify-content:center;align-items:center;width:2.6em;height:2.6em;padding:0;cursor:pointer;background:none;border:1px solid rgba(255,255,255,.24);color:#fff;transition:background-color .2s ease,border-color .2s ease}
.testimonial-lines__button:hover{background:var(--color-base-accent-primary);border-color:var(--color-base-accent-primary)}
.testimonial-lines__arrow{width:.8em}
.testimonial-lines__main{display:flex;flex-flow:column;flex:1;justify-content:flex-start;align-items:flex-start;gap:clamp(2.5em,4vw,5em)}
.testimonial-lines__main-details{display:flex;flex-flow:row;justify-content:flex-start;align-items:center;gap:1.5em}
.testimonial-lines__count{display:inline-block;width:1ch;color:var(--color-base-accent-secondary)}
.testimonial-lines__p{margin:0;font-size:clamp(11px,.85vw,13px);font-weight:600;letter-spacing:.01em;line-height:1.3;color:#fff}
.testimonial-lines__p.is--faded{opacity:.5;letter-spacing:0;font-weight:400}
.testimonial-lines__collection{width:100%}
.testimonial-lines__list{width:100%;display:grid;position:relative}
.testimonial-lines__item{grid-area:1/1;display:flex;flex-flow:column;justify-content:flex-start;align-items:flex-start;gap:clamp(2em,3vw,4em);width:100%;opacity:0;visibility:hidden;position:relative}
.testimonial-lines__item.is--active{opacity:1;visibility:visible}
.testimonial-lines__h{width:100%;margin:0;font-family:"Geist Variable",sans-serif;font-weight:300;font-size:clamp(24px,3.2vw,50px);line-height:1.14;letter-spacing:-.02em;color:#fff}
.testimonial-lines__item-details{display:flex;flex-flow:row;justify-content:flex-start;align-items:center;gap:1.25em}
.testimonial-lines__item-visual{aspect-ratio:1;width:4.5em;border-radius:50%;overflow:hidden;border:1px solid rgba(255,255,255,.18)}
.testimonial-lines__item-img{width:100%;height:100%;object-fit:cover;filter:saturate(.85) contrast(1.05)}
.testimonial-lines__item-details .testimonial-lines__p:first-child{font-size:13px;font-weight:600}
@media (max-width:767px){.testimonial-lines{gap:3em}.testimonial-lines__controls{order:9999;width:100%}.testimonial-lines__main{gap:3em}.testimonial-lines__h{font-size:26px}.testimonial-lines__item-visual{width:3.5em}}
.bnews-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.4vw,32px);margin-top:clamp(28px,4vw,48px)}
.bnews-card{display:flex;flex-direction:column;text-decoration:none;color:inherit;border:1px solid var(--color-tokens-border-subtle);background:var(--color-tokens-background-lift);overflow:hidden;transition:border-color .25s ease,transform .25s ease}
.bnews-card:hover{border-color:var(--color-base-accent-primary);transform:translateY(-3px)}
.bnews-img{aspect-ratio:16/9;overflow:hidden;background:var(--color-base-neutral-dark-100)}
.bnews-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.bnews-card:hover .bnews-img img{transform:scale(1.05)}
.bnews-body{display:flex;flex-direction:column;gap:12px;padding:clamp(20px,2vw,28px)}
.bnews-meta{display:flex;gap:10px;align-items:center;font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--color-tokens-text-body-medium)}
.bnews-cat{color:var(--color-base-accent-secondary);text-transform:uppercase;letter-spacing:.12em}
.bnews-card h3{font-family:"Switzer",sans-serif;font-weight:600;font-size:clamp(18px,1.6vw,23px);letter-spacing:-.01em;line-height:1.2;color:var(--color-tokens-text-heading-strong);margin:0}
.bnews-card p{font-size:13.5px;line-height:1.6;color:var(--color-tokens-text-body-medium);margin:0}
@media (max-width:760px){.bnews-grid{grid-template-columns:1fr}}
/* Services dropdown: 4 photo cards (like the old Bosio nav) */
/* Panel is a full-width fixed bar, so its max-width must exclude the page padding
that .nav-container carries INSIDE its own max-width, otherwise the dropdown
sits 32px wider than the nav on both sides. */
.nav-dropdown-list{max-width:calc(var(--container--main) - 2 * var(--grid--page-padding))}
.bnav-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;width:100%}
.bnav-card{display:flex;flex-direction:column;text-decoration:none;color:inherit;border:1px solid var(--color-tokens-border-subtle);background:var(--color-tokens-background-lift);overflow:hidden;transition:background-color .25s ease}
.bnav-card:hover{background:var(--color-base-neutral-light-8)}
.bnav-img{aspect-ratio:16/11;overflow:hidden;background:var(--color-base-neutral-dark-100)}
.bnav-img .image-cover{width:100%;height:100%;object-fit:cover;transition:transform .55s cubic-bezier(.16,1,.3,1)}
.bnav-card:hover .bnav-img .image-cover{transform:scale(1.025)}
.bnav-body{padding:16px 16px 18px}
.bnav-title{font-family:"Switzer",sans-serif;font-weight:600;font-size:15px;letter-spacing:-.01em;color:var(--color-tokens-text-heading-strong);margin-bottom:5px}
.bnav-sub{font-size:12px;line-height:1.4;color:var(--color-tokens-text-body-medium)}
@media (max-width:991px){.bnav-grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.bnav-grid{grid-template-columns:1fr}}
/* Divisions: uniform hover for ALL cards (image zoom + border), covers the two added cards */
.card-service-expandable .image-cover{transition:transform .6s cubic-bezier(.16,1,.3,1)}
.card-service-expandable:hover{border-color:rgba(255,255,255,.28)}
.card-service-expandable:hover .image-cover{transform:scale(1.06)}
.card-service-expandable .button-slider{transition:transform .3s ease}
.card-service-expandable:hover .button-slider{transform:translate(4px,-4px)}
/* mop up hardcoded rounding on rectangular surfaces (images, cards, tiles, inputs).
Circular elements (dots, avatars, round icon buttons) use border-radius:100%/full and are untouched. */
img,.image-cover,[class*="image-wrap"],[class*="card"],[class*="tile"],.text-field,input,select,textarea,.nav-bg,.dropdown-list,.modal-inner{border-radius:0!important}
/* ============================================================
ABOUT PAGE (about.html)
============================================================ */
/* Hero: template's about hero, re-skinned with a Bosio photo */
.section.hero-about-section{background-image:url('../images/av-about-hero.jpg');min-height:min(78vh,760px)}
.headline-about{position:relative;z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:22px;max-width:var(--max-width--8-columns)}
.headline-about h1{margin:0}
.about-hero-lead{max-width:60ch;margin:0;font-size:clamp(15px,1.1vw,17px);line-height:1.55;color:rgba(255,255,255,.76)}
.about-hero-meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.about-hero-meta span{padding:8px 14px;border:1px solid rgba(255,255,255,.22);background:rgba(11,11,13,.4);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-family:"Geist Mono",ui-monospace,monospace;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:rgba(255,255,255,.82)}
@media (max-width:767px){.section.hero-about-section{min-height:0;padding-top:var(--section-padding--large)}}
/* Mission: copy left, photo right, stat strip underneath */
.amission{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(32px,4vw,80px);align-items:center;margin-bottom:clamp(48px,6vw,88px)}
.amission-copy{display:flex;flex-direction:column;align-items:flex-start;gap:22px}
.amission-copy h2{max-width:16ch}
.amission-copy .body-medium{max-width:56ch}
.amission-copy .cta-main{margin-top:8px}
.amission-media{position:relative;aspect-ratio:4/3;overflow:hidden;border:1px solid var(--color-tokens-border-subtle)}
.bproof-strip.is-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:991px){.amission{grid-template-columns:1fr;gap:36px}.amission-copy h2,.amission-copy .body-medium{max-width:none}}
@media (max-width:700px){.bproof-strip.is-3{grid-template-columns:1fr 1fr}.bproof-strip.is-3 .bstat:nth-child(3){padding-left:0;border-left:0}}
/* Team */
.ateam-head{display:flex;flex-direction:column;align-items:flex-start;gap:20px;margin-bottom:clamp(40px,4.5vw,64px)}
.ateam-head h2{max-width:18ch}
.ateam-head .body-medium{max-width:62ch}
.ateam-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,1.6vw,24px)}
.ateam-card{display:flex;flex-direction:column;border:1px solid var(--color-tokens-border-subtle);background:var(--color-tokens-background-lift);overflow:hidden;transition:border-color .25s ease}
.ateam-card:hover{border-color:var(--color-base-neutral-light-32)}
/* 4/5 is close to the source headshots (460x620), so the crop barely bites;
top-anchored so the headroom survives and the cut comes off the chest */
.ateam-photo{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--color-base-background-depth-dark)}
.ateam-photo .image-cover{width:100%;height:100%;object-fit:cover;object-position:50% 0;filter:grayscale(1) contrast(1.04);transition:filter .35s ease,transform .5s cubic-bezier(.16,1,.3,1)}
.ateam-card:hover .ateam-photo .image-cover{filter:grayscale(0) contrast(1);transform:scale(1.02)}
.ateam-photo.is-initials{display:grid;place-items:center;background:var(--color-base-background-depth-dark)}
.ateam-photo.is-initials span{font-family:"Switzer",sans-serif;font-weight:600;font-size:clamp(28px,3vw,44px);letter-spacing:-.02em;color:var(--color-base-accent-secondary)}
.ateam-body{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:18px 18px 20px}
.ateam-num{font-family:"Geist Mono",ui-monospace,monospace;font-size:10.5px;letter-spacing:.12em;color:var(--color-base-accent-secondary);margin-bottom:2px}
.ateam-name{margin:0;font-family:"Switzer",sans-serif;font-weight:600;font-size:16px;line-height:1.25;letter-spacing:-.015em;color:var(--color-tokens-text-heading-strong)}
.ateam-role{font-size:12.5px;line-height:1.4;color:var(--color-tokens-text-body-medium)}
.ateam-mail{margin-top:6px;font-size:12px;line-height:1.3;word-break:break-all;color:var(--color-tokens-text-body-medium);text-decoration:none;border-bottom:1px solid transparent;transition:color .2s ease,border-color .2s ease}
.ateam-mail:hover{color:var(--color-base-accent-secondary);border-bottom-color:currentColor}
@media (max-width:1100px){.ateam-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:767px){.ateam-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:460px){.ateam-grid{grid-template-columns:1fr}}
/* Approvals */
.aappr-head{display:flex;flex-direction:column;align-items:flex-start;gap:20px;margin-bottom:clamp(36px,4vw,56px)}
.aappr-head h2{max-width:18ch}
.aappr-head .body-medium{max-width:58ch}
.aappr-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,28px)}
.aappr-card{display:flex;flex-direction:column;align-items:flex-start;padding:clamp(24px,2.4vw,36px);background:var(--color-base-background-lift-light);border:1px solid var(--color-tokens-border-subtle)}
.aappr-card-head{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;padding-bottom:20px;margin-bottom:22px;border-bottom:1px solid var(--color-tokens-border-subtle)}
.aappr-logo{width:auto;height:26px;display:block;flex:none}
.aappr-code{font-family:"Geist Mono",ui-monospace,monospace;font-size:12px;letter-spacing:.06em;color:var(--color-tokens-text-body-medium)}
.aappr-title{margin:0 0 6px;font-family:"Switzer",sans-serif;font-weight:600;font-size:clamp(22px,2vw,28px);letter-spacing:-.02em;line-height:1.1;color:var(--color-tokens-text-heading-strong)}
.aappr-sub{margin:0 0 20px;font-size:13.5px;color:var(--color-tokens-text-body-medium)}
.aappr-list{list-style:none;margin:0 0 26px;padding:0;display:flex;flex-direction:column;gap:11px;width:100%}
.aappr-list li{position:relative;padding-left:20px;font-size:14px;line-height:1.5;color:var(--color-tokens-text-body-strong)}
.aappr-list li::before{content:"";position:absolute;left:0;top:.55em;width:7px;height:7px;background:var(--color-base-accent-primary)}
.aappr-dl{display:inline-flex;align-items:center;gap:8px;margin-top:auto;font-family:"Geist Mono",ui-monospace,monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;color:var(--color-base-accent-primary)}
.aappr-dl svg{width:15px;height:15px;display:block;transition:transform .25s ease}
.aappr-dl:hover svg{transform:translateY(2px)}
@media (max-width:767px){.aappr-grid{grid-template-columns:1fr}}
/* ---- Locations: Mapbox store locator (ported from the old redesign) ---- */
.aloc-head{display:flex;flex-direction:column;align-items:flex-start;gap:20px;margin-bottom:clamp(32px,3.5vw,48px)}
.aloc-head h2{max-width:16ch}
.aloc-head .body-medium{max-width:56ch}
.store-locator{width:100%;position:relative;z-index:2}
.store-locator__inner{display:flex;gap:clamp(16px,2vw,28px);width:100%;min-height:34em}
.store-locator__side{display:flex;flex-flow:column;width:100%;max-width:26em;flex:none;max-height:38em;overflow:auto;scrollbar-width:thin}
.store-locator__list{display:flex;flex-flow:column;gap:12px}
.loc-item{cursor:pointer;position:relative;display:flex;flex-flow:column;align-items:flex-start;padding:20px 22px;border:1px solid var(--color-tokens-border-subtle);background:var(--color-tokens-background-lift);transition:border-color .25s ease,background-color .25s ease}
.loc-item:hover{border-color:var(--color-base-neutral-light-32)}
.loc-item[data-active="true"]{border-color:var(--color-base-accent-primary);background:var(--color-base-background-depth-dark)}
.loc-eyebrow{margin:0 0 8px;font-family:"Geist Mono",ui-monospace,monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--color-base-accent-secondary)}
.loc-name{margin:0 0 12px;font-family:"Switzer",sans-serif;font-weight:600;font-size:clamp(18px,1.6vw,22px);letter-spacing:-.02em;line-height:1.1;color:var(--color-tokens-text-heading-strong)}
.loc-address{display:flex;align-items:center;gap:.6em;color:var(--color-tokens-text-body-medium)}
.loc-address .loc-icon{width:16px;height:16px;flex:none;color:var(--color-base-accent-secondary)}
.loc-p{margin:0;font-size:13px;line-height:1.35}
.loc-status{margin-top:14px;display:inline-block;padding:5px 10px;font-family:"Geist Mono",ui-monospace,monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--color-base-accent-secondary);border:1px solid rgba(253,81,91,.5)}
.store-locator__main{flex:1;position:relative;overflow:hidden;min-height:34em;background:var(--color-tokens-background-lift);border:1px solid var(--color-tokens-border-subtle)}
.store-locator__map{position:absolute;inset:0;width:100%;height:100%}
.store-locator__fallback{position:absolute;inset:0;z-index:0;background:radial-gradient(circle at 40% 45%,rgba(215,0,37,.14),transparent 45%),repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 40px),repeating-linear-gradient(90deg,rgba(255,255,255,.03) 0 1px,transparent 1px 40px)}
[data-locator-init="initialized"] .store-locator__fallback{display:none}
/* the pin the JS clones: keep it out of the layout (clones drop this attribute).
Needs the class too, or the display:flex below wins on equal specificity. */
.store-locator__marker[data-locator-marker-template]{display:none}
/* Mapbox writes the pin position into this element's `transform` on every frame
of a pan. Any transition on transform here makes the pins lag behind and slide
around the map, so the marker node itself must never animate transform: the
hover/active scale lives on the inner icon instead. */
.store-locator__marker{color:#fff;background:var(--color-base-accent-primary);border-radius:100em;display:flex;justify-content:center;align-items:center;width:2.4em;height:2.4em;padding:.55em;cursor:pointer;box-shadow:0 6px 18px rgba(215,0,37,.5);transition:background-color .2s ease,box-shadow .2s ease}
.store-locator__marker:hover{background:var(--color-base-accent-secondary);box-shadow:0 8px 22px rgba(215,0,37,.65)}
.store-locator__marker-icon{width:100%;height:100%;transition:transform .2s ease}
.store-locator__marker:hover .store-locator__marker-icon{transform:scale(1.12)}
[data-locator-marker][data-active="true"] .store-locator__marker-icon{transform:scale(1.12)}
[data-locator-marker][data-active="true"]{outline:2px solid rgba(255,255,255,.6);outline-offset:4px}
.mapboxgl-ctrl-group{background:var(--color-tokens-background-lift)!important;border:1px solid var(--color-tokens-border-subtle)!important;border-radius:0!important}
.mapboxgl-ctrl-group button{background:var(--color-tokens-background-lift)!important}
.mapboxgl-ctrl-group button+button{border-top:1px solid var(--color-tokens-border-subtle)!important}
.mapboxgl-ctrl-icon{filter:invert(1) opacity(.7)}
.mapboxgl-ctrl-logo,.mapboxgl-ctrl-attrib{display:none!important}
@media (max-width:991px){
.store-locator__inner{flex-flow:column;gap:0;min-height:0}
.store-locator__main{order:-1;flex:0 auto;aspect-ratio:3/2;min-height:0;margin-bottom:20px}
.store-locator__side{max-width:none;max-height:none;overflow:visible}
.store-locator__list{flex-flow:row;overflow-x:auto;gap:12px;scroll-snap-type:x mandatory;scrollbar-width:none}
.store-locator__list::-webkit-scrollbar{display:none}
.loc-item{flex:0 0 auto;width:20em;scroll-snap-align:start}
}
@media (max-width:767px){.store-locator__main{aspect-ratio:1}.loc-item{width:16em}}
/* ============================================================
NEWS / BLOG LISTING (news-insights.html)
Dark hero, everything below it light.
============================================================ */
.section.hero-news-section{padding-top:var(--section-padding--extra-large);padding-bottom:var(--spacing--64);background-image:url('../images/bosio-aerial-nose.jpg');background-position:50% 40%;background-size:cover;justify-content:flex-start;align-items:flex-end;min-height:min(58vh,560px);display:flex}
/* the fuselage shot is bright at the top; .overlay-gradient-100 only darkens the
bottom, so add a scrim (sits under .main-container, which is z-index 3) */
.section.hero-news-section::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(90deg,rgba(9,10,12,.62) 0%,rgba(9,10,12,.34) 38%,rgba(9,10,12,0) 68%),linear-gradient(180deg,rgba(9,10,12,.5) 0%,rgba(9,10,12,.22) 42%,rgba(9,10,12,.1) 100%)}
@media (max-width:767px){.section.hero-news-section{min-height:340px;padding-top:calc(var(--section-padding--large) + 32px)}}
.nlist-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding-bottom:clamp(24px,2.6vw,36px);margin-bottom:clamp(32px,3.5vw,48px);border-bottom:1px solid var(--color-tokens-border-subtle)}
.nlist-head-left{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.nlist-count{flex:none;font-family:"Geist Mono",ui-monospace,monospace;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--color-tokens-text-body-medium)}
.npost-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,2.2vw,32px)}
.npost{display:flex;flex-direction:column;text-decoration:none;color:inherit;background:var(--color-base-background-lift-light);border:1px solid var(--color-tokens-border-subtle);overflow:hidden;transition:background-color .25s ease}
.npost-img{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--color-base-background-depth-dark)}
.npost-img .image-cover{width:100%;height:100%;object-fit:cover;transition:transform .55s cubic-bezier(.16,1,.3,1)}
.npost:hover .npost-img .image-cover{transform:scale(1.025)}
.npost-cat{position:absolute;left:16px;top:16px;padding:7px 12px;background:var(--color-base-accent-primary);color:#fff;font-family:"Geist Mono",ui-monospace,monospace;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase}
.npost-body{display:flex;flex-direction:column;align-items:flex-start;flex:1;padding:clamp(22px,2.2vw,32px)}
.npost-meta{display:flex;align-items:center;gap:8px;margin-bottom:14px;font-family:"Geist Mono",ui-monospace,monospace;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--color-tokens-text-body-medium)}
.npost-dot{opacity:.5}
.npost-title{margin:0 0 12px;font-family:"Switzer",sans-serif;font-weight:600;font-size:clamp(20px,1.9vw,27px);line-height:1.2;letter-spacing:-.025em;color:var(--color-tokens-text-heading-strong)}
.npost-ex{margin:0 0 24px;font-size:14.5px;line-height:1.6;color:var(--color-tokens-text-body-medium)}
.npost-more{display:inline-flex;align-items:center;gap:9px;margin-top:auto;font-family:"Geist Mono",ui-monospace,monospace;font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--color-base-accent-primary)}
.npost-more svg{width:16px;height:16px;display:block;transition:transform .25s ease}
.npost:hover .npost-more svg{transform:translateX(3px)}
@media (max-width:860px){.npost-grid{grid-template-columns:1fr}}
@media (max-width:560px){.nlist-head{flex-direction:column;align-items:flex-start;gap:16px}}
.ncta{display:flex;align-items:flex-end;justify-content:space-between;gap:clamp(28px,4vw,72px)}
.ncta-copy{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.ncta-copy h2{max-width:16ch}
.ncta-copy .body-medium{max-width:52ch}
.ncta-action{display:flex;flex-direction:column;align-items:flex-start;gap:14px;flex:none}
.ncta-note{font-size:12.5px;line-height:1.4;color:var(--color-tokens-text-body-medium);max-width:26ch}
@media (max-width:860px){.ncta{flex-direction:column;align-items:flex-start;gap:32px}.ncta-copy h2,.ncta-copy .body-medium{max-width:none}}
/* ============================================================
CONTACT PAGE (contact/contact-a.html)
Enquiry form ported from the old redesign, re-tokenised.
============================================================ */
.section.hero-contact-section{padding-top:var(--section-padding--extra-large);padding-bottom:var(--spacing--64);background-image:url('../images/bosio-night-ramp.jpg');background-position:50% 55%;background-size:cover;justify-content:flex-start;align-items:flex-end;min-height:min(62vh,600px);display:flex}
.section.hero-contact-section::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(90deg,rgba(9,10,12,.6) 0%,rgba(9,10,12,.3) 40%,rgba(9,10,12,0) 70%),linear-gradient(180deg,rgba(9,10,12,.5) 0%,rgba(9,10,12,.2) 45%,rgba(9,10,12,.1) 100%)}
@media (max-width:767px){.section.hero-contact-section{min-height:360px;padding-top:calc(var(--section-padding--large) + 32px)}}
.enquiry-grid{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1fr);gap:clamp(40px,5vw,96px);align-items:start}
.enquiry-side{display:flex;flex-direction:column;align-items:flex-start;gap:32px}
.cd-list{display:flex;flex-direction:column;gap:22px;width:100%}
.cd-item{display:flex;flex-direction:column;gap:6px}
.cd-label{font-family:"Geist Mono",ui-monospace,monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--color-tokens-text-body-medium)}
.cd-item a{font-size:16px;color:var(--color-tokens-text-heading-strong);text-decoration:none;border-bottom:1px solid transparent;transition:color .2s ease,border-color .2s ease;align-self:flex-start}
.cd-item a:hover{color:var(--color-base-accent-secondary);border-bottom-color:currentColor}
.cd-plain{font-size:16px;color:var(--color-tokens-text-body-medium)}
.aog-panel{display:flex;align-items:center;gap:14px;width:100%;padding:18px 20px;text-decoration:none;background:var(--color-tokens-background-lift);border:1px solid rgba(215,0,37,.45);transition:border-color .25s ease,background-color .25s ease}
.aog-panel:hover{border-color:var(--color-base-accent-primary);background:var(--color-base-background-depth-dark)}
.aog-dot{flex:none;width:9px;height:9px;border-radius:50%;background:var(--color-base-accent-primary);box-shadow:0 0 0 4px rgba(215,0,37,.18)}
.aog-txt{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
.aog-txt b{font-family:"Switzer",sans-serif;font-weight:600;font-size:14.5px;letter-spacing:-.01em;color:var(--color-tokens-text-heading-strong)}
.aog-txt span{font-size:12.5px;color:var(--color-tokens-text-body-medium)}
.aog-ico{flex:none;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;background:rgba(215,0,37,.12);border:1px solid rgba(215,0,37,.45);color:var(--color-base-accent-primary);transition:background-color .25s ease,color .25s ease,border-color .25s ease}
.aog-ico svg{width:15px;height:15px;display:block}
.aog-panel:hover .aog-ico{background:var(--color-base-accent-primary);border-color:var(--color-base-accent-primary);color:#fff}
.ct-trust{display:flex;flex-direction:column;gap:16px;width:100%;padding-top:28px;border-top:1px solid var(--color-tokens-border-subtle)}
.ct-trust-label{font-family:"Geist Mono",ui-monospace,monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--color-base-accent-secondary)}
.ct-approvals{display:flex;flex-wrap:wrap;gap:8px}
.ct-chip{display:inline-flex;align-items:baseline;gap:8px;padding:9px 13px;border:1px solid var(--color-tokens-border-subtle);font-size:11px;letter-spacing:.04em;color:var(--color-tokens-text-body-medium)}
.ct-chip b{font-family:"Geist Mono",ui-monospace,monospace;font-weight:500;color:var(--color-tokens-text-heading-strong)}
.ct-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:4px}
.ct-stats b{display:block;font-family:"Switzer",sans-serif;font-weight:600;font-size:26px;letter-spacing:-.03em;line-height:1;color:var(--color-tokens-text-heading-strong)}
.ct-stats span{display:block;margin-top:7px;font-size:11px;line-height:1.3;color:var(--color-tokens-text-body-medium)}
/* --- the form itself (numbered fields, chips, full-width submit) --- */
.xform{counter-reset:xf;width:100%}
.xf-row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,56px)}
.xf-field{position:relative;padding:26px 0 16px;border-bottom:1px solid var(--color-tokens-border-subtle)}
.xf-field::after{content:"";position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:var(--color-base-accent-primary);transform:scaleX(0);transform-origin:left center;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.xf-field:focus-within::after{transform:scaleX(1)}
.xf-field::before{counter-increment:xf;content:"0" counter(xf);position:absolute;right:0;top:26px;font-family:"Geist Mono",ui-monospace,monospace;font-size:13px;letter-spacing:.05em;color:rgba(255,255,255,.18);transition:color .3s ease}
.xf-field:focus-within::before{color:var(--color-base-accent-secondary)}
.xf-field label{display:block;margin-bottom:6px;font-family:"Geist Mono",ui-monospace,monospace;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--color-tokens-text-body-medium)}
.xf-field input,.xf-field textarea{width:100%;background:transparent;border:none;outline:none;color:var(--color-tokens-text-heading-strong);font-family:"Geist",sans-serif;font-size:clamp(17px,1.4vw,20px);font-weight:400;padding:4px 34px 4px 0}
.xf-field input::placeholder,.xf-field textarea::placeholder{color:rgba(255,255,255,.24)}
.xf-field textarea{min-height:96px;resize:vertical}
.xf-topics{padding:30px 0 6px}
.xt-label{display:block;margin-bottom:14px;font-family:"Geist Mono",ui-monospace,monospace;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--color-tokens-text-body-medium)}
.xt-chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{position:relative;display:inline-block}
.chip input{position:absolute;inset:0;opacity:0;cursor:pointer}
.chip span{display:inline-block;padding:11px 20px;border:1px solid var(--color-tokens-border-subtle);font-family:"Geist Mono",ui-monospace,monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--color-tokens-text-body-medium);cursor:pointer;transition:background-color .3s ease,border-color .3s ease,color .3s ease}
.chip:hover span{border-color:var(--color-base-accent-secondary);color:var(--color-tokens-text-heading-strong)}
.chip input:checked+span{background:var(--color-base-accent-primary);border-color:var(--color-base-accent-primary);color:#fff}
.chip input:focus-visible+span{outline:2px solid var(--color-base-accent-secondary);outline-offset:3px}
.xf-submit{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;margin-top:38px;padding:22px 28px;border:none;cursor:pointer;background:var(--color-base-accent-primary);color:#fff;font-family:"Geist Mono",ui-monospace,monospace;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;transition:background-color .25s ease}
.xf-submit:hover{background:var(--color-base-accent-secondary)}
.xf-submit[disabled]{opacity:.6;cursor:default}
.xf-submit svg{width:17px;height:17px;display:block;transition:transform .25s ease}
.xf-submit:hover svg{transform:translateX(3px)}
.xf-note{margin:16px 0 0;font-size:12.5px;line-height:1.7;color:var(--color-tokens-text-body-medium)}
.xf-note a{color:var(--color-base-accent-secondary);text-decoration:none}
.xf-note a:hover{text-decoration:underline}
/* success state swapped in after a successful submit */
.xform-success{padding:24px 0}
.xform-success .xs-label{font-family:"Geist Mono",ui-monospace,monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--color-base-accent-secondary)}
.xform-success h3{margin:14px 0 12px;font-family:"Switzer",sans-serif;font-weight:600;font-size:clamp(24px,2.6vw,34px);letter-spacing:-.025em;line-height:1.15;color:var(--color-tokens-text-heading-strong)}
.xform-success p{margin:0;max-width:44ch;font-size:15px;line-height:1.6;color:var(--color-tokens-text-body-medium)}
@media (max-width:960px){
/* the base rule sets align-items:start, which in a flex column shrinks the
children to their content width, so it has to be restated here */
.enquiry-grid{display:flex;flex-direction:column;align-items:stretch;gap:48px}
.enquiry-grid .xform{order:1}
.enquiry-side{order:2;gap:26px}
.enquiry-side .aog-panel{order:1}
.enquiry-side .master-label{order:2}
.enquiry-side .cd-list{order:3}
.xf-row{grid-template-columns:1fr}
}
.section.bfaq-section{padding-bottom:var(--section-padding--medium)}
/* ============================================================
HOMEPAGE FAQ (light band before the news section)
Own accordion rather than the template's Webflow tabs: those
rely on IX2 interactions we would have to hand-wire anyway.
============================================================ */
.bfaq-halves{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);gap:clamp(32px,4vw,88px);align-items:start}
.bfaq-head{display:flex;flex-direction:column;align-items:flex-start;gap:20px;position:sticky;top:120px}
.bfaq-head h2{max-width:14ch}
.bfaq-head .body-medium{max-width:44ch}
.bfaq-head .cta-main{margin-top:8px}
.bfaq-list{display:flex;flex-direction:column;gap:12px}
.bfaq-item{background:var(--color-base-background-lift-light);border:1px solid var(--color-tokens-border-subtle);transition:border-color .25s ease}
.bfaq-item:hover{border-color:var(--color-base-neutral-dark-48)}
.bfaq-q{display:flex;align-items:center;justify-content:space-between;gap:28px;width:100%;padding:clamp(20px,2vw,26px);background:none;border:none;cursor:pointer;text-align:left;font-family:"Switzer",sans-serif;font-weight:600;font-size:clamp(15px,1.25vw,17.5px);line-height:1.35;letter-spacing:-.015em;color:var(--color-tokens-text-heading-strong)}
.bfaq-ico{position:relative;flex:none;display:flex;align-items:center;justify-content:center;width:20px;height:20px}
.bfaq-ico i{position:absolute;background:var(--color-base-accent-primary);transition:transform .3s ease,opacity .3s ease}
.bfaq-h{width:13px;height:2px}
.bfaq-v{width:2px;height:13px}
.bfaq-q[aria-expanded="true"] .bfaq-v{transform:scaleY(0);opacity:0}
/* 0fr -> 1fr animates the row, so no JS height measuring */
.bfaq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .38s cubic-bezier(.16,1,.3,1)}
.bfaq-q[aria-expanded="true"]+.bfaq-a{grid-template-rows:1fr}
.bfaq-a-inner{overflow:hidden}
.bfaq-a p{margin:0;padding:0 clamp(20px,2vw,26px) clamp(22px,2vw,28px);max-width:62ch;font-size:14.5px;line-height:1.65;color:var(--color-tokens-text-body-medium)}
@media (max-width:900px){
.bfaq-halves{grid-template-columns:1fr;gap:36px}
.bfaq-head{position:static}
.bfaq-head h2,.bfaq-head .body-medium{max-width:none}
}
@media (prefers-reduced-motion:reduce){.bfaq-a{transition:none}.bfaq-ico i{transition:none}}
/* Final CTA: still image instead of the background video */
.video-cta.cta-still{overflow:hidden}
.cta-still-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1}
/* ============================================================
SERVICE PAGES — two layouts to compare
A = service-a.html (Consulting): statement + capability grid + process spine
B = service-b.html (Type Training): split hero + system block + course grid
============================================================ */
/* shared */
.svc-head{display:flex;flex-direction:column;align-items:flex-start;gap:20px;margin-bottom:clamp(40px,4.5vw,64px)}
.svc-head h2{max-width:18ch}
.svc-head .body-medium{max-width:58ch}
.svc-head-split{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:clamp(28px,4vw,80px)}
.svc-head-split>div:first-child{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.svc-head-right{display:flex;flex-direction:column;align-items:flex-start;gap:20px;max-width:44ch;flex:none}
@media (max-width:900px){.svc-head-split{flex-direction:column;align-items:flex-start}.svc-head-right{max-width:none}}
/* enquiry band, shared by both */
.svc-enq{display:flex;align-items:flex-end;justify-content:space-between;gap:clamp(28px,4vw,72px)}
.svc-enq-copy{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.svc-enq-copy h2{max-width:18ch}
.svc-enq-copy .body-medium{max-width:52ch}
.svc-enq-action{display:flex;flex-direction:column;align-items:flex-start;gap:14px;flex:none}
.svc-enq-note{max-width:28ch;font-size:12.5px;line-height:1.5;color:var(--color-tokens-text-body-medium)}
@media (max-width:900px){.svc-enq{flex-direction:column;align-items:flex-start;gap:32px}.svc-enq-copy h2,.svc-enq-copy .body-medium{max-width:none}}
/* ---------- TEMPLATE A ---------- */
.section.hero-svc-a-section{padding-top:calc(var(--section-padding--extra-large) + 24px);padding-bottom:var(--section-padding--medium)}
.svc-a-headline{display:flex;flex-direction:column;align-items:flex-start;gap:22px;max-width:var(--max-width--8-columns);margin-bottom:clamp(40px,5vw,72px)}
.svc-a-headline h1{margin:0}
.svc-a-lead{max-width:62ch;margin:0;font-size:clamp(15px,1.1vw,17px);line-height:1.55;color:rgba(255,255,255,.74)}
.svc-a-hero-halves{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(16px,1.8vw,24px);align-items:stretch}
.svc-a-hero-img{position:relative;aspect-ratio:16/10;overflow:hidden;border:1px solid var(--color-tokens-border-subtle)}
.svc-a-hero-card{display:flex;flex-direction:column;align-items:flex-start;gap:20px;padding:clamp(24px,2.4vw,36px);background:var(--color-tokens-background-lift);border:1px solid var(--color-tokens-border-subtle)}
.svc-a-quote{margin:0;font-family:"Switzer",sans-serif;font-weight:500;font-size:clamp(17px,1.5vw,21px);line-height:1.4;letter-spacing:-.02em;color:var(--color-tokens-text-heading-strong)}
.svc-a-quote-by{display:flex;flex-direction:column;gap:4px;margin-top:auto;font-size:13px;color:var(--color-tokens-text-heading-strong)}
.svc-a-quote-org{color:var(--color-tokens-text-body-medium)}
@media (max-width:900px){.svc-a-hero-halves{grid-template-columns:1fr}}
.svc-approach{display:flex;flex-direction:column;align-items:flex-start;gap:28px}
.svc-approach h2{max-width:24ch}
.svc-cap-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.4vw,40px)}
.svc-cap{display:flex;flex-direction:column;align-items:flex-start;padding-top:24px;border-top:1px solid var(--color-tokens-border-subtle)}
.svc-cap-num{font-family:"Geist Mono",ui-monospace,monospace;font-size:11px;letter-spacing:.12em;color:var(--color-base-accent-primary)}
.svc-cap-title{margin:14px 0 10px;font-family:"Switzer",sans-serif;font-weight:600;font-size:clamp(18px,1.6vw,22px);letter-spacing:-.02em;line-height:1.15;color:var(--color-tokens-text-heading-strong);max-width:18ch}
.svc-cap-body{margin:0;font-size:14px;line-height:1.6;color:var(--color-tokens-text-body-medium)}
@media (max-width:1000px){.svc-cap-grid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.svc-cap-grid{grid-template-columns:1fr}}
.svc-steps{display:flex;flex-direction:column}
.svc-step{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(20px,3vw,48px);padding:clamp(24px,2.6vw,36px) 0;border-top:1px solid var(--color-tokens-border-subtle)}
.svc-step:last-child{border-bottom:1px solid var(--color-tokens-border-subtle)}
.svc-step-marker{flex:none;display:flex;align-items:flex-start}
.svc-step-marker span{display:flex;align-items:center;justify-content:center;width:clamp(44px,4vw,58px);height:clamp(44px,4vw,58px);background:var(--color-base-accent-primary);color:#fff;font-family:"Geist Mono",ui-monospace,monospace;font-size:13px;letter-spacing:.06em}
.svc-step-body{display:flex;flex-direction:column;gap:10px}
.svc-step-title{margin:0;font-family:"Switzer",sans-serif;font-weight:600;font-size:clamp(19px,1.8vw,25px);letter-spacing:-.025em;line-height:1.15;color:var(--color-tokens-text-heading-strong)}
.svc-step-txt{margin:0;max-width:70ch;font-size:14.5px;line-height:1.6;color:var(--color-tokens-text-body-medium)}
@media (max-width:640px){.svc-step{grid-template-columns:1fr;gap:16px}}
/* ---------- TEMPLATE B ---------- */
.section.hero-svc-b-section{padding-top:calc(var(--section-padding--extra-large) + 24px);padding-bottom:0}
.svc-b-headline{display:flex;flex-direction:column;align-items:flex-start;gap:26px;margin-bottom:clamp(40px,5vw,72px)}
.svc-b-head-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(24px,4vw,72px);align-items:end;width:100%}
.svc-b-head-grid h1{margin:0}
.svc-b-lead{margin:0;font-size:clamp(15px,1.1vw,17px);line-height:1.6;color:rgba(255,255,255,.74)}
.svc-b-hero-img{position:relative;width:100%;aspect-ratio:21/9;overflow:hidden}
@media (max-width:900px){.svc-b-head-grid{grid-template-columns:1fr;gap:20px;align-items:start}.svc-b-hero-img{aspect-ratio:16/10}}
.svc-sys{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(32px,4vw,80px);align-items:center}
.svc-sys-media{position:relative;aspect-ratio:4/5;overflow:hidden;border:1px solid var(--color-tokens-border-subtle)}
.svc-sys-copy{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.svc-sys-copy h2{max-width:20ch}
.svc-sys-copy .body-medium{max-width:52ch}
.svc-sys-items{display:flex;flex-direction:column;gap:22px;margin-top:8px}
.svc-sys-item{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:start}
.svc-sys-bullet{width:10px;height:10px;margin-top:7px;background:var(--color-base-accent-primary)}
.svc-sys-title{margin:0 0 6px;font-family:"Switzer",sans-serif;font-weight:600;font-size:16.5px;letter-spacing:-.015em;color:var(--color-tokens-text-heading-strong)}
.svc-sys-txt{margin:0;max-width:52ch;font-size:14px;line-height:1.6;color:var(--color-tokens-text-body-medium)}
@media (max-width:900px){.svc-sys{grid-template-columns:1fr;gap:32px}.svc-sys-media{aspect-ratio:16/10}}
.svc-course-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,1.8vw,24px)}
.svc-course{display:flex;flex-direction:column;align-items:flex-start;padding:clamp(22px,2.2vw,30px);background:var(--color-tokens-background-lift);border:1px solid var(--color-tokens-border-subtle);transition:border-color .25s ease}
.svc-course:hover{border-color:var(--color-base-neutral-light-32)}
.svc-course-tag{padding:6px 11px;border:1px solid var(--color-tokens-border-subtle);font-family:"Geist Mono",ui-monospace,monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--color-base-accent-secondary)}
.svc-course-title{margin:16px 0 10px;font-family:"Switzer",sans-serif;font-weight:600;font-size:clamp(19px,1.7vw,23px);letter-spacing:-.02em;line-height:1.15;color:var(--color-tokens-text-heading-strong)}
.svc-course-txt{margin:0;font-size:13.5px;line-height:1.55;color:var(--color-tokens-text-body-medium)}
.svc-course-note{margin:clamp(28px,3vw,40px) 0 0;max-width:72ch;font-size:13.5px;line-height:1.65;color:var(--color-tokens-text-body-medium)}
@media (max-width:1000px){.svc-course-grid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.svc-course-grid{grid-template-columns:1fr}}
.section.svc-b-quote-section{padding-top:var(--section-padding--medium);padding-bottom:var(--section-padding--medium);border-top:1px solid var(--color-tokens-border-subtle);border-bottom:1px solid var(--color-tokens-border-subtle)}
/* base.css gives blockquote a grey border-left + padding + 18px type; reset it */
.svc-quote{margin:0;padding:0;border:0;font-size:inherit;line-height:inherit}
.svc-quote p{margin:0;font-family:"Switzer",sans-serif;font-weight:500;font-size:clamp(24px,3.2vw,44px);line-height:1.2;letter-spacing:-.03em;color:var(--color-tokens-text-heading-strong);max-width:17em}
.svc-quote-by{display:flex;flex-direction:column;gap:5px;margin-top:clamp(24px,2.6vw,36px);font-size:13.5px;color:var(--color-tokens-text-heading-strong)}
.svc-quote-org{color:var(--color-tokens-text-body-medium)}
/* ============================================================
COURSE PAGES (course/*.html)
============================================================ */
.section.crs-hero-section{padding-top:calc(var(--section-padding--extra-large) + 24px);padding-bottom:var(--section-padding--medium)}
.crs-hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.85fr);gap:clamp(32px,4vw,80px);align-items:stretch}
.crs-hero-copy{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.crs-hero-copy h1{margin:0}
.crs-compliance{margin:0;padding:9px 14px;border:1px solid rgba(253,81,91,.45);font-family:"Geist Mono",ui-monospace,monospace;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--color-base-accent-secondary)}
.crs-lead{margin:0;max-width:56ch;font-size:clamp(15px,1.1vw,17px);line-height:1.6;color:rgba(255,255,255,.74)}
.crs-meta{display:flex;flex-wrap:wrap;gap:22px;margin-top:4px}
.crs-meta span{position:relative;padding-left:16px;font-family:"Geist Mono",ui-monospace,monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--color-tokens-text-body-medium)}
.crs-meta span::before{content:"";position:absolute;left:0;top:.45em;width:7px;height:7px;background:var(--color-base-accent-primary)}
/* no fixed ratio: the media column stretches to whatever height the copy column
ends up being, and the photo crops to fill it */
.crs-hero-media{position:relative;height:100%;min-height:0;overflow:hidden;border:1px solid var(--color-tokens-border-subtle)}
/* the photo is taken out of flow so its intrinsic height cannot grow the grid
row: the copy column alone decides the height, the photo just fills it */
.crs-hero-media .image-cover{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
/* single column below 900px, so the ratio has to come back or the media collapses */
@media (max-width:900px){.crs-hero{grid-template-columns:1fr;gap:32px}.crs-hero-media{height:auto;aspect-ratio:16/10}}
.crs-head{display:flex;flex-direction:column;align-items:flex-start;gap:20px;margin-bottom:clamp(36px,4vw,56px)}
.crs-head h2{max-width:20ch}
.crs-head .body-medium{max-width:66ch}
.crs-group-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,28px)}
.crs-group{display:flex;flex-direction:column;align-items:flex-start;padding:clamp(24px,2.4vw,34px);background:var(--color-base-background-lift-light);border:1px solid var(--color-tokens-border-subtle)}
.crs-group-tag{font-family:"Geist Mono",ui-monospace,monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--color-base-accent-primary)}
.crs-group-title{margin:12px 0 10px;font-family:"Switzer",sans-serif;font-weight:600;font-size:clamp(20px,1.8vw,25px);letter-spacing:-.02em;line-height:1.1;color:var(--color-tokens-text-heading-strong)}
.crs-group-txt{margin:0;font-size:14px;line-height:1.6;color:var(--color-tokens-text-body-medium)}
@media (max-width:767px){.crs-group-grid{grid-template-columns:1fr}}
.crs-callout{margin-top:clamp(24px,2.6vw,36px);padding:clamp(24px,2.4vw,34px);border-left:4px solid var(--color-base-accent-primary);background:var(--color-base-background-lift-light)}
.crs-callout-label{display:block;margin-bottom:10px;font-family:"Geist Mono",ui-monospace,monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--color-base-accent-primary)}
.crs-callout p{margin:0;max-width:78ch;font-family:"Switzer",sans-serif;font-weight:500;font-size:clamp(16px,1.35vw,19px);line-height:1.5;letter-spacing:-.015em;color:var(--color-tokens-text-heading-strong)}
.crs-mods{display:flex;flex-direction:column}
.crs-mod{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(20px,3vw,44px);padding:clamp(22px,2.4vw,32px) 0;border-top:1px solid var(--color-tokens-border-subtle)}
.crs-mod:last-child{border-bottom:1px solid var(--color-tokens-border-subtle)}
.crs-mod-num{font-family:"Geist Mono",ui-monospace,monospace;font-size:12px;letter-spacing:.08em;color:var(--color-base-accent-secondary);padding-top:4px}
.crs-mod-body{display:flex;flex-direction:column;gap:8px}
.crs-mod-title{margin:0;font-family:"Switzer",sans-serif;font-weight:600;font-size:clamp(18px,1.6vw,22px);letter-spacing:-.02em;line-height:1.2;color:var(--color-tokens-text-heading-strong)}
.crs-mod-txt{margin:0;max-width:74ch;font-size:14.5px;line-height:1.6;color:var(--color-tokens-text-body-medium)}
@media (max-width:640px){.crs-mod{grid-template-columns:1fr;gap:10px}}
.crs-feat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,2.4vw,36px)}
.crs-feat{display:flex;flex-direction:column;align-items:flex-start;padding-top:22px;border-top:1px solid var(--color-tokens-border-subtle)}
.crs-feat-title{margin:0 0 10px;font-family:"Switzer",sans-serif;font-weight:600;font-size:16.5px;letter-spacing:-.015em;line-height:1.25;color:var(--color-tokens-text-heading-strong)}
.crs-feat-txt{margin:0;font-size:13.5px;line-height:1.6;color:var(--color-tokens-text-body-medium)}
@media (max-width:1000px){.crs-feat-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.crs-feat-grid{grid-template-columns:1fr}}
.crs-enq{display:flex;align-items:center;justify-content:space-between;gap:clamp(24px,4vw,64px);margin-top:clamp(40px,4.5vw,64px);padding-top:clamp(28px,3vw,40px);border-top:1px solid var(--color-tokens-border-subtle)}
.crs-enq-txt{max-width:62ch;font-size:14.5px;line-height:1.6;color:var(--color-tokens-text-body-medium)}
@media (max-width:860px){.crs-enq{flex-direction:column;align-items:flex-start;gap:24px}}
/* course cards that link through to a detail page */
a.svc-course{text-decoration:none;color:inherit}
.svc-course-more{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font-family:"Geist Mono",ui-monospace,monospace;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--color-base-accent-secondary)}
.svc-course-more svg{width:15px;height:15px;display:block;transition:transform .25s ease}
a.svc-course:hover .svc-course-more svg{transform:translateX(3px)}
/* MRO services grid (maintenance page): the nine services carried over from the
old /services page, with their own photography */
.mro-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,1.8vw,24px)}
.mro-card{display:flex;flex-direction:column;background:var(--color-tokens-background-lift);border:1px solid var(--color-tokens-border-subtle);overflow:hidden;transition:border-color .25s ease}
.mro-card:hover{border-color:var(--color-base-neutral-light-32)}
.mro-img{position:relative;aspect-ratio:16/11;overflow:hidden;background:var(--color-base-background-depth-dark)}
.mro-img .image-cover{width:100%;height:100%;object-fit:cover;transition:transform .55s cubic-bezier(.16,1,.3,1)}
.mro-card:hover .mro-img .image-cover{transform:scale(1.025)}
.mro-body{display:flex;flex-direction:column;flex:1;padding:clamp(20px,2vw,28px)}
.mro-title{margin:0 0 10px;font-family:"Switzer",sans-serif;font-weight:600;font-size:clamp(17px,1.4vw,20px);letter-spacing:-.02em;line-height:1.25;color:var(--color-tokens-text-heading-strong)}
.mro-txt{margin:0;font-size:13.5px;line-height:1.6;color:var(--color-tokens-text-body-medium)}
@media (max-width:1000px){.mro-grid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.mro-grid{grid-template-columns:1fr}}
/* ============================================================
Proof band: diagonal aircraft that flies out of the section on scroll.
multiply drops the white body into the grey band and leaves only the
shading; overflow:hidden clips it so it never bleeds into the section above.
============================================================ */
.section.home-b-logos-section{position:relative;overflow:hidden;isolation:isolate}
.proof-plane{
position:absolute;
left:25%;
top:38%;
width:clamp(200px,23vw,380px);
height:auto;
z-index:0; /* under everything else in the band */
pointer-events:none;
mix-blend-mode:multiply;
opacity:.9;
/* new artwork is already banked nose up-right, so no CSS rotation */
transform:translate3d(0,0,0);
will-change:transform,opacity;
}
/* the container already sits at z-index 3, this just makes the intent explicit */
.section.home-b-logos-section .main-container{position:relative;z-index:5}
@media (max-width:900px){.proof-plane{left:auto;right:-8%;top:auto;bottom:2%;width:min(300px,52vw);opacity:.5}}
@media (prefers-reduced-motion:reduce){.proof-plane{transform:none!important;opacity:.9!important}}
/* ============================================================
ONLINE TRAINING (online-training.html + the three course pages)
Catalogue of the self-paced e-learning courses. Cards carry the price,
duration and certificate validity the client asked for, plus a Buy now
action that will point at the external LMS store once we have the URLs.
============================================================ */
.ot-ico{display:inline-flex;width:14px;height:14px;flex:none}
.ot-ico svg{width:100%;height:100%;display:block}
/* course cards */
.ot-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,1.8vw,24px)}
.ot-card{display:flex;flex-direction:column;background:var(--color-tokens-background-lift);border:1px solid var(--color-tokens-border-subtle);transition:border-color .25s ease}
.ot-card:hover{border-color:var(--color-base-neutral-light-32)}
.ot-card-media{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:var(--color-base-background-depth-dark)}
.ot-card-media .image-cover{width:100%;height:100%;object-fit:cover;transition:transform .55s cubic-bezier(.16,1,.3,1)}
.ot-card:hover .ot-card-media .image-cover{transform:scale(1.03)}
.ot-card-badge{position:absolute;left:0;bottom:0;max-width:100%;padding:8px 12px;background:var(--color-base-accent-primary);color:#fff;font-family:"Geist Mono",ui-monospace,monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase}
.ot-card-body{display:flex;flex-direction:column;flex:1;padding:clamp(22px,2.2vw,30px)}
.ot-card-title{margin:0 0 12px;font-family:"Switzer",sans-serif;font-weight:600;font-size:clamp(19px,1.6vw,23px);letter-spacing:-.02em;line-height:1.15}
.ot-card-title a{color:var(--color-tokens-text-heading-strong);text-decoration:none;transition:color .2s ease}
.ot-card-title a:hover{color:var(--color-base-accent-primary)}
.ot-card-txt{margin:0 0 auto;font-size:13.5px;line-height:1.6;color:var(--color-tokens-text-body-medium)}
/* note above the grid: enrolment happens on the external TalentLMS store */
.ot-store-note{margin:0 0 clamp(24px,2.6vw,36px);max-width:76ch;font-size:13.5px;line-height:1.65;color:var(--color-tokens-text-body-medium)}
/* card price. margin-bottom:auto on the copy above pushes this and the actions
to the bottom, so prices line up across cards of different text lengths */
.ot-price{margin-top:clamp(20px,2vw,26px);font-family:"Switzer",sans-serif;font-weight:600;font-size:clamp(20px,1.7vw,24px);letter-spacing:-.02em;line-height:1;color:var(--color-tokens-text-heading-strong)}
/* price / duration / certificate validity, used on the course pages */
.ot-spec{display:flex;flex-direction:column;gap:6px}
.ot-spec-k{font-family:"Geist Mono",ui-monospace,monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--color-base-accent-primary)}
.ot-spec-v{font-family:"Switzer",sans-serif;font-weight:600;font-size:15px;letter-spacing:-.01em;color:var(--color-tokens-text-heading-strong)}
.ot-card-actions{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-top:20px;padding-top:20px;border-top:1px solid var(--color-tokens-border-subtle)}
.ot-buy{display:inline-flex;align-items:center;justify-content:center;padding:14px 26px;background:var(--color-base-accent-primary);color:#fff;font-family:"Geist Mono",ui-monospace,monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;transition:background-color .25s ease}
.ot-buy:hover{background:var(--color-base-accent-secondary);color:#fff}
.ot-more{display:inline-flex;align-items:center;gap:8px;font-family:"Geist Mono",ui-monospace,monospace;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--color-base-accent-secondary);text-decoration:none}
.ot-more .ot-ico{transition:transform .25s ease}
.ot-more:hover .ot-ico{transform:translateX(3px)}
/* how it works */
.ot-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,2.4vw,36px)}
.ot-step{display:flex;flex-direction:column;align-items:flex-start;padding-top:22px;border-top:1px solid var(--color-tokens-border-subtle)}
.ot-step-num{font-family:"Geist Mono",ui-monospace,monospace;font-size:11px;letter-spacing:.1em;color:var(--color-base-accent-secondary)}
.ot-step-title{margin:14px 0 10px;font-family:"Switzer",sans-serif;font-weight:600;font-size:17px;letter-spacing:-.015em;line-height:1.25;color:var(--color-tokens-text-heading-strong)}
.ot-step-txt{margin:0;font-size:13.5px;line-height:1.6;color:var(--color-tokens-text-body-medium)}
/* corporate accounts */
.ot-corp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:start}
.ot-corp-copy{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.ot-corp-copy h2{margin:0;max-width:14ch}
.ot-corp-lead{margin:0;max-width:52ch;font-size:clamp(15px,1.1vw,17px);line-height:1.6;color:var(--color-tokens-text-body-medium)}
.ot-corp-list{display:flex;flex-direction:column;margin:0;padding:0;list-style:none}
.ot-corp-list li{padding:20px 0;border-top:1px solid var(--color-tokens-border-subtle);font-size:14px;line-height:1.6;color:var(--color-tokens-text-body-medium)}
.ot-corp-list li:last-child{border-bottom:1px solid var(--color-tokens-border-subtle)}
.ot-corp-list strong{display:block;margin-bottom:6px;font-family:"Switzer",sans-serif;font-weight:600;font-size:16px;letter-spacing:-.015em;color:var(--color-tokens-text-heading-strong)}
/* hero spec strip on the individual course pages. The hero is a DARK section, so
this uses the context token (not the fixed light lift) or the values go white
on white. */
.crs-specs{display:flex;flex-wrap:wrap;align-self:flex-start;gap:clamp(22px,2.6vw,40px);padding:clamp(16px,1.6vw,20px) clamp(20px,2vw,26px);border:1px solid var(--color-tokens-border-subtle);border-left:4px solid var(--color-base-accent-primary);background:var(--color-tokens-background-lift)}
.crs-specs .ot-spec{gap:7px}
.crs-specs .ot-spec-v{font-size:16px;color:var(--color-tokens-text-heading-strong)}
@media (max-width:1000px){.ot-grid{grid-template-columns:1fr 1fr}.ot-steps{grid-template-columns:1fr 1fr}.ot-corp{grid-template-columns:1fr;gap:clamp(28px,4vw,44px)}}
@media (max-width:760px){.ot-bulk-strip{flex-direction:column;align-items:flex-start;gap:18px}}
@media (max-width:640px){.ot-grid{grid-template-columns:1fr}.ot-steps{grid-template-columns:1fr}.ot-card-actions{flex-direction:column;align-items:stretch;gap:14px}.ot-buy{width:100%}.ot-more{justify-content:center}.crs-specs{gap:20px}}
/* Online Training opens straight on the catalogue: no hero, no lead image. The
first section therefore carries the nav clearance the hero used to provide. */
.section.ot-courses-section.is-first{padding-top:calc(var(--section-padding--extra-large) + 24px)}
.ot-head{display:flex;flex-direction:column;align-items:flex-start;gap:22px;margin-bottom:clamp(36px,4vw,56px)}
.ot-head h1{margin:0;max-width:20ch}
/* force the break after the comma so "24/7" is never orphaned on its own line */
.ot-head h1 .heading-medium{display:block}
.ot-lead{margin:0;max-width:68ch;font-size:clamp(15px,1.15vw,18px);line-height:1.6;color:var(--color-tokens-text-body-medium)}
.ot-head .crs-meta{margin-top:2px}
/* styles.css hardcodes the near-black in these two, so they stay black unless we
restate them here in the navy ink */
.overlay-dark-80{background-color:#0A1222cc}
.plan-tag{background-color:#0A122252}
/* ============================================================
NEWS POST TEMPLATE (news/*.html)
Dark title block, full-width lead image, then a light reading column.
============================================================ */
.section.post-hero-section{padding-top:calc(var(--section-padding--extra-large) + 24px);padding-bottom:var(--section-padding--medium)}
/* copy left, featured image right, same split the course pages use */
.post-hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.85fr);gap:clamp(32px,4vw,80px);align-items:stretch}
.post-head{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:22px}
.post-head h1{margin:0}
.post-lead{margin:0;font-size:clamp(15px,1.15vw,18px);line-height:1.6;color:rgba(255,255,255,.74)}
.post-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-family:"Geist Mono",ui-monospace,monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--color-tokens-text-body-medium)}
.post-dot{color:var(--color-base-accent-primary)}
/* out of flow so the photo never grows the row: the copy column sets the height */
.post-media{position:relative;height:100%;min-height:0;overflow:hidden;border:1px solid var(--color-tokens-border-subtle)}
.post-media .image-cover{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.section.post-body-section{padding-top:var(--section-padding--large);padding-bottom:var(--section-padding--large)}
/* reading column: ~70 characters is the comfortable measure for long-form */
.post-body{max-width:72ch;margin-left:auto;margin-right:auto}
.post-body h2{margin:clamp(40px,4vw,64px) 0 18px;font-family:"Switzer",sans-serif;font-weight:600;font-size:clamp(22px,2.2vw,30px);letter-spacing:-.025em;line-height:1.2;color:var(--color-tokens-text-heading-strong)}
.post-body h2:first-child{margin-top:0}
.post-body p{margin:0 0 20px;font-size:clamp(15px,1.1vw,16.5px);line-height:1.75;color:var(--color-tokens-text-body-medium)}
.post-body strong{color:var(--color-tokens-text-heading-strong);font-weight:600}
.post-body a{color:var(--color-base-accent-primary);text-decoration:underline;text-underline-offset:3px}
.post-dateline{font-family:"Geist Mono",ui-monospace,monospace;font-size:12px!important;letter-spacing:.06em;text-transform:uppercase;color:var(--color-base-accent-primary)!important}
/* base.css styles blockquote with a grey rule, restate it in the brand red */
.post-quote{margin:clamp(28px,3vw,40px) 0;padding:clamp(22px,2.4vw,32px);border:0;border-left:4px solid var(--color-base-accent-primary);background:var(--color-tokens-background-lift)}
.post-quote p{margin:0 0 14px;font-family:"Switzer",sans-serif;font-weight:500;font-size:clamp(17px,1.5vw,21px)!important;line-height:1.5;letter-spacing:-.015em;color:var(--color-tokens-text-heading-strong)!important}
.post-quote cite{font-style:normal;font-family:"Geist Mono",ui-monospace,monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--color-tokens-text-body-medium)}
.post-note{margin-top:clamp(32px,3.4vw,48px);padding-top:24px;border-top:1px solid var(--color-tokens-border-subtle)}
.post-note p{margin:0;font-size:14px;line-height:1.65;font-style:italic}
.post-foot{max-width:72ch;margin-left:auto;margin-right:auto;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:clamp(24px,3vw,48px);margin-top:clamp(48px,5vw,72px);padding-top:clamp(24px,2.6vw,36px);border-top:1px solid var(--color-tokens-border-subtle)}
.post-back{display:inline-flex;align-items:center;gap:9px;flex:none;font-family:"Geist Mono",ui-monospace,monospace;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--color-base-accent-secondary);text-decoration:none}
.post-back .ot-ico{transition:transform .25s ease}
.post-back:hover .ot-ico{transform:translateX(-3px)}
.post-next{display:flex;flex-direction:column;align-items:flex-start;gap:8px;max-width:46ch}
.post-next-label{font-family:"Geist Mono",ui-monospace,monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--color-base-accent-primary)}
.post-next-link{font-family:"Switzer",sans-serif;font-weight:600;font-size:clamp(16px,1.4vw,20px);letter-spacing:-.02em;line-height:1.25;color:var(--color-tokens-text-heading-strong);text-decoration:none}
.post-next-link:hover{color:var(--color-base-accent-primary)}
@media (max-width:900px){.post-hero{grid-template-columns:1fr;gap:32px}.post-media{height:auto;aspect-ratio:16/10}}
@media (max-width:767px){.post-foot{flex-direction:column;align-items:flex-start}}
/* ============================================================
MOBILE MENU (<=991px)
Mirrors the desktop nav: plain links plus a Services accordion.
The template's descriptive blurbs and CMS placeholder card are gone.
============================================================ */
.mobile-nav-top-tile{grid-row-gap:0;gap:0}
.mnav-link,.mnav-toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:15px 0;font-family:"Switzer",sans-serif;font-weight:500;font-size:18px;letter-spacing:-.02em;line-height:1.2;color:var(--color-tokens-text-heading-strong);text-decoration:none;background:none;border:0;border-bottom:1px solid var(--color-tokens-border-subtle);text-align:left;cursor:pointer;transition:color .2s ease}
.mnav-link:hover,.mnav-toggle:hover{color:var(--color-base-accent-primary)}
.mobile-nav-top-tile>.mnav-link:last-child{border-bottom:0}
.mnav-group{display:flex;flex-direction:column;width:100%}
.mnav-chev{display:inline-flex;width:16px;height:16px;flex:none;color:var(--color-base-accent-primary);transition:transform .25s ease}
.mnav-chev svg{width:100%;height:100%;display:block}
.mnav-group.is-open .mnav-chev{transform:rotate(180deg)}
/* max-height rather than the 0fr grid trick: no extra wrapper needed */
.mnav-sub{display:flex;flex-direction:column;align-items:stretch;text-align:left;overflow:hidden;max-height:0;transition:max-height .3s ease}
.mnav-group.is-open .mnav-sub{max-height:340px}
.mnav-sublink{text-align:left;padding:11px 0 11px 16px;border-left:2px solid var(--color-base-accent-primary);font-size:14.5px;line-height:1.35;color:var(--color-tokens-text-body-medium);text-decoration:none;transition:color .2s ease}
.mnav-sublink:hover{color:var(--color-tokens-text-heading-strong)}
.mnav-sublink:first-child{margin-top:8px}
.mnav-sublink:last-child{margin-bottom:14px}
/* Contact page office strip: the four locations in text, the map itself lives
on the homepage now */
.coff-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,1.8vw,24px)}
.coff{display:flex;flex-direction:column;align-items:flex-start;padding:clamp(20px,2vw,28px);background:var(--color-tokens-background-lift);border:1px solid var(--color-tokens-border-subtle)}
.coff-eyebrow{font-family:"Geist Mono",ui-monospace,monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--color-base-accent-primary)}
.coff-name{margin:12px 0 10px;font-family:"Switzer",sans-serif;font-weight:600;font-size:clamp(17px,1.4vw,20px);letter-spacing:-.02em;line-height:1.2;color:var(--color-tokens-text-heading-strong)}
.coff-addr{display:flex;align-items:flex-start;gap:9px}
.coff-addr p{margin:0;font-size:13.5px;line-height:1.55;color:var(--color-tokens-text-body-medium)}
.coff-icon{width:16px;height:16px;flex:none;margin-top:2px;color:var(--color-base-accent-primary)}
.coff-status{margin-top:14px;padding:6px 11px;border:1px solid rgba(253,81,91,.45);font-family:"Geist Mono",ui-monospace,monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--color-base-accent-secondary)}
@media (max-width:1000px){.coff-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.coff-grid{grid-template-columns:1fr}}
/* ============================================================
LEGAL PAGES (legal/*.html)
Sober title block, then the same reading column the news posts use.
============================================================ */
.section.legal-hero-section{padding-top:calc(var(--section-padding--extra-large) + 24px);padding-bottom:var(--section-padding--medium)}
.legal-head{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.legal-head h1{margin:0}
.legal-dates{margin:0;font-family:"Geist Mono",ui-monospace,monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--color-tokens-text-body-medium)}
.section.legal-body-section{padding-top:var(--section-padding--large);padding-bottom:var(--section-padding--large)}
.legal-body h2{font-size:clamp(19px,1.7vw,24px);margin-top:clamp(36px,3.4vw,52px)}
.legal-body h3{margin:28px 0 12px;font-family:"Switzer",sans-serif;font-weight:600;font-size:clamp(16px,1.3vw,18px);letter-spacing:-.015em;line-height:1.3;color:var(--color-tokens-text-heading-strong)}
.legal-body ul,.legal-body ol{margin:0 0 20px;padding-left:22px}
.legal-body li{margin-bottom:9px;font-size:clamp(15px,1.1vw,16.5px);line-height:1.7;color:var(--color-tokens-text-body-medium)}
.legal-body li::marker{color:var(--color-base-accent-primary)}
.legal-body li strong{color:var(--color-tokens-text-heading-strong);font-weight:600}
.legal-nav{max-width:72ch;margin:clamp(48px,5vw,72px) auto 0;padding-top:clamp(24px,2.6vw,36px);border-top:1px solid var(--color-tokens-border-subtle)}
.legal-nav-label{display:block;margin-bottom:14px;font-family:"Geist Mono",ui-monospace,monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--color-base-accent-primary)}
.legal-nav-links{display:flex;flex-wrap:wrap;gap:10px}
.legal-nav-link{padding:10px 16px;border:1px solid var(--color-tokens-border-subtle);font-size:13.5px;color:var(--color-tokens-text-heading-strong);text-decoration:none;transition:border-color .2s ease,color .2s ease}
.legal-nav-link:hover{border-color:var(--color-base-accent-primary);color:var(--color-base-accent-primary)}
/* News band on the homepage sits straight under the FAQ, so it drops its top
padding and keeps a medium gap before the locations map */
.section.insights-home-b-section{padding-top:0;padding-bottom:var(--section-padding--medium)}
/* ============================================================
404
Full-bleed aircraft photo, dark overlay, centred copy.
============================================================ */
.section.nf-section{position:relative;display:flex;align-items:center;min-height:min(88vh,860px);padding-top:calc(var(--section-padding--extra-large) + 24px);padding-bottom:var(--section-padding--large);overflow:hidden}
.nf-bg{position:absolute;inset:0;z-index:0}
.nf-bg img{width:100%;height:100%;object-fit:cover;display:block}
.nf-overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(10,18,34,.58) 0%,rgba(10,18,34,.74) 55%,rgba(10,18,34,.9) 100%)}
.section.nf-section .main-container{position:relative;z-index:2}
.nf-inner{display:flex;flex-direction:column;align-items:flex-start;gap:24px;max-width:62ch}
.nf-code{font-family:"Geist Mono",ui-monospace,monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--color-base-accent-secondary)}
.nf-inner h1{margin:0;color:#fff}
.nf-lead{margin:0;max-width:54ch;font-size:clamp(15px,1.15vw,18px);line-height:1.6;color:rgba(255,255,255,.76)}
.nf-meta{display:flex;flex-wrap:wrap;gap:22px;margin-top:2px}
.nf-meta span{position:relative;padding-left:16px;font-family:"Geist Mono",ui-monospace,monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.58)}
.nf-meta span::before{content:"";position:absolute;left:0;top:.45em;width:7px;height:7px;background:var(--color-base-accent-primary)}
/* 404: the code itself is the headline */
.nf-code-big{margin:0;font-family:"Switzer",sans-serif;font-weight:600;font-size:clamp(72px,13vw,190px);line-height:.9;letter-spacing:-.05em;color:#fff}
/* Footer: aeroplane line art pinned to the bottom edge, behind the content */
/* the footer carries only .footer, not .section, so the containing block has to
be established on that class or the plane anchors to the document instead */
section.footer{position:relative;overflow:hidden;isolation:isolate}
.footer-plane{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:80%;opacity:.5;mix-blend-mode:multiply;z-index:0;pointer-events:none;line-height:0}
.footer-plane img{display:block;width:100%;height:auto}
section.footer .main-container{position:relative;z-index:1}
@media (max-width:767px){.footer-plane{width:130%}}
/* Divisions band on the homepage: section header above the four cards */
.exp-head{display:flex;flex-direction:column;align-items:flex-start;gap:20px;margin-bottom:clamp(36px,4vw,56px)}
.exp-head h2{max-width:20ch}
.exp-head .body-medium{max-width:72ch}
/* ============================================================
CTA band -> footer seam
The template ended both fades on #080E1C, two shades darker than the page
background (#0A1222), which left a visible line where the band meets the
footer. Both gradients now land on the exact page colour, so the band melts
into the footer with no seam.
============================================================ */
.cta-section .shadow-cta-video{background-image:linear-gradient(180deg,rgba(10,18,34,.92) 0%,rgba(10,18,34,0) 100%);height:34%}
.cta-section .shadow-cta-video.bottom{background-image:linear-gradient(180deg,rgba(10,18,34,0) 0%,rgba(10,18,34,.45) 40%,rgba(10,18,34,.85) 75%,rgba(10,18,34,1) 100%);height:58%}
/* ============================================================
Locations on a LIGHT section
Most of the locator already runs on --color-tokens-*, which flip with
.light-mode. These are the rules that hardcoded dark-only values.
============================================================ */
.light-mode .loc-item:hover{border-color:var(--color-base-neutral-dark-100)}
.light-mode .loc-item[data-active="true"]{border-color:var(--color-base-accent-primary);background:#fff;box-shadow:0 6px 24px rgba(10,18,34,.08)}
.light-mode .loc-eyebrow,.light-mode .loc-address .loc-icon{color:var(--color-base-accent-primary)}
.light-mode .loc-status{color:var(--color-base-accent-primary);border-color:rgba(215,0,37,.45)}
/* placeholder grid before the map loads: dark lines on light instead of white */
.light-mode .store-locator__fallback{background:radial-gradient(circle at 40% 45%,rgba(215,0,37,.10),transparent 45%),repeating-linear-gradient(0deg,rgba(10,18,34,.06) 0 1px,transparent 1px 40px),repeating-linear-gradient(90deg,rgba(10,18,34,.06) 0 1px,transparent 1px 40px)}
/* the active pin's halo was white, invisible on a light basemap */
.light-mode [data-locator-marker][data-active="true"]{outline-color:rgba(10,18,34,.45)}
/* zoom controls: the icons are dark glyphs, so no inversion on light */
.light-mode .mapboxgl-ctrl-icon{filter:none;opacity:.75}
/* SplitText line masks: without a little bottom room the mask crops descenders
(g, y, p) on the quote and the author lines. */
.text-line-mask{padding-bottom:.2em;margin-bottom:-.2em}
.testimonial-lines .text-line{will-change:transform}
/* ============================================================
SERVICES DROPDOWN MOTION (>=992px)
Webflow only toggles .w--open, and the template hides the panel with
display, which kills every transition. So the panel stays in the layout
and is driven with opacity/visibility instead. The bordered box then
unrolls downwards and the four cards ride in from the left, staggered.
Below 992px .nav-menu-inner is display:none and our own .mnav accordion
takes over, so none of this applies there.
============================================================ */
@media (min-width:992px){
:root{--bnav-ease:cubic-bezier(.525,0,0,1)}
/* Geometry copied off .dropdown-list.w--open so the closed panel sits in
exactly the same place instead of collapsing into the navbar row. */
.navbar .dropdown-list.w-dropdown-list{
display:block;
position:fixed;
inset:67px 0% auto;
width:100%;
margin-left:auto;
margin-right:auto;
padding-top:18px;
padding-left:var(--grid--page-padding);
padding-right:var(--grid--page-padding);
background-color:transparent;
opacity:0;
pointer-events:none;
visibility:hidden;
transition:opacity .2s ease,visibility 0s linear .2s;
}
.navbar .dropdown-list.w-dropdown-list.w--open{
opacity:1;
pointer-events:auto;
visibility:visible;
transition:opacity .2s ease,visibility 0s linear 0s;
}
/* The panel unrolls from the top edge, the way the Osmo nav-bg grows. */
.navbar .nav-dropdown-list{
clip-path:inset(0 0 100% 0);
transform:translateY(-6px);
transition:clip-path .45s var(--bnav-ease),transform .45s var(--bnav-ease);
}
.navbar .w--open .nav-dropdown-list{
clip-path:inset(0 0 0 0);
transform:translateY(0);
}
/* Cards enter left to right. The delay stays on the closed state too, so on
the way out they only move once the panel has already faded. */
.navbar .bnav-grid>.bnav-card{
opacity:0;
transform:translate3d(3.5em,0,0);
transition:opacity .45s var(--bnav-ease),transform .45s var(--bnav-ease),background-color .25s ease;
transition-delay:.18s;
}
.navbar .bnav-grid>.bnav-card:nth-child(2){transition-delay:.24s}
.navbar .bnav-grid>.bnav-card:nth-child(3){transition-delay:.30s}
.navbar .bnav-grid>.bnav-card:nth-child(4){transition-delay:.36s}
.navbar .w--open .bnav-grid>.bnav-card{opacity:1;transform:translate3d(0,0,0)}
/* Chevron on the Services toggle. */
.dropdown-toggle .bnav-chev{
display:inline-flex;
width:12px;
height:12px;
flex:none;
transition:transform .45s var(--bnav-ease);
}
.dropdown-toggle .bnav-chev svg{width:100%;height:100%;display:block}
.dropdown-toggle.w--open .bnav-chev{transform:rotate(180deg)}
.dropdown-toggle.w--open .nav-link{
border-color:var(--color-tokens-button-secondary-hover-border);
background-color:var(--color-tokens-button-secondary-hover-background);
color:var(--color-tokens-button-secondary-hover-text);
}
/* The page dims behind the open panel. Sits under the navbar (z-index 999)
so the bar itself stays bright. */
body::after{
content:"";
position:fixed;
inset:0;
z-index:900;
background:rgba(6,11,22,.55);
opacity:0;
pointer-events:none;
transition:opacity .3s ease;
}
body:has(.navbar .dropdown-list.w--open)::after{opacity:1}
}
@media (min-width:992px) and (prefers-reduced-motion:reduce){
.navbar .nav-dropdown-list,
.navbar .bnav-grid>.bnav-card{transition-duration:.01ms;transition-delay:0s}
}
/* ============================================================
ENTRANCE ANIMATIONS (js/bosio-reveal.js)
Everything that animates in is hidden up front so nothing flashes before
GSAP takes over. html.reveal-armed is set by a tiny script in and
removed again as soon as the reveal script has claimed the elements, or
after its failsafe timeout if the script never arrives.
============================================================ */
html.reveal-armed [data-split="heading"],
html.reveal-armed [data-reveal],
html.reveal-armed [data-reveal-group]{visibility:hidden}
@media (prefers-reduced-motion:reduce){
html.reveal-armed [data-split="heading"],
html.reveal-armed [data-reveal],
html.reveal-armed [data-reveal-group]{visibility:visible}
}
/* SplitText clips each line to build the mask, and the clip lands exactly on
the line box, so descenders (g, y, p) lose their tails. Growing the clip
region and taking the same amount back with a margin keeps the rhythm. */
.split-line-mask{padding-bottom:.14em!important;margin-bottom:-.14em!important}
/* ============================================================
SERVICE PAGES: "how we work" band (.svc-b-system-section)
The image carried a fixed 4/5 ratio, so it ran far taller than the copy
next to it. It now simply matches the height of the row, and the copy gets
a little room above and below so the two columns are not flush.
============================================================ */
.svc-sys{align-items:stretch}
.svc-sys-media{aspect-ratio:auto;height:100%;min-height:0}
/* Taken out of the flow so the picture cannot dictate the row height itself. */
.svc-sys-media .image-cover{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.svc-sys-copy{justify-content:center;padding-top:clamp(18px,2vw,30px);padding-bottom:clamp(18px,2vw,30px)}
/* Stacked, there is no neighbour to match, so the ratio comes back. */
@media (max-width:900px){
.svc-sys-media{aspect-ratio:16/10;height:auto}
.svc-sys-copy{padding-top:0;padding-bottom:0}
}