/* Font loading moved to <link rel="preconnect"/"stylesheet"> in each
   HTML <head> — avoids the @import waterfall (HTML → CSS → fonts.googleapis
   → fonts.gstatic, two extra round trips) that was the main cause of the
   slow first paint. Space Grotesk also dropped: --font-display is now the
   system stack (-apple-system…), a zero-network-cost font, since it's no
   longer used anywhere except one SVG letter (moved to system stack too). */

/* ===================================================================
   PREMIUM MOTION LAYER — additive rules for hero photography,
   scroll parallax, magnetic buttons, and a photo-led verticals
   showcase. Sits on top of the existing design system below.
=================================================================== */

/* ===================================================================
   BELLORA GLOBAL TRADING FZCO — DESIGN SYSTEM
   Palette: deep navy-charcoal base, electric blue brand accent,
   five distinct vertical accent colors used across the "orbit" wheel.
   Type: Space Grotesk (display) / Inter (body) / IBM Plex Mono (labels)
=================================================================== */

:root{
  /* base surfaces — Apple-style light, off-white ground */
  --bg: #fbfbfd;
  --bg-alt: #f5f5f7;
  --surface: #ffffff;
  --surface-2: #f5f5f7;
  --border: rgba(0,0,0,0.08);
  --border-strong: rgba(0,0,0,0.14);

  /* ink — near-black, Apple-style, never pure #000 */
  --ink: #1d1d1f;
  --ink-dim: #6e6e73;
  --ink-faint: #86868b;

  /* brand — gold matches the real Bellora Global logo */
  --accent: #a9791f;
  --accent-2: #c9a24b;
  --accent-soft: rgba(169,121,31,0.10);
  --gold: #a9791f;

  /* vertical palette (the five "shares" of the wheel), deepened for contrast on white */
  --v-footwear: #a9791f;
  --v-printing: #2a63d6;
  --v-hospitality: #d1452f;
  --v-advertising: #8b4fc9;
  --v-consultation: #1f9c86;

  /* default vertical accent (overridden per-page via body[data-vertical]) */
  --v-accent: var(--accent);
  --v-accent-soft: var(--accent-soft);

  /* type — Apple-style system stack for display, Inter for body */
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", sans-serif;

  --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", sans-serif;

  --font-mono: "IBM Plex Mono", monospace;

  /* layout */
  --container: 1180px;
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 26px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

body[data-vertical="footwear"]      { --v-accent: var(--v-footwear);      --v-accent-soft: rgba(169,121,31,0.10); }
body[data-vertical="printing"]      { --v-accent: var(--v-printing);      --v-accent-soft: rgba(42,99,214,0.10); }
body[data-vertical="hospitality"]   { --v-accent: var(--v-hospitality);   --v-accent-soft: rgba(209,69,47,0.10); }
body[data-vertical="advertising"]   { --v-accent: var(--v-advertising);   --v-accent-soft: rgba(139,79,201,0.10); }
body[data-vertical="consultation"]  { --v-accent: var(--v-consultation);  --v-accent-soft: rgba(31,156,134,0.10); }

/* ---------- reset ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}
body{
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
ul{ list-style: none; margin: 0; padding: 0; }
h1,h2,h3,h4{ font-family: var(--font-display); font-weight: 600; margin: 0; letter-spacing: -0.01em; }
p{ margin: 0; }
button{ font-family: inherit; }

::selection{ background: var(--v-accent); color: #fff; }

:focus-visible{
  outline: 2px solid var(--v-accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- background atmosphere ---------- */
.bg-field{
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(60% 50% at 15% 0%, rgba(61,126,255,0.12), transparent 60%),
    radial-gradient(50% 45% at 90% 15%, var(--v-accent-soft), transparent 60%),
    var(--bg);
  transition: background 0.6s var(--ease);
}
.bg-grain{
  position: fixed;
  inset: 0;
  z-index: -1;
  opacity: 0.035;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- layout helpers ---------- */
.container{
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 24px;
}
@media (max-width: 480px){
  .container{ padding-inline: 18px; }
}
.section{ padding-block: clamp(64px, 10vw, 128px); position: relative; }
.section-head{
  max-width: 640px;
  margin-bottom: clamp(36px, 6vw, 64px);
}
.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--v-accent);
  margin-bottom: 14px;
}
.eyebrow::before{
  content: "";
  width: 18px;
  height: 1px;
  background: var(--v-accent);
}
h2.h-lg{ font-size: clamp(30px, 4.4vw, 48px); line-height: 1.08; }
.lede{ color: var(--ink-dim); font-size: clamp(15px, 1.6vw, 18px); max-width: 56ch; margin-top: 16px; }

/* ---------- buttons ---------- */
.btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 24px;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.35s var(--ease), background 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease), box-shadow 0.3s var(--ease);
  white-space: nowrap;
}
/* Glassmorphic CTAs — frosted glass with inner-edge refraction, not flat fill */
.btn-primary{
  background: color-mix(in srgb, var(--v-accent) 78%, transparent);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border-color: color-mix(in srgb, var(--v-accent) 90%, white 10%);
  color: #060911;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.45),
    inset 0 -1px 0 rgba(0,0,0,0.06),
    0 8px 20px -10px color-mix(in srgb, var(--v-accent) 55%, transparent);
}
.btn-primary:hover{ transform: translateY(-2px); background: color-mix(in srgb, var(--v-accent) 88%, transparent); }
.btn-primary:active{ transform: translateY(-1px) scale(0.98); }
.btn-ghost{
  background: rgba(255,255,255,0.5);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border-color: rgba(0,0,0,0.10);
  color: var(--ink);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.7),
    0 8px 20px -12px rgba(0,0,0,0.14);
}
.btn-ghost:hover{ border-color: var(--v-accent); color: var(--v-accent); transform: translateY(-2px); background: rgba(255,255,255,0.68); }
.btn-ghost:active{ transform: translateY(-1px) scale(0.98); }
.btn-sm{ padding: 9px 18px; font-size: 13px; }
.btn svg{ width: 15px; height: 15px; transition: transform 0.3s var(--ease); }
.btn:hover svg{ transform: translate(3px,-3px); }

/* ---------- header ---------- */
.site-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 20px 0;
  transition: padding 0.4s var(--ease), background 0.4s var(--ease), border-color 0.4s var(--ease), backdrop-filter 0.4s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled{
  padding: 13px 0;
  background: rgba(251,251,253,0.78);
  box-shadow: 0 1px 0 rgba(0,0,0,0.04);
  backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid var(--border);
}
.site-header .container{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  max-width: 1400px;
}
.brand{
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: 0.01em;
  flex-shrink: 0;
}
.brand-mark{
  width: 34px; height: 34px;
  border-radius: 9px;
  background: conic-gradient(from 200deg, var(--v-footwear), var(--v-printing), var(--v-hospitality), var(--v-advertising), var(--v-consultation), var(--v-footwear));
  display: grid;
  place-items: center;
  flex-shrink: 0;
  position: relative;
}
.brand-mark::after{
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 5px;
  background: var(--bg);
}
.brand span.brand-sub{
  display: block;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  color: var(--ink-faint);
  font-weight: 500;
  text-transform: uppercase;
  margin-top: 1px;
}
.main-nav{ display: flex; align-items: center; gap: 2px; flex-shrink: 1; min-width: 0; }
.main-nav a{
  padding: 8px 12px;
  font-size: 13.5px;
  color: var(--ink-dim);
  border-radius: 999px;
  white-space: nowrap;
  transition: color 0.25s var(--ease), background 0.25s var(--ease);
  position: relative;
}
.main-nav a:hover{ color: var(--ink); background: rgba(0,0,0,0.045); }
.main-nav a.is-active{ color: var(--ink); }
.header-cta{ display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.nav-toggle{
  display: none;
  width: 40px; height: 40px;
  border-radius: 10px;
  border: 1px solid var(--border-strong);
  background: rgba(0,0,0,0.035);
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.nav-toggle span{
  display: block; width: 16px; height: 1.5px; background: var(--ink);
  position: relative;
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}
.nav-toggle span::before, .nav-toggle span::after{
  content: ""; position: absolute; left: 0; width: 16px; height: 1.5px; background: var(--ink);
  transition: transform 0.3s var(--ease), top 0.3s var(--ease);
}
.nav-toggle span::before{ top: -5px; }
.nav-toggle span::after{ top: 5px; }
body.nav-open .nav-toggle span{ background: transparent; }
body.nav-open .nav-toggle span::before{ top: 0; transform: rotate(45deg); }
body.nav-open .nav-toggle span::after{ top: 0; transform: rotate(-45deg); }

@media (max-width: 1360px){
  .main-nav{
    position: fixed; inset: 0 0 0 auto;
    width: min(320px, 80vw);
    height: 100vh;
    background: var(--bg-alt);
    border-left: 1px solid var(--border);
    flex-direction: column;
    align-items: stretch;
    padding: 100px 28px 40px;
    gap: 4px;
    transform: translateX(100%);
    transition: transform 0.45s var(--ease);
  }
  body.nav-open .main-nav{ transform: translateX(0); }
  .main-nav a{ padding: 14px 6px; font-size: 16px; border-radius: 0; border-bottom: 1px solid var(--border); white-space: normal; }
  .nav-toggle{ display: grid; }
  .header-cta .btn-ghost{ display: none; }
}

/* ---------- footer ---------- */
.site-footer{
  border-top: 1px solid var(--border);
  padding-block: 56px 28px;
  margin-top: 40px;
}
.footer-grid{
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.1fr;
  gap: 40px;
  padding-bottom: 40px;
}
.footer-col h4{
  font-size: 12.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 18px;
  font-family: var(--font-mono);
  font-weight: 500;
}
.footer-col p, .footer-col a{
  color: var(--ink-dim);
  font-size: 14.5px;
  display: block;
  margin-bottom: 10px;
  transition: color 0.25s var(--ease);
}
.footer-col a:hover{ color: var(--v-accent); }
.footer-brand p{ max-width: 32ch; color: var(--ink-dim); margin-top: 14px; }
.footer-bottom{
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 24px; border-top: 1px solid var(--border);
  font-size: 13px; color: var(--ink-faint); flex-wrap: wrap; gap: 10px;
}
@media (max-width: 760px){
  .footer-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
  .footer-grid{ grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom{ flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* ---------- reveal-on-scroll ---------- */
[data-reveal]{
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
[data-reveal].in-view{ opacity: 1; transform: translateY(0); }
[data-reveal="stagger"] > *{
  opacity: 0; transform: translateY(20px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
[data-reveal="stagger"].in-view > *{ opacity: 1; transform: translateY(0); }
[data-reveal="stagger"].in-view > *:nth-child(1){ transition-delay: 0.02s; }
[data-reveal="stagger"].in-view > *:nth-child(2){ transition-delay: 0.10s; }
[data-reveal="stagger"].in-view > *:nth-child(3){ transition-delay: 0.18s; }
[data-reveal="stagger"].in-view > *:nth-child(4){ transition-delay: 0.26s; }
[data-reveal="stagger"].in-view > *:nth-child(5){ transition-delay: 0.34s; }
[data-reveal="stagger"].in-view > *:nth-child(6){ transition-delay: 0.42s; }
[data-reveal="stagger"].in-view > *:nth-child(7){ transition-delay: 0.50s; }

/* ---------- cards ---------- */
.card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 12px 24px -16px rgba(0,0,0,0.10);
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.card:hover{ border-color: var(--border-strong); transform: translateY(-4px); box-shadow: 0 4px 8px rgba(0,0,0,0.05), 0 20px 32px -18px rgba(0,0,0,0.14); }
.card .icon{
  width: 42px; height: 42px;
  border-radius: 10px;
  background: var(--v-accent-soft);
  color: var(--v-accent);
  display: grid; place-items: center;
  margin-bottom: 18px;
}
.card .icon svg{ width: 20px; height: 20px; }
.card h3{ font-size: 17px; margin-bottom: 8px; }
.card p{ color: var(--ink-dim); font-size: 14.5px; }

/* ---------- stat strip ---------- */
.stat-strip{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 12px 24px -16px rgba(0,0,0,0.10);
  overflow: hidden;
}
.stat{
  padding: 30px 24px;
  border-right: 1px solid var(--border);
  text-align: left;
}
.stat:last-child{ border-right: none; }
.stat .num{
  font-family: var(--font-display);
  font-size: clamp(26px, 3.2vw, 38px);
  color: var(--ink);
}
.stat .label{
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-faint);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 6px;
}
@media (max-width: 760px){
  .stat-strip{ grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(2){ border-right: none; }
  .stat:nth-child(1), .stat:nth-child(2){ border-bottom: 1px solid var(--border); }
}
@media (max-width: 400px){
  .stat-strip{ grid-template-columns: 1fr; }
  .stat{ border-right: none !important; border-bottom: 1px solid var(--border); padding: 22px 20px; }
  .stat:last-child{ border-bottom: none; }
}

/* ---------- scroll cue ---------- */
.scroll-cue{
  position: absolute;
  bottom: 36px; left: 24px;
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.scroll-cue .line{
  width: 1px; height: 34px;
  background: linear-gradient(var(--v-accent), transparent);
  animation: scrollpulse 2.2s var(--ease) infinite;
}
@keyframes scrollpulse{
  0%{ transform: scaleY(0); transform-origin: top; opacity: 0; }
  40%{ transform: scaleY(1); transform-origin: top; opacity: 1; }
  60%{ transform: scaleY(1); transform-origin: bottom; opacity: 1; }
  100%{ transform: scaleY(0); transform-origin: bottom; opacity: 0; }
}

/* ---------- generic panel / gallery placeholder ---------- */
.art-panel{
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background:
    radial-gradient(120% 100% at 100% 0%, var(--v-accent-soft), transparent 60%),
    var(--surface);
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 20px 40px -24px rgba(0,0,0,0.14);
  position: relative;
  overflow: hidden;
  min-height: 220px;
}
.art-panel::before{
  content: attr(data-caption);
  position: absolute;
  left: 20px; bottom: 18px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.art-panel svg{ position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.9; }

/* ---------- breadcrumb ---------- */
.crumb{
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--ink-faint);
  margin-bottom: 22px;
}
.crumb a{ color: var(--ink-dim); }
.crumb a:hover{ color: var(--v-accent); }

/* ---------- CTA band ---------- */
.cta-band{
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--surface-2);
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 20px 40px -24px rgba(0,0,0,0.14);
  padding: clamp(36px, 6vw, 64px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
}
.cta-band::before{
  content: "";
  position: absolute; top: -40%; right: -10%;
  width: 420px; height: 420px;
  background: var(--v-accent-soft);
  filter: blur(60px);
  border-radius: 50%;
}
.cta-band h2{ font-size: clamp(24px, 3.4vw, 34px); max-width: 22ch; position: relative; }
.cta-actions{ display: flex; gap: 14px; position: relative; flex-wrap: wrap; }

/* ---------- contact form ---------- */
.contact-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
}
.form-field{ margin-bottom: 18px; }
.form-field label{
  display: block; font-family: var(--font-mono); font-size: 11.5px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint);
  margin-bottom: 8px;
}
.form-field input, .form-field textarea, .form-field select{
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 13px 14px;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 14.5px;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus{
  outline: none; border-color: var(--v-accent); background: var(--surface-2);
}
.form-field textarea{ resize: vertical; min-height: 120px; }
@media (max-width: 860px){
  .contact-grid{ grid-template-columns: 1fr; }
}

/* ---------- utility ---------- */
.mt-0{ margin-top: 0 !important; }
.text-center{ text-align: center; }
.mono-tag{
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-faint);
}

/* ===================================================================
   HOME HERO
=================================================================== */
.hero{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 120px;
  position: relative;
}
@media (min-width: 1400px){
  .hero .container{ max-width: 1440px; }
}
@media (max-width: 600px){
  .hero{ min-height: unset; padding-top: 100px; padding-bottom: 64px; }
  .scroll-cue{ display: none; }
}
.hero-inner{
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 40px;
  align-items: center;
}
.hero h1{
  font-size: clamp(38px, 6vw, 88px);
  line-height: 1.03;
  letter-spacing: -0.02em;
}
.hero h1 .accent-word{
  background: linear-gradient(100deg, var(--v-footwear), var(--v-consultation));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero .lede{ margin-top: 24px; font-size: clamp(16px, 1.8vw, 21px); max-width: 46ch; }
.hero-actions{ display: flex; gap: 14px; margin-top: 40px; flex-wrap: wrap; }
.hero-badge{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px 7px 7px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  font-size: 12.5px;
  color: var(--ink-dim);
  margin-bottom: 26px;
}
.hero-badge .dot{
  width: 20px; height: 20px; border-radius: 50%;
  background: conic-gradient(from 200deg, var(--v-footwear), var(--v-printing), var(--v-hospitality), var(--v-advertising), var(--v-consultation), var(--v-footwear));
}
@media (max-width: 980px){
  .hero-inner{ grid-template-columns: 1fr; }
}

/* ===================================================================
   VERTICALS ARC — pinned, full-screen scroll sequence.
   The section is several viewport-heights tall; while it scrolls past,
   `.verticals-sticky` stays pinned to a single full screen. JS
   (initVerticalsScroll) measures a large circle mostly off-screen to
   the right and walks five number markers along its visible edge —
   each one grows bold and dark as it nears the vertical center (the
   "active" position, where the name/tagline/CTA fades in beside it),
   then shrinks and fades as the next marker arrives.
=================================================================== */
.verticals-scroll{
  position: relative;
  height: 420vh;
}
.verticals-sticky{
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}
.verticals-stage{
  position: relative;
  width: 100%;
  height: 100%;
}
.verticals-head{
  position: absolute;
  top: 150px;
  left: 24px;
  max-width: 380px;
  z-index: 2;
}
.verticals-head .lede{ margin-top: 14px; }

.verticals-arc-line{
  position: absolute;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  pointer-events: none;
  z-index: 0;
}

.verticals-track{ position: relative; z-index: 1; }
.v-node{
  position: absolute;
  display: flex;
  align-items: center;
  gap: 16px;
  transform: translate(-50%, -50%) scale(var(--v-scale, 1));
  white-space: nowrap;
  transition: opacity 0.2s linear;
  will-change: left, top;
}
.v-node-dot{ width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; opacity: 0; transition: opacity 0.3s var(--ease); }
.v-node.is-active .v-node-dot{ opacity: 1; }
.v-node-num{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 32px;
  letter-spacing: -0.02em;
  color: var(--ink-faint);
  transition: color 0.35s var(--ease), font-size 0.35s var(--ease);
}
.v-node.is-active .v-node-num{ color: var(--ink); font-size: 44px; }
.v-node-body{ display: none; }

.verticals-copy{
  position: absolute;
  z-index: 2;
  max-width: 460px;
  opacity: 0;
}
.verticals-copy.is-in{ animation: v-copy-in 0.6s var(--ease) both; }
@keyframes v-copy-in{
  from{ opacity: 0; transform: translateX(14px); }
  to{ opacity: 1; transform: translateX(0); }
}
.v-copy-index{
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  margin-bottom: 12px;
}
.verticals-copy h3{ font-size: clamp(24px, 2.8vw, 36px); line-height: 1.2; letter-spacing: -0.01em; }
.verticals-copy p{ color: var(--ink-dim); font-size: 15.5px; margin-top: 16px; }
.v-copy-link{
  margin-top: 24px; display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600; color: var(--ink);
  padding-bottom: 2px; border-bottom: 1px solid var(--border-strong);
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease), gap 0.3s var(--ease);
}
.v-copy-link svg{ width: 14px; height: 14px; transition: transform 0.3s var(--ease); }
.v-copy-link:hover{ color: var(--v-accent); border-color: var(--v-accent); gap: 12px; }
.v-copy-link:hover svg{ transform: translate(3px,-3px); }

@media (max-width: 900px){
  .verticals-scroll{ height: auto; }
  .verticals-sticky{ position: relative; top: auto; height: auto; overflow: visible; padding-block: clamp(96px, 14vw, 140px) clamp(56px, 10vw, 96px); }
  .verticals-stage{ height: auto; display: flex; flex-direction: column; gap: 32px; }
  .verticals-head{ position: static; max-width: 100%; }
  .verticals-arc-line{ display: none !important; }
  .verticals-track{
    position: static;
    display: flex;
    flex-direction: column;
    gap: 22px;
  }
  .v-node{
    position: static !important;
    transform: none !important;
    opacity: 1 !important;
    align-items: flex-start;
    gap: 14px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--border);
    white-space: normal;
  }
  .v-node:last-child{ border-bottom: none; }
  .v-node-dot{ opacity: 1 !important; margin-top: 8px; }
  .v-node-num{ font-size: 26px !important; color: var(--ink) !important; flex-shrink: 0; }
  .v-node-body{ display: flex; flex-direction: column; gap: 4px; }
  .v-node-name{ font-size: 17px; color: var(--ink); }
  .v-node-tag{ font-size: 13.5px; color: var(--ink-dim); }
  .verticals-copy{
    position: static;
    max-width: 100%;
    opacity: 1;
    transform: none;
    display: none;
  }
}

/* ===================================================================
   VERTICAL PAGE HERO
=================================================================== */
.v-hero{
  padding-top: 150px;
  padding-bottom: 60px;
}
@media (max-width: 600px){
  .v-hero{ padding-top: 110px; padding-bottom: 40px; }
}
.v-hero-top{
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 20px;
  margin-bottom: 28px;
}
.v-share-badge{
  display: flex; align-items: center; gap: 14px;
  padding: 10px 10px 10px 20px;
  border: 1px solid var(--border);
  border-radius: 999px;
}
.v-share-badge .ring{
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--v-accent);
  position: relative;
}
.v-hero h1{
  font-size: clamp(36px, 5.6vw, 64px);
  line-height: 1.05;
  max-width: 16ch;
}
.v-hero .lede{ margin-top: 20px; }
.v-hero-actions{ display: flex; gap: 14px; margin-top: 32px; flex-wrap: wrap; }

.offer-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 900px){ .offer-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px){ .offer-grid{ grid-template-columns: 1fr; } }

/* ===================================================================
   BENTO GRID — "why Bellora Global" USP grid (home page)
   One tall photo-led feature card anchors the left column; four stat
   cells and two icon feature cards fill a 2x2 + 1x2 grid beside it —
   all seven original data points, restyled as an asymmetric bento
   with Apple-style easing on hover and scroll reveal.
=================================================================== */
.bento-grid{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: repeat(3, auto);
  grid-template-areas:
    "a b c"
    "a d e"
    "a f g";
  gap: 18px;
}
.bento-a{ grid-area: a; }
.bento-b{ grid-area: b; }
.bento-c{ grid-area: c; }
.bento-d{ grid-area: d; }
.bento-e{ grid-area: e; }
.bento-f{ grid-area: f; }
.bento-g{ grid-area: g; }

.bento-card{
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--surface-2);
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 20px 40px -24px rgba(0,0,0,0.12);
  overflow: hidden;
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease), border-color 0.5s var(--ease);
}
.bento-card:hover{
  transform: translateY(-6px);
  border-color: var(--border-strong);
  box-shadow: 0 8px 16px rgba(0,0,0,0.06), 0 34px 56px -28px rgba(0,0,0,0.2);
}

/* Card A — tall photo-led feature card, spans all three rows */
.bento-a{ padding: 14px 14px 6px; }
.bento-a .bento-media{
  position: relative;
  flex: 1;
  min-height: 200px;
  border-radius: calc(var(--radius-lg) - 10px);
  border-color: transparent;
  box-shadow: none;
}
.bento-a .bento-copy{
  padding: 24px 12px 28px;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}
.bento-a .bento-icon{ margin-bottom: 16px; }
.bento-a .bento-copy h3{ font-size: clamp(18px, 1.9vw, 21px); line-height: 1.25; margin-bottom: 10px; }
.bento-a .bento-copy p{ color: var(--ink-dim); font-size: 14px; }

/* Stat cells — 05 / 60K / GCC / 01 */
.bento-stat{
  padding: 26px 22px;
  justify-content: space-between;
  background: linear-gradient(165deg, var(--surface), var(--surface-2));
  gap: 16px;
  min-height: 128px;
}
.bento-stat-num{
  font-family: var(--font-display);
  font-size: clamp(30px, 3.2vw, 38px);
  letter-spacing: -0.01em;
  color: var(--ink);
}
.bento-stat-label{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  max-width: 20ch;
}

/* Feature cells — One point of contact / Built for the GCC */
.bento-feature{
  padding: 26px 22px 28px;
  justify-content: flex-start;
}
.bento-feature h3{ font-size: 16.5px; margin-bottom: 8px; }
.bento-feature p{ color: var(--ink-dim); font-size: 13.5px; }

/* Shared icon badge (feature cards) */
.bento-icon{
  width: 42px; height: 42px;
  border-radius: 10px;
  background: var(--v-accent-soft);
  color: var(--v-accent);
  display: grid; place-items: center;
  margin-bottom: 14px;
  flex-shrink: 0;
}
.bento-icon svg{ width: 20px; height: 20px; }

@media (max-width: 980px){
  .bento-grid{
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(4, auto);
    grid-template-areas:
      "a b"
      "a c"
      "d e"
      "f g";
  }
  .bento-a .bento-media{ aspect-ratio: 16 / 10; min-height: unset; }
}
@media (max-width: 640px){
  .bento-grid{
    grid-template-columns: 1fr;
    grid-template-areas: "a" "b" "c" "d" "e" "f" "g";
  }
  .bento-a .bento-media{ aspect-ratio: 16 / 10; }
}

/* ===================================================================
   BENTO GRID — vertical-page variants (service/offer grids)
   Same anchor-card + feature-cell system as the home page, sized for
   4 or 6 service cards instead of the home page's 7 data points.
=================================================================== */
.bento-grid.count-4{
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto;
  grid-template-areas:
    "a b c"
    "a d d";
}
.bento-grid.count-6{
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto auto;
  grid-template-areas:
    "a b c"
    "a d e"
    "f f f";
}

/* Wide banner feature — icon and copy run side by side */
.bento-wide{
  flex-direction: row;
  align-items: center;
  gap: 22px;
  padding: 24px 28px;
}
.bento-wide .bento-icon{ margin-bottom: 0; }
.bento-wide h3{ margin-bottom: 4px; }
.bento-wide p{ max-width: 60ch; }

@media (max-width: 980px){
  .bento-grid.count-4{
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "a b"
      "a c"
      "d d";
  }
  .bento-grid.count-6{
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(4, auto);
    grid-template-areas:
      "a b"
      "a c"
      "d e"
      "f f";
  }
}
@media (max-width: 640px){
  .bento-grid.count-4{ grid-template-columns: 1fr; grid-template-areas: "a" "b" "c" "d"; }
  .bento-grid.count-6{ grid-template-columns: 1fr; grid-template-areas: "a" "b" "c" "d" "e" "f"; }
  .bento-wide{ flex-direction: column; align-items: flex-start; }
}

.process-list{ display: flex; flex-direction: column; }
.process-row{
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 22px;
  padding-block: 26px;
  border-bottom: 1px solid var(--border);
}
.process-row:first-child{ border-top: 1px solid var(--border); }
.process-row .p-index{
  font-family: var(--font-mono);
  color: var(--v-accent);
  font-size: 13px;
  padding-top: 4px;
}
.process-row h3{ font-size: 18px; margin-bottom: 6px; }
.process-row p{ color: var(--ink-dim); font-size: 14.5px; max-width: 62ch; }

.gallery-row{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media (max-width: 760px){ .gallery-row{ grid-template-columns: 1fr; } }

.other-verticals{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.ov-chip{
  display: flex; flex-direction: column; gap: 10px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.ov-chip:hover{ transform: translateY(-3px); }
.ov-chip .swatch{ width: 9px; height: 9px; border-radius: 50%; }
.ov-chip span.name{ font-size: 14px; font-weight: 600; }
.ov-chip span.tag{ font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.06em; }
@media (max-width: 900px){ .other-verticals{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px){ .other-verticals{ grid-template-columns: 1fr; } }

/* ===================================================================
   ADDITIONS — hero preview list, share-badge ring, prose/overview
=================================================================== */
.hero-preview{
  padding: 34px;
  min-height: 380px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  position: relative;
  z-index: 1;
}
.hero-preview-row{
  display: flex; align-items: center; gap: 14px;
  padding: 14px 6px;
  border-bottom: 1px solid var(--border);
}
.hero-preview-row:last-child{ border-bottom: none; }
.hero-preview-row .swatch{ width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.hero-preview-row .name{ font-family: var(--font-display); font-size: 15.5px; flex: 1; }
.hero-preview-row .share{ font-family: var(--font-mono); font-size: 12px; color: var(--ink-faint); }

.v-share-badge .ring{
  background: conic-gradient(var(--v-accent) 0deg 72deg, var(--border) 72deg 360deg);
}
.v-share-badge .ring::before{
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: var(--bg-alt);
}
.v-share-badge .ring span{ position: relative; z-index: 1; }
.v-share-badge .vb-text{ display: flex; flex-direction: column; }
.v-share-badge .vb-text .vb-label{ font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); }
.v-share-badge .vb-text .vb-value{ font-family: var(--font-display); font-size: 15px; margin-top: 2px; }

.overview-grid{
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 56px;
}
.overview-grid .prose p{ color: var(--ink-dim); font-size: 16px; margin-bottom: 16px; }
.overview-grid .prose p:last-child{ margin-bottom: 0; }
@media (max-width: 860px){ .overview-grid{ grid-template-columns: 1fr; gap: 28px; } }

.edit-note{
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-faint);
  border: 1px dashed var(--border-strong);
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  margin-bottom: 24px;
  display: inline-block;
}

.fact-list{
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  overflow: hidden;
}
.fact-list li{
  display: flex; justify-content: space-between; gap: 14px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  font-size: 13.5px;
}
.fact-list li:last-child{ border-bottom: none; }
.fact-list .k{ font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
.fact-list .v{ color: var(--ink); text-align: right; }

.footer-badges{ display:flex; gap:10px; margin-top:18px; flex-wrap:wrap; }
.footer-badges span, .footer-badges a{
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-faint); border: 1px solid var(--border); border-radius: 999px; padding: 5px 11px;
  transition: color .2s ease, border-color .2s ease;
}
.footer-badges a:hover{ color: var(--gold); border-color: var(--gold); }

.brand-logo{
  height: 46px; width: auto;
  flex-shrink: 0;
  display: block;
  transition: height 0.4s var(--ease);
}
.site-header.is-scrolled .brand-logo{ height: 38px; }
.footer-brand .brand-logo{ height: 52px; }

.tag-groups{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 8px; }
.tag-group h4{
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--v-accent); margin-bottom: 14px; font-weight: 500;
}
.tag-row{ display: flex; flex-wrap: wrap; gap: 8px; }
.tag-chip{
  font-size: 12.5px; color: var(--ink-dim);
  border: 1px solid var(--border); border-radius: 999px;
  padding: 6px 13px;
}
@media (max-width: 760px){ .tag-groups{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px){ .tag-groups{ grid-template-columns: 1fr; } }

/* ===================================================================
   TEXTURE PANELS — generated abstract compositions, one per vertical,
   in place of literal (and currently unavailable) product photography.
   Each evokes its vertical through pattern rather than image content,
   tinted with that vertical's brand color for a cohesive system.
=================================================================== */
.photo{
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--surface-2);
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 24px 48px -28px rgba(0,0,0,0.22);
  isolation: isolate;
}
.photo::after{
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 100% 0%, transparent 40%, rgba(6,9,15,0.55) 100%);
  pointer-events: none;
}
.photo .photo-caption{
  position: absolute; left: 22px; bottom: 20px; z-index: 1;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: rgba(255,255,255,0.85);
}
.texture{
  position: absolute; inset: 0;
  transition: transform 1s var(--ease);
}
.photo:hover .texture{ transform: scale(1.04); }
.hero-photo-img{
  width: 100%; height: 100%;
  object-fit: cover;
}

/* Contextual line-art icon layered over each vertical's texture panel */
.v-icon{
  position: absolute;
  inset: 0;
  margin: auto;
  width: 52%;
  height: 52%;
  filter: drop-shadow(0 10px 16px rgba(0,0,0,0.12));
  transition: transform 0.6s var(--ease);
}
.photo:hover .v-icon{ transform: scale(1.05) translateY(-4px); }

/* Hero — ambient mesh gradient blending all five vertical colors.
   Drift is done via `transform` (GPU compositor only), not
   `background-position` (forces a full repaint every frame) — the
   fixed-size background never moves, the oversized element does. */
.texture-hero{
  inset: -14%;
  background:
    radial-gradient(46% 38% at 18% 22%, color-mix(in srgb, var(--v-footwear) 75%, transparent), transparent 70%),
    radial-gradient(42% 36% at 82% 12%, color-mix(in srgb, var(--v-printing) 65%, transparent), transparent 70%),
    radial-gradient(48% 42% at 88% 78%, color-mix(in srgb, var(--v-hospitality) 60%, transparent), transparent 70%),
    radial-gradient(40% 40% at 10% 82%, color-mix(in srgb, var(--v-advertising) 60%, transparent), transparent 70%),
    radial-gradient(50% 46% at 50% 50%, color-mix(in srgb, var(--v-consultation) 45%, transparent), transparent 72%),
    var(--bg-alt);
  animation: mesh-drift 26s ease-in-out infinite;
  will-change: transform;
}
@keyframes mesh-drift{
  0%, 100%{ transform: translate3d(0,0,0) scale(1); }
  50%{ transform: translate3d(-2.5%, 2%, 0) scale(1.04); }
}

/* Footwear — diagonal stitch lines over leather-grain wash */
.texture-footwear{
  background:
    repeating-linear-gradient(48deg, rgba(255,255,255,0.07) 0 2px, transparent 2px 26px),
    repeating-linear-gradient(-42deg, rgba(255,255,255,0.045) 0 1px, transparent 1px 26px),
    linear-gradient(160deg, color-mix(in srgb, var(--v-footwear) 38%, var(--surface)), var(--bg-alt) 78%);
}

/* Printing & Packaging — CMYK-adjacent halftone dot grid */
.texture-printing{
  background:
    radial-gradient(circle, rgba(255,255,255,0.16) 1.6px, transparent 1.7px) 0 0/16px 16px,
    radial-gradient(circle, rgba(255,255,255,0.09) 1.2px, transparent 1.3px) 8px 8px/16px 16px,
    linear-gradient(155deg, color-mix(in srgb, var(--v-printing) 40%, var(--surface)), var(--bg-alt) 80%);
}

/* Hospitality & Corporate Merchandise — woven linen cross-hatch */
.texture-hospitality{
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.06) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(90deg, rgba(0,0,0,0.12) 0 1px, transparent 1px 9px),
    linear-gradient(150deg, color-mix(in srgb, var(--v-hospitality) 36%, var(--surface)), var(--bg-alt) 80%);
}

/* Project Advisory & Management / Advertising — blueprint grid + spotlight */
.texture-advertising{
  background:
    radial-gradient(38% 46% at 78% 24%, rgba(255,255,255,0.14), transparent 70%),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.055) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.055) 0 1px, transparent 1px 34px),
    linear-gradient(155deg, color-mix(in srgb, var(--v-advertising) 40%, var(--surface)), var(--bg-alt) 80%);
}

/* Culinary & Food Ingredients — organic marbling swirl */
.texture-consultation{
  background:
    radial-gradient(32% 40% at 30% 30%, rgba(255,255,255,0.16), transparent 68%),
    radial-gradient(38% 34% at 74% 66%, color-mix(in srgb, var(--v-consultation) 55%, transparent), transparent 70%),
    linear-gradient(160deg, color-mix(in srgb, var(--v-consultation) 34%, var(--surface)), var(--bg-alt) 80%);
}

/* ---------- hero split with photography ---------- */
.hero-split{
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 64px;
  align-items: center;
}
.hero-split .hero-photo{
  aspect-ratio: 4 / 5;
  will-change: transform;
}
@media (min-width: 1400px){
  .hero-split{ gap: 84px; }
  .hero-split .hero-photo{ aspect-ratio: 1 / 1; }
}
@media (max-width: 980px){
  .hero-split{ grid-template-columns: 1fr; }
  .hero-split .hero-photo{ aspect-ratio: 16 / 10; order: -1; }
}

/* ---------- verticals photo showcase (2-col zig-zag, no generic 3-card row) ---------- */
.showcase-list{ display: flex; flex-direction: column; gap: clamp(56px, 9vw, 108px); }
.showcase-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
.showcase-row:nth-child(even) .showcase-media{ order: 2; }
.showcase-row .showcase-media{
  aspect-ratio: 5 / 4;
}
.showcase-row .showcase-index{
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--v-accent); margin-bottom: 14px;
  display: flex; align-items: center; gap: 10px;
}
.showcase-row .showcase-index::before{ content: ""; width: 18px; height: 1px; background: var(--v-accent); }
.showcase-row h3{ font-size: clamp(22px, 2.6vw, 32px); line-height: 1.12; letter-spacing: -0.01em; }
.showcase-row p{ color: var(--ink-dim); font-size: 15.5px; margin-top: 14px; max-width: 46ch; }
.showcase-row .showcase-link{
  margin-top: 24px; display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600; color: var(--ink);
  padding-bottom: 2px; border-bottom: 1px solid var(--border-strong);
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease), gap 0.3s var(--ease);
}
.showcase-row .showcase-link svg{ width: 14px; height: 14px; transition: transform 0.3s var(--ease); }
.showcase-row .showcase-link:hover{ color: var(--v-accent); border-color: var(--v-accent); gap: 12px; }
.showcase-row .showcase-link:hover svg{ transform: translate(3px,-3px); }
@media (max-width: 860px){
  .showcase-row{ grid-template-columns: 1fr; }
  .showcase-row:nth-child(even) .showcase-media{ order: -1; }
  .showcase-row .showcase-media{ aspect-ratio: 16 / 10; }
}

/* ---------- magnetic buttons ---------- */
.btn-primary, .btn-ghost{
  will-change: transform;
}
[data-magnetic]{ transition: transform 0.25s var(--ease); }

/* ---------- scroll-linked hero parallax hook ---------- */
[data-parallax]{ will-change: transform; }

/* ---------- image carousel (vertical pages) ---------- */
.carousel-viewport{
  overflow: hidden;
  margin-inline: -24px;
  padding-inline: 24px;
}
@media (max-width: 480px){
  .carousel-viewport{ margin-inline: -18px; padding-inline: 18px; }
}
.carousel-track{
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 4px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.carousel-track::-webkit-scrollbar{ display: none; }
.carousel-card{
  position: relative;
  flex: 0 0 auto;
  width: clamp(220px, 24vw, 280px);
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 20px 36px -22px rgba(0,0,0,0.22);
  scroll-snap-align: start;
  isolation: isolate;
}
.carousel-media{ position: absolute; inset: 0; }
.carousel-media img{
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 45%;
  background: #fff;
}
.carousel-card::after{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 68%, rgba(6,9,15,0.85) 100%);
  pointer-events: none;
}
.carousel-info{
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  padding: 20px;
}
.carousel-info h3{
  color: #fff;
  font-size: 16.5px;
  letter-spacing: -0.01em;
}
.carousel-info p{
  color: rgba(255,255,255,0.75);
  font-size: 13px;
  margin-top: 4px;
}
.carousel-info a{
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 12px;
  font-size: 13px; font-weight: 600; color: #fff;
  padding-bottom: 2px; border-bottom: 1px solid rgba(255,255,255,0.4);
  transition: border-color 0.3s var(--ease), gap 0.3s var(--ease);
}
.carousel-info a svg{ width: 12px; height: 12px; transition: transform 0.3s var(--ease); }
.carousel-info a:hover{ border-color: #fff; gap: 9px; }
.carousel-info a:hover svg{ transform: translate(2px,-2px); }
.carousel-nav{ display: flex; gap: 10px; margin-top: 20px; }
.carousel-btn{
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--ink);
  display: grid; place-items: center;
  cursor: pointer;
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease), transform 0.2s var(--ease);
}
.carousel-btn svg{ width: 17px; height: 17px; }
.carousel-btn:hover{ border-color: var(--v-accent); color: var(--v-accent); }
.carousel-btn:active{ transform: scale(0.94); }
@media (max-width: 600px){
  .carousel-card{ width: 74vw; }
}

/* ===================================================================
   HEADER — transparent / light-text state over the full-screen hero.
   Toggled by JS (initHeader) via .is-on-dark while the dark hero photo
   is still behind the header; .is-scrolled (frosted, opaque) wins once
   the visitor scrolls past it, same as on every other page.
=================================================================== */
.site-header.is-on-dark:not(.is-scrolled) .main-nav a{ color: rgba(255,255,255,0.78); }
.site-header.is-on-dark:not(.is-scrolled) .main-nav a:hover{ color: #fff; background: rgba(255,255,255,0.14); }
.site-header.is-on-dark:not(.is-scrolled) .main-nav a.is-active{ color: #fff; }
/* the mobile nav panel is always light, so keep its links dark even when the header itself is in dark-hero mode */
@media (max-width: 1360px){
  .site-header.is-on-dark:not(.is-scrolled) .main-nav a{ color: var(--ink-dim); }
  .site-header.is-on-dark:not(.is-scrolled) .main-nav a:hover{ color: var(--ink); background: rgba(0,0,0,0.045); }
  .site-header.is-on-dark:not(.is-scrolled) .main-nav a.is-active{ color: var(--ink); }
}
.site-header.is-on-dark:not(.is-scrolled) .brand{
  background: rgba(255,255,255,0.92);
  padding: 6px 12px;
  border-radius: 999px;
  backdrop-filter: blur(6px);
  transition: background 0.4s var(--ease), padding 0.4s var(--ease);
}
.site-header.is-on-dark:not(.is-scrolled) .header-cta .btn-ghost{
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.4);
  color: #fff;
  box-shadow: none;
}
.site-header.is-on-dark:not(.is-scrolled) .header-cta .btn-ghost:hover{ background: rgba(255,255,255,0.24); border-color: #fff; color: #fff; }
.site-header.is-on-dark:not(.is-scrolled) .nav-toggle{ border-color: rgba(255,255,255,0.4); background: rgba(255,255,255,0.14); }
.site-header.is-on-dark:not(.is-scrolled) .nav-toggle span,
.site-header.is-on-dark:not(.is-scrolled) .nav-toggle span::before,
.site-header.is-on-dark:not(.is-scrolled) .nav-toggle span::after{ background: #fff; }

/* ===================================================================
   FULL-SCREEN HOME HERO
   Full-bleed photography, giant background wordmark, header overlaid
   on top, kicker + headline anchored bottom-left, two glass stat
   badges anchored bottom-right — Apple/Soltera-style landing hero.
=================================================================== */
.hero-full{
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  color: #fff;
  isolation: isolate;
}
.hero-full-media{ position: absolute; inset: 0; z-index: -2; }
.hero-full-img{
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.08);
  will-change: transform;
}
.hero-full-scrim{
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(6,9,15,0.22) 0%, rgba(6,9,15,0.08) 32%, rgba(6,9,15,0.58) 78%, rgba(6,9,15,0.88) 100%),
    linear-gradient(90deg, rgba(6,9,15,0.4), transparent 55%);
}
.hero-full-watermark{
  position: absolute;
  top: 16vh;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.03em;
  font-size: clamp(80px, 15vw, 240px);
  line-height: 1;
  color: rgba(255,255,255,0.14);
  white-space: nowrap;
  pointer-events: none;
  mix-blend-mode: overlay;
}
.hero-full-content{
  position: relative;
  z-index: 1;
  padding-top: 150px;
  padding-bottom: clamp(32px, 5vw, 56px);
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.hero-badge-light{
  border-color: rgba(255,255,255,0.35);
  color: rgba(255,255,255,0.92);
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(10px) saturate(160%);
}
.hero-full-bottom{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(24px, 4vw, 48px);
  flex-wrap: wrap;
}
.hero-full-headline{ max-width: 640px; }
.hero-full-headline h1{
  font-size: clamp(34px, 4.6vw, 64px);
  line-height: 1.06;
  letter-spacing: -0.02em;
}
.hero-full-headline h1 .accent-word{
  background: linear-gradient(100deg, var(--v-footwear), var(--v-consultation));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-full-kicker{
  font-size: clamp(15px, 1.5vw, 17px);
  color: rgba(255,255,255,0.74);
  max-width: 52ch;
  line-height: 1.6;
  margin-top: 20px;
}
.hero-full-badges{ display: flex; gap: 14px; flex-shrink: 0; }
.hero-stat-badge{
  width: 168px;
  padding: 18px;
  border-radius: var(--radius);
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.22);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
}
.hero-stat-num{
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 26px;
  margin-bottom: 8px;
}
.hero-stat-label{ display: block; font-size: 11.5px; line-height: 1.45; color: rgba(255,255,255,0.72); }
.hero-photo-badge{
  width: 224px;
  display: flex; align-items: center; gap: 12px;
  padding: 10px;
  border-radius: var(--radius);
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.22);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
}
.hero-photo-badge img{ width: 52px; height: 52px; border-radius: 10px; object-fit: cover; flex-shrink: 0; }
.hero-photo-badge-copy{ display: flex; flex-direction: column; min-width: 0; }
.hero-stat-num-sm{ font-family: var(--font-display); font-weight: 600; font-size: 15px; }
.hero-stat-label-sm{ font-size: 10.5px; line-height: 1.35; color: rgba(255,255,255,0.68); margin-top: 3px; }
.scroll-cue-light{ color: rgba(255,255,255,0.78); }
.scroll-cue-light .line{ background: linear-gradient(#fff, transparent); }

@media (max-width: 1100px){
  .hero-full-headline{ max-width: 100%; }
  .hero-full-bottom{ flex-direction: column; align-items: flex-start; }
  .hero-full-badges{ width: 100%; }
  .hero-stat-badge{ flex: 1; }
  .hero-photo-badge{ flex: 1; }
}
@media (max-width: 600px){
  .hero-full-content{ padding-top: 120px; gap: 28px; }
  .hero-full-watermark{ font-size: clamp(60px, 22vw, 120px); top: 12vh; }
  .hero-full-badges{ flex-direction: column; }
  .hero-stat-badge, .hero-photo-badge{ width: 100%; }
  .scroll-cue-light{ display: none; }
}

/* ---------- Apple-style smooth scroll reveal, one notch further ---------- */
[data-reveal]{
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}