/* ==========================================================================
   volt.ltd — Volt Group corporate site
   Stone design system. Inter.
   ========================================================================== */

:root{
  --stone:        #D8D2C4;
  --stone-back:   #CFC9BB;
  --stone-line:   #C2BBA9;
  --black:        #000000;
  --grey:         #656970;
  --grey-line:    #3A3D42;
  --white:        #FFFFFF;

  --wrap:         1340px;
  --gutter:       48px;
  --hdr-h:        82px;

  --ease:         cubic-bezier(.16,.68,.28,1);
  --ease-out:     cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  margin:0;
  background:var(--stone);
  color:var(--black);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  font-size:14px;
  font-weight:300;
  line-height:1.56;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

img{max-width:100%;display:block;border:0}
a{color:inherit;text-decoration:none}
button{font-family:inherit}

::selection{background:var(--black);color:var(--stone)}

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.wrap--narrow{max-width:940px}

section{position:relative}

.sec{padding:126px 0}
.sec--tight{padding:84px 0}
.sec--back{background:var(--stone-back)}
.sec--dark{background:var(--black);color:var(--stone)}
.sec--dark .eyebrow{color:#8C9098}
.sec--dark .lede,.sec--dark p{color:#BDB8AC}

.rule{height:1px;background:var(--stone-line);border:0;margin:0}
.sec--dark .rule{background:var(--grey-line)}

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */

h1,h2,h3,h4{margin:0;font-weight:400;letter-spacing:-.02em}

.h-hero{
  font-size:clamp(40px,5.4vw,78px);
  font-weight:400;
  line-height:1.0;
  letter-spacing:-.045em;
  margin:0;
  max-width:15em;
}

.h-sec{
  font-size:clamp(26px,2.8vw,40px);
  font-weight:400;
  line-height:1.1;
  letter-spacing:-.038em;
  margin:0 0 28px;
  max-width:16em;
}

.h-sub{
  font-size:22px;font-weight:400;line-height:1.24;letter-spacing:-.03em;margin:0 0 14px;
}

.h-card{
  font-size:17px;font-weight:500;line-height:1.3;letter-spacing:-.025em;margin:0 0 12px;
}

.eyebrow{
  display:block;font-size:12px;font-weight:500;text-transform:uppercase;
  letter-spacing:.5px;color:var(--grey);margin:0 0 26px;
}

.lede{
  font-size:clamp(17px,1.5vw,20px);font-weight:300;line-height:1.5;
  letter-spacing:-.02em;color:var(--black);max-width:34em;margin:0 0 30px;
}

p{margin:0 0 16px;max-width:38em}
p:last-child{margin-bottom:0}

.muted{color:var(--grey)}
.small{font-size:12px;line-height:1.6}

/* --------------------------------------------------------------------------
   Links + buttons
   -------------------------------------------------------------------------- */

.link{
  display:inline-flex;align-items:center;gap:8px;position:relative;
  font-size:13px;font-weight:500;letter-spacing:.2px;padding-bottom:4px;
}
.link::after{
  content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:currentColor;transform-origin:right;transform:scaleX(1);
  transition:transform .45s var(--ease-out);
}
.link:hover::after{transform-origin:left;animation:linewipe .55s var(--ease-out)}
@keyframes linewipe{0%{transform:scaleX(1);transform-origin:right}
                    49%{transform:scaleX(0);transform-origin:right}
                    50%{transform:scaleX(0);transform-origin:left}
                    100%{transform:scaleX(1);transform-origin:left}}
.link .ar{display:inline-block;transition:transform .45s var(--ease-out)}
.link:hover .ar{transform:translateX(6px)}

.btn{
  position:relative;overflow:hidden;isolation:isolate;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  height:54px;padding:0 32px;
  font-size:13px;font-weight:500;letter-spacing:.3px;
  border:1px solid var(--black);background:transparent;color:var(--black);
  cursor:pointer;transition:color .4s var(--ease-out),border-color .4s var(--ease-out);
}
.btn::before{
  content:'';position:absolute;inset:0;z-index:-1;background:var(--black);
  transform:scaleY(0);transform-origin:bottom;
  transition:transform .5s var(--ease-out);
}
.btn:hover::before{transform:scaleY(1)}
.btn:hover{color:var(--stone)}
.btn .ar{display:inline-block;transition:transform .45s var(--ease-out)}
.btn:hover .ar{transform:translateX(5px)}

.btn--solid{background:var(--black);color:var(--stone)}
.btn--solid::before{background:var(--stone);transform-origin:top}
.btn--solid:hover{color:var(--black)}

.sec--dark .btn{border-color:var(--stone);color:var(--stone)}
.sec--dark .btn::before{background:var(--stone)}
.sec--dark .btn:hover{color:var(--black)}
.sec--dark .btn--solid{background:var(--stone);color:var(--black)}
.sec--dark .btn--solid::before{background:var(--black)}
.sec--dark .btn--solid:hover{color:var(--stone)}

.btn-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:40px}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.hdr{
  position:fixed;top:0;left:0;right:0;z-index:90;
  background:transparent;border-bottom:1px solid transparent;
  transition:background .5s var(--ease-out),border-color .5s var(--ease-out),
             transform .5s var(--ease-out),backdrop-filter .5s var(--ease-out);
}
.hdr__in{display:flex;align-items:center;justify-content:space-between;height:var(--hdr-h);position:relative;z-index:2}

/* scrim so the white logo and nav stay legible over bright photography */
.hdr--over::before{
  content:'';position:absolute;left:0;right:0;top:0;height:calc(var(--hdr-h) + 60px);
  background:linear-gradient(180deg,rgba(0,0,0,.52) 0%,rgba(0,0,0,.22) 55%,rgba(0,0,0,0) 100%);
  pointer-events:none;transition:opacity .5s var(--ease-out);
}
.hdr.is-stuck::before{opacity:0}

/* over a photographic hero: white marks, no plate */
.hdr--over{color:var(--white)}
.hdr--over .burger i{background:var(--white)}
.hdr--over .nav a.nav__cta{background:var(--white);color:var(--black)}


/* scrolled past the hero: stone plate, black marks */
.hdr.is-stuck{
  background:rgba(216,210,196,.94);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom-color:var(--stone-line);
  color:var(--black);
}
.hdr.is-stuck .burger i{background:var(--black)}
.hdr.is-stuck .nav a.nav__cta{background:var(--black);color:var(--stone)}
.hdr.is-hidden{transform:translateY(-100%)}

.hdr__logo{display:flex;align-items:center;flex:none}
.hdr__logo img{height:23px;width:auto;transition:opacity .4s var(--ease-out)}
.hdr__logo .lg-w{display:block}
.hdr__logo .lg-b{display:none}
.hdr.is-stuck .hdr__logo .lg-w{display:none}
.hdr.is-stuck .hdr__logo .lg-b{display:block}
.hdr--light .hdr__logo .lg-w{display:none}
.hdr--light .hdr__logo .lg-b{display:block}

.nav{display:flex;align-items:center;gap:32px;flex:none}
.nav a{
  font-size:13px;font-weight:400;position:relative;padding:5px 0;
  white-space:nowrap;flex:none;
}
.nav a::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform .45s var(--ease-out);
}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}
.nav a[aria-current="page"]{font-weight:500}

.nav a.nav__cta{
  height:40px;padding:0 22px;border:0;flex:none;white-space:nowrap;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:500;letter-spacing:.3px;margin-left:6px;
  background:var(--black);color:var(--stone);
  transition:background .4s var(--ease-out),color .4s var(--ease-out),
             opacity .3s var(--ease-out),transform .4s var(--ease-out);
}
.nav a.nav__cta::after{display:none}
.nav a.nav__cta:hover{transform:translateY(-2px);opacity:.9}

.burger{display:none;width:44px;height:44px;border:0;background:transparent;cursor:pointer;padding:0}
.burger i{display:block;height:1px;background:var(--black);margin:6px auto;width:22px;transition:transform .35s var(--ease-out),opacity .3s var(--ease-out)}
.burger[aria-expanded="true"] i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] i:nth-child(2){opacity:0}
.burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.mobnav{
  display:none;background:var(--stone);color:var(--black);
  border-top:1px solid var(--stone-line);
}
.mobnav.is-open{display:block}
.mobnav a{display:block;padding:18px 0;border-bottom:1px solid var(--stone-line);font-size:17px;letter-spacing:-.03em}
.mobnav a:last-child{border-bottom:0}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero{
  position:relative;min-height:100svh;
  display:flex;align-items:flex-end;
  background:var(--black);overflow:hidden;
}
.hero--short{min-height:74svh}

.hero__media{
  position:absolute;top:-4%;left:0;right:0;height:112%;
  background-size:cover;background-position:center;background-color:#8E8878;
  transform:scale(1.1);opacity:0;
  transition:transform 2.2s var(--ease-out),opacity 1.4s ease;
  will-change:transform;
}
.hero.is-ready .hero__media{transform:scale(1);opacity:1}
.hero__vid{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  z-index:0;pointer-events:none;object-position:35% center;
}
/* Studio film runs light. The hero type is white, so a hero carrying video gets
   a heavier scrim than one carrying photography. */
.hero__media:has(.hero__vid)::after{
  background:linear-gradient(180deg,rgba(0,0,0,.58) 0%,rgba(0,0,0,.34) 30%,rgba(0,0,0,.56) 62%,rgba(0,0,0,.86) 100%);
}
.hero__media::after{
  content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(0,0,0,.46) 0%,rgba(0,0,0,.14) 30%,rgba(0,0,0,.42) 66%,rgba(0,0,0,.80) 100%);
}

.hero__in{position:relative;z-index:2;width:100%;padding:0 0 clamp(64px,9vh,112px);color:var(--white)}
.hero__in .eyebrow{color:rgba(255,255,255,.7)}
.hero__in .lede{color:rgba(255,255,255,.9);max-width:30em;margin-top:28px}
.hero__in .btn{border-color:rgba(255,255,255,.6);color:var(--white)}
.hero__in .btn::before{background:var(--white)}
.hero__in .btn:hover{color:var(--black);border-color:var(--white)}
.hero__in .btn--solid{background:var(--white);color:var(--black);border-color:var(--white)}
.hero__in .btn--solid::before{background:transparent}
.hero__in .btn--solid:hover{color:var(--black)}

/* staggered entrance */
.st{opacity:0;transform:translateY(26px);
    transition:opacity .95s var(--ease-out),transform .95s var(--ease-out);
    transition-delay:calc(var(--i,0) * 110ms + 260ms)}
.hero.is-ready .st{opacity:1;transform:none}

/* black hero, no photography (Investors) */
.hero--black{background:var(--black);align-items:center;min-height:88svh}
.hero--black .hero__in{color:var(--stone);padding:calc(var(--hdr-h) + 40px) 0 40px}
.hero--black .hero__in .eyebrow{color:#8C9098}
.hero--black .hero__in .lede{color:#BDB8AC}
.hero--black .st{opacity:1;transform:none}
.hero--black.is-ready .st{opacity:1;transform:none}
.hero--black .hero__in .btn{border-color:rgba(216,210,196,.6)}
.hero--black .hero__in .btn::before{background:var(--stone)}
.hero--black .hero__in .btn--solid{background:var(--stone);color:var(--black);border-color:var(--stone)}
.hero--black .hero__in .btn--solid::before{background:transparent}

/* faint grid texture on the black hero so it is not a flat void */
.hero--black::before{
  content:'';position:absolute;inset:0;opacity:.5;
  background:
    radial-gradient(120% 90% at 78% 18%, rgba(216,210,196,.10) 0%, rgba(0,0,0,0) 62%),
    repeating-linear-gradient(90deg, rgba(216,210,196,.045) 0 1px, transparent 1px 132px);
}

/* scroll cue */
.cue{
  position:absolute;left:50%;bottom:34px;transform:translateX(-50%);z-index:3;
  width:1px;height:56px;background:rgba(255,255,255,.28);overflow:hidden;
}
.cue::after{
  content:'';position:absolute;left:0;top:0;width:1px;height:22px;background:#fff;
  animation:cueRun 2.4s var(--ease-out) infinite;
}
@keyframes cueRun{0%{transform:translateY(-24px)}60%,100%{transform:translateY(58px)}}

/* --------------------------------------------------------------------------
   Grids
   -------------------------------------------------------------------------- */

.grid{display:grid;gap:1px;background:var(--stone-line)}
.grid > *{background:var(--stone);padding:46px 40px;transition:background .45s var(--ease-out)}
.grid > *:hover{background:var(--stone-back)}
.sec--back .grid > *{background:var(--stone-back)}
.sec--back .grid > *:hover{background:var(--stone)}
.sec--dark .grid{background:var(--grey-line)}
.sec--dark .grid > *{background:var(--black)}
.sec--dark .grid > *:hover{background:#0C0D0F}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}

.cols{display:grid;gap:56px}
.cols--2{grid-template-columns:repeat(2,1fr)}
.cols--3{grid-template-columns:repeat(3,1fr)}
.cols--sidebar{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:80px}

/* Stat cards */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--stone-line);
       border-top:1px solid var(--stone-line);border-bottom:1px solid var(--stone-line)}
.stat{background:var(--stone);padding:46px 36px;transition:background .45s var(--ease-out)}
.stat:hover{background:var(--stone-back)}
.sec--back .stat{background:var(--stone-back)}
.sec--back .stat:hover{background:var(--stone)}
.stat__n{font-size:clamp(34px,3.4vw,48px);font-weight:400;letter-spacing:-.05em;line-height:1;margin:0 0 14px;
         font-variant-numeric:tabular-nums}
.stat__l{font-size:13px;font-weight:300;line-height:1.5;color:var(--grey);margin:0;max-width:22em}

/* Media frames, with reveal + hover zoom */
.frame{position:relative;overflow:hidden;background:#C4BDAC}
.frame img,.frame .bg{
  width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.001);transition:transform 1.1s var(--ease-out);
}
.frame:hover img,a:hover .frame img{transform:scale(1.05)}
.frame::after{
  content:'';position:absolute;inset:0;background:var(--stone);
  transform-origin:right;transform:scaleX(1);
  transition:transform 1.05s var(--ease-out);
}
.sec--back .frame::after{background:var(--stone-back)}
.frame.is-in::after{transform:scaleX(0)}

.card{display:flex;flex-direction:column}
.card__media{aspect-ratio:4/3;margin-bottom:24px}
.card__meta{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--grey);margin:0 0 12px}

/* Logo strip */
.logos{display:flex;flex-wrap:wrap;align-items:center;gap:14px 64px}
.logos__item{
  font-size:16px;letter-spacing:-.025em;color:var(--black);padding:16px 0;opacity:.72;
  transition:opacity .4s var(--ease-out),transform .4s var(--ease-out);
}
.logos__item:hover{opacity:1;transform:translateY(-2px)}
.logos img{height:34px;width:auto;object-fit:contain}

/* Split image + text */
.split{display:grid;grid-template-columns:1.05fr 1fr;align-items:center;gap:0}
.split__media{aspect-ratio:4/3;min-height:480px}
.split__body{padding:0 0 0 78px}
.split--flip .split__media{order:2}
.split--flip .split__body{padding:0 78px 0 0}

/* Full-bleed image band */
.band{position:relative;height:64svh;min-height:420px;overflow:hidden;background:#8E8878}
.band .bg{position:absolute;inset:0;background-size:cover;background-position:center;
          transform:scale(1.06);transition:transform 1.4s var(--ease-out);will-change:transform}
.band.is-in .bg{transform:scale(1)}
.band__vid{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .8s ease;pointer-events:none;
}
.band__vid.is-playing{opacity:1}
.band__cap{
  position:absolute;left:0;right:0;bottom:0;padding:44px 0;color:#fff;z-index:2;
  background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.62) 100%);
}
.band__cap p{margin:0;font-size:13px;letter-spacing:.2px;color:rgba(255,255,255,.86);max-width:44em}

/* Timeline */
.tl{border-top:1px solid var(--stone-line)}
.tl__row{
  display:grid;grid-template-columns:150px minmax(0,1fr);gap:40px;
  padding:34px 0;border-bottom:1px solid var(--stone-line);
  transition:padding-left .45s var(--ease-out);
}
.tl__row:hover{padding-left:12px}
.tl__yr{font-size:26px;font-weight:400;letter-spacing:-.045em;line-height:1}
.tl__body p{margin:0;max-width:44em}

/* Leadership */
.people{display:grid;grid-template-columns:repeat(3,1fr);gap:48px 40px}
.person__photo{aspect-ratio:3/4;background:#C4BDAC;margin-bottom:20px;position:relative;overflow:hidden}
.person__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scale(1.001);transition:transform 1.1s var(--ease-out)}
.person:hover .person__photo img{transform:scale(1.04)}
.person__photo span{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:34px;font-weight:300;letter-spacing:-.03em;color:rgba(0,0,0,.26);
}
.person__name{font-size:17px;font-weight:500;letter-spacing:-.025em;margin:0 0 4px}
.person__role{font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--grey);margin:0 0 14px}
.person__bio{font-size:13px;line-height:1.6;margin:0 0 14px;max-width:none}

/* Accordion */
.acc__item{border-bottom:1px solid var(--stone-line)}
.acc__btn{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:24px;
  background:transparent;border:0;padding:26px 0;text-align:left;cursor:pointer;
  font-size:17px;letter-spacing:-.03em;color:var(--black);
}
.acc__btn i{font-style:normal;font-size:20px;font-weight:300;transition:transform .45s var(--ease-out)}
.acc__btn[aria-expanded="true"] i{transform:rotate(45deg)}
.acc__panel{overflow:hidden;max-height:0;transition:max-height .55s var(--ease-out)}
.acc__panel > div{padding:0 0 30px}

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

.form{display:grid;gap:22px}
.form__row{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.field{display:flex;flex-direction:column;gap:9px}
.field label{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--grey);
             transition:color .3s var(--ease-out)}
.sec--dark .field label{color:#8C9098}
.field:focus-within label{color:var(--black)}
.sec--dark .field:focus-within label{color:var(--stone)}
.field input,.field select,.field textarea{
  font-family:inherit;font-size:14px;font-weight:300;color:var(--black);
  background:var(--white);border:1px solid var(--stone-line);
  padding:15px 16px;border-radius:0;width:100%;
  transition:border-color .3s var(--ease-out),box-shadow .3s var(--ease-out);
}
.sec--dark .field input,.sec--dark .field select,.sec--dark .field textarea{
  background:#0E0F11;border-color:var(--grey-line);color:var(--stone);
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:0;border-color:var(--black);box-shadow:inset 0 -2px 0 var(--black);
}
.sec--dark .field input:focus,.sec--dark .field select:focus,.sec--dark .field textarea:focus{
  border-color:var(--stone);box-shadow:inset 0 -2px 0 var(--stone);
}
.field textarea{min-height:118px;resize:vertical}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23656970' fill='none' stroke-width='1'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center}
.field .err{font-size:11px;color:#A3341F;display:none}
.field.is-invalid input,.field.is-invalid select,.field.is-invalid textarea{border-color:#A3341F}
.field.is-invalid .err{display:block;animation:nudge .4s var(--ease-out)}
@keyframes nudge{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}

.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.form__note{font-size:12px;line-height:1.6;color:var(--grey);max-width:44em}
.sec--dark .form__note{color:#8C9098}

.form__ok{display:none;border:1px solid var(--stone-line);padding:36px}
.form__ok.is-on{display:block;animation:okIn .7s var(--ease-out)}
@keyframes okIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.sec--dark .form__ok{border-color:var(--grey-line)}

.riskbox{border:1px solid var(--black);padding:34px 36px;max-width:none}
.sec--dark .riskbox{border-color:var(--grey-line)}
.riskbox p{font-size:13px;line-height:1.62;max-width:none}

/* Document library */
.docs{border-top:1px solid var(--stone-line)}
.doc{
  display:flex;align-items:center;justify-content:space-between;gap:32px;
  padding:25px 0;border-bottom:1px solid var(--stone-line);
  transition:padding-left .45s var(--ease-out);
}
.doc:hover{padding-left:10px}
.doc__t{font-size:16px;letter-spacing:-.025em;margin:0}
.doc__m{font-size:12px;color:var(--grey);margin:6px 0 0}
.doc__s{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--grey);white-space:nowrap}

/* --------------------------------------------------------------------------
   News
   -------------------------------------------------------------------------- */

.filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:54px}
.filter{
  height:38px;padding:0 20px;border:1px solid var(--stone-line);background:transparent;
  font-size:12px;letter-spacing:.2px;cursor:pointer;color:var(--grey);
  transition:border-color .35s var(--ease-out),color .35s var(--ease-out),
             background .35s var(--ease-out);
}
.filter:hover{border-color:var(--black);color:var(--black)}
.filter[aria-pressed="true"]{background:var(--black);border-color:var(--black);color:var(--stone)}

.news{display:grid;grid-template-columns:repeat(3,1fr);gap:58px 40px}
.news article{transition:opacity .5s var(--ease-out)}
.news article.is-hidden{display:none}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.ftr{background:var(--black);color:var(--stone);padding:94px 0 42px}
.ftr__top{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:48px;padding-bottom:66px}
.ftr h4{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:#8C9098;font-weight:500;margin:0 0 20px}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.ftr a{font-size:13px;font-weight:300;color:#BDB8AC;
       transition:color .3s var(--ease-out),padding-left .35s var(--ease-out)}
.ftr a:hover{color:var(--stone);padding-left:5px}
.ftr__logo img{height:26px;width:auto;margin-bottom:24px}
.ftr__addr{font-size:12px;line-height:1.7;color:#8C9098;max-width:22em}
.ftr__bot{
  border-top:1px solid var(--grey-line);padding-top:30px;
  display:flex;flex-wrap:wrap;gap:16px 40px;justify-content:space-between;align-items:center;
}
.ftr__bot p{font-size:11px;color:#8C9098;margin:0}

/* --------------------------------------------------------------------------
   Build flags — REMOVE BEFORE LAUNCH
   Add class "flags-off" to <body> to hide them all.
   -------------------------------------------------------------------------- */

.flag{
  display:inline-block;background:#FFE24A;color:#000;border:1px solid #C9A800;
  font-size:11px;font-weight:500;line-height:1.45;letter-spacing:.2px;
  padding:3px 8px;margin:2px 0;font-family:'Inter',sans-serif;vertical-align:baseline;
}
.flag::before{content:'\2691  ';font-weight:600}
.flag--block{display:block;padding:14px 16px;margin:16px 0;max-width:52em}
.flags-off .flag{display:none}

/* --------------------------------------------------------------------------
   Scroll motion
   -------------------------------------------------------------------------- */

.rise{opacity:0;transform:translateY(26px);
      transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
.rise.is-in{opacity:1;transform:none}
.rise[data-d="1"]{transition-delay:.09s}
.rise[data-d="2"]{transition-delay:.18s}
.rise[data-d="3"]{transition-delay:.27s}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
  .rise,.st{opacity:1;transform:none}
  .hero__media{opacity:1;transform:none}
  .hero__vid{display:none}
  .band__vid{display:none}
  .frame::after{transform:scaleX(0)}
  .acc__panel{max-height:none}
  html{scroll-behavior:auto}
  .cue{display:none}
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width:1080px){
  :root{--gutter:32px}
  .cols--sidebar{grid-template-columns:1fr;gap:48px}
  .split{grid-template-columns:1fr}
  .split__body{padding:44px 0 0}
  .split--flip .split__media{order:0}
  .split--flip .split__body{padding:44px 0 0}
  .split__media{min-height:340px}
  .people{grid-template-columns:repeat(2,1fr)}
  .news{grid-template-columns:repeat(2,1fr)}
  .g4{grid-template-columns:repeat(2,1fr)}
  .ftr__top{grid-template-columns:repeat(2,1fr)}
  .nav{gap:22px}
  .nav a{font-size:12px}
}

@media (max-width:900px){
  .nav{display:none}
  .burger{display:block}
  .hdr--over .burger i{background:var(--white)}
  .sec{padding:82px 0}
  .sec--tight{padding:60px 0}
  .hero{min-height:88svh}
  .hero--short{min-height:60svh}
  .g2,.g3,.g4{grid-template-columns:1fr}
  .cols--2,.cols--3{grid-template-columns:1fr;gap:40px}
  .stats{grid-template-columns:repeat(2,1fr)}
  .tl__row{grid-template-columns:1fr;gap:12px;padding:26px 0}
  .form__row{grid-template-columns:1fr}
  .band{height:48svh}
}

@media (max-width:560px){
  :root{--gutter:22px;--hdr-h:70px}
  .hero__in .lede{font-size:16px}
  .stats{grid-template-columns:1fr}
  .people{grid-template-columns:1fr}
  .news{grid-template-columns:1fr}
  .ftr__top{grid-template-columns:1fr;gap:38px}
  .grid > *{padding:34px 26px}
  .stat{padding:32px 24px}
  .btn{width:100%}
  .btn-row{gap:10px}
  .cue{display:none}
}

/* ==========================================================================
   Additions — audience routing, sequences, comparison, media list, holding
   ========================================================================== */

/* Oversized lead hero, used on Home so the tagline carries the page */
.hero--lead .h-hero{
  font-size:clamp(46px,9.2vw,138px);
  line-height:.92;
  letter-spacing:-.055em;
  max-width:none;
}
.hero--lead .hero__in .lede{max-width:26em;margin-top:34px}
.hero--lead .eyebrow{margin-bottom:20px}

/* Audience router */
.route{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--stone-line);
       border-top:1px solid var(--stone-line);border-bottom:1px solid var(--stone-line)}
.route a{
  background:var(--stone);padding:44px 34px 40px;display:flex;flex-direction:column;
  min-height:270px;transition:background .45s var(--ease-out);
}
.sec--back .route a{background:var(--stone-back)}
.route a:hover{background:var(--stone-back)}
.sec--back .route a:hover{background:var(--stone)}
.sec--dark .route{background:var(--grey-line);border-color:var(--grey-line)}
.sec--dark .route a{background:var(--black)}
.sec--dark .route a:hover{background:#0C0D0F}
.route__who{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--grey);margin:0 0 16px}
.route__do{font-size:19px;font-weight:400;letter-spacing:-.03em;line-height:1.2;margin:0 0 12px;max-width:none}
.route__note{font-size:13px;color:var(--grey);margin:0;max-width:none}
.route__go{margin-top:auto;padding-top:24px;font-size:12px;font-weight:500;letter-spacing:.3px;
           display:inline-flex;align-items:center;gap:8px}
.route__go .ar{display:inline-block;transition:transform .45s var(--ease-out)}
.route a:hover .route__go .ar{transform:translateX(6px)}

/* Numbered sequence, image led */
.seq{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.seq__n{font-size:11px;letter-spacing:.5px;color:var(--grey);margin:0 0 14px;text-transform:uppercase}
.seq__t{font-size:20px;font-weight:400;letter-spacing:-.03em;margin:20px 0 10px}
.seq p{font-size:13px;color:var(--grey);margin:0;max-width:none}

/* Two column comparison */
.cmp{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--stone-line);
     border-top:1px solid var(--stone-line)}
.cmp__col{background:var(--stone-back);padding:0}
.sec--back .cmp__col{background:var(--stone)}
.cmp__hd{padding:34px 34px 26px;border-bottom:1px solid var(--stone-line)}
.cmp__hd h3{font-size:24px;font-weight:400;letter-spacing:-.04em;margin:0 0 8px}
.cmp__hd p{font-size:13px;color:var(--grey);margin:0;max-width:none}
.cmp__row{display:flex;justify-content:space-between;gap:20px;padding:17px 34px;
          border-bottom:1px solid var(--stone-line);font-size:13px}
.cmp__row:last-child{border-bottom:0}
.cmp__k{color:var(--grey);flex:none}
.cmp__v{text-align:right}

/* Numbered benefit tiles */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--stone-line);
       border-top:1px solid var(--stone-line);border-bottom:1px solid var(--stone-line)}
.tiles > div{background:var(--stone);padding:40px 32px}
.sec--back .tiles > div{background:var(--stone-back)}
.tiles__n{font-size:12px;letter-spacing:.5px;color:var(--grey);margin:0 0 22px}
.tiles h3{font-size:17px;font-weight:500;letter-spacing:-.025em;margin:0 0 10px}
.tiles p{font-size:13px;color:var(--grey);margin:0;max-width:none}

/* Media and appearances list */
.medialist{border-top:1px solid var(--stone-line)}
.medialist a,.medialist div.mi{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:baseline;
  padding:22px 0;border-bottom:1px solid var(--stone-line);
  transition:padding-left .45s var(--ease-out);
}
.medialist a:hover{padding-left:10px}
.mi__what{font-size:15px;letter-spacing:-.02em;margin:0;max-width:none}
.mi__what span{display:block;font-size:12px;color:var(--grey);margin-top:5px;letter-spacing:0}
.mi__where{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--grey);white-space:nowrap}
.sec--dark .medialist{border-color:var(--grey-line)}
.sec--dark .medialist a,.sec--dark .medialist div.mi{border-color:var(--grey-line)}

/* Holding state */
.holding{border:1px solid var(--stone-line);padding:56px 48px;max-width:720px}
.holding h2{margin-bottom:16px}

@media (max-width:1080px){
  .route{grid-template-columns:repeat(2,1fr)}
  .tiles{grid-template-columns:repeat(2,1fr)}
  .seq{grid-template-columns:1fr;gap:48px}
}
@media (max-width:900px){
  .cmp{grid-template-columns:1fr}
  .medialist a,.medialist div.mi{grid-template-columns:1fr;gap:6px;padding:20px 0}
}
@media (max-width:560px){
  .route{grid-template-columns:1fr}
  .tiles{grid-template-columns:1fr}
  .route a{min-height:0;padding:34px 26px}
  .holding{padding:38px 26px}
  .cmp__hd,.cmp__row{padding-left:24px;padding-right:24px}
}