/* ==========================================================================
   Quits Aviation Group shared design system (base.css)
   Author: HiBa Rapid Value Data & Solutions FZE
   A theme-agnostic component library. Themes (executive-jets.css /
   quits-group.css) override the CSS custom properties defined in :root.
   ========================================================================== */

/* ------- Reset ---------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;font-family:var(--font-body);color:var(--text);background:var(--bg);
  line-height:1.65;font-size:1.02rem;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img,svg,video{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,h5,h6,p{margin:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}

/* ------- Design tokens (defaults; overridden per theme) ----------------- */
:root{
  --bg:#0b1220; --surface:#111a2e; --surface-2:#16223c; --text:#eaf0fb;
  --muted:#9fb0c9; --border:rgba(255,255,255,.10);
  --accent:#c9a96a; --accent-2:#2b4cf0; --accent-ink:#0b1220;
  --font-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-display:"Inter",system-ui,sans-serif;
  --maxw:1200px; --gutter:clamp(20px,5vw,64px);
  --r-sm:8px; --r:14px; --r-lg:22px; --r-xl:32px;
  --shadow-sm:0 2px 10px rgba(2,8,23,.14);
  --shadow:0 18px 50px -18px rgba(2,8,23,.45);
  --shadow-lg:0 40px 90px -30px rgba(2,8,23,.55);
  --ease:cubic-bezier(.2,.7,.2,1);
  --t:.45s var(--ease);
  --sp:clamp(48px,6vw,88px); /* section vertical rhythm: kept moderate so consecutive sections don't stack into oversized gaps */
}

/* ------- Layout -------------------------------------------------------- */
.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.container-wide{max-width:1360px}
.container-narrow{max-width:860px}
.section{padding-block:var(--sp);position:relative}
.section--tight{padding-block:clamp(44px,6vw,80px)}
.section--flush-t{padding-top:0}
.grid{display:grid;gap:clamp(18px,2.4vw,30px)}
.cols-2{grid-template-columns:repeat(2,1fr)}
.cols-3{grid-template-columns:repeat(3,1fr)}
.cols-4{grid-template-columns:repeat(4,1fr)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center}
.split>*,.grid>*{min-width:0}
a[href^="mailto:"]{overflow-wrap:anywhere}
.split--media-first .split__media{order:-1}
@media (max-width:900px){
  .cols-2,.cols-3,.cols-4{grid-template-columns:1fr}
  .split{grid-template-columns:1fr;gap:36px}
  .cols-3.keep-2,.cols-4.keep-2{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){.cols-3.keep-2,.cols-4.keep-2{grid-template-columns:1fr}}

/* ------- Typography ---------------------------------------------------- */
.display{font-family:var(--font-display);font-weight:800;line-height:1.02;
  letter-spacing:-.02em;font-size:clamp(2.6rem,6.4vw,5rem)}
h1,.h1{font-family:var(--font-display);font-weight:800;line-height:1.06;letter-spacing:-.02em;
  font-size:clamp(2.1rem,4.6vw,3.4rem)}
h2,.h2{font-family:var(--font-display);font-weight:800;line-height:1.1;letter-spacing:-.018em;
  font-size:clamp(1.8rem,3.6vw,2.7rem)}
h3,.h3{font-family:var(--font-display);font-weight:700;line-height:1.2;letter-spacing:-.01em;
  font-size:clamp(1.25rem,2vw,1.55rem)}
h4,.h4{font-weight:700;font-size:1.06rem;letter-spacing:-.005em}
.lead{font-size:clamp(1.08rem,1.6vw,1.32rem);line-height:1.6;color:var(--muted)}
.eyebrow{display:inline-flex;align-items:center;gap:.55rem;font-size:.78rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
.eyebrow::before{content:"";width:26px;height:1.5px;background:currentColor;opacity:.9}
.eyebrow--center::before{display:none}
.muted{color:var(--muted)}
.text-accent{color:var(--accent)}
.balance{text-wrap:balance}
.section-head{max-width:720px;margin-bottom:clamp(34px,5vw,58px)}
.section-head--center{margin-inline:auto;text-align:center}
.section-head .lead{margin-top:18px}

/* ------- Buttons ------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;gap:.6rem;font-weight:600;font-size:.98rem;
  padding:.92em 1.5em;border-radius:999px;border:1.5px solid transparent;
  transition:transform var(--t),background var(--t),color var(--t),border-color var(--t),box-shadow var(--t);
  will-change:transform;line-height:1;white-space:nowrap}
.btn svg{width:1.05em;height:1.05em;transition:transform .35s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn:hover svg{transform:translateX(4px)}
.btn-primary{background:var(--accent);color:var(--accent-ink);box-shadow:0 12px 30px -12px color-mix(in srgb,var(--accent) 70%,transparent)}
.btn-primary:hover{box-shadow:0 18px 40px -14px color-mix(in srgb,var(--accent) 80%,transparent)}
.btn-outline{border-color:var(--border);color:var(--text);background:transparent}
.btn-outline:hover{border-color:var(--accent);color:var(--accent)}
.btn-light{background:#fff;color:#0b1220}
.btn-ghost{padding-inline:.2em;color:var(--accent)}
.btn-lg{padding:1.05em 1.8em;font-size:1.02rem}
.btn-row{display:flex;flex-wrap:wrap;gap:14px}

/* ------- Header / Nav -------------------------------------------------- */
.site-header{position:fixed;inset:0 0 auto 0;z-index:100;transition:background var(--t),box-shadow var(--t),border-color var(--t),backdrop-filter var(--t);
  border-bottom:1px solid transparent}
.site-header__inner{display:flex;align-items:center;justify-content:space-between;gap:24px;
  height:var(--header-h,84px);max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.site-header.is-scrolled{background:var(--header-bg);backdrop-filter:saturate(140%) blur(14px);
  -webkit-backdrop-filter:saturate(140%) blur(14px);border-bottom-color:var(--border);box-shadow:var(--shadow-sm)}
.brand{display:inline-flex;align-items:center;gap:12px;font-weight:800;letter-spacing:-.01em;color:var(--text)}
.brand svg,.brand img{height:38px;width:auto}
.brand__txt{display:flex;flex-direction:column;line-height:1.02}
.brand__txt b{font-family:var(--font-display);font-size:1.05rem}
.brand__txt span{font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);font-weight:600}
.nav{display:flex;align-items:center;gap:8px}
.nav-links{display:flex;align-items:center;gap:4px}
.nav-links a{position:relative;padding:.6em .9em;font-size:.94rem;font-weight:500;color:var(--nav-link,var(--text));opacity:.85;transition:opacity .25s,color .25s}
.nav-links a:hover{opacity:1;color:var(--accent)}
.nav-links a.is-active{opacity:1;color:var(--accent)}
.nav-links a.is-active::after{content:"";position:absolute;left:.9em;right:.9em;bottom:.35em;height:2px;background:var(--accent);border-radius:2px}
.nav-cta{margin-left:10px}
.theme-toggle{width:44px;height:44px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:transparent;border:1px solid var(--border);color:var(--text);
  transition:color .25s,border-color .25s,transform .25s}
.theme-toggle:hover{border-color:var(--accent);color:var(--accent);transform:rotate(12deg)}
.theme-toggle svg{width:19px;height:19px}
.nav-toggle{display:none;flex-direction:column;gap:5px;width:44px;height:44px;align-items:center;justify-content:center;
  background:transparent;border:1px solid var(--border);border-radius:12px}
.nav-toggle span{width:20px;height:2px;background:var(--text);border-radius:2px;transition:transform .35s var(--ease),opacity .25s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (max-width:960px){
  .nav-toggle{display:flex}
  .nav{position:fixed;inset:var(--header-h,84px) 0 auto 0;flex-direction:column;align-items:stretch;gap:0;
    background:var(--header-bg,var(--surface));backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
    border-bottom:1px solid var(--border);padding:14px var(--gutter) 28px;transform:translateY(-12px);
    opacity:0;pointer-events:none;transition:opacity .3s var(--ease),transform .3s var(--ease);box-shadow:var(--shadow)}
  .nav.is-open{opacity:1;transform:none;pointer-events:auto}
  .nav-links{flex-direction:column;align-items:stretch;gap:0}
  .nav-links a{padding:.95em .2em;border-bottom:1px solid var(--border);font-size:1.05rem;opacity:.95}
  .nav-links a.is-active::after{display:none}
  .nav-cta{margin:16px 0 0}
  .nav-cta .btn{width:100%;justify-content:center}
}

/* ------- Hero ---------------------------------------------------------- */
.hero{position:relative;min-height:clamp(560px,92vh,900px);display:flex;align-items:center;
  padding-block:calc(var(--header-h,84px) + 40px) 60px;overflow:hidden;isolation:isolate}
.hero__media{position:absolute;inset:0;z-index:-2}
.hero__media img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);animation:heroZoom 18s var(--ease) forwards}
@media (prefers-reduced-motion:reduce){.hero__media img{animation:none;transform:none}}
@keyframes heroZoom{to{transform:scale(1)}}
.hero__overlay{position:absolute;inset:0;z-index:-1;background:var(--hero-overlay,linear-gradient(105deg,rgba(6,12,24,0.72) 12%,rgba(6,12,24,0.43) 60%,rgba(6,12,24,0.22)))}
.hero__content{max-width:760px}
.hero__content .display{margin:18px 0 0}
.hero .lead{margin-top:22px;max-width:620px;color:var(--hero-lead,rgba(234,240,251,.86))}
.hero .btn-row{margin-top:36px}
.hero__scroll{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:1;color:var(--muted);
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:8px}
.hero__scroll::after{content:"";width:1px;height:38px;background:linear-gradient(var(--accent),transparent);animation:scrollLine 2s var(--ease) infinite}
@keyframes scrollLine{0%{transform:scaleY(.2);transform-origin:top;opacity:.3}50%{transform:scaleY(1);opacity:1}100%{transform:scaleY(.2);transform-origin:bottom;opacity:.3}}

/* stats floating on hero */
.hero-stats{display:flex;flex-wrap:wrap;gap:clamp(24px,5vw,64px);margin-top:48px;padding-top:34px;border-top:1px solid var(--border)}
.hero-stats .stat__num{font-size:clamp(1.7rem,3vw,2.4rem)}

/* ------- Page hero (interior pages) ------------------------------------ */
.page-hero{position:relative;padding:calc(var(--header-h,84px) + clamp(60px,10vw,120px)) 0 clamp(50px,7vw,90px);
  overflow:hidden;isolation:isolate}
.page-hero--media{color:#fff}
.page-hero__media{position:absolute;inset:0;z-index:-2}
.page-hero__media img{width:100%;height:100%;object-fit:cover}
.page-hero__overlay{position:absolute;inset:0;z-index:-1;background:var(--hero-overlay,linear-gradient(100deg,rgba(6,12,24,0.7),rgba(6,12,24,0.39)))}
.page-hero__content{max-width:760px}
.page-hero h1{margin-top:16px}
.page-hero .lead{margin-top:18px;max-width:620px}
.breadcrumb{display:flex;gap:.5rem;align-items:center;font-size:.82rem;color:var(--muted);flex-wrap:wrap}
.breadcrumb a:hover{color:var(--accent)}
.breadcrumb span{opacity:.5}

/* media heroes & CTA bands sit on dark photography/gradients in every theme */
.hero .display,.hero h1,.hero .h1,
.page-hero--media h1,.page-hero--media .h1{color:#fff}
.hero .hero-stats .stat__num{color:#fff}
.hero .hero-stats .stat__label{color:rgba(255,255,255,.78)}
.hero .btn-outline,.page-hero--media .btn-outline,.cta .btn-outline{border-color:rgba(255,255,255,.45);color:#fff}
.hero .btn-outline:hover,.page-hero--media .btn-outline:hover,.cta .btn-outline:hover{border-color:#fff;color:#fff}
.page-hero--media .breadcrumb{color:rgba(255,255,255,.75)}
.page-hero--media .breadcrumb a:hover{color:#fff}
.page-hero--media .lead{color:rgba(255,255,255,.88)}
.cta{color:#eaf0fb}
.cta h2{color:#fff}
.cta .lead{color:rgba(255,255,255,.82)}
.cta__glow{opacity:.35}

/* ------- Cards --------------------------------------------------------- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:clamp(24px,3vw,34px);
  transition:transform var(--t),border-color var(--t),box-shadow var(--t),background var(--t);position:relative;overflow:hidden}
.card:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--accent) 45%,var(--border));box-shadow:var(--shadow)}
.card__icon{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;margin-bottom:20px;
  background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent)}
.card__icon svg{width:26px;height:26px}
.card h3{margin-bottom:10px}
.card p{color:var(--muted);font-size:.98rem}
.card__link{margin-top:18px;display:inline-flex;align-items:center;gap:.5rem;font-weight:600;color:var(--accent);font-size:.92rem}
.card__link svg{width:1em;height:1em;transition:transform .3s var(--ease)}
.card:hover .card__link svg{transform:translateX(4px)}
.card--num{counter-increment:cardnum}
.card__index{font-family:var(--font-display);font-weight:800;font-size:1.1rem;color:var(--accent);opacity:.6}

/* foundation cards (vision / mission / values) */
/* Cards are flex columns so their content distributes evenly instead of
   collapsing to the top and leaving a gap under short copy (e.g. Vision). */
.foundation-card{background:var(--surface-2);border-radius:var(--r-lg);padding:clamp(26px,3vw,34px);
  height:100%;display:flex;flex-direction:column;transition:transform var(--t),box-shadow var(--t)}
.foundation-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.foundation-card__icon{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  margin-bottom:22px;background:var(--surface);color:var(--accent);box-shadow:var(--shadow-sm);flex:none}
.foundation-card__icon svg{width:24px;height:24px}
.foundation-card h3{margin-bottom:14px}
.foundation-card p{color:var(--muted);font-size:.98rem}
/* the primary body of each card grows to fill, keeping the three visually level */
.foundation-card__body{flex:1;display:flex;flex-direction:column;gap:13px}
.foundation-list{display:grid;gap:13px;align-content:start}
.foundation-list li{position:relative;padding-left:18px;color:var(--muted);font-size:.98rem;line-height:1.55}
.foundation-list li::before{content:"";position:absolute;left:1px;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--muted)}
.foundation-values{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:2px}
.foundation-values span{display:flex;align-items:center;justify-content:center;background:var(--surface);
  border-radius:var(--r-sm);padding:1.15em .6em;text-align:center;font-weight:700;font-size:.94rem;
  color:var(--text);box-shadow:var(--shadow-sm)}
.foundation-card__note{margin-top:18px;color:var(--muted);font-size:.88rem;line-height:1.5}

/* company grid ("Our Group Companies") */
.company{display:flex;flex-direction:column;height:100%}
.company .card__link,.company__soon-pill{margin-top:auto;padding-top:18px}
.company--soon{cursor:default}
.company--soon:hover{transform:none;box-shadow:none;border-color:var(--border)}
.company__soon-pill{display:inline-flex;width:fit-content}

/* media card (image top) */
.mcard{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;
  transition:transform var(--t),box-shadow var(--t),border-color var(--t);display:flex;flex-direction:column}
.mcard:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:color-mix(in srgb,var(--accent) 40%,var(--border))}
.mcard__media{position:relative;aspect-ratio:16/10;overflow:hidden}
.mcard__media img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.mcard:hover .mcard__media img{transform:scale(1.06)}
.mcard__tag{position:absolute;top:14px;left:14px;background:var(--accent);color:var(--accent-ink);font-size:.72rem;
  font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:.4em .8em;border-radius:999px}
.mcard__body{padding:clamp(20px,2.6vw,28px);display:flex;flex-direction:column;gap:10px;flex:1}
.mcard__body h3{font-size:1.2rem}
.mcard__body p{color:var(--muted);font-size:.96rem}
.mcard__body .card__link{margin-top:auto;padding-top:8px}

/* feature list */
.feature{display:flex;gap:16px;align-items:flex-start}
.feature__icon{flex:none;width:46px;height:46px;border-radius:12px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--accent) 15%,transparent);color:var(--accent)}
.feature__icon svg{width:22px;height:22px}
.feature h4{margin-bottom:6px}
.feature p{color:var(--muted);font-size:.95rem}

/* checklist */
.ticks{display:grid;gap:14px}
.ticks li{display:flex;gap:12px;align-items:flex-start;color:var(--muted)}
.ticks li::before{content:"";flex:none;width:22px;height:22px;margin-top:2px;border-radius:50%;
  background:color-mix(in srgb,var(--accent) 20%,transparent);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9a96a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;background-size:13px}
.ticks li b{color:var(--text)}

/* ------- Stats --------------------------------------------------------- */
.stat__num{font-family:var(--font-display);font-weight:800;line-height:1;letter-spacing:-.02em;
  font-size:clamp(2.2rem,4vw,3.2rem);color:var(--text)}
.stat__num .suffix{color:var(--accent)}
.stat__label{margin-top:10px;color:var(--muted);font-size:.9rem;line-height:1.4}
.stats-band{border-top:1px solid var(--border);border-bottom:1px solid var(--border)}

/* ------- Logo strip (Client portfolio) ---------------------------------
   Static grid, so motion comes from a staggered reveal: each name lifts
   in individually once the strip scrolls into view (.is-in is added by
   the shared [data-reveal] IntersectionObserver in main.js). --------- */
.logostrip{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(24px,4vw,60px)}
.logostrip span{display:inline-block;font-weight:700;letter-spacing:.02em;color:var(--muted);
  opacity:0;transform:translateY(14px) scale(.94);
  transition:opacity .55s var(--ease),transform .55s var(--ease),color .3s;
  font-size:clamp(1rem,1.6vw,1.3rem)}
.logostrip.is-in span{opacity:.75;transform:none}
.logostrip.is-in span:nth-child(1){transition-delay:.03s}
.logostrip.is-in span:nth-child(2){transition-delay:.08s}
.logostrip.is-in span:nth-child(3){transition-delay:.13s}
.logostrip.is-in span:nth-child(4){transition-delay:.18s}
.logostrip.is-in span:nth-child(5){transition-delay:.23s}
.logostrip.is-in span:nth-child(6){transition-delay:.28s}
.logostrip.is-in span:nth-child(7){transition-delay:.33s}
.logostrip.is-in span:nth-child(8){transition-delay:.38s}
.logostrip.is-in span:nth-child(9){transition-delay:.43s}
.logostrip.is-in span:nth-child(10){transition-delay:.48s}
.logostrip span:hover{opacity:1!important;color:var(--text);transform:translateY(-3px)!important}

/* ------- Marquee (Collaboration / partners) -----------------------------
   Continuous scroll already reads as motion; a soft sheen sweep adds a
   second, slower layer so the wall feels deliberately animated rather
   than just auto-scrolling text. Starts once the block scrolls in. --- */
.marquee{position:relative;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(100deg,transparent 42%,color-mix(in srgb,var(--accent) 16%,transparent) 50%,transparent 58%);
  background-size:260% 100%;background-position:160% 0;opacity:0;
  transition:opacity .6s var(--ease)}
.marquee.is-in::after{opacity:1;animation:marquee-sheen 6s ease-in-out .4s infinite}
.marquee:hover::after{animation-play-state:paused}
.marquee__track{display:flex;gap:clamp(34px,5vw,72px);width:max-content;animation:marquee 34s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__track span{font-weight:700;color:var(--muted);opacity:.7;font-size:clamp(1.05rem,1.8vw,1.45rem);white-space:nowrap}
@keyframes marquee{to{transform:translateX(-50%)}}
@keyframes marquee-sheen{0%{background-position:160% 0}55%,100%{background-position:-60% 0}}
@media (prefers-reduced-motion:reduce){
  .marquee__track{animation:none}
  .marquee::after{animation:none;opacity:0}
  .logostrip span{opacity:.75;transform:none;transition:none}
}

/* ------- Brand strips carrying real marks ------------------------------
   Partner and client logos arrive in every polarity there is: dark
   wordmarks, white wordmarks built for dark backgrounds, and colour-only
   icons. Rather than force them all to one colour - which turns an opaque
   logo into a solid block - each sits on its own white tile at a fixed
   size. One rhythm across the row, every mark in its own brand colours,
   and the company name captioned underneath. Entries whose mark could not
   be obtained put the name in the tile instead of an invented monogram.
   --------------------------------------------------------------------- */
/* tiles line up along their tops: the entries that carry no caption are
   shorter, and centring them would leave their tiles sitting low */
.logostrip--logos,.marquee__track--logos{align-items:flex-start}
.logostrip--logos span.brandchip,.marquee__track--logos span.brandchip{
  display:inline-flex;flex-direction:column;align-items:center;gap:10px;white-space:nowrap}
/* the strips dim their spans (.75 / .7) to fade plain wordmarks back; the
   tile is itself a span, so it needs lifting back to full or every logo
   sits behind a veil */
.logostrip--logos.is-in span.brandchip,.logostrip--logos.is-in span.brandchip__mark,
.marquee__track--logos span.brandchip,.marquee__track--logos span.brandchip__mark{opacity:1}
.brandchip__mark{display:flex;align-items:center;justify-content:center;
  width:156px;height:66px;padding:11px 16px;border-radius:12px;background:#fff;
  box-shadow:0 2px 12px rgba(8,14,28,.12);transition:box-shadow var(--t)}
.brandchip__mark img{max-width:100%;max-height:100%;width:auto;height:auto;
  object-fit:contain;display:block}
/* name-in-tile fallback for the marks that could not be sourced */
.brandchip__mark i{font-style:normal;font-family:var(--font-display);font-weight:800;
  font-size:.92rem;line-height:1.2;letter-spacing:-.01em;color:#2a3550;
  text-align:center;white-space:normal}
.brandchip__name{font-size:.82rem;font-weight:700;letter-spacing:.02em;
  color:var(--muted);opacity:.9}
.brandchip:hover .brandchip__mark{box-shadow:0 10px 26px rgba(8,14,28,.22)}
@media (max-width:560px){
  .brandchip__mark{width:126px;height:56px;padding:9px 12px}
  .brandchip__name{font-size:.74rem}
}
/* When the viewer asks for reduced motion the scroll stops, and a track
   built to be scrolled just sits there clipped - the partners past the
   right edge become unreachable. Wrap them into a centred row instead and
   drop the duplicate half, which exists only to make the loop seamless. */
@media (prefers-reduced-motion:reduce){
  .marquee:has(.marquee__track--logos){-webkit-mask-image:none;mask-image:none}
  .marquee__track--logos{flex-wrap:wrap;justify-content:center;width:auto;row-gap:24px}
  .marquee__track--logos span.brandchip:nth-child(n+8){display:none}
}

/* ------- Timeline (milestones) ----------------------------------------- */
.timeline{position:relative;display:grid;gap:6px}
.timeline::before{content:"";position:absolute;left:8px;top:6px;bottom:6px;width:2px;background:var(--border)}
.tl{position:relative;padding:0 0 30px 42px}
.tl::before{content:"";position:absolute;left:0;top:4px;width:18px;height:18px;border-radius:50%;
  background:var(--bg);border:3px solid var(--accent)}
.tl__year{font-family:var(--font-display);font-weight:800;color:var(--accent);font-size:1.05rem}
.tl h4{margin:4px 0 4px}
.tl p{color:var(--muted);font-size:.94rem}

/* ------- Accordion ----------------------------------------------------- */
.accordion{border-top:1px solid var(--border)}
.acc{border-bottom:1px solid var(--border)}
.acc__q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:22px 4px;background:transparent;border:0;text-align:left;color:var(--text);font-weight:600;font-size:1.06rem}
.acc__q::after{content:"";flex:none;width:22px;height:22px;background:no-repeat center/contain;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9a96a' stroke-width='2.5' stroke-linecap='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E");transition:transform .35s var(--ease)}
.acc.is-open .acc__q::after{transform:rotate(45deg)}
.acc__a{max-height:0;overflow:hidden;transition:max-height .4s var(--ease)}
.acc__a-inner{padding:0 4px 24px;color:var(--muted)}

/* ------- CTA band ------------------------------------------------------ */
.cta{position:relative;overflow:hidden;border-radius:var(--r-xl);padding:clamp(40px,6vw,72px);
  background:var(--cta-bg,linear-gradient(120deg,var(--surface),var(--surface-2)));border:1px solid var(--border)}
.cta__inner{position:relative;z-index:1;max-width:640px}
.cta h2{margin-bottom:16px}
.cta .btn-row{margin-top:30px}
.cta__glow{position:absolute;width:520px;height:520px;border-radius:50%;filter:blur(90px);opacity:.5;
  background:var(--accent);right:-120px;top:-160px;z-index:0}

/* ------- Forms --------------------------------------------------------- */
.form{display:grid;gap:18px}
.field{display:grid;gap:8px}
.field label{font-size:.85rem;font-weight:600;letter-spacing:.02em;color:var(--text)}
.field label .req{color:var(--accent)}
.field input,.field select,.field textarea{width:100%;padding:.9em 1em;background:var(--input-bg,rgba(255,255,255,.04));
  border:1.5px solid var(--border);border-radius:var(--r-sm);color:var(--text);font:inherit;font-size:.98rem;transition:border-color .25s,background .25s}
.field textarea{min-height:130px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:color-mix(in srgb,var(--muted) 80%,transparent)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent);background:var(--input-bg-focus,rgba(255,255,255,.06))}
.field.is-invalid input,.field.is-invalid textarea,.field.is-invalid select{border-color:#e5484d}
.field__err{font-size:.78rem;color:#ff7a7d;display:none}
.field.is-invalid .field__err{display:block}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:620px){.form-row{grid-template-columns:1fr}}
.form-note{font-size:.82rem;color:var(--muted)}
.form-success{display:none;padding:16px 18px;border-radius:var(--r);background:color-mix(in srgb,var(--accent) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);color:var(--text);font-size:.95rem}
.form-success.is-shown{display:block}

/* ------- Gallery / lightbox -------------------------------------------- */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.gallery--3{grid-template-columns:repeat(3,1fr)}
@media (max-width:820px){.gallery,.gallery--3{grid-template-columns:repeat(2,1fr)}}
.gallery button{border:0;padding:0;background:none;border-radius:var(--r);overflow:hidden;aspect-ratio:4/3;position:relative}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.gallery button:hover img{transform:scale(1.08)}
.gallery button::after{content:"";position:absolute;inset:0;background:rgba(6,12,24,.15);opacity:0;transition:opacity .3s}
.gallery button:hover::after{opacity:1}

/* -- Gallery feature tile: "View more" overlay + expandable extra shots -- */
.gallery-feature{position:relative}
.gallery-feature .gallery-feature__btn{display:block;width:100%;height:100%}
.gallery-feature__caption{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;align-items:center;
  justify-content:space-between;gap:10px;padding:16px 14px 14px;pointer-events:none;
  background:linear-gradient(to top,rgba(6,12,24,.88),rgba(6,12,24,.02) 75%)}
.gallery-feature__label{color:#fff;font-size:1.05rem;font-weight:700;letter-spacing:.01em;text-shadow:0 1px 8px rgba(0,0,0,.4)}
.gallery-more-btn{pointer-events:auto;display:inline-flex;align-items:center;gap:6px;padding:8px 14px;
  border-radius:999px;border:1px solid rgba(255,255,255,.4);background:rgba(6,12,24,.4);backdrop-filter:blur(6px);
  color:#fff;font-size:.76rem;font-weight:600;letter-spacing:.01em;cursor:pointer;white-space:nowrap;
  transition:background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease)}
.gallery-more-btn:hover{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.gallery-more-btn svg{width:13px;height:13px;flex:none;transition:transform .35s var(--ease)}
.gallery-more-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.gallery__extra-item{display:none;opacity:0;transform:translateY(14px);
  transition:opacity .5s var(--ease),transform .5s var(--ease)}
.gallery.is-expanded .gallery__extra-item{display:block}
.gallery.is-expanded .gallery__extra-item.is-visible{opacity:1;transform:none}
.lightbox{position:fixed;inset:0;z-index:200;display:none;place-items:center;padding:24px;
  background:rgba(4,8,18,.92);backdrop-filter:blur(6px)}
.lightbox.is-open{display:grid}
.lightbox img{max-width:min(1100px,94vw);max-height:88vh;border-radius:12px;box-shadow:var(--shadow-lg)}
.lightbox__close{position:absolute;top:20px;right:22px;width:46px;height:46px;border-radius:50%;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);color:#fff;font-size:1.4rem;line-height:1}

/* ------- Footer -------------------------------------------------------- */
.site-footer{background:var(--footer-bg,var(--surface));border-top:1px solid var(--border);padding-block:clamp(56px,7vw,84px) 34px;margin-top:0}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.4fr;gap:clamp(28px,4vw,54px)}
@media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.footer-grid{grid-template-columns:1fr}}
.footer-brand p{color:var(--muted);font-size:.94rem;margin-top:18px;max-width:34ch}
.footer-col h4{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:18px}
.footer-col a,.footer-col li{display:block;color:var(--text);opacity:.82;font-size:.95rem;padding:6px 0;transition:opacity .25s,color .25s}
.footer-col a:hover{opacity:1;color:var(--accent)}
.footer-contact li{display:flex;gap:10px;align-items:flex-start;opacity:.82;color:var(--muted);font-size:.94rem}
.footer-contact svg{width:18px;height:18px;flex:none;margin-top:3px;color:var(--accent)}
.footer-bottom{margin-top:clamp(40px,5vw,64px);padding-top:26px;border-top:1px solid var(--border);
  display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center;color:var(--muted);font-size:.85rem}
.footer-bottom a:hover{color:var(--accent)}
.socials{display:flex;gap:10px}
.socials a{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--border);color:var(--text);opacity:.8;transition:all .25s}
.socials a:hover{opacity:1;color:var(--accent-ink);background:var(--accent);border-color:var(--accent);transform:translateY(-2px)}
.socials svg{width:18px;height:18px}

/* ------- Reveal animations --------------------------------------------- */
[data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
[data-reveal].is-in{opacity:1;transform:none}
[data-reveal][data-reveal="left"]{transform:translateX(-30px)}
[data-reveal][data-reveal="right"]{transform:translateX(30px)}
[data-reveal].is-in{transform:none}
[data-reveal-delay="1"]{transition-delay:.08s}
[data-reveal-delay="2"]{transition-delay:.16s}
[data-reveal-delay="3"]{transition-delay:.24s}
[data-reveal-delay="4"]{transition-delay:.32s}
[data-reveal-delay="5"]{transition-delay:.40s}
@media (prefers-reduced-motion:reduce){[data-reveal]{opacity:1!important;transform:none!important}}

/* ------- Utilities ----------------------------------------------------- */
.eyebrow.on-dark{color:var(--accent)}
.center{text-align:center}
.mx-auto{margin-inline:auto}
.mt-0{margin-top:0}.mt-1{margin-top:12px}.mt-2{margin-top:22px}.mt-3{margin-top:34px}.mt-4{margin-top:48px}
.divider{height:1px;background:var(--border);border:0;margin:0}
.pill{display:inline-flex;align-items:center;gap:.5rem;padding:.45em .9em;border-radius:999px;
  border:1px solid var(--border);font-size:.8rem;font-weight:600;color:var(--muted);background:var(--surface)}
.pill--accent{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 40%,var(--border))}
.statement-card{max-width:820px;margin-inline:auto;text-align:center}
.statement-tags{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.media-frame{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--border);box-shadow:var(--shadow);position:relative}
.media-frame img{width:100%;height:100%;object-fit:cover;display:block}
.media-frame--tall{aspect-ratio:3/4}
.media-frame--wide{aspect-ratio:16/10}
.media-stack{position:relative}
.badge-float{position:absolute;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  padding:16px 20px;box-shadow:var(--shadow);display:flex;gap:12px;align-items:center}
.badge-float .stat__num{font-size:1.6rem}
.badge-float .stat__label{margin-top:2px}
.skip-link{position:absolute;left:-999px;top:8px;z-index:300;background:var(--accent);color:var(--accent-ink);
  padding:10px 16px;border-radius:8px;font-weight:600}
.skip-link:focus{left:16px}

/* scrolltop */
.scrolltop{position:fixed;right:22px;bottom:22px;z-index:90;width:48px;height:48px;border-radius:50%;
  display:grid;place-items:center;background:var(--accent);color:var(--accent-ink);border:0;box-shadow:var(--shadow);
  opacity:0;pointer-events:none;transform:translateY(12px);transition:opacity .3s,transform .3s}
.scrolltop.is-shown{opacity:1;pointer-events:auto;transform:none}
.scrolltop svg{width:20px;height:20px}

/* demo ribbon (site is a proposal prototype) */
.demo-note{background:var(--accent);color:var(--accent-ink);text-align:center;font-size:.8rem;font-weight:600;
  letter-spacing:.02em;padding:7px 16px;position:relative;z-index:120}
.demo-note a{text-decoration:underline;text-underline-offset:2px}