/* ============== TOKENS ============== */
:root{
  --bg:#ECE5D6;             /* warm cream */
  --bg-2:#E2DAC8;
  --ink:#15110A;
  --ink-dim:rgba(21,17,10,.6);
  --ink-faint:rgba(21,17,10,.25);
  --line:rgba(21,17,10,.85);
  --line-soft:rgba(21,17,10,.15);
  --paper:#F6F0E0;

  --display:'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
  --mono:'DM Mono', ui-monospace, Menlo, monospace;
  --ease:cubic-bezier(0.16,1,0.3,1);

  /* theme palettes */
  --cm:#C68A52;     --cm-ink:#2B1A0A;   --cm-2:#7A4520;
  --s7:#E6651A;     --s7-ink:#3D1A00;   --s7-2:#FFB347;
  --s8:#FF5FB4;     --s8-ink:#2A0B1C;   --s8-2:#00D4FF;
  --gng:#1E1812;    --gng-ink:#E8CC80;  --gng-2:#3A2818;
  --rr:#7A1212;     --rr-ink:#F4E6D8;   --rr-2:#3A0606;
  --vs:#1E3490;     --vs-ink:#F0E4C2;   --vs-2:#C9A246;

  --cm-font:'Caveat', cursive;
  --s7-font:'Lobster', cursive;
  --s8-font:'Boogaloo', cursive;
  --gng-font:'Rye', cursive;
  --rr-font:'Abril Fatface', cursive;
  --vs-font:'Cinzel Decorative', cursive;
}

/* ============== RESET ============== */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--display);
  font-weight:400;
  font-size:16px;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit;background:none;border:none;color:inherit;cursor:pointer}
img{display:block;max-width:100%}
::selection{background:var(--ink);color:var(--bg)}

.ink-italic{font-style:italic;font-weight:400}
.eyebrow{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.04em;
  color:var(--ink-dim);
  display:inline-block;
}

/* ============== TOPBAR ============== */
.topbar{
  position:sticky;top:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;
  padding:14px 28px;
  background:var(--bg);
  border-bottom:1.5px solid var(--line);
}
.brand{
  display:inline-flex;align-items:center;gap:12px;
  text-align:left;
}
.brand-logo{
  width:42px;height:42px;flex-shrink:0;
  color:var(--ink);
  display:block;
}
.brand-logo svg{width:100%;height:100%;display:block}
.brand-text{display:flex;flex-direction:column;line-height:.95}
.brand-line-1{
  font-family:var(--vs-font);
  font-weight:700;
  font-size:14px;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.brand-line-2{
  font-family:var(--display);
  font-style:italic;
  font-weight:400;
  font-size:14px;
  letter-spacing:-.005em;
  margin-top:2px;
  opacity:.85;
}
.topnav{display:flex;gap:24px}
.topnav a{
  font-family:var(--mono);
  font-size:12.5px;
  position:relative;
  padding:6px 0;
}
.topnav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;
  background:var(--ink);transform:scaleX(0);transform-origin:left;
  transition:transform .3s var(--ease);
}
.topnav a:hover::after{transform:scaleX(1)}

.top-date{display:inline-flex;align-items:center}
.td-pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 16px;
  border:1.5px solid var(--line);
  border-radius:999px;
  background:var(--paper);
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.02em;
}
.td-pill::before{
  content:"";
  width:7px;height:7px;border-radius:50%;
  background:#23a070;
  box-shadow:0 0 0 3px rgba(35,160,112,.18);
}
@media (max-width:1000px){ .topnav{display:none} }

/* ============== HERO ============== */
.hero{
  position:relative;
  padding:56px 28px 40px;
  max-width:1500px;
  margin:0 auto;
  overflow:visible;
}
.hero-grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:48px;
  align-items:center;
  margin-bottom:48px;
}
.hero-meta{
  display:flex;gap:8px;flex-wrap:wrap;
  margin-bottom:28px;
}
.kbd{
  font-family:var(--mono);
  font-size:11px;
  padding:6px 11px;
  border:1.5px solid var(--line);
  border-radius:999px;
  background:var(--bg-2);
}
.hero-title{
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(48px, 7.5vw, 124px);
  line-height:.92;
  letter-spacing:-.035em;
  margin:0 0 28px;
  text-wrap:balance;
}
.hero-title .ink-italic{font-style:italic;font-weight:500;letter-spacing:-.025em}
.hl{
  position:relative;
  display:inline-block;
  padding:0 .12em;
}
.hl-pink{background:var(--s8);color:var(--ink);}

.hero-lede{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(17px, 1.4vw, 21px);
  line-height:1.42;
  max-width:520px;
  margin:0 0 32px;
  color:var(--ink);
  text-wrap:pretty;
}
.hero-lede em{font-style:italic}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap}
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:16px 22px;
  font-family:var(--display);
  font-weight:500;
  font-size:15px;
  border:1.5px solid var(--line);
  border-radius:999px;
  transition:background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
  cursor:pointer;
}
.btn:hover{transform:translateY(-2px)}
.btn-dark{background:var(--ink);color:var(--bg)}
.btn-dark:hover{background:var(--s8);color:var(--ink)}
.btn-outline{background:transparent;color:var(--ink)}
.btn-outline:hover{background:var(--ink);color:var(--bg)}

/* ============== HERO SCENE — ROTATING BOX ============== */
.hero-scene{
  position:relative;
  perspective:1600px;
  min-height:520px;
  display:flex;align-items:center;justify-content:center;
}
.scene-stage{
  position:relative;
  width:100%;
  height:520px;
  display:flex;align-items:center;justify-content:center;
  transform-style:preserve-3d;
}
.scene-floor{
  position:absolute;
  left:50%;top:78%;
  width:520px;height:120px;
  margin-left:-260px;
  transform:rotateX(75deg);
  background:radial-gradient(ellipse, rgba(21,17,10,.22), transparent 70%);
  filter:blur(8px);
  pointer-events:none;
}
.prism{
  position:relative;
  width:320px;height:320px;
  transform-style:preserve-3d;
  transform:rotateX(-14deg) rotateY(0deg);
  transition:transform 1.4s var(--ease);
}
.face{
  position:absolute;
  inset:0;
  width:320px;height:320px;
  transform-style:preserve-3d;
  backface-visibility:hidden;
}
/* 6 faces of a hex prism — translateZ = (w/2) / tan(30°) ≈ 0.866w. w=320 → 277 */
.face[data-theme="cm"]{ transform: rotateY(  0deg) translateZ(277px); }
.face[data-theme="s7"]{ transform: rotateY( 60deg) translateZ(277px); }
.face[data-theme="s8"]{ transform: rotateY(120deg) translateZ(277px); }
.face[data-theme="gng"]{ transform: rotateY(180deg) translateZ(277px); }
.face[data-theme="rr"]{ transform: rotateY(240deg) translateZ(277px); }
.face[data-theme="vs"]{ transform: rotateY(300deg) translateZ(277px); }

/* Each face IS the box opened: 3D-style isometric room */
.face-room{
  position:relative;
  width:100%;height:100%;
  border-radius:8px;
  overflow:hidden;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.4);
}
.room-wall{
  position:absolute;inset:0;
}
.room-wall-l{
  background:linear-gradient(135deg, var(--face-wall-l, #333), var(--face-wall-l-2, #111));
}
.room-wall-r{
  left:50%;
  background:linear-gradient(225deg, var(--face-wall-r, #444), var(--face-wall-r-2, #222));
}
.room-floor{
  position:absolute;left:0;right:0;bottom:0;height:38%;
  background:linear-gradient(180deg, var(--face-floor-1, #222), var(--face-floor-2, #000));
  box-shadow:inset 0 4px 12px rgba(0,0,0,.5);
}
.room-prop{
  position:absolute;
}
.room-label{
  position:absolute;left:14px;bottom:12px;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:5px 9px;
  border:1px solid rgba(255,255,255,.6);
  border-radius:999px;
  background:rgba(0,0,0,.35);
  color:#fff;
  backdrop-filter:blur(4px);
}

/* === CM face === */
.face-cm{ --face-wall-l:#7a4520; --face-wall-l-2:#3a1f0a; --face-wall-r:#9b5a2a; --face-wall-r-2:#4a2a10; --face-floor-1:#3a2410; --face-floor-2:#1a0e04; }
.face-cm .face-room::before{
  content:"";position:absolute;inset:0;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='2'/><feColorMatrix values='0 0 0 0 .2 0 0 0 0 .1 0 0 0 0 .04 0 0 0 .5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode:overlay;
  opacity:.7;
}
.prop-fire{
  left:48%;bottom:20%;width:48px;height:60px;
  background:
    radial-gradient(ellipse at 50% 100%, #ffcc55 0%, #ff7a1a 35%, #c8341a 70%, transparent 80%);
  border-radius:50% 50% 30% 30% / 60% 60% 30% 30%;
  filter:blur(.5px);
  animation:flicker 1.6s ease-in-out infinite alternate;
}
.prop-fire::after{
  content:"";position:absolute;left:-10px;right:-10px;bottom:-2px;height:10px;
  background:radial-gradient(ellipse, #2a1a0a, transparent 70%);
}
.prop-rock{
  left:14%;bottom:18%;width:60px;height:36px;
  background:radial-gradient(ellipse at 30% 30%, #876247 0%, #4a2c18 70%);
  border-radius:60% 50% 50% 60% / 70% 70% 40% 40%;
}
.prop-hide{
  right:12%;bottom:22%;width:56px;height:64px;
  background:linear-gradient(180deg, #b78754 0%, #6b3a18 80%);
  clip-path:polygon(20% 0%, 80% 0%, 100% 20%, 95% 90%, 60% 100%, 30% 95%, 5% 70%, 0% 30%);
}

/* === S7 face === */
.face-s7{ --face-wall-l:#c8a020; --face-wall-l-2:#7a4a08; --face-wall-r:#e8621a; --face-wall-r-2:#8b2500; --face-floor-1:#5a2410; --face-floor-2:#2a1004; }
.face-s7 .face-room::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,200,80,.4), transparent 30%),
    radial-gradient(circle at 70% 70%, rgba(255,100,40,.3), transparent 30%);
}
.face-s7 .room-wall-l{
  background:linear-gradient(135deg, #c8a020, #7a4a08),
    radial-gradient(circle at 20% 40%, transparent 8px, rgba(0,0,0,.18) 9px, transparent 11px) 0 0/26px 26px;
  background-blend-mode:normal, multiply;
}
.prop-disco{
  left:42%;top:14%;width:54px;height:54px;
  border-radius:50%;
  background:
    repeating-conic-gradient(from 0deg, #fff 0 8deg, #c98 8deg 16deg);
  box-shadow:0 0 20px rgba(255,220,140,.55);
  animation:spin 6s linear infinite;
}
.prop-vinyl{
  left:14%;bottom:14%;width:62px;height:62px;border-radius:50%;
  background:
    radial-gradient(circle, #ffb347 0 8px, #1a0a04 9px 11px, #2a1004 12px 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1), 0 6px 16px rgba(0,0,0,.4);
  animation:spin 8s linear infinite;
}
.prop-lamp{
  right:16%;bottom:18%;width:36px;height:46px;
  background:linear-gradient(180deg, #ff8c1a 0%, #c8341a 100%);
  border-radius:50% 50% 20% 20%;
  box-shadow:0 0 24px rgba(255,140,26,.55);
}

/* === S8 face === */
.face-s8{ --face-wall-l:#2a0b1c; --face-wall-l-2:#0e0410; --face-wall-r:#1c0040; --face-wall-r-2:#080018; --face-floor-1:#1a0028; --face-floor-2:#040008; }
.face-s8 .face-room::before{
  content:"";position:absolute;inset:0;
  background:
    repeating-linear-gradient(0deg, transparent 0 11px, rgba(0,212,255,.12) 11px 12px),
    repeating-linear-gradient(90deg, transparent 0 11px, rgba(255,95,180,.1) 11px 12px);
}
.prop-neon{
  left:14%;top:18%;width:60%;height:8px;
  background:linear-gradient(90deg, transparent, #ff5fb4, #00d4ff, transparent);
  box-shadow:0 0 12px #ff5fb4, 0 0 24px #00d4ff;
  border-radius:4px;
}
.prop-neon::after{
  content:"";position:absolute;left:0;right:0;top:14px;height:5px;
  background:linear-gradient(90deg, transparent, #00d4ff, transparent);
  box-shadow:0 0 10px #00d4ff;
  border-radius:3px;
}
.prop-tape{
  left:16%;bottom:18%;width:74px;height:42px;
  background:linear-gradient(180deg, #ff5fb4 0%, #c93a8a 100%);
  border-radius:6px;
  box-shadow:0 4px 14px rgba(0,0,0,.4), inset 0 2px 0 rgba(255,255,255,.2);
}
.prop-tape::before, .prop-tape::after{
  content:"";position:absolute;top:13px;width:14px;height:14px;border-radius:50%;
  background:radial-gradient(circle, #2a0b1c 0 4px, #fff 5px 6px, transparent 7px);
}
.prop-tape::before{left:14px}
.prop-tape::after{right:14px}
.prop-tv{
  right:14%;bottom:16%;width:64px;height:48px;
  background:linear-gradient(180deg, #444 0%, #1a1a1a 100%);
  border-radius:6px;
  border:2px solid #0a0a0a;
  box-shadow:0 6px 14px rgba(0,0,0,.5);
}
.prop-tv::before{
  content:"";position:absolute;inset:5px;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.06) 0 2px, transparent 2px 4px),
    linear-gradient(135deg, #00d4ff, #ff5fb4);
  border-radius:3px;
}

/* === GNG face === */
.face-gng{ --face-wall-l:#1e1812; --face-wall-l-2:#0a0805; --face-wall-r:#2a1f15; --face-wall-r-2:#100a06; --face-floor-1:#0e0a06; --face-floor-2:#040302; }
.face-gng .face-room::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(232,204,128,.18), transparent 60%);
}
.face-gng .room-wall-l{
  background:linear-gradient(135deg, #1e1812, #0a0805);
}
.face-gng .room-wall-r{
  background:linear-gradient(225deg, #2a1f15, #100a06);
}
.face-gng .room-wall-r::after{
  content:"";position:absolute;inset:0;
  background:
    repeating-linear-gradient(90deg, transparent 0 18px, rgba(232,204,128,.08) 18px 19px);
}
.prop-bottle{
  left:18%;bottom:20%;width:18px;height:50px;
  background:linear-gradient(180deg, #5a3a1a 0%, #8b6020 50%, #c9a44a 100%);
  border-radius:30% 30% 8% 8%;
  box-shadow:0 4px 10px rgba(0,0,0,.5);
}
.prop-bottle::before{
  content:"";position:absolute;left:6px;top:-8px;width:6px;height:10px;
  background:#3a2810;border-radius:2px;
}
.prop-hat{
  left:44%;top:22%;width:56px;height:34px;
}
.prop-hat::before{
  content:"";position:absolute;left:8px;top:8px;width:40px;height:22px;
  background:linear-gradient(180deg, #1a1410 0%, #050302 100%);
  border-radius:50% 50% 20% 20% / 60% 60% 30% 30%;
}
.prop-hat::after{
  content:"";position:absolute;left:0;bottom:0;width:56px;height:6px;
  background:#0a0805;border-radius:50%;
  box-shadow:0 0 0 1px rgba(232,204,128,.4);
}
.prop-table{
  right:14%;bottom:18%;width:56px;height:30px;
  background:linear-gradient(180deg, #3a2818 0%, #1a1008 100%);
  border-radius:4px;
  box-shadow:0 6px 12px rgba(0,0,0,.6);
}
.prop-table::after{
  content:"";position:absolute;left:14px;top:-12px;width:18px;height:14px;
  background:radial-gradient(ellipse, rgba(232,204,128,.4), transparent 60%);
}

/* === RR face === */
.face-rr{ --face-wall-l:#7a1212; --face-wall-l-2:#3a0606; --face-wall-r:#8b1a1a; --face-wall-r-2:#400808; --face-floor-1:#2a0606; --face-floor-2:#100202; }
.face-rr .face-room::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(232,204,128,.15), transparent 50%);
}
.prop-curtain{
  left:0;top:0;bottom:38%;width:50%;
  background:
    repeating-linear-gradient(90deg, rgba(60,8,8,.5) 0, rgba(160,24,24,.6) 10px, rgba(60,8,8,.5) 20px);
}
.prop-curtain::after{
  content:"";position:absolute;left:0;right:0;top:0;height:14px;
  background:linear-gradient(180deg, #c9a246 0%, #7a5a20 100%);
}
.prop-sofa{
  right:10%;bottom:20%;width:90px;height:48px;
  background:linear-gradient(180deg, #c9a246 0%, #7a5a20 60%, #5a3a10 100%);
  border-radius:24px 24px 8px 8px;
  box-shadow:0 6px 14px rgba(0,0,0,.5);
}
.prop-sofa::after{
  content:"";position:absolute;left:8px;right:8px;top:6px;height:18px;
  background:#3a0808;border-radius:14px;
}
.prop-candle{
  left:24%;bottom:30%;width:8px;height:32px;
  background:linear-gradient(180deg, #f4e6d8 0%, #c9a246 100%);
  border-radius:2px;
}
.prop-candle::after{
  content:"";position:absolute;left:1px;top:-8px;width:6px;height:8px;
  background:radial-gradient(ellipse at 50% 100%, #ffe080, #ff7a1a 80%);
  border-radius:50% 50% 30% 30%;
  filter:blur(.6px);
  box-shadow:0 0 18px #ffb347;
  animation:flicker 1.4s ease-in-out infinite alternate;
}

/* === VS face === */
.face-vs{ --face-wall-l:#1e3490; --face-wall-l-2:#0e1840; --face-wall-r:#2a4a8c; --face-wall-r-2:#0a1430; --face-floor-1:#0a0c20; --face-floor-2:#040408; }
.face-vs .face-room::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(201,162,70,.25), transparent 50%);
}
.face-vs .room-wall-l{
  background:
    linear-gradient(135deg, #1e3490, #0e1840);
}
.face-vs .room-wall-l::after, .face-vs .room-wall-r::after{
  content:"";position:absolute;inset:8px;
  border:1px solid rgba(201,162,70,.4);
  border-radius:2px;
}
.prop-chandelier{
  left:50%;top:6%;width:54px;height:46px;
  transform:translateX(-50%);
}
.prop-chandelier::before{
  content:"";position:absolute;left:50%;top:0;width:1.5px;height:14px;
  background:#c9a246;transform:translateX(-50%);
}
.prop-chandelier::after{
  content:"";position:absolute;left:0;right:0;top:14px;height:32px;
  background:
    radial-gradient(circle at 50% 0, #c9a246 0 6px, transparent 7px),
    radial-gradient(circle at 15% 18px, #ffe080 0 3px, transparent 4px),
    radial-gradient(circle at 50% 24px, #ffe080 0 3px, transparent 4px),
    radial-gradient(circle at 85% 18px, #ffe080 0 3px, transparent 4px);
  filter:drop-shadow(0 0 8px rgba(255,224,128,.6));
}
.prop-throne{
  left:50%;bottom:18%;width:64px;height:74px;
  transform:translateX(-50%);
  background:linear-gradient(180deg, #c9a246 0%, #7a5a20 100%);
  border-radius:20px 20px 6px 6px;
  box-shadow:0 6px 14px rgba(0,0,0,.6);
}
.prop-throne::before{
  content:"";position:absolute;left:6px;right:6px;top:14px;bottom:14px;
  background:#7a1212;border-radius:8px;
}
.prop-frame{
  right:8%;top:14%;width:34px;height:46px;
  background:#c9a246;
  border-radius:2px;
}
.prop-frame::after{
  content:"";position:absolute;inset:3px;
  background:linear-gradient(135deg, #f4e6d8, #c9a246);
}

/* dots */
.scene-dots{
  position:absolute;
  left:50%;bottom:-10px;
  transform:translateX(-50%);
  display:flex;gap:8px;
  z-index:10;
}
.sd{
  width:24px;height:6px;border-radius:3px;
  background:var(--ink-faint);
  border:none;cursor:pointer;
  transition:background .3s var(--ease), width .3s var(--ease);
  padding:0;
}
.sd.active{background:var(--ink);width:36px}

.scene-tag{
  position:absolute;
  left:50%;top:6%;
  transform:translateX(-50%);
  display:flex;align-items:baseline;gap:10px;
  padding:8px 16px;
  background:var(--paper);
  border:1.5px solid var(--line);
  border-radius:999px;
  font-family:var(--mono);
  font-size:12px;
  white-space:nowrap;
  box-shadow:0 6px 16px rgba(0,0,0,.08);
  z-index:5;
}
.scene-tag-idx{font-weight:500;color:var(--ink)}
.scene-tag-name{font-family:var(--display);font-weight:500;font-size:14px;letter-spacing:-.01em}
.scene-tag-meta{color:var(--ink-dim);font-size:11px}

@keyframes spin{ to{ transform:rotate(360deg) } }
@keyframes flicker{
  0%,100%{opacity:1;transform:scaleY(1)}
  50%{opacity:.85;transform:scaleY(.95)}
}

/* hero chips */
.hero-chips{
  position:relative;
  display:flex;flex-wrap:wrap;gap:10px;
  padding-top:28px;
  border-top:1.5px solid var(--line);
}
.chip{
  font-family:var(--mono);
  font-size:13px;
  padding:8px 14px;
  border:1.5px solid var(--line);
  border-radius:999px;
  display:inline-flex;align-items:center;
  cursor:pointer;
  text-decoration:none;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.chip:hover{transform:translateY(-2px) scale(1.04);box-shadow:0 8px 20px -8px rgba(21,17,10,.3)}
.chip:active{transform:translateY(-1px) scale(1.02)}
.chip:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.chip-cm{background:var(--cm);color:var(--cm-ink)}
.chip-s7{background:var(--s7);color:#fff}
.chip-s8{background:var(--s8);color:var(--s8-ink)}
.chip-gng{background:var(--gng);color:var(--gng-ink);border-color:var(--gng)}
.chip-rr{background:var(--rr);color:var(--rr-ink);border-color:var(--rr)}
.chip-vs{background:var(--vs);color:var(--vs-ink);border-color:var(--vs)}

/* ============== MARQUEE ============== */
.marquee{
  border-top:1.5px solid var(--line);
  border-bottom:1.5px solid var(--line);
  background:var(--ink);
  color:var(--bg);
  overflow:hidden;
  padding:14px 0;
}
.marquee-track{
  display:flex;gap:48px;
  white-space:nowrap;
  animation:marq 38s linear infinite;
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(22px, 2.4vw, 36px);
  letter-spacing:-.01em;
}
.marquee-track span{padding-right:48px}
@keyframes marq{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

/* ============== INTRO ============== */
.intro{
  padding:120px 28px 80px;
  max-width:1500px;
  margin:0 auto;
}
.intro-grid{
  display:grid;
  grid-template-columns:.4fr 1fr;
  gap:48px;
  border-top:1.5px solid var(--line);
  padding-top:48px;
}
.intro-body{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(26px, 3vw, 44px);
  line-height:1.14;
  letter-spacing:-.025em;
  margin:0 0 64px;
  max-width:900px;
  text-wrap:pretty;
}
.intro-body em{font-style:italic}
.intro-stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
  border-top:1.5px solid var(--line);
  border-bottom:1.5px solid var(--line);
}
.stat{
  padding:24px 24px 24px 0;
  border-right:1.5px solid var(--line);
}
.stat:last-child{border-right:none;padding-right:0}
.stat-num{
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(40px, 4.5vw, 64px);
  line-height:1;
  letter-spacing:-.035em;
  margin-bottom:12px;
}
.stat-lab{
  font-family:var(--mono);
  font-size:12px;
  color:var(--ink-dim);
}

/* ============== THEMES ============== */
.themes{
  padding:80px 28px 80px;
  max-width:1500px;
  margin:0 auto;
}
.themes-head{
  margin-bottom:48px;
}
.sec-h{
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(40px, 6vw, 84px);
  line-height:1;
  letter-spacing:-.035em;
  margin:14px 0 0;
  text-wrap:balance;
}
.sec-h em{font-style:italic}

/* theme card */
.tcard{
  position:relative;
  border:1.5px solid var(--line);
  border-radius:28px;
  margin-bottom:22px;
  overflow:hidden;
  background:var(--paper);
  isolation:isolate;
}
.tcard-tex{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  opacity:.12;
  mix-blend-mode:multiply;
  pointer-events:none;
  z-index:0;
  filter:contrast(.95) saturate(1.1);
}
.tcard-bar{
  position:relative;z-index:2;
  display:flex;align-items:center;gap:24px;
  padding:14px 28px;
  border-bottom:1.5px solid currentColor;
  font-family:var(--mono);
  font-size:12px;
  background:rgba(0,0,0,.08);
}
.tcard-bar > *{display:inline-flex;align-items:center}
.tcard-idx{font-weight:500}
.tcard-tag{margin-left:auto;opacity:.75}
.tcard-meta{opacity:.75}
.tcard-body{
  position:relative;z-index:1;
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:0;
}
.tcard-text{
  padding:56px 56px 48px;
  display:flex;flex-direction:column;
  position:relative;
}
.tcard-h{
  margin:0 0 24px;
  line-height:.95;
  font-weight:400;
}
.tcard-desc{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(17px, 1.5vw, 21px);
  line-height:1.42;
  margin:0 0 32px;
  max-width:540px;
  text-wrap:pretty;
}
.tcard-desc em{font-style:italic;font-weight:500}
.kvs{
  list-style:none;padding:0;margin:0 0 36px;
  border-top:1px solid currentColor;
  max-width:540px;
}
.kvs li{
  display:flex;justify-content:space-between;align-items:center;
  padding:12px 0;
  border-bottom:1px solid;
  border-color:currentColor;
  font-family:var(--mono);
  font-size:13px;
}
.kvs li span:first-child{opacity:.65}
.kvs li span:last-child{font-weight:500}
.tcard-cta{
  align-self:flex-start;
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 22px;
  border:1.5px solid currentColor;
  border-radius:999px;
  font-family:var(--display);
  font-weight:500;
  font-size:15px;
  cursor:pointer;
  transition:gap .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
}
.tcard-cta:hover{gap:18px}

.tcard-decor{
  position:relative;
  border-left:1.5px solid currentColor;
  min-height:420px;
  display:flex;align-items:center;justify-content:center;
  padding:32px;
  perspective:1200px;
}

.decor-stamp{
  position:absolute;
  top:20px;right:20px;
  font-family:var(--mono);
  font-size:11px;
  padding:6px 12px;
  border-radius:999px;
  border:1.5px solid currentColor;
  background:rgba(0,0,0,.1);
  backdrop-filter:blur(4px);
}

/* decor mini-box (isometric per theme) */
.decor-box{
  position:relative;
  width:min(360px, 100%);
  aspect-ratio:1/1;
  transform-style:preserve-3d;
  transform:rotateX(-18deg) rotateY(-25deg);
  animation:bobble 7s ease-in-out infinite;
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.4);
}
@keyframes bobble{
  0%,100%{transform:rotateX(-18deg) rotateY(-25deg) translateY(0)}
  50%{transform:rotateX(-18deg) rotateY(-22deg) translateY(-8px)}
}
.dr-wall{position:absolute;inset:0}
.dr-wall-l{}
.dr-wall-r{left:50%}
.dr-floor{
  position:absolute;left:0;right:0;bottom:0;height:32%;
}
.dr-prop{position:absolute}

/* === decor CM === */
.decor-cm .dr-wall-l{background:linear-gradient(135deg, #8a5022, #3a1f0a)}
.decor-cm .dr-wall-r{background:linear-gradient(225deg, #a0612a, #4a2810)}
.decor-cm .dr-floor{background:linear-gradient(180deg, #4a2c14, #1a0e04)}
.decor-cm::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='2'/><feColorMatrix values='0 0 0 0 .2 0 0 0 0 .1 0 0 0 0 .04 0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode:overlay;opacity:.7;
}
.decor-cm .dr-fire{
  left:46%;bottom:18%;width:56px;height:70px;
  background:radial-gradient(ellipse at 50% 100%, #ffcc55 0%, #ff7a1a 35%, #c8341a 70%, transparent 80%);
  border-radius:50% 50% 30% 30% / 60% 60% 30% 30%;
  animation:flicker 1.6s ease-in-out infinite alternate;
}
.decor-cm .dr-rock{
  left:14%;bottom:14%;width:80px;height:48px;
  background:radial-gradient(ellipse at 30% 30%, #876247, #4a2c18);
  border-radius:60% 50% 50% 60% / 70% 70% 40% 40%;
}
.decor-cm .dr-hide{
  right:12%;bottom:18%;width:74px;height:84px;
  background:linear-gradient(180deg, #b78754, #6b3a18 80%);
  clip-path:polygon(20% 0%, 80% 0%, 100% 20%, 95% 90%, 60% 100%, 30% 95%, 5% 70%, 0% 30%);
}

/* === decor S7 === */
.decor-s7 .dr-wall-l{background:linear-gradient(135deg, #c8a020, #7a4a08)}
.decor-s7 .dr-wall-r{background:linear-gradient(225deg, #e8621a, #8b2500)}
.decor-s7 .dr-floor{background:linear-gradient(180deg, #5a2410, #2a1004)}
.decor-s7 .dr-disco{
  left:42%;top:10%;width:64px;height:64px;border-radius:50%;
  background:repeating-conic-gradient(from 0deg, #fff 0 8deg, #c98 8deg 16deg);
  box-shadow:0 0 30px rgba(255,220,140,.5);
  animation:spin 6s linear infinite;
}
.decor-s7 .dr-vinyl{
  left:12%;bottom:14%;width:76px;height:76px;border-radius:50%;
  background:radial-gradient(circle, #ffb347 0 10px, #1a0a04 11px 13px, #2a1004 14px 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1), 0 6px 16px rgba(0,0,0,.5);
  animation:spin 8s linear infinite;
}
.decor-s7 .dr-lamp{
  right:14%;bottom:16%;width:44px;height:56px;
  background:linear-gradient(180deg, #ff8c1a, #c8341a);
  border-radius:50% 50% 20% 20%;
  box-shadow:0 0 30px rgba(255,140,26,.55);
}

/* === decor S8 === */
.decor-s8 .dr-wall-l{background:linear-gradient(135deg, #2a0b1c, #0e0410)}
.decor-s8 .dr-wall-r{background:linear-gradient(225deg, #1c0040, #080018)}
.decor-s8 .dr-floor{background:linear-gradient(180deg, #1a0028, #040008)}
.decor-s8::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    repeating-linear-gradient(0deg, transparent 0 14px, rgba(0,212,255,.14) 14px 15px),
    repeating-linear-gradient(90deg, transparent 0 14px, rgba(255,95,180,.12) 14px 15px);
}
.decor-s8 .dr-neon{
  left:12%;top:14%;width:60%;height:10px;
  background:linear-gradient(90deg, transparent, #ff5fb4, #00d4ff, transparent);
  box-shadow:0 0 16px #ff5fb4, 0 0 30px #00d4ff;
  border-radius:5px;
}
.decor-s8 .dr-neon::after{
  content:"";position:absolute;left:0;right:0;top:18px;height:6px;
  background:linear-gradient(90deg, transparent, #00d4ff, transparent);
  box-shadow:0 0 14px #00d4ff;border-radius:3px;
}
.decor-s8 .dr-tape{
  left:14%;bottom:14%;width:90px;height:50px;
  background:linear-gradient(180deg, #ff5fb4, #c93a8a);
  border-radius:8px;
  box-shadow:0 6px 16px rgba(0,0,0,.4), inset 0 2px 0 rgba(255,255,255,.2);
}
.decor-s8 .dr-tape::before, .decor-s8 .dr-tape::after{
  content:"";position:absolute;top:16px;width:18px;height:18px;border-radius:50%;
  background:radial-gradient(circle, #2a0b1c 0 5px, #fff 6px 7px, transparent 8px);
}
.decor-s8 .dr-tape::before{left:16px} .decor-s8 .dr-tape::after{right:16px}
.decor-s8 .dr-tv{
  right:12%;bottom:14%;width:80px;height:60px;
  background:linear-gradient(180deg, #444, #1a1a1a);
  border-radius:8px;
  border:2px solid #0a0a0a;
  box-shadow:0 6px 14px rgba(0,0,0,.6);
}
.decor-s8 .dr-tv::before{
  content:"";position:absolute;inset:6px;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.06) 0 2px, transparent 2px 4px),
    linear-gradient(135deg, #00d4ff, #ff5fb4);
  border-radius:4px;
}

/* === decor GNG === */
.decor-gng .dr-wall-l{background:linear-gradient(135deg, #1e1812, #0a0805)}
.decor-gng .dr-wall-r{background:linear-gradient(225deg, #2a1f15, #100a06)}
.decor-gng .dr-wall-r::after{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(90deg, transparent 0 22px, rgba(232,204,128,.08) 22px 23px);
}
.decor-gng .dr-floor{background:linear-gradient(180deg, #0e0a06, #040302)}
.decor-gng .dr-bottle{
  left:18%;bottom:18%;width:22px;height:64px;
  background:linear-gradient(180deg, #5a3a1a 0%, #8b6020 50%, #c9a44a 100%);
  border-radius:30% 30% 8% 8%;
  box-shadow:0 4px 14px rgba(0,0,0,.6);
}
.decor-gng .dr-bottle::before{
  content:"";position:absolute;left:7px;top:-10px;width:8px;height:12px;
  background:#3a2810;border-radius:2px;
}
.decor-gng .dr-hat{
  left:44%;top:18%;width:74px;height:42px;
}
.decor-gng .dr-hat::before{
  content:"";position:absolute;left:10px;top:8px;width:54px;height:30px;
  background:linear-gradient(180deg, #1a1410, #050302);
  border-radius:50% 50% 20% 20% / 60% 60% 30% 30%;
}
.decor-gng .dr-hat::after{
  content:"";position:absolute;left:0;bottom:0;width:74px;height:8px;
  background:#0a0805;border-radius:50%;
  box-shadow:0 0 0 1px rgba(232,204,128,.4);
}
.decor-gng .dr-table{
  right:12%;bottom:14%;width:80px;height:42px;
  background:linear-gradient(180deg, #3a2818, #1a1008);
  border-radius:6px;
  box-shadow:0 8px 16px rgba(0,0,0,.6);
}
.decor-gng .dr-table::after{
  content:"";position:absolute;left:18px;top:-16px;width:22px;height:18px;
  background:radial-gradient(ellipse, rgba(232,204,128,.5), transparent 60%);
}

/* === decor RR === */
.decor-rr .dr-wall-l{background:linear-gradient(135deg, #7a1212, #3a0606)}
.decor-rr .dr-wall-r{background:linear-gradient(225deg, #8b1a1a, #400808)}
.decor-rr .dr-floor{background:linear-gradient(180deg, #2a0606, #100202)}
.decor-rr .dr-curtain{
  left:0;top:0;bottom:32%;width:50%;
  background:repeating-linear-gradient(90deg, rgba(60,8,8,.5) 0, rgba(180,30,30,.6) 12px, rgba(60,8,8,.5) 24px);
}
.decor-rr .dr-curtain::after{
  content:"";position:absolute;left:0;right:0;top:0;height:18px;
  background:linear-gradient(180deg, #c9a246, #7a5a20);
}
.decor-rr .dr-sofa{
  right:8%;bottom:18%;width:110px;height:58px;
  background:linear-gradient(180deg, #c9a246, #7a5a20 60%, #5a3a10);
  border-radius:30px 30px 10px 10px;
  box-shadow:0 8px 16px rgba(0,0,0,.6);
}
.decor-rr .dr-sofa::after{
  content:"";position:absolute;left:10px;right:10px;top:8px;height:22px;
  background:#3a0808;border-radius:16px;
}
.decor-rr .dr-candle{
  left:24%;bottom:30%;width:10px;height:40px;
  background:linear-gradient(180deg, #f4e6d8, #c9a246);
  border-radius:2px;
}
.decor-rr .dr-candle::after{
  content:"";position:absolute;left:1px;top:-10px;width:8px;height:10px;
  background:radial-gradient(ellipse at 50% 100%, #ffe080, #ff7a1a 80%);
  border-radius:50% 50% 30% 30%;
  filter:blur(.6px);
  box-shadow:0 0 22px #ffb347;
  animation:flicker 1.4s ease-in-out infinite alternate;
}

/* === decor VS === */
.decor-vs .dr-wall-l{background:linear-gradient(135deg, #1e3490, #0e1840)}
.decor-vs .dr-wall-l::after, .decor-vs .dr-wall-r::after{
  content:"";position:absolute;inset:10px;
  border:1px solid rgba(201,162,70,.5);
  border-radius:2px;
}
.decor-vs .dr-wall-r{background:linear-gradient(225deg, #2a4a8c, #0a1430)}
.decor-vs .dr-floor{background:linear-gradient(180deg, #0a0c20, #040408)}
.decor-vs .dr-chandelier{
  left:50%;top:4%;width:70px;height:54px;
  transform:translateX(-50%);
}
.decor-vs .dr-chandelier::before{
  content:"";position:absolute;left:50%;top:0;width:2px;height:16px;
  background:#c9a246;transform:translateX(-50%);
}
.decor-vs .dr-chandelier::after{
  content:"";position:absolute;left:0;right:0;top:16px;height:38px;
  background:
    radial-gradient(circle at 50% 0, #c9a246 0 8px, transparent 9px),
    radial-gradient(circle at 14% 22px, #ffe080 0 4px, transparent 5px),
    radial-gradient(circle at 50% 28px, #ffe080 0 4px, transparent 5px),
    radial-gradient(circle at 86% 22px, #ffe080 0 4px, transparent 5px);
  filter:drop-shadow(0 0 10px rgba(255,224,128,.7));
}
.decor-vs .dr-throne{
  left:50%;bottom:16%;width:80px;height:96px;
  transform:translateX(-50%);
  background:linear-gradient(180deg, #c9a246, #7a5a20);
  border-radius:24px 24px 8px 8px;
  box-shadow:0 8px 16px rgba(0,0,0,.7);
}
.decor-vs .dr-throne::before{
  content:"";position:absolute;left:8px;right:8px;top:18px;bottom:18px;
  background:#7a1212;border-radius:10px;
}
.decor-vs .dr-frame{
  right:10%;top:14%;width:44px;height:60px;
  background:#c9a246;
  border-radius:3px;
}
.decor-vs .dr-frame::after{
  content:"";position:absolute;inset:4px;
  background:linear-gradient(135deg, #f4e6d8, #c9a246);
}

/* ============== THEME COLORS ============== */
.tcard-cm{background:var(--cm);color:var(--cm-ink)}
.cm-h{
  font-family:var(--cm-font);
  font-weight:700;
  font-size:clamp(72px, 9vw, 144px);
  letter-spacing:-.005em;
  transform:rotate(-1.5deg);
  transform-origin:left;
  display:inline-block;
}
.tcard-cm .tcard-cta:hover{background:var(--cm-ink);color:var(--cm)}

.tcard-s7{background:var(--s7);color:#fff}
.s7-h{
  font-family:var(--s7-font);
  font-weight:400;
  font-size:clamp(80px, 9vw, 152px);
  letter-spacing:.005em;
  text-shadow:4px 4px 0 var(--s7-ink), 8px 8px 0 rgba(61,26,0,.25);
  -webkit-text-stroke:1px var(--s7-ink);
  color:#FFB347;
}
.tcard-s7 .tcard-cta:hover{background:var(--s7-ink);color:var(--s7)}

.tcard-s8{background:var(--s8);color:var(--s8-ink)}
.s8-h{
  font-family:var(--s8-font);
  font-weight:400;
  font-size:clamp(80px, 9vw, 152px);
  letter-spacing:.005em;
  background:linear-gradient(135deg, #2A0B1C 0%, #FFF 50%, #2A0B1C 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 4px 0 #2A0B1C);
}
.tcard-s8 .tcard-cta:hover{background:var(--s8-ink);color:var(--s8)}

.tcard-gng{background:var(--gng);color:var(--gng-ink)}
.tcard-gng .tcard-bar{background:rgba(255,255,255,.05);border-bottom-color:rgba(232,204,128,.3)}
.tcard-gng .tcard-decor{border-left-color:rgba(232,204,128,.3)}
.tcard-gng .kvs, .tcard-gng .kvs li{border-color:rgba(232,204,128,.3)}
.gng-h{
  font-family:var(--gng-font);
  font-weight:400;
  font-size:clamp(60px, 7vw, 120px);
  letter-spacing:.01em;
  color:#E8CC80;
  text-shadow:0 2px 4px rgba(0,0,0,.8), 0 0 24px rgba(201,164,74,.2);
}
.tcard-gng .tcard-cta:hover{background:var(--gng-ink);color:var(--gng)}

.tcard-rr{background:var(--rr);color:var(--rr-ink)}
.tcard-rr .tcard-bar{background:rgba(0,0,0,.18);border-bottom-color:rgba(244,230,216,.3)}
.tcard-rr .tcard-decor{border-left-color:rgba(244,230,216,.3)}
.tcard-rr .kvs, .tcard-rr .kvs li{border-color:rgba(244,230,216,.3)}
.rr-h{
  font-family:var(--rr-font);
  font-weight:400;
  font-size:clamp(80px, 9vw, 152px);
  letter-spacing:.005em;
  color:#F4E6D8;
  text-shadow:
    -1px -1px 0 #4A0000,
    1px 1px 0 #8B1A1A,
    2px 2px 0 #600000,
    3px 3px 8px rgba(0,0,0,.5);
}
.tcard-rr .tcard-cta:hover{background:var(--rr-ink);color:var(--rr)}

.tcard-vs{background:var(--vs);color:var(--vs-ink)}
.tcard-vs .tcard-bar{background:rgba(0,0,0,.15);border-bottom-color:rgba(201,162,70,.4)}
.tcard-vs .tcard-decor{border-left-color:rgba(201,162,70,.4)}
.tcard-vs .kvs, .tcard-vs .kvs li{border-color:rgba(201,162,70,.4)}
.vs-h{
  font-family:var(--vs-font);
  font-weight:700;
  font-size:clamp(56px, 6vw, 104px);
  letter-spacing:.01em;
  color:#C9A246;
  text-shadow:0 1px 0 #1a3080, 0 2px 0 rgba(26,48,128,.4), 0 4px 12px rgba(0,0,0,.4);
}
.tcard-vs .tcard-cta:hover{background:var(--vs-ink);color:var(--vs)}

/* ============== HOW ============== */
.how{
  padding:120px 28px 120px;
  max-width:1500px;
  margin:0 auto;
}
.how-head{margin-bottom:48px}
.how-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
.hcard{
  background:var(--paper);
  border:1.5px solid var(--line);
  border-radius:24px;
  padding:36px 32px 32px;
  display:flex;flex-direction:column;
  min-height:440px;
}
.hcard:nth-child(2){background:var(--s8);color:var(--s8-ink)}
.hcard-num{
  font-family:var(--display);
  font-weight:500;
  font-size:120px;
  line-height:.85;
  letter-spacing:-.05em;
  margin-bottom:24px;
}
.hcard-tag{
  font-family:var(--mono);
  font-size:12px;
  color:var(--ink-dim);
  margin-bottom:8px;
}
.hcard:nth-child(2) .hcard-tag{color:rgba(42,11,28,.6)}
.hcard-h{
  font-family:var(--display);
  font-weight:500;
  font-size:32px;
  line-height:1.05;
  letter-spacing:-.025em;
  margin:0 0 14px;
  text-wrap:balance;
}
.hcard-p{
  font-family:var(--display);
  font-weight:400;
  font-size:16px;
  line-height:1.45;
  margin:0 0 24px;
  flex:1;
  max-width:34ch;
  text-wrap:pretty;
}
.hcard-p em{font-style:italic;font-weight:500}
.hcard-list{
  list-style:none;padding:0;margin:0;
  border-top:1.5px solid currentColor;
}
.hcard-list li{
  padding:12px 0;
  border-bottom:1.5px solid currentColor;
  font-family:var(--mono);
  font-size:13px;
  display:flex;align-items:center;gap:12px;
}
.dotmark{
  width:8px;height:8px;
  background:currentColor;
  border-radius:50%;
  flex-shrink:0;
}

/* ============== GALLERY ============== */
.gallery{
  padding:80px 28px 80px;
  max-width:1500px;
  margin:0 auto;
}
.gal-head{
  display:grid;
  grid-template-columns:1fr auto;
  gap:24px;
  align-items:end;
  margin-bottom:36px;
}
.gal-head .sec-h{grid-column:1}
.gal-head .eyebrow{grid-column:1}
.gal-link{
  font-family:var(--display);
  font-weight:500;
  font-size:15px;
  padding:14px 22px;
  border:1.5px solid var(--line);
  border-radius:999px;
  background:var(--ink);
  color:var(--bg);
  transition:background .25s var(--ease), color .25s var(--ease);
  white-space:nowrap;
  cursor:pointer;
}
.gal-link:hover{background:var(--s8);color:var(--ink)}
.gal-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:18px;
}
.gi{
  position:relative;
  border:1.5px solid var(--line);
  border-radius:20px;
  overflow:hidden;
  display:flex;flex-direction:column;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
  cursor:pointer;
  text-decoration:none;
  color:inherit;
}
.gi:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 24px 40px -20px rgba(21,17,10,.35)}
.gi:active{transform:translateY(-2px) scale(1.01)}
.gi:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.gi-stack{
  position:relative;
  width:100%;
  aspect-ratio:4/5;
  overflow:hidden;
}
.gs{
  position:absolute;inset:0;
  opacity:0;
  transition:opacity 1.2s var(--ease);
}
.gs.gs-active{opacity:1}
.gi-foot{
  display:flex;justify-content:space-between;align-items:center;
  padding:14px 18px;
  border-top:1.5px solid var(--line);
  font-family:var(--mono);
  font-size:12px;
  background:var(--paper);
}
.gi-dot{
  width:6px;height:6px;border-radius:50%;
  background:currentColor;
  opacity:.6;
  animation:pulse 5s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:.2}50%{opacity:.8}}
.gi-cm .gi-foot{background:var(--cm);color:var(--cm-ink)}
.gi-s7 .gi-foot{background:var(--s7);color:#fff}
.gi-s8 .gi-foot{background:var(--s8);color:var(--s8-ink)}
.gi-gng .gi-foot{background:var(--gng);color:var(--gng-ink)}
.gi-rr .gi-foot{background:var(--rr);color:var(--rr-ink)}
.gi-vs .gi-foot{background:var(--vs);color:var(--vs-ink)}

/* ps theme placeholders for gallery & gi */
.ps{
  position:relative;
  width:100%;height:100%;
  overflow:hidden;
}
.ps-cm{background:
  radial-gradient(ellipse at 60% 30%, #B98452, transparent 65%),
  linear-gradient(160deg, #6B3A18 0%, #B98452 50%, #E0BC8C 100%);
}
.ps-s7{background:
  repeating-linear-gradient(45deg, transparent 0 16px, rgba(61,26,0,.06) 16px 17px),
  linear-gradient(160deg, #C8A020 0%, #E8621A 60%, #8B2500 100%);
}
.ps-s8{background:
  repeating-linear-gradient(0deg, transparent 0 11px, rgba(0,212,255,.18) 11px 12px),
  repeating-linear-gradient(90deg, transparent 0 11px, rgba(255,255,255,.15) 11px 12px),
  linear-gradient(160deg, #7B2FFF 0%, #FF2D9B 60%, #00D4FF 100%);
}
.ps-gng{background:
  linear-gradient(180deg, rgba(0,0,0,.7), rgba(0,0,0,.3) 60%, rgba(0,0,0,.6)),
  linear-gradient(160deg, #6B3020 0%, #1E1812 70%, #C9A44A 130%);
}
.ps-rr{background:
  radial-gradient(ellipse at 50% 40%, rgba(192,32,32,.2), transparent 65%),
  linear-gradient(180deg, #8B1A1A 0%, #4A0000 90%);
  box-shadow:inset 0 0 60px rgba(0,0,0,.5);
}
.ps-vs{background:
  linear-gradient(160deg, #C9A246 0%, #1A3080 70%, #0E0C18 100%);
}
/* Gallery variants — 3 different bg blends per theme */
.gi-cm .gs-b.ps-cm{background:
  linear-gradient(140deg, rgba(0,0,0,.4), transparent 50%),
  url('assets/tex-cm.jpeg') center/cover;
}
.gi-cm .gs-c.ps-cm{background:
  radial-gradient(circle at 30% 70%, #c8a070, transparent 60%),
  linear-gradient(200deg, #3a1f0a 0%, #b78754 100%);
}
.gi-s7 .gs-b.ps-s7{background:
  linear-gradient(180deg, rgba(0,0,0,.2), rgba(0,0,0,.5)),
  url('assets/tex-s7.png') center/cover;
}
.gi-s7 .gs-c.ps-s7{background:
  radial-gradient(circle at 60% 40%, #ffb347, transparent 60%),
  linear-gradient(45deg, #8B2500 0%, #E8621A 100%);
}
.gi-s8 .gs-b.ps-s8{background:
  linear-gradient(180deg, rgba(0,0,0,.3), rgba(0,0,0,.4)),
  url('assets/tex-s8.jpeg') center/cover;
}
.gi-s8 .gs-c.ps-s8{background:
  radial-gradient(circle at 50% 50%, #00D4FF, transparent 60%),
  linear-gradient(160deg, #FF2D9B 0%, #7B2FFF 80%);
}
.gi-gng .gs-b.ps-gng{background:
  linear-gradient(180deg, rgba(0,0,0,.6), rgba(0,0,0,.7)),
  url('assets/tex-gng.jpeg') center/cover;
}
.gi-gng .gs-c.ps-gng{background:
  radial-gradient(circle at 60% 30%, rgba(232,204,128,.4), transparent 60%),
  linear-gradient(200deg, #0a0805 0%, #3a2818 100%);
}
.gi-rr .gs-b.ps-rr{background:
  linear-gradient(180deg, rgba(0,0,0,.4), rgba(0,0,0,.5)),
  url('assets/tex-rr.jpeg') center/cover;
}
.gi-rr .gs-c.ps-rr{background:
  radial-gradient(ellipse at 30% 60%, #c9a246, transparent 50%),
  linear-gradient(180deg, #4A0000 0%, #8B1A1A 100%);
}
.gi-vs .gs-b.ps-vs{background:
  linear-gradient(180deg, rgba(0,0,0,.3), rgba(0,0,0,.5)),
  url('assets/tex-vs.png') center/cover;
}
.gi-vs .gs-c.ps-vs{background:
  linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.45)),
  url('assets/tex-vs2.jpeg') center/cover;
}

/* ============== TARIFS ============== */
.tarifs{
  padding:120px 28px 80px;
  max-width:1500px;
  margin:0 auto;
}
.tar-head{margin-bottom:32px;max-width:900px}
.tar-ladder{
  display:grid;
  grid-template-columns:repeat(6, minmax(0,1fr));
  gap:8px;
  margin:28px 0 48px;
  max-width:680px;
}
.ladder-step{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  padding:14px 8px 12px;
  border:1.5px solid var(--line);
  border-radius:14px;
  background:var(--paper);
  font-family:var(--mono);
  font-size:11px;
  text-align:center;
}
.ladder-step .ls-n{
  font-family:var(--display);
  font-weight:500;
  font-size:28px;
  line-height:1;
  letter-spacing:-.02em;
}
.ladder-step .ls-d{opacity:.65;font-size:10.5px}
.ladder-step.ls-on{
  background:var(--ink);color:var(--bg);
  border-color:var(--ink);
}
.ladder-step.ls-on .ls-d{opacity:.85}
.tar-sub{
  font-family:var(--display);
  font-weight:400;
  font-size:20px;
  line-height:1.4;
  margin:24px 0 0;
  max-width:680px;
  color:var(--ink-dim);
  text-wrap:pretty;
}
.tar-sub em{font-style:italic;color:var(--ink)}
.tar-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}
.tcard-price{
  background:var(--paper);
  border:1.5px solid var(--line);
  border-radius:24px;
  padding:32px 26px 26px;
  display:flex;flex-direction:column;
  min-height:560px;
  position:relative;
}
.tp-pricewrap{display:flex;flex-direction:column;gap:2px;margin-bottom:8px}
.tp-old{
  font-family:var(--display);
  font-weight:400;
  font-size:20px;
  line-height:1;
  letter-spacing:-.02em;
  opacity:.45;
  text-decoration:line-through;
  text-decoration-thickness:1.5px;
  display:flex;align-items:baseline;
}
.tp-old .tp-old-cur{font-size:.7em;margin-right:.05em}
.tp-multi{
  display:inline-flex;align-items:center;gap:6px;
  align-self:flex-start;
  font-family:var(--mono);
  font-size:11px;
  padding:6px 12px;
  border-radius:999px;
  background:var(--ink);
  color:var(--bg);
  margin-bottom:18px;
  letter-spacing:.02em;
  animation:slideIn .4s var(--ease);
}
.tp-multi strong{font-family:var(--display);font-weight:600;font-size:13px}
@keyframes slideIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.tp-feat .tp-multi{background:var(--s8-ink);color:var(--s8)}
.tp-dark .tp-multi{background:var(--bg);color:var(--ink)}
.tp-feat{background:var(--s8);color:var(--s8-ink)}
.tp-dark{background:var(--ink);color:var(--bg)}
.tp-badge{
  position:absolute;
  top:18px;right:18px;
  font-family:var(--mono);
  font-size:11px;
  padding:6px 10px;
  background:var(--ink);color:var(--bg);
  border-radius:999px;
}
.tp-tag{
  font-family:var(--mono);
  font-size:13px;
  margin-bottom:14px;
  opacity:.7;
}
.tp-price{
  font-family:var(--display);
  font-weight:500;
  font-size:74px;
  line-height:.9;
  letter-spacing:-.045em;
  display:flex;align-items:flex-start;
}
.tp-cur{font-size:.5em;font-weight:500;margin-top:.18em;margin-right:.05em;opacity:.7}
.tp-val{transition:color .25s var(--ease)}
.tp-price-sm{font-size:40px;letter-spacing:-.025em;padding-top:20px;display:block}
.tp-list{
  list-style:none;padding:0;margin:0 0 18px;
  flex:1;
  border-top:1.5px solid currentColor;
}
.tp-list li{
  display:flex;justify-content:space-between;gap:8px;
  padding:11px 0;
  border-bottom:1.5px solid currentColor;
  font-family:var(--mono);
  font-size:12px;
}
.tp-list li span:first-child{opacity:.65}
.tp-list li span:last-child{font-weight:500;text-align:right}
.tp-people-wrap{
  display:inline-flex;align-items:center;gap:6px;
  padding:2px;
  border:1.5px solid currentColor;
  border-radius:999px;
}
.tp-people-btn{
  width:22px;height:22px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:50%;
  background:transparent;color:inherit;
  cursor:pointer;
  font-family:var(--mono);
  font-size:14px;line-height:1;
  transition:background .2s var(--ease), color .2s var(--ease);
  padding:0;
}
.tp-people-btn:hover{background:currentColor}
.tcard-price:not(.tp-feat):not(.tp-dark) .tp-people-btn:hover{color:var(--paper)}
.tp-feat .tp-people-btn:hover{color:var(--s8)}
.tp-people-btn:disabled{opacity:.3;cursor:not-allowed;pointer-events:none}
.tp-people-val{
  min-width:18px;text-align:center;
  font-family:var(--mono);
  font-size:13px;
  font-weight:500;
  display:inline-block;
}

.tp-univ-picker{
  display:flex;flex-direction:column;gap:8px;
  margin-bottom:16px;
}
.tp-up-label{
  font-family:var(--mono);
  font-size:11px;
  opacity:.65;
}
.tp-up-btns{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:3px;
  padding:3px;
  border:1.5px solid currentColor;
  border-radius:999px;
}
.tp-up{
  font-family:var(--mono);
  font-size:12px;
  padding:8px 0;
  border-radius:999px;
  background:transparent;
  color:inherit;
  cursor:pointer;
  transition:background .2s var(--ease), color .2s var(--ease);
  position:relative;
}
.tp-up:hover{background:rgba(0,0,0,.06)}
.tcard-price:not(.tp-feat):not(.tp-dark) .tp-up.active{background:var(--ink);color:var(--bg)}
.tp-feat .tp-up.active{background:var(--s8-ink);color:var(--s8)}
.tp-dark .tp-up.active{background:var(--bg);color:var(--ink)}

.tp-btn{
  display:inline-flex;justify-content:center;align-items:center;gap:8px;
  padding:14px 18px;
  border:1.5px solid currentColor;
  border-radius:999px;
  font-family:var(--display);
  font-weight:500;
  font-size:15px;
  cursor:pointer;
  transition:background .25s var(--ease), color .25s var(--ease);
  align-self:stretch;
}
.tcard-price:not(.tp-feat):not(.tp-dark) .tp-btn:hover{background:var(--ink);color:var(--bg)}
.tp-btn-feat{background:var(--s8-ink);color:var(--s8);border-color:var(--s8-ink)}
.tp-btn-feat:hover{background:transparent;color:var(--s8-ink)}
.tp-btn-light{background:var(--bg);color:var(--ink);border-color:var(--bg)}
.tp-btn-light:hover{background:transparent;color:var(--bg);border-color:var(--bg)}

.tp-occasions{
  display:flex;flex-wrap:wrap;gap:6px;
  margin:0 0 18px;
  flex:1;
  align-content:flex-start;
}
.tp-occ{
  font-family:var(--mono);
  font-size:11px;
  padding:6px 10px;
  border:1.5px solid currentColor;
  border-radius:999px;
  opacity:.85;
}

/* price bump animation */
.tp-bump{ animation:bump .35s var(--ease); }
@keyframes bump{ 0%{transform:scale(1)} 50%{transform:scale(1.06)} 100%{transform:scale(1)} }

/* ============== QUOTE ============== */
.quote{
  padding:80px 28px 80px;
  max-width:1500px;
  margin:0 auto;
}
.quote-inner{
  background:var(--ink);
  color:var(--bg);
  border-radius:28px;
  padding:80px 64px 64px;
  display:flex;flex-direction:column;
  gap:40px;
}
.quote-inner .eyebrow{color:rgba(236,229,214,.6)}
.quote-q{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(28px, 4vw, 56px);
  line-height:1.1;
  letter-spacing:-.025em;
  margin:0;
  max-width:1100px;
  text-wrap:balance;
}
.quote-q em{font-style:italic;color:var(--s8)}
.quote-by{display:flex;align-items:center;gap:16px}
.quote-avatar{
  width:56px;height:56px;border-radius:50%;
  background:var(--s8);color:var(--ink);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display);
  font-weight:500;
  font-size:18px;
  letter-spacing:.05em;
}
.quote-name{
  font-family:var(--display);
  font-weight:500;
  font-size:18px;
}
.quote-meta{
  font-family:var(--mono);
  font-size:12px;
  color:rgba(236,229,214,.6);
  margin-top:2px;
}

/* ============== CONTACT ============== */
.contact{
  padding:80px 28px 80px;
  max-width:1500px;
  margin:0 auto;
}
.contact-head{margin-bottom:48px}
.contact-grid{
  display:grid;
  grid-template-columns:1.15fr 1fr;
  gap:48px;
  background:var(--paper);
  border:1.5px solid var(--line);
  border-radius:28px;
  padding:48px;
}
.form{display:flex;flex-direction:column;gap:24px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.form-row-recap{align-items:end}
.field{display:flex;flex-direction:column;gap:8px;position:relative}
.field-label{
  font-family:var(--mono);
  font-size:11px;
  color:var(--ink-dim);
}
.field input, .field select, .field textarea{
  background:var(--bg);
  border:1.5px solid var(--line);
  color:var(--ink);
  font-family:var(--display);
  font-weight:400;
  font-size:15px;
  padding:14px 16px;
  border-radius:14px;
  outline:none;
  transition:border-color .25s var(--ease), background .25s var(--ease);
  resize:vertical;
}
.field select{
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%2315110A' stroke-width='1.4'/></svg>");
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:11px;
  padding-right:38px;
}
.field input:focus, .field select:focus, .field textarea:focus{
  border-color:var(--ink);
  background:#fff;
}
.field input::placeholder, .field textarea::placeholder{color:var(--ink-faint)}

.univ-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:8px;
}
.uc{
  display:flex;align-items:center;gap:10px;
  padding:11px 14px;
  border:1.5px solid var(--line);
  border-radius:12px;
  font-family:var(--mono);
  font-size:12px;
  cursor:pointer;
  background:var(--bg);
  transition:background .2s var(--ease), color .2s var(--ease);
}
.uc:has(input:checked){
  background:var(--ink);color:var(--bg);
}
.uc input{
  appearance:none;-webkit-appearance:none;
  width:14px;height:14px;
  border:1.5px solid currentColor;
  border-radius:4px;
  margin:0;
  position:relative;
  background:transparent;
  flex-shrink:0;
}
.uc:has(input:checked) input{background:var(--bg)}
.uc:has(input:checked) input::after{
  content:"";position:absolute;left:2.5px;top:0px;
  width:4px;height:8px;
  border:solid var(--ink);
  border-width:0 2px 2px 0;
  transform:rotate(45deg);
}

.people-stepper{
  display:inline-flex;align-items:center;gap:0;
  background:var(--bg);
  border:1.5px solid var(--line);
  border-radius:14px;
  overflow:hidden;
  width:fit-content;
}
.ps-btn{
  width:44px;height:44px;
  display:inline-flex;align-items:center;justify-content:center;
  background:transparent;
  color:var(--ink);
  font-family:var(--mono);
  font-size:18px;line-height:1;
  cursor:pointer;
  transition:background .2s var(--ease);
  padding:0;
}
.ps-btn:hover{background:var(--ink);color:var(--bg)}
.ps-btn:disabled{opacity:.25;cursor:not-allowed;pointer-events:none}
.people-stepper input{
  width:64px;
  text-align:center;
  border:none;
  background:transparent;
  font-family:var(--display);
  font-weight:500;
  font-size:20px;
  padding:10px 0;
  border-radius:0;
  border-left:1.5px solid var(--line);
  border-right:1.5px solid var(--line);
  -moz-appearance:textfield;
}
.people-stepper input::-webkit-outer-spin-button,
.people-stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.people-stepper input:focus{outline:none;background:#fff}
.people-stepper.is-locked{opacity:.85}
.people-stepper.is-locked input{background:var(--bg-2)}
.field-hint{
  font-family:var(--mono);
  font-size:11px;
  color:var(--ink-dim);
  margin-top:2px;
}
.recap{
  display:flex;flex-direction:column;
  background:var(--bg);
  border:1.5px solid var(--line);
  border-radius:14px;
  padding:6px 14px;
}
.recap-line{
  display:flex;justify-content:space-between;align-items:center;
  padding:8px 0;
  border-bottom:1px solid var(--line-soft);
  font-family:var(--mono);
  font-size:12px;
}
.recap-line:last-child{border-bottom:none}
.recap-line span:first-child{opacity:.6}
.recap-line strong{font-family:var(--display);font-weight:500;font-size:14px}
.recap-total strong{font-size:22px;letter-spacing:-.02em;display:inline-flex;align-items:baseline;gap:8px}
.recap-old{font-size:14px;opacity:.4;font-weight:400}
.recap-discount{
  background:var(--ink);color:var(--bg);
  margin:4px -10px;padding:8px 10px;border-radius:10px;
  border-bottom:none;
  animation:slideIn .35s var(--ease);
}
.recap-discount span{opacity:.7}
.recap-discount strong{font-family:var(--display);font-weight:600;font-size:16px}

.form-submit{
  margin-top:8px;
  background:var(--ink);
  color:var(--bg);
  font-family:var(--display);
  font-weight:500;
  font-size:16px;
  padding:18px 24px;
  border-radius:999px;
  border:1.5px solid var(--line);
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  transition:background .25s var(--ease), color .25s var(--ease);
  cursor:pointer;
}
.form-submit:hover{background:var(--s8);color:var(--ink)}
.form-feedback{
  font-family:var(--display);
  font-style:italic;
  font-size:16px;
  color:var(--ink-dim);
  min-height:22px;
}

.info{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:32px 28px;
  align-content:start;
}
.info-block{
  border-top:1.5px solid var(--line);
  padding-top:14px;
}
.info-kicker{
  font-family:var(--mono);
  font-size:11px;
  color:var(--ink-dim);
  margin-bottom:10px;
}
.info-text{
  font-family:var(--display);
  font-weight:400;
  font-size:16px;
  line-height:1.4;
  margin:0;
}
.info-text a{text-decoration:underline;text-decoration-color:var(--ink-faint);text-underline-offset:4px;transition:color .2s var(--ease)}
.info-text a:hover{color:var(--ink)}
.info-dim{font-family:var(--mono);font-size:12px;color:var(--ink-dim)}

/* ============== FOOTER ============== */
.footer{
  background:var(--ink);
  color:var(--bg);
  padding:80px 28px 32px;
  margin-top:80px;
}
.ft-mega{
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(64px, 14vw, 220px);
  line-height:.85;
  letter-spacing:-.045em;
  margin-bottom:80px;
  max-width:1500px;
  margin-left:auto;margin-right:auto;
  text-align:left;
  padding-bottom:48px;
  border-bottom:1.5px solid rgba(236,229,214,.18);
}
.ft-mega .ink-italic{color:var(--s8)}
.ft-grid{
  max-width:1500px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:48px;
  padding-bottom:48px;
  border-bottom:1.5px solid rgba(236,229,214,.18);
}
.ft-kicker{
  font-family:var(--mono);
  font-size:11px;
  color:rgba(236,229,214,.55);
  margin-bottom:14px;
}
.ft-text{
  font-family:var(--display);
  font-weight:400;
  font-size:16px;
  line-height:1.45;
  margin:0;
}
.ft-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.ft-list a{
  font-family:var(--display);
  font-weight:400;
  font-size:15px;
  color:rgba(236,229,214,.85);
  transition:color .2s var(--ease);
}
.ft-list a:hover{color:var(--s8)}
.ft-bottom{
  max-width:1500px;
  margin:32px auto 0;
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  font-family:var(--mono);
  font-size:11px;
  color:rgba(236,229,214,.55);
  flex-wrap:wrap;
}

/* ============== REVEAL ============== */
.reveal{
  opacity:0;
  transform:translateY(40px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal.visible{
  opacity:1;
  transform:translateY(0);
}

/* ============== RESPONSIVE ============== */
@media (max-width:1100px){
  .hero-grid{grid-template-columns:1fr;gap:32px}
  .hero-scene{min-height:400px}
  .scene-stage{height:400px}
  .prism{width:240px;height:240px}
  .face{width:240px;height:240px}
  .face[data-theme="cm"]{ transform: rotateY(  0deg) translateZ(208px); }
  .face[data-theme="s7"]{ transform: rotateY( 60deg) translateZ(208px); }
  .face[data-theme="s8"]{ transform: rotateY(120deg) translateZ(208px); }
  .face[data-theme="gng"]{ transform: rotateY(180deg) translateZ(208px); }
  .face[data-theme="rr"]{ transform: rotateY(240deg) translateZ(208px); }
  .face[data-theme="vs"]{ transform: rotateY(300deg) translateZ(208px); }
  .tcard-text{padding:40px 36px 36px}
  .how-grid{grid-template-columns:1fr 1fr}
  .hcard:nth-child(3){grid-column:1/-1}
  .tar-grid{grid-template-columns:1fr 1fr}
  .tar-ladder{grid-template-columns:repeat(3, minmax(0,1fr))}
  .gal-grid{grid-template-columns:1fr 1fr}
  .univ-grid{grid-template-columns:repeat(2, 1fr)}
}
@media (max-width:780px){
  .topbar{padding:14px 20px;gap:12px}
  .brand-text{display:none}
  .hero{padding:32px 20px 32px}
  .intro-grid{grid-template-columns:1fr;gap:24px}
  .intro-stats{grid-template-columns:1fr 1fr}
  .stat{border-bottom:1.5px solid var(--line)}
  .stat:nth-child(3){border-right:1.5px solid var(--line)}
  .tcard-body{grid-template-columns:1fr}
  .tcard-decor{border-left:none;border-top:1.5px solid currentColor;min-height:320px}
  .tcard-text{padding:32px 28px 28px}
  .how-grid{grid-template-columns:1fr}
  .hcard:nth-child(3){grid-column:auto}
  .gal-grid{grid-template-columns:1fr}
  .tar-grid{grid-template-columns:1fr}
  .quote-inner{padding:48px 28px 36px}
  .contact-grid{grid-template-columns:1fr;padding:32px;gap:36px}
  .info{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .form-row-recap{grid-template-columns:1fr}
  .ft-grid{grid-template-columns:1fr 1fr;gap:32px}
  .ft-mega{font-size:64px}
}


/* ============================================================
   STUDIO BOX v2 (Deeper isometric diorama, lit upper-left)
   ============================================================ */
.studio-box{
  width:380px; height:340px;
  position:relative;
  margin:0 auto;
  filter:drop-shadow(0 30px 36px rgba(0,0,0,.42));
}
.sbox-stage{
  position:absolute; inset:0;
  transform-style:preserve-3d;
  transform: rotateX(-22deg) rotateY(-26deg);
  will-change:transform;
}
.studio-box.spinning .sbox-stage{ animation: sbox-spin 8s linear infinite; }
@keyframes sbox-spin{
  from { transform: rotateX(-22deg) rotateY(-26deg); }
  to   { transform: rotateX(-22deg) rotateY(-386deg); }
}
.tcard-decor .studio-box .sbox-stage{
  transform: rotateX(-20deg) rotateY(-28deg);
}
.tcard-decor:hover .studio-box .sbox-stage{
  animation: sbox-spin-once 6s cubic-bezier(.6,0,.4,1);
}
@keyframes sbox-spin-once{
  from { transform: rotateX(-20deg) rotateY(-28deg); }
  to   { transform: rotateX(-20deg) rotateY(-388deg); }
}

/* shared primitives ---------------------------------------- */
.sb-plinth, .sb-floor, .sb-wall, .sb-prop, .sb-deco{
  position:absolute; top:50%; left:50%;
}
.sb-plinth{
  width:340px; height:340px;
  margin:-170px 0 0 -170px;
  transform: translateY(118px) rotateX(90deg);
  background:
    radial-gradient(ellipse at 30% 30%, rgba(255,220,170,.18), transparent 60%),
    repeating-linear-gradient(90deg, rgba(0,0,0,.18) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(0deg, rgba(0,0,0,.14) 0 1px, transparent 1px 28px),
    linear-gradient(135deg, #8a5a2a 0%, #4a2f15 60%, #2a1808 100%);
  background-blend-mode: normal, multiply, multiply, normal;
  clip-path: polygon(18% 0%, 82% 0%, 100% 18%, 100% 82%, 82% 100%, 18% 100%, 0% 82%, 0% 18%);
  box-shadow:
    inset 0 0 30px rgba(0,0,0,.55),
    inset 4px 4px 16px rgba(255,220,170,.12);
}

.sb-scene{
  position:absolute; inset:0;
  transform-style:preserve-3d;
  opacity:0;
  transition:opacity .5s ease;
  pointer-events:none;
}
.sb-scene.active, .tcard-decor .sb-scene{ opacity:1; }

.sb-floor{
  width:260px; height:260px;
  margin:-130px 0 0 -130px;
  transform: translateY(100px) rotateX(90deg);
  border-radius:2px;
  box-shadow: 0 0 0 2px rgba(0,0,0,.45);
  overflow:hidden;
}
.sb-floor::after{ /* directional dim on floor — darker far corner */
  content:""; position:absolute; inset:0;
  background: linear-gradient(135deg, rgba(255,235,200,.12) 0%, transparent 35%, rgba(0,0,0,.45) 100%);
  pointer-events:none;
}

/* Walls: positioned at back & right of room */
.sb-wall{
  width:260px; height:200px;
  margin:-100px 0 0 -130px;
  box-shadow: inset 0 0 30px rgba(0,0,0,.4);
  position:absolute;
  isolation:isolate;
}
.sb-wall-back{ transform: translateY(0) translateZ(-130px); }
.sb-wall-side{ transform: translateY(0) translateX(130px) rotateY(-90deg); }

/* Lighting overlays: highlight upper-left, shadow lower-right */
.sb-wall-back::after, .sb-wall-side::after{
  content:""; position:absolute; inset:0;
  pointer-events:none;
  z-index:2;
}
.sb-wall-back::after{
  background:
    linear-gradient(135deg, rgba(255,230,190,.18) 0%, transparent 32%, transparent 65%, rgba(0,0,0,.35) 100%);
}
.sb-wall-side::after{
  /* side wall is in shadow (light comes from upper-left, which is the FAR side) */
  background:
    linear-gradient(135deg, rgba(255,230,190,.0) 0%, transparent 50%, rgba(0,0,0,.6) 100%),
    linear-gradient(90deg, rgba(0,0,0,.25), transparent 50%);
}
/* The corner crease (visible shading at the meeting line) */
.sb-wall-back::before{
  content:""; position:absolute;
  right:0; top:0; bottom:0; width:14px;
  background: linear-gradient(90deg, transparent, rgba(0,0,0,.45));
  z-index:3; pointer-events:none;
}
.sb-wall-side::before{
  content:""; position:absolute;
  left:0; top:0; bottom:0; width:14px;
  background: linear-gradient(90deg, rgba(0,0,0,.55), transparent);
  z-index:3; pointer-events:none;
}

/* Deco glued on a wall surface */
.sb-deco{ position:absolute; top:auto; left:auto; margin:0; z-index:1; }

/* Floor / hanging props */
.sb-prop{ margin:0; transform-style:preserve-3d; }
.sb-prop.sb-floor-prop{ transform: translate3d(var(--x,0px), 100px, var(--z,0px)); }
.sb-prop.sb-hangs{ transform: translate3d(var(--x,0px), -90px, var(--z,0px)); }

/* Billboard wrapper inside a prop */
.sb-bb{
  position:absolute; bottom:0; left:50%;
  transform-origin: bottom center;
  transform: translateX(-50%);
}
/* Cast shadow drawn FLAT on the floor under each prop */
.sb-floor-prop::before{
  content:""; position:absolute;
  left:50%; bottom:-2px;
  width:var(--shadow-w,50px); height:14px;
  margin-left: calc(var(--shadow-w,50px) / -2);
  background: radial-gradient(ellipse, rgba(0,0,0,.55), transparent 70%);
  transform: rotateX(90deg);
  filter: blur(2px);
  pointer-events:none;
}

/* ============================================================
   01 CRO-MAGNON — Rough stone cave, dirt floor, campfire glow
   ============================================================ */
.sbf-cm{
  background:
    radial-gradient(ellipse at 50% 25%, rgba(255,160,60,.55) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 50%, #8a6028 0%, #5a3a18 55%, #2a1808 100%);
  background-blend-mode: screen, normal;
}
.sbf-cm::before{
  content:""; position:absolute; inset:0;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 .2 0 0 0 0 .1 0 0 0 0 .05 0 0 0 .7 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay; opacity:.7;
}
.sbw-cm-back{
  background:
    radial-gradient(ellipse at 30% 30%, #5a3a20 0%, #3a2418 40%, #1a0e08 100%);
}
.sbw-cm-side{
  background:
    radial-gradient(ellipse at 90% 30%, #3a2418 0%, #1a0e08 60%, #0a0604 100%);
}
.sbw-cm-back::before, .sbw-cm-side::before{}
.sbw-cm-back, .sbw-cm-side{
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='3'/><feColorMatrix values='0 0 0 0 .35 0 0 0 0 .18 0 0 0 0 .06 0 0 0 .8 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
    radial-gradient(ellipse at 30% 30%, #5a3a20 0%, #3a2418 40%, #1a0e08 100%);
  background-blend-mode: overlay, normal;
}
.sbw-cm-back .sb-deco-painting{
  position:absolute; left:18%; top:24%; width:64%; height:30%;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 90'><g fill='%23c8521a' opacity='.85'><path d='M30 60 q12 -28 38 -28 q14 0 22 8 q8 -8 26 -8 q26 0 34 18 q4 14 -6 18 q-10 4 -14 -2 l-4 -8 q-2 12 -16 12 q-12 0 -14 -10 l-6 -2 q-4 12 -18 12 q-22 0 -32 -10 q-12 -6 -8 -16z'/><path d='M64 36 q4 -16 0 -22 q-2 -2 -4 2 q-6 8 0 22'/><path d='M120 30 q2 -14 -2 -20 q-2 -2 -4 0 q-4 8 0 20'/><circle cx='44' cy='70' r='2'/><circle cx='90' cy='74' r='2'/></g></svg>") center/contain no-repeat;
  filter: drop-shadow(0 0 3px rgba(0,0,0,.7));
}
.sb-cm-fire{ --x:0px; --z:8px; --shadow-w:60px; }
.sb-cm-fire .sb-bb{
  width:46px; height:60px;
  background:
    radial-gradient(ellipse at 50% 100%, #fff080 0%, #ffaa30 22%, #ff5a14 50%, #c12010 75%, transparent 90%);
  border-radius: 50% 50% 30% 30% / 70% 70% 30% 30%;
  filter: blur(.6px) drop-shadow(0 0 20px rgba(255,140,40,.85));
  animation: flicker 1.5s ease-in-out infinite alternate;
}
.sb-cm-fire .sb-bb::after{
  content:""; position:absolute; bottom:-2px; left:50%;
  width:62px; height:12px; transform: translateX(-50%);
  background: linear-gradient(180deg, #5a2a10 0%, #2a1408 100%);
  border-radius:6px;
  box-shadow: 0 2px 0 rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.15);
}
.sb-cm-bone{ --x:-58px; --z:34px; --shadow-w:54px; }
.sb-cm-bone .sb-bb{
  width:48px; height:14px;
  background:
    radial-gradient(ellipse at 30% 30%, #fff8e8 0%, #d4c7a3 70%, #978670 100%);
  border-radius: 8px;
  box-shadow: 0 3px 6px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.4);
}
.sb-cm-bone .sb-bb::before, .sb-cm-bone .sb-bb::after{
  content:""; position:absolute; top:-3px; width:16px; height:20px;
  background: radial-gradient(circle at 30% 30%, #fff8e8 0%, #c4b89a 80%);
  border-radius:50%;
  box-shadow: 0 2px 4px rgba(0,0,0,.4);
}
.sb-cm-bone .sb-bb::before{ left:-7px } .sb-cm-bone .sb-bb::after{ right:-7px }
.sb-cm-rock{ --x:62px; --z:-26px; --shadow-w:72px; }
.sb-cm-rock .sb-bb{
  width:68px; height:30px;
  background: radial-gradient(ellipse at 30% 25%, #b09a82 0%, #6a5848 40%, #2a221a 100%);
  border-radius: 50% 50% 50% 50% / 100% 100% 30% 30%;
  box-shadow:
    -12px 2px 0 -6px #58463a,
    14px 4px 0 -8px #4a3a30,
    inset 0 -4px 8px rgba(0,0,0,.4);
}
.sb-cm-meat{ --x:48px; --z:42px; --shadow-w:36px; }
.sb-cm-meat .sb-bb{
  width:32px; height:20px;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.5), transparent 30%),
    radial-gradient(ellipse, #e64040 0%, #8a1a1a 75%, #4a0606 100%);
  border-radius: 60% 50% 50% 60% / 60% 70% 30% 40%;
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.45), 0 3px 4px rgba(0,0,0,.5);
}

/* ============================================================
   02 ANNÉES 70 — Orange/yellow circles wallpaper, parquet, lava lamp + vinyl
   ============================================================ */
.sbf-s7{
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.18) 0 1px, transparent 1px 32px),
    repeating-linear-gradient(0deg, rgba(0,0,0,.12) 0 1px, transparent 1px 16px),
    linear-gradient(135deg, #c8842a 0%, #8a4a14 100%);
  background-blend-mode: multiply, multiply, normal;
}
.sbw-s7-back{
  background:
    radial-gradient(circle at 18% 22%, #f3c248 0 8px, transparent 9px) 0 0/36px 36px,
    radial-gradient(circle at 18% 22%, transparent 0 6px, #c84a14 7px 8px, transparent 9px) 0 0/36px 36px,
    linear-gradient(135deg, #e8c478 0%, #b08428 100%);
  background-blend-mode: normal, normal, normal;
}
.sbw-s7-side{
  background:
    radial-gradient(circle at 18% 22%, #d8a838 0 7px, transparent 8px) 0 0/36px 36px,
    linear-gradient(135deg, #a8782a 0%, #6a4a10 100%);
}
.sb-s7-lava{ --x:-48px; --z:24px; --shadow-w:34px; }
.sb-s7-lava .sb-bb{
  width:30px; height:54px;
  background:
    radial-gradient(ellipse at 50% 60%, #ffe080 0%, #ff8030 30%, #c8341a 65%, #5a1010 100%);
  border-radius: 40% 40% 30% 30% / 70% 70% 20% 20%;
  box-shadow:
    0 0 24px rgba(255,140,30,.8),
    inset 4px -8px 12px rgba(0,0,0,.35),
    inset -3px 4px 8px rgba(255,255,255,.18);
}
.sb-s7-lava .sb-bb::before{ /* base */
  content:""; position:absolute; bottom:-6px; left:50%;
  width:38px; height:10px; transform: translateX(-50%);
  background: linear-gradient(180deg, #8a8a8a, #2a2a2a);
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0,0,0,.5);
}
.sb-s7-lava .sb-bb::after{ /* cap */
  content:""; position:absolute; top:-4px; left:50%;
  width:14px; height:8px; transform: translateX(-50%);
  background: linear-gradient(180deg, #2a2a2a, #0a0a0a);
  border-radius: 2px;
}
.sb-s7-vinyl{ --x:38px; --z:30px; --shadow-w:60px; }
.sb-s7-vinyl .sb-bb{
  width:60px; height:60px; border-radius:50%;
  background:
    radial-gradient(circle, #ffd248 0 8px, #1a0a04 9px 11px, #2a1004 12px 80%, #0a0202 81% 100%);
  box-shadow:
    inset 4px 4px 10px rgba(255,255,255,.12),
    0 4px 10px rgba(0,0,0,.6);
  animation: spin 8s linear infinite;
}
.sb-s7-vinyl .sb-bb::after{ /* turntable base */
  content:""; position:absolute; inset:-6px;
  background: linear-gradient(135deg, #4a3018 0%, #2a1808 100%);
  border-radius: 6px;
  z-index:-1;
  box-shadow: 0 4px 8px rgba(0,0,0,.6);
}
.sb-s7-vinyl .sb-bb::before{ /* center sticker */
  content:""; position:absolute; top:50%; left:50%;
  width:20px; height:20px; margin:-10px;
  background: radial-gradient(circle at 30% 30%, #e84a1a, #8a1a02);
  border-radius:50%;
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.5);
}

/* ============================================================
   03 ANNÉES 80 — Neon pink→orange gradient walls, glitter floor, boombox+cassette+neon
   ============================================================ */
.sbf-s8{
  background:
    radial-gradient(circle at 22% 18%, #fff 0 1.5px, transparent 2px) 0 0/16px 16px,
    radial-gradient(circle at 64% 80%, #fff 0 1.5px, transparent 2px) 0 0/22px 22px,
    radial-gradient(ellipse at 50% 50%, #4a1a4a 0%, #1a0a2a 100%);
  background-blend-mode: screen, screen, normal;
}
.sbw-s8-back{
  background:
    linear-gradient(135deg, #ff3aa0 0%, #ff7a30 60%, #c81a4a 100%);
}
.sbw-s8-back::before{ /* grid lines */
  content:""; position:absolute; inset:0;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.15) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.15) 0 1px, transparent 1px 24px);
  pointer-events:none;
}
.sbw-s8-side{
  background:
    linear-gradient(135deg, #6a1a6a 0%, #2a0a3a 100%);
}
.sbw-s8-back .sb-deco-neon{
  position:absolute; left:14%; right:14%; top:18%; height:24%;
  background: linear-gradient(180deg, #00f0ff 0%, #0080c8 100%);
  border-radius:4px;
  filter: drop-shadow(0 0 16px #00f0ff) drop-shadow(0 0 30px #00aacc);
  z-index:2;
}
.sbw-s8-back .sb-deco-neon::before{
  content:"MIAMI"; position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-family:'Boogaloo','DM Mono',monospace;
  font-size:14px; letter-spacing:.12em;
  color:#fff;
  text-shadow: 0 0 6px #fff, 0 0 12px #00f0ff;
}
.sb-s8-boombox{ --x:36px; --z:38px; --shadow-w:80px; }
.sb-s8-boombox .sb-bb{
  width:78px; height:42px;
  background:
    linear-gradient(180deg, #5a5a5a 0%, #2a2a2a 50%, #1a1a1a 100%);
  border-radius:6px;
  box-shadow:
    0 6px 10px rgba(0,0,0,.65),
    inset 0 2px 0 rgba(255,255,255,.2),
    inset 0 -2px 0 rgba(0,0,0,.55);
}
.sb-s8-boombox .sb-bb::before, .sb-s8-boombox .sb-bb::after{
  content:""; position:absolute; top:50%; transform: translateY(-50%);
  width:22px; height:22px; border-radius:50%;
  background:
    radial-gradient(circle at 35% 35%, #4a4a4a 0%, #0a0a0a 70%);
  box-shadow:
    inset 0 0 0 2px #1a1a1a,
    inset 0 0 0 5px #2a2a2a,
    0 0 0 1px #050505;
}
.sb-s8-boombox .sb-bb::before{ left:6px }
.sb-s8-boombox .sb-bb::after{ right:6px }
.sb-s8-cassette{ --x:-38px; --z:30px; --shadow-w:48px; }
.sb-s8-cassette .sb-bb{
  width:46px; height:30px;
  background:
    linear-gradient(180deg, #ff3aa0 0%, #c81a4a 100%);
  border-radius: 4px;
  box-shadow:
    0 4px 8px rgba(0,0,0,.5),
    inset 0 2px 0 rgba(255,255,255,.25),
    inset 0 -2px 0 rgba(0,0,0,.3);
}
.sb-s8-cassette .sb-bb::before{
  content:""; position:absolute; left:6px; right:6px; top:6px; height:10px;
  background: linear-gradient(180deg, #fff8e0, #cab98a);
  border-radius:1px;
}
.sb-s8-cassette .sb-bb::after{
  content:""; position:absolute; left:50%; bottom:5px;
  width:24px; height:8px; transform: translateX(-50%);
  background:
    radial-gradient(circle at 25% 50%, #1a1a1a 0 2px, transparent 3px),
    radial-gradient(circle at 75% 50%, #1a1a1a 0 2px, transparent 3px),
    #2a2a2a;
  border-radius:1px;
}

/* ============================================================
   04 GANGSTER — Worn dark leather walls, dark wood floor, fedora + suitcase + whisky + spotlight
   ============================================================ */
.sbf-gng{
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.45) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(90deg, rgba(255,220,170,.06) 0 32px, transparent 32px 64px),
    linear-gradient(135deg, #4a2c14 0%, #1a0e04 100%);
  background-blend-mode: multiply, screen, normal;
}
.sbf-gng::before{
  content:""; position:absolute; inset:0;
  background: radial-gradient(ellipse at 50% 30%, rgba(255,220,140,.32), transparent 50%);
  pointer-events:none;
}
.sbw-gng-back{
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,220,140,.18) 0%, transparent 55%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2'/><feColorMatrix values='0 0 0 0 .25 0 0 0 0 .15 0 0 0 0 .08 0 0 0 .75 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
    linear-gradient(135deg, #6a4a2a 0%, #2a1a0a 100%);
  background-blend-mode: screen, overlay, normal;
}
.sbw-gng-side{
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2'/><feColorMatrix values='0 0 0 0 .25 0 0 0 0 .15 0 0 0 0 .08 0 0 0 .75 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
    linear-gradient(135deg, #3a2818 0%, #0a0604 100%);
  background-blend-mode: overlay, normal;
}
.sb-gng-spot{ --x:0px; --z:-50px; --shadow-w:0px; }
.sb-gng-spot .sb-bb{
  width:60px; height:30px;
  background: radial-gradient(ellipse at 50% 100%, rgba(255,220,140,.7) 0%, rgba(200,160,80,.3) 60%, transparent 80%);
  border-radius:50% 50% 0 0;
  filter: blur(1px);
}
.sb-gng-fedora{ --x:0px; --z:24px; --shadow-w:60px; }
.sb-gng-fedora .sb-bb{
  width:60px; height:36px;
}
.sb-gng-fedora .sb-bb::before{ /* crown */
  content:""; position:absolute; left:50%; bottom:10px;
  width:38px; height:30px; transform: translateX(-50%);
  background:
    radial-gradient(ellipse at 30% 30%, #2a221a 0%, #0a0604 70%);
  border-radius: 50% 50% 30% 30% / 70% 70% 30% 30%;
  box-shadow: inset 0 -4px 0 rgba(0,0,0,.5);
}
.sb-gng-fedora .sb-bb::after{ /* brim */
  content:""; position:absolute; left:50%; bottom:0;
  width:60px; height:10px; transform: translateX(-50%);
  background:
    radial-gradient(ellipse at 50% 0%, #2a221a 0%, #050302 100%);
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0,0,0,.7);
}
.sb-gng-case{ --x:-54px; --z:30px; --shadow-w:64px; }
.sb-gng-case .sb-bb{
  width:64px; height:36px;
  background:
    linear-gradient(180deg, #6a4220 0%, #3a2410 100%);
  border-radius: 4px;
  box-shadow:
    inset 0 2px 0 rgba(255,200,140,.15),
    inset 0 -2px 0 rgba(0,0,0,.55),
    0 4px 8px rgba(0,0,0,.6);
}
.sb-gng-case .sb-bb::before{ /* clasp */
  content:""; position:absolute; left:50%; top:4px;
  width:8px; height:6px; transform: translateX(-50%);
  background: linear-gradient(180deg, #d8b070, #6a4a20);
  border-radius:1px;
}
.sb-gng-case .sb-bb::after{ /* handle */
  content:""; position:absolute; left:50%; top:-6px;
  width:18px; height:8px; transform: translateX(-50%);
  border: 2px solid #2a1808;
  border-bottom: none;
  border-radius: 8px 8px 0 0;
}
.sb-gng-whisky{ --x:48px; --z:32px; --shadow-w:26px; }
.sb-gng-whisky .sb-bb{
  width:24px; height:32px;
  background:
    linear-gradient(180deg, rgba(0,0,0,.0) 0%, rgba(0,0,0,.0) 30%, #c8841a 31%, #8a4a08 100%);
  border: 2px solid rgba(255,255,255,.2);
  border-radius: 3px;
  box-shadow:
    inset 0 -4px 8px rgba(0,0,0,.4),
    inset 2px 0 4px rgba(255,255,255,.2),
    0 0 14px rgba(255,180,80,.4);
}
.sb-gng-whisky .sb-bb::before{ /* shine */
  content:""; position:absolute; left:3px; top:2px;
  width:3px; height:60%;
  background: rgba(255,255,255,.45);
  border-radius:2px;
}

/* ============================================================
   05 RED ROOM — Burgundy velvet draped walls, dark polished floor, chaise+rose+spotlight
   ============================================================ */
.sbf-rr{
  background:
    radial-gradient(ellipse at 50% 30%, rgba(255,160,160,.25), transparent 55%),
    linear-gradient(180deg, #0a0202 0%, #2a0808 60%, #0a0202 100%);
  position:relative;
}
.sbf-rr::before{
  content:""; position:absolute; inset:0;
  background:
    repeating-linear-gradient(90deg, transparent 0 30px, rgba(255,255,255,.04) 30px 31px),
    repeating-linear-gradient(0deg, transparent 0 30px, rgba(255,255,255,.04) 30px 31px);
}
.sbw-rr-back{
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.5) 0 2px, rgba(160,20,20,.15) 4px 16px, rgba(0,0,0,.5) 18px 20px),
    linear-gradient(135deg, #c81a1a 0%, #6a0606 60%, #2a0202 100%);
  background-blend-mode: multiply, normal;
}
.sbw-rr-side{
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.55) 0 3px, rgba(120,20,20,.15) 4px 14px, rgba(0,0,0,.55) 17px 20px),
    linear-gradient(135deg, #8a0a0a 0%, #2a0202 100%);
  background-blend-mode: multiply, normal;
}
.sbw-rr-side .sb-deco-curtain{
  position:absolute; left:0; top:0; bottom:0; width:50%;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.6) 0 4px, rgba(200,30,30,.6) 5px 12px, rgba(0,0,0,.6) 16px 18px),
    linear-gradient(180deg, #b81818 0%, #4a0606 100%);
  box-shadow: inset -10px 0 30px rgba(0,0,0,.5);
  background-blend-mode: multiply, normal;
}
.sb-rr-spot{ --x:0px; --z:0px; --shadow-w:0px; }
.sb-rr-spot{
  /* hangs from top */
  transform: translate3d(0, -90px, 0);
}
.sb-rr-spot .sb-bb{
  width:80px; height:80px;
  background: radial-gradient(ellipse at 50% 100%, rgba(255,140,140,.35) 0%, rgba(200,50,50,.18) 50%, transparent 80%);
  border-radius:50% 50% 0 0;
  filter: blur(2px);
}
.sb-rr-chaise{ --x:18px; --z:30px; --shadow-w:120px; }
.sb-rr-chaise .sb-bb{
  width:120px; height:42px;
  background:
    linear-gradient(180deg, #e83a3a 0%, #8a1010 60%, #3a0606 100%);
  border-radius: 30px 8px 8px 30px;
  box-shadow:
    0 8px 14px rgba(0,0,0,.7),
    inset 0 4px 0 rgba(255,255,255,.18),
    inset 0 -4px 0 rgba(0,0,0,.4);
}
.sb-rr-chaise .sb-bb::before{ /* back rest at left */
  content:""; position:absolute; left:0; top:-22px;
  width:32px; height:54px;
  background:
    radial-gradient(ellipse at 40% 40%, #ff5a5a 0%, #8a1010 70%, #3a0606 100%);
  border-radius: 50% 14px 6px 14px / 60% 14px 6px 14px;
  box-shadow: inset -4px 0 6px rgba(0,0,0,.4);
}
.sb-rr-chaise .sb-bb::after{ /* button-tuft pattern on seat */
  content:""; position:absolute; left:24px; right:8px; top:6px; height:14px;
  background:
    radial-gradient(circle at 25% 50%, rgba(0,0,0,.45) 0 2px, transparent 3px) 0 0/22px 14px,
    radial-gradient(circle at 75% 50%, rgba(0,0,0,.45) 0 2px, transparent 3px) 0 0/22px 14px;
}
.sb-rr-rose{ --x:-54px; --z:32px; --shadow-w:14px; }
.sb-rr-rose .sb-bb{
  width:14px; height:34px;
  background: linear-gradient(180deg, transparent 22%, #2a6a20 23% 100%);
}
.sb-rr-rose .sb-bb::before{ /* flower */
  content:""; position:absolute; top:-2px; left:50%;
  width:18px; height:16px; transform: translateX(-50%);
  background:
    radial-gradient(circle at 35% 35%, #ff5050 0%, #c81a1a 60%, #6a0606 100%);
  border-radius: 50% 50% 40% 40% / 60% 60% 40% 40%;
  box-shadow: 0 0 8px rgba(255,40,40,.35);
}
.sb-rr-rose .sb-bb::after{ /* leaf */
  content:""; position:absolute; top:14px; left:8px;
  width:8px; height:6px;
  background: radial-gradient(ellipse, #4aaa30, #2a6a20);
  border-radius: 50% 30%;
  transform: rotate(35deg);
}

/* ============================================================
   06 VERSAILLES — Royal blue stucco + gold arabesques, marble floor, candelabra + ornate chair
   ============================================================ */
.sbf-vs{
  background:
    /* gold veins on white marble */
    radial-gradient(ellipse at 20% 30%, rgba(212,170,60,.4) 0 2px, transparent 3px) 0 0/80px 90px,
    radial-gradient(ellipse at 60% 60%, rgba(212,170,60,.35) 0 1px, transparent 2px) 0 0/120px 60px,
    linear-gradient(135deg, #c8a868 0%, #7a5828 100%);
}
.sbf-vs::before{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(115deg, transparent 28%, rgba(212,170,60,.55) 29%, rgba(212,170,60,.55) 30%, transparent 31%),
    linear-gradient(58deg, transparent 58%, rgba(212,170,60,.45) 59%, transparent 60%),
    linear-gradient(98deg, transparent 70%, rgba(212,170,60,.4) 71%, transparent 72%);
  mix-blend-mode: multiply;
  opacity:.6;
}
.sbw-vs-back{
  background:
    radial-gradient(ellipse at 30% 25%, #4a5ec8 0%, #1e2a78 50%, #0a1238 100%);
}
.sbw-vs-side{
  background:
    linear-gradient(135deg, #2a3a98 0%, #0a1230 100%);
}
.sbw-vs-back::before, .sbw-vs-side::before{}
.sbw-vs-back, .sbw-vs-side{
  /* gold arabesque pattern in relief — small dots in gold */
  background-image:
    radial-gradient(circle at 25% 25%, rgba(212,170,60,.7) 0 2px, transparent 3px),
    radial-gradient(circle at 75% 75%, rgba(212,170,60,.5) 0 2px, transparent 3px),
    radial-gradient(circle at 50% 50%, rgba(212,170,60,.4) 0 1px, transparent 2px);
  background-size: 38px 38px, 38px 38px, 26px 26px;
}
.sbw-vs-back{ background-color:#1e2a78 }
.sbw-vs-side{ background-color:#0a1230 }
.sbw-vs-back .sb-deco-frame{
  position:absolute; left:24%; right:24%; top:18%; bottom:42%;
  border: 6px solid #d4aa3c;
  border-radius:4px;
  background:
    repeating-linear-gradient(45deg, rgba(212,170,60,.15) 0 1px, transparent 1px 4px),
    linear-gradient(135deg, #1e2a78 0%, #0a1238 100%);
  box-shadow:
    0 0 0 2px #7a5a20,
    inset 0 0 12px rgba(212,170,60,.4),
    0 4px 12px rgba(0,0,0,.5);
}
.sbw-vs-back .sb-deco-frame::before{
  content:""; position:absolute; inset:6px;
  border:1px solid rgba(212,170,60,.6);
  border-radius:2px;
}
.sbw-vs-side .sb-deco-curtain{
  position:absolute; right:0; top:0; bottom:0; width:46%;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.6) 0 4px, rgba(160,20,20,.6) 5px 12px, rgba(0,0,0,.6) 16px 18px),
    linear-gradient(180deg, #8a1414 0%, #4a0606 100%);
  background-blend-mode: multiply, normal;
  box-shadow: inset 10px 0 30px rgba(0,0,0,.5);
}
.sb-vs-candelabra{ --x:-46px; --z:24px; --shadow-w:38px; }
.sb-vs-candelabra .sb-bb{
  width:36px; height:56px;
}
.sb-vs-candelabra .sb-bb::before{ /* stem with arms */
  content:""; position:absolute; left:50%; bottom:0;
  width:5px; height:54px; transform: translateX(-50%);
  background: linear-gradient(180deg, #f0d680 0%, #b88a30 70%, #6a4a18 100%);
  border-radius: 2px;
  box-shadow:
    -14px 14px 0 -2px #b88a30,
    14px 14px 0 -2px #b88a30,
    -8px 22px 0 -2px #b88a30,
    8px 22px 0 -2px #b88a30;
}
.sb-vs-candelabra .sb-bb::after{ /* flames row */
  content:""; position:absolute; left:50%; top:0;
  width:36px; height:8px; transform: translateX(-50%);
  background:
    radial-gradient(circle at 16% 100%, #ffe080 0 2px, transparent 3px),
    radial-gradient(circle at 50% 100%, #ffe080 0 2px, transparent 3px),
    radial-gradient(circle at 84% 100%, #ffe080 0 2px, transparent 3px);
  filter: drop-shadow(0 0 6px #ff9020);
  animation: flicker 1.4s ease-in-out infinite alternate;
}
.sb-vs-chair{ --x:46px; --z:26px; --shadow-w:50px; }
.sb-vs-chair .sb-bb{
  width:48px; height:70px;
}
.sb-vs-chair .sb-bb::before{ /* backrest */
  content:""; position:absolute; left:50%; bottom:24px;
  width:38px; height:48px; transform: translateX(-50%);
  background:
    radial-gradient(ellipse at 30% 30%, #c8a046 0%, #8a6a20 60%, #3a2810 100%);
  border-radius: 22px 22px 4px 4px;
  box-shadow:
    inset 0 -4px 0 rgba(0,0,0,.3),
    inset 4px 4px 8px rgba(255,255,255,.25);
}
.sb-vs-chair .sb-bb::after{ /* seat cushion (red velvet) */
  content:""; position:absolute; left:50%; bottom:6px;
  width:44px; height:22px; transform: translateX(-50%);
  background:
    radial-gradient(ellipse at 30% 30%, #e63a3a 0%, #8a1010 70%, #3a0606 100%);
  border-radius: 8px 8px 4px 4px;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.2),
    inset 0 -3px 0 rgba(0,0,0,.4),
    0 4px 8px rgba(0,0,0,.5);
}

/* ============================================================
   Hero scene wrapper
   ============================================================ */
.hero-scene-v4{
  position:relative;
  perspective:1800px;
  min-height:480px;
  display:flex;align-items:center;justify-content:center;
}
.hero-scene-v4 .studio-box{ width: 380px; height: 380px; }
.hero-scene-v4 .scene-tag{
  position:absolute;
  left:50%; bottom:24px;
  transform: translateX(-50%);
  display:flex; align-items:baseline; gap:10px;
  padding:8px 16px;
  background:var(--paper);
  border:1.5px solid var(--line);
  border-radius:999px;
  font-family:var(--mono);
  font-size:12px;
  white-space:nowrap;
  box-shadow:0 6px 16px rgba(0,0,0,.08);
  z-index:10;
}
.hero-scene-v4 .scene-tag-idx{font-weight:500}
.hero-scene-v4 .scene-tag-name{font-family:var(--display);font-weight:500;font-size:14px;letter-spacing:-.01em}
.hero-scene-v4 .scene-tag-meta{color:var(--ink-dim);font-size:11px}
.hero-scene-v4 .scene-dots{
  position:absolute;
  left:50%; bottom:-2px;
  transform: translateX(-50%);
  display:flex; gap:8px;
  z-index:10;
}
.hero-scene-v4 .sd{
  width:24px; height:6px; border-radius:3px;
  background:var(--ink-faint);
  border:none; cursor:pointer; padding:0;
  transition:background .3s var(--ease), width .3s var(--ease);
}
.hero-scene-v4 .sd.active{ background:var(--ink); width:36px; }

.tcard-decor .studio-box{ width:340px; height:320px; }

@media (max-width:1100px){
  .hero-scene-v4 .studio-box{ width:300px; height:300px; }
  .hero-scene-v4{ min-height:380px; }
  .tcard-decor .studio-box{ width:280px; height:260px; }
}


/* Theme cards (Univers section) — strip interior props; keep box architecture only */
.tcard-decor .sb-floor-prop,
.tcard-decor .sb-hangs,
.tcard-decor .sb-deco-frame,
.tcard-decor .sb-deco-curtain,
.tcard-decor .sb-deco-neon,
.tcard-decor .sb-deco-painting{
  display:none !important;
}


/* ============================================================
   TEXTURES — Sommaire chips & "Les Univers" theme cards
   (replaces flat color backgrounds with photo textures + dark overlay)
   ============================================================ */

/* --- Sommaire chips at the bottom of the hero --- */
.chip{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  color:#fff;
  background-color:transparent !important;
  background-size:cover;
  background-position:center;
  border-color: rgba(255,255,255,.35);
  text-shadow: 0 1px 2px rgba(0,0,0,.45);
}
.chip::before{
  content:""; position:absolute; inset:0;
  background: rgba(0,0,0,0.38);
  z-index:-1;
  border-radius:inherit;
}
.chip-cm{  background-image:url('assets/tex-cm-card.png');  }
.chip-s7{  background-image:url('assets/tex-s7-card.png');  }
.chip-s8{  background-image:url('assets/tex-s8-card.png');  }
.chip-gng{ background-image:url('assets/tex-gng-card.png'); }
.chip-rr{  background-image:url('assets/tex-rr-card.png');  }
.chip-vs{  background-image:url('assets/tex-vs-card.png');  }

/* --- "Les Univers" theme cards --- */
.tcard{
  isolation:isolate;
  background-color:transparent !important;
  background-size:cover;
  background-position:center;
  color:#fff;
}
.tcard::before{
  content:""; position:absolute; inset:0;
  background: rgba(0,0,0,0.38);
  z-index:0;
  pointer-events:none;
  border-radius:inherit;
}
.tcard > *{ position:relative; z-index:1; }
.tcard .tcard-tex{ display:none !important; } /* hide old subtle texture overlay */

/* Texture per card */
.tcard-cm{  background-image:url('assets/tex-cm-card.png');  }
.tcard-s7{  background-image:url('assets/tex-s7-card.png');  }
.tcard-s8{  background-image:url('assets/tex-s8-card.png');  }
.tcard-gng{ background-image:url('assets/tex-gng-card.png'); }
.tcard-rr{  background-image:url('assets/tex-rr-card.png');  }
.tcard-vs{  background-image:url('assets/tex-vs-card.png');  }

/* Force all text/buttons inside to read white on the darkened texture */
.tcard,
.tcard .tcard-desc,
.tcard .kvs li,
.tcard .tcard-cta,
.tcard .tcard-bar,
.tcard .tcard-idx,
.tcard .tcard-tag,
.tcard .tcard-meta,
.tcard .decor-stamp{
  color:#fff !important;
}
.tcard .tcard-bar{
  background: rgba(0,0,0,.35) !important;
  border-bottom-color: rgba(255,255,255,.25) !important;
}
.tcard .kvs,
.tcard .kvs li,
.tcard .tcard-decor,
.tcard .decor-stamp{
  border-color: rgba(255,255,255,.28) !important;
}
.tcard .tcard-cta{
  border-color: rgba(255,255,255,.6) !important;
}
.tcard .tcard-cta:hover{
  background:#fff !important;
  color: var(--ink) !important;
}


/* ============================================================
   PORTFOLIO — Horizontal carousel
   ============================================================ */
.portfolio{
  padding:80px 0 80px;
  max-width:none;
  overflow:hidden;
}
.pf-head{
  max-width:1500px;
  margin:0 auto 36px;
  padding:0 28px;
}
.pf-sub{
  font-family:var(--mono);
  font-size:13px;
  color:var(--ink-dim);
  margin:12px 0 0;
  letter-spacing:.02em;
}
.pf-stage{
  position:relative;
}
.pf-track{
  display:flex;
  gap:18px;
  padding:8px 28px 32px;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-behavior:smooth;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.pf-track::-webkit-scrollbar{ display:none; }
.pf-track:focus{ outline:none; }

.pf-item{
  position:relative;
  flex:0 0 auto;
  height:70vh;
  max-height:760px;
  min-height:360px;
  width:auto;
  margin:0;
  border-radius:18px;
  overflow:hidden;
  background:var(--paper);
  border:1.5px solid var(--line);
  scroll-snap-align: start;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.pf-item:hover{
  transform: translateY(-4px);
  box-shadow: 0 24px 40px -20px rgba(21,17,10,.35);
}
.pf-item img{
  display:block;
  height:100%;
  width:auto;
  object-fit:cover;
}
.pf-item figcaption{
  position:absolute;
  left:14px; bottom:14px; right:14px;
  display:flex; align-items:center; gap:8px;
  padding:8px 14px;
  border-radius:999px;
  background:rgba(21,17,10,.7);
  color:#fff;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.04em;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  width:fit-content;
  max-width:calc(100% - 28px);
}
.pf-item figcaption span{
  font-family:var(--display);
  font-weight:500;
  font-size:14px;
  letter-spacing:-.01em;
  margin-right:4px;
}

/* Video placeholder slot — clearly marked, ready for manual video swap */
.pf-video-slot{
  background:
    linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%);
  width: calc(70vh * .68);
  display:flex; align-items:center; justify-content:center;
}
.pf-vthumb{
  width:88px; height:88px;
  border-radius:50%;
  background: rgba(255,255,255,.12);
  border: 2px solid rgba(255,255,255,.4);
  display:flex; align-items:center; justify-content:center;
  color:#fff;
  transition: transform .25s var(--ease), background .25s var(--ease);
}
.pf-video-slot:hover .pf-vthumb{
  transform: scale(1.08);
  background: rgba(255,255,255,.22);
}
.pf-vthumb svg{ width:36px; height:36px; margin-left:4px; }
.pf-video-slot figcaption{ background:rgba(0,0,0,.7); color:#fff; }

/* Active video styling (when manual video tag is inserted) */
.pf-item video{
  display:block; height:100%; width:auto; object-fit:cover;
}

/* Arrows */
.pf-arrow{
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  width:52px; height:52px;
  border-radius:50%;
  background: var(--ink);
  color: var(--bg);
  border:none;
  cursor:pointer;
  z-index:5;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 8px 20px rgba(0,0,0,.3);
  transition: transform .25s var(--ease), opacity .25s var(--ease);
}
.pf-arrow svg{ width:24px; height:24px; }
.pf-arrow:hover{ transform: translateY(-50%) scale(1.08); }
.pf-arrow:disabled{ opacity:.3; cursor:not-allowed; }
.pf-arrow-l{ left:16px; }
.pf-arrow-r{ right:16px; }

/* Progress bar */
.pf-progress{
  margin: 8px 28px 0;
  height:4px;
  background: var(--line-soft);
  border-radius: 2px;
  overflow:hidden;
}
.pf-progress span{
  display:block;
  height:100%;
  width:0%;
  background: var(--ink);
  border-radius:2px;
  transition: width .15s linear;
}

/* ============================================================
   MOBILE NAV (hamburger)
   ============================================================ */
.nav-toggle{
  display:none;
  width:44px; height:44px;
  border-radius:50%;
  background:var(--paper);
  border:1.5px solid var(--line);
  cursor:pointer;
  padding:0;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.nav-toggle span{
  display:block;
  width:18px; height:2px;
  background:var(--ink);
  border-radius:2px;
  transition: transform .3s var(--ease), opacity .25s var(--ease);
}
.nav-toggle.is-open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2){ opacity:0; }
.nav-toggle.is-open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* ============================================================
   RESPONSIVE — global audit
   ============================================================ */

img, video{ max-width:100%; height:auto; }

/* Tablet */
@media (max-width:1024px){
  .hero-grid{ grid-template-columns:1fr; gap:32px; }
  .hero-scene-v4{ order:2; min-height:380px; }
  .hero-scene-v4 .studio-box{ width:min(80vw, 360px); height:min(80vw, 360px); }
  .tcard-decor .studio-box{ width:min(80vw, 320px); height:min(80vw, 300px); }
  .ft-grid{ grid-template-columns:1fr 1fr; gap:32px; }
  .pf-item{ height:60vh; min-height:320px; }
  .pf-video-slot{ width: calc(60vh * .68); }
}

/* Mobile */
@media (max-width:768px){
  .topbar{ padding:12px 16px; gap:8px; }
  .brand-text{ display:none; }
  .topnav{
    display:none;
    position:fixed; top:0; right:0; bottom:0; left:0;
    background:var(--bg);
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:24px;
    z-index:200;
    padding:80px 24px 24px;
  }
  .topnav.is-open{ display:flex; }
  .topnav a{ font-size:22px; font-family:var(--display); }
  .topnav a::after{ display:none; }
  .nav-toggle{ display:flex; position:relative; z-index:201; }
  .top-date{ display:none; }

  .hero{ padding:24px 16px 24px; }
  .hero-title{ font-size:clamp(40px, 13vw, 72px); }
  .hero-lede{ font-size:16px; }
  .hero-meta{ gap:6px; }
  .kbd{ font-size:10px; padding:5px 9px; }

  .btn{ min-height:48px; padding:14px 18px; font-size:14px; }
  .btn-pill{ min-height:44px; }
  .tcard-cta, .tp-btn, .form-submit, .gal-link{ min-height:48px; }

  .hero-chips{ flex-direction:column; align-items:stretch; gap:8px; }
  .chip{ width:100%; justify-content:center; padding:14px; font-size:13px; min-height:48px; }

  .intro{ padding:64px 16px 48px; }
  .intro-stats{ grid-template-columns:1fr 1fr; }
  .stat{ padding:16px 16px 16px 0; }
  .stat:nth-child(3){ border-bottom:1.5px solid var(--line); }
  .stat:nth-child(odd){ border-right:1.5px solid var(--line); }
  .stat:nth-child(even){ border-right:none; padding-right:0; }

  .themes{ padding:48px 16px 48px; }
  .tcard{ border-radius:22px; margin-bottom:18px; }
  .tcard-body{ grid-template-columns:1fr; }
  .tcard-text{ padding:28px 22px 24px; }
  .tcard-decor{ border-left:none; border-top:1.5px solid currentColor; min-height:320px; padding:24px; }
  .tcard-bar{ flex-wrap:wrap; gap:10px; padding:12px 22px; font-size:11px; }
  .tcard-tag{ margin-left:0; }
  .tcard-desc{ font-size:16px; }

  .how{ padding:64px 16px 64px; }
  .how-grid{ grid-template-columns:1fr; gap:14px; }
  .hcard{ min-height:auto; padding:28px 22px 24px; }
  .hcard:nth-child(3){ grid-column:auto; }
  .hcard-num{ font-size:84px; }

  .portfolio{ padding:48px 0 48px; }
  .pf-head{ padding:0 16px; margin-bottom:24px; }
  .pf-track{ padding:8px 16px 28px; gap:12px; }
  .pf-item{ height:62vh; min-height:300px; max-height:560px; border-radius:14px; }
  .pf-video-slot{ width: calc(62vh * .68); }
  .pf-arrow{ display:none; }
  .pf-progress{ margin: 4px 16px 0; }

  .tarifs{ padding:64px 16px 48px; }
  .tar-grid{ grid-template-columns:1fr; }
  .tcard-price{ min-height:auto; }
  .tar-ladder{ grid-template-columns:repeat(3, 1fr); max-width:100%; }

  .quote{ padding:48px 16px 48px; }
  .quote-inner{ padding:40px 24px 32px; border-radius:22px; }
  .quote-q{ font-size:24px; }

  .contact{ padding:48px 16px 48px; }
  .contact-grid{ grid-template-columns:1fr; padding:24px; gap:32px; border-radius:22px; }
  .form-row, .form-row-recap{ grid-template-columns:1fr; }
  .info{ grid-template-columns:1fr; gap:24px; }
  .univ-grid{ grid-template-columns:1fr; }

  .footer{ padding:48px 16px 24px; margin-top:48px; }
  .ft-mega{ font-size:56px; padding-bottom:32px; margin-bottom:48px; }
  .ft-grid{ grid-template-columns:1fr; gap:28px; padding-bottom:32px; }
  .ft-bottom{ flex-direction:column; align-items:flex-start; gap:8px; }

  .sec-h{ font-size:clamp(32px, 9vw, 56px); }
  .intro-body{ font-size:clamp(22px, 5.5vw, 32px); }

  body{ font-size:16px; }
}

/* Small mobile */
@media (max-width:430px){
  .hero-title{ font-size:clamp(36px, 11vw, 56px); }
  .hero-scene-v4 .studio-box{ width:80vw; height:80vw; max-width:320px; max-height:320px; }
  .tcard-decor .studio-box{ width:80vw; height:75vw; }
  .ft-mega{ font-size:44px; }
}


/* Logo image (replaces the SVG placeholder) */
.brand-logo{ width:56px; height:56px; }
.brand-logo img{ width:100%; height:100%; display:block; object-fit:contain; }
.brand-text{ display:none; } /* badge already includes the wording */
@media (max-width:768px){
  .brand-logo{ width:60px; height:60px; }
}


/* ============================================================
   v4 — Cormorant title, centered sommaire/stats, new tarifs UI
   ============================================================ */

/* --- Topbar: bigger logo, Cormorant wordmark --- */
.brand{ gap:14px; }
.brand-logo{
  width:96px; height:96px;
  display:inline-block;
  flex-shrink:0;
}
.brand-logo img{
  width:100%; height:100%;
  display:block;
  object-fit:contain;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.15));
}
.brand-wordmark{
  font-family:'Cormorant Garamond', serif;
  font-weight:600;
  font-style:italic;
  font-size:24px;
  line-height:1;
  letter-spacing:.005em;
  color: var(--ink);
}
@media (max-width:1100px){
  .brand-logo{ width:76px; height:76px; }
  .brand-wordmark{ font-size:20px; }
}
@media (max-width:768px){
  .brand-logo{ width:48px; height:48px; }
  .brand-wordmark{ display:none; }
}

/* --- Hero title in Cormorant when grand --- */
.hero-title.hero-title-grand{
  font-family:'Cormorant Garamond', serif;
  font-weight:500;
  font-size:clamp(56px, 9.5vw, 156px);
  line-height:.95;
  letter-spacing:-.025em;
  margin:0 0 16px;
  text-wrap:balance;
}
.hero-title.hero-title-grand em{
  font-style:italic; font-weight:500;
  color:var(--ink);
}
.hero-kicker{
  font-family:var(--mono);
  font-size:13px; letter-spacing:.16em; text-transform:uppercase;
  color: var(--ink-dim);
  margin:0 0 24px;
}

/* --- Centered sommaire (chips) --- */
.hero-chips{
  justify-content:center;
  text-align:center;
}

/* --- Centered intro stat block --- */
.intro-stats{
  text-align:center;
}
.stat{
  padding:24px 16px;
  text-align:center;
}
.stat:first-child{ padding-left:0; }
.stat:last-child{ padding-right:0; }
.stat .stat-num{ margin-left:auto; margin-right:auto; }

/* ============================================================
   TARIFS v2 — à la photo par personne
   ============================================================ */
.tarifs-v2{ padding-bottom:48px; }
.tar-grid-v2{
  display:grid;
  grid-template-columns:1fr 1fr 1.4fr;
  gap:18px;
  align-items:stretch;
  margin-top:36px;
}
.fmt-card, .fmt-calc{
  background:var(--paper);
  border:1.5px solid var(--line);
  border-radius:24px;
  padding:32px 28px 28px;
  display:flex; flex-direction:column;
  position:relative;
}
.fmt-card-feat{
  background:var(--ink); color:var(--bg);
  border-color:var(--ink);
}
.fmt-card-feat .fmt-tag{ color: rgba(236,229,214,.65); }
.fmt-tag{
  font-family:var(--mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-dim);
  margin-bottom:10px;
}
.fmt-name{
  font-family:'Cormorant Garamond', serif;
  font-weight:500;
  font-size:44px;
  line-height:.95;
  letter-spacing:-.01em;
  margin:0 0 14px;
}
.fmt-card-feat .fmt-name{ color:var(--bg); }
.fmt-desc{
  font-family:var(--display);
  font-size:15px; line-height:1.45;
  color:var(--ink-dim);
  margin:0 0 22px;
}
.fmt-card-feat .fmt-desc{ color: rgba(236,229,214,.75); }
.fmt-price{
  display:inline-flex; align-items:baseline; gap:4px;
  font-family:'Cormorant Garamond', serif;
  font-weight:500;
  font-size:76px;
  line-height:.9;
  letter-spacing:-.025em;
  margin: 4px 0 22px;
}
.fmt-price-cur{ font-size:.45em; opacity:.7; margin-right:2px; }
.fmt-price-per{ font-family:var(--mono); font-size:14px; letter-spacing:.06em; color:var(--ink-dim); margin-left:6px; align-self:flex-end; margin-bottom:8px; }
.fmt-card-feat .fmt-price-per{ color: rgba(236,229,214,.6); }
.fmt-list{
  list-style:none; padding:0; margin:0 0 22px;
  flex:1;
  border-top:1px solid currentColor;
}
.fmt-list li{
  display:flex; justify-content:space-between;
  padding:11px 0;
  border-bottom:1px solid currentColor;
  font-family:var(--mono); font-size:13px;
  border-color: rgba(21,17,10,.18);
}
.fmt-card-feat .fmt-list li{ border-color: rgba(236,229,214,.18); }
.fmt-list li span:first-child{ opacity:.7; }
.fmt-list li span:last-child{ font-weight:500; }
.fmt-cta{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:16px 22px;
  border:1.5px solid currentColor;
  border-radius:999px;
  font-family:var(--display); font-weight:500; font-size:15px;
  cursor:pointer;
  transition: gap .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
  min-height:48px;
}
.fmt-cta:hover{ gap:16px; }
.fmt-card-feat .fmt-cta{ background: var(--bg); color: var(--ink); border-color: var(--bg); }
.fmt-card-feat .fmt-cta:hover{ background: transparent; color: var(--bg); }

/* --- Simulator card --- */
.fmt-calc{
  background: var(--paper);
  border-color: var(--line);
}
.calc-row{ margin-bottom:18px; }
.calc-label{
  display:block;
  font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-dim);
  margin-bottom:8px;
}
.calc-label small{ font-family:var(--mono); font-size:10px; opacity:.7; letter-spacing:.04em; text-transform:none; }
.calc-seg{
  display:inline-flex; gap:6px;
  padding:5px;
  background: var(--bg);
  border: 1.5px solid var(--line);
  border-radius:999px;
  width:100%;
}
.calc-seg-btn{
  flex:1;
  padding:11px 14px;
  font-family:var(--mono); font-size:12px;
  border-radius:999px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease);
  min-height:40px;
}
.calc-seg-btn.is-active{
  background: var(--ink); color: var(--bg);
}

.calc-counters{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px 18px;
  margin-bottom:22px;
  padding:18px;
  border-radius:14px;
  background: var(--bg);
  border: 1.5px solid var(--line);
}
.calc-counter{ display:flex; flex-direction:column; gap:8px; }
.calc-toggle{ grid-column: 1 / -1; }
.calc-stepper{
  display:inline-flex; align-items:center; gap:0;
  width:fit-content;
  border:1.5px solid var(--line);
  border-radius:12px;
  overflow:hidden;
}
.cs-btn{
  width:42px; height:42px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:16px;
  background:transparent;
  border:none;
  cursor:pointer;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.cs-btn:hover{ background:var(--ink); color:var(--bg); }
.cs-btn:disabled{ opacity:.25; cursor:not-allowed; }
.cs-val{
  min-width:42px;
  text-align:center;
  font-family:var(--display); font-weight:500; font-size:20px;
  padding:0 8px;
  border-left:1.5px solid var(--line);
  border-right:1.5px solid var(--line);
  background:var(--paper);
}

/* Switch */
.calc-switch{
  display:inline-flex; align-items:center; gap:12px;
  cursor:pointer;
  font-family:var(--mono); font-size:12px;
  color:var(--ink);
}
.calc-switch input{ position:absolute; opacity:0; pointer-events:none; }
.cs-track{
  position:relative;
  width:44px; height:24px;
  background:var(--bg-2);
  border:1.5px solid var(--line);
  border-radius:999px;
  transition: background .25s var(--ease);
  flex-shrink:0;
}
.cs-thumb{
  position:absolute; top:2px; left:2px;
  width:17px; height:17px;
  background:var(--ink);
  border-radius:50%;
  transition: transform .25s var(--ease), background .25s var(--ease);
}
.calc-switch input:checked + .cs-track{ background:var(--ink); }
.calc-switch input:checked + .cs-track .cs-thumb{ transform: translateX(20px); background:var(--bg); }
.cs-text{ letter-spacing:.06em; }

/* Recap */
.calc-recap{
  background: var(--bg);
  border:1.5px solid var(--line);
  border-radius:14px;
  padding:16px 18px;
  margin-bottom:18px;
}
.calc-line{
  display:flex; justify-content:space-between; gap:10px;
  padding:8px 0;
  border-bottom: 1px solid var(--line-soft);
  font-family:var(--mono); font-size:12px;
}
.calc-line:last-child{ border-bottom:none; }
.calc-line span:first-child{ opacity:.6; }
.calc-total{ padding-top:14px; margin-top:6px; border-top:1.5px solid var(--ink); }
.calc-total span{ font-family:'Cormorant Garamond', serif; font-style:italic; font-size:22px; }
.calc-total span:first-child{ opacity:1; }
.calc-deposit{
  background:var(--ink); color:var(--bg);
  margin:8px -10px 0;
  padding:10px 14px;
  border-radius:8px;
  border-bottom:none;
}
.calc-deposit span:first-child{ opacity:.7; }
.calc-deposit span:last-child{ font-family:'Cormorant Garamond', serif; font-style:italic; font-size:18px; font-weight:500; }
.calc-balance{ font-size:11px; opacity:.7; }

.fmt-cta-big{
  background:var(--ink); color:var(--bg);
  border-color:var(--ink);
  margin-top:0;
}
.fmt-cta-big:hover{ background: transparent; color: var(--ink); }
.calc-note{
  font-family:var(--mono); font-size:11px;
  color:var(--ink-dim);
  margin:12px 0 0;
  text-align:center;
}

/* Upsell bar */
.upsell-bar{
  margin-top:48px;
  padding:32px;
  background:var(--ink);
  color:var(--bg);
  border-radius:24px;
  display:grid; grid-template-columns:repeat(4,1fr); gap:32px;
}
.upsell-item{ display:flex; flex-direction:column; gap:6px; }
.upsell-tag{
  font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color: rgba(236,229,214,.65);
}
.upsell-item strong{ font-family:'Cormorant Garamond', serif; font-weight:500; font-style:italic; font-size:24px; line-height:1.1; }
.upsell-desc{ font-family:var(--mono); font-size:12px; color: rgba(236,229,214,.75); line-height:1.4; }
.upsell-link{
  margin-top:4px;
  font-family:var(--mono); font-size:12px;
  color:var(--bg);
  border-bottom:1.5px solid var(--bg);
  padding-bottom:1px;
  align-self:flex-start;
  transition: gap .2s var(--ease);
}
.upsell-priv strong{ color:#ffb347; }

@media (max-width:1024px){
  .tar-grid-v2{ grid-template-columns:1fr 1fr; }
  .fmt-calc{ grid-column: 1 / -1; }
  .upsell-bar{ grid-template-columns:1fr 1fr; gap:24px; }
}
@media (max-width:600px){
  .tar-grid-v2{ grid-template-columns:1fr; }
  .calc-counters{ grid-template-columns:1fr; }
  .upsell-bar{ grid-template-columns:1fr; padding:24px; gap:18px; }
}

/* ============================================================
   AVIS — centered, multiple varied testimonials
   ============================================================ */
.avis{
  padding:80px 28px;
  max-width:1500px;
  margin:0 auto;
}
.avis-head{
  text-align:center;
  margin-bottom:48px;
}
.avis-h{ margin: 14px auto 0; }
.avis-rating{
  margin-top:24px;
  display:inline-flex; align-items:center; gap:12px;
  padding:10px 18px;
  background:var(--paper);
  border:1.5px solid var(--line);
  border-radius:999px;
}
.avis-stars{ color:#d4a843; letter-spacing:.06em; font-size:16px; }
.avis-rating-text{ font-family:var(--mono); font-size:12px; letter-spacing:.04em; color: var(--ink-dim); }
.avis-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:18px;
}
.avis-card{
  background:var(--paper);
  border:1.5px solid var(--line);
  border-radius:22px;
  padding:32px 30px 28px;
  display:flex; flex-direction:column; gap:18px;
}
.avis-card-feat{
  background:var(--ink); color:var(--bg);
  border-color:var(--ink);
  grid-column: 1 / -1;
}
.avis-card-feat .avis-stars{ color:#ffd640; }
.avis-card-feat .avis-name{ color:var(--bg); }
.avis-card-feat .avis-meta{ color: rgba(236,229,214,.6); }
.avis-q{
  font-family:'Cormorant Garamond', serif;
  font-weight:400;
  font-size:clamp(20px, 2vw, 28px);
  line-height:1.35;
  letter-spacing:-.01em;
  margin:0;
  text-wrap:pretty;
}
.avis-q em{ font-style:italic; }
.avis-card-feat .avis-q em{ color:#ffd640; }
.avis-by{ display:flex; align-items:center; gap:14px; }
.avis-avatar{
  width:46px; height:46px; border-radius:50%;
  background:var(--ink); color:var(--bg);
  display:flex; align-items:center; justify-content:center;
  font-family:'Cormorant Garamond', serif; font-weight:500; font-style:italic;
  font-size:18px;
  letter-spacing:.02em;
  flex-shrink:0;
}
.avis-card-feat .avis-avatar{ background:#ffd640; color:var(--ink); }
.avis-name{
  font-family:'Cormorant Garamond', serif; font-weight:500; font-style:italic;
  font-size:20px;
  line-height:1.1;
}
.avis-meta{
  font-family:var(--mono); font-size:11px;
  color:var(--ink-dim);
  margin-top:2px;
  letter-spacing:.02em;
}
@media (max-width:768px){
  .avis{ padding:48px 16px; }
  .avis-grid{ grid-template-columns:1fr; }
  .avis-card-feat{ grid-column:auto; }
  .avis-card{ padding:24px 22px 22px; }
}

/* ============================================================
   RÉSERVATION — multi-step form
   ============================================================ */
.reserve{
  padding:80px 28px;
  max-width:1500px;
  margin:0 auto;
}
.reserve-head{
  text-align:center;
  margin-bottom:36px;
}
.reserve-head .sec-h{ margin-bottom:16px; }
.reserve-sub{
  font-family:var(--mono); font-size:13px;
  color: var(--ink-dim);
  letter-spacing:.04em;
  margin:0;
}
.reserve-shell{
  display:grid;
  grid-template-columns: 1.4fr 1fr;
  gap:36px;
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius:28px;
  padding:40px;
}
.rsv-steps{
  grid-column: 1 / -1;
  display:flex;
  gap:8px;
  list-style:none; padding:0; margin:0 0 32px;
  counter-reset: rsv;
}
.rsv-step{
  flex:1;
  display:flex; align-items:center; gap:14px;
  padding:14px 18px;
  background: var(--bg);
  border: 1.5px solid var(--line);
  border-radius:14px;
  font-family:var(--mono); font-size:12px; letter-spacing:.06em;
  color: var(--ink-dim);
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.rsv-step span{
  font-family:'Cormorant Garamond', serif; font-style:italic; font-weight:500;
  font-size:24px;
  line-height:1;
  color: inherit;
}
.rsv-step.is-active{
  background: var(--ink); color: var(--bg);
  border-color: var(--ink);
}
.rsv-step.is-done{
  border-color: var(--ink);
  color: var(--ink);
}

.rsv-form{ display:flex; flex-direction:column; gap:0; }
.rsv-pane{
  border:none; padding:0; margin:0;
  display:none;
}
.rsv-pane.is-active{ display:flex; flex-direction:column; gap:18px; }
.rsv-legend{
  font-family:'Cormorant Garamond', serif; font-style:italic; font-weight:500;
  font-size:28px;
  line-height:1;
  margin-bottom:8px;
}
.rsv-nav{
  display:flex; justify-content:space-between; gap:14px;
  margin-top:14px;
  align-items:center;
}
.rsv-nav .btn{ flex:0 1 auto; min-height:48px; }

/* Participants list */
.participants-meta{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:14px;
  padding:18px;
  background:var(--bg);
  border:1.5px solid var(--line);
  border-radius:14px;
  margin-bottom:14px;
}
.participants-list{
  display:flex; flex-direction:column; gap:14px;
}
.participant-card{
  border:1.5px solid var(--line);
  border-radius:14px;
  padding:18px 20px;
  background:var(--bg);
  display:grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap:12px;
  align-items:end;
  position:relative;
}
.participant-card .p-tag{
  position:absolute; top:-9px; left:14px;
  padding:3px 10px;
  background:var(--ink); color:var(--bg);
  font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  border-radius:999px;
}
.participant-card.is-kid .p-tag{ background:#d4a843; color:var(--ink); }
.participant-card.is-pet .p-tag{ background:#7a5a20; color:#ffd640; }

/* Recap grid in step 3 */
.recap-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:14px;
  margin-bottom:18px;
}
.recap-block{
  background:var(--bg);
  border:1.5px solid var(--line);
  border-radius:14px;
  padding:18px 20px;
}
.recap-block-tag{
  font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-dim);
  margin-bottom:10px;
}
.recap-lines{ list-style:none; padding:0; margin:0; }
.recap-lines li{
  display:flex; justify-content:space-between; gap:10px;
  padding:8px 0;
  border-bottom:1px solid var(--line-soft);
  font-family:var(--mono); font-size:12px;
}
.recap-lines li:last-child{ border-bottom:none; }
.recap-lines li span{ opacity:.65; }
.recap-lines li strong{ font-family:var(--display); font-weight:500; font-size:14px; }
.recap-totals{
  background:var(--bg);
  border:1.5px solid var(--line);
  border-radius:14px;
  padding:18px 20px;
  margin-bottom:18px;
}

/* Agree checkbox */
.rsv-agree{
  display:flex; align-items:flex-start; gap:12px;
  font-family:var(--mono); font-size:12px; line-height:1.5;
  color:var(--ink-dim);
  margin-bottom:14px;
  cursor:pointer;
}
.rsv-agree input{
  appearance:none; -webkit-appearance:none;
  width:18px; height:18px; flex-shrink:0; margin-top:1px;
  border:1.5px solid var(--ink); border-radius:4px;
  background: transparent;
  position:relative; cursor:pointer;
}
.rsv-agree input:checked{ background: var(--ink); }
.rsv-agree input:checked::after{
  content:""; position:absolute; left:4px; top:0px;
  width:5px; height:10px;
  border: solid var(--bg);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.rsv-agree a{ color:var(--ink); text-decoration:underline; text-underline-offset:3px; }

.btn-pay{
  background: linear-gradient(180deg, var(--ink) 0%, #2a2010 100%);
  color: var(--bg);
  border: none;
  display:inline-flex; align-items:center; gap:10px;
  padding:16px 24px;
  font-family:'Cormorant Garamond', serif; font-style:italic; font-weight:500;
  font-size:18px;
  border-radius:999px;
  cursor:pointer;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
  box-shadow: 0 12px 26px -10px rgba(0,0,0,.4);
  min-height:54px;
}
.btn-pay:hover{ transform: translateY(-2px); box-shadow: 0 16px 32px -10px rgba(0,0,0,.5); }
.btn-pay-shield{
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:50%;
  background: rgba(255,200,80,.15);
  color: #ffd640;
}
.rsv-secure{
  display:flex; align-items:center; justify-content:center; gap:8px;
  margin:14px 0 0;
  font-family:var(--mono); font-size:11px; letter-spacing:.04em;
  color: var(--ink-dim);
}
.rsv-secure svg{ color: var(--ink); }

@media (max-width:1100px){
  .reserve-shell{ grid-template-columns:1fr; padding:32px; }
}
@media (max-width:768px){
  .reserve{ padding:48px 16px; }
  .reserve-shell{ padding:24px; gap:24px; border-radius:20px; }
  .rsv-steps{ flex-wrap:wrap; gap:6px; margin-bottom:20px; }
  .rsv-step{ flex: 1 1 100%; padding:12px 14px; }
  .participants-meta{ grid-template-columns:1fr; }
  .participant-card{ grid-template-columns:1fr 1fr; }
  .recap-grid{ grid-template-columns:1fr; }
}
/* Anti-overflow iOS Safari (iPhone SE 375px → iPhone Pro Max 430px) :
   les <input>/<select>/<textarea> dans une grille ont min-width:auto par
   défaut, ce qui les empêche de rétrécir sous leur min-content (longs
   placeholders type "06 30 85 65 28") et pousse les conteneurs au-delà
   du viewport. body{overflow-x:clip} masque le débordement mais le
   contenu paraît tronqué à droite. Le min-width:0 ciblé règle la cause. */
.rsv-pane > *,
.form-row > *,
.participant-card > *,
.participants-meta > *,
.recap-grid > *,
.rsv-nav > *{
  min-width: 0;
}
.field input,
.field select,
.field textarea{
  max-width: 100%;
  min-width: 0;
}
@media (max-width:480px){
  .reserve{ padding:40px 12px; }
  .reserve-shell{ padding:18px; gap:18px; border-radius:18px; }
  .rsv-steps{ margin-bottom:16px; }
  .rsv-step{ padding:10px 12px; gap:10px; font-size:11px; }
  .rsv-step span{ font-size:18px; }
  .rsv-legend{ font-size:22px; }
  .form-row{ grid-template-columns:1fr; gap:14px; }
  .participants-meta{ padding:14px; }
  .participant-card{ grid-template-columns:1fr; padding:16px 14px; gap:10px; }
  .participant-card .p-tag{ left:10px; }
  .recap-grid{ gap:10px; }
  .recap-block{ padding:14px 16px; }
  .rsv-nav{ flex-wrap:wrap; gap:10px; }
  .rsv-nav .btn{ flex:1 1 auto; justify-content:center; padding:14px 18px; font-size:14px; }
  .calc-counters{ padding:14px; }
  .info{ grid-template-columns:1fr; gap:20px; }
}


/* Wordmark — match the logo's classical engraved capitals */
.brand-wordmark{
  font-family: 'Cinzel', 'Cormorant Garamond', serif;
  font-weight: 500;
  font-style: normal;
  font-size: 16px;
  line-height: 1;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
  max-width: 140px;
  text-align: left;
}
@media (max-width:1100px){
  .brand-wordmark{ font-size: 14px; letter-spacing:.12em; max-width:120px; }
}

/* Apply same vibe to other "Cormorant" titles so the brand voice is consistent.
   Hero stays in Cormorant (display), but the H1 wordmark variant matches the logo. */


/* === Logo wordmark: closer to logo proportions (lighter weight, looser tracking) === */
.brand-wordmark{
  font-family: 'Cinzel', 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: 18px;
  letter-spacing: .16em;
  max-width: 180px;
}
@media (max-width:1100px){
  .brand-wordmark{ font-size: 15px; letter-spacing:.14em; max-width:150px; }
}
@media (max-width:768px){
  .brand-wordmark{ display:none; }
}

/* === Form validation states === */
.field input.is-invalid,
.field select.is-invalid,
.field textarea.is-invalid{
  border-color: #c93a3a;
  background: #fff4f1;
}
.field .field-error{
  display:block;
  font-family: var(--mono);
  font-size: 11px;
  color: #c93a3a;
  margin-top: 4px;
  letter-spacing: .02em;
  min-height: 14px;
}
.field .field-error:empty{ display:none; }
/* Avertissements bloquants à fort impact (plancher 29/05, jours fermés) :
   ton bordeaux + Cormorant Garamond, cohérent avec les encarts FDS. */
.field .field-error.is-launch-warn{
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 14.5px;
  line-height: 1.45;
  color: #6B2737;
  letter-spacing: 0;
  margin-top: 6px;
  min-height: 0;
}
.field input.is-valid,
.field select.is-valid{
  border-color: #2a8a5a;
}
.btn[disabled],
.btn:disabled{
  opacity: .42;
  cursor: not-allowed;
  pointer-events: none;
  filter: grayscale(.2);
}


/* Simulator: center contents now that the CTA is removed */
.fmt-calc{ text-align:center; align-items:center; }
.fmt-calc .fmt-tag,
.fmt-calc .fmt-name,
.fmt-calc .fmt-desc{ text-align:center; }
.fmt-calc .calc-row,
.fmt-calc .calc-counters,
.fmt-calc .calc-recap{
  width:100%;
  max-width:520px;
  margin-left:auto;
  margin-right:auto;
}
.fmt-calc .calc-label{ text-align:left; }
.fmt-calc .calc-note{ text-align:center; }

/* ============================================================
   v3 OVERRIDES — applied for the production build.
   These rules sit at the end so they win the cascade without
   touching the legacy prototype CSS above.
   ============================================================ */

/* -- Brand: larger transparent logo + serif wordmark matching the
      circular logo emblem (Cinzel matches the logo's classical caps). */
.topbar .brand-logo{
  width: 64px;
  height: 64px;
  background: transparent;
}
.topbar .brand-logo img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  background: transparent;
  mix-blend-mode: multiply; /* drops any residual off-white halo on the cream bg */
}
.topbar .brand-wordmark{
  font-family: 'Cinzel', serif;
  font-weight: 600;
  font-size: 17px;
  letter-spacing: .04em;
  text-transform: none;
}
.topbar{ padding: 16px 28px; }

/* -- Center top nav + chip summary (per spec: "Center all nav/summary links") */
.topbar{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
}
.topbar .brand{ justify-self: start; }
.topbar .topnav{ justify-self: center; justify-content: center; }
.topbar .top-date{ justify-self: end; }

.hero-chips{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 14px;
}

/* -- Center the ∞ "souvenirs fabriqués" stat block.
      The intro-stats row stays a 4-up grid on desktop; the special stat
      gets bottom-centered on its own row on narrower viewports. */
.intro-stats .stat-infinity{
  text-align: center;
}
.intro-stats .stat-infinity .stat-num{
  display: block;
  margin: 0 auto;
}
.intro-stats .stat-infinity .stat-lab{
  display: block;
  margin: 0 auto;
}
@media (max-width: 900px){
  .intro-stats{ text-align: center; }
  .intro-stats .stat-infinity{ grid-column: 1 / -1; }
}

/* -- Theme card double-CTA row (Accéder aux photos + Réserver ce thème) */
.tcard-ctas{
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  align-items: center;
  margin-top: 18px;
}
.tcard-cta-book{
  position: relative;
  padding: 10px 22px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: .03em;
  transition: background .2s var(--ease), transform .2s var(--ease);
}
.tcard-cta-book:hover{
  background: transparent;
  color: var(--ink);
  transform: translateY(-1px);
}

/* -- Inline form errors (real-time validation). FDS bordeaux #6B2737. */
.field-error{
  display: block;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .02em;
  color: #6B2737;
  margin-top: 6px;
  min-height: 14px;
}
.field-warn{
  display: block;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .02em;
  color: #8a5a00;
  margin-top: 4px;
}
.field input.is-invalid,
.field select.is-invalid,
.field textarea.is-invalid{
  border-color: #6B2737 !important;
  box-shadow: 0 0 0 3px rgba(107,39,55,.12);
  background: #fff4f1;
}
.field input.is-valid,
.field select.is-valid,
.field textarea.is-valid{
  border-color: rgba(53,120,72,.5);
}

/* -- Devis universe chip selector */
.devis-univers{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}
.devis-chip{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  font-family: var(--mono);
  font-size: 12px;
  cursor: pointer;
  transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
  user-select: none;
}
.devis-chip input{ position: absolute; opacity: 0; pointer-events: none; }
.devis-chip:has(input:checked){
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
.devis-chip:hover{ border-color: var(--ink); }

/* -- Pay-button disabled state on the reservation form */
.btn-pay:disabled{
  opacity: .55;
  cursor: not-allowed;
}
.btn-pay:disabled:hover{ transform: none; }

/* -- Mobile: revert to 2-up flex so hamburger has a home.
      The 768px breakpoint matches the legacy mobile rules above
      (.nav-toggle becomes display:flex, .topnav becomes a fixed overlay). */
@media (max-width: 768px){
  .topbar{
    display: flex;
    grid-template-columns: none;
    justify-content: space-between;
    padding: 12px 18px;
  }
  .topbar .brand{ justify-self: auto; }
  .topbar .brand-logo{ width: 52px; height: 52px; }
  .topbar .brand-wordmark{ font-size: 14px; }
}

/* ============================================================
   FIX PASS — overrides for the 5 reported issues.
   Appended last so they win the cascade without touching the
   earlier prototype rules (which carry !important in places).
   ============================================================ */

/* (1) Remove the cream "oval" pill that sat over the hero studio
       box (the .scene-tag caption — paper bg + 999px radius).
       Scene navigation is still available via .scene-dots below. */
.hero-scene-v4 .scene-tag{ display: none !important; }

/* (2) Larger navbar logo (was 64px → 84px, +31%) */
.topbar .brand-logo{ width: 84px !important; height: 84px !important; }
@media (max-width: 768px){
  .topbar .brand-logo{ width: 64px !important; height: 64px !important; }
}

/* (4) Real texture images as card backgrounds + a thin theme-colored
       tint for readability. The earlier override at ~L2789 forced
       background-color:transparent + a 38% black ::before — we
       cancel that. The texture is dominant; a low-opacity colored
       gradient sits on top of it (in CSS background layer order the
       FIRST listed image is on top). The ::before darkening from the
       prototype is reduced to a near-zero pass since the theme tint
       handles contrast. */
.tcard{
  background-color: transparent;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #fff;
}
/* Drop the prototype's heavy black overlay — the theme tint now
   handles readability inside each .tcard-{theme} rule. */
.tcard::before{
  background: transparent !important;
}

/* Cro-Magnon — cave rock texture, warm brown tint */
.tcard-cm{
  background-image:
    linear-gradient(180deg, rgba(45,25,12,0.30) 0%, rgba(20,12,5,0.55) 100%),
    url('assets/tex-cm-card.png') !important;
  background-color: #3D2817 !important;
}
/* Années 70 — psychedelic floral, warm orange tint */
.tcard-s7{
  background-image:
    linear-gradient(180deg, rgba(180,62,10,0.18) 0%, rgba(120,40,5,0.42) 100%),
    url('assets/tex-s7-card.png') !important;
  background-color: #E6651A !important;
}
/* Années 80 — magenta/pink fluo gradient pattern, light pink tint */
.tcard-s8{
  background-image:
    linear-gradient(180deg, rgba(255,95,180,0.18) 0%, rgba(106,42,142,0.40) 100%),
    url('assets/tex-s8-card.png') !important;
  background-color: #FF5FB4 !important;
}
/* Gangster — dark wood/leather grunge, very subtle warm tint */
.tcard-gng{
  background-image:
    linear-gradient(180deg, rgba(20,12,5,0.30) 0%, rgba(10,6,2,0.65) 100%),
    url('assets/tex-gng-card.png') !important;
  background-color: #1E1812 !important;
  color: #E8CC80;
}
.tcard-gng .tcard-h{ color: #E8CC80; }
/* Red Room — velvet folds, deep red tint */
.tcard-rr{
  background-image:
    linear-gradient(180deg, rgba(80,10,10,0.20) 0%, rgba(40,4,4,0.55) 100%),
    url('assets/tex-rr-card.png') !important;
  background-color: #5E0E0E !important;
}
/* Versailles — baroque blue + gold pattern, very light tint to keep
   the gold leaf visible. Dark ink for legibility. */
.tcard-vs{
  background-image:
    linear-gradient(180deg, rgba(30,52,144,0.20) 0%, rgba(15,30,90,0.45) 100%),
    url('assets/tex-vs-card.png') !important;
  background-color: #1E3490 !important;
  color: #F0E4C2 !important;
}
.tcard-vs .tcard-h{
  color: #E8C76F !important; /* gold heading on the baroque texture */
}
.tcard-vs .tcard-desc,
.tcard-vs .kvs li,
.tcard-vs .tcard-bar,
.tcard-vs .tcard-idx,
.tcard-vs .tcard-tag,
.tcard-vs .tcard-meta,
.tcard-vs .decor-stamp,
.tcard-vs .tcard-cta{
  color: #F0E4C2 !important; /* cream ink */
}
.tcard-vs .tcard-bar{
  background: rgba(0,0,0,.20) !important;
  border-bottom-color: rgba(232,199,111,.35) !important;
}
.tcard-vs .kvs, .tcard-vs .kvs li,
.tcard-vs .tcard-decor,
.tcard-vs .decor-stamp{
  border-color: rgba(232,199,111,.30) !important;
}
.tcard-vs .tcard-cta{
  border-color: rgba(232,199,111,.55) !important;
}
.tcard-vs .tcard-cta:hover{
  background: #E8C76F !important;
  color: #1E3490 !important;
}

/* ============================================================
   FIX PASS 2 — universe pills + navbar wordmark typography
   ============================================================ */

/* (1) Hero universe chips — explicit theme colors per the brief.
       The earlier override at L2781-2786 added texture images that
       washed out the color; we kill those images and force solid
       theme colors with white text. */
.hero-chips .chip{
  background-image: none !important;
  color: #fff !important;
  border-color: transparent !important;
  font-weight: 500;
  letter-spacing: .02em;
}
.hero-chips .chip::before{ display: none !important; }
.hero-chips .chip:hover{
  filter: brightness(1.12);
  transform: translateY(-2px) scale(1.04);
}

.hero-chips .chip-cm  { background-color: #3D2B1F !important; }  /* Cro-Magnon — dark earthy brown */
.hero-chips .chip-s7  { background-color: #C85A00 !important; }  /* Années 70 — warm orange */
.hero-chips .chip-s8  { background-color: #B5006E !important; }  /* Années 80 — magenta */
.hero-chips .chip-gng { background-color: #5C4A00 !important; }  /* Gangster — dark gold/olive */
.hero-chips .chip-rr  { background-color: #6B2737 !important; }  /* Red Room — deep bordeaux */
.hero-chips .chip-vs  { background-color: #8B6914 !important; }  /* Versailles — royal gold */

/* (2) Navbar wordmark — match the hero title exactly:
       Cormorant Garamond, 500 weight, with italic on "de Souvenirs".
       (The hero rule lives at L3184: `.hero-title.hero-title-grand{
       font-family:'Cormorant Garamond', serif; font-weight:500; ... }`
       and its <em> child sets `font-style:italic`.) */
.topbar .brand-wordmark{
  font-family: 'Cormorant Garamond', serif !important;
  font-weight: 500 !important;
  font-style: normal !important;
  font-size: 22px;
  letter-spacing: -.005em;
  text-transform: none !important;
  line-height: 1;
}
.topbar .brand-wordmark em{
  font-style: italic;
  font-weight: 500;
}
@media (max-width: 768px){
  .topbar .brand-wordmark{ font-size: 17px; }
}

/* ============================================================
   PORTFOLIO VIDEO ITEMS — real <video> in a .pf-video-slot.
   Original .pf-video-slot rule (~L2933) forced a fixed width
   for the placeholder thumbnails; with a real video element
   inside we let it size by aspect ratio.
   ============================================================ */
.pf-video-slot:has(video){
  width: auto;
  background: #0a0a0a;       /* dark backdrop while metadata loads */
  display: block;
}
.pf-video-slot video{
  display: block;
  height: 100%;
  width: auto;
  object-fit: cover;
}

/* ============================================================
   SOFT-LAUNCH NOTICE — auto-hides on 2026-05-29 00:00 Europe/Paris.
   Toggled by inline JS that compares against the launch instant
   defined in each page (see soft-launch.js helper inlined per-page).
   Two variants:
     .soft-launch-banner  — thin info bar (index.html, devis.html)
     .soft-launch-notice  — full encart with bordeaux/gold trim (paiement.html)
   ============================================================ */
.soft-launch-banner{
  display:none;
  background: linear-gradient(180deg, #F8F1E4 0%, #F4E9D2 100%);
  border-bottom: 1.5px solid #C9A246;
  color: #6B2737;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 16px;
  line-height: 1.5;
  text-align: center;
  padding: 10px 22px;
  letter-spacing: .005em;
}
.soft-launch-banner.is-visible{ display:block; }
.soft-launch-banner strong{
  font-style: normal;
  font-weight: 600;
  color: #6B2737;
}
.soft-launch-banner a{
  color: #6B2737;
  text-decoration: underline;
  text-underline-offset: 2px;
}
@media (max-width: 600px){
  .soft-launch-banner{ font-size: 14.5px; padding: 9px 16px; }
}

.soft-launch-notice{
  display:none;
  background: #FBF5E6;
  border: 1.5px solid #C9A246;
  border-left: 4px solid #6B2737;
  border-radius: 16px;
  padding: 22px 26px;
  margin: 0 0 24px;
  font-family: 'Cormorant Garamond', serif;
  color: #3A1B22;
  position: relative;
}
.soft-launch-notice.is-visible{ display:block; }
.soft-launch-notice .sl-eyebrow{
  font-family: var(--mono);
  font-style: normal;
  font-size: 11.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #8B6914;
  margin: 0 0 8px;
  display: block;
}
.soft-launch-notice h3{
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-style: italic;
  font-size: 22px;
  line-height: 1.25;
  color: #6B2737;
  margin: 0 0 8px;
}
.soft-launch-notice p{
  font-family: 'Cormorant Garamond', serif;
  font-size: 16px;
  font-style: italic;
  line-height: 1.55;
  margin: 0;
  color: #3A1B22;
}
.soft-launch-notice a{
  color: #6B2737;
  font-style: normal;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Greyed-out pay button while the soft-launch is in effect. */
.pay-btn.is-locked,
.pay-btn.is-locked:hover{
  background: #B8B0A0 !important;
  color: #F6F0E0 !important;
  border-color: #B8B0A0 !important;
  cursor: not-allowed !important;
  transform: none !important;
  opacity: 1 !important;
}

/* ============================================================
   BYPASS_TEST_MODE_START - À RETIRER APRÈS LE 29/05/2026
   All styles below are dedicated to the test-mode bypass UI:
     .soft-launch-notice.is-bypass-warn — red bypass banner on paiement.html
     .pay-card.is-test-live             — thick red border on the pay card
     .test-forfait-* / .test-forfait-go — 1€ test forfait card on devis.html
   ============================================================ */
.soft-launch-notice.is-bypass-warn{
  background: #D03737;
  border-color: #D03737;
  border-left-color: #7A0F0F;
  color: #FFFFFF;
}
.soft-launch-notice.is-bypass-warn .sl-eyebrow,
.soft-launch-notice.is-bypass-warn h3,
.soft-launch-notice.is-bypass-warn p{
  color: #FFFFFF;
}
.soft-launch-notice.is-bypass-warn a{
  color: #FFFFFF;
  text-decoration: underline;
}

.pay-card.is-test-live{
  border: 4px solid #D03737;
  box-shadow: 0 24px 60px -28px rgba(208,55,55,.45),
              0 0 0 1px rgba(208,55,55,.15) inset;
}

.test-forfait-wrap{
  margin: 0 auto 28px;
  max-width: 920px;
  padding: 0 28px;
}
.test-forfait-card{
  background: #FFF6F6;
  border: 3px dashed #D03737;
  border-radius: 18px;
  padding: 24px 26px;
  color: #5A0F0F;
  font-family: 'Cormorant Garamond', serif;
}
.test-forfait-badge{
  display: inline-block;
  background: #D03737;
  color: #FFFFFF;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 10px;
}
.test-forfait-title{
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 24px;
  color: #7A0F0F;
  margin: 0 0 8px;
}
.test-forfait-desc{
  font-family: 'Cormorant Garamond', serif;
  font-size: 16px;
  line-height: 1.55;
  margin: 0 0 8px;
  color: #3A0A0A;
}
.test-forfait-desc strong{ font-weight: 600; color: #7A0F0F; }
.test-forfait-meta{
  font-family: var(--mono);
  font-size: 11.5px;
  color: #7A0F0F;
  margin: 0 0 16px;
  opacity: .8;
}
.test-forfait-meta code{
  background: #FBE6E6;
  padding: 2px 6px;
  border-radius: 4px;
}
.test-forfait-go{
  background: #D03737;
  color: #FFFFFF;
  border: 1.5px solid #D03737;
  border-radius: 999px;
  font-family: var(--display);
  font-weight: 500;
  font-size: 16px;
  padding: 14px 22px;
  cursor: pointer;
  transition: background .2s var(--ease), transform .2s var(--ease);
}
.test-forfait-go:hover{ background: #B82828; transform: translateY(-1px); }
/* BYPASS_TEST_MODE_END */