/* ════════════════════════════════════════════════════════════════
   GEEN — "The Foil Atelier"  ·  Cinematic dark+gold front-end
   ════════════════════════════════════════════════════════════════ */
:root {
  /* Surfaces */
  --void:    #070605;
  --black:   #0B0A08;
  --panel:   #110E0A;
  --panel-2: #17120C;
  --line:    rgba(231,198,140,.13);
  --line-2:  rgba(231,198,140,.07);

  /* Gold */
  --gold:        #C6964E;
  --gold-light:  #E7C68C;
  --gold-bright: #F2DCAC;
  --bronze:      #8A5E2E;
  --foil: linear-gradient(110deg,#F6E7C2 0%,#E7C68C 22%,#C6964E 45%,#7A5526 60%,#E2C58C 82%,#F6E7C2 100%);

  /* Ink */
  --cream:     #F0E8D9;
  --cream-dim: #B7AC95;
  --faint:     #7C715C;

  /* Type */
  --display: "Fraunces", Georgia, serif;
  --sans: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, sans-serif;

  --container: 1440px;
  --gut: clamp(20px, 5vw, 64px);
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-io: cubic-bezier(.76,0,.24,1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; padding: 0; background: var(--void); }
body {
  font-family: var(--sans);
  color: var(--cream);
  font-size: 17px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
::selection { background: var(--gold); color: #1a1206; }

h1,h2,h3,h4 { margin: 0; font-family: var(--display); font-weight: 400; line-height: 1.05; letter-spacing: -.02em; }
.line-in { padding-bottom: .04em; }
p { margin: 0; }

.wrap { max-width: var(--container); margin: 0 auto; padding-left: var(--gut); padding-right: var(--gut); }

/* ── Atmosphere: grain + vignette + foil-light ── */
.fx-grain, .fx-vignette, .fx-foillight { position: fixed; inset: 0; pointer-events: none; z-index: 9000; }
.fx-grain {
  z-index: 9002; opacity: .045; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 7s steps(6) infinite;
}
@keyframes grain { 0%{transform:translate(0,0)} 20%{transform:translate(-4%,3%)} 40%{transform:translate(3%,-4%)} 60%{transform:translate(-3%,2%)} 80%{transform:translate(4%,3%)} 100%{transform:translate(0,0)} }
.fx-vignette { z-index: 9001; background: radial-gradient(120% 100% at 50% 30%, transparent 55%, rgba(0,0,0,.55) 100%); }
.fx-foillight {
  z-index: 0; mix-blend-mode: screen; opacity: .5;
  background: radial-gradient(38vw 60vh at var(--fx-x, 78%) var(--fx-y, 12%), rgba(231,198,140,.22), rgba(198,150,78,.07) 40%, transparent 70%);
  transition: opacity .6s var(--ease);
}
@media (prefers-reduced-motion: reduce){ .fx-grain{animation:none} }

/* ── Custom cursor ── */
.cursor-dot, .cursor-ring { position: fixed; top: 0; left: 0; border-radius: 50%; pointer-events: none; z-index: 9999; mix-blend-mode: difference; }
.cursor-dot { width: 6px; height: 6px; background: var(--gold-bright); transform: translate(-50%,-50%); }
.cursor-ring { width: 38px; height: 38px; border: 1px solid rgba(231,198,140,.6); transform: translate(-50%,-50%); transition: width .3s var(--ease), height .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease); }
.cursor-ring.is-hover { width: 64px; height: 64px; border-color: var(--gold); background: rgba(231,198,140,.08); }
.cursor-ring.is-label { width: 86px; height: 86px; background: var(--gold); border-color: transparent; }
.cursor-ring .cursor-label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 600 9px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: #1a1206; opacity: 0; transition: opacity .2s; }
.cursor-ring.is-label .cursor-label { opacity: 1; }
@media (hover: none) { .cursor-dot, .cursor-ring { display: none; } }

/* ── Shared type helpers ── */
.eyebrow { display: inline-flex; align-items: center; gap: 12px; font: 600 11px/1 var(--sans); letter-spacing: .28em; text-transform: uppercase; color: var(--gold-light); }
.eyebrow::before { content: ""; width: 34px; height: 1px; background: linear-gradient(90deg, var(--gold), transparent); }
.eyebrow.center::after { content: ""; width: 34px; height: 1px; background: linear-gradient(270deg, var(--gold), transparent); }
.foil-text { background: var(--foil); background-size: 220% auto; -webkit-background-clip: text; background-clip: text; color: transparent; }
.serif-i { font-style: italic; }

/* line-mask reveal */
.reveal-lines .line-mask { overflow: hidden; display: block; }
.reveal-lines .line-in { display: block; will-change: transform; }

/* ── Buttons ── */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px; height: 54px; padding: 0 30px; font: 600 13px/1 var(--sans); letter-spacing: .04em; border-radius: 100px; overflow: hidden; box-sizing: border-box; }
.btn-foil { color: #1a1206; background: var(--foil); background-size: 200% auto; background-position: 0 50%; transition: background-position .6s var(--ease), transform .3s var(--ease); }
.btn-foil:hover { background-position: 100% 50%; }
.btn-foil .arr { transition: transform .35s var(--ease); }
.btn-foil:hover .arr { transform: translateX(5px); }
.btn-ghost { color: var(--cream); border: 1px solid var(--line); transition: border-color .3s, color .3s, background .3s; }
.btn-ghost:hover { border-color: var(--gold); color: var(--gold-light); background: rgba(231,198,140,.05); }
.magnetic { will-change: transform; }

/* ── Section scaffolding ── */
.section { position: relative; padding: clamp(90px,14vh,180px) 0; }
.sec-head { max-width: 60ch; }
.sec-num { font: 600 12px/1 var(--sans); letter-spacing: .2em; color: var(--faint); }

/* ════════ HEADER ════════ */
.c-header { position: fixed; top: 0; left: 0; width: 100%; z-index: 200; padding: 22px 0; transition: padding .4s var(--ease), background .4s var(--ease), backdrop-filter .4s; }
.c-header.shrink { padding: 12px 0; background: rgba(7,6,5,.72); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line-2); }
.c-header-in { display: flex; align-items: center; justify-content: space-between; }
.c-logo img { height: 40px; width: auto; transition: height .4s var(--ease); }
.c-header.shrink .c-logo img { height: 32px; }
.c-header-right { display: flex; align-items: center; gap: 26px; }
.c-lang { display: inline-flex; gap: 8px; font: 600 12px/1 var(--sans); letter-spacing: .1em; color: var(--cream-dim); }
.c-lang a.on { color: var(--gold-light); }
.c-lang span { opacity: .3; }
.c-nav-toggle { display: inline-flex; align-items: center; gap: 12px; font: 600 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--cream); }
.c-burger { width: 30px; height: 12px; position: relative; }
.c-burger i { position: absolute; left: 0; height: 1.5px; width: 100%; background: var(--cream); transition: transform .4s var(--ease), width .4s var(--ease); }
.c-burger i:nth-child(1){ top: 0; } .c-burger i:nth-child(2){ bottom: 0; width: 70%; }
.c-nav-toggle:hover .c-burger i:nth-child(2){ width: 100%; }

/* Overlay menu */
.c-overlay { position: fixed; inset: 0; z-index: 300; background: var(--black); clip-path: inset(0 0 100% 0); transition: clip-path .8s var(--ease-io); display: grid; grid-template-rows: auto 1fr auto; padding: 26px 0; }
.c-overlay.open { clip-path: inset(0 0 0 0); }
.c-overlay-top { display: flex; align-items: center; justify-content: space-between; }
.c-overlay-close { font: 600 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 10px; }
.c-menu { display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.c-menu a { font-family: var(--display); font-size: clamp(38px, 7vw, 96px); line-height: 1.04; letter-spacing: -.02em; color: var(--cream); width: max-content; position: relative; padding: 4px 0; transition: color .4s var(--ease), padding-left .4s var(--ease); display: flex; align-items: baseline; gap: 20px; }
.c-menu a .idx { font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--gold); letter-spacing: .1em; transform: translateY(-.4em); }
.c-menu a:hover { color: var(--gold-light); padding-left: 22px; }
.c-overlay-foot { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 20px; color: var(--cream-dim); font-size: 13px; }
.c-overlay-foot a:hover { color: var(--gold-light); }

/* ════════ HERO ════════ */
.hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; padding-bottom: clamp(48px, 9vh, 110px); overflow: hidden; }
.hero-media { position: absolute; inset: -10% 0 0 0; z-index: -2; will-change: transform; }
.hero-media img { width: 100%; height: 120%; object-fit: cover; filter: brightness(.72) saturate(1) contrast(1.06); }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(7,6,5,.35) 0%, rgba(7,6,5,.08) 38%, rgba(7,6,5,.72) 78%, rgba(7,6,5,.95) 100%), radial-gradient(70% 50% at 82% 22%, rgba(231,198,140,.14), transparent 60%); }
.hero-in { width: 100%; }
.hero-eyebrow { margin-bottom: 30px; }
.hero h1 { font-size: clamp(52px, 9vw, 168px); letter-spacing: -.035em; }
.hero h1 .row { display: block; }
.hero-lede { margin-top: 34px; max-width: 46ch; font-size: clamp(16px,1.4vw,20px); color: var(--cream-dim); line-height: 1.65; }
.hero-cta { margin-top: 50px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.scroll-cue { position: absolute; bottom: 34px; right: var(--gut); display: flex; align-items: center; gap: 12px; font: 600 10px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--cream-dim); }
.scroll-cue .bar { width: 1px; height: 46px; background: var(--line); position: relative; overflow: hidden; }
.scroll-cue .bar::after { content: ""; position: absolute; top: -50%; left: 0; width: 100%; height: 50%; background: var(--gold-light); animation: cue 2.2s var(--ease-io) infinite; }
@keyframes cue { 0%{transform:translateY(-100%)} 60%,100%{transform:translateY(300%)} }

/* ════════ MARQUEE ════════ */
.marquee { padding: 26px 0; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); overflow: hidden; background: var(--black); }
.marquee-track { display: flex; gap: 64px; width: max-content; will-change: transform; }
.marquee-item { display: inline-flex; align-items: center; gap: 64px; font-family: var(--display); font-size: clamp(22px,2.4vw,34px); color: var(--cream-dim); letter-spacing: -.01em; }
.marquee-item::after { content: "✦"; font-size: 14px; color: var(--gold); }
.marquee-item.on { color: var(--gold-light); }

/* ════════ MANIFESTO ════════ */
.manifesto { text-align: left; }
.manifesto .big { font-family: var(--display); font-size: clamp(30px,4.4vw,72px); line-height: 1.12; letter-spacing: -.02em; max-width: 18ch; }
.manifesto .big .dim { color: var(--faint); }
.manifesto .meta { margin-top: 56px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 40px 64px; max-width: 720px; }
.manifesto .meta p { color: var(--cream-dim); font-size: 16px; }
.manifesto .meta h4 { font-family: var(--sans); font-weight: 600; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-light); margin-bottom: 12px; }

/* ════════ STATS ════════ */
.stats { border-top: 1px solid var(--line-2); }
.stats-grid { display: grid; grid-template-columns: repeat(4,1fr); }
.stat { padding: 18px 28px 18px 0; border-left: 1px solid var(--line-2); padding-left: 28px; }
.stat:first-child { border-left: none; padding-left: 0; }
.stat-num { font-family: var(--display); font-size: clamp(46px,5.5vw,86px); line-height: .9; letter-spacing: -.04em; }
.stat-label { margin-top: 14px; font: 600 11px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--cream-dim); }
@media (max-width: 800px){ .stats-grid{ grid-template-columns: repeat(2,1fr); gap: 30px 0; } }

/* ════════ CAPABILITIES ════════ */
.caps-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; flex-wrap: wrap; margin-bottom: 70px; }
.caps-head h2 { font-size: clamp(34px,4.6vw,68px); max-width: 14ch; }
.caps-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(40px,6vw,100px); align-items: start; }
.cap-list { display: flex; flex-direction: column; }
.cap { display: grid; grid-template-columns: 56px 1fr; gap: 26px; padding: 34px 0; border-top: 1px solid var(--line); }
.cap:last-child { border-bottom: 1px solid var(--line); }
.cap .n { font-family: var(--display); font-size: 18px; color: var(--gold); }
.cap h3 { font-family: var(--sans); font-weight: 600; font-size: 22px; letter-spacing: -.01em; margin-bottom: 10px; }
.cap p { color: var(--cream-dim); font-size: 15.5px; max-width: 42ch; }
.caps-visual { position: relative; aspect-ratio: 4/5; border-radius: 4px; overflow: hidden; border: 1px solid var(--line); }
.caps-visual img { width: 100%; height: 116%; object-fit: cover; will-change: transform; }
.caps-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(7,6,5,.5)); }
.caps-visual .tag { position: absolute; left: 22px; bottom: 22px; z-index: 2; font: 600 11px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--gold-light); }
@media (max-width: 920px){ .caps-grid{ grid-template-columns: 1fr; } .caps-visual{ aspect-ratio: 16/10; } }

/* ════════ FORMATS — horizontal pinned ════════ */
.formats { position: relative; background: var(--black); border-top: 1px solid var(--line-2); }
.formats-pin { height: 100svh; display: flex; align-items: center; overflow: hidden; }
.formats-track { display: flex; align-items: stretch; gap: 28px; padding: 0 var(--gut); will-change: transform; }
.formats-intro { flex: 0 0 auto; width: min(38vw, 480px); align-self: center; padding-right: 30px; }
.formats-intro h2 { font-size: clamp(36px,4.6vw,72px); margin: 22px 0 24px; }
.formats-intro p { color: var(--cream-dim); max-width: 34ch; }
.format-panel { flex: 0 0 auto; width: min(78vw, 440px); height: min(70vh, 580px); position: relative; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: 38px; transition: border-color .4s; }
.format-panel:hover { border-color: var(--gold); }
.format-panel .bg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; opacity: .42; transition: transform .8s var(--ease), opacity .5s; }
.format-panel:hover .bg { transform: scale(1.06); opacity: .55; }
.format-panel::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(7,6,5,.25), rgba(7,6,5,.9)); }
.format-panel > * { position: relative; z-index: 2; }
.format-panel .fidx { font-family: var(--display); font-size: 15px; color: var(--gold); margin-bottom: auto; }
.format-panel h3 { font-size: clamp(30px,3vw,46px); margin-bottom: 12px; }
.format-panel p { color: var(--cream-dim); font-size: 14.5px; max-width: 32ch; margin-bottom: 22px; }
.format-panel .go { display: inline-flex; align-items: center; gap: 10px; font: 600 12px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-light); }
@media (max-width: 820px){ .formats-pin{ height: auto; } .formats-track{ flex-direction: column; padding: 90px var(--gut); } .formats-intro{ width: 100%; } .format-panel{ width: 100%; height: 62vh; } }

/* ════════ FEATURED UNITS ════════ */
.units-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 2px; background: var(--line-2); border: 1px solid var(--line-2); }
.unit { position: relative; background: var(--black); padding: 40px; min-height: 320px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; transition: background .4s; }
.unit:hover { background: var(--panel); }
.unit-media { position: absolute; inset: 0; z-index: 0; opacity: 0; transform: scale(1.08); transition: opacity .6s var(--ease), transform .8s var(--ease); }
.unit-media img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.4); }
.unit:hover .unit-media { opacity: 1; transform: scale(1); }
.unit > * { position: relative; z-index: 1; }
.unit-top { display: flex; justify-content: space-between; align-items: flex-start; }
.unit-cat { font: 600 11px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-light); }
.unit-code { font: 600 12px/1 var(--sans); letter-spacing: .08em; color: var(--faint); }
.unit h3 { font-size: clamp(26px,2.4vw,38px); letter-spacing: -.02em; }
.unit .unit-go { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; transition: background .4s, border-color .4s, color .4s, transform .4s; color: var(--cream); }
.unit:hover .unit-go { background: var(--gold); border-color: var(--gold); color: #1a1206; transform: rotate(-45deg); }
@media (max-width: 760px){ .units-grid{ grid-template-columns: 1fr; } }

/* ════════ APPLICATIONS (full-bleed pinned) ════════ */
.app-cine { position: relative; min-height: 100svh; display: flex; align-items: center; overflow: hidden; }
.app-cine .bg { position: absolute; inset: -10% 0 0 0; z-index: -2; will-change: transform; }
.app-cine .bg img { width: 100%; height: 120%; object-fit: cover; filter: brightness(.45); }
.app-cine::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(7,6,5,.9) 20%, transparent), radial-gradient(60% 60% at 80% 50%, rgba(198,150,78,.16), transparent 60%); }
.app-cine h2 { font-size: clamp(40px,6vw,108px); letter-spacing: -.03em; max-width: 16ch; }
.app-cine p { margin-top: 28px; max-width: 42ch; color: var(--cream-dim); font-size: 18px; }
.app-cine .btn { margin-top: 40px; }

/* ════════ FINAL CTA ════════ */
.cta-final { position: relative; padding: clamp(110px,20vh,260px) 0; text-align: center; overflow: hidden; border-top: 1px solid var(--line-2); }
.cta-final::before { content: ""; position: absolute; inset: 0; z-index: 0; background: radial-gradient(60% 80% at 50% 30%, rgba(198,150,78,.14), transparent 65%); }
.cta-final-in { position: relative; z-index: 1; }
.cta-final h2 { font-size: clamp(44px,7vw,128px); letter-spacing: -.03em; line-height: .98; }
.cta-final p { margin: 28px auto 0; max-width: 44ch; color: var(--cream-dim); font-size: 18px; }
.cta-final .row { margin-top: 48px; display: inline-flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: center; }

/* ════════ FOOTER ════════ */
.c-footer { background: var(--black); border-top: 1px solid var(--line-2); padding: 80px 0 36px; }
.c-footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 50px; padding-bottom: 60px; border-bottom: 1px solid var(--line-2); }
.c-footer h4 { font-family: var(--sans); font-weight: 600; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-light); margin-bottom: 22px; }
.c-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.c-footer a, .c-footer p { color: var(--cream-dim); font-size: 14px; }
.c-footer a:hover { color: var(--gold-light); }
.c-footer-logo img { height: 42px; margin-bottom: 22px; }
.c-footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 28px; font-size: 12px; color: var(--faint); flex-wrap: wrap; gap: 14px; }
.c-foot-credit img { height: 20px; filter: brightness(0) invert(.8); opacity: .5; transition: opacity .3s; }
.c-foot-credit:hover img { opacity: 1; }
@media (max-width: 800px){ .c-footer-grid{ grid-template-columns: 1fr 1fr; gap: 40px; } }

/* ── headline <em> → foil italic (CMS content) ── */
.hero h1 em, .caps-head h2 em, .app-cine h2 em, .cta-final h2 em, .manifesto .big em, [data-lines] em, .text-sec h2 em {
  font-style: italic; background: var(--foil); background-size: 220% auto; -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero--page { min-height: 78svh; }
.hero--page h1 { font-size: clamp(44px,6.5vw,108px); }

/* ── two-col stats (about intro) ── */
.tcs { display: grid; grid-template-columns: 1.25fr .75fr; gap: clamp(40px,6vw,90px); align-items: start; }
.tcs-lead { font-family: var(--display); font-size: clamp(22px,2.4vw,34px); line-height: 1.4; color: var(--cream); max-width: 26ch; }
.tcs-stats { display: flex; flex-direction: column; gap: 26px; padding-left: 32px; border-left: 1px solid var(--line); }
.tcs-num { font-family: var(--display); font-size: 42px; line-height: 1; color: var(--gold-light); }
.tcs-lab { margin-top: 8px; font: 600 11px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--cream-dim); }
@media (max-width:820px){ .tcs{ grid-template-columns: 1fr; gap: 40px; } .tcs-stats{ padding-left: 0; border-left: none; } }

/* ── mission / vision ── */
.mv2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 44px; }
.mv2-block { padding: clamp(32px,4vw,52px); border: 1px solid var(--line); border-radius: 5px; background: var(--panel); position: relative; overflow: hidden; }
.mv2-block::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: var(--foil); }
.mv2-block h3 { font-size: clamp(26px,2.4vw,40px); color: var(--gold-light); margin-bottom: 16px; }
.mv2-block p { color: var(--cream-dim); font-size: 16.5px; line-height: 1.7; }
@media (max-width:760px){ .mv2{ grid-template-columns: 1fr; } }

/* ── generic text section ── */
.text-sec h2 { font-size: clamp(30px,3.4vw,52px); }
.text-body { color: var(--cream-dim); font-size: 17px; line-height: 1.7; max-width: 66ch; }
.text-body p { margin-bottom: 18px; }

/* ── back-compat var aliases (CMS inline styles + inner pages) ── */
:root {
  --ink-900: var(--cream); --ink-800: var(--cream); --ink-700: var(--cream-dim); --ink-500: var(--cream-dim);
  --ink-400: var(--faint); --ink-300: #463d30; --ink-200: var(--line); --ink-100: var(--line-2); --ink-50: var(--panel-2);
  --white: var(--panel); --srs-blue: var(--gold); --srs-blue-light: var(--gold-light); --srs-blue-dark: var(--bronze);
  --srs-blue-tint: rgba(198,150,78,.12); --r-sm: 3px; --r-md: 6px; --r-lg: 14px;
  --shadow-md: 0 20px 50px rgba(0,0,0,.5); --container: 1440px;
}

/* ════════════════════════════════════════════════════════════════
   INNER PAGES (catalog · product · contact) — cinematic components
   (keeps existing PHP markup/classes, restyled dark+gold)
   ════════════════════════════════════════════════════════════════ */
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gut); }
.number-mono { font: 600 11px/1.4 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--faint); }
.tag { display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; font: 600 11px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; background: rgba(231,198,140,.08); color: var(--gold-light); border: 1px solid var(--line); border-radius: 100px; }

/* buttons used by inner pages */
.btn-primary { color: #1a1206; background: var(--foil); background-size: 200% auto; background-position: 0 50%; transition: background-position .6s var(--ease), transform .3s; }
.btn-primary:hover { background-position: 100% 50%; transform: translateY(-1px); }
.btn-outline { color: var(--cream); border: 1px solid var(--line); transition: border-color .3s, color .3s, background .3s; }
.btn-outline:hover { border-color: var(--gold); color: var(--gold-light); background: rgba(231,198,140,.05); }
.btn-sm { height: 42px; padding: 0 16px; font-size: 12px; min-width: 42px; }
.btn-arrow { display: inline-flex; align-items: center; gap: 10px; font: 600 13px/1 var(--sans); color: var(--cream); border-bottom: 1px solid var(--line); padding: 14px 0; transition: color .3s, border-color .3s; }
.btn-arrow:hover { color: var(--gold-light); border-color: var(--gold); }

/* forms */
.input, .select, .textarea { width: 100%; height: 54px; padding: 0 18px; background: var(--panel); border: 1px solid var(--line); border-radius: 4px; color: var(--cream); outline: none; font-family: var(--sans); font-size: 15px; transition: border-color .25s, background .25s; }
textarea, input, select, button { font-family: var(--sans); }
.textarea { height: auto; min-height: 150px; padding: 16px 18px; resize: vertical; line-height: 1.6; }
.input::placeholder, .textarea::placeholder { color: var(--faint); }
.input:focus, .select:focus, .textarea:focus { border-color: var(--gold); background: var(--panel-2); }
.label { display: block; font: 600 11px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--cream-dim); margin-bottom: 10px; }
.select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23C6964E' stroke-width='1.5' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 18px center; padding-right: 42px; }

/* page-header (contact) */
.page-header { position: relative; padding: 180px 0 70px; border-bottom: 1px solid var(--line-2); overflow: hidden; background: linear-gradient(180deg, #110d08, var(--void)); }
.page-header::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 80% at 80% 0%, rgba(198,150,78,.14), transparent 60%); pointer-events: none; }
.page-header .container { position: relative; z-index: 1; }
.page-header .eyebrow { color: var(--gold-light); }
.page-header h1 { font-size: clamp(40px,6vw,96px); margin-top: 22px; }
.page-header h1 em { font-style: italic; background: var(--foil); -webkit-background-clip: text; background-clip: text; color: transparent; background-size: 220% auto; }
.page-header p { color: var(--cream-dim); font-size: 19px; max-width: 720px; margin-top: 26px; }
.page-header-sm { padding: 170px 0 56px; }

/* product grid + cards (catalog/product/featured) */
.product-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 22px; }
@media (max-width:1100px){ .product-grid{ grid-template-columns: repeat(3,1fr); } }
@media (max-width:760px){ .product-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:520px){ .product-grid{ grid-template-columns: 1fr; } }
.product-card { display: block; background: var(--panel); border: 1px solid var(--line); border-radius: 5px; overflow: hidden; transition: border-color .35s, transform .35s, box-shadow .35s; }
.product-card:hover { border-color: var(--gold); transform: translateY(-4px); box-shadow: 0 24px 50px rgba(0,0,0,.5); }
.product-image { aspect-ratio: 3/2; background: var(--panel-2); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.product-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.product-card:hover .product-image img { transform: scale(1.05); }
.product-body { padding: 20px 18px 22px; }
.product-body .brand-row { font: 600 10px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.product-body h3, .product-body h4 { font-family: var(--sans); font-weight: 600; font-size: 16px; line-height: 1.3; margin: 8px 0 0; color: var(--cream); }
.meta-row { display: flex; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-2); font-size: 12px; color: var(--cream-dim); }

/* catalog layout */
.catalog-layout { display: grid; grid-template-columns: 270px 1fr; gap: 50px; padding: 56px 0 110px; }
.filter-panel { position: sticky; top: 110px; align-self: start; }
.filter-group { padding: 22px 0; border-top: 1px solid var(--line); }
.filter-group:first-child { border-top: none; padding-top: 0; }
.filter-group h4 { font: 600 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-light); margin-bottom: 16px; }
.filter-opt { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 14px; color: var(--cream-dim); cursor: pointer; transition: color .2s; }
.filter-opt:hover { color: var(--cream); }
.filter-opt input { accent-color: var(--gold); width: 15px; height: 15px; }
.filter-cnt { margin-left: auto; font-size: 11px; color: var(--faint); }
.filter-reset-bar { margin-top: 14px; }
.catalog-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 26px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.search-input { position: relative; flex: 1; max-width: 420px; }
.search-input input { width: 100%; height: 48px; padding: 0 16px 0 44px; background: var(--panel); border: 1px solid var(--line); border-radius: 4px; color: var(--cream); font-size: 14px; }
.search-input input:focus { outline: none; border-color: var(--gold); }
.search-input svg { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--faint); }
.result-count { font-size: 12px; color: var(--cream-dim); letter-spacing: .04em; }
.pagination .btn { padding: 11px 15px; }
@media (max-width:900px){ .catalog-layout{ grid-template-columns: 1fr; } .filter-panel{ position: static; } }

/* product detail */
.product-detail { display: grid; grid-template-columns: 1.15fr .85fr; gap: 60px; padding-top: 40px; }
.product-gallery { background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; display: flex; align-items: center; justify-content: center; min-height: 420px; }
.product-gallery img { width: 100%; height: 100%; object-fit: cover; }
.product-gallery-fallback { color: var(--faint); padding: 60px; }
.product-meta .code-row { font: 600 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.product-meta h1 { font-size: clamp(34px,3.4vw,52px); margin: 16px 0 14px; }
.spec-table { width: 100%; border-collapse: collapse; margin-top: 22px; }
.spec-table td { padding: 16px 0; border-top: 1px solid var(--line); font-size: 14.5px; }
.spec-table td:first-child { color: var(--cream-dim); width: 44%; }
.spec-table td:last-child { color: var(--cream); font-weight: 600; }
.product-cta-row { display: flex; align-items: center; gap: 12px; margin-top: 34px; flex-wrap: wrap; }
.info-table-wrap { border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: var(--panel); }
.info-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.info-table thead { background: var(--panel-2); }
.info-table th { text-align: left; padding: 14px 20px; font: 600 11px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--gold-light); }
.info-table td { padding: 16px 20px; border-top: 1px solid var(--line); color: var(--cream); }
.info-table tbody tr:hover { background: rgba(231,198,140,.04); }
.featured-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; flex-wrap: wrap; margin-bottom: 50px; }
@media (max-width:900px){ .product-detail{ grid-template-columns: 1fr; gap: 34px; } }

/* contact */
.contact-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 70px; }
.contact-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-bottom: 40px; }
.contact-card { padding: 26px; border: 1px solid var(--line); border-radius: 5px; background: var(--panel); transition: border-color .3s; }
.contact-card:hover { border-color: var(--gold); }
.contact-card .lbl { font: 600 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.contact-card .v1 { font-size: 18px; font-weight: 600; margin-top: 12px; color: var(--cream); }
.contact-card .v2 { font-size: 13px; color: var(--cream-dim); margin-top: 5px; }
.contact-form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.contact-form .full { grid-column: span 2; }
.contact-map { margin-top: 30px; aspect-ratio: 5/3; overflow: hidden; border: 1px solid var(--line); border-radius: 6px; filter: grayscale(.4) contrast(1.05) brightness(.9); }
.contact-map iframe, .contact-map > * { width: 100%; height: 100%; border: 0; display: block; }
@media (max-width:900px){ .contact-grid{ grid-template-columns: 1fr; gap: 44px; } .contact-info-grid, .contact-form{ grid-template-columns: 1fr; } .contact-form .full{ grid-column: span 1; } }

/* ════════ DEMO MODAL ════════ */
.demo-modal { position: fixed; inset: 0; z-index: 400; display: none; align-items: center; justify-content: center; padding: 24px; }
.demo-modal.open { display: flex; }
.demo-backdrop { position: absolute; inset: 0; background: rgba(4,4,3,.72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; transition: opacity .4s var(--ease); }
.demo-modal.open .demo-backdrop { opacity: 1; }
.demo-dialog { position: relative; width: min(560px,100%); max-height: 90vh; overflow-y: auto; background: linear-gradient(180deg,#17110a,#0b0907); border: 1px solid var(--line); border-radius: 14px; padding: clamp(28px,4vw,46px); transform: translateY(34px) scale(.98); opacity: 0; transition: transform .55s var(--ease), opacity .4s; }
.demo-modal.open .demo-dialog { transform: none; opacity: 1; }
.demo-dialog::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: var(--foil); border-radius: 14px 14px 0 0; }
.demo-close { position: absolute; top: 18px; right: 18px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); color: var(--cream-dim); display: flex; align-items: center; justify-content: center; font-size: 14px; transition: border-color .3s, color .3s, background .3s; }
.demo-close:hover { border-color: var(--gold); color: var(--gold-light); background: rgba(231,198,140,.06); }
.demo-title { font-size: clamp(26px,3vw,40px); margin: 18px 0 12px; }
.demo-desc { color: var(--cream-dim); font-size: 15px; max-width: 46ch; }
.demo-re { margin-top: 16px; font-size: 13px; letter-spacing: .04em; color: var(--cream-dim); }
.demo-re b { color: var(--gold-light); }
.demo-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 26px; }
.demo-form .full { grid-column: span 2; }
.demo-form .input { height: 50px; }
.demo-form .textarea { min-height: 110px; }
.demo-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.demo-err { color: #efa9a9; font-size: 13px; }
.demo-success { display: none; text-align: center; padding: 26px 8px 8px; }
.demo-check { display: inline-flex; align-items: center; justify-content: center; width: 62px; height: 62px; border-radius: 50%; background: var(--foil); color: #1a1206; font-size: 27px; margin-bottom: 18px; }
.demo-success p { color: var(--cream); font-size: 17px; max-width: 36ch; margin: 0 auto; line-height: 1.5; }
.demo-modal.sent .demo-form, .demo-modal.sent .demo-desc, .demo-modal.sent .demo-re { display: none; }
.demo-modal.sent .demo-success { display: block; }
@media (max-width:520px){ .demo-form { grid-template-columns: 1fr; } .demo-form .full { grid-column: span 1; } }

/* ── flat review mode (static full-page screenshots) ── */
.flatmode .hero { min-height: auto; padding-top: 150px; padding-bottom: 90px; }
.flatmode .formats-pin { height: auto; }
.flatmode .formats-track { transform: none !important; }
.flatmode .app-cine { min-height: auto; padding: 130px 0; }
.flatmode [data-reveal] { opacity: 1 !important; transform: none !important; }

/* ── reveal defaults (JS adds .is-in) ── */
[data-reveal] { opacity: 0; transform: translateY(40px); }
.reveal-ready [data-reveal].is-in { opacity: 1; transform: none; transition: opacity 1s var(--ease), transform 1s var(--ease); }
/* no-JS / reduced motion fallback */
.no-js [data-reveal], html:not(.reveal-ready) [data-reveal] { opacity: 1; transform: none; }