:root{
  --bg:        #07070b;
  --bg-2:      #0e0e14;
  --surf:      #15151d;
  --line:      #26263a;
  --line-soft: #1c1c28;
  --mid:       #7a7a93;
  --ink:       #b8b8d0;
  --plat:      #f4f4f8;

  --blue:    #2F5BFF;
  --violet:  #8B3CE8;
  --fuchsia: #E83CB0;
  --pink-2:  #FF4DA6;

  --grad: linear-gradient(115deg, var(--blue) 0%, var(--violet) 45%, var(--fuchsia) 90%);
  --grad-soft: linear-gradient(115deg, rgba(47,91,255,.18), rgba(139,60,232,.16), rgba(232,60,176,.18));

  --warn:   #E8B43C;
  --danger: #E83C3C;

  --nav-h: 55px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
html,body{
  background:var(--bg);
  color:var(--plat);
  margin:0;
  font-family:'Chakra Petch',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body{overflow-x:hidden;}
img{display:block; max-width:100%;}

/* ============ TYPOGRAPHY ============ */
.mono{font-family:'JetBrains Mono',ui-monospace,monospace; letter-spacing:0.02em;}
.tracked{letter-spacing:0.22em; text-transform:uppercase;}
.eyebrow{
  font-family:'JetBrains Mono',monospace;
  font-size:12px;
  letter-spacing:0.28em;
  text-transform:uppercase;
  color:var(--pink-2);
}
.lead{
  font-size:20px;
  line-height:1.5;
  color:var(--ink);
  max-width:62ch;
  font-weight:400;
}
.small{
  font-size:13px;
  line-height:1.55;
  color:var(--mid);
  font-family:'JetBrains Mono',monospace;
  letter-spacing:0.04em;
}
h1,h2,h3{margin:0;}
.title{
  font-family:'Saira',sans-serif;
  font-weight:700;
  font-size:clamp(36px, 5vw, 64px);
  line-height:0.98;
  letter-spacing:-0.005em;
}
.display{
  font-family:'Saira',sans-serif;
  font-weight:800;
  font-size:clamp(56px, 11vw, 156px);
  line-height:0.9;
  letter-spacing:-0.015em;
}

.grad-fill{
  background: var(--grad);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* Hero title shine: a soft highlight band glides across each grad-fill word
   in cascade (Unique → Technique → Travel). The band parks off-screen for
   most of the cycle so the snap back to start is invisible, and the
   cubic-bezier easing keeps the sweep smooth from end to end. */
.hero__title--shine .grad-fill{
  background-image:
    linear-gradient(110deg,
      transparent 0%,
      transparent 38%,
      rgba(255,255,255,0.92) 47%,
      rgba(255,255,255,1) 50%,
      rgba(255,255,255,0.92) 53%,
      transparent 62%,
      transparent 100%),
    var(--grad);
  background-size: 240% 100%, 100% 100%;
  background-position: 240% 50%, 0% 50%;
  background-repeat: no-repeat;
  background-attachment: scroll;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  animation: hero-shine 6.5s cubic-bezier(.4, 0, .2, 1) 1s infinite;
  animation-fill-mode: both;
}

/* Cascade: each grad-fill word starts its sweep a little later than the
   previous one so the three lines don't shimmer at the same instant. */
.hero__title--shine .grad-fill:nth-of-type(2){ animation-delay: 1.35s; }
.hero__title--shine .grad-fill:nth-of-type(3){ animation-delay: 1.7s; }

@keyframes hero-shine {
  /* Sweep occupies first ~40% of the cycle, then parks off-screen left for
     the remaining 60%. The 0%/100% positions are off-screen on the right
     so the implicit restart from 100% → 0% is never visible. */
  0%       { background-position: 240% 50%, 0% 50%; }
  40%      { background-position: -140% 50%, 0% 50%; }
  100%     { background-position: -140% 50%, 0% 50%; }
}

@media (prefers-reduced-motion: reduce){
  .hero__title--shine .grad-fill,
  .hero__title--shine .grad-fill:nth-of-type(2),
  .hero__title--shine .grad-fill:nth-of-type(3){
    animation: none;
    background-image: var(--grad);
    background-size: 100% 100%;
    background-position: 0 0;
  }
}
.grad-bar{ background: var(--grad); }
.blue{color:var(--blue);} .violet{color:var(--violet);} .fuchsia{color:var(--fuchsia);}
.mid{color:var(--mid);} .ink{color:var(--ink);}
.hair{height:1px; background:var(--line); border:0;}

/* ============ GRADIENT FRAME ============ */
.gframe{
  position:relative;
  padding:6px;
  background: var(--grad);
  border-radius:14px;
}
.gframe > .inner{
  position:relative;
  border-radius:9px;
  background:var(--bg);
  overflow:hidden;
}

/* ============ NAV ============ */
.nav{
  position:fixed; top:0; left:0; right:0;
  z-index:100;
  height:var(--nav-h);
  padding:0 32px;
  display:flex; align-items:center; justify-content:space-between;
  background:rgba(7,7,11,0.72);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.nav__left{display:flex; align-items:center; gap:28px;}
.nav__logo{height:22px; width:auto;}
.nav__links{
  display:flex; gap:22px; align-items:center;
  font-family:'JetBrains Mono',monospace;
  font-size:11px; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--ink);
}
.nav__links a{
  color:var(--ink);
  text-decoration:none;
  padding:6px 2px;
  border-bottom:1px solid transparent;
  transition:color .2s, border-color .2s;
}
.nav__links a:hover{color:var(--plat); border-bottom-color:var(--pink-2);}
.nav__links a.is-active{color:var(--plat); border-bottom-color:var(--pink-2);}
.nav__cta{
  display:flex; gap:14px; align-items:center;
  font-family:'JetBrains Mono',monospace;
  font-size:11px; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--ink);
}
.nav__cta .ig{color:var(--ink); text-decoration:none;}
.nav__cta .contact-pill{
  padding:7px 14px;
  border:1px solid var(--pink-2);
  color:var(--pink-2);
  border-radius:99px;
  text-decoration:none;
  transition:background .2s, color .2s;
}
.nav__cta .contact-pill:hover{background:var(--pink-2); color:var(--bg);}
.nav__burger{display:none;}

/* Language toggle */
.lang-toggle{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 12px;
  background:transparent;
  border:1px solid var(--line);
  border-radius:99px;
  color:var(--ink);
  font-family:'JetBrains Mono',monospace;
  font-size:11px; letter-spacing:0.18em; text-transform:uppercase;
  cursor:pointer;
  transition:border-color .2s, color .2s;
}
.lang-toggle:hover{border-color:var(--pink-2); color:var(--plat);}
.lang-toggle__opt{
  color:var(--mid);
  padding:0 2px;
  transition:color .2s;
}
.lang-toggle__opt.is-active{color:var(--plat);}
.lang-toggle__sep{color:var(--line);}

/* ============ SHARED CHROME OVERLAY (technical frame on each section) ============ */
.chrome{
  position:absolute; inset:0; pointer-events:none;
  padding:32px 40px;
  display:grid; grid-template-columns:1fr 1fr; grid-template-rows:auto 1fr auto;
  color:var(--mid);
  font-family:'JetBrains Mono',monospace;
  font-size:11px; letter-spacing:0.18em; text-transform:uppercase;
  z-index:3;
}
.chrome .tl{justify-self:start; align-self:start; display:flex; gap:14px; align-items:center;}
.chrome .tr{justify-self:end;   align-self:start;}
.chrome .bl{justify-self:start; align-self:end; grid-column:1; grid-row:3;}
.chrome .br{justify-self:end;   align-self:end; grid-column:2; grid-row:3;}
.chrome .corner{position:absolute; width:12px; height:12px; border:1px solid var(--line);}
.chrome .c1{top:20px;  left:20px;  border-right:0; border-bottom:0;}
.chrome .c2{top:20px;  right:20px; border-left:0;  border-bottom:0;}
.chrome .c3{bottom:20px;left:20px; border-right:0; border-top:0;}
.chrome .c4{bottom:20px;right:20px;border-left:0;  border-top:0;}
.chrome .dot{
  width:7px; height:7px; border-radius:50%;
  background: var(--fuchsia);
  box-shadow:0 0 14px var(--fuchsia);
  animation: pulse 1.8s ease-in-out infinite;
}

/* ============ SECTIONS ============ */
section{
  position:relative;
  padding:120px 56px 120px;
  overflow:hidden;
}
section + section{border-top:1px solid var(--line-soft);}

.container{
  max-width:1320px;
  margin:0 auto;
  position:relative;
  z-index:2;
}
.section-head{margin-bottom:48px;}
.section-head h2{margin-top:14px;}

/* ============ BACKGROUND DECOR ============ */
.grid-bg{
  position:absolute; inset:0;
  background-image:
    linear-gradient(to right,  rgba(60,60,90,0.18) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(60,60,90,0.18) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image:radial-gradient(ellipse at center, #000 30%, transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse at center, #000 30%, transparent 80%);
  pointer-events:none;
}
.noise{
  position:absolute; inset:0; pointer-events:none; opacity:0.55; mix-blend-mode:screen;
  background-image:
    radial-gradient(ellipse at 18% 20%, rgba(47,91,255,0.28), transparent 55%),
    radial-gradient(ellipse at 82% 80%, rgba(232,60,176,0.22), transparent 55%),
    radial-gradient(ellipse at 55% 50%, rgba(139,60,232,0.18), transparent 60%);
}

/* ============ HERO ============ */
.hero{
  min-height:100vh;
  padding-top:var(--nav-h);
  padding-bottom:40px;
  display:flex;
  align-items:flex-start;
}
/* Lifestyle photo as hero backdrop: regatta context behind the BLACKPATT
   wordmark and the manifesto headline. The image stays visible (~65%
   brightness) so the boat + fleet read clearly; the overlay only dims the
   bottom and the centre where the headline sits, so the type still pops.
   Slow Ken Burns zoom gives the scene cinematic breath without distracting
   from the type — like the camera drifting over the fleet. */
.hero__photo{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:center 60%;
  z-index:0;
  filter:saturate(1.0) brightness(0.68) contrast(1.04);
}
.hero__photo-overlay{
  position:absolute; inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(58% 50% at 50% 42%, rgba(7,7,11,0.45) 0%, rgba(7,7,11,0) 75%),
    linear-gradient(180deg, rgba(7,7,11,0.30) 0%, rgba(7,7,11,0.05) 30%, rgba(7,7,11,0.75) 100%),
    linear-gradient(90deg, rgba(47,91,255,0.14) 0%, rgba(7,7,11,0) 50%, rgba(232,60,176,0.14) 100%);
}
.hero__inner{
  position:relative;
  margin:0 auto;
  z-index:2;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0;
  max-width:1100px;
  padding:0 24px;
  width:100%;
}
/* Bigger lockup, headline compressed up to overlap a touch — the lockup
   anchors the eye and the title kicks in immediately without gap. */
.hero__inner .hero__lockup{
  width:min(560px, 78vw);
  margin-top:-55px;
  margin-bottom:-30px;
  filter:drop-shadow(0 20px 80px rgba(232,60,176,.22));
}
.hero__inner .hero__title{ margin-top:-34px; }
.hero__inner .hero__lead{ margin-top:30px; }
.hero__inner .hero__tags{ margin-top:22px; }

/* Hero subtitle — punchy two-line tagline replacing the previous paragraph */
.hero__lead{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  margin:0;
  text-align:center;
}
.hero__lead-line{
  font-family:'JetBrains Mono',monospace;
  font-size:12.5px; letter-spacing:0.32em; text-transform:uppercase;
  color:var(--plat);
}
.hero__lead-tag{
  font-family:'Chakra Petch',sans-serif;
  font-size:14px; letter-spacing:0.04em;
  color:var(--ink);
}
@media (max-width: 720px){
  .hero__lead-line{ font-size:10.5px; letter-spacing:0.22em; }
}

/* Hide the grid pattern inside the hero so the photo carries the visual */
.hero .grid-bg{ display:none; }
.hero__flow{
  position:absolute; inset:0;
  z-index:1;
  opacity:.95;
  pointer-events:none;
}
/* Flow lines stay static — motion handled by the photo Ken Burns above. */
.hero__lockup{
  width:min(380px, 60vw);
  filter:drop-shadow(0 20px 80px rgba(232,60,176,.22));
}
.hero__title{
  font-family:'Saira',sans-serif;
  font-weight:800;
  font-size:clamp(48px, 9vw, 132px);
  line-height:0.94;
  letter-spacing:-0.015em;
}
.hero__sub{
  font-family:'JetBrains Mono',monospace;
  font-size:13px;
  letter-spacing:0.24em;
  text-transform:uppercase;
  color:var(--ink);
}
.hero__tags{display:flex; gap:14px; flex-wrap:wrap; justify-content:center;}

/* ============ TAGS / PILLS ============ */
.tag{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px;
  border:1px solid var(--line);
  font-family:'JetBrains Mono',monospace;
  font-size:11px; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--ink);
  border-radius:99px;
  background:rgba(14,14,20,.6);
  transition:border-color .2s, color .2s;
}
.tag:hover{border-color:var(--pink-2); color:var(--plat);}
.tag .pulse{width:7px;height:7px;border-radius:50%; background:var(--fuchsia); box-shadow:0 0 10px var(--fuchsia); animation: pulse 1.8s ease-in-out infinite;}
.tag.grad{
  background:var(--grad);
  color:#fff;
  border:0;
  padding:9px 16px;
}
.tag.grad:hover{filter:brightness(1.08);}
.tag--lab{
  border-color:var(--blue);
  color:var(--plat);
  background:rgba(47,91,255,0.08);
  box-shadow:0 0 0 1px rgba(47,91,255,0.25), 0 0 24px rgba(47,91,255,0.18);
}
.tag--lab:hover{
  border-color:var(--blue);
  color:#fff;
  background:rgba(47,91,255,0.18);
  box-shadow:0 0 0 1px var(--blue), 0 0 32px rgba(47,91,255,0.45);
}
.tag--lab .pulse{background:var(--blue); box-shadow:0 0 10px var(--blue);}

/* Lab pill in nav (blue, distinct from contact-pill) */
.nav__cta .lab-pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 14px;
  border:1px solid var(--blue);
  color:var(--blue);
  border-radius:99px;
  text-decoration:none;
  background:rgba(47,91,255,0.06);
  transition:background .2s, color .2s, box-shadow .2s;
}
.nav__cta .lab-pill:hover{
  background:var(--blue);
  color:#fff;
  box-shadow:0 0 18px rgba(47,91,255,0.55);
}
.lab-pill__dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--blue);
  box-shadow:0 0 8px var(--blue);
}
.nav__cta .lab-pill:hover .lab-pill__dot{background:#fff; box-shadow:0 0 10px #fff;}

/* Lab CTA card inside BE UNIQUE / Apparel */
.lab-cta{
  position:relative;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:28px;
  margin-top:48px;
  padding:28px 32px;
  border:1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(47,91,255,0.10), rgba(47,91,255,0.02)),
    #0c0c14;
  text-decoration:none;
  color:inherit;
  overflow:hidden;
  transition:border-color .25s, transform .25s, box-shadow .25s;
}
.lab-cta::before{
  content:"";
  position:absolute; inset:-1px;
  background:var(--grad);
  opacity:0;
  z-index:-1;
  transition:opacity .25s;
}
.lab-cta:hover{
  border-color:var(--blue);
  transform:translateY(-2px);
  box-shadow:0 18px 60px rgba(47,91,255,0.25);
}
.lab-cta__bar{
  width:4px; align-self:stretch;
  background:var(--grad);
  border-radius:4px;
}
.lab-cta__eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:'JetBrains Mono',monospace;
  font-size:11px; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--blue);
}
.lab-cta__dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--blue);
  box-shadow:0 0 14px var(--blue);
  animation: pulse 1.8s ease-in-out infinite;
}
.lab-cta__title{
  font-family:'Saira',sans-serif;
  font-weight:800;
  font-size:clamp(22px, 2.4vw, 32px);
  line-height:1.1;
  letter-spacing:-0.01em;
  margin:10px 0 6px;
  color:var(--plat);
}
.lab-cta__body-text{
  font-family:'Chakra Petch',sans-serif;
  color:var(--ink);
  font-size:15px;
  line-height:1.55;
  max-width:62ch;
}
.lab-cta__btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 22px;
  background:var(--grad);
  color:#fff;
  border-radius:99px;
  font-family:'JetBrains Mono',monospace;
  font-size:12px; letter-spacing:0.2em; text-transform:uppercase;
  white-space:nowrap;
  transition:filter .2s, transform .2s;
}
.lab-cta:hover .lab-cta__btn{filter:brightness(1.1); transform:translateX(2px);}

/* ============ CARDS ============ */
.card{
  position:relative;
  padding:28px;
  border:1px solid var(--line);
  background:var(--bg-2);
  border-radius:8px;
  display:flex; flex-direction:column;
  gap:14px;
  overflow:hidden;
  transition:border-color .3s, transform .3s, background .3s;
}
.card:hover{border-color:var(--pink-2); transform:translateY(-2px);}
.card__bar{position:absolute; left:0; top:0; bottom:0; width:4px;}
.card__bar.blue{background:var(--blue);}
.card__bar.violet{background:var(--violet);}
.card__bar.fuchsia{background:var(--fuchsia);}
.card__title{
  font-family:'Saira',sans-serif;
  font-weight:700;
  font-size:28px;
  line-height:1.1;
  letter-spacing:-0.005em;
}

/* corner ticks (matching brand book) */
.ticks{position:relative;}
.ticks::before, .ticks::after,
.ticks > .t1, .ticks > .t2{
  content:""; position:absolute; width:9px; height:9px; border:1px solid var(--pink-2); pointer-events:none;
}
.ticks::before{top:-1px; left:-1px;  border-right:0; border-bottom:0;}
.ticks::after {top:-1px; right:-1px; border-left:0;  border-bottom:0;}
.ticks > .t1{bottom:-1px; left:-1px;  border-right:0; border-top:0;}
.ticks > .t2{bottom:-1px; right:-1px; border-left:0;  border-top:0;}

/* ============ MANIFESTO ============ */
.manifesto{padding-top:80px; padding-bottom:60px;}
.manifesto + .pillar-section{padding-top:60px;}
/* Legacy 2-col layout kept for any old usage */
.manifesto__grid{
  display:grid;
  grid-template-columns:1.05fr 1fr;
  gap:80px;
  align-items:center;
}
.manifesto__copy h2{font-size:clamp(40px, 6vw, 92px); line-height:1.02; font-weight:800;}

/* New layout: centered intro on top, 3 cards in a row below */
.manifesto__container{
  display:flex; flex-direction:column;
  gap:56px;
  align-items:center;
}
.manifesto__intro{
  max-width:1100px;
  text-align:center;
}
.manifesto__title{
  font-family:'Saira',sans-serif; font-weight:800;
  font-size:clamp(36px, 4.6vw, 68px);
  line-height:1.05;
  letter-spacing:-0.02em;
  margin:18px 0 0;
  color:var(--plat);
  white-space:nowrap;
}
@media (max-width: 720px){
  .manifesto__title{ white-space:normal; font-size:clamp(30px, 8vw, 44px); }
}
.manifesto__body{
  font-family:'Chakra Petch',sans-serif;
  color:var(--ink);
  font-size:16px;
  line-height:1.65;
  max-width:62ch;
  margin:24px auto 0;
}
.manifesto__doc{
  margin-top:22px;
  font-family:'JetBrains Mono',monospace;
  font-size:10.5px; letter-spacing:0.28em; text-transform:uppercase;
  color:var(--mid);
}

.manifesto__pillars{display:flex; flex-direction:column; gap:18px;}
.manifesto__pillars--row{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:20px;
  width:100%;
}

/* New pillar cards — clickable gateways with giant outlined numeral */
.pillar-card{
  position:relative;
  display:flex; flex-direction:column;
  gap:18px;
  padding:32px 28px 24px;
  border:1px solid var(--line);
  border-radius:14px;
  background:linear-gradient(180deg, rgba(21,21,29,0.92) 0%, rgba(10,10,16,0.92) 100%);
  text-decoration:none;
  color:inherit;
  overflow:hidden;
  isolation:isolate;
  transition:transform .35s cubic-bezier(.2,.7,.2,1),
             border-color .3s, box-shadow .35s;
}
.pillar-card::before{
  content:""; position:absolute; inset:0; z-index:-1;
  pointer-events:none;
  background:radial-gradient(60% 80% at 100% 0%, var(--pillar-glow, rgba(47,91,255,0.18)), transparent 70%);
  opacity:0.6;
  transition:opacity .35s;
}
.pillar-card::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--pillar-color, var(--blue));
  opacity:0.6;
  box-shadow:0 0 14px var(--pillar-color, var(--blue));
  transition:opacity .35s, height .35s;
}
.pillar-card:hover{
  transform:translateY(-6px);
  border-color:var(--pillar-color);
  box-shadow:
    0 0 0 1px var(--pillar-color),
    0 30px 60px -20px var(--pillar-glow, rgba(47,91,255,0.45));
}
.pillar-card:hover::before{ opacity:1; }
.pillar-card:hover::after { opacity:1; height:3px; }

.pillar-card--blue   { --pillar-color: var(--blue);    --pillar-glow: rgba(47,91,255,0.45); }
.pillar-card--violet { --pillar-color: var(--violet);  --pillar-glow: rgba(139,60,232,0.45); }
.pillar-card--fuchsia{ --pillar-color: var(--fuchsia); --pillar-glow: rgba(232,60,176,0.45); }

.pillar-card__numeral{
  position:absolute;
  top:-30px; right:-12px;
  font-family:'Saira',sans-serif; font-weight:800;
  font-size:clamp(140px, 16vw, 200px);
  line-height:1;
  letter-spacing:-0.04em;
  color:transparent;
  -webkit-text-stroke:1.5px rgba(255,255,255,0.07);
          text-stroke:1.5px rgba(255,255,255,0.07);
  pointer-events:none;
  z-index:0;
}
.pillar-card:hover .pillar-card__numeral{
  -webkit-text-stroke-color:rgba(255,255,255,0.14);
          text-stroke-color:rgba(255,255,255,0.14);
}

.pillar-card__body{
  position:relative; z-index:1;
  display:flex; flex-direction:column; gap:12px;
  flex:1;
}
.pillar-card__eyebrow{
  font-family:'JetBrains Mono',monospace;
  font-size:11px; letter-spacing:0.26em; text-transform:uppercase;
  color:var(--pillar-color);
}
.pillar-card__title{
  font-family:'Saira',sans-serif; font-weight:800;
  font-size:clamp(20px, 1.6vw, 24px);
  letter-spacing:-0.01em; line-height:1.15;
  color:var(--plat);
  margin:0;
}
.pillar-card__copy{
  font-family:'Chakra Petch',sans-serif;
  font-size:14px; line-height:1.6;
  color:var(--ink);
  margin:0;
}

.pillar-card__foot{
  position:relative; z-index:1;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,0.06);
}
.pillar-card__stat{
  font-family:'JetBrains Mono',monospace;
  font-size:10.5px; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--mid);
}
.pillar-card__cta{
  font-family:'JetBrains Mono',monospace;
  font-size:11px; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--plat);
  transition:color .25s, transform .25s, letter-spacing .25s;
}
.pillar-card:hover .pillar-card__cta{
  color:var(--pillar-color);
  transform:translateX(2px);
  letter-spacing:0.26em;
}

@media (max-width: 1080px){
  .manifesto__pillars--row{ grid-template-columns:1fr; }
  .pillar-card__numeral{ font-size:130px; }
}

/* ============ STRATEGY ============ */
.strategy__grid{
  display:grid;
  grid-template-columns: 1.1fr 1fr 1fr;
  gap:24px;
}
.spec{font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:0.04em; color:var(--ink);}
.spec .k{color:var(--mid); text-transform:uppercase; letter-spacing:0.16em; font-size:10px;}
.kv-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px 24px;
  margin-top:14px;
}
.kv-grid .label{color:var(--mid); font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:0.16em; text-transform:uppercase;}
.kv-grid .value{font-size:17px; color:var(--plat);}

.bullet-list{
  list-style:none; padding:0; margin:14px 0 0;
  line-height:2;
  color:var(--ink);
  font-family:'JetBrains Mono',monospace;
  font-size:13px;
}
.bullet-list li::before{content:"→  "; color:var(--mid);}

/* ============ PILLARS (Apparel / Experiences / Travel) ============ */
.pillar-section{padding:60px 56px;}
.pillar-section .section-head{display:flex; flex-direction:column; gap:14px;}
.pillar-section .section-head .num{
  font-family:'JetBrains Mono',monospace;
  font-size:13px;
  letter-spacing:0.32em;
  text-transform:uppercase;
}
.pillar-section .section-head h2{margin-top:6px;}
.pillar-section .lead{margin-top:18px;}

/* Apparel — 4 tier grid */
.apparel__tiers{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:18px;
  margin-top:56px;
}
.tier{
  position:relative;
  padding:24px;
  border:1px solid var(--line);
  background:var(--bg-2);
  display:flex; flex-direction:column;
  gap:14px;
  min-height:380px;
  overflow:hidden;
  transition:transform .3s, border-color .3s;
}
.tier:hover{transform:translateY(-3px); border-color:var(--pink-2);}
.tier__head{display:flex; justify-content:space-between; align-items:baseline;}
.tier__id{font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.22em; text-transform:uppercase; color:var(--pink-2);}
.tier__rank{font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--mid); letter-spacing:0.14em; text-transform:uppercase;}
.tier__title{font-family:'Saira',sans-serif; font-weight:800; font-size:24px; line-height:1; letter-spacing:-0.005em;}
.tier__visual{flex:1; position:relative; display:flex; align-items:center; justify-content:center;}
.tier__visual svg{width:78%; height:auto;}
.tier__items{font-family:'JetBrains Mono',monospace; font-size:12px; line-height:1.85; color:var(--ink);}
.tier--elite{background:var(--grad); border:0;}
.tier--elite .tier__id,
.tier--elite .tier__rank{color:rgba(255,255,255,.85);}
.tier--elite .tier__title{color:#fff;}
.tier--elite .tier__items{color:rgba(255,255,255,.95);}
.tier__logo{
  position:absolute;
  width:34%;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  opacity:.95;
  pointer-events:none;
}

/* Experiences — 3 cards */
.experiences__grid{
  display:grid;
  grid-template-columns: 1fr 1fr 0.9fr;
  gap:24px;
  margin-top:56px;
}
.exp-card{
  position:relative;
  padding:28px;
  border:1px solid var(--line);
  background:var(--bg-2);
  display:flex; flex-direction:column;
  gap:14px;
  min-height:480px;
  transition:transform .3s, border-color .3s;
}
.exp-card:hover{transform:translateY(-3px); border-color:var(--pink-2);}
.exp-card__head{display:flex; justify-content:space-between; align-items:baseline;}
.exp-card__id{font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.22em; text-transform:uppercase;}
.exp-card__rank{font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--mid); letter-spacing:0.14em; text-transform:uppercase;}
.exp-card__title{font-family:'Saira',sans-serif; font-weight:800; font-size:32px; line-height:1.04; letter-spacing:-0.01em;}
.exp-card__ph{
  flex:1;
  min-height:140px;
  position:relative;
  background: repeating-linear-gradient(135deg, #14141d 0 14px, #0d0d15 14px 28px);
  border:1px solid var(--line);
  overflow:hidden;
}
.exp-card__ph::after{content:""; position:absolute; inset:8px; border:1px dashed #2a2a3a;}
.exp-card__ph .label{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  color:var(--mid);
  font-family:'JetBrains Mono',monospace;
  font-size:11px; letter-spacing:0.2em; text-transform:uppercase;
  line-height:1.7;
}
.exp-card__ph img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  z-index:1;
  filter:saturate(1.05);
}
.exp-card__ph:has(img)::after{
  inset:8px; border-color:rgba(255,255,255,0.08); z-index:3;
}
.exp-card__ph:has(img) .label{
  inset:auto auto 10px 14px;
  align-items:flex-start; justify-content:flex-start;
  padding:6px 10px;
  background:rgba(7,7,11,0.78); backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,0.06);
  color:var(--plat);
  font-size:10px; letter-spacing:0.22em;
  z-index:4;
}
.exp-card__copy{color:var(--ink); font-size:14px; line-height:1.6;}
.exp-card__tags{display:flex; gap:8px; flex-wrap:wrap;}
.exp-card__tags .tag{font-size:10px; padding:5px 10px; letter-spacing:0.18em;}
.exp-card.is-tech{background:linear-gradient(160deg, rgba(139,60,232,0.18), rgba(232,60,176,0.08) 60%, var(--bg-2) 100%);}
.exp-card.is-tech .exp-card__id{color:var(--fuchsia);}
.exp-card.is-base .exp-card__id{color:var(--violet);}
.exp-card.is-pathway{background:#000;}
.pathway-list{
  display:grid;
  grid-template-columns:90px 1fr;
  gap:10px 14px;
  font-family:'JetBrains Mono',monospace;
  font-size:13px;
}
.pathway-list .k{color:var(--mid); text-transform:uppercase; letter-spacing:0.16em; font-size:10px;}
.pathway-list .v{color:var(--plat);}

/* Visually hidden but accessible to screen readers */
.visually-hidden{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0);
  white-space:nowrap; border:0;
}

/* ============ CHAPTER OPENER (start of each pillar section) ============ */
.chapter-opener{
  position:relative;
  margin:0 auto 40px;
  text-align:center;
  max-width:900px;
}
.chapter-opener__eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:'JetBrains Mono',monospace;
  font-size:11px; letter-spacing:0.32em; text-transform:uppercase;
  color:var(--blue);
}
.chapter-opener__dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--blue);
  box-shadow:0 0 12px var(--blue);
  animation: pulse 1.8s ease-in-out infinite;
}
.chapter-opener__wordmark{
  height:22px;
  width:auto;
  display:inline-block;
  opacity:0.92;
}
/* Text fallback wordmark — outlined uppercase that imitates the BE UNIQUE
   PNG so sections without a logo asset still feel like brand chapter heads. */
.chapter-opener__wordmark--text{
  font-family:'Saira',sans-serif;
  font-weight:800;
  font-size:13px;
  letter-spacing:0.42em;
  text-transform:uppercase;
  color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,0.85);
          text-stroke:1px rgba(255,255,255,0.85);
  padding-right:0.42em; /* compensate the trailing letter-spacing */
}

/* Color variants per chapter — eyebrow dot + stroke tint */
.chapter-opener--violet .chapter-opener__eyebrow{ color:var(--violet); }
.chapter-opener--violet .chapter-opener__dot{
  background:var(--violet); box-shadow:0 0 12px var(--violet);
}
.chapter-opener--fuchsia .chapter-opener__eyebrow{ color:var(--fuchsia); }
.chapter-opener--fuchsia .chapter-opener__dot{
  background:var(--fuchsia); box-shadow:0 0 12px var(--fuchsia);
}
.chapter-opener--editorial .chapter-opener__eyebrow{ color:var(--plat); }
.chapter-opener--editorial .chapter-opener__dot{
  background:#fff; box-shadow:0 0 12px rgba(255,255,255,0.6);
}
.chapter-opener__heading{
  font-family:'Saira',sans-serif; font-weight:800;
  font-size:clamp(54px, 8vw, 120px);
  line-height:0.95; letter-spacing:-0.03em;
  margin:14px 0 0;
  color:var(--plat);
}
.chapter-opener__lead{
  font-family:'Chakra Petch',sans-serif;
  color:var(--ink);
  font-size:15px; line-height:1.55;
  max-width:52ch;
  margin:18px auto 0;
}

/* Category panel: asymmetric editorial layout (text + stage). */
.cat-panel{
  position:relative;
  display:grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap:48px;
  align-items:center;
  margin-top:84px;
  padding:48px 36px;
  border:1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(21,21,29,0.92) 0%, rgba(10,10,16,0.92) 100%);
  border-radius:18px;
  overflow:hidden;
  isolation:isolate;
}
.cat-panel--reverse{ grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.cat-panel--reverse .cat-panel__text{ order:2; }
.cat-panel--reverse .cat-panel__stage{ order:1; }

/* Background tint per category */
.cat-panel--elite::before,
.cat-panel--event::before,
.cat-panel--school::before{
  content:""; position:absolute; inset:0; z-index:-1;
  pointer-events:none;
}
.cat-panel--elite::before{
  background:
    radial-gradient(60% 60% at 0% 50%, rgba(47,91,255,0.20), transparent 70%),
    radial-gradient(50% 70% at 100% 100%, rgba(47,91,255,0.10), transparent 70%);
}
.cat-panel--event::before{
  background:
    radial-gradient(60% 60% at 100% 50%, rgba(139,60,232,0.22), transparent 70%),
    radial-gradient(50% 70% at 0% 100%, rgba(139,60,232,0.10), transparent 70%);
}
.cat-panel--school::before{
  background:
    radial-gradient(60% 60% at 0% 50%, rgba(232,60,176,0.20), transparent 70%),
    radial-gradient(50% 70% at 100% 100%, rgba(232,60,176,0.10), transparent 70%);
}

/* Giant background numeral, magazine-style. Sits BEHIND the text column so
   the text has room to breathe and the numeral isn't covered by the stage
   garments / glow. Default panels (01, 03) have text on the left, so the
   numeral lives on the left; reverse panels (02) flip it to the right. */
.cat-panel__numeral{
  position:absolute;
  top:-30px; left:-20px;
  font-family:'Saira',sans-serif; font-weight:800;
  font-size:clamp(180px, 24vw, 360px);
  line-height:1;
  color:transparent;
  -webkit-text-stroke:1.5px rgba(255,255,255,0.08);
          text-stroke:1.5px rgba(255,255,255,0.08);
  pointer-events:none;
  z-index:0;
  letter-spacing:-0.04em;
}
.cat-panel--reverse .cat-panel__numeral{ left:auto; right:-20px; }

.cat-panel__text{
  position:relative; z-index:2;
  padding:8px 0;
}
.cat-panel__eyebrow{
  font-family:'JetBrains Mono',monospace;
  font-size:11px; letter-spacing:0.28em; text-transform:uppercase;
  color:var(--blue);
  margin-bottom:14px;
}
.cat-panel--event .cat-panel__eyebrow{ color:var(--violet); }
.cat-panel--school .cat-panel__eyebrow{ color:var(--fuchsia); }
.cat-panel__title{
  font-family:'Saira',sans-serif; font-weight:800;
  font-size:clamp(36px, 4.6vw, 64px);
  letter-spacing:-0.02em; line-height:1.02;
  margin:0 0 18px;
  color:var(--plat);
}
.cat-panel__body{
  font-family:'Chakra Petch',sans-serif;
  color:var(--ink);
  font-size:15px; line-height:1.65;
  max-width:48ch;
  margin:0 0 24px;
}
.cat-panel__list{
  list-style:none; padding:0; margin:0 0 28px;
  display:flex; flex-direction:column; gap:10px;
}
.cat-panel__list li{
  display:flex; align-items:center; gap:12px;
  font-family:'JetBrains Mono',monospace;
  font-size:12.5px; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--plat);
}
.cat-panel__tick{
  color:var(--blue);
  font-weight:600;
}
.cat-panel--event .cat-panel__tick{ color:var(--violet); }
.cat-panel--school .cat-panel__tick{ color:var(--fuchsia); }
.cat-panel__tag{
  display:flex; flex-direction:column; gap:4px;
  padding:14px 16px;
  border-left:2px solid var(--blue);
  background:rgba(47,91,255,0.06);
}
.cat-panel--event .cat-panel__tag{ border-left-color:var(--violet); background:rgba(139,60,232,0.06); }
.cat-panel--school .cat-panel__tag{ border-left-color:var(--fuchsia); background:rgba(232,60,176,0.06); }
.cat-panel__tag-label{
  font-family:'JetBrains Mono',monospace;
  font-size:10px; letter-spacing:0.28em; text-transform:uppercase;
  color:var(--mid);
}
.cat-panel__tag-value{
  font-family:'Chakra Petch',sans-serif;
  font-size:14px; color:var(--plat);
}

/* Stage: technical frame with grid + glow where prendas float */
.cat-panel__stage{
  position:relative; z-index:1;
  aspect-ratio:5/4;
  min-height:360px;
  display:flex; align-items:center; justify-content:center;
  perspective:1200px;
}
.stage-frame{
  position:absolute; inset:0;
  pointer-events:none;
}
.stage-corner{
  position:absolute;
  width:18px; height:18px;
  border:1px solid rgba(255,255,255,0.18);
}
.stage-corner--tl{ top:0; left:0; border-right:0; border-bottom:0; }
.stage-corner--tr{ top:0; right:0; border-left:0;  border-bottom:0; }
.stage-corner--bl{ bottom:0; left:0; border-right:0; border-top:0; }
.stage-corner--br{ bottom:0; right:0; border-left:0;  border-top:0; }
.stage-grid{
  position:absolute; inset:18px;
  background-image:
    linear-gradient(rgba(60,60,90,0.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(60,60,90,0.16) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 35%, transparent 80%);
          mask-image: radial-gradient(ellipse at center, #000 35%, transparent 80%);
  pointer-events:none;
}
.stage-glow{
  position:absolute; inset:0;
  pointer-events:none;
  background:radial-gradient(50% 60% at 50% 50%, rgba(47,91,255,0.30) 0%, transparent 70%);
}
.cat-panel--event .stage-glow{ background:radial-gradient(50% 60% at 50% 50%, rgba(139,60,232,0.32) 0%, transparent 70%); }
.cat-panel--school .stage-glow{ background:radial-gradient(50% 60% at 50% 50%, rgba(232,60,176,0.32) 0%, transparent 70%); }

/* Lifestyle stage variant: a real-world photo lives behind the garments.
   The photo gets darkened/desaturated; the garments float on top untouched. */
.cat-panel__stage--lifestyle .stage-photo{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  z-index:0;
  filter:saturate(0.9) brightness(0.55) contrast(1.05);
}
.cat-panel__stage--lifestyle::before{
  content:"";
  position:absolute; inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(7,7,11,0.30) 0%, rgba(7,7,11,0.55) 100%),
    radial-gradient(60% 70% at 50% 50%, rgba(47,91,255,0.18) 0%, rgba(7,7,11,0) 70%);
}
.cat-panel__stage--lifestyle .stage-grid{ opacity:0.25; z-index:2; }
.cat-panel__stage--lifestyle .stage-glow{ display:none; }
.cat-panel__stage--lifestyle .stage-frame{ z-index:3; }
.cat-panel__stage--lifestyle .garment{ z-index:4; }

/* Garments: hero in center large, two sides smaller with slight rotation.
   Hover any → it straightens, lifts, scales; the other two retreat slightly. */
.garment{
  position:absolute;
  margin:0;
  display:flex; flex-direction:column; align-items:center;
  cursor:pointer;
  transition:transform .55s cubic-bezier(.2,.7,.2,1),
             filter .35s,
             z-index 0s;
}
.garment img{
  display:block;
  max-height:88%;
  width:auto; height:auto;
  user-select:none; -webkit-user-drag:none;
  /* Knock out the white background of the PNG mockups so they blend with
     the dark stage: blend mode "lighten" lets dark pixels show; we tint them
     with the brand colour halo via drop-shadow so the silhouette stays. */
  mix-blend-mode: lighten;
  filter: drop-shadow(0 18px 28px rgba(0,0,0,0.55));
  transition:filter .35s;
}
.cat-panel--elite .garment img{ filter: drop-shadow(0 18px 28px rgba(47,91,255,0.45)) drop-shadow(0 6px 10px rgba(0,0,0,0.6)); }
.cat-panel--event .garment img{ filter: drop-shadow(0 18px 28px rgba(139,60,232,0.45)) drop-shadow(0 6px 10px rgba(0,0,0,0.6)); }
.cat-panel--school .garment img{ filter: drop-shadow(0 18px 28px rgba(232,60,176,0.45)) drop-shadow(0 6px 10px rgba(0,0,0,0.6)); }
.garment__cap{
  margin-top:10px;
  font-family:'JetBrains Mono',monospace;
  font-size:10px; letter-spacing:0.26em; text-transform:uppercase;
  color:var(--ink);
  opacity:0; transition:opacity .35s, transform .35s;
  transform:translateY(4px);
}
.garment:hover .garment__cap{ opacity:1; transform:translateY(0); }

.garment--hero{
  left:50%; top:50%;
  width:46%;
  height:90%;
  justify-content:center;
  transform:translate(-50%, -50%);
  z-index:3;
}
.garment--hero img{ max-height:100%; }
.garment--side{
  width:34%; height:72%;
  justify-content:center;
  opacity:0.85;
  z-index:2;
}
.garment--left{
  left:4%; top:50%;
  transform:translate(0, -50%) rotate(-8deg);
}
.garment--right{
  right:4%; top:50%;
  transform:translate(0, -50%) rotate(8deg);
}

/* On hover any garment: straighten + lift; siblings dim slightly */
.cat-panel__stage:hover .garment{ opacity:0.55; }
.garment:hover{
  opacity:1 !important;
  z-index:5;
}
.garment--hero:hover{ transform:translate(-50%, -54%) scale(1.06); }
.garment--left:hover{ transform:translate(0, -54%) rotate(0deg) scale(1.06); }
.garment--right:hover{ transform:translate(0, -54%) rotate(0deg) scale(1.06); }

@media (max-width: 900px){
  .cat-panel,
  .cat-panel--reverse{
    grid-template-columns:1fr;
    padding:32px 24px;
    gap:24px;
  }
  .cat-panel--reverse .cat-panel__text{ order:2; }
  .cat-panel--reverse .cat-panel__stage{ order:1; }
  .cat-panel__stage{ aspect-ratio:5/4; min-height:280px; }
  .cat-panel__numeral{ font-size:180px; top:-20px; right:-12px; }
  .cat-panel--reverse .cat-panel__numeral{ left:-12px; right:auto; }
}

/* Legacy conveyor styles kept for reference (DOM disabled in HTML).
   Wrapped in a never-match block so they don't ship CSS bytes. */
.__legacy-conveyor-disabled{
  position:relative;
  margin-top:88px;
  padding:64px 0 24px;
  isolation:isolate;
}
.conveyor::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(60% 70% at 50% 0%, rgba(47,91,255,0.18) 0%, rgba(7,7,11,0) 60%),
    radial-gradient(45% 55% at 10% 100%, rgba(139,60,232,0.14) 0%, rgba(7,7,11,0) 60%),
    radial-gradient(45% 55% at 90% 100%, rgba(232,60,176,0.14) 0%, rgba(7,7,11,0) 60%);
  z-index:-1;
  pointer-events:none;
}
.conveyor::after{
  content:"";
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(60,60,90,0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(60,60,90,0.10) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
          mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
  z-index:-1;
  pointer-events:none;
  opacity:.4;
}

.conveyor__head{
  max-width:920px;
  padding:0 56px;
  margin:0 auto 40px;
  text-align:center;
}
.conveyor__eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:'JetBrains Mono',monospace;
  font-size:11px; letter-spacing:0.28em; text-transform:uppercase;
  color:var(--blue);
}
.conveyor__dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--blue);
  box-shadow:0 0 12px var(--blue);
  animation: pulse 1.8s ease-in-out infinite;
}
.conveyor__title{
  font-family:'Saira',sans-serif; font-weight:800;
  font-size:clamp(32px, 4.4vw, 56px);
  letter-spacing:-0.02em; line-height:1.04;
  margin:14px 0 12px;
  color:var(--plat);
}
.conveyor__body{
  font-family:'Chakra Petch',sans-serif;
  color:var(--ink);
  font-size:15px; line-height:1.6;
  max-width:58ch;
  margin:0 auto;
}

.conveyor__viewport{
  position:relative;
  width:100%;
  overflow:hidden;
  padding:24px 0 56px;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
}

.conveyor__track{
  display:flex;
  gap:22px;
  width:max-content;
  animation: conveyor-scroll 70s linear infinite;
  will-change: transform;
}
.conveyor:hover .conveyor__track{ animation-play-state: paused; }
@keyframes conveyor-scroll{
  from { transform: translate3d(0,0,0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* Glass-dark cards. The prendas float on the section's brand-coloured
   background; each card has a thin gradient border, subtle internal glow,
   and an accent rail at the bottom whose colour is set per category. */
.kit-card{
  flex:0 0 280px;
  height:380px;
  position:relative;
  margin:0;
  border-radius:14px;
  background:
    linear-gradient(180deg, rgba(21,21,29,0.85) 0%, rgba(12,12,20,0.92) 100%);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  overflow:hidden;
  display:flex; flex-direction:column;
  transition:transform .45s cubic-bezier(.2,.7,.2,1),
             box-shadow .45s cubic-bezier(.2,.7,.2,1);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.04),
    0 12px 30px -16px rgba(0,0,0,0.5);
}
/* Gradient border via mask trick */
.kit-card::before{
  content:"";
  position:absolute; inset:0;
  border-radius:14px;
  padding:1px;
  background: linear-gradient(160deg,
    rgba(47,91,255,0.5) 0%,
    rgba(139,60,232,0.3) 35%,
    rgba(232,60,176,0.4) 70%,
    rgba(47,91,255,0.2) 100%);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity:0.5;
  transition:opacity .35s;
  pointer-events:none;
}
/* Soft internal glow that intensifies on hover */
.kit-card__stage::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(50% 45% at 50% 35%, rgba(47,91,255,0.18) 0%, transparent 70%),
    radial-gradient(40% 40% at 85% 80%, rgba(232,60,176,0.12) 0%, transparent 70%);
  opacity:0.6;
  transition:opacity .4s;
  pointer-events:none;
}
.kit-card:hover{
  transform:translateY(-10px) scale(1.03);
  box-shadow:
    inset 0 0 0 1px rgba(47,91,255,0.45),
    0 0 0 1px rgba(47,91,255,0.35),
    0 36px 70px -16px rgba(47,91,255,0.55),
    0 22px 50px -18px rgba(232,60,176,0.30);
  z-index:2;
}
.kit-card:hover::before{ opacity:1; }
.kit-card:hover .kit-card__stage::before{ opacity:1; }

/* Category accent rail at the bottom of every card (CSS-only, no extra node) */
.kit-card::after{
  content:"";
  position:absolute; left:14px; right:14px; bottom:0;
  height:2px;
  background:var(--rail, var(--blue));
  border-radius:2px;
  opacity:0.75;
  box-shadow:0 0 14px var(--rail, var(--blue));
  pointer-events:none;
  z-index:3;
}
.kit-card--lycra { --rail: var(--blue); }
.kit-card--vest  { --rail: var(--violet); }
.kit-card--tank  { --rail: var(--fuchsia); }

.kit-card__stage{
  flex:1;
  position:relative;
  display:flex; align-items:center; justify-content:center;
  padding:24px 20px 18px;
}
.kit-card__stage img{
  max-width:88%;
  max-height:100%;
  width:auto; height:auto;
  object-fit:contain;
  position:relative; z-index:1;
  filter:drop-shadow(0 24px 28px rgba(0,0,0,0.55));
  transition:transform .55s cubic-bezier(.2,.7,.2,1), filter .35s;
  user-select:none; -webkit-user-drag:none;
  mix-blend-mode: normal;
}
.kit-card:hover .kit-card__stage img{
  transform:scale(1.08) translateY(-4px);
  filter:drop-shadow(0 30px 36px rgba(47,91,255,0.45)) drop-shadow(0 8px 12px rgba(0,0,0,0.6));
}

.kit-card__info{
  position:relative;
  z-index:3;
  padding:12px 18px 18px;
  display:flex; flex-direction:column; gap:2px;
  text-align:left;
}
.kit-card__num{
  font-family:'JetBrains Mono',monospace;
  font-size:10px; letter-spacing:0.28em; text-transform:uppercase;
  color:var(--mid);
  transition:color .3s;
}
.kit-card__sponsor{
  font-family:'Saira',sans-serif; font-weight:800;
  font-size:15px; letter-spacing:0.01em;
  color:var(--plat);
}
.kit-card__meta{
  font-family:'JetBrains Mono',monospace;
  font-size:10px; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--mid);
  transition:color .3s;
}
.kit-card:hover .kit-card__num{ color:var(--blue); }
.kit-card:hover .kit-card__meta{ color:var(--ink); }
.kit-card--vest:hover .kit-card__num { color:var(--violet); }
.kit-card--tank:hover  .kit-card__num { color:var(--fuchsia); }

/* Category divider inside the conveyor belt — vertical separator with label */
.kit-divider{
  flex:0 0 220px;
  height:380px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px;
  padding:12px 8px;
  margin:0;
  position:relative;
}
.kit-divider__rule{
  width:1px; flex:1;
  background:linear-gradient(180deg,
    transparent 0%,
    rgba(47,91,255,0.45) 18%,
    rgba(139,60,232,0.55) 50%,
    rgba(232,60,176,0.45) 82%,
    transparent 100%);
}
.kit-divider__label{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  font-family:'JetBrains Mono',monospace;
  text-transform:uppercase; letter-spacing:0.22em;
  white-space:nowrap;
}
.kit-divider__num{
  font-size:10px; color:var(--mid); letter-spacing:0.3em;
}
.kit-divider__title{
  font-family:'Saira',sans-serif; font-weight:800;
  font-size:22px; letter-spacing:0.04em;
  color:var(--plat);
  text-transform:uppercase;
}
.kit-divider__count{
  font-size:10px; color:var(--blue); letter-spacing:0.28em;
}
.kit-divider[data-cat="vest"] .kit-divider__count{ color:var(--violet); }
.kit-divider[data-cat="tank"] .kit-divider__count{ color:var(--fuchsia); }

.conveyor__hint{
  text-align:center;
  color:var(--mid);
  font-size:10.5px;
  letter-spacing:0.28em;
  text-transform:uppercase;
  padding-top:8px;
}

@media (prefers-reduced-motion: reduce){
  .conveyor__track{ animation-duration: 0s; }
}
@media (max-width: 720px){
  .conveyor{ margin-top:56px; padding-top:40px; }
  .conveyor__head{ padding:0 24px; margin-bottom:24px; }
  .kit-card{ flex-basis:220px; height:320px; }
  .conveyor__track{ animation-duration: 50s; gap:14px; }
}

/* Moments from the water */
.moments__grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  grid-auto-rows:240px;
  gap:14px;
  margin-top:56px;
}
.moment{
  position:relative;
  margin:0;
  border:1px solid var(--line);
  background:var(--bg-2);
  overflow:hidden;
  transition:transform .35s, border-color .35s;
}
.moment:hover{transform:translateY(-3px); border-color:var(--pink-2);}
.moment--lg{grid-column:span 2; grid-row:span 2;}
.moment__ph{
  position:absolute; inset:0;
  background: repeating-linear-gradient(135deg, #14141d 0 14px, #0d0d15 14px 28px);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.moment__ph::after{content:""; position:absolute; inset:10px; border:1px dashed #2a2a3a; z-index:2;}
.moment__ph .label{
  position:relative; z-index:2;
  font-family:'JetBrains Mono',monospace;
  font-size:11px; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--mid);
  text-align:center;
  line-height:1.7;
}
.moment__ph img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  z-index:1;
  transition:transform .8s ease;
}
.moment:hover .moment__ph img{transform:scale(1.04);}
.moment__ph:has(img)::after{border-color:rgba(255,255,255,0.05);}
.moment__ph:has(img) .label{display:none;}
.moment figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding:14px 16px;
  display:flex; align-items:center; gap:10px;
  font-family:'JetBrains Mono',monospace;
  font-size:11px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--ink);
  background:linear-gradient(to top, rgba(7,7,11,0.92) 0%, rgba(7,7,11,0) 100%);
  z-index:3;
}
.moment figcaption .mono{color:var(--pink-2);}
.moment--gradient{
  background:var(--grad);
  border:0;
}
.moment--gradient .moment__inner{
  position:absolute; inset:0;
  padding:22px;
  display:flex; flex-direction:column; justify-content:space-between;
  color:#fff;
}

/* Travel — map + services */
.travel__grid{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:24px;
  margin-top:56px;
}
.travel__map{
  position:relative;
  border:1px solid var(--line);
  background:var(--bg-2);
  padding:28px;
  display:flex; flex-direction:column;
  gap:14px;
  min-height:480px;
}
.travel__map svg{width:100%; height:auto; flex:1; min-height:0;}
.travel__services{
  border:1px solid var(--line);
  padding:32px;
  background:#000;
  display:flex; flex-direction:column;
  gap:14px;
}
.services-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px 18px;
  margin-top:8px;
}
.services-grid .item{
  display:flex; gap:10px; align-items:center;
  font-family:'Chakra Petch',sans-serif;
  font-size:14px;
  color:var(--plat);
}
.services-grid .item .dot{width:7px; height:7px; border-radius:50%;}

/* ============ CONTACT ============ */
.contact{padding:140px 56px;}
.contact__frame{
  position:relative;
  padding:8px;
  background:var(--grad);
  border-radius:18px;
  max-width:1100px;
  margin:0 auto;
}
.contact__inner{
  background:var(--bg);
  border-radius:12px;
  padding:80px 60px;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.contact__inner h2{font-family:'Saira',sans-serif; font-weight:800; font-size:clamp(40px, 6vw, 84px); line-height:0.96; letter-spacing:-0.01em;}
.contact__cta{display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin-top:36px;}
.contact__btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 22px;
  font-family:'JetBrains Mono',monospace;
  font-size:12px; letter-spacing:0.22em; text-transform:uppercase;
  text-decoration:none;
  color:#fff;
  background:var(--grad);
  border-radius:99px;
  border:0;
  transition:filter .2s, transform .2s;
}
.contact__btn:hover{filter:brightness(1.08); transform:translateY(-1px);}
.contact__btn.is-ghost{
  background:transparent;
  border:1px solid var(--line);
  color:var(--plat);
}
.contact__btn.is-ghost:hover{border-color:var(--pink-2); color:var(--pink-2);}
.contact__meta{
  margin-top:32px;
  display:flex; gap:32px; flex-wrap:wrap; justify-content:center;
  font-family:'JetBrains Mono',monospace;
  font-size:11px; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--mid);
}

/* ============ FOOTER ============ */
.footer{
  border-top:1px solid var(--line);
  padding:48px 56px 60px;
  display:flex; flex-direction:column; gap:36px;
  background:#04040a;
}
.footer__top{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:48px;
}
.footer__brand img{height:32px; width:auto; margin-bottom:18px;}
.footer__brand .tagline{
  font-family:'Saira',sans-serif;
  font-weight:600;
  font-size:18px;
  line-height:1.3;
  letter-spacing:-0.005em;
  color:var(--plat);
  max-width:38ch;
}
.footer__col h4{
  font-family:'JetBrains Mono',monospace;
  font-size:11px; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--pink-2);
  margin:0 0 16px 0;
  font-weight:500;
}
.footer__col a, .footer__col span{
  display:block;
  font-family:'Chakra Petch',sans-serif;
  font-size:14px;
  color:var(--ink);
  text-decoration:none;
  padding:5px 0;
  transition:color .2s;
}
.footer__col a:hover{color:var(--plat);}
.footer__bottom{
  display:flex; justify-content:space-between; align-items:center;
  border-top:1px solid var(--line);
  padding-top:24px;
  flex-wrap:wrap;
  gap:12px;
  font-family:'JetBrains Mono',monospace;
  font-size:10px; letter-spacing:0.24em; text-transform:uppercase;
  color:var(--mid);
}
.footer__credit{
  display:inline-flex; align-items:center; gap:18px;
  text-decoration:none;
  color:var(--mid);
  transition:color .25s ease, opacity .25s ease;
  line-height:1;
}
.footer__credit:hover{ color:var(--plat); }
.footer__credit-text{
  font-family:'JetBrains Mono',monospace;
  font-size:12px; letter-spacing:0.32em; text-transform:uppercase;
  line-height:1;
  align-self:center;
}
.footer__credit-logo{
  display:block;
  height:84px;
  width:auto;
  opacity:0.95;
  filter:saturate(0.95);
  transition:opacity .25s ease, transform .35s cubic-bezier(.2,.7,.2,1);
  align-self:center;
  /* Optical-centre correction: the PNG has the mascot above the wordmark,
     so the visual centre of "STARVIS" sits below the PNG bounding-box
     centre. Lift the logo so the wordmark aligns with "DESIGNED BY". */
  transform:translateY(-12px);
}
.footer__credit:hover .footer__credit-logo{ opacity:1; transform:translate(2px, -12px); }

/* ============ ANIMATIONS ============ */
@keyframes pulse{0%,100%{opacity:.5;}50%{opacity:1;}}
@keyframes flow{
  0%{stroke-dashoffset:0;}
  100%{stroke-dashoffset:-100;}
}

.reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .9s cubic-bezier(0.2, 0.7, 0.2, 1), transform .9s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.reveal.is-in{opacity:1; transform:translateY(0);}

/* ============ RESPONSIVE ============ */
@media (max-width: 1080px){
  .strategy__grid{grid-template-columns:1fr;}
  .apparel__tiers{grid-template-columns:repeat(2, 1fr);}
  .experiences__grid{grid-template-columns:1fr;}
  .travel__grid{grid-template-columns:1fr;}
  .manifesto__grid{grid-template-columns:1fr; gap:40px;}
  .footer__top{grid-template-columns:1fr 1fr;}
  .moments__grid{grid-template-columns:repeat(2, 1fr); grid-auto-rows:220px;}
  .moment--lg{grid-column:span 2; grid-row:span 1;}
  .lab-cta{grid-template-columns:auto 1fr; row-gap:18px;}
  .lab-cta__action{grid-column:1 / -1; justify-self:start;}
}
@media (max-width: 720px){
  section, .pillar-section, .contact{padding-left:24px; padding-right:24px;}
  .footer{padding-left:24px; padding-right:24px;}
  .nav{padding:0 18px;}
  .nav__links{display:none;}
  .nav__cta .ig{display:none;}
  .nav__cta .lab-pill{display:none;}
  .apparel__tiers{grid-template-columns:1fr;}
  .footer__top{grid-template-columns:1fr;}
  .chrome{padding:18px 22px; font-size:9px; letter-spacing:0.16em;}
  .chrome .corner{width:10px; height:10px;}
  .chrome .c1, .chrome .c2{top:12px;} .chrome .c3, .chrome .c4{bottom:12px;}
  .chrome .c1, .chrome .c3{left:12px;} .chrome .c2, .chrome .c4{right:12px;}
  .contact__inner{padding:56px 24px;}
  .moments__grid{grid-template-columns:1fr; grid-auto-rows:200px;}
  .moment--lg{grid-column:span 1;}
  .lab-cta{grid-template-columns:1fr; padding:22px;}
  .lab-cta__bar{display:none;}
}

/* ====================================================================== */
/*  EXPERIENCES — editorial redesign                                       */
/*  Less boxes. More photo. More air. Vertical rhythm.                     */
/*  Style ref: Nike Running editorials, Rapha, SailGP media, Arc'teryx     */
/* ====================================================================== */

.experiences{
  position:relative;
  padding:140px 0 120px;
  background:#07070b;
  overflow:hidden;
}
/* Subtle brand-coloured atmosphere — violet & blue diagonals very low
   opacity so the section reads as the "02 · BE TECHNIQUE" pillar without
   neon overload. */
.experiences::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(50% 55% at 0% 22%, rgba(139,60,232,0.10) 0%, transparent 60%),
    radial-gradient(45% 55% at 100% 78%, rgba(47,91,255,0.08) 0%, transparent 60%);
  pointer-events:none;
  z-index:0;
}
.experiences__container{
  position:relative; z-index:1;
  max-width:1240px;
  margin:0 auto;
  padding:0 56px;
}
.experiences .chapter-opener{ margin-bottom:140px; }

/* 2 & 3. Editorial blocks — text + photo, asymmetric, no card containers */
.exp-block{
  display:grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap:96px;
  align-items:center;
  margin:0 0 110px;
  padding:0;
  border:0;
  background:none;
}
.exp-block--reverse{ grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.exp-block--reverse .exp-photo{ order:1; }
.exp-block--reverse .exp-block__text{ order:2; }

.exp-block__text{ padding:6px 0; }
.exp-block__eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:'JetBrains Mono',monospace;
  font-size:11px; letter-spacing:0.32em; text-transform:uppercase;
  color:var(--violet);
  margin-bottom:22px;
}
.exp-block__eyebrow::before{
  content:""; display:inline-block;
  width:24px; height:1px;
  background:var(--violet);
}
.exp-block--reverse .exp-block__eyebrow{ color:var(--blue); }
.exp-block--reverse .exp-block__eyebrow::before{ background:var(--blue); }
.exp-block__title{
  font-family:'Saira',sans-serif;
  font-weight:800;
  font-size:clamp(40px, 5.4vw, 80px);
  line-height:1.0;
  letter-spacing:-0.025em;
  color:var(--plat);
  margin:0 0 26px;
}
.exp-block__body{
  font-family:'Chakra Petch',sans-serif;
  color:var(--ink);
  font-size:16px;
  line-height:1.65;
  max-width:42ch;
  margin:0 0 40px;
}

/* Photo: large cinematic crop, no frame, very subtle hover scale */
.exp-photo{
  margin:0;
  position:relative;
  overflow:hidden;
  aspect-ratio: 4 / 5;
  background:#0a0a10;
}
.exp-photo--tall{ aspect-ratio: 4 / 5.2; }
.exp-photo img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  filter:saturate(0.95) contrast(1.05);
  transition:transform 1.4s cubic-bezier(.2,.7,.2,1), filter 1s ease;
  will-change:transform;
}
.exp-block:hover .exp-photo img{
  transform:scale(1.025);
  filter:saturate(1.0) contrast(1.06);
}

/* Metadata: minimal stacked rows, single hairline above */
.exp-meta{
  display:flex; flex-direction:column;
  gap:14px;
  margin:0;
  padding-top:24px;
  border-top:1px solid rgba(139,60,232,0.32);
  max-width:36ch;
}
.exp-meta__row{
  display:grid;
  grid-template-columns:120px 1fr;
  align-items:baseline;
  gap:18px;
}
.exp-meta__k{
  font-family:'JetBrains Mono',monospace;
  font-size:10.5px; letter-spacing:0.32em; text-transform:uppercase;
  color:var(--mid);
  margin:0;
}
.exp-meta__v{
  font-family:'Chakra Petch',sans-serif;
  font-size:15px;
  color:var(--plat);
  margin:0;
}

/* Vertical progression inside HP block — typography only, no UI box */
.exp-progression{
  list-style:none; padding:0; margin:0;
  display:flex; flex-direction:column;
  gap:10px;
  padding-top:24px;
  border-top:1px solid rgba(47,91,255,0.32);
  max-width:36ch;
}
.exp-progression__step{
  font-family:'JetBrains Mono',monospace;
  font-size:12px; letter-spacing:0.34em; text-transform:uppercase;
  color:var(--plat);
}
.exp-progression__step:first-of-type{ color:var(--blue); }
.exp-progression__step:nth-of-type(2){ color:var(--violet); }
.exp-progression__step:last-of-type{ color:var(--fuchsia); }
.exp-progression__arrow{
  font-family:'Saira',sans-serif;
  font-weight:400;
  font-size:14px;
  color:var(--blue);
  opacity:0.7;
  line-height:1;
}
.exp-progression__arrow + .exp-progression__step + .exp-progression__arrow{
  color:var(--violet);
}

/* 4. Pathway — pure typography in brand colours, showing the progression
   Base (blue) → Tech (violet) → Podium (fuchsia). The whole stack reads
   as the BLACKPATT chromatic system applied to performance development. */
/* Full-bleed wrapper that escapes the container so the cinematic photo
   and overlay run edge-to-edge of the viewport. The pathway content stays
   centered inside the wrap. */
.exp-pathway-wrap{
  position:relative;
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  margin-bottom:100px;
  padding:120px 24px 80px;
  overflow:hidden;
  isolation:isolate;
}
.exp-pathway-bg{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:center center;
  z-index:-2;
  filter:saturate(0.65) brightness(0.32) contrast(1.1) blur(1px);
}
.exp-pathway-overlay{
  position:absolute; inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    /* edge fades to brand black on all sides */
    linear-gradient(180deg, #07070b 0%, transparent 18%, transparent 82%, #07070b 100%),
    linear-gradient(90deg,  #07070b 0%, transparent 12%, transparent 88%, #07070b 100%),
    /* darken center for legibility */
    radial-gradient(55% 50% at 50% 50%, rgba(7,7,11,0.45), rgba(7,7,11,0.78)),
    /* brand-coloured atmosphere */
    radial-gradient(40% 60% at 5% 50%, rgba(47,91,255,0.22), transparent 70%),
    radial-gradient(40% 60% at 50% 50%, rgba(139,60,232,0.15), transparent 70%),
    radial-gradient(40% 60% at 95% 50%, rgba(232,60,176,0.22), transparent 70%);
}

.exp-pathway{
  position:relative;
  text-align:center;
  margin:0 auto;
  max-width:840px;
  padding:0;
}
.exp-pathway__eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:'JetBrains Mono',monospace;
  font-size:11px; letter-spacing:0.32em; text-transform:uppercase;
  color:var(--blue);
  margin-bottom:36px;
}
.exp-pathway__dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--blue);
  box-shadow:0 0 10px var(--blue);
}

/* Each path entry: huge step word + small phase descriptor underneath */
.exp-pathway__entry{
  display:flex; flex-direction:column; align-items:center; gap:6px;
}
.exp-pathway__phase{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  font-family:'JetBrains Mono',monospace;
  text-transform:uppercase;
}
.exp-pathway__phase-num{
  font-size:10px; letter-spacing:0.32em;
  color:var(--cat, var(--mid));
  opacity:0.85;
}
.exp-pathway__phase-text{
  font-size:11px; letter-spacing:0.18em;
  color:var(--plat);
}
.exp-pathway__entry--blue   { --cat: var(--blue); }
.exp-pathway__entry--violet { --cat: var(--violet); }
.exp-pathway__entry--fuchsia{ --cat: var(--fuchsia); }
.exp-pathway::before,
.exp-pathway::after{
  content:"";
  position:absolute; left:50%;
  width:1px; height:36px;
  background:linear-gradient(to bottom, transparent, rgba(255,255,255,0.18), transparent);
}
.exp-pathway::before{ top:0; transform:translateX(-50%); }
.exp-pathway::after{ bottom:0; transform:translateX(-50%); }
.exp-pathway__steps{
  list-style:none; padding:0;
  display:flex; flex-direction:column;
  align-items:center;
  gap:18px;
  margin:0 0 40px;
}
.exp-pathway__step{
  font-family:'Saira',sans-serif;
  font-weight:800;
  font-size:clamp(56px, 8vw, 112px);
  line-height:1;
  letter-spacing:-0.025em;
  text-transform:uppercase;
  color:var(--plat);
  transition:transform .4s ease;
}
.exp-pathway__step--blue{
  background: linear-gradient(120deg, var(--blue) 0%, #6587ff 100%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  filter:drop-shadow(0 0 22px rgba(47,91,255,0.18));
}
.exp-pathway__step--violet{
  background: linear-gradient(120deg, var(--violet) 0%, #b06bf3 100%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  filter:drop-shadow(0 0 22px rgba(139,60,232,0.18));
}
.exp-pathway__step--fuchsia{
  background: linear-gradient(120deg, var(--fuchsia) 0%, #ff6dc8 100%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  filter:drop-shadow(0 0 22px rgba(232,60,176,0.20));
}
.exp-pathway__arrow{
  font-family:'Saira',sans-serif;
  font-weight:300;
  font-size:30px;
  line-height:1;
  opacity:0.85;
}
.exp-pathway__arrow--01{ color:var(--blue); }
.exp-pathway__arrow--02{ color:var(--violet); }
.exp-pathway__sub{
  font-family:'Chakra Petch',sans-serif;
  font-size:15px;
  color:var(--ink);
  max-width:46ch;
  margin:0 auto;
  line-height:1.65;
}

/* Pathway facts strip — Boats / Season / Location editorial row */
.exp-pathway__facts{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:24px;
  margin:48px auto 0;
  max-width:680px;
  padding:32px 24px 0;
  border-top:1px solid rgba(255,255,255,0.08);
  text-align:left;
}
.exp-pathway__facts > div{
  display:flex; flex-direction:column; gap:6px;
}
.exp-pathway__facts dt{
  font-family:'JetBrains Mono',monospace;
  font-size:10px; letter-spacing:0.32em; text-transform:uppercase;
  color:var(--mid);
  margin:0;
}
.exp-pathway__facts dd{
  font-family:'Saira',sans-serif; font-weight:800;
  font-size:14px; letter-spacing:0;
  color:var(--plat);
  margin:0;
}

/* 5. Lab CTA — premium, minimal, editorial */
.exp-lab{
  max-width:680px;
  margin:0 auto;
  text-align:center;
}
.exp-lab__rule{
  width:1px; height:36px;
  background:linear-gradient(to bottom, transparent, var(--blue) 35%, var(--violet) 65%, transparent);
  margin:0 auto 24px;
  opacity:0.6;
}
.exp-lab__inner{ padding:0 24px; }
.exp-lab__eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:'JetBrains Mono',monospace;
  font-size:11px; letter-spacing:0.42em; text-transform:uppercase;
  color:var(--blue);
  margin-bottom:20px;
}
.exp-lab__eyebrow::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:var(--blue); box-shadow:0 0 10px var(--blue);
}
.exp-lab__title{
  font-family:'Saira',sans-serif;
  font-weight:800;
  font-size:clamp(28px, 3.2vw, 44px);
  line-height:1.1;
  letter-spacing:-0.02em;
  color:var(--plat);
  margin:0 0 16px;
}
.exp-lab__body{
  font-family:'Chakra Petch',sans-serif;
  color:var(--ink);
  font-size:15px;
  line-height:1.6;
  margin:0 auto 36px;
  max-width:44ch;
}
.exp-lab__btn{
  position:relative;
  display:inline-block;
  padding:18px 36px;
  font-family:'JetBrains Mono',monospace;
  font-size:11px; letter-spacing:0.42em; text-transform:uppercase;
  color:var(--plat);
  background:transparent;
  border:1px solid var(--blue);
  border-radius:0;
  text-decoration:none;
  transition:background .35s ease, color .35s ease, border-color .35s ease,
             letter-spacing .35s ease, box-shadow .35s ease;
}
.exp-lab__btn:hover{
  background:var(--blue);
  color:#fff;
  border-color:var(--blue);
  letter-spacing:0.48em;
  box-shadow:0 0 0 1px rgba(47,91,255,0.45), 0 12px 36px -10px rgba(47,91,255,0.55);
}

/* Responsive */
@media (max-width: 900px){
  .experiences{ padding:90px 0 80px; }
  .experiences__container{ padding:0 24px; }
  .exp-hero{ margin-bottom:96px; }
  .exp-block,
  .exp-block--reverse{
    grid-template-columns:1fr;
    gap:36px;
    margin-bottom:96px;
  }
  .exp-block--reverse .exp-photo{ order:0; }
  .exp-block--reverse .exp-block__text{ order:0; }
  .exp-photo,
  .exp-photo--tall{ aspect-ratio: 4 / 3; }
  .exp-pathway{ margin-bottom:100px; padding:36px 0; }
  .exp-pathway__steps{ gap:18px; margin-bottom:40px; }
  .exp-pathway__step{ font-size:clamp(44px, 12vw, 72px); }
}

/* ====================================================================== */
/*  MOMENTS · auto-scroll editorial slider                                 */
/*  Infinite horizontal loop, hover pauses, edge mask fades both sides.    */
/* ====================================================================== */
.moments-slider{
  position:relative;
  margin:48px 0 0;
  padding:0;
}
.moments-slider__viewport{
  position:relative;
  width:100%;
  overflow:hidden;
  -webkit-mask-image: linear-gradient(
    90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(
    90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.moments-slider__track{
  display:flex;
  gap:24px;
  width:max-content;
  animation: moments-scroll 50s linear infinite;
  will-change: transform;
}
.moments-slider:hover .moments-slider__track{ animation-play-state: paused; }
@keyframes moments-scroll{
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
.moments-slide{
  position:relative;
  flex:0 0 auto;
  width:clamp(220px, 22vw, 340px);
  aspect-ratio: 4 / 5;
  margin:0;
  border-radius:0;
  overflow:hidden;
  background:#0a0a10;
  transition:transform .35s cubic-bezier(.2,.7,.2,1),
             box-shadow .35s ease, filter .35s ease;
}
.moments-slide img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  filter:saturate(0.95) contrast(1.05) brightness(0.92);
  transition:filter .5s ease, transform .8s cubic-bezier(.2,.7,.2,1);
}
.moments-slide:hover{
  transform:translateY(-6px);
  box-shadow:
    0 0 0 1px rgba(232,60,176,0.30),
    0 18px 36px -12px rgba(232,60,176,0.30),
    0 18px 36px -12px rgba(47,91,255,0.25);
  z-index:3;
}
.moments-slide:hover img{
  filter:saturate(1.05) contrast(1.06) brightness(1.0);
  transform:scale(1.04);
}
.moments-slide figcaption{
  position:absolute; left:0; right:0; bottom:0;
  display:flex; align-items:center; gap:10px;
  padding:14px 16px;
  font-family:'JetBrains Mono',monospace;
  font-size:10.5px; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--plat);
  background:linear-gradient(to top,
    rgba(7,7,11,0.92) 0%,
    rgba(7,7,11,0.55) 60%,
    rgba(7,7,11,0) 100%);
  pointer-events:none;
}
.moments-slide__num{ color:var(--fuchsia); }

.moments-slider__hint{
  text-align:center;
  color:var(--mid);
  font-size:10.5px;
  letter-spacing:0.28em;
  text-transform:uppercase;
  padding-top:24px;
}

@media (prefers-reduced-motion: reduce){
  .moments-slider__track{ animation: none; }
}
@media (max-width: 720px){
  .moments-slider__track{ animation-duration: 35s; gap:14px; }
  .moments-slide{ width:200px; aspect-ratio:3/4; }
}

/* ====================================================================== */
/*  TRAVEL · cinematic map + services exposed in 3 categories              */
/* ====================================================================== */

/* Hero map: full-width within container, taller, atmospheric */
.travel-map{
  position:relative;
  margin:48px 0 80px;
  border:1px solid rgba(255,255,255,0.06);
  overflow:hidden;
  background:#06080f;
  aspect-ratio: 16 / 7;
}
.travel-map__svg{
  display:block;
  width:100%; height:100%;
  position:absolute; inset:0;
}
.travel-map__caption{
  position:absolute; left:24px; right:24px; top:22px;
  display:flex; align-items:baseline; justify-content:space-between;
  gap:16px;
  z-index:2;
  pointer-events:none;
}
.travel-map__eyebrow{
  font-family:'JetBrains Mono',monospace;
  font-size:11px; letter-spacing:0.32em; text-transform:uppercase;
  color:var(--fuchsia);
}
.travel-map__meta{
  font-family:'JetBrains Mono',monospace;
  font-size:10.5px; letter-spacing:0.28em; text-transform:uppercase;
  color:var(--mid);
  text-align:right;
}

/* Pulsing port animations */
@keyframes travel-pulse-2 {
  0%, 100% { opacity: 0.55; transform-origin: center; transform: scale(1); }
  50%      { opacity: 0.18; transform: scale(1.5); }
}
@keyframes travel-pulse-3 {
  0%, 100% { opacity: 0.35; transform: scale(1); }
  50%      { opacity: 0.08; transform: scale(1.7); }
}
.travel-map__pulse{ transform-box: fill-box; transform-origin: center; }
.travel-map__pulse--2{ animation: travel-pulse-2 3.2s ease-in-out infinite; }
.travel-map__pulse--3{ animation: travel-pulse-3 3.2s ease-in-out 0.6s infinite; }

/* Animated dashed route */
@keyframes travel-route-flow {
  to { stroke-dashoffset: -200; }
}
.travel-map__route{
  animation: travel-route-flow 14s linear infinite;
}

@media (prefers-reduced-motion: reduce){
  .travel-map__pulse,
  .travel-map__route{ animation: none; }
}

/* SERVICES section */
.travel-services{
  margin-top:80px;
}
.travel-services__head{
  text-align:center;
  max-width:760px;
  margin:0 auto 64px;
}
.travel-services__eyebrow{
  display:inline-block;
  font-family:'JetBrains Mono',monospace;
  font-size:11px; letter-spacing:0.32em; text-transform:uppercase;
  color:var(--fuchsia);
  margin-bottom:14px;
}
.travel-services__title{
  font-family:'Saira',sans-serif;
  font-weight:800;
  font-size:clamp(44px, 6.2vw, 88px);
  line-height:0.98; letter-spacing:-0.025em;
  color:var(--plat);
  margin:0 0 18px;
}
.travel-services__sub{
  font-family:'Chakra Petch',sans-serif;
  color:var(--ink);
  font-size:15px;
  line-height:1.6;
  max-width:54ch;
  margin:0 auto;
}

/* Three categories in a row, hairline rule + numbered list per category */
.travel-services__grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:48px;
  margin-bottom:72px;
  padding:0 12px;
}
.svc-group{
  display:flex; flex-direction:column;
  gap:22px;
  padding-top:24px;
  border-top:1px solid rgba(255,255,255,0.10);
}
.svc-group__label{
  display:flex; align-items:center; gap:14px;
  font-family:'JetBrains Mono',monospace;
  font-size:11px; letter-spacing:0.36em; text-transform:uppercase;
  color:var(--plat);
}
.svc-group__hairline{
  display:inline-block;
  width:32px; height:1px;
  background:var(--cat, var(--fuchsia));
  box-shadow:0 0 6px var(--cat, var(--fuchsia));
}
.svc-group--blue   { --cat: var(--blue); }
.svc-group--violet { --cat: var(--violet); }
.svc-group--fuchsia{ --cat: var(--fuchsia); }
.svc-group--blue .svc-group__label  { color:var(--blue); }
.svc-group--violet .svc-group__label{ color:var(--violet); }
.svc-group--fuchsia .svc-group__label{ color:var(--fuchsia); }

.svc-group__list{
  list-style:none; padding:0; margin:0;
  display:flex; flex-direction:column;
  gap:18px;
}
.svc-item{
  display:grid;
  grid-template-columns:40px 1fr;
  align-items:baseline;
  gap:14px;
  padding-bottom:18px;
  border-bottom:1px solid rgba(255,255,255,0.05);
  transition:border-color .3s ease, transform .3s ease;
}
.svc-item:last-child{ border-bottom:0; padding-bottom:0; }
.svc-item:hover{
  border-bottom-color: var(--cat);
  transform: translateX(3px);
}
.svc-item__num{
  font-family:'JetBrains Mono',monospace;
  font-size:11px; letter-spacing:0.22em;
  color: var(--cat);
}
.svc-item__text{
  font-family:'Chakra Petch',sans-serif;
  color:var(--plat);
  font-size:15px;
  line-height:1.45;
}

/* Bottom facts strip */
.travel-facts{
  margin:0 auto;
  max-width:920px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:32px;
  padding:36px 24px 0;
  border-top:1px solid rgba(255,255,255,0.10);
}
.travel-facts__row{
  display:flex; flex-direction:column; gap:8px;
  text-align:left;
}
.travel-facts__k{
  font-family:'JetBrains Mono',monospace;
  font-size:10.5px; letter-spacing:0.32em; text-transform:uppercase;
  color:var(--mid);
  margin:0;
}
.travel-facts__v{
  font-family:'Saira',sans-serif; font-weight:800;
  font-size:18px; letter-spacing:-0.005em;
  color:var(--plat);
  margin:0;
}

@media (max-width: 900px){
  .travel-map{ aspect-ratio: 4 / 3; }
  .travel-services__grid{
    grid-template-columns:1fr;
    gap:36px;
  }
  .travel-facts{ grid-template-columns:1fr; gap:20px; }
}