/* ============================================================
   Distilled Spirits USA — Design System
   v59 | Clean rewrite: mobile-first, responsive, accessible
   ============================================================ */

/* ── 1. Custom Properties ─────────────────────────────────── */
:root {
  /* Palette */
  --bg:          #070a0f;
  --bg2:         #0b0f14;
  --panel:       rgba(255 255 255 / .06);
  --panel2:      rgba(255 255 255 / .09);
  --text:        rgba(255 255 255 / .92);
  --muted:       rgba(255 255 255 / .70);
  --faint:       rgba(255 255 255 / .52);
  --line:        rgba(255 255 255 / .14);

  /* Accent (overridden per page) */
  --accent:      #7bdcff;
  --accent-rgb:  123 220 255;
  --accent2:     #b6ffea;

  /* Page-specific accents */
  --accent-home:       #7bdcff;  --accent-home-rgb:       123 220 255;
  --accent-about:      #63ffb6;  --accent-about-rgb:      99 255 182;
  --accent-portfolio:  #fed835;  --accent-portfolio-rgb:   254 216 53;
  --accent-services:   #fd8e01;  --accent-services-rgb:   253 142 1;
  --accent-creative:   #f766ae;  --accent-creative-rgb:   247 102 174;
  --accent-partners:   #ffe86a;  --accent-partners-rgb:   255 232 106;
  --accent-contact:    #f7d8b8;  --accent-contact-rgb:    247 216 184;

  /* Typography */
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Spacing */
  --section-pad: clamp(28px, 3.5vw, 48px);
  --container:   1160px;
  --gutter:      clamp(20px, 4vw, 28px);

  /* Shapes */
  --radius:   22px;
  --radius-lg: 28px;
  --radius-xl: 32px;

  /* Shadows */
  --shadow-sm: 0 10px 40px rgba(0 0 0 / .25);
  --shadow-md: 0 20px 70px rgba(0 0 0 / .30);
  --shadow-lg: 0 28px 90px rgba(0 0 0 / .35);

  /* Motion */
  --ease: cubic-bezier(.2, .9, .2, 1);
  --dur:  .25s;
}

/* Per-page accent tokens */
body.home            { --accent: var(--accent-home);      --accent-rgb: var(--accent-home-rgb); }
body.page-about      { --accent: var(--accent-about);     --accent-rgb: var(--accent-about-rgb); }
body.page-portfolio  { --accent: var(--accent-portfolio); --accent-rgb: var(--accent-portfolio-rgb); }
body.page-services   { --accent: var(--accent-services);  --accent-rgb: var(--accent-services-rgb); }
body.page-creative   { --accent: var(--accent-creative);  --accent-rgb: var(--accent-creative-rgb); }
body.page-partners   { --accent: var(--accent-partners);  --accent-rgb: var(--accent-partners-rgb); }
body.page-contact    { --accent: var(--accent-contact);   --accent-rgb: var(--accent-contact-rgb); }


/* ── 2. Reset & Base ──────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Restore browser UA heading weights lost in reset */
h2, h3, h4, h5, h6 { font-weight: 600; }

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

body {
  font-family: var(--font);
  background:
    radial-gradient(1200px 700px at 50% -10%, rgba(123 220 255 / .12), transparent 60%),
    radial-gradient(900px 600px at 10% 25%,  rgba(182 255 234 / .08), transparent 55%),
    linear-gradient(180deg, var(--bg2), var(--bg));
  color: var(--text);
  overflow-x: hidden;
  min-height: 100dvh;
}

/* Interior pages: accent-driven ambient glow instead of fixed blue/mint */
body.home {
  /* One seamless dark canvas — near-black with whisper-thin blue depth */
  background:
    radial-gradient(ellipse 120% 45% at 50% 5%,   rgba(14 28 58 / .55) 0%, transparent 60%),
    radial-gradient(ellipse 80%  60% at 8%  35%,  rgba(10 22 48 / .35) 0%, transparent 55%),
    radial-gradient(ellipse 90%  50% at 92% 55%,  rgba(8  18 44 / .30) 0%, transparent 55%),
    radial-gradient(ellipse 100% 40% at 45% 85%,  rgba(10 20 50 / .40) 0%, transparent 60%),
    linear-gradient(180deg, #07080d 0%, #070910 50%, #06080d 100%);
  background-attachment: fixed;
}

body:not(.home) {
  background: linear-gradient(180deg, var(--bg2), var(--bg));
}
body:not(.home)::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(1200px 700px at 50% -12%, rgba(var(--accent-rgb) / .14), transparent 62%),
    radial-gradient(900px  520px at 12%  22%, rgba(var(--accent-rgb) / .08), transparent 60%);
}

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

::selection { background: rgba(123 220 255 / .22); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}


/* ── 3. Layout Utilities ──────────────────────────────────── */
.container {
  width: min(var(--container), 100% - var(--gutter) * 2);
  margin-inline: auto;
}

.section {
  position: relative;
  width: 100%;
  padding-block: clamp(48px, 6vw, 80px);
}
/* Section radial tint from page accent */



/* ── 4. Typography ────────────────────────────────────────── */
.kicker {
  display: block;
  color: var(--accent);
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 12px;
}

.h1 {
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1.04;
  letter-spacing: -.03em;
  color: var(--text);
}

.h2 {
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.02em;
  margin-block: 12px;
  color: var(--text);
}

.p {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.75;
}
.p.lead { font-size: 18px; color: rgba(255 255 255 / .78); line-height: 1.8; }

.small {
  color: rgba(255 255 255 / .72);
  font-size: 16px;
  line-height: 1.75;
}


/* ── 5. Navigation ────────────────────────────────────────── */
.nav {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 100;
  padding-block: 14px;
  border-bottom: 1px solid transparent;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
  transform: translate3d(0,0,0);
  -webkit-transform: translate3d(0,0,0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: backdrop-filter;
}
.nav.scrolled {
  background: rgba(7 10 15 / .72);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-color: var(--line);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.nav__brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.nav__brand img {
  height: 36px;
  width: auto;
  filter: drop-shadow(0 8px 24px rgba(0 0 0 / .35));
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
}
.nav__links a {
  font-size: 13px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgba(255 255 255 / .72);
  padding: 9px 12px;
  border-radius: 999px;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav__links a:hover { background: rgba(255 255 255 / .07); color: rgba(255 255 255 / .95); }
.nav__links a.active { color: var(--accent); }

/* Per-destination hover colors */
.nav__links a.nav-home:hover      { color: var(--accent-home); }
.nav__links a.nav-about:hover     { color: var(--accent-about); }
.nav__links a.nav-portfolio:hover { color: var(--accent-portfolio); }
.nav__links a.nav-services:hover  { color: var(--accent-services); }
.nav__links a.nav-creative:hover  { color: var(--accent-creative); }
.nav__links a.nav-partners:hover  { color: var(--accent-partners); }
.nav__links a.nav-contact:hover   { color: var(--accent-contact); }

.nav__cta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* ── Hamburger ── */
.nav__burger {
  display: none;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--panel);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
  flex-shrink: 0;
}
.nav__burger:hover { background: var(--panel2); border-color: rgba(255 255 255 / .22); }
.nav__burger span {
  display: block;
  width: 18px;
  height: 2px;
  background: rgba(255 255 255 / .82);
  border-radius: 2px;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
  transform-origin: center;
}
/* Animated X state */
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }


/* ── 6. Mobile Drawer ─────────────────────────────────────── */
.mobile-drawer {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  align-items: start;
  justify-items: end;
  padding: 10px;
  background: rgba(0 0 0 / .55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease);
}
.mobile-drawer.open {
  opacity: 1;
  pointer-events: auto;
}

.mobile-drawer__panel {
  width: min(420px, 100%);
  border-radius: var(--radius-xl);
  border: 1px solid var(--line);
  background: rgba(10 14 22 / .82);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  transform: translateY(-12px);
  transition: transform var(--dur) var(--ease);
}
.mobile-drawer.open .mobile-drawer__panel { transform: translateY(0); }

.mobile-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border-bottom: 1px solid rgba(255 255 255 / .09);
}
.mobile-drawer__logo {
  display: flex;
  align-items: center;
  gap: 12px;
}
.mobile-drawer__logo img { height: 28px; width: auto; }
.mobile-drawer__logo span {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255 255 255 / .78);
}

.mobile-drawer__close {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: rgba(255 255 255 / .9);
  font-size: 18px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--dur), border-color var(--dur);
}
.mobile-drawer__close:hover { background: var(--panel2); border-color: rgba(255 255 255 / .22); }

.mobile-drawer__nav {
  display: flex;
  flex-direction: column;
  padding: 10px;
  gap: 2px;
  list-style: none;
}
.mobile-drawer__nav a {
  display: block;
  padding: 13px 14px;
  border-radius: 16px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 13px;
  color: rgba(255 255 255 / .88);
  transition: background var(--dur);
}
.mobile-drawer__nav a:hover { background: var(--panel); }
.mobile-drawer__nav a.active { color: var(--accent); }

.mobile-drawer__actions {
  display: flex;
  justify-content: center;
  padding: 16px 10px 24px;
}
.mobile-drawer__actions .btn {
  justify-content: center;
  min-width: 160px;
  padding-inline: 32px;
}


/* ── 7. Buttons ───────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: rgba(255 255 255 / .88);
  font-family: inherit;
  font-size: 14px;
  font-weight: 650;
  letter-spacing: .02em;
  white-space: nowrap;
  transition:
    transform var(--dur) var(--ease),
    background var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}
.btn:hover,
.btn:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(var(--accent-rgb) / .55);
  background: rgba(var(--accent-rgb) / .08);
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb) / .28), 0 16px 48px rgba(var(--accent-rgb) / .14);
}
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.btn--primary {
  background: linear-gradient(135deg, rgba(var(--accent-rgb) / .18), rgba(182 255 234 / .12));
  border-color: rgba(var(--accent-rgb) / .26);
}

.btn--hero {
  min-width: 160px;
  justify-content: center;
}

@media (max-width: 480px) {
  .btn--hero { min-width: 0; flex: 1; }
}


/* ── 8. Pills ─────────────────────────────────────────────── */
.pill {
  display: inline-flex;
  align-items: center;
  padding: 8px 13px;
  border-radius: 999px;
  border: 1px solid rgba(255 255 255 / .14);
  background: transparent;
  color: rgba(255 255 255 / .72);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  transition: border-color var(--dur), color var(--dur), background var(--dur);
}
.pill:hover {
  border-color: rgba(var(--accent-rgb) / .52);
  color: rgba(255 255 255 / .92);
  background: rgba(var(--accent-rgb) / .06);
}

.pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}


/* ── 9. Hero Section ──────────────────────────────────────── */
.block-hero {
  position: relative;
  min-height: 92dvh;
  display: flex;
  align-items: center;
  padding: 0;
  padding-block: 0;
  overflow: hidden;
  background: transparent;
}

.hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: screen;
  opacity: .75;
  -webkit-mask-image: linear-gradient(to bottom, black 40%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 40%, transparent 100%);
}

.hero-seam {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 55%;
  pointer-events: none;
  z-index: 2;
  background: linear-gradient(to bottom, transparent 0%, rgba(7 8 13 / 1.0) 100%);
}

.hero-inner {
  position: relative;
  z-index: 3;
  width: 100%;
  padding-block: 80px 60px;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.3fr .7fr;
  gap: 34px;
  align-items: center;
}

.hero-title {
  font-size: clamp(44px, 5.3vw, 86px);
  line-height: 1.0;
  letter-spacing: -.04em;
  margin: 0;
}
.hero-title .shine {
  background: linear-gradient(90deg,
    rgba(255 255 255 / .96),
    rgba(123 220 255 / .92),
    rgba(182 255 234 / .90),
    rgba(255 255 255 / .92));
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  background-size: 220% 100%;
  animation: shine 7s var(--ease) infinite;
}
@keyframes shine {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.hero-sub { margin-top: 18px; max-width: 62ch; }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.hero-kicker { margin-bottom: 18px; }

/* Right column — stat cards */
.hero-right {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.stat-card {
  border: 1px solid var(--line);
  background: rgba(255 255 255 / .05);
  border-radius: var(--radius-lg);
  padding: 18px;
  box-shadow: var(--shadow-md);
}
.stat-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.badge {
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255 255 255 / .78);
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(123 220 255 / .08);
  border: 1px solid rgba(123 220 255 / .18);
}
.stat-value {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -.02em;
}
.stat-mini {
  color: rgba(255 255 255 / .68);
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.55;
}

/* Hero responsive */
@media (max-width: 900px) {
  .block-hero {
    align-items: flex-start;  /* stop vertically centering — let padding control position */
    min-height: 100svh;
  }
  .hero-grid {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .hero-inner {
  position: relative;
  z-index: 3; padding-block: 80px 48px; }
  .hero-right { flex-direction: row; flex-wrap: wrap; }
  .stat-card { flex: 1 1 260px; }
}

@media (max-width: 600px) {
  .hero-inner { padding-block-start: 90px; }
  .hero-right { flex-direction: column; }
  .stat-card  { flex: none; }
  .hero-actions { flex-direction: column; }
  .hero-actions .btn { width: 100%; }
}


/* ── 10. Triple Tiles ─────────────────────────────────────── */
.block-tiles {
  position: relative;
  padding-block: 0;
  margin-top: 0;
  background: transparent;
}

.tile-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  max-width: var(--container);
  margin-inline: auto;
  border-top: none;
  border-bottom: none;
}

.tile {
  position: relative;
  border-radius: 0;
  border: none;
  border-left: 1px solid rgba(255 255 255 / .15);
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  overflow: visible;
  min-height: auto;
  box-shadow: none;
  transition: opacity .25s var(--ease);
}
.tile:first-child { border-left: none; }
.tile:hover { opacity: 0.85; }

/* Per-tile accent: arrow colour only */



/* Per-tile accent arrow color */
.tile--portfolio .tile__arrow { color: var(--accent-home); }
.tile--services  .tile__arrow { color: var(--accent-services); }
.tile--creative  .tile__arrow { color: var(--accent-creative); }

.tile__bg {
  position: absolute;
  inset: 0;
  opacity: .7;
  transition: opacity .35s var(--ease);
}
/* Tile backgrounds: uniform subtle glass, no per-tile colour fill */
.tile__bg { background: none; }
.tile:hover .tile__bg { opacity: 1; }

/* Hover glow orb that tracks the tile */






.tile__content {
  position: relative;
  padding: 48px 40px 56px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
}

.tile__meta { display: none; }
.tile h3 {
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255 255 255 / .9);
  font-weight: 600;
  margin-bottom: 16px;
}
.tile p {
  font-size: 16px;
  line-height: 1.65;
  color: rgba(255 255 255 / .62);
  margin: 0;
}

.tile__content h3 {
  margin: 0 0 10px;
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255 255 255 / .55);
}
.tile__content p {
  margin: 0;
  color: rgba(255 255 255 / .80);
  line-height: 1.7;
  font-size: 18px;
  flex: 1;
}

.tile__arrow {
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 600;
  padding-top: 18px;
  padding-bottom: 18px;
  border-top: 1px solid rgba(255 255 255 / .07);
  margin-top: auto;
  transition: gap .2s var(--ease);
}
.tile:hover .tile__arrow { gap: 12px; }

.tile__arrow .chevron {
  opacity: .75;
  transition: opacity var(--dur), transform var(--dur);
  flex-shrink: 0;
}
.tile:hover .tile__arrow .chevron { opacity: 1; transform: translateX(4px); }

@media (max-width: 840px) {
  .tile-grid { grid-template-columns: 1fr; }
  .tile { min-height: 160px; }
}


/* ── 11. Band / What We Do ────────────────────────────────── */
.block-band {
  background: transparent;
  position: relative;
  overflow: hidden;
  padding-block: 0;
  margin-top: -32px;
}

/* Ambient radial backdrop for the whole section */
.block-band::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: none;
}

.block-band .kicker { margin-bottom: 10px; }
.block-band .p.lead { margin-bottom: 48px; }

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: stretch;
  position: relative;
  z-index: 1;
}

.card {
  border: 1px solid rgba(255 255 255 / .10);
  background: rgba(255 255 255 / .06);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--shadow-md);
  height: 100%;
  position: relative;
  overflow: hidden;
  transition: border-color .35s var(--ease), box-shadow .35s var(--ease);
  display: flex;
  flex-direction: column;
}
.card .hero-actions { margin-top: auto; padding-top: 24px; }
.card:hover {
  border-color: rgba(123 220 255 / .22);
  box-shadow: 0 28px 80px rgba(0 0 0 / .40), 0 0 0 1px rgba(123 220 255 / .10);
}

/* Card inner ambient glow */
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(500px 300px at 0% 0%, rgba(123 220 255 / .08), transparent 65%);
  opacity: 0;
  transition: opacity .45s var(--ease);
}
.card--launch::before {
  background: radial-gradient(500px 300px at 100% 0%, rgba(182 255 234 / .07), transparent 65%);
}
.card:hover::before { opacity: 1; }

/* Card header row: badge + step number */
.card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255 255 255 / .08);
}
.card__badge {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(123 220 255 / .08);
  border: 1px solid rgba(123 220 255 / .18);
  border-radius: 999px;
  padding: 6px 12px;
}
.card--launch .card__badge {
  color: var(--accent2);
  background: rgba(182 255 234 / .07);
  border-color: rgba(182 255 234 / .18);
}
.card__step {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .22em;
  color: rgba(255 255 255 / .22);
}

.card h3 { margin: 0 0 10px; font-size: 18px; }

/* Custom checkmark list */
.card__list {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
  display: flex;
  flex-direction: column;
}
.card__list li {
  display: block;
  padding-left: 28px;
  text-indent: -28px;
  color: rgba(255 255 255 / .72);
  font-size: 14px;
  line-height: 1.6;
  padding-block: 8px;
  padding-top: 8px;
  border-bottom: 1px solid rgba(255 255 255 / .05);
}
.card__list li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.card__check {
  display: inline-block;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  vertical-align: middle;
  margin-right: 8px;
  margin-top: -2px;
  border-radius: 50%;
  border: 1px solid rgba(123 220 255 / .35);
  background: rgba(123 220 255 / .08);
  position: relative;
  transition: background 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease;
}
.card--launch .card__check {
  border-color: rgba(182 255 234 / .35);
  background: rgba(182 255 234 / .07);
}
.card__text {
  text-indent: 0;
  display: inline;
}
/* card__check defined above */

/* Keep old .list for interior pages */
.card .list {
  margin: 12px 0 0;
  padding-inline-start: 18px;
  color: rgba(255 255 255 / .75);
  line-height: 1.85;
}

@media (max-width: 720px) {
  .grid-2 { grid-template-columns: 1fr; }
}


/* ── 12. Slider ───────────────────────────────────────────── */
/* ── Portfolio Slider (contained glass card) ─────────────── */
@keyframes slide-reveal {
  from { opacity: 0; transform: scale(1.03); }
  to   { opacity: 1; transform: scale(1.0); }
}


/* Header row */

}


/* ── 13. Signature / Parallax Section ────────────────────── */
.block-signature {
  position: relative;
  min-height: 62dvh;
  padding: 0;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.block-signature__bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 100% 80% at 55% 50%,
    rgba(60 130 230 / .06) 0%,
    transparent 65%);
}

.block-signature__shade {
  position: absolute;
  inset: 0;
  background: none;
}

.block-signature__inner {
  position: relative;
  width: 100%;
  padding-block: clamp(28px, 3.5vw, 48px);
}


/* ── 14. CTA Section ──────────────────────────────────────── */
.block-cta {
  padding-block: var(--section-pad);
  background: transparent;
}

.cta-card {
  border: 1px solid var(--line);
  background: rgba(255 255 255 / .05);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--shadow-md);
}

.cta-card .h2 { margin: 0 0 10px; }

.cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}

/* Inline ticker inside CTA */
.cta-ticker-wrap {
  overflow: hidden;
  border: 1px solid rgba(255 255 255 / .18);
  border-radius: 999px;
  background: rgba(255 255 255 / .03);
  margin-top: 36px;
  margin-bottom: 0;
}
.cta-ticker {
  overflow: hidden;
  width: 100%;
  display: block;
  /* Fade edges: transparent → visible → visible → transparent */
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 12%,
    black 88%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 12%,
    black 88%,
    transparent 100%
  );
}
.cta-ticker__track {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 48px;
  white-space: nowrap;
  animation: marquee 18s linear infinite;
  width: max-content;
  padding: 13px 24px;
}
.cta-ticker__track span {
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255 255 255 / .65);
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (max-width: 600px) {
  .cta-card { padding: 22px 18px; }
  .cta-actions .btn { flex: 1; }
}


/* ── 15. Footer ───────────────────────────────────────────── */
.footer {
  padding-block: 56px 52px;
  border-top: 1px solid rgba(255 255 255 / .08);
  background: #000;
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr .6fr;
  gap: 60px;
}

.footer__brand .kicker { margin-bottom: 10px; }
.footer__brand .h2    { margin-top: 10px; font-weight: 600; }

.footer__links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 48px;
  align-self: start;
  justify-self: end;
}

/* Column heading */
.link-col h4, .link-col__heading {
  margin: 0 0 4px;
  padding-bottom: 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255 255 255 / .40);
  border-bottom: 1px solid rgba(255 255 255 / .08);
}

/* Each link row */
.link-col a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .02em;
  color: rgba(255 255 255 / .65);
  border-bottom: 1px solid rgba(255 255 255 / .05);
  white-space: nowrap;
  transition:
    color var(--dur) var(--ease),
    transform var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
  position: relative;
}
.link-col a:last-child { border-bottom: none; }

/* Hover: slide right via transform so sibling h4 is unaffected */
.link-col a:hover {
  color: var(--accent);
  transform: translateX(6px);
  border-color: rgba(255 255 255 / .08);
}

/* Arrow icon — hidden at rest, fades in on hover */
.link-col__arrow {
  opacity: 0;
  transform: translateX(-4px);
  transition:
    opacity var(--dur) var(--ease),
    transform var(--dur) var(--ease);
  flex-shrink: 0;
  color: var(--accent);
}
.link-col a:hover .link-col__arrow {
  opacity: 1;
  transform: translateX(0);
}

/* Link text */
.link-col__text { flex: 1; }

@media (max-width: 860px) {
  .footer__grid { grid-template-columns: 1fr; gap: 36px; }
  .footer__links { justify-self: start; }
}
@media (max-width: 480px) {
  .footer__links { grid-template-columns: 1fr 1fr; gap: 24px; }
}


/* ── 16. Legal Bar ────────────────────────────────────────── */
.legal-bar {
  background: rgba(var(--accent-rgb) / .08);
  border-top: 1px solid rgba(var(--accent-rgb) / .18);
}
.legal-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding-block: 18px;
  font-size: 12px;
  color: rgba(var(--accent-rgb) / .65);
}
.legal-bar__links {
  display: flex;
  gap: 20px;
}
.legal-bar__links a {
  color: rgba(255 255 255 / .45);
  transition: color var(--dur);
}
.legal-bar__links a:hover { color: rgba(255 255 255 / .85); }


/* ── 17. Scroll Reveal ────────────────────────────────────── */
.reveal {
  opacity: 0;
  transition: opacity .75s var(--ease);
}
.reveal.on { opacity: 1; }


/* ── 18. Interior Page Components ────────────────────────── */

/* Page hero */
.page-hero {
  position: relative;
  padding-block: 140px 70px;
  overflow: hidden;
}
.page-hero .container {
  position: relative;
  z-index: 1;
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: -2px;
  background:
    radial-gradient(900px 460px at 30% 25%, rgba(var(--accent-rgb) / .12), transparent 62%),
    radial-gradient(800px 420px at 80% 10%, rgba(var(--accent-rgb) / .09), transparent 60%),
    linear-gradient(180deg, rgba(255 255 255 / .04), transparent);
}
.page-hero .art {
  position: absolute;
  inset-inline-end: -140px;
  inset-block-start: -140px;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle at 30% 30%, rgba(var(--accent-rgb) / .24), transparent 60%),
    radial-gradient(circle at 70% 60%, rgba(182 255 234 / .18), transparent 62%);
  animation: art-drift 44s ease-in-out infinite;
}
@keyframes art-drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-46px, 28px, 0) scale(1.08); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}
@media (prefers-reduced-motion: reduce) { .page-hero .art { animation: none; } }

.breadcrumb {
  color: rgba(255 255 255 / .55);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 11px;
  margin-bottom: 14px;
}

.page-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 64px;
  align-items: start;
}
@media (max-width: 720px) {
  .page-grid { grid-template-columns: 1fr; }
}

/* Quote card */
.quote {
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: rgba(255 255 255 / .05);
  padding: 20px;
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
}
.quote::before {
  content: "";
  position: absolute;
  inset: -2px;
  background:
    radial-gradient(520px 240px at 30% 30%, rgba(var(--accent-rgb) / .18), transparent 60%),
    radial-gradient(520px 240px at 80% 70%, rgba(182 255 234 / .12), transparent 60%);
}
.quote__mark { font-size: 34px; line-height: 1; color: rgba(var(--accent-rgb) / .9); }
.quote p     { margin: 0; color: rgba(255 255 255 / .78); line-height: 1.75; position: relative; }
.quote__who  { margin-top: 10px; color: rgba(255 255 255 / .60); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; position: relative; }

/* Contact form */
.form { display: grid; gap: 12px; }
.input, textarea {
  width: 100%;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(255 255 255 / .05);
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
  outline: none;
  transition: border-color var(--dur), background var(--dur);
}
textarea { min-height: 140px; resize: vertical; }
.input:focus, textarea:focus {
  border-color: rgba(var(--accent-rgb) / .32);
  background: rgba(255 255 255 / .07);
}
.note { color: rgba(255 255 255 / .55); font-size: 12px; line-height: 1.7; }

/* Split layout */
.split {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 80px;
  align-items: stretch;
}
@media (max-width: 720px) { .split { grid-template-columns: 1fr; } .split .mediaCard { height: 300px; min-height: 300px; } }

/* Media card */
.media-card {
  border-radius: var(--radius-xl);
  border: 1px solid var(--line);
  background: rgba(255 255 255 / .04);
  overflow: hidden;
  position: relative;
  min-height: 320px;
  box-shadow: var(--shadow-lg);
}
.media-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(800px 360px at 25% 20%, rgba(123 220 255 / .16), transparent 60%),
    radial-gradient(700px 340px at 80% 25%, rgba(182 255 234 / .10), transparent 55%),
    linear-gradient(180deg, rgba(255 255 255 / .06), rgba(255 255 255 / .02));
}
.media-card__cap {
  transition: opacity 0.4s ease;
  position: absolute;
  inset-inline-start: 16px;
  inset-block-end: 16px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(0 0 0 / .55);
  color: rgba(255 255 255 / .88);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* Steps */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 18px;
}
.step {
  border-radius: 24px;
  border: 1px solid rgba(255 255 255 / .12);
  background: rgba(255 255 255 / .05);
  padding: 16px;
  position: relative;
  overflow: hidden;
}
.step::before {
  content: "";
  position: absolute;
  inset: -2px;
  background:
    radial-gradient(520px 240px at 30% 20%, rgba(123 220 255 / .14), transparent 60%),
    radial-gradient(520px 240px at 80% 70%, rgba(182 255 234 / .10), transparent 60%);
}
.step .n { position: relative; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: rgba(255 255 255 / .62); }
.step h4  { position: relative; margin: 10px 0 6px; font-size: 16px; }
.step p   { position: relative; margin: 0; color: rgba(255 255 255 / .68); line-height: 1.7; font-size: 14px; }

@media (max-width: 840px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .steps { grid-template-columns: 1fr; } }

/* Accordion */
.accordion {
  margin-top: 18px;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(255 255 255 / .12);
  overflow: hidden;
  background: rgba(255 255 255 / .04);
}
.acc-item { border-top: 1px solid rgba(255 255 255 / .10); }
.acc-item:first-child { border-top: 0; }
.acc-btn {
  width: 100%;
  background: transparent;
  color: var(--text);
  border: 0;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  letter-spacing: .02em;
  font-weight: 750;
  font-size: 15px;
}
.acc-btn i {
  font-style: normal;
  font-size: 20px;
  font-weight: 300;
  line-height: 1;
  transition: transform .25s var(--ease), color .25s var(--ease);
  color: rgba(255 255 255 / .45);
  flex-shrink: 0;
}

.acc-btn:hover {
  color: var(--accent);
}
.acc-btn:hover i {
  color: var(--accent);
  transform: scale(1.2);
}
.acc-item.open .acc-btn {
  color: var(--accent);
}
.acc-item.open .acc-btn i {
  color: var(--accent);
}

.acc-btn span { opacity: .9; }
.acc-btn i {
  width: 34px; height: 34px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--panel);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-style: normal;
  transition: transform var(--dur);
}
.acc-item.open .acc-btn i { transform: rotate(45deg); }
.acc-panel { max-height: 0; overflow: hidden; transition: max-height .35s var(--ease); }
.acc-panel__inner { padding: 0 16px 16px; color: rgba(255 255 255 / .72); line-height: 1.75; font-size: 15px; }

/* Timeline */
.timeline { display: grid; gap: 14px; margin-top: 14px; }
.t-item {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 14px;
  padding: 16px;
  border-radius: var(--radius);
  border: 1px solid rgba(255 255 255 / .12);
  background: rgba(255 255 255 / .05);
}
.t-item__tag {
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255 255 255 / .78);
  padding: 10px;
  border-radius: 999px;
  border: 1px solid rgba(255 255 255 / .14);
  background: rgba(var(--accent-rgb) / .08);
  height: fit-content;
  text-align: center;
}
.t-item h4 { margin: 0; font-size: 16px; }
.t-item p  { margin: 6px 0 0; color: rgba(255 255 255 / .68); line-height: 1.7; }

@media (max-width: 480px) {
  .t-item { grid-template-columns: 1fr; }
}

/* Logo grid */
.logo-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  margin-top: 18px;
}
.logo-cell {
  border-radius: 18px;
  border: 1px solid rgba(255 255 255 / .12);
  background: rgba(255 255 255 / .04);
  padding: 18px 12px;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255 255 255 / .55);
  letter-spacing: .16em;
  text-transform: uppercase;
  font-size: 11px;
  transition: background var(--dur), color var(--dur);
}
.logo-cell:hover { background: rgba(255 255 255 / .06); color: rgba(255 255 255 / .72); }

@media (max-width: 840px) { .logo-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .logo-grid { grid-template-columns: repeat(2, 1fr); } }

/* Sticky sidebar */
.sticky-grid {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 18px;
  align-items: start;
}
.sticky { position: sticky; top: 96px; }

@media (max-width: 720px) {
  .sticky-grid { grid-template-columns: 1fr; }
  .sticky { position: static; }
}

.mini-card {
  border-radius: var(--radius);
  border: 1px solid rgba(255 255 255 / .12);
  background: rgba(255 255 255 / .05);
  padding: 16px;
}
.mini-card h4 { margin: 0 0 10px; font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255 255 255 / .72); }

.kv { display: grid; gap: 10px; }
.kv .row { display: flex; justify-content: space-between; gap: 10px; color: rgba(255 255 255 / .70); font-size: 14px; }
.kv .row b { color: var(--text); font-weight: 750; }

.case-blocks { display: grid; gap: 12px; }
.block {
  border-radius: var(--radius-xl);
  border: 1px solid rgba(255 255 255 / .12);
  background: rgba(255 255 255 / .04);
  overflow: hidden;
  min-height: 220px;
  position: relative;
}
.block__img { position: absolute; inset: 0; background-position: center; background-size: cover; opacity: .40; }
.block__txt { position: relative; padding: 18px; }
.block h3 { margin: 0 0 8px; font-size: 18px; }
.block p  { margin: 0; color: rgba(255 255 255 / .70); line-height: 1.75; }


.shot[style*="background-image"] {
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
.shot[style*="background-image"]::before {
  display: none;
}
.shot::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(800px 360px at 25% 20%, rgba(123 220 255 / .14), transparent 60%),
    radial-gradient(700px 340px at 80% 25%, rgba(182 255 234 / .10), transparent 55%),
    linear-gradient(180deg, rgba(255 255 255 / .06), rgba(255 255 255 / .02));
}
.shot__label {
  position: absolute;
  inset-inline-start: 16px;
  inset-block-end: 16px;
  padding: 9px 11px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(0 0 0 / .55);
  color: rgba(255 255 255 / .85);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.span-4  { grid-column: span 4; }
.span-5  { grid-column: span 5; }
.span-6  { grid-column: span 6; }
.span-7  { grid-column: span 7; }
.span-8  { grid-column: span 8; }
.span-12 { grid-column: span 12; }

@media (max-width: 760px) {
  .span-4, .span-5, .span-6, .span-7, .span-8 { grid-column: span 12; }
}

/* Banner */
.banner {
  border-radius: 30px;
  border: 1px solid rgba(255 255 255 / .12);
  background: linear-gradient(135deg, rgba(123 220 255 / .10), rgba(182 255 234 / .06));
  overflow: hidden;
  position: relative;
  padding: 18px;
}
.banner::before {
  content: "";
  position: absolute; inset: -2px;
  background:
    radial-gradient(520px 240px at 25% 30%, rgba(255 255 255 / .10), transparent 60%),
    radial-gradient(520px 240px at 80% 70%, rgba(123 220 255 / .12), transparent 60%);
}
.banner__inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.banner__title { font-weight: 850; letter-spacing: -.02em; }
.banner__sub   { color: rgba(255 255 255 / .75); }


/* ── 19. Responsive Nav Toggle ────────────────────────────── */
@media (max-width: 980px) {
  .nav__links { display: none; }
  .nav__burger { display: flex; }
}

@media (max-width: 980px) {
  /* Hide Contact button when nav links are hidden — burger takes over */
  .nav__cta .btn--nav-cta { display: none; }
}


/* ── Legacy class aliases (inner page compatibility) ─────────── */

/* Navigation */
.navlinks               { display: flex; align-items: center; gap: 4px; list-style: none; }
.navlinks a             { font-size: 13px; letter-spacing: .13em; text-transform: uppercase; color: rgba(255 255 255 / .72); padding: 9px 12px; border-radius: 999px; transition: background var(--dur), color var(--dur); }
.navlinks a:hover       { background: rgba(255 255 255 / .07); color: rgba(255 255 255 / .95); }
.navlinks a.active      { color: var(--accent); }
.brand                  { display: flex; align-items: center; flex-shrink: 0; }
.brand img              { height: 36px; width: auto; filter: drop-shadow(0 8px 24px rgba(0 0 0 / .35)); }
.navcta                 { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.row                    { display: flex; align-items: center; justify-content: space-between; gap: 18px; }

/* Page hero */
.page-hero, .pageHero   { position: relative; padding-block: 140px 70px; overflow: hidden; }
.page-hero::before,
.pageHero::before       { content: ""; position: absolute; inset: -2px; background: radial-gradient(900px 460px at 30% 25%, rgba(var(--accent-rgb) / .12), transparent 62%), radial-gradient(800px 420px at 80% 10%, rgba(var(--accent-rgb) / .09), transparent 60%), linear-gradient(180deg, rgba(255 255 255 / .04), transparent); }
.pageHero .art,
.page-hero .art         { position: absolute; inset-inline-end: -140px; inset-block-start: -140px; width: 520px; height: 520px; border-radius: 50%; pointer-events: none; z-index: 0; background: radial-gradient(circle at 30% 30%, rgba(var(--accent-rgb) / .24), transparent 60%); animation: art-drift 44s ease-in-out infinite; }
.page-grid, .pageGrid   { display: grid; grid-template-columns: 1.15fr .85fr; gap: 26px; align-items: start; }
@media (max-width: 720px) { .page-grid, .pageGrid { grid-template-columns: 1fr; } }
.hero-actions, .heroActions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }

/* Quote */
.quote .mark, .quote .quote__mark { font-size: 34px; line-height: 1; color: rgba(var(--accent-rgb) / .9); }
.quote .who, .quote .quote__who   { margin-top: 10px; color: rgba(255 255 255 / .60); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; position: relative; }
.quote p { margin: 0; color: rgba(255 255 255 / .78); line-height: 1.75; position: relative; }

/* Media card */
.media-card, .mediaCard { border-radius: var(--radius-xl); border: 1px solid var(--line); background: rgba(255 255 255 / .04); overflow: hidden; position: relative; min-height: 0; height: 100%; box-shadow: var(--shadow-lg); align-self: stretch; }
.media-card::before, .mediaCard::before { content: ""; position: absolute; inset: 0; background: radial-gradient(800px 360px at 25% 20%, rgba(123 220 255 / .16), transparent 60%), radial-gradient(700px 340px at 80% 25%, rgba(182 255 234 / .10), transparent 55%), linear-gradient(180deg, rgba(255 255 255 / .06), rgba(255 255 255 / .02)); }
.media-card__cap, .mediaCard .cap, .cap { position: absolute; inset-inline-start: 16px; inset-block-end: 16px; padding: 10px 12px; border-radius: 999px; border: 1px solid var(--line); background: rgba(0 0 0 / .55); color: rgba(255 255 255 / .88); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.media-card .img, .mediaCard .img { position: absolute; inset: 0; opacity: .42; background-position: center; background-size: cover; }

/* Grid aliases */
.grid-2, .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: stretch; }
@media (max-width: 720px) { .grid-2, .grid2 { grid-template-columns: 1fr; } }

/* Timeline */
.t-item, .tItem { display: grid; grid-template-columns: 90px 1fr; gap: 14px; padding: 16px; border-radius: var(--radius); border: 1px solid rgba(255 255 255 / .12); background: rgba(255 255 255 / .05); }
.t-item__tag, .tTag, .tItem .tTag { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255 255 255 / .78); padding: 10px; border-radius: 999px; border: 1px solid rgba(255 255 255 / .14); background: rgba(var(--accent-rgb) / .08); height: fit-content; text-align: center; }
.t-item h4, .tItem h4 { margin: 0; font-size: 16px; }
.t-item p,  .tItem p  { margin: 6px 0 0; color: rgba(255 255 255 / .68); line-height: 1.7; }
@media (max-width: 480px) { .t-item, .tItem { grid-template-columns: 1fr; } }

/* Accordion aliases */
.acc-item, .accItem     { border-top: 1px solid rgba(255 255 255 / .10); }
.acc-item:first-child, .accItem:first-child { border-top: 0; }
.acc-btn, .accBtn       { width: 100%; background: transparent; color: var(--text); border: 0; padding: 16px; display: flex; align-items: center; justify-content: space-between; letter-spacing: .02em; font-weight: 750; font-size: 15px; cursor: pointer; font-family: inherit; }
.acc-btn i, .accBtn i   { width: 34px; height: 34px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-style: normal; transition: transform var(--dur); }
.acc-panel, .accPanel   { max-height: 0; overflow: hidden; transition: max-height .35s var(--ease); }
.acc-panel__inner, .accPanel .inner { padding: 0 16px 16px; color: rgba(255 255 255 / .72); line-height: 1.75; font-size: 15px; }

/* Sticky grid */
.sticky-grid, .stickyGrid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 18px; align-items: start; }
.sticky { position: sticky; top: 96px; }
@media (max-width: 720px) { .sticky-grid, .stickyGrid { grid-template-columns: 1fr; } .sticky { position: static; } }

/* Mini card */
.mini-card, .miniCard   { border-radius: var(--radius); border: 1px solid rgba(255 255 255 / .12); background: rgba(255 255 255 / .05); padding: 16px; }
.mini-card h4, .miniCard h4 { margin: 0 0 10px; font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255 255 255 / .72); }

/* Case blocks */
.case-blocks, .caseBlocks { display: grid; gap: 12px; }
.block__txt, .block .txt  { position: relative; padding: 18px; }
.block__img, .block .img  { position: absolute; inset: 0; background-position: center; background-size: cover; opacity: .40; }
.block h3 { margin: 0 0 8px; font-size: 18px; }
.block p  { margin: 0; color: rgba(255 255 255 / .70); line-height: 1.75; }

/* Logo grid aliases */
.logo-grid, .logoGrid   { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-top: 18px; }
.logo-cell, .logoCell   { border-radius: 18px; border: 1px solid rgba(255 255 255 / .12); background: rgba(255 255 255 / .04); padding: 18px 12px; display: flex; align-items: center; justify-content: center; color: rgba(255 255 255 / .55); letter-spacing: .16em; text-transform: uppercase; font-size: 11px; transition: background var(--dur), color var(--dur); }
.logo-cell:hover, .logoCell:hover { background: rgba(255 255 255 / .06); color: rgba(255 255 255 / .72); }
@media (max-width: 840px) { .logo-grid, .logoGrid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .logo-grid, .logoGrid { grid-template-columns: repeat(2, 1fr); } }

/* Step number alias */
.step__n, .step .n { position: relative; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: rgba(255 255 255 / .62); }

/* Shot label alias */

/* Footer aliases */
.footgrid               { display: grid; grid-template-columns: 1.6fr .6fr; gap: 60px; }
.subgrid                { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-self: start; }
.linkcol h4             { margin: 0 0 4px; padding-bottom: 12px; font-size: 11px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: rgba(255 255 255 / .40); border-bottom: 1px solid rgba(255 255 255 / .08); }
.linkcol a              { display: flex; align-items: center; justify-content: space-between; padding: 11px 0; font-size: 13px; color: rgba(255 255 255 / .65); border-bottom: 1px solid rgba(255 255 255 / .05); transition: color var(--dur), transform var(--dur); }
.linkcol a:hover        { color: var(--accent); transform: translateX(6px); }
.linkcol a:last-child   { border-bottom: none; }
@media (max-width: 860px) { .footgrid { grid-template-columns: 1fr; gap: 36px; } }

/* Legal bar alias */
.legalBar               { background: rgba(0 0 0 / .22); border-top: 1px solid rgba(255 255 255 / .08); }
.legalBar .container    { padding-top: 18px; padding-bottom: 18px; display: flex; align-items: center; justify-content: space-between; gap: 18px; font-size: 12px; color: rgba(255 255 255 / .62); }
.legalLeft              { font-size: 12px; color: rgba(255 255 255 / .62); }

/* Button alias: .btn.primary = .btn.btn--primary */
.btn.primary            { background: linear-gradient(135deg, rgba(var(--accent-rgb) / .18), rgba(182 255 234 / .12)); border-color: rgba(var(--accent-rgb) / .26); }

/* HR */
.hr { display: none; }

/* ── Footer column headings — slightly larger ──────────────── */
.link-col__heading {
  font-size: 13px !important;
  letter-spacing: .20em;
  color: rgba(255 255 255 / .60) !important;
}

/* ── Card list: dot fills on row hover ─────────────────────── */
.card__list li {
  cursor: default;
}
.card__list li:hover .card__check {
  background: rgba(123 220 255 / .50);
  border-color: rgba(123 220 255 / .60);
  box-shadow: 0 0 6px rgba(123 220 255 / .25);
  transition: background 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease;
}
.card--launch .card__list li:hover .card__check {
  background: rgba(182 255 234 / .50);
  border-color: rgba(182 255 234 / .60);
  box-shadow: 0 0 6px rgba(182 255 234 / .25);
  transition: background 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease;
}

/* ── Slider controls: bottom-right below frame ─────────────── */
/* ── Portfolio slider ────────────────────────────────────────── */
.slider-frame {
  border-radius: var(--radius-xl);
  border: 1px solid rgba(255 255 255 / .12);
  background: #0a0d12;
  overflow: hidden;
  height: 480px;
  position: relative;
  touch-action: pan-y;
  isolation: isolate;          /* own stacking context — scroll-jump fix */
  contain: layout style;       /* isolate layout from rest of page */
}
@media (max-width: 760px) { .slider-frame { height: 240px; } }

.slider-track { position: relative; width: 100%; height: 100%; }

.slide {
  position: absolute;
  inset: 0;
  background: center / cover no-repeat;
  opacity: 0;
  transition: opacity 1.2s ease;
  will-change: opacity;              /* promote to GPU layer */
  transform: translateZ(0);          /* force compositing — iOS scroll-jump fix */
  -webkit-transform: translateZ(0);
}
.slide.active { opacity: 1; }

.slider-arrow {
  background: none;
  border: 1px solid rgba(255 255 255 / .28);
  border-radius: 50%;
  color: rgba(255 255 255 / .60);
  cursor: pointer;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  flex-shrink: 0;
  transition: color .2s, border-color .2s, background .2s, box-shadow .2s;
}

.slider-arrow:hover {
  color: var(--accent);
  border-color: rgba(var(--accent-rgb) / .65);
  background: rgba(var(--accent-rgb) / .08);
  box-shadow: 0 0 12px rgba(var(--accent-rgb) / .25);
}

.slider-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255 255 255 / .35);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background .2s, box-shadow .2s;
}
.slider-dot.active { background: var(--accent); box-shadow: 0 0 6px rgba(var(--accent-rgb) / .50); }

.slider-controls-bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 14px;
}

/* Home page slider controls wrapper */
.mosaic-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: nowrap;
}
.slider-dots {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── mediaCard image fill ────────────────────────────────────── */
.mediaCard__img {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  top: 40%;
  background-position: center;
  background-size: cover;
  opacity: 0.72;
}


/* ── About page: crossfade image rotator ────────────────────── */
.about-slide {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
}
.about-slide--active {
  opacity: 0.72;
}

/* ── Card list bold labels — accent colored per card type ───── */
.card__list li b {
  color: var(--accent);
  font-weight: 700;
  white-space: nowrap;
}
.card--launch .card__list li b {
  color: var(--accent2);
}
.card__text {
  flex: 1;
}

/* ── Home button — small, minimal, distinct from primary nav ── */
.nav__home {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(255 255 255 / .45);
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255 255 255 / .12);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease);
  white-space: nowrap;
}
.nav__home:hover {
  color: var(--accent-home);
  border-color: rgba(123 220 255 / .45);
  background: rgba(123 220 255 / .08);
}
.nav__home svg {
  opacity: .6;
  transition: opacity var(--dur);
}
.nav__home:hover svg { opacity: 1; }

/* Mobile drawer home link */
.mobile-drawer__home {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 14px;
  border-radius: 16px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255 255 255 / .90);
  border: none;
  margin: 4px 10px 0;
  background: rgba(255 255 255 / .07);
  transition: background var(--dur);
  text-decoration: none;
}

.mobile-drawer__home:hover,
.mobile-drawer__home:focus {
  background: rgba(255 255 255 / .12);
  color: #fff;
}

.mobile-drawer__home svg {
  opacity: 1;
  flex-shrink: 0;
}


/* ── Global hero heading / lead spacing ─────────────────────── */
.page-hero .h1 { margin-top: 12px; }
.page-hero .p.lead { margin-top: 18px; }
.page-hero .heroActions { margin-top: 28px; }

/* ═══════════════════════════════════════════════════════════════
   BRAND SHOWCASE
   ═══════════════════════════════════════════════════════════════ */

.brand-showcase { padding-block: clamp(32px, 4vw, 48px) clamp(48px, 6vw, 80px); }
.brand-showcase__header { margin-bottom: 56px; }

/* Tabs */
.brand-tabs {
  display: flex;
  gap: 0;
  border-bottom: none;
  overflow-x: auto;
  scrollbar-width: none;
  margin-bottom: 0;
}
.brand-tabs::-webkit-scrollbar { display: none; }
.brand-tab {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 28px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  color: rgba(255 255 255 / .38);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: color .25s;
}
.brand-tab:hover  { color: rgba(255 255 255 / .72); }
.brand-tab.active { color: #fff; border-bottom-color: transparent; }
.brand-tab__num   { font-size: 10px; opacity: .45; font-weight: 400; }
.brand-tab.active .brand-tab__num { opacity: 1; color: var(--accent); }

/* Panel wrap — fixed-height positioning context, never changes size */
#brand-panel-wrap {
  position: relative;
  height: 560px;
  margin-top: 0;
  overflow: visible;
  border-radius: 28px;
}

#brand-panel-wrap .brand-panel {
  overflow: hidden;
  border-radius: 28px;
}

/* Panels — always absolutely stacked inside the wrap */
.brand-panel {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid rgba(255 255 255 / .08);
  opacity: 0;
  pointer-events: none;
}
.brand-panel:first-child { opacity: 1; pointer-events: auto; }

/* Image side — fills its grid cell completely */
.brand-panel__img {
  position: relative;
  overflow: hidden;
}
.brand-panel__img-inner {
  position: absolute;
  inset: 0;
  background: center / cover no-repeat;
  transition: opacity .5s ease;
}

/* Photo sub-slider dots */
.img-dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  align-items: center;
  z-index: 3;
  background: rgba(0 0 0 / .60);
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255 255 255 / .15);
  opacity: 0.55;
  transition: opacity .25s ease;
}
.brand-panel__img:hover .img-dots {
  opacity: 1;
}
.img-dot {
  width: 13px; height: 13px;
  border-radius: 50%;
  background: rgba(255 255 255 / .22);
  border: 1px solid rgba(var(--accent-rgb) / .50);
  cursor: pointer;
  padding: 0;
  transition: background .25s, transform .25s, box-shadow .25s;
}

.img-dot.active {
  background: rgba(var(--accent-rgb) / .55);
  border-color: rgba(var(--accent-rgb) / .90);
  transform: scale(1.2);
  box-shadow: 0 0 8px rgba(var(--accent-rgb) / .55);
}

.img-dot:hover:not(.active) {
  background: rgba(var(--accent-rgb) / .30);
  border-color: rgba(var(--accent-rgb) / .70);
  transform: scale(1.15);
}
.brand-panel__tag {
  position: absolute;
  top: 20px; left: 20px; z-index: 2;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(0 0 0 / .60);
  border: 1px solid rgba(255 255 255 / .15);
  font-size: 10px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255 255 255 / .8);
}
.brand-panel__category {
  position: absolute;
  bottom: 20px; left: 20px; z-index: 2;
  font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255 255 255 / .5);
}

/* Info side */
.brand-panel__info {
  background: rgba(255 255 255 / .03);
  padding: 40px 40px 32px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.brand-panel__top-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 12px;
}
.brand-panel__brand {
  font-size: 11px; font-weight: 600;
  letter-spacing: .20em; text-transform: uppercase;
  color: var(--accent);
}
.brand-panel__counter {
  font-size: 11px; letter-spacing: .12em;
  color: rgba(255 255 255 / .30);
}
.brand-panel__counter-num { font-weight: 700; color: var(--accent); }
.brand-panel__name {
  font-size: clamp(22px, 2.4vw, 34px);
  font-weight: 700; line-height: 1.1;
  letter-spacing: -.02em; color: #fff;
  margin-top: 20px;
  margin-bottom: 16px;
}
.brand-panel__desc {
  font-size: 14px; line-height: 1.7;
  color: rgba(255 255 255 / .58);
  margin-bottom: 28px; flex: 1;
}
/* Structured copy blocks inside panel */
.brand-panel__copy-block {
  font-size: 13.5px;
  line-height: 1.65;
  color: rgba(255 255 255 / .72);
  margin-bottom: 14px;
}
.brand-panel__copy-label {
  font-weight: 700;
  color: var(--accent);
  margin-right: 4px;
}

/* Services bar — below the card */
.brand-svc-bar {
  display: none;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 28px;
  padding: 0 4px;
}
.brand-svc-bar.active { display: flex; }
.brand-svc-bar__label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255 255 255 / .28);
  margin-right: 4px;
}
.svc-chip {
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(var(--accent-rgb) / .25);
  background: rgba(var(--accent-rgb) / .07);
  color: rgba(var(--accent-rgb) / .9);
  font-size: 11px; font-weight: 500;
  letter-spacing: .08em; white-space: nowrap;
  transition: background .2s;
}
.svc-chip:hover { background: rgba(var(--accent-rgb) / .15); }
.brand-panel__cta {
  display: flex; align-items: center;
  justify-content: flex-end; gap: 16px;
  margin-top: auto;
  padding-top: 16px;
}
.brand-panel__arrows { display: flex; gap: 8px; }

/* Arrow buttons */
.brand-nav__btn {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(var(--accent-rgb) / .40);
  background: rgba(var(--accent-rgb) / .07);
  color: rgba(255 255 255 / .80);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .2s, border-color .2s, color .2s, box-shadow .2s;
}
.brand-nav__btn:hover {
  background: rgba(var(--accent-rgb) / .18);
  border-color: rgba(var(--accent-rgb) / .75);
  color: var(--accent);
  box-shadow: 0 0 14px rgba(var(--accent-rgb) / .28);
}

@media (max-width: 768px) {
  /* Hero — prevent nav overlap on mobile */
  .page-hero { padding-block: 80px 60px; z-index: 10; }
  /* Quote hidden on mobile — reduces hero height, prevents overlap with next section */
  .page-hero .quote { display: none; }
  /* Video hero — ensure enough height for the video to read on mobile */
  .page-hero--video { overflow: visible; min-height: 60svh; }
  .page-hero--video .video-hero-wrap { position: absolute; inset: 0; overflow: hidden; }
  .page-hero--video .mobile-hero-img { overflow: hidden; }
  .hero-inner {
  position: relative;
  z-index: 3; padding-block-start: 100px; }

  /* Brand panel — switch to flow layout on mobile so height is natural */
  #brand-panel-wrap {
    height: auto;
  }
  .brand-panel {
    position: relative;
    inset: auto;
    grid-template-columns: 1fr;
    display: none;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  .brand-panel.active-mobile {
    display: grid !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  .brand-panel__img {
    height: 260px;
    position: relative;
  }
  .brand-panel__img-inner {
    position: absolute;
    inset: 0;
  }
  .brand-panel__info { padding: 24px; }
  .brand-tab { padding: 12px 16px; font-size: 13px; }
  .brand-tab__num { display: none; }
}

/* ── Phases of Development — connected timeline ──────────── */
.phase-track {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  position: relative;
  margin-top: 48px;
  align-items: start;
}

.phase-item {
  display: grid;
  /* Row 1: circle, Row 2: content block, Row 3: bullets pinned to same baseline */
  grid-template-rows: 56px auto 1fr;
  grid-template-columns: 1fr;
  align-items: start;
  position: relative;
}
/* Explicit grid row placement */
.phase-body  { grid-row: 2; }
.phase-list  { grid-row: 3; align-self: start; margin-top: 14px; }

/* Circle occupies row 1 */

/* Body (label + title + desc) occupies row 2 */
.phase-body { grid-row: 2; padding-top: 16px; }

/* Bullets (card__list) occupy row 3 — pinned to same line across all 4 columns */
.phase-item .card__list { grid-row: 3; align-self: start; }


/* Arrow sits at the end of the line, before the next circle */
.phase-arrow {
  position: absolute;
  top: 18px;
  right: 10px;  /* sits just inside the 14px gap */
  z-index: 2;
  color: rgba(253 142 1 / .60);
  pointer-events: none;
}


.phase-body {
  padding-right: 20px;
  padding-top: 16px;
}
.phase-item:last-child .phase-body { padding-right: 0; }


.phase-title {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 10px;
  color: rgba(255 255 255 / .95);
}

.phase-desc {
  font-size: 14px;
  line-height: 1.75;
  color: rgba(255 255 255 / .65);
  margin: 0 0 16px;
}

/* Phase bullets — reuse card__list in grid row 3 */
.phase-item .card__list { grid-row: 3; align-self: start; margin-top: 0; padding-right: 20px; }
.phase-item:last-child .card__list { padding-right: 0; }

@media (max-width: 860px) {
  .phase-track {
    grid-template-columns: 1fr !important;
    gap: 48px;
  }
  .phase-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .phase-item::after { display: none; }
  .phase-arrow { display: none; }
  .phase-num {
    width: 72px;
    height: 72px;
    font-size: 18px;
  }
  .phase-label {
    font-size: 11px;
    margin-top: 0;
  }
  .phase-body {
    padding-right: 0;
    width: 100%;
  }
  .phase-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
}

@media (max-width: 500px) {
  .phase-track { grid-template-columns: 1fr; gap: 28px; }
  .phase-num { width: 44px; height: 44px; font-size: 12px; }
  .phase-label { font-size: 9px; }
  .phase-list { font-size: 13px; }
}

/* ── Mobile card grids ──────────────────────────────────── */
@media (max-width: 640px) {
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: 1fr !important;
  }
  [style*="grid-template-columns:repeat(2,1fr)"],
  [style*="grid-template-columns: repeat(2, 1fr)"] {
    grid-template-columns: 1fr !important;
  }
  /* Accordion buttons full width */
  .acc-btn { font-size: 14px; padding: 14px 16px; }
  /* Quote block stacks below hero text on mobile */
  .quote { margin-top: 24px; }
  /* CTA actions stack */
  .cta-actions { flex-direction: column; gap: 10px; }
  .cta-actions .btn { width: 100%; text-align: center; }
}
/* Phase number circle used inside cards */
.phase-title {
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 10px;
  color: rgba(255 255 255 / .95);
}
.phase-desc {
  font-size: 14px;
  line-height: 1.75;
  color: rgba(255 255 255 / .62);
  margin: 0;
}
/* Arrow between phase cards */
.phase-arrow-right {
  position: absolute;
  right: -10px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  display: flex;
  align-items: center;
}
@media (max-width: 860px) {
  .phase-arrow-right { display: none; }
}
@media (max-width: 500px) {
  [style*="repeat(4,1fr)"] { grid-template-columns: 1fr !important; }
}

/* ── Phase bullet list ──────────────────────────────────────── */
.phase-list {
  list-style: none;
  padding: 0;
  margin: 14px 0 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.phase-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: rgba(255 255 255 / .72);
  padding: 6px 4px;
  background: transparent;
  border: none;
  cursor: default;
  transition: color .2s ease;
}
.phase-list li::before {
  content: '';
  width: 18px;
  height: 18px;
  min-width: 18px;
  border-radius: 50%;
  border: 1px solid rgba(253 142 1 / .35);
  background: rgba(253 142 1 / .08);
  flex-shrink: 0;
  transition: background .5s ease, border-color .5s ease, box-shadow .5s ease;
}
.phase-list li:hover {
  color: #fd8e01;
}
.phase-list li:hover::before {
  background: rgba(253 142 1 / .50);
  border-color: rgba(253 142 1 / .70);
  box-shadow: 0 0 8px rgba(253 142 1 / .35);
}

/* ── Phase numbered circles ─────────────────────────────────── */
.phase-num {
  position: relative;
  z-index: 1;
  grid-row: 1;
  align-self: start;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid rgba(253 142 1 / .45);
  background: linear-gradient(135deg, rgba(253 142 1 / .14), rgba(7 10 15 / .65));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  color: #fd8e01;
  flex-shrink: 0;
  box-shadow: 0 0 24px rgba(253 142 1 / .18), inset 0 1px 0 rgba(255 255 255 / .08);
}

/* ── Phase labels (DEFINE / DEVELOP / PRODUCE / LAUNCH) ─────── */
.phase-label {
  font-size: 11px;
  letter-spacing: .20em;
  text-transform: uppercase;
  color: #fd8e01;
  margin-bottom: 6px;
}

/* ── Connector line — centered to 56px circle (top = 28px) ──── */
.phase-item:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 28px;
  left: 70px;
  right: 14px;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(253 142 1 / .50),
    rgba(253 142 1 / .25) 60%,
    rgba(253 142 1 / .10)
  );
}


main { isolation: isolate; }

/* Home button highlights in home accent color on all pages */
body.page-index .nav__home {
  color: var(--accent-home);
  border-color: rgba(123 220 255 / .40);
  background: rgba(123 220 255 / .07);
}

/* Portfolio page — card bullets use portfolio accent */
body.page-portfolio .card__check {
  border-color: rgba(254 216 53 / .40);
  background: rgba(254 216 53 / .08);
}
body.page-portfolio .card__list li:hover .card__check {
  background: rgba(254 216 53 / .50);
  border-color: rgba(254 216 53 / .70);
  box-shadow: 0 0 6px rgba(254 216 53 / .30);
}
body.page-portfolio .card__list li:hover {
  color: #fed835;
}
body.page-portfolio .card--build::before {
  background: radial-gradient(500px 300px at 0% 0%, rgba(254 216 53 / .07), transparent 65%);
}
body.page-portfolio .card__badge { color: var(--accent); }
body.page-portfolio .card__step { color: var(--accent); opacity: .6; }

/* ── Footer mobile compact ─────────────────────────────── */
@media (max-width: 640px) {
  .footer__grid { gap: 28px; }
  .footer__links { flex-direction: row; gap: 28px; flex-wrap: wrap; }
  .link-col { flex: 1 1 120px; }
  .link-col h4 { font-size: 10px; letter-spacing: .14em; margin-bottom: 6px; }
  .link-col a { padding-block: 3px 3px; font-size: 13px; gap: 4px; }
  .link-col__arrow { display: none; }
  .legal-bar__inner { flex-direction: column; gap: 8px; text-align: center; }
  .legal-bar__links { justify-content: center; gap: 14px; }
}

/* ── Legal pages (privacy, terms) ─────────────────────────── */
body.page-privacy,
body.page-terms {
  --accent: #c8cdd6;
  --accent-rgb: 200 205 214;
}
.legal-content {
  max-width: 780px;
  margin: 0 auto;
  padding-block: 60px 100px;
}
.legal-content h2 {
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 700;
  color: rgba(255 255 255 / .92);
  margin: 40px 0 12px;
  padding-top: 20px;
  border-top: 1px solid rgba(200 205 214 / .15);
}
.legal-content h2:first-child { border-top: none; margin-top: 0; }
.legal-content p {
  font-size: 15px;
  line-height: 1.8;
  color: rgba(255 255 255 / .65);
  margin: 0 0 14px;
}
.legal-content ul {
  margin: 8px 0 16px 0;
  padding-left: 20px;
  list-style: disc;
}
.legal-content ul li {
  font-size: 15px;
  line-height: 1.75;
  color: rgba(255 255 255 / .60);
  margin-bottom: 6px;
}
.legal-content a {
  color: rgba(200 205 214 / .85);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.legal-content a:hover { color: #fff; }
.legal-effective {
  display: inline-block;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(200 205 214 / .55);
  margin-bottom: 32px;
}

/* ── Contact page — card bullets use contact accent ───────────── */
body.page-contact .card__check {
  border-color: rgba(247 216 184 / .45);
  background: rgba(247 216 184 / .10);
}
body.page-contact .card__list li:hover .card__check {
  background: rgba(247 216 184 / .45);
  border-color: rgba(247 216 184 / .70);
  box-shadow: 0 0 6px rgba(247 216 184 / .30);
}
body.page-contact .card__list li:hover {
  color: #f7d8b8;
}

/* ── Home page video hero system ────────────────────────────────────
   Activated by adding class "block-hero--video" to the .block-hero section.
   When NOT active, .home-video-wrap is hidden and the particle canvas shows normally.
   When ACTIVE, the canvas hides and video fills the hero behind all text content.
   Height is constrained to match inner page heroes.
   ─────────────────────────────────────────────────────────────────── */

/* Video containers: hidden by default */
.home-video-wrap,
.home-mobile-hero-img {
  display: none;
}

/* When video mode is active */
.block-hero--video {
  min-height: 680px;
}

/* Hide particle canvas when video is active */
.block-hero--video .hero-canvas {
  display: none;
}

/* Video wrap fills hero absolutely behind content */
.block-hero--video .home-video-wrap {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
}

.home-hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Accent tint overlay -- uses home accent color */
.home-video-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(var(--accent-home-rgb), .14) 0%,
    rgba(7, 10, 15, .82) 50%,
    rgba(7, 10, 15, .94) 100%
  );
  z-index: 1;
}

/* Extra darkening layer — desktop only */
.home-video-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(7, 10, 15, .45);
}

/* Bottom fade -- dissolves video into page background */
.home-video-fade {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 420px;
  background: linear-gradient(to bottom,
    transparent 0%,
    rgba(7, 10, 15, .25) 25%,
    rgba(7, 10, 15, .60) 50%,
    rgba(7, 10, 15, .88) 72%,
    #070a0f 100%);
  z-index: 2;
  pointer-events: none;
}

/* Mobile fallback image */
.home-mobile-hero-img {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.home-mobile-hero-img img {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.home-mobile-hero-img::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(7, 10, 15, .55) 0%, transparent 40%),
    linear-gradient(135deg, rgba(var(--accent-home-rgb), .45) 0%, rgba(7, 10, 15, .72) 50%, rgba(7, 10, 15, .88) 100%);
  z-index: 1;
}
.home-mobile-hero-img::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 320px;
  background: linear-gradient(to bottom,
    transparent 0%,
    rgba(7, 10, 15, .25) 25%,
    rgba(7, 10, 15, .62) 52%,
    rgba(7, 10, 15, .90) 74%,
    #070a0f 100%);
  z-index: 2;
  pointer-events: none;
}

/* Switch: hide video on tablet/mobile.
   Particle canvas shows by default (no mobile image set).
   If a mobile image IS provided, it shows instead and canvas hides.
   DOM order: .home-mobile-hero-img comes before .hero-canvas, so ~ works. */
@media (max-width: 1024px) {
  /* Video plays on mobile — keep home-video-wrap visible */
  /* Remove extra darkening layer — desktop only */
  .home-video-overlay::after { display: none; }
}

/* ── Unified page video hero system ─────────────────────────────── */
.page-hero--video {
  overflow: hidden;
}

/* video wrap fills entire hero absolutely behind content */
.video-hero-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.page-hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* accent tint — pulls from each page's --accent-rgb variable */
.video-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(var(--accent-rgb), .28) 0%,
    rgba(7, 10, 15, .62) 50%,
    rgba(7, 10, 15, .82) 100%
  );
  z-index: 1;
}

/* bottom fade — dissolves into page bg, no hard edge */
.video-hero-fade {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 420px;
  background: linear-gradient(to bottom,
    transparent 0%,
    rgba(7, 10, 15, .25) 25%,
    rgba(7, 10, 15, .60) 50%,
    rgba(7, 10, 15, .88) 72%,
    #070a0f 100%);
  z-index: 2;
  pointer-events: none;
}

/* art blob — hidden when video hero is active on desktop */
.page-hero--video .art { display: none; }

/* ── Mobile fallback image hero ─────────────────────────────────
   Pure CSS media query — no JS dependency.
   On touch/mobile screens: video-hero-wrap hides, mobile-hero-img shows.
   The image fills the full hero with the same overlay + fade as the video. */

.mobile-hero-img {
  display: none;               /* hidden by default (desktop shows video) */
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  inset: 0;
  z-index: 1;
}
.mobile-hero-img img {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* Same accent tint overlay as desktop video */
.mobile-hero-img::before {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(7, 10, 15, .55) 0%, transparent 40%),
    linear-gradient(135deg, rgba(var(--accent-rgb), .45) 0%, rgba(7, 10, 15, .72) 50%, rgba(7, 10, 15, .88) 100%);
  z-index: 1;
}

/* Same bottom fade as desktop video */
.mobile-hero-img::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 320px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(7, 10, 15, .25) 25%,
    rgba(7, 10, 15, .62) 52%,
    rgba(7, 10, 15, .90) 74%,
    #070a0f 100%
  );
  z-index: 2;
  pointer-events: none;
}

/* ── Switch video → image on mobile/tablet (pure CSS, no JS) ─── */
/* Video plays on all screen sizes — mobile image fallback not used */

/* ── is-mobile class still supported for JS-driven fallback ─── */
/* .is-mobile fallback disabled — video plays on mobile */

/* ── Provenance section — About page ────────────────────────────── */
.provenance-card {
  position: relative;
  border: 1px solid rgba(var(--accent-rgb) / .28);
  border-radius: var(--radius-lg);
  background: rgba(var(--accent-rgb) / .03);
  box-shadow: 0 0 80px rgba(var(--accent-rgb) / .06), var(--shadow-md);
  animation: provenance-pulse 5s ease-in-out infinite;
}

@keyframes provenance-pulse {
  0%, 100% { box-shadow: 0 0 80px rgba(var(--accent-rgb) / .06), var(--shadow-md); }
  50%       { box-shadow: 0 0 120px rgba(var(--accent-rgb) / .14), var(--shadow-md); }
}

/* left accent bar */
.provenance-card__accent { display: none; }

@keyframes provenance-bar {
  0%, 100% { opacity: .5; }
  50%       { opacity: 1; }
}

.provenance-card__inner {
  padding: clamp(32px, 4vw, 56px);
}

.provenance-card__body {
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.85;
  color: rgba(255 255 255 / .72);
  max-width: 860px;
  margin: 0 0 32px;
}

.provenance-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.provenance-card__tags span {
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(var(--accent-rgb) / .75);
  border: 1px solid rgba(var(--accent-rgb) / .25);
  background: rgba(var(--accent-rgb) / .06);
  padding: 5px 14px;
  border-radius: 999px;
}

@media (max-width: 640px) {
  .provenance-card__body { font-size: 15px; }
}



.slider-arrow svg { width: 16px; height: 16px; }

/* ── Brand tabs mobile: horizontal scroll with visible names ─────── */
@media (max-width: 768px) {
  .brand-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 6px;
    padding: 0 4px 10px;
    flex-wrap: nowrap;
    /* fade right edge to hint scroll */
    -webkit-mask-image: linear-gradient(to right, black 80%, transparent 100%);
    mask-image: linear-gradient(to right, black 80%, transparent 100%);
  }

  .brand-tab {
    flex-shrink: 0;
    padding: 10px 16px;
    font-size: 11px;
    border: 1px solid rgba(255 255 255 / .14);
    border-radius: 999px;
    background: rgba(255 255 255 / .04);
    white-space: nowrap;
    color: rgba(255 255 255 / .60);
  }

  .brand-tab.active {
    color: var(--accent);
    border-color: rgba(var(--accent-rgb) / .50);
    background: rgba(var(--accent-rgb) / .08);
  }

  .brand-tab__num { display: inline; opacity: .5; }
}


/* ── About page — mobile hero bottom overlap fix ─────────────────── */
@media (max-width: 768px) {
  .page-about .page-hero {
    padding-block-end: 80px;
  }
}

/* ── Mobile video sizing ─────────────────────────────────────────
   Ensure hero videos fill the section height correctly on mobile.
   object-position shifts toward center-top so the most visually
   important part of landscape footage shows in portrait viewports. */
@media (max-width: 768px) {
  .page-hero--video .video-hero-wrap { position: absolute; inset: 0; }
  .page-hero__video { object-position: center 20%; }
  /* Slightly boost overlay opacity on mobile — smaller screen, brighter ambient light */
  .video-hero-overlay { background: linear-gradient(135deg, rgba(var(--accent-rgb), .20) 0%, rgba(7, 10, 15, .72) 50%, rgba(7, 10, 15, .90) 100%); }
}

@media (max-width: 480px) {
  /* On very small phones give the hero a taller minimum so the video breathes */
  .page-hero--video { min-height: 70svh; }
  .page-hero__video { object-position: center 15%; }
  /* Home hero video — pull focus upward on portrait phones */
  .home-hero__video { object-position: center 20%; }
}