@charset "UTF-8";

:root{
  --maroon:#8B1A1F;
  --maroon-deep:#5A0E10;
  --maroon-soft:#A52929;
  --gold:#D4B264;
  --gold-soft:#E4CB85;
  --gold-bright:#F0D88A;
  --dark:#0E0606;
  --darker:#050202;
  --night:#1A0A0B;
  --cream:#F7F1E8;
  --beige:#EDE3D2;

  --font-display:'Oswald', sans-serif;
  --font-head:'Montserrat', sans-serif;
  --font-body:'Montserrat', sans-serif;
  --font-mono:'Montserrat', monospace;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(0.16, 1, 0.3, 1);
  --ease-expo:cubic-bezier(0.87, 0, 0.13, 1);
}

*,*::before,*::after{ box-sizing:border-box; }
em, i, address, cite, dfn, var { font-style: normal; }
html{ scroll-behavior:smooth; }
body{
  margin:0; padding:0;
  font:400 16px/1.7 var(--font-body);
  color:#2A0A0C;
  background:var(--darker);
  overflow-x:hidden;
  cursor:none;
  position:relative;
}
img{ max-width:100%; display:block; }

/* ============ CONTINUOUS BG GRADIENT (toàn site) ============ */
.bg-canvas{
  position:fixed; inset:0; z-index:-2;
  background:
    radial-gradient(ellipse 80% 50% at 70% 0%, rgba(139,26,31,.45) 0%, transparent 60%),
    radial-gradient(ellipse 100% 60% at 30% 50%, rgba(139,26,31,.25) 0%, transparent 50%),
    radial-gradient(ellipse 80% 60% at 80% 100%, rgba(232,196,101,.12) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80% at 20% 80%, rgba(165,41,41,.3) 0%, transparent 60%),
    linear-gradient(180deg, var(--darker) 0%, var(--night) 25%, #0F0608 50%, var(--night) 75%, var(--darker) 100%);
  pointer-events:none;
}
/* Animated subtle nebula */
.bg-canvas::after{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(circle at 50% 50%, rgba(232,196,101,.04) 0%, transparent 30%);
  animation:nebula 20s ease-in-out infinite alternate;
}
@keyframes nebula {
  0%{ transform:translate(0,0) scale(1); opacity:.6; }
  50%{ transform:translate(5%,3%) scale(1.1); opacity:.9; }
  100%{ transform:translate(-3%,5%) scale(.95); opacity:.7; }
}

/* Floating particles (sparkle dots) — fixed bg layer */
.bg-particles{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  overflow:hidden;
}
.bg-particles span{
  position:absolute;
  width:2px; height:2px; border-radius:50%;
  background:var(--gold);
  opacity:.6;
  animation:floatY var(--d) ease-in-out infinite;
  animation-delay:var(--delay);
}
@keyframes floatY {
  0%,100%{ transform:translate(0,0); opacity:.3; }
  50%{ transform:translate(var(--mx),var(--my)); opacity:.9; }
}

/* ============ INTRO SPLASH — RED + GOLD + BLACK 2026-06 v20 ============
 * Theatrical cinema curtain: solid black backdrop, twin spotlight
 * halos (gold key-light at TL, red velvet warm at BR), pulsing mark
 * with gold rim + red core, animated gold-shine progress bar. */
.intro{
  position:fixed; inset:0; z-index:2000;
  background:
    radial-gradient(60% 60% at 25% 20%, rgba(232,196,101,.32), transparent 65%),
    radial-gradient(70% 70% at 78% 82%, rgba(215,37,38,.36), transparent 60%),
    radial-gradient(circle at center, rgba(120,18,22,.18), transparent 70%),
    linear-gradient(180deg, #060206 0%, #0A0306 50%, #050102 100%);
  color:#FFE9AB;
  display:flex; align-items:center; justify-content:center;
  flex-direction:column;
  transition:opacity .8s var(--ease-out), visibility .8s;
  overflow:hidden;
}
.intro.gone{ opacity:0; visibility:hidden; pointer-events:none; }
/* Velvet film grain — subtle warmth wrapping the screen. */
.intro::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(circle at 50% 110%, rgba(232,196,101,.18), transparent 55%),
    radial-gradient(circle at 50% -10%, rgba(215,37,38,.22), transparent 55%);
}
/* Progress track + animated gold-shine bar. */
.intro-progress{
  position:absolute; bottom:60px; left:50%; transform:translateX(-50%);
  width:280px; height:2px; background:rgba(255,233,171,.10); overflow:hidden; border-radius:2px;
  z-index:3;
  box-shadow: 0 0 0 1px rgba(232,196,101,.18);
}
.intro-progress::after{
  content:''; position:absolute; left:0; top:0; height:100%; width:0%;
  background: linear-gradient(90deg,
    #B8923A 0%, #FFE9AB 35%, #E8C465 55%, #FFE9AB 75%, #B8923A 100%);
  background-size: 220% 100%;
  box-shadow: 0 0 12px rgba(255,233,171,.65), 0 0 24px rgba(215,37,38,.40);
  animation: introBar 2.4s var(--ease-out) forwards, introBarShine 2.4s linear infinite;
}
@keyframes introBar { to{ width:100%; } }
@keyframes introBarShine { to { background-position: 220% 0; } }
/* Mark — Vietnam flag red disc, gold ring + glow. The yellow star
 * inside reads against the flag's iconic red field, no maroon
 * dilution. #DA251D is the official Cờ đỏ sao vàng spec red. */
.intro-mark{
  width:72px; height:72px; border-radius:50%;
  background: radial-gradient(circle at 40% 35%,
    #FF3A3F 0%, #DA251D 45%, #B01218 100%);
  display:flex; align-items:center; justify-content:center;
  border:1.5px solid transparent;
  background-clip: padding-box;
  margin-bottom:30px; position:relative; z-index:2;
  box-shadow:
    0 0 0 1px rgba(232,196,101,.65),
    0 0 22px rgba(232,196,101,.40),
    0 0 50px rgba(218,37,29,.45),
    inset 0 1px 0 rgba(255,255,255,.30);
  animation:introMark 2.4s var(--ease-out);
}
@keyframes introMark { 0%{ transform:scale(0); } 40%{ transform:scale(1.2); } 100%{ transform:scale(1); } }
/* Tagline — gold shimmer for "LOADING …", brand name + counter
 * also gold so the entire screen reads in the same warm palette. */
.intro-text{
  font:400 11px/1.15 var(--font-mono); letter-spacing:.4em; text-transform:uppercase;
  background: linear-gradient(120deg, #B8923A 0%, #FFE9AB 50%, #B8923A 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  position:relative; z-index:2;
}
.intro-name{
  font:500 38px/1.15 var(--font-display); margin-top:14px;
  background: linear-gradient(120deg, #B8923A 0%, #FFE9AB 50%, #B8923A 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  position:relative; z-index:2;
  text-shadow: 0 1px 24px rgba(215,37,38,.35);
}
.intro-counter{
  position:absolute; bottom:90px; left:50%; transform:translateX(-50%);
  font:600 10px/1.15 var(--font-mono); letter-spacing:.3em;
  color: rgba(232,196,101,.55); z-index:3;
}

/* ============ CUSTOM CURSOR ============ */
.cursor{ position:fixed; top:0; left:0; width:14px; height:14px; border-radius:50%; background:var(--gold); pointer-events:none; z-index:9999; transform:translate(-50%,-50%); transition:transform .15s ease-out, width .3s var(--ease), height .3s var(--ease); mix-blend-mode:difference; }
.cursor-follow{ position:fixed; top:0; left:0; width:40px; height:40px; border-radius:50%; border:1px solid rgba(232,196,101,.6); pointer-events:none; z-index:9998; transform:translate(-50%,-50%); transition:width .4s var(--ease), height .4s var(--ease), border-color .3s; }
body.cursor-hover .cursor{ width:6px; height:6px; }
body.cursor-hover .cursor-follow{ width:60px; height:60px; border-color:var(--gold); }
body.cursor-link .cursor{ width:0; height:0; }
body.cursor-link .cursor-follow{ width:80px; height:80px; background:rgba(232,196,101,.15); border-color:var(--gold); }
@media (hover:none) and (pointer:coarse){ body{ cursor:auto; } .cursor,.cursor-follow{ display:none; } }

/* ============ SCROLL PROGRESS ============ */
.scroll-progress{
  position:fixed; top:0; left:0; right:0; height:2px;
  background:linear-gradient(to right, var(--maroon), var(--gold));
  transform:scaleX(0); transform-origin:left; z-index:101;
  transition:transform .1s ease-out;
}

/* ============ NAV ============ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:18px 5vw;
  display:flex; align-items:center; justify-content:space-between;
  transition:all .4s var(--ease);
}
.nav.scrolled{
  background:rgba(14,6,6,.92); backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(232,196,101,.15); padding:14px 5vw;
}
.logo{ display:inline-flex; align-items:center; color:#2A0A0C; text-decoration:none; }
.logo-img{
  height:46px; width:auto;
  display:block; object-fit:contain;
  transition:opacity .25s ease;
}
.logo:hover .logo-img{ opacity:.85; }

.nav-menu{ display:flex; gap:32px; list-style:none; padding:0; margin:0; }
.nav-menu a{
  color:rgba(42,10,12,.85); text-decoration:none;
  font:500 13px/1.15 var(--font-head); letter-spacing:.06em; text-transform:uppercase;
  position:relative; padding:8px 4px; transition:color .25s ease;
  display:inline-block;
}
.nav-menu a span{ display:inline; }
.nav-menu a::after{ content:none; }
.nav-menu a:hover{ color:#2A0A0C; }
.nav-menu a.active{ color:var(--gold); }
.nav-menu li > a:not(.active):hover::before{
  content:''; position:absolute; left:4px; right:4px; bottom:2px;
  height:1px; background:var(--gold);
}
.nav-menu .has-submenu{ position:relative; }
.nav-menu .has-submenu::after{
  content:''; position:absolute; top:100%; left:-12px; right:-12px; height:16px;
}
.nav-menu .submenu{
  position:absolute; top:calc(100% + 14px); left:-14px;
  list-style:none; margin:0; padding:8px;
  min-width:260px;
  background:rgba(14,6,6,.95);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(232,196,101,.2);
  border-radius:12px;
  opacity:0; transform:translateY(-8px) scale(.98); transform-origin:top left;
  pointer-events:none;
  transition:opacity .4s cubic-bezier(.22,1,.36,1), transform .45s cubic-bezier(.22,1,.36,1);
  z-index:100;
}
.nav-menu .has-submenu:hover .submenu,
.nav-menu .has-submenu:focus-within .submenu{
  opacity:1; transform:translateY(0) scale(1); pointer-events:auto;
}
.nav-menu .submenu li{ padding:0; margin:0; }
.nav-menu .submenu a{
  display:block;
  padding:10px 14px;
  font:500 12px/1.4 var(--font-body); letter-spacing:.06em; text-transform:none;
  color:rgba(42,10,12,.85);
  border-radius:8px;
  transition:background .2s ease, color .2s ease;
}
.nav-menu .submenu a::after{ display:none; }
.nav-menu .submenu a span{ display:inline; transition:none; }
.nav-menu .submenu a:hover span{ transform:none; }
.nav-menu .submenu a:hover{ background:rgba(232,196,101,.08); color:var(--gold); }

/* Legacy `.nav-cta` body removed 2026-06 v15. The CATALOG trigger now
 * inherits the canonical `.btn .btn-gold` liquid-glass styling from
 * `cinematic-2026.css §8` so it matches every other button on the site.
 * The old gold-fill + maroon text rules here were overriding that and
 * making the CATALOG button look like a different system. */

/* Hamburger button (mobile only) */
.nav-toggle{
  display:none;
  width:44px; height:44px;
  align-items:center; justify-content:center;
  background:transparent; border:0;
  padding:0; cursor:pointer;
  position:relative; z-index:101;
}
.nav-toggle span{
  position:absolute; left:50%; top:50%;
  width:24px; height:2px;
  background:#fff;
  border-radius:2px;
  transition:transform .35s var(--ease), opacity .25s ease, background .25s ease;
}
.nav-toggle span:nth-child(1){ transform:translate(-50%, -7px); }
.nav-toggle span:nth-child(2){ transform:translate(-50%, 0); }
.nav-toggle span:nth-child(3){ transform:translate(-50%, 7px); }
.nav-toggle.open span{ background:var(--gold); }
.nav-toggle.open span:nth-child(1){ transform:translate(-50%, 0) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform:translate(-50%, 0) rotate(-45deg); }

body.nav-open{ overflow:hidden; }

/* ============ FLOATING CTA (back-to-top + hotline + zalo) ============ */
.fcta-wrap{
  position:fixed; right:20px; bottom:20px; z-index:90;
  display:flex; flex-direction:column; align-items:flex-end; gap:10px;
}
.fcta{
  display:inline-flex; align-items:center;
  background:rgba(14,6,6,.92); color:#2A0A0C;
  border:1px solid rgba(255,255,255,.12);
  padding:7px;
  border-radius:999px;
  font-family:var(--font-body); font-size:11px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
  text-decoration:none;
  cursor:pointer;
  transition:background .25s ease, padding .35s ease, border-color .25s ease;
}
.fcta:hover{ padding:7px 18px 7px 7px; }
.fcta-call:hover{ background:var(--maroon); }
.fcta-zalo:hover{ background:rgba(14,6,6,.7); }
.fcta-top:hover{ background:rgba(14,6,6,.7); }
.fcta-icon{
  width:36px; height:36px; border-radius:50%;
  display:grid; place-items:center;
  flex-shrink:0;
}
.fcta-call .fcta-icon{ background:var(--maroon); }
.fcta-zalo .fcta-icon{
  font-family:var(--font-display); font-size:14px; font-weight:700;
  color:#1a1411;
}
.fcta-top .fcta-icon{
  background:transparent;
  border:1px solid rgba(255,255,255,.25);
  color:#2A0A0C;
}
.fcta-text{
  max-width:0;
  margin-left:0;
  overflow:hidden;
  white-space:nowrap;
  opacity:0;
  transition:max-width .4s ease, opacity .3s ease, margin .35s ease;
}
.fcta:hover .fcta-text{
  max-width:260px;
  margin-left:10px;
  margin-right:4px;
  opacity:1;
}

/* Back-to-top: hidden until user scrolls down */
.fcta-top{
  opacity:0;
  pointer-events:none;
  transform:translateY(10px);
  transition:opacity .35s ease, transform .35s ease, background .25s ease, padding .35s ease;
}
.fcta-top.show{
  opacity:1;
  pointer-events:auto;
  transform:none;
}
@keyframes pulseRing { 0%{ transform:scale(.9); opacity:1; } 100%{ transform:scale(1.4); opacity:0; } }

/* ============ FIREWORKS DECOR ============ */
.firework{
  position:absolute; pointer-events:none;
  width:160px; height:160px;
  opacity:0;
}
.firework svg{ width:100%; height:100%; overflow:visible; }
.firework .ray{
  stroke-dasharray:30 80; stroke-dashoffset:30;
  transform-origin:center;
  animation:fireRay 3s ease-out infinite;
}
.firework .dot{
  opacity:0;
  animation:fireDot 3s ease-out infinite;
  transform-origin:center;
}
.firework.go{ animation:fireFade 3s ease-out infinite; }
@keyframes fireFade {
  0%{ opacity:0; transform:scale(.4); }
  20%{ opacity:1; transform:scale(1); }
  70%{ opacity:.8; transform:scale(1.05); }
  100%{ opacity:0; transform:scale(1.2); }
}
@keyframes fireRay {
  0%{ stroke-dashoffset:30; opacity:0; }
  20%{ stroke-dashoffset:-50; opacity:1; }
  100%{ stroke-dashoffset:-110; opacity:0; }
}
@keyframes fireDot {
  0%{ opacity:0; transform:translate(0,0) scale(.5); }
  30%{ opacity:1; transform:translate(0,0) scale(1); }
  100%{ opacity:0; transform:translate(0,30px) scale(.3); }
}

/* Sparkle stars (CSS only, sprinkled) */
.sparkle{
  position:absolute; pointer-events:none;
  width:14px; height:14px;
  background:var(--gold);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 0 L13.5 9 L24 12 L13.5 15 L12 24 L10.5 15 L0 12 L10.5 9 Z'/></svg>") no-repeat center / contain;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 0 L13.5 9 L24 12 L13.5 15 L12 24 L10.5 15 L0 12 L10.5 9 Z'/></svg>") no-repeat center / contain;
  opacity:0; animation:sparkleAnim 4s ease-in-out infinite;
}
@keyframes sparkleAnim {
  0%,100%{ opacity:0; transform:scale(.4) rotate(0deg); }
  50%{ opacity:1; transform:scale(1) rotate(180deg); }
}

/* ============ HERO ============ */
.hero{
  position:relative;
  color:#2A0A0C; overflow:hidden;
  height:100vh; height:100svh;
  min-height:780px;
}
body.fp-on .hero{ min-height:780px; }

/* Hero Swiper */
.hero-swiper{ position:absolute; inset:0; width:100%; height:100%; z-index:0; }
.hero-swiper .swiper-slide{ overflow:hidden; }
.hero-img{
  position:absolute; inset:0; width:100%; height:100%;
  background-size:cover; background-position:center;
  transform:scale(1.04);
  transition:transform 7s var(--ease-out);
}
.swiper-slide-active .hero-img{ transform:scale(1); }

.hero::before{
  content:''; position:absolute; inset:0; z-index:2;
  background:
    radial-gradient(circle at 70% 40%, rgba(232,196,101,.15) 0%, transparent 50%),
    linear-gradient(180deg, rgba(14,6,6,.55) 0%, rgba(14,6,6,.15) 25%, rgba(14,6,6,.5) 65%, rgba(14,6,6,1) 100%),
    linear-gradient(90deg, rgba(139,26,31,.5) 0%, transparent 50%);
  pointer-events:none;
}

/* Corner deco — L-shaped brackets that frame the whole hero content
   (meta top-right, side-stats mid-right, headline + CTAs centre-left).
   Brackets sit OUTSIDE that content rectangle: tighter to viewport
   edges (3vw) and pulled a hair past where content actually starts. */
.hero-corner{ position:absolute; width:42px; height:42px; z-index:5; border-color:var(--gold); opacity:.7; }
.hero-corner.tl{ top:84px;    left:1.4vw;  border-top:1px solid; border-left:1px solid; }
.hero-corner.tr{ top:84px;    right:1.4vw; border-top:1px solid; border-right:1px solid; }
.hero-corner.bl{ bottom:56px; left:1.4vw;  border-bottom:1px solid; border-left:1px solid; }
.hero-corner.br{ bottom:56px; right:1.4vw; border-bottom:1px solid; border-right:1px solid; }

/* fireworks placement */
.hero .firework{ z-index:4; }
.hero .firework.fw-1{ top:8%; left:6%; animation-delay:.5s; }
.hero .firework.fw-2{ top:14%; right:8%; animation-delay:1.6s; width:200px; height:200px; }
.hero .firework.fw-3{ bottom:18%; right:18%; animation-delay:2.8s; width:140px; height:140px; }
.hero .firework.fw-4{ top:30%; left:30%; animation-delay:3.5s; width:180px; height:180px; }

/* hero side stats — horizontal strip pinned to the BOTTOM-RIGHT,
   tucked just above the BR corner bracket so the corner decor frames
   the achievements row. Was a vertical middle-right column. */
.hero-side-stats{
  position:absolute; right:calc(1.4vw + 50px); bottom:80px;
  z-index:5; display:flex; flex-direction:row; align-items:flex-start; gap:34px;
  opacity:0; animation:fadeIn 1s 1.4s forwards;
}
.hero-side-stat{ text-align:left; position:relative; padding-left:18px; }
.hero-side-stat + .hero-side-stat{ border-left:1px solid rgba(232,196,101,.32); }
.hero-side-stat strong{ font:500 28px/1.15 var(--font-display); color:#2A0A0C; display:block; margin-bottom:4px; letter-spacing:-0.01em; }
.hero-side-stat strong em{ color:var(--gold); font-style:normal; }
.hero-side-stat span{ font:600 9px/1.4 var(--font-mono); letter-spacing:.2em; text-transform:uppercase; color:rgba(42,10,12,.7); display:block; max-width:110px; }

/* hero content — left edge aligns with the nav's 5vw padding instead
   of an inner-centred 1280px rail so the headline sits directly under
   the logo. */
.hero-content{
  position:relative; z-index:4;
  width:100%; max-width:none; margin:0;
  padding:0 5vw;
  display:flex; flex-direction:column; justify-content:center;
  height:100%;
  padding-bottom:clamp(80px, 14vh, 180px);
  padding-top:clamp(100px, 14vh, 160px);
}
.hero-overline{
  display:inline-flex; align-items:center; gap:14px;
  font:600 12px/1.15 var(--font-mono); letter-spacing:.4em; text-transform:uppercase;
  color:var(--gold); margin-bottom:32px;
  opacity:0; animation:fadeUp 1s var(--ease-out) .6s forwards;
}
.hero-overline::before{ content:''; width:60px; height:1px; background:var(--gold); }
.hero-dot{ width:8px; height:8px; border-radius:50%; background:var(--gold); display:inline-block; position:relative; }
.hero-dot::after{ content:''; position:absolute; inset:-6px; border-radius:50%; border:1px solid var(--gold); opacity:0; animation:pulseRing 2s ease-out infinite; }

.hero-title{
  font-family:var(--font-display); font-weight:500;
  font-size:min(clamp(44px, 7vw, 120px), 12vh);
  line-height:1.15;
  letter-spacing:-0.015em; margin:0 0 24px; max-width:14ch;
}
.hero-title .word{ display:inline-block; overflow:hidden; padding-right:.18em; vertical-align:bottom; }
.hero-title .word .inner{ display:inline-block; transform:translateY(110%); animation:wordUp 1.1s var(--ease-out) forwards; }
.hero-title em{
  font-style:normal; font-weight:500; position:relative;
  background:var(--gold-shine); background-size:200% 200%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  animation:goldShimmer 6s linear infinite;
}
.hero-title em::after{
  content:''; position:absolute; left:-2%; right:-2%; bottom:8%;
  height:8px; background:var(--maroon); z-index:-1;
  transform:scaleX(0); transform-origin:left;
  animation:underline 1.2s var(--ease-out) 1.8s forwards;
}
@keyframes wordUp { to{ transform:translateY(0); } }
@keyframes underline { to{ transform:scaleX(1); } }

.hero-rotator{ display:inline-block; position:relative; vertical-align:bottom; }
.hero-rotator .item{ display:block; position:absolute; left:0; top:0; opacity:0; transition:opacity .6s var(--ease), transform .8s var(--ease-out); }
.hero-rotator .item.in{ opacity:1; transform:translateY(0); }
.hero-rotator .item.out{ opacity:0; transform:translateY(-100%); }
.hero-rotator .item.next{ opacity:0; transform:translateY(100%); }
.hero-rotator .placeholder{ visibility:hidden; }

.hero-sub{
  font:300 clamp(15px, 1.4vw, 18px)/1.6 var(--font-body);
  max-width:54ch; color:rgba(42,10,12,.9);
  margin:0 0 36px;
  opacity:0; transform:translateY(20px);
  animation:fadeUp 1s var(--ease-out) 1.4s forwards;
}
.hero-cta{
  display:flex; gap:14px; flex-wrap:wrap; align-items:center;
  opacity:0; transform:translateY(20px);
  animation:fadeUp 1s var(--ease-out) 1.6s forwards;
}

/* Buttons — base styles in common.css (hero concept) */
.homepage .btn{ cursor:none; }

.hero-play-btn{
  display:inline-flex; align-items:center; gap:14px;
  color:#2A0A0C; text-decoration:none;
  font:600 11px/1.15 var(--font-mono); letter-spacing:.25em; text-transform:uppercase;
  cursor:none; margin-left:18px;
}
.hero-play-btn .play{
  width:54px; height:54px; border-radius:50%;
  border:1px solid rgba(255,255,255,.4);
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.05); transition:all .4s var(--ease); position:relative;
}
.hero-play-btn .play::after{
  content:''; width:0; height:0;
  border-left:10px solid #fff; border-top:6px solid transparent; border-bottom:6px solid transparent;
  margin-left:3px;
}
.hero-play-btn:hover .play{ background:var(--gold); border-color:var(--gold); transform:scale(1.1); }
.hero-play-btn:hover .play::after{ border-left-color:var(--dark); }

/* Hero indicators */
.hero-indicators{
  position:absolute; bottom:8vh; left:5vw; z-index:4;
  display:flex; gap:14px; align-items:center;
}
.hero-indicators .label{ font:600 10px/1.15 var(--font-mono); letter-spacing:.3em; color:rgba(42,10,12,.68); }
.hero-indicators button{ background:rgba(255,255,255,.25); border:0; width:30px; height:1px; padding:0; cursor:none; transition:all .4s; }
.hero-indicators button.active{ background:var(--gold); width:60px; height:2px; }
.hero-indicators .count{ font:600 13px/1.15 var(--font-mono); letter-spacing:.15em; color:#2A0A0C; margin-left:8px; }

/* Scroll cue */
.hero-scroll-cue{
  position:absolute; right:5vw; bottom:8vh; z-index:4;
  display:flex; align-items:center; gap:12px;
  color:rgba(42,10,12,.68); text-decoration:none; cursor:none;
  font:600 10px/1.15 var(--font-mono); letter-spacing:.3em; text-transform:uppercase;
}
.hero-scroll-cue .line{
  width:1px; height:50px;
  background:linear-gradient(to bottom, transparent, var(--gold) 30%, var(--gold));
  position:relative; overflow:hidden;
}
.hero-scroll-cue .line::after{
  content:''; position:absolute; top:-50%; left:0; right:0; height:50%;
  background:linear-gradient(to bottom, transparent, #fff);
  animation:scrollLine 2.4s ease-in-out infinite;
}
@keyframes scrollLine { to{ top:100%; } }

/* Hero meta — horizontal row pinned to TOP-RIGHT, just inside the
   TR corner bracket. Items separated by a thin gold middot. */
.hero-meta{
  position:absolute; top:108px; right:calc(1.4vw + 50px); z-index:5;
  display:flex; flex-direction:row; align-items:center; gap:18px;
  font:600 10px/1.4 var(--font-mono); letter-spacing:.22em; text-transform:uppercase;
  color:rgba(42,10,12,.7);
  opacity:0; animation:fadeIn 1s 1.6s forwards;
}
.hero-meta > div{ display:inline-flex; align-items:center; }
.hero-meta > div + div::before{
  content:''; display:inline-block; width:4px; height:4px; border-radius:50%;
  background:var(--gold); opacity:.55; margin-right:18px;
}
.hero-meta strong{ color:var(--gold); font-weight:700; margin-right:.35em; }

@keyframes fadeUp { from{ opacity:0; transform:translateY(20px); } to{ opacity:1; transform:translateY(0); } }
@keyframes fadeIn { from{ opacity:0; } to{ opacity:1; } }

/* ============ MARQUEE (Splide auto-scroll) ============ */
.marquee{
  background:transparent;
  border-top:1px solid rgba(232,196,101,.15);
  border-bottom:1px solid rgba(232,196,101,.15);
  padding:26px 0; position:relative;
}
.marquee.splide .splide__track{ overflow:hidden; }
.marquee.splide .splide__list{ list-style:none; padding:0; margin:0; }
.marquee-item{
  display:inline-flex; align-items:center; gap:24px;
  padding:0 40px;
  font:600 30px/1.15 var(--font-display); color:rgba(42,10,12,.68);
  letter-spacing:-.01em; transition:color .3s;
  white-space:nowrap;
}
.marquee-item em{ color:var(--gold); font-style:normal; font-weight:500; }
.marquee-item .star{ color:var(--maroon-soft); font-style:normal; font-size:18px; }
.marquee-item:hover{ color:#2A0A0C; }

/* ============ STATS — ABOUT INTRO + NUMBERS ============ */
.stats{ padding:60px 5vw; 
  position:relative;
  background:transparent;
}
/* `.stats-inner` width cap now lives in assets/css/utils/layout.css (canonical `.container` at 1380px, aliased). */
.stats-intro{ margin-bottom:clamp(40px,5vw,64px); }
.stats-intro-box{
  display:grid; grid-template-columns:1.05fr 0.95fr; gap:0;
  align-items:stretch;
  min-height:clamp(320px,36vw,440px);
  padding:0;
  border:1px solid rgba(232,196,101,.12);
  border-radius:12px;
  background:var(--surface-glass);
  overflow:hidden;
}
.stats-intro-content{
  display:flex; flex-direction:column; justify-content:center;
  min-width:0;
  padding:clamp(36px,4.5vw,56px) clamp(32px,4vw,52px);
}
.stats-intro-title{
  font:500 clamp(32px,4.2vw,52px)/1.08 var(--font-display);
  letter-spacing:-0.005em; margin:0 0 18px; color:#2A0A0C;
  max-width:18ch;
}
.stats-intro-title em{
  font-style:normal; font-weight:400;
  background:var(--gold-shine); background-size:200% 200%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  animation:goldShimmer 6s linear infinite;
}
.stats-intro-body{
  font:300 17px/1.75 var(--font-body);
  color:rgba(42,10,12,.85);
  max-width:54ch;
}
.stats-intro-body p{ margin:0 0 14px; }
.stats-intro-body p:last-child{ margin-bottom:0; }
.stats-intro-body em{ color:var(--gold-deep); font-style:normal; font-weight:500; }
.stats-intro-cta{ margin-top:clamp(24px,3vw,32px); }
.stats-intro-cta .btn-primary{
  background:var(--maroon); color:#fff;
}
.stats-intro-cta .btn-primary:hover{
  background:var(--maroon-deep); color:#fff;
  transform:translateY(-3px);
}
.stats-intro-media{
  position:relative; min-height:100%;
  align-self:stretch;
  border-radius:0;
  overflow:hidden;
  background-size:cover; background-position:center;
  border:0;
}
.stats-intro-media::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(247,241,232,.22) 0%, transparent 28%);
  pointer-events:none;
}

/* stats-grid → common.css (shared with about page) */

/* ============ SECTION COMMON ============ */
.section{
  padding:60px 5vw 60px;
  position:relative;
  background:transparent;
}
body.fp-on .section{ padding-top:14vh; padding-bottom:14vh; }
/* `.section-inner` width cap now lives in assets/css/utils/layout.css (canonical `.container` at 1380px, aliased). */
.section-head{ margin-bottom:56px; }
.section-head.center{ text-align:center; }
.section-head .section-eyebrow,
.projects-head .section-eyebrow,
.cta-banner-inner .section-eyebrow,
.section-eyebrow--center{
  display:inline-flex; align-items:center; gap:14px;
  font:600 12px/1.15 var(--font-mono); letter-spacing:.4em; text-transform:uppercase;
  color:var(--gold-deep); margin-bottom:18px;
  opacity:1; animation:none;
}
.section-head:not(.center) .section-eyebrow::before,
.projects-head .section-eyebrow::before{
  content:''; width:60px; height:1px; background:var(--gold-deep);
}
.section-head.center .section-eyebrow::before,
.section-head.center .section-eyebrow::after,
.cta-banner-inner .section-eyebrow::before,
.cta-banner-inner .section-eyebrow::after,
.section-eyebrow--center::before,
.section-eyebrow--center::after{
  content:''; width:30px; height:1px; background:var(--gold-deep);
}
.overline{
  font:600 11px/1.15 var(--font-mono);
  letter-spacing:.3em; text-transform:uppercase;
  color:var(--gold); margin-bottom:18px;
  display:inline-flex; align-items:center; gap:12px;
}
.section-head.center .overline::before, .section-head.center .overline::after{
  content:''; width:30px; height:1px; background:var(--gold);
}
.section-head:not(.center) .overline::before{ content:''; width:30px; height:1px; background:var(--gold); }
.section-title{
  font:500 clamp(36px, 5vw, 72px)/1.05 var(--font-display);
  letter-spacing:-0.005em; margin:0 0 14px; color:#2A0A0C;
}
/* `.section-title em` styling is owned by child-theme.css `.text-shine`
   group — gold-shine gradient + shimmer, matching `.hero-title em` so
   homepage section titles share the same gold tone as the hero. */
.section-sub{ font:300 17px/1.65 var(--font-body); color:rgba(42,10,12,.82); max-width:62ch; margin:14px 0 0; }
.section-head.center .section-sub{ margin:14px auto 0; }
.section-num{
  font:600 11px/1.15 var(--font-mono);
  letter-spacing:.4em; color:var(--gold);
  display:block; margin-bottom:14px;
}

/* ============ SERVICES — ASYMMETRIC LAYOUT ============ */
.services-wrap{
  display:grid; grid-template-columns:1.2fr 1fr; gap:24px;
  position:relative;
}
.services-feature{
  position:relative; aspect-ratio:auto; min-height:560px;
  border-radius:8px; overflow:hidden; cursor:none;
  background:linear-gradient(135deg, #1A0808, #5A0E10);
  transition:transform .6s var(--ease);
}
.services-feature:hover{ transform:translateY(-8px); }
.services-feature .service-img{ position:absolute; inset:0; background-size:cover; background-position:center; transition:transform 1.4s var(--ease); }
.services-feature:hover .service-img{ transform:scale(1.06); }
.services-feature::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(14,6,6,.1) 0%, rgba(14,6,6,.4) 50%, rgba(14,6,6,.95) 100%);
  z-index:1;
}
.services-feature .service-content{ position:absolute; bottom:0; left:0; right:0; padding:44px; z-index:2; color:#2A0A0C; }
.services-feature .service-tag{
  font:600 10px/1.15 var(--font-mono); letter-spacing:.3em; color:var(--gold); margin-bottom:10px;
  display:inline-flex; align-items:center; gap:10px;
}
.services-feature .service-tag::before{ content:'★'; font-style:normal; color:var(--gold); }
.services-feature .service-title{
  font:500 clamp(36px, 4vw, 56px)/1.1 var(--font-display);
  margin:0 0 12px;
}
.services-feature .service-sub{ font:300 14px/1.55 var(--font-body); color:rgba(42,10,12,.84); max-width:52ch; }
.services-feature .service-arrow{
  position:absolute; top:36px; right:36px;
  width:54px; height:54px; border-radius:50%;
  background:rgba(255,255,255,.1); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center; color:#2A0A0C; font-size:18px;
  transition:all .4s var(--ease); z-index:2;
}
.services-feature:hover .service-arrow{ background:var(--gold); color:var(--dark); transform:rotate(45deg); }

.services-list{ display:flex; flex-direction:column; gap:14px; }
.service-row{
  position:relative; display:grid; grid-template-columns:140px 1fr auto; gap:18px; align-items:center;
  padding:14px; border:1px solid rgba(232,196,101,.18); border-radius:6px;
  background:rgba(14,6,6,.4); backdrop-filter:blur(6px);
  cursor:none; transition:all .4s var(--ease);
  overflow:hidden;
}
.service-row::after{
  content:''; position:absolute; left:0; top:0; bottom:0; width:0;
  background:linear-gradient(90deg, var(--maroon-deep), transparent);
  transition:width .5s var(--ease); z-index:0;
}
.service-row:hover{ border-color:var(--gold); transform:translateX(8px); }
.service-row:hover::after{ width:100%; }
.service-row > *{ position:relative; z-index:1; }
.service-row-img{
  width:140px; height:90px; background-size:cover; background-position:center;
  border-radius:4px; transition:transform .8s var(--ease);
}
.service-row:hover .service-row-img{ transform:scale(1.06); }
.service-row-text { color:#2A0A0C; }
.service-row-num{ font:600 10px/1.15 var(--font-mono); letter-spacing:.3em; color:var(--gold); margin-bottom:6px; }
.service-row-title{ font:500 22px/1.2 var(--font-display); margin:0 0 4px; color:#2A0A0C; }
.service-row-sub{ font:400 12px/1.5 var(--font-body); color:rgba(42,10,12,.75); margin:0; }
.service-row-arrow{
  width:36px; height:36px; border-radius:50%;
  border:1px solid rgba(232,196,101,.3); color:var(--gold);
  display:flex; align-items:center; justify-content:center;
  font-size:14px; transition:all .4s var(--ease); flex-shrink:0;
}
.service-row:hover .service-row-arrow{ background:var(--gold); color:var(--dark); border-color:var(--gold); }

/* ============ PROJECTS — MAGAZINE STYLE ============ */
.projects-section{ padding:60px 5vw 60px; position:relative; }
.projects-head{ display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:50px; flex-wrap:wrap; gap:20px; }
.projects-head .left{ flex:1; min-width:300px; }
.projects-head .right{ display:flex; gap:10px; align-items:flex-end; }

/* Featured project — full width parallax */
.project-featured{
  position:relative; height:60vh; min-height:480px;
  border-radius:8px; overflow:hidden;
  margin-bottom:18px; cursor:none;
}
.project-featured-img{
  position:absolute; inset:-10%; background-size:cover; background-position:center;
  transition:transform 1.4s var(--ease); filter:saturate(.95) contrast(1.05);
}
.project-featured:hover .project-featured-img{ transform:scale(1.05); }
.project-featured::before{
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(14,6,6,.2) 0%, transparent 30%, rgba(14,6,6,.9) 100%),
             linear-gradient(90deg, rgba(14,6,6,.6) 0%, transparent 50%);
}
.project-featured-info{ position:absolute; bottom:0; left:0; right:0; padding:50px; z-index:2; color:#2A0A0C; display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:24px; }
.project-featured-tag{ font:600 11px/1.15 var(--font-mono); letter-spacing:.3em; color:var(--gold); margin-bottom:12px; }
.project-featured-name{ font:500 clamp(30px, 4vw, 56px)/1.1 var(--font-display); margin:0 0 8px; max-width:14ch; }
.project-featured-desc{ font:300 14px/1.5 var(--font-body); color:rgba(42,10,12,.84); max-width:50ch; margin:0; }
.project-featured-stats{ display:flex; gap:32px; }
.project-featured-stat strong{ font:500 32px/1.15 var(--font-display); color:var(--gold); display:block; }
.project-featured-stat span{ font:600 9px/1.4 var(--font-mono); letter-spacing:.2em; text-transform:uppercase; color:rgba(42,10,12,.75); }

/* Featured project slider (big card) */
.featured-slider{ margin-bottom:40px; }
.featured-slider .splide__list{ list-style:none; padding:0; margin:0; }
.featured-slider .splide__slide{ box-sizing:border-box; }

/* Sub projects 3-col */
.projects-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:14px;
}
.project{
  position:relative; aspect-ratio:4/3; overflow:hidden; border-radius:6px;
  cursor:none; background:#1a0808;
}
.project-img{ position:absolute; inset:0; background-size:cover; background-position:center; filter:saturate(.9) contrast(1.05); transition:transform 1.4s var(--ease), filter .6s; }
.project:hover .project-img{ transform:scale(1.08); filter:saturate(1.1) contrast(1.1); }
.project::before{ content:''; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(14,6,6,.95) 100%); transition:background .4s; }
.project:hover::before{ background:linear-gradient(180deg, rgba(139,26,31,.3) 0%, rgba(14,6,6,.95) 100%); }
.project-info{ position:absolute; bottom:0; left:0; right:0; padding:22px 24px; z-index:2; color:#2A0A0C; }
.project-tag{ font:600 10px/1.15 var(--font-mono); letter-spacing:.3em; text-transform:uppercase; color:var(--gold); margin-bottom:8px; }
.project-name{ font:500 22px/1.2 var(--font-display); margin:0; }
.project-detail{ font:400 13px/1.5 var(--font-body); color:rgba(42,10,12,.82); margin-top:8px; max-height:0; overflow:hidden; opacity:0; transition:max-height .5s, opacity .4s .1s; }
.project:hover .project-detail{ max-height:60px; opacity:1; }
.project-arrow{
  position:absolute; top:18px; right:18px;
  width:38px; height:38px; border-radius:50%;
  background:var(--gold); color:var(--dark);
  display:flex; align-items:center; justify-content:center; font-size:14px; z-index:2;
  transform:scale(0) rotate(-45deg); opacity:0; transition:all .5s var(--ease);
}
.project:hover .project-arrow{ transform:scale(1) rotate(0); opacity:1; }
.projects-cta{ text-align:center; margin-top:40px; }
.arrow-btn{
  width:48px; height:48px; border-radius:50%;
  border:1px solid rgba(232,196,101,.3); background:rgba(255,255,255,.04);
  color:var(--gold); display:flex; align-items:center; justify-content:center;
  cursor:none; transition:all .3s; font-size:14px;
}
.arrow-btn:hover{ background:var(--gold); color:var(--dark); border-color:var(--gold); }

/* ============ PRESS — HORIZONTAL SCROLL CARDS ============ */
.press-section{ padding:60px 0 60px; position:relative; overflow:hidden; }
.press-section .section-head{ padding:0 5vw; }
.press-logos{
  display:flex; gap:30px; justify-content:center;
  padding:0 5vw 50px;
  border-bottom:1px solid rgba(232,196,101,.15);
  flex-wrap:wrap;
  /* width cap → assets/css/utils/layout.css (.container aliases `.press-logos`) */
}
.press-logo{
  font:700 22px/1.15 var(--font-display); color:rgba(42,10,12,.68);
  letter-spacing:0.02em; transition:color .3s;
}
.press-logo:hover{ color:var(--gold); }
.press-logo .dash{ color:var(--maroon-soft); margin-right:14px; font-style:normal; }

.press-slider{ padding:50px 5vw 0; position:relative; }
.press-slider .splide__list{ list-style:none; padding:0; margin:0; }
.press-slider .splide__slide{ height:auto; }
.press-nav{
  display:flex; gap:14px; justify-content:center;
  margin-top:40px;
}
.press-article{ cursor:pointer; }
.press-article-img{ aspect-ratio:4/3; border-radius:6px; overflow:hidden; margin-bottom:16px; position:relative; }
.press-article-img > div{ position:absolute; inset:0; background-size:cover; background-position:center; transition:transform 1s var(--ease); }
.press-article:hover .press-article-img > div{ transform:scale(1.06); }
.press-article-img::after{
  content:'READ →'; position:absolute; bottom:18px; right:18px;
  background:var(--gold); color:var(--dark);
  padding:8px 14px; border-radius:4px;
  font:700 10px/1.15 var(--font-mono); letter-spacing:.2em;
  opacity:0; transform:translateX(-10px); transition:all .4s var(--ease); z-index:2;
}
.press-article:hover .press-article-img::after{ opacity:1; transform:translateX(0); }
.press-article-source{ font:600 10px/1.15 var(--font-mono); letter-spacing:.3em; text-transform:uppercase; color:var(--maroon-soft); margin-bottom:8px; }
.press-article-title{ font:500 20px/1.4 var(--font-display); color:#2A0A0C; margin:0; }

/* ============ USP — VERTICAL TIMELINE ============ */
.usp-section{ padding:60px 5vw; position:relative; }
/* `.usp-section .section-head` width cap → assets/css/utils/layout.css (aliased). */
.usp-section .section-head{ margin-bottom:60px; }
.usp-cols{
  /* width cap → assets/css/utils/layout.css (.container aliases `.usp-cols`) */
  display:flex; gap:10px;
  height:380px;
}
.usp-card{
  --dur:.85s;
  --ease-slide:cubic-bezier(.22,1,.36,1);
  position:relative;
  flex:1 1 0; min-width:96px;
  padding:28px 22px;
  background:#160808;
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  overflow:hidden;
  cursor:pointer;
  will-change:flex-grow;
  transition:flex var(--dur) var(--ease-slide), border-color var(--dur) var(--ease-slide);
}
/* Head — absolute, vertically centered when closed, moves to top on hover */
.usp-card-head{
  position:absolute;
  left:22px; right:22px;
  top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; gap:20px;
  z-index:1;
  transition:top var(--dur) var(--ease-slide), transform var(--dur) var(--ease-slide);
}
.usp-card:hover .usp-card-head{
  top:28px;
  transform:translateY(0);
}
/* Demo image as background layer — set via inline style on .usp-bg child */
.usp-bg{
  position:absolute; inset:0;
  background-size:cover; background-position:center; background-repeat:no-repeat;
  opacity:.45;
  transform:scale(1.04);
  transition:opacity var(--dur) var(--ease-slide), transform 1.6s var(--ease-slide);
  pointer-events:none;
  z-index:0;
}
/* Dark + brand-tone overlay for legibility */
.usp-card::after{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(70% 60% at 50% 0%, rgba(14,6,6,.55), transparent 60%),
    radial-gradient(80% 80% at 75% 90%, rgba(139,26,31,.22), transparent 65%),
    linear-gradient(180deg, rgba(14,6,6,.18) 0%, rgba(14,6,6,.55) 60%, rgba(14,6,6,.88) 100%);
  transition:opacity var(--dur) var(--ease-slide);
  pointer-events:none;
  z-index:0;
}
.usp-card:hover{
  flex:3.8 1 0;
  border-color:rgba(232,196,101,.5);
}
.usp-card:hover .usp-bg{ opacity:.7; transform:scale(1); }
.usp-cols:hover .usp-card:not(:hover){ flex:.6 1 0; }
.usp-cols:hover .usp-card:not(:hover) .usp-bg{ opacity:.28; }
.usp-card > *:not(.usp-bg):not(.usp-card-head):not(.usp-card-body){ position:relative; z-index:1; }

.usp-num{
  font:500 56px/1.15 var(--font-display);
  background:linear-gradient(180deg, var(--gold) 0%, var(--maroon-soft) 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  margin:0;
  transition:transform var(--dur) var(--ease-slide);
}
.usp-card:hover .usp-num{ transform:translateY(-4px); }

.usp-icon-row{
  display:flex; align-items:center; gap:12px;
  font:600 11px/1.15 var(--font-mono); letter-spacing:.32em; color:var(--gold);
  white-space:nowrap;
}

/* Title + sub panel — absolute at bottom; head stays centered in row 2 when closed */
.usp-card-body{
  position:absolute;
  left:22px; right:22px; bottom:32px;
  display:flex; flex-direction:column; gap:12px;
  pointer-events:none;
  z-index:1;
  max-width:340px;
}
.usp-card:hover .usp-card-body{ pointer-events:auto; }
.usp-icon{
  width:44px; height:44px;
  display:grid; place-items:center;
  border:1px solid rgba(232,196,101,.35);
  border-radius:50%;
  color:var(--gold);
  background:rgba(232,196,101,.08);
  flex-shrink:0;
  transition:background var(--dur) var(--ease-slide), border-color var(--dur) var(--ease-slide), transform var(--dur) var(--ease-slide);
}
.usp-icon svg{ width:22px; height:22px; display:block; }
.usp-card:hover .usp-icon{
  background:linear-gradient(140deg, rgba(232,196,101,.25), rgba(139,26,31,.18));
  border-color:rgba(232,196,101,.7);
  transform:scale(1.05);
}

/* Bottom accent — thin gold rail hint */
.usp-card .usp-rail{
  position:absolute; left:22px; right:22px; bottom:18px;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(232,196,101,.4), transparent);
  opacity:.7;
  z-index:1;
  transition:opacity var(--dur) var(--ease-slide), transform var(--dur) var(--ease-slide);
}
.usp-card:hover .usp-rail{ opacity:0; transform:translateY(8px); }
.usp-title{
  font:500 22px/1.25 var(--font-display); color:#2A0A0C; margin:0;
  opacity:0;
  transform:translateY(8px);
  transition:opacity .5s var(--ease-slide) .1s, transform .5s var(--ease-slide) .1s;
}
.usp-title em{ font-style:normal; color:var(--gold); }
.usp-card:hover .usp-title{ opacity:1; transform:none; }
.usp-sub{
  font:300 13px/1.6 var(--font-body); color:rgba(42,10,12,.85); margin:0;
  opacity:0;
  transform:translateY(8px);
  transition:opacity .55s var(--ease-slide) .22s, transform .55s var(--ease-slide) .22s;
}
.usp-card:hover .usp-sub{ opacity:1; transform:none; }

@media (max-width: 900px){
  .usp-cols{ flex-direction:column; height:auto; gap:12px; }
  .usp-card{
    flex:1 1 auto; min-height:auto;
    grid-template-rows:auto auto auto;
    padding:28px 24px 32px;
    display:flex; flex-direction:column; gap:16px;
  }
  .usp-card:hover{ flex:1 1 auto; }
  .usp-cols:hover .usp-card:not(:hover){ flex:1 1 auto; }
  .usp-cols:hover .usp-card:not(:hover) .usp-bg{ opacity:.45; }
  /* Always show image, title, sub on mobile */
  .usp-card .usp-bg{ opacity:.45; transform:scale(1); }
  .usp-card-head{ display:flex; flex-direction:column; gap:14px; }
  .usp-card-body{
    position:static; width:auto;
    pointer-events:auto;
  }
  .usp-title, .usp-sub{
    opacity:1; transform:none;
  }
  .usp-card .usp-rail{ display:none; }
}

/* ============ REVIEWS — Customer testimonials ============ */
.reviews-section{ padding:60px 5vw; position:relative; }
/* `.reviews-section .section-head` + `.reviews-slider` width cap →
 * assets/css/utils/layout.css (aliased). Only non-cap props remain here. */
.reviews-section .section-head{ margin-bottom:60px; }
.reviews-slider{ padding:0 4px; position:relative; }
.reviews-slider .splide__list{ list-style:none; padding:0; margin:0; }
.reviews-slider .splide__slide{ height:auto; }

.review-card{
  position:relative;
  height:100%;
  background:var(--surface-glass);
  border:1px solid var(--surface-glass-border);
  border-radius:16px;
  padding:48px 32px 32px;
  display:flex; flex-direction:column; gap:24px;
  transition:border-color .4s var(--ease), transform .4s var(--ease), background .4s var(--ease);
}
.review-card:hover{
  border-color:var(--surface-glass-border-hover);
  background:var(--surface-glass-hover);
  transform:translateY(-4px);
}
.review-quote{
  position:absolute; top:8px; left:28px;
  pointer-events:none;
}
.review-text{
  font:400 16px/1.65 var(--font-body);
  color:rgba(42,10,12,.9);
  margin:0;
  flex:1;
  position:relative;
  z-index:1;
}
.review-meta{
  display:flex; align-items:center; gap:14px;
  padding-top:18px;
  border-top:1px solid rgba(232,196,101,.12);
}
.review-avatar{
  width:48px; height:48px; border-radius:50%;
  background-size:cover; background-position:center;
  border:2px solid rgba(232,196,101,.4);
  flex-shrink:0;
}
.review-name{
  font:500 16px/1.2 var(--font-display); color:#2A0A0C;
}
.review-role{
  font:600 10px/1.4 var(--font-mono); letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold);
  margin-top:4px;
}
.reviews-nav{
  display:flex; gap:14px; justify-content:center;
  margin-top:40px;
}

@media (max-width:900px){
  .reviews-section{ padding:40px 5vw; }
  .reviews-section .section-head{ margin-bottom:40px; }
  .reviews-nav{ margin-top:24px; }
  .review-card{ padding:42px 24px 24px; }
}

/* ============ CTA Banner — FIREWORKS ============ */
.cta-banner{
  position:relative; padding:80px 5vw; text-align:center;
  background:transparent; overflow:hidden;
}
.cta-banner-img{
  position:absolute; inset:0; background-size:cover; background-position:center; opacity:.18;
}
.cta-banner::before{
  content:''; position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(circle at 80% 30%, rgba(232,196,101,.18) 0%, transparent 50%),
    radial-gradient(circle at 20% 70%, rgba(139,26,31,.4) 0%, transparent 60%);
}
.cta-banner .firework{ z-index:1; opacity:.9; }
.cta-banner .firework.cfw-1{ top:10%; left:10%; }
.cta-banner .firework.cfw-2{ top:18%; right:12%; animation-delay:1s; width:200px; height:200px; }
.cta-banner .firework.cfw-3{ bottom:20%; left:20%; animation-delay:2s; }
.cta-banner .firework.cfw-4{ bottom:14%; right:18%; animation-delay:3s; }
.cta-banner-inner{ position:relative; z-index:3; max-width:800px; margin:0 auto; color:#2A0A0C; text-align:center; }
.cta-banner-title{
  font:500 clamp(40px, 6vw, 88px)/1.05 var(--font-display);
  letter-spacing:-0.01em; margin:0 0 22px;
}
.cta-banner-title em{ color:var(--gold); font-weight:400; }
.cta-banner-sub{ font:300 17px/1.65 var(--font-body); color:rgba(42,10,12,.86); margin:0 0 40px; max-width:55ch; margin-left:auto; margin-right:auto; }
.cta-banner-buttons{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* ============ FOOTER ============
 * Legacy footer block removed in the 2026-06 footer remake. The footer
 * is now owned end-to-end by the child theme:
 *   - markup ........... wp-content/themes/monatheme-child/footer.php
 *   - layout ........... assets/css/child-theme.css §FOOTER
 *   - social circles ... assets/css/components/social-circles.css
 *   - contact icons .... mona_child_footer_contact_icon() (FA Pro)
 *
 * The legacy rules below (`.footer`, `.footer-col`, `.footer-contact .fc-ico`,
 * `.social`, etc.) referenced classes that no longer exist in markup, and
 * the ones that DID overlap (`.footer-grid`, `.footer-bottom`,
 * `.footer-bottom a`) were leaking unwanted `max-width`, `margin:0 auto`,
 * `margin-left:18px`, and `cursor:none` into the new layout. Purged. */

/* ============ FADE-IN ============ */
.reveal{ opacity:0; transform:translateY(40px); transition:opacity 1s var(--ease-out), transform 1s var(--ease-out); }
.reveal.in{ opacity:1; transform:none; }
.reveal-stagger > *{ opacity:0; transform:translateY(30px); transition:opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.reveal-stagger.in > *{ opacity:1; transform:none; }
.reveal-stagger.in > *:nth-child(1){ transition-delay:.05s; }
.reveal-stagger.in > *:nth-child(2){ transition-delay:.12s; }
.reveal-stagger.in > *:nth-child(3){ transition-delay:.19s; }
.reveal-stagger.in > *:nth-child(4){ transition-delay:.26s; }
.reveal-stagger.in > *:nth-child(5){ transition-delay:.33s; }
.reveal-stagger.in > *:nth-child(6){ transition-delay:.40s; }
.reveal-stagger.in > *:nth-child(7){ transition-delay:.47s; }
.reveal-stagger.in > *:nth-child(8){ transition-delay:.54s; }

/* ============ RESPONSIVE ============ */
@media (max-width: 1024px) {
  body{ cursor:auto; }
  .cursor, .cursor-follow{ display:none; }
  .services-wrap{ grid-template-columns:1fr; }
  .services-feature{ min-height:400px; }
  .projects-grid{ grid-template-columns:repeat(2,1fr); }
  .stats-intro-box{ grid-template-columns:1fr; }
  .stats-intro-content{ padding:clamp(28px,5vw,40px); }
  .stats-intro-media{ min-height:clamp(220px,42vw,320px); order:-1; }
  .stats-intro-title{ max-width:none; }
  .stats-grid{ grid-template-columns:repeat(2,1fr); }
  .stat-card:not(:last-child){ border-right:0; }
  .press-slider{ padding:40px 5vw 0; }
  .press-nav{ margin-top:24px; }
  /* `.footer-grid` responsive moved to child-theme.css §FOOTER */
  .fcta-wrap{ right:14px; bottom:14px; gap:8px; }
  .hero-side-stats, .hero-meta{ display:none; }
  .nav{ gap:12px; }
  .hero .firework.fw-2, .hero .firework.fw-4{ display:none; }

  /* Hamburger + drawer */
  .nav-toggle{ display:inline-flex; }
  .nav-cta{ margin-left:auto; padding:8px 14px; font-size:10px; }
  .nav-menu{
    position:fixed; top:0; left:0; right:0;
    display:flex; flex-direction:column; gap:0;
    background:rgba(8,4,4,.98);
    backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
    padding:96px 32px 40px;
    max-height:100vh; overflow-y:auto;
    opacity:0; transform:translateY(-100%); pointer-events:none;
    transition:opacity .35s cubic-bezier(.22,1,.36,1), transform .45s cubic-bezier(.22,1,.36,1);
    z-index:99;
    border-bottom:1px solid rgba(232,196,101,.18);
  }
  .nav-menu.open{ opacity:1; transform:translateY(0); pointer-events:auto; }
  .nav-menu li{ width:100%; border-bottom:1px solid rgba(255,255,255,.06); list-style:none; }
  .nav-menu li:last-child{ border-bottom:0; }
  .nav-menu a{
    display:block; width:100%; padding:18px 0;
    font-size:18px; letter-spacing:.04em;
  }
  .nav-menu li > a:not(.active):hover::before{ display:none; }
  .nav-menu .has-submenu::after{ display:none; }
  .nav-menu .submenu{
    position:static; opacity:1; transform:none; pointer-events:auto;
    background:transparent; backdrop-filter:none;
    border:0; border-radius:0; padding:0 0 18px 18px;
    min-width:auto;
  }
  .nav-menu .submenu li{ border:0; }
  .nav-menu .submenu a{ padding:10px 0; font-size:14px; color:rgba(42,10,12,.75); }
  .nav-menu .submenu a:hover{ color:var(--gold); background:transparent; }
}
@media (max-width: 640px) {
  .projects-grid{ grid-template-columns:1fr; }
  .stats-grid{ grid-template-columns:1fr 1fr; }
  /* `.footer-grid` + `.footer-bottom` responsive moved to child-theme.css §FOOTER */
  .section, .stats, .usp-section{ padding:60px 5vw; }
  .hero-corner{ display:none; }
  .marquee-item{ font-size:22px; }
  .service-row{ grid-template-columns:1fr; }
  .service-row-img{ width:100%; height:140px; }
  .usp-timeline::before{ left:30px; }
  .usp-row{ grid-template-columns:60px 1fr; gap:14px; }
  .usp-num{ font-size:36px; }
  .usp-row::after{ left:30px; }
  .usp-content{ padding-left:14px; }
  .project-featured-info{ flex-direction:column; align-items:flex-start; padding:30px; }
  .project-featured-stats{ gap:18px; }
}

@media (prefers-reduced-motion: reduce) {
  *{ animation:none !important; transition:none !important; }
  .reveal, .reveal-stagger > *{ opacity:1; transform:none; }
  .hero-title .word .inner{ transform:translateY(0); }
}