/* =========================================================
   VAXTRONIC. Audio and video equipment
   Palette: #000000 / #FFFFFF / #7B7B7B / #1D8177
   ========================================================= */

:root{
  --black:#000000;
  --ink:#050505;
  --surface:#0C0C0C;
  --surface-2:#121212;
  --white:#FFFFFF;
  --gray:#7B7B7B;
  --muted:#A0A0A0;
  --teal:#1D8177;
  --teal-lit:#2FBBAB;
  --line:rgba(255,255,255,.12);
  --line-soft:rgba(255,255,255,.07);

  /* theme tokens: overridden per section by .theme-* below */
  --bg:var(--ink);
  --fg:var(--white);
  --fg-muted:var(--muted);
  --fg-soft:var(--gray);
  --rule:var(--line-soft);
  --rule-strong:var(--line);
  --accent:var(--teal-lit);
  --card-bg:var(--ink);

  --display:"Helvetica Neue",Helvetica,Arial,"Liberation Sans",sans-serif;
  --body:"Helvetica Neue",Helvetica,Arial,"Liberation Sans",sans-serif;
  --mono:"Helvetica Neue",Helvetica,Arial,"Liberation Sans",sans-serif;

  --shell:1280px;
  --pad:clamp(20px,5vw,64px);
  --header-h:76px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

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

html{scroll-behavior:smooth;scroll-padding-top:var(--header-h)}

body{
  margin:0;
  background:var(--ink);
  color:var(--white);
  /* each section paints its own surface via .theme-* */
  font-family:var(--body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

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

::selection{background:var(--teal);color:var(--white)}

:focus-visible{outline:2px solid var(--teal-lit);outline-offset:3px}

.shell{width:100%;max-width:var(--shell);margin:0 auto;padding-inline:var(--pad)}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--white);color:var(--black);padding:12px 18px;font-weight:600;
}
.skip-link:focus{left:12px;top:12px}

/* ---------- type ---------- */
.display{
  font-family:var(--display);
  font-weight:700;
  line-height:1.04;
  letter-spacing:-.025em;
  font-size:clamp(2rem,4.6vw,3.5rem);
  margin:0;
  text-wrap:balance;
}

.eyebrow{
  position:relative;
  font-family:var(--mono);
  font-weight:500;
  font-size:.72rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--accent);
  margin:0 0 18px;
  padding-top:20px;
}
/* keyline: the signature mark that opens every section */
.eyebrow::before{
  content:"";position:absolute;top:0;left:0;
  width:40px;height:2px;background:var(--accent);
}
.section-head--center .eyebrow::before{left:50%;transform:translateX(-50%)}

.lead{
  color:var(--fg-muted);
  font-size:1.05rem;
  max-width:56ch;
  margin:22px 0 0;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 26px;
  font-size:.86rem;font-weight:600;letter-spacing:.02em;
  border-radius:2px;
  border:1px solid transparent;
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease);
  white-space:nowrap;
}
.btn-solid{background:var(--fg);color:var(--bg)}
.btn-solid:hover{background:var(--accent);color:#FFFFFF}
.btn-line{border-color:var(--rule-strong);color:var(--fg)}
.btn-line:hover{border-color:var(--fg);background:color-mix(in srgb,var(--fg) 8%,transparent)}
.btn-ghost{border-color:var(--line);color:var(--white);padding:10px 20px;font-size:.8rem}
.btn-ghost:hover{border-color:var(--teal-lit);color:var(--teal-lit)}
.btn-block{width:100%}


/* =========================================================
   SECTION THEMES
   Three surfaces alternate down the page: black, dark grey,
   white. Components read the tokens, so no component needs
   to know which surface it sits on.
   ========================================================= */
.theme-black{
  --bg:#050505;
  --fg:#FFFFFF;
  --fg-muted:#A0A0A0;
  --fg-soft:#7B7B7B;
  --rule:rgba(255,255,255,.07);
  --rule-strong:rgba(255,255,255,.12);
  --accent:#2FBBAB;
  --card-bg:#0C0C0C;
}
.theme-dark{
  --bg:#191A1D;
  --fg:#FFFFFF;
  --fg-muted:#A6A6A6;
  --fg-soft:#8A8A8A;
  --rule:rgba(255,255,255,.09);
  --rule-strong:rgba(255,255,255,.16);
  --accent:#2FBBAB;
  --card-bg:#0A0A0B;
}
.theme-soft{
  --bg:#F2F2F3;
  --fg:#0A0A0A;
  --fg-muted:#565656;
  --fg-soft:#767676;
  --rule:rgba(0,0,0,.10);
  --rule-strong:rgba(0,0,0,.18);
  --accent:#1D8177;
  --card-bg:#FFFFFF;
}
.theme-light{
  --bg:#FFFFFF;
  --fg:#0A0A0A;
  --fg-muted:#565656;
  --fg-soft:#7B7B7B;
  --rule:rgba(0,0,0,.10);
  --rule-strong:rgba(0,0,0,.18);
  --accent:#1D8177;   /* darker teal: passes contrast on white */
  --card-bg:#F5F5F5;
}
.theme-light-soft{
  --bg:#F2F2F3;
  --fg:#0A0A0A;
  --fg-muted:#565656;
  --fg-soft:#767676;
  --rule:rgba(0,0,0,.10);
  --rule-strong:rgba(0,0,0,.18);
  --accent:#1D8177;
  --card-bg:#FFFFFF;
}
.theme-black,.theme-dark,.theme-light,.theme-soft{background:var(--bg);color:var(--fg)}

/* logo swap: each strip ships both tones, CSS shows the right one */
img.logo-tone-dark{display:none}
.theme-light img.logo-tone-light,
.theme-soft img.logo-tone-light{display:none}
.theme-light img.logo-tone-dark,
.theme-soft img.logo-tone-dark{display:block}

/* =========================================================
   HEADER
   ========================================================= */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:100;
  height:var(--header-h);
  display:flex;align-items:center;
  /* the hero image runs bright at the top, so the unstuck header needs a
     stronger scrim than a dark banner would call for */
  background:linear-gradient(to bottom,rgba(0,0,0,.92) 0%,rgba(0,0,0,.82) 45%,rgba(0,0,0,.5) 78%,rgba(0,0,0,0) 100%);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  transition:background .35s var(--ease),border-color .35s var(--ease),backdrop-filter .35s;
  border-bottom:1px solid transparent;
}
.site-header.is-stuck{
  background:#050505;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border-bottom-color:transparent;
  box-shadow:0 1px 0 rgba(47,187,171,.28);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px}

.brandmark img{height:19px;width:auto}

.nav{display:flex;align-items:center;gap:34px}
.nav-link{
  position:relative;
  font-size:.86rem;font-weight:500;color:rgba(255,255,255,.72);
  padding:6px 0;transition:color .25s var(--ease);
}
.nav-link::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:0;
  background:var(--teal-lit);transition:width .3s var(--ease);
}
.nav-link:hover{color:var(--white)}
.nav-link:hover::after{width:100%;background:rgba(47,187,171,.5)}
.nav-link.is-active{color:var(--teal-lit)}
.nav-link.is-active::after{width:100%;background:var(--teal-lit)}

.header-right{display:flex;align-items:center;gap:16px}

.menu-toggle{display:none;width:38px;height:38px;flex-direction:column;justify-content:center;gap:6px;align-items:flex-end}
.menu-toggle span{display:block;height:1.5px;background:var(--white);transition:transform .3s var(--ease),width .3s var(--ease),opacity .2s}
.menu-toggle span:nth-child(1){width:22px}
.menu-toggle span:nth-child(2){width:14px}
.menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(4px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] span:nth-child(2){width:22px;transform:translateY(-4px) rotate(-45deg)}

/* =========================================================
   HERO + SIGNATURE METER
   ========================================================= */
.hero{position:relative;height:100svh;min-height:620px;background:var(--black);overflow:hidden}

.hero-stage{position:absolute;inset:0;overflow:hidden}

.slide{
  position:absolute;inset:0;
  display:flex;align-items:center;
  /* A straight crossfade with a whisper of scale. Hiding with visibility
     made the browser defer the opacity transition by a couple hundred
     milliseconds, which read as lag, so inactive slides stay rendered at
     zero opacity and are simply taken out of the pointer and tab order. */
  opacity:0;
  transform:scale(1.025);
  pointer-events:none;
  z-index:1;
  /* 1.2s is the sweet spot for a banner crossfade: long enough that neither
     image ever snaps, short enough that the deck still feels alive. Opacity
     and scale share the exact duration and curve, otherwise one finishes
     first and the change reads as two separate events. */
  transition:opacity 1.2s cubic-bezier(.4,0,.2,1),
             transform 1.2s cubic-bezier(.4,0,.2,1);
}
.slide.is-active{
  opacity:1;
  transform:scale(1);
  pointer-events:auto;
  z-index:2;
}

.slide-media{position:absolute;inset:0;overflow:hidden}
.slide-media img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);transition:transform 7s linear;filter:saturate(1.06)}
.slide.is-active .slide-media img{transform:scale(1)}
.slide-media::after{
  content:"";position:absolute;inset:0;
  /* light enough for the image to read as colour, dark enough to hold the
     headline above 8:1 contrast on every one of the five banners */
  background:
    /* a consistent band behind the copy: the five banners range from a dark
       studio to a sunlit living room, so the scrim has to hold on all of them */
    linear-gradient(90deg,rgba(0,0,0,.84) 0%,rgba(0,0,0,.72) 24%,rgba(0,0,0,.3) 40%,rgba(0,0,0,.04) 54%,rgba(0,0,0,0) 66%),
    linear-gradient(to top,rgba(0,0,0,.2) 0%,rgba(0,0,0,0) 30%);
}

/* Four of the five banners are shot in low light; the Klipsch room is not.
   White copy sat at 3.4:1 over it, so that one slide gets a deeper scrim
   instead of darkening every banner to suit the brightest. */
.slide--bright .slide-media::after{
  background:
    linear-gradient(90deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.84) 26%,rgba(0,0,0,.5) 44%,rgba(0,0,0,.12) 60%,rgba(0,0,0,0) 74%),
    linear-gradient(to top,rgba(0,0,0,.3) 0%,rgba(0,0,0,0) 34%);
}

.slide-body{position:relative;z-index:2}
.slide-title{
  text-shadow:0 2px 30px rgba(0,0,0,.55);
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(2.6rem,7.2vw,6rem);
  line-height:.95;
  letter-spacing:-.04em;
  margin:0 0 24px;
}
.slide-text{max-width:44ch;color:rgba(255,255,255,.88);font-size:1.05rem;margin:0 0 34px;text-shadow:0 1px 18px rgba(0,0,0,.6)}
.slide-actions{display:flex;flex-wrap:wrap;gap:14px}

/* animated entrance of active slide content */
.slide.is-active .eyebrow,
.slide.is-active .slide-title,
.slide.is-active .slide-text,
.slide.is-active .slide-actions{animation:riseIn .8s var(--ease) both}
.slide.is-active .slide-title{animation-delay:.06s}
.slide.is-active .slide-text{animation-delay:.14s}
.slide.is-active .slide-actions{animation-delay:.22s}
@keyframes riseIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

/* =========================================================
   SECTIONS
   ========================================================= */
.section{padding:clamp(80px,11vw,150px) 0}
.section-head{max-width:64ch;margin-bottom:clamp(44px,6vw,72px)}
.section-head--center{margin-inline:auto;text-align:center;max-width:58ch}
.section-head--center .lead{margin-inline:auto}

/* logo strip */
.logo-strip{
  border-top:0;border-bottom:1px solid var(--rule);
  padding:34px 0 38px;
}
.strip-label{
  font-family:var(--mono);font-weight:500;font-size:.64rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--fg-soft);margin:0 0 26px;
}
.strip-logos{display:flex;align-items:center;justify-content:space-between;gap:clamp(20px,5vw,64px);flex-wrap:wrap}
.strip-logo{display:block}
.strip-logos img{
  height:19px;width:auto;opacity:.45;
  transition:opacity .4s var(--ease),transform .4s var(--ease);
}
.strip-logo:hover img{opacity:1;transform:translateY(-2px)}
.theme-light .strip-logos img,
.theme-soft .strip-logos img{opacity:.6}

/* categories */
.categories{border-top:1px solid var(--rule)}
.cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule)}
.cat{background:var(--bg);padding:26px 28px 30px;transition:background .35s var(--ease)}
.cat:hover{background:var(--card-bg)}
.cat h3{font-family:var(--display);font-size:1.08rem;font-weight:700;letter-spacing:-.015em;margin:0 0 12px}
.cat p{color:var(--fg-muted);font-size:.92rem;margin:0}

/* about */
.about-head{max-width:900px;margin-bottom:clamp(44px,6vw,72px)}
.about-grid{display:grid;grid-template-columns:1.35fr .85fr;gap:clamp(40px,7vw,96px);align-items:start}
.about-copy p{color:var(--fg-muted);margin:0 0 20px;font-size:1.02rem;max-width:60ch}
.ticks{list-style:none;padding:0;margin:34px 0 0;border-top:1px solid var(--rule)}
.ticks li{
  position:relative;padding:16px 0 16px 30px;border-bottom:1px solid var(--line-soft);
  color:rgba(255,255,255,.86);font-size:.95rem;
}
.ticks li::before{
  content:"";position:absolute;left:0;top:24px;width:12px;height:1px;background:var(--teal-lit);
}

/* brands */
.brands{border-top:1px solid var(--rule)}
.brand-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2.2vw,28px)}
.brand-card{
  position:relative;background:var(--card-bg);border:1px solid var(--rule);
  display:flex;flex-direction:column;overflow:hidden;
  transition:border-color .35s var(--ease),transform .45s var(--ease);
}
.brand-card:hover{border-color:var(--accent);transform:translateY(-4px)}
.brand-card--wide{grid-column:1 / -1;flex-direction:row}
.brand-card--wide .brand-media{flex:1 1 58%;aspect-ratio:auto}
.brand-card--wide .brand-info{flex:1 1 42%;justify-content:center;padding:clamp(28px,4vw,56px)}

.brand-media{position:relative;aspect-ratio:16/8;overflow:hidden;background:var(--black)}
.brand-media img{width:100%;height:100%;object-fit:cover;filter:grayscale(.35) contrast(1.05);transition:transform .8s var(--ease),filter .6s var(--ease)}
.brand-card:hover .brand-media img{transform:scale(1.05);filter:grayscale(0) contrast(1)}
.brand-media::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(5,5,5,.9),rgba(5,5,5,0) 60%)}

.brand-info{padding:30px 30px 34px;display:flex;flex-direction:column;gap:16px}
.brand-logo{display:block;height:22px}
.brand-logo img{height:100%;width:auto;object-fit:contain;object-position:left center;opacity:.95}
.brand-card--wide .brand-logo{height:28px}
.brand-info p{color:var(--fg-muted);margin:0;font-size:.95rem;max-width:48ch}
.tags{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:6px 0 0}
.tags li{
  font-family:var(--mono);font-weight:500;font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--fg-soft);border:1px solid var(--rule-strong);padding:6px 10px;
}

/* contact */
.contact-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(40px,7vw,90px);align-items:start}
.info-block{padding:20px 0;border-bottom:1px solid var(--rule)}
.info-block:first-child{border-top:1px solid var(--rule)}
.info-label{
  display:block;font-family:var(--mono);font-size:.66rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:var(--fg-soft);margin-bottom:8px;
}
.info-block a{font-size:1.02rem;transition:color .25s var(--ease)}
.footer-plain{color:#A0A0A0;font-size:.9rem}
.info-block a:hover{color:var(--accent)}
.info-block p{margin:0;color:var(--fg-muted);font-size:.95rem}

/* pages that open without the hero */
.page-first{padding-top:calc(var(--header-h) + clamp(56px,8vw,110px))}
.page-first.theme-light{border-top:0}


/* about: facts column replaces the old stat counters */
.about-copy .about-intro{font-size:1.18rem;color:var(--fg);max-width:56ch}
.about-facts{display:flex;flex-direction:column;border-top:1px solid var(--rule)}
.fact{padding:20px 0;border-bottom:1px solid var(--rule)}
.fact-label{
  display:block;font-family:var(--mono);font-size:.66rem;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:8px;
}
.fact p{margin:0;color:var(--fg);font-size:.98rem}

/* trade shows */
.events{border-top:1px solid var(--rule)}
.event-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2.4vw,30px)}
.event-card{
  display:flex;flex-direction:column;background:var(--card-bg);
  border:1px solid var(--rule);overflow:hidden;
  transition:border-color .35s var(--ease),transform .45s var(--ease);
}
.event-card:hover{border-color:var(--accent);transform:translateY(-4px)}
.event-media{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--black)}
.event-media img{width:100%;height:100%;object-fit:cover;filter:grayscale(.12) contrast(1.02) saturate(1.05);transition:transform .8s var(--ease),filter .6s var(--ease)}
.event-card:hover .event-media img{transform:scale(1.05);filter:grayscale(0) contrast(1)}
.event-media::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(5,5,5,.34),rgba(5,5,5,0) 50%)}
.event-info{padding:26px 26px 30px;display:flex;flex-direction:column;gap:10px}
.event-tag{
  font-family:var(--mono);font-size:.64rem;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent);
}
.event-info h3{font-family:var(--display);font-size:1.22rem;font-weight:700;letter-spacing:-.02em;margin:0}
.event-info p{margin:0;color:var(--fg-muted);font-size:.93rem}

/* contact panel (no form) */
.contact-panel{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(36px,6vw,80px);align-items:start}
.contact-primary{
  display:block;border:1px solid var(--rule-strong);
  border-left:3px solid var(--accent);
  padding:clamp(28px,4vw,44px);
  transition:border-color .3s var(--ease),background .3s var(--ease);
}
.contact-primary:hover{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent)}
.contact-big{
  display:block;margin-top:12px;font-family:var(--display);font-weight:700;
  font-size:clamp(1.5rem,3.3vw,2.4rem);letter-spacing:-.03em;line-height:1.1;word-break:break-word;
}
.contact-rest{display:flex;flex-direction:column;border-top:1px solid var(--rule)}

.site-footer .info-label{color:#2FBBAB}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{background:#050505;color:var(--white);border-top:1px solid rgba(255,255,255,.07);padding:70px 0 34px}
.footer-top{display:grid;grid-template-columns:1fr 1.3fr;gap:50px;padding-bottom:50px}
.footer-brand img{height:18px;margin-bottom:18px}
.footer-brand p{color:#8A8A8A;font-size:.9rem;margin:0;max-width:34ch}
.footer-nav{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.footer-nav div{display:flex;flex-direction:column;gap:10px}
.footer-nav a{color:#A0A0A0;font-size:.9rem;transition:color .25s var(--ease)}
.footer-nav a:hover{color:var(--white)}
.footer-bottom{
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.07);padding-top:26px;
}
.footer-bottom p{margin:0;color:#7B7B7B;font-size:.78rem}


/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1080px){
  .about-grid{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .contact-panel{grid-template-columns:1fr}
  .cat-grid{grid-template-columns:repeat(2,1fr)}
  .brand-card--wide{flex-direction:column}
  .brand-card--wide .brand-media{flex:none;width:100%;aspect-ratio:16/8}
  .brand-card--wide .brand-info{padding:30px}
}

@media (max-width:820px){
  .slide{align-items:flex-end}
  .slide-media::after{
    background:linear-gradient(to top,rgba(0,0,0,.86) 26%,rgba(0,0,0,.52) 58%,rgba(0,0,0,.14) 100%);
  }
  .slide-body{padding-bottom:8px}
  .slide-title{margin-bottom:18px}
  .slide-text{margin-bottom:26px}
  .eyebrow{font-size:.66rem;letter-spacing:.16em}
  .strip-logos{justify-content:flex-start;gap:26px 34px}
  .strip-logos img{height:14px}

  :root{--header-h:64px}
  .header-cta{display:none}
  .menu-toggle{display:flex}
  .nav{
    position:fixed;inset:var(--header-h) 0 auto 0;
    flex-direction:column;align-items:flex-start;gap:0;
    background:rgba(5,5,5,.97);backdrop-filter:blur(18px);
    padding:8px var(--pad) 24px;
    border-bottom:1px solid var(--line-soft);
    transform:translateY(-12px);opacity:0;pointer-events:none;
    transition:opacity .3s var(--ease),transform .3s var(--ease);
  }
  .nav.is-open{opacity:1;transform:none;pointer-events:auto}
  .nav-link{width:100%;padding:16px 0;border-bottom:1px solid var(--line-soft);font-size:1rem}
  .nav-link::after{display:none}
  .nav-link.is-active{color:var(--teal-lit)}

  .hero{height:auto;min-height:0}
  .hero-stage{position:relative;height:88svh;min-height:540px}
  .slide-text{font-size:.98rem}

  .event-grid{grid-template-columns:1fr}
  .brand-grid{grid-template-columns:1fr}
  .footer-top{grid-template-columns:1fr;gap:36px}
  .footer-nav{grid-template-columns:1fr 1fr}
}

@media (max-width:520px){
  .cat-grid{grid-template-columns:1fr}
  .slide-actions .btn{flex:1 1 100%}
  .footer-nav{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  .reveal{opacity:1;transform:none}
  .slide-media img{transform:none}
}

/* =========================================================
   MOTION LAYER
   Page transitions, scroll choreography, and the details
   that make the site feel built rather than assembled.
   ========================================================= */

/* ---- scroll progress: a hairline that fills as you read ---- */
.progress{
  position:fixed;top:0;left:0;height:2px;width:100%;z-index:120;
  transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--teal),var(--teal-lit));
  will-change:transform;
}

/* ---- page transition veil ---- */
.veil{
  position:fixed;inset:0;z-index:300;background:#050505;
  pointer-events:none;opacity:0;
}
.veil.is-in{opacity:1;transition:opacity .34s var(--ease)}
.veil.is-out{opacity:0;transition:opacity .5s var(--ease) .04s}

/* ---- grain: breaks up the flat black, reads as film ---- */
body::after{
  content:"";position:fixed;inset:0;z-index:110;pointer-events:none;
  opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* =========================================================
   HERO
   ========================================================= */
.hero{perspective:1200px}

/* headline arrives line by line from behind a mask */
.line-mask{display:block;overflow:hidden}
.line-mask > span{
  display:block;
  transform:translateY(110%) rotate(2deg);
  opacity:0;
}
.slide.is-active .line-mask > span{
  animation:lineUp 1.05s cubic-bezier(.16,1,.3,1) forwards;
}
.slide.is-active .line-mask:nth-child(2) > span{animation-delay:.09s}
@keyframes lineUp{to{transform:none;opacity:1}}

/* the image drifts as you scroll away from it */
.slide-media{will-change:transform}

/* scroll cue */
.scroll-cue{
  position:absolute;left:50%;bottom:30px;z-index:4;
  transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:10px;
  font-family:var(--mono);font-size:.6rem;font-weight:500;
  letter-spacing:.26em;text-transform:uppercase;color:rgba(255,255,255,.5);
}
.scroll-cue span{display:block;width:1px;height:44px;background:linear-gradient(to bottom,rgba(255,255,255,.5),transparent);position:relative;overflow:hidden}
.scroll-cue span::after{
  content:"";position:absolute;inset:0;background:var(--teal-lit);
  animation:cueRun 2.1s var(--ease) infinite;
}
@keyframes cueRun{
  0%{transform:translateY(-100%)}
  60%,100%{transform:translateY(100%)}
}


/* hero over a colourful key visual: teal muddies against magenta, so the
   label goes white and the brand mark stays as the keyline */
.hero .eyebrow{color:rgba(255,255,255,.9)}
.hero .eyebrow::before{background:var(--teal-lit)}
.slide-text{color:rgba(255,255,255,.88)}
.slide-title{text-shadow:0 2px 40px rgba(0,0,0,.35)}




/* =========================================================
   REACH MAP
   Real country outlines (simplified), with routes drawing
   themselves outward from the Miami hub on a loop.
   ========================================================= */
.reach-map{
  position:relative;
  max-width:520px;margin:0 auto;
  padding-top:8px;
}
.reach-map svg{width:100%;height:auto;display:block;overflow:visible}

.vx-land path{
  fill:rgba(47,187,171,.07);
  stroke:rgba(47,187,171,.32);
  stroke-width:1.1;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}

.vx-route{
  stroke:var(--teal-lit);
  stroke-width:1.5;
  stroke-linecap:round;
  vector-effect:non-scaling-stroke;
  stroke-dasharray:100;
  stroke-dashoffset:100;
  /* one shared cycle: every route draws in turn, all hold, then all clear */
  animation:vxDraw var(--c,14s) linear var(--d,0s) infinite;
}
@keyframes vxDraw{
  0%   {stroke-dashoffset:100;opacity:0}
  2%   {stroke-dashoffset:100;opacity:.8}
  20%  {stroke-dashoffset:0;  opacity:.8}
  78%  {stroke-dashoffset:0;  opacity:.5}
  92%  {stroke-dashoffset:0;  opacity:0}
  100% {stroke-dashoffset:0;  opacity:0}
}

/* each destination lights up only once its line has arrived */
.vx-cities circle{
  fill:var(--teal-lit);opacity:0;
  animation:vxLand var(--c,14s) ease-out var(--d,0s) infinite;
}
@keyframes vxLand{
  0%  {opacity:0;r:2.6}
  2%  {opacity:1;r:5}
  8%  {opacity:.85;r:2.6}
  82% {opacity:.85}
  94% {opacity:0}
  100%{opacity:0}
}

.vx-pulse{fill:#EAFFFB}
.vx-halo{fill:var(--teal-lit);opacity:.30}

.vx-hub{fill:var(--teal-lit)}
.vx-ring{
  fill:none;stroke:var(--teal-lit);stroke-width:1.2;
  transform-box:fill-box;transform-origin:center;
  animation:vxRing 3s ease-out infinite;
}
.vx-ring--2{animation-delay:1.5s}
@keyframes vxRing{
  0%  {transform:scale(.35);opacity:.9}
  80% {transform:scale(2.4);opacity:0}
  100%{transform:scale(2.4);opacity:0}
}

.reach-caption{
  display:flex;align-items:center;justify-content:center;gap:9px;
  margin:22px 0 0;
  font-family:var(--mono);font-size:.66rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--fg-soft);
}
.reach-dot{
  width:7px;height:7px;border-radius:50%;background:var(--teal-lit);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--teal-lit) 22%,transparent);
}

@media (max-width:820px){
  .reach-map{max-width:none}
  .vx-route{stroke-width:1.2}
}

@media (prefers-reduced-motion:reduce){
  /* Reduced motion means gentler, not invisible. A 26s draw with the dots
     hidden was technically animated and visibly dead, so the travelling
     dots stay: they are small, local, and carry the whole idea. Only the
     expanding rings go, since a growing shape is the real trigger. */
  .vx-route{animation-duration:17s !important;animation-timing-function:ease-in-out !important}
  .vx-cities circle{animation-duration:17s !important}
  .vx-ring{display:none}
}

/* =========================================================
   STATEMENT BAND
   A full-bleed image with a single claim over it. Sits between
   two quieter sections, so it works as a break in the rhythm.
   ========================================================= */
.statement{
  position:relative;
  display:flex;align-items:center;
  min-height:clamp(380px,56vh,560px);
  padding:clamp(60px,8vw,110px) 0;
  overflow:hidden;
  background:#050505;
}
.statement-media{position:absolute;inset:0}
.statement-media img{width:100%;height:100%;object-fit:cover}
.statement-media::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(0,0,0,.78) 0%,rgba(0,0,0,.52) 38%,rgba(0,0,0,.12) 68%,rgba(0,0,0,0) 88%),
    linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0) 60%);
}
.statement-body{position:relative;z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:22px}
.statement .display{
  max-width:14ch;
  font-size:clamp(2.3rem,5.4vw,4.2rem);
  text-shadow:0 2px 30px rgba(0,0,0,.5);
}
.statement .lead{max-width:44ch;margin:0;color:rgba(255,255,255,.82)}

@media (max-width:820px){
  .statement{min-height:clamp(340px,50vh,460px)}
  .statement-media::after{
    background:linear-gradient(to top,rgba(0,0,0,.9) 18%,rgba(0,0,0,.6) 60%,rgba(0,0,0,.35) 100%);
  }
  .statement .display{max-width:none}
  .statement .btn{width:100%;justify-content:center}
}

/* =========================================================
   PAGE HERO
   An image band that opens an interior page. Shorter than the
   home hero: it introduces, it doesn't perform.
   ========================================================= */
.page-hero{
  position:relative;
  display:flex;align-items:flex-end;
  min-height:clamp(380px,58vh,620px);
  padding:calc(var(--header-h) + 40px) 0 clamp(44px,6vw,76px);
  overflow:hidden;
  background:#050505;
}
.page-hero-media{position:absolute;inset:0}
.page-hero-media img{width:100%;height:100%;object-fit:cover}
.page-hero-media::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,.62) 32%,rgba(0,0,0,.18) 58%,rgba(0,0,0,.05) 78%),
    linear-gradient(to top,rgba(0,0,0,.72) 0%,rgba(0,0,0,.1) 55%,rgba(0,0,0,.35) 100%);
}
.page-hero-body{position:relative;z-index:2}
.page-hero .display{
  max-width:18ch;
  font-size:clamp(2.1rem,4.6vw,3.6rem);
  text-shadow:0 2px 30px rgba(0,0,0,.5);
}
.page-hero .eyebrow{color:var(--teal-lit)}
/* the page hero is above the fold, so its heading animates on load rather
   than waiting for the scroll observer that drives .mask-in elsewhere */
.page-hero .mask-in > span{
  transform:translateY(105%);opacity:1;
  animation:lineUp 1s cubic-bezier(.16,1,.3,1) .12s forwards;
}
.page-hero .eyebrow{animation:riseIn .8s var(--ease) both}

/* top-aligned variant: for photographs whose lower half is the subject */
.page-hero--top{align-items:flex-start;min-height:clamp(340px,48vh,520px);padding-bottom:clamp(60px,9vw,120px)}
.page-hero--top .page-hero-media::after{
  background:
    linear-gradient(90deg,rgba(0,0,0,.8) 0%,rgba(0,0,0,.58) 34%,rgba(0,0,0,.14) 60%,rgba(0,0,0,0) 82%),
    linear-gradient(to bottom,rgba(0,0,0,.62) 0%,rgba(0,0,0,.14) 48%,rgba(0,0,0,.3) 100%);
}

/* the section below no longer opens the page, so it drops the extra top gap */
.page-hero + .section{padding-top:clamp(56px,7vw,96px)}

@media (max-width:820px){
  .page-hero{min-height:clamp(320px,52vh,460px);padding-top:calc(var(--header-h) + 28px)}
  .page-hero-media::after{
    background:linear-gradient(to top,rgba(0,0,0,.85) 0%,rgba(0,0,0,.35) 60%,rgba(0,0,0,.45) 100%);
  }
  .page-hero .display{max-width:none}
}



/* ---- hero arrows ---- */
.hero-nav{
  position:absolute;top:50%;z-index:5;
  width:52px;height:52px;
  display:grid;place-items:center;
  transform:translateY(-50%);
  border:1px solid rgba(255,255,255,.28);
  background:rgba(5,5,5,.32);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  color:#fff;cursor:pointer;
  opacity:0;
  transition:opacity .3s var(--ease),background .3s var(--ease),
             border-color .3s var(--ease),transform .3s var(--ease);
}
.hero-nav--prev{left:clamp(12px,2.2vw,28px)}
.hero-nav--next{right:clamp(12px,2.2vw,28px)}
.hero-nav svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hero:hover .hero-nav,
.hero-nav:focus-visible{opacity:1}
.hero-nav:hover{
  background:rgba(29,129,119,.72);
  border-color:var(--teal-lit);
}
.hero-nav--prev:hover{transform:translateY(-50%) translateX(-3px)}
.hero-nav--next:hover{transform:translateY(-50%) translateX(3px)}
.hero-nav:active{transform:translateY(-50%) scale(.94)}

@media (hover:none){
  /* no hover on touch, so the arrows stay visible but quieter */
  .hero-nav{opacity:.85;width:44px;height:44px;background:rgba(5,5,5,.42)}
  .hero-nav svg{width:17px;height:17px}
}

/* =========================================================
   REVEALS: masked, staggered, directional
   ========================================================= */
.reveal{
  opacity:0;transform:translateY(30px);
  transition:opacity .9s var(--ease),transform .9s var(--ease);
}
.reveal.is-in{opacity:1;transform:none}
.reveal[data-delay="1"]{transition-delay:.08s}
.reveal[data-delay="2"]{transition-delay:.16s}
.reveal[data-delay="3"]{transition-delay:.24s}

/* headings wipe in behind a mask */
.mask-in{display:block;overflow:hidden}
.mask-in > span{
  display:block;transform:translateY(105%);
  transition:transform 1s cubic-bezier(.16,1,.3,1);
}
.is-in .mask-in > span,
.mask-in.is-in > span{transform:none}

/* images scale down into place, never up */
.img-reveal{overflow:hidden}
.img-reveal img{transform:scale(1.14);transition:transform 1.4s cubic-bezier(.16,1,.3,1)}
.is-in .img-reveal img{transform:scale(1)}

/* =========================================================
   BRANDS: cards stack and pin as you scroll past them
   ========================================================= */
.brand-stack{display:flex;flex-direction:column;gap:clamp(20px,3vw,40px);padding-bottom:12vh}
.brand-row{
  position:sticky;
  display:grid;grid-template-columns:1.05fr .95fr;
  background:var(--card-bg);
  border:1px solid var(--rule);
  overflow:hidden;
  box-shadow:0 -20px 60px rgba(0,0,0,.5);
}
.brand-row{top:calc(var(--header-h) + 28px);transform-origin:50% 0;will-change:transform,filter}
.brand-row:nth-child(2){top:calc(var(--header-h) + 44px)}
.brand-row:nth-child(3){top:calc(var(--header-h) + 60px)}
.brand-row:nth-child(4){top:calc(var(--header-h) + 76px)}
.brand-row:nth-child(5){top:calc(var(--header-h) + 92px)}
.brand-row:nth-child(even){direction:rtl}
.brand-row:nth-child(even) > *{direction:ltr}

.brand-visual{position:relative;overflow:hidden;min-height:clamp(280px,38vh,400px);background:#000}
.brand-visual img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(.15) contrast(1.02) saturate(1.05);
  transition:transform 1.1s var(--ease),filter .7s var(--ease);
}
.brand-row:hover .brand-visual img{transform:scale(1.06);filter:grayscale(0) contrast(1)}
.brand-visual::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(5,5,5,0) 62%,rgba(5,5,5,.38));
}
.brand-row:nth-child(even) .brand-visual::after{background:linear-gradient(270deg,rgba(5,5,5,0) 62%,rgba(5,5,5,.38))}

.brand-body{
  position:relative;
  display:flex;flex-direction:column;justify-content:center;gap:18px;
  padding:clamp(30px,4.4vw,62px);
}
.brand-body::before{
  content:"";position:absolute;left:0;top:clamp(30px,4.4vw,62px);bottom:clamp(30px,4.4vw,62px);
  width:2px;background:linear-gradient(to bottom,var(--accent),transparent);
}
.brand-row:nth-child(even) .brand-body::before{left:auto;right:0}
.brand-row .brand-logo{height:26px}
.brand-row .brand-logo img{height:100%;width:auto;object-fit:contain;object-position:left center}
.brand-row p{margin:0;color:var(--fg-muted);font-size:1rem;max-width:46ch}

/* =========================================================
   MICRO INTERACTIONS
   ========================================================= */
/* buttons fill from the left on hover */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--teal);
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform .45s cubic-bezier(.16,1,.3,1);
}
.btn:hover::before{transform:scaleX(1)}
.btn-solid:hover{background:var(--fg);color:#FFFFFF}
.btn-line:hover{color:#FFFFFF;border-color:var(--teal)}

/* nav underline grows from the left, retracts to the right */
.nav-link::after{transition:width .38s cubic-bezier(.16,1,.3,1)}

/* cards lift with a teal edge */
.event-card,.cat{position:relative}
.event-card::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--accent);transform:scaleX(0);transform-origin:0 50%;
  transition:transform .5s cubic-bezier(.16,1,.3,1);
}
.event-card:hover::after{transform:scaleX(1)}
.cat::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:1px;
  background:var(--accent);transform:scaleY(0);transform-origin:50% 0;
  transition:transform .5s cubic-bezier(.16,1,.3,1);
}
.cat:hover::before{transform:scaleY(1)}

/* the email block gets a sweep */
.contact-primary{position:relative;overflow:hidden}
.contact-primary::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(120deg,transparent 30%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 70%);
  transform:translateX(-110%);
}
.contact-primary:hover::before{transform:translateX(110%);transition:transform 1s var(--ease)}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:900px){
  .brand-row{grid-template-columns:1fr;position:static;box-shadow:none}
  .brand-row:nth-child(even){direction:ltr}
  .brand-visual{min-height:0;aspect-ratio:16/9}
  .brand-visual img{position:relative}
  .brand-visual::after,
  .brand-row:nth-child(even) .brand-visual::after{background:linear-gradient(to top,rgba(5,5,5,.6),transparent 60%)}
  .scroll-cue{display:none}
}

@media (prefers-reduced-motion:reduce){
  .progress,.veil,body::after{display:none}
  .line-mask > span,.mask-in > span{transform:none;opacity:1;animation:none}
  .img-reveal img{transform:none}
  .scroll-cue span::after{animation:none}
  .brand-row{position:static}
}