/* =========================================================================
   NOIR 09:03 — Specialty Coffee (concept)
   Designed & developed by Granivel — granivel.hu
   ========================================================================= */

@font-face{
  font-family:"Inter Tight";
  src:url("../fonts/inter-tight-latin.woff2") format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Inter Tight";
  src:url("../fonts/inter-tight-latin-ext.woff2") format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  --ink:#000000;
  --ink-2:#08080a;
  --paper:#EFECE6;
  --paper-60:rgba(239,236,230,.60);
  --paper-38:rgba(239,236,230,.38);
  --paper-16:rgba(239,236,230,.16);
  --paper-08:rgba(239,236,230,.08);
  --espresso:#7A4A2B;
  --led:#FF2E1F;
  --led-dim:rgba(255,46,31,.45);
  --chrome:linear-gradient(100deg,#4a4d52 0%,#c9ccd1 22%,#7e838a 38%,#eef0f2 52%,#6d7278 70%,#b9bec4 88%,#494c51 100%);
  --e:cubic-bezier(.22,1,.36,1);
  --e-io:cubic-bezier(.7,0,.2,1);
  --pad:clamp(18px,4.4vw,64px);
  --hair:1px solid var(--paper-16);
}

*,*::before,*::after{box-sizing:border-box}
html{ -webkit-text-size-adjust:100%; scroll-behavior:auto }
body{
  margin:0; background:var(--ink); color:var(--paper);
  font-family:"Inter Tight","Helvetica Neue",Helvetica,Inter,Arial,sans-serif;
  font-weight:400; font-size:16px; line-height:1.45;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
body.is-loading{ overflow:hidden; height:100vh }
img,video,canvas{display:block; max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,dl,dd,ul,figure{margin:0}
ul{list-style:none;padding:0}
::selection{background:var(--led);color:#000}

.tag{
  display:inline-block; font-size:11px; font-weight:500; letter-spacing:.24em;
  text-transform:uppercase; color:var(--paper-38);
}
.wd{ display:inline-block; white-space:nowrap }
.rule{ height:1px; background:var(--paper-16); transform-origin:0 50%; transform:scaleX(0) }
.rule--static{ transform:scaleX(1); flex:1 }

/* ============================== LED DISPLAY ============================== */
.led{
  display:inline-flex; align-items:center; gap:.06em;
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  font-weight:500; font-size:clamp(46px,9vw,110px); line-height:1;
  color:var(--led); letter-spacing:.02em;
  text-shadow:0 0 14px rgba(255,46,31,.55),0 0 46px rgba(255,46,31,.22);
}
.led__d{ position:relative; display:inline-block; min-width:.62em; text-align:center }
.led__colon{ opacity:.9; animation:blink 1.6s steps(1,end) infinite; margin-inline:.02em }
.led--sm{ font-size:clamp(28px,4vw,46px) }
@keyframes blink{0%,55%{opacity:1}56%,100%{opacity:.12}}

/* ============================== INTRO ============================== */
.intro{
  position:fixed; inset:0; z-index:200; background:#000;
  display:grid; place-items:center; overflow:hidden;
}
.intro__core{ position:relative; z-index:3; text-align:center; padding:0 24px }
.intro__word{
  margin-top:10px; font-size:clamp(30px,6vw,64px); font-weight:600;
  letter-spacing:.34em; text-indent:.34em; color:var(--paper);
  opacity:0; transform:translateY(14px); filter:blur(6px);
}
.intro__meta{
  position:fixed; left:var(--pad); right:var(--pad); bottom:calc(var(--pad) - 6px);
  display:flex; justify-content:space-between;
  font-size:11px; letter-spacing:.24em; color:var(--paper-38); z-index:3;
}
.intro__line{
  position:absolute; left:0; top:50%; height:1px; width:100%; z-index:4;
  background:linear-gradient(90deg,transparent,var(--led) 18%,#fff 50%,var(--led) 82%,transparent);
  box-shadow:0 0 24px rgba(255,46,31,.8); transform:scaleX(0); opacity:0;
}
.intro__shutter{ position:absolute; left:0; width:100%; height:50.4%; background:#000; z-index:2 }
.intro__shutter--top{ top:0 }
.intro__shutter--bottom{ bottom:0 }

/* ============================== CURSOR ============================== */
.cursor{ position:fixed; left:0; top:0; z-index:300; pointer-events:none; mix-blend-mode:difference; opacity:0 }
.cursor__dot{
  position:absolute; width:6px; height:6px; border-radius:50%; background:#fff;
  transform:translate(-50%,-50%);
}
.cursor__ring{
  position:absolute; width:26px; height:26px; border-radius:50%; border:1px solid rgba(255,255,255,.6);
  transform:translate(-50%,-50%); display:grid; place-items:center;
  transition:width .45s var(--e),height .45s var(--e),border-color .45s var(--e),background-color .45s var(--e);
}
.cursor__label{
  font-size:9.5px; font-weight:600; letter-spacing:.18em; color:#fff; opacity:0;
  transition:opacity .25s var(--e); white-space:nowrap;
}
.cursor.is-active .cursor__ring{ width:78px; height:78px; border-color:rgba(255,255,255,.85) }
.cursor.is-active .cursor__label{ opacity:1 }
.cursor.is-active .cursor__dot{ opacity:0 }
@media (hover:none),(pointer:coarse){ .cursor{ display:none } }

/* ============================== NAV ============================== */
.nav{
  position:fixed; z-index:120; top:0; left:0; right:0;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:18px var(--pad); mix-blend-mode:normal;
  transition:background-color .5s var(--e),backdrop-filter .5s var(--e),border-color .5s var(--e),padding .5s var(--e);
  border-bottom:1px solid transparent;
}
.nav.is-solid{
  background:rgba(4,4,5,.62); backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  border-bottom-color:var(--paper-08); padding-block:13px;
}
.nav.is-hidden{ transform:translateY(-102%) }
.nav{ transition:transform .6s var(--e),background-color .5s var(--e),backdrop-filter .5s var(--e),padding .5s var(--e) }
.nav__brand{ display:flex; align-items:baseline; gap:10px; font-weight:600; letter-spacing:.2em; font-size:13px }
.nav__brandTime{ color:var(--led); font-family:ui-monospace,Menlo,monospace; letter-spacing:.06em; text-shadow:0 0 12px rgba(255,46,31,.5) }
.nav__links{ display:flex; gap:clamp(16px,2.6vw,38px) }
.nav__link{
  position:relative; overflow:hidden; height:14px; display:block;
  font-size:11px; font-weight:500; letter-spacing:.22em; color:var(--paper-60);
}
.nav__link span{ display:block; transition:transform .55s var(--e),color .55s var(--e) }
.nav__link span:last-child{ position:absolute; inset:0; color:var(--paper) }
.nav__link span:first-child{ transform:translateY(0) }
.nav__link span:last-child{ transform:translateY(100%) }
.nav__link:hover span:first-child{ transform:translateY(-100%) }
.nav__link:hover span:last-child{ transform:translateY(0) }
.nav__cta{
  font-size:11px; font-weight:600; letter-spacing:.2em; padding:9px 16px;
  border:1px solid var(--paper-16); border-radius:2px; color:var(--paper);
  transition:border-color .5s var(--e),background-color .5s var(--e),color .5s var(--e);
}
.nav__cta i{ color:var(--led); font-style:normal }
.nav__cta:hover{ background:var(--paper); color:#000; border-color:var(--paper) }
.nav__cta:hover i{ color:var(--espresso) }
.nav__burger{ display:none; background:none; border:0; padding:8px; cursor:pointer }
.nav__burger span{ display:block; width:22px; height:1px; background:var(--paper); margin:5px 0; transition:transform .4s var(--e),opacity .3s }
.nav__burger[aria-expanded="true"] span:first-child{ transform:translateY(6px) rotate(45deg) }
.nav__burger[aria-expanded="true"] span:last-child{ transform:translateY(-6px) rotate(-45deg) }

.drawer{
  position:fixed; inset:0; z-index:110; background:rgba(3,3,4,.96);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  display:flex; flex-direction:column; justify-content:center; gap:6px; padding:0 var(--pad);
  clip-path:inset(0 0 100% 0); transition:clip-path .8s var(--e-io); pointer-events:none;
}
.drawer.is-open{ clip-path:inset(0 0 0 0); pointer-events:auto }
.drawer a{ font-size:clamp(34px,11vw,64px); font-weight:600; letter-spacing:-.02em; line-height:1.15; opacity:.9 }
.drawer a:active{ color:var(--led) }
.drawer__foot{ position:absolute; bottom:var(--pad); left:var(--pad); font-size:10px; letter-spacing:.24em; color:var(--paper-38) }

/* ============================== CINEMA ============================== */
.cinema{ position:relative; height:520vh; background:#000 }
.cinema__stage{
  position:sticky; top:0; height:100vh; height:100svh; overflow:hidden;
  background:#000;
}
.cinema__video{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center }
.film{
  position:relative; height:100%; width:auto; aspect-ratio:1/1; max-width:none;
  object-fit:cover; will-change:transform; transform:translateZ(0);
  -webkit-mask-image:
    linear-gradient(90deg,transparent 0,#000 4.5%,#000 95.5%,transparent 100%),
    linear-gradient(180deg,transparent 0,#000 4.5%,#000 95.5%,transparent 100%);
  mask-image:
    linear-gradient(90deg,transparent 0,#000 4.5%,#000 95.5%,transparent 100%),
    linear-gradient(180deg,transparent 0,#000 4.5%,#000 95.5%,transparent 100%);
  -webkit-mask-composite:source-in; mask-composite:intersect;
}
/* legibility veil — driven by the scroll timeline, never a flat overlay */
.cinema__scrim{ position:absolute; inset:0; background:#000; opacity:.34; pointer-events:none }
.cinema__vignette{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 46%,transparent 34%,rgba(0,0,0,.55) 78%,#000 100%),
    linear-gradient(180deg,rgba(0,0,0,.75) 0%,transparent 18%,transparent 76%,rgba(0,0,0,.85) 100%);
}
.cinema__grain{
  position:absolute; inset:-120px; pointer-events:none; opacity:.5;
  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='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='180' height='180' filter='url(%23n)' opacity='.42'/></svg>");
  animation:grain 1.1s steps(4,end) infinite; mix-blend-mode:overlay;
}
@keyframes grain{
  0%{transform:translate(0,0)}25%{transform:translate(-14px,8px)}
  50%{transform:translate(9px,-11px)}75%{transform:translate(-7px,-6px)}100%{transform:translate(0,0)}
}

/* ---- HERO ---- */
.hero{
  position:absolute; inset:0; z-index:5; display:grid; align-content:center; justify-items:center;
  text-align:center; padding:0 var(--pad); pointer-events:none;
}
.hero > *{ pointer-events:auto }
.hero__title{
  font-size:clamp(76px,20vw,300px); font-weight:600; line-height:.82; letter-spacing:-.045em;
  margin-bottom:.06em; text-shadow:0 0 90px rgba(0,0,0,.85);
}
.hero__title .ch{ display:inline-block; will-change:transform }
.hero__sub{
  display:flex; align-items:center; gap:14px; font-size:clamp(10px,1.05vw,12px);
  font-weight:500; letter-spacing:.42em; color:var(--paper-60); text-indent:.42em;
}
.hero__sub i{ width:38px; height:1px; background:var(--paper-16); display:block }
.hero__note{
  margin-top:clamp(26px,5vh,54px); font-size:clamp(13px,1.35vw,16px); line-height:1.55;
  color:var(--paper-60); max-width:34ch;
}
.hero__cta{
  margin-top:clamp(22px,4vh,40px); font-size:11px; font-weight:600; letter-spacing:.24em;
  padding:14px 26px; border:1px solid var(--paper-16); border-radius:2px;
  background:transparent; transition:border-color .5s var(--e),background-color .5s var(--e);
}
.hero__cta em{ font-style:normal; display:inline-block; color:var(--led); animation:bob 2.6s var(--e-io) infinite }
.hero__cta:hover{ border-color:var(--paper-38); background:rgba(255,255,255,.06) }
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
.hero__corner{
  position:absolute; font-size:10px; letter-spacing:.22em; color:var(--paper-38); line-height:1.7;
}
.hero__corner--tl{ left:var(--pad); top:calc(50vh + 4px); transform:translateY(-50%) rotate(-90deg); transform-origin:left center }
.hero__corner--tr{ right:var(--pad); bottom:calc(var(--pad) + 26px); text-align:right }

/* ---- SCENES ---- */
.scene{
  position:absolute; z-index:6; top:50%; transform:translateY(-50%);
  width:min(30ch,34vw); opacity:0; pointer-events:none;
}
.scene::before{
  content:""; position:absolute; inset:-14% -22%; z-index:-1;
  background:radial-gradient(60% 60% at 50% 50%,rgba(0,0,0,.82),transparent 72%);
}
.scene--right{ right:var(--pad); text-align:right }
.scene--left{ left:var(--pad); text-align:left }
.scene--right .rule{ transform-origin:100% 50% }
.scene__idx{
  font-family:ui-monospace,Menlo,monospace; font-size:12px; letter-spacing:.2em;
  color:var(--led); text-shadow:0 0 12px rgba(255,46,31,.5); margin-bottom:14px;
}
.scene__title{
  font-size:clamp(34px,4.6vw,74px); font-weight:600; line-height:1; letter-spacing:-.035em;
  margin-bottom:22px;
}
.scene__lead{ font-size:clamp(15px,1.5vw,20px); line-height:1.4; color:var(--paper); margin-bottom:14px }
.scene__body{ font-size:13px; line-height:1.7; color:var(--paper-60) }
.scene .rule{ margin-top:26px }

.specs{ margin:0 0 18px }
.specs li{
  display:flex; align-items:baseline; gap:12px; padding:9px 0;
  border-top:1px solid var(--paper-08);
}
.scene--left .specs li{ justify-content:flex-start }
.specs li:last-child{ border-bottom:1px solid var(--paper-08) }
.specs .odo{
  font-family:ui-monospace,Menlo,monospace; font-size:clamp(24px,2.6vw,38px); font-weight:500;
  color:var(--paper); min-width:2.2ch; font-variant-numeric:tabular-nums;
}
.specs i{ font-style:normal; font-size:11px; letter-spacing:.22em; color:var(--paper-38); text-transform:uppercase }

/* ---- SCENE 03 : BIGWORD ---- */
.bigword{
  position:absolute; inset:0; z-index:6; display:grid; align-content:center; justify-items:center;
  opacity:0; pointer-events:none;
}
.bigword__notes{ position:absolute; left:0; right:0; bottom:14vh }
.bigword__row{ display:flex; justify-content:center; width:100% }
.bigword__row span{
  font-size:clamp(46px,13.5vw,210px); font-weight:600; line-height:1; letter-spacing:-.05em;
  color:var(--paper); will-change:transform; text-shadow:0 0 60px rgba(0,0,0,.9);
}
.bigword__notes{
  display:flex; gap:clamp(14px,3vw,44px); margin-top:clamp(14px,3vh,32px); flex-wrap:wrap; justify-content:center;
  font-size:11px; letter-spacing:.2em; color:var(--paper-60); text-transform:uppercase;
}
.bigword__notes span{ position:relative }
.bigword__notes span + span::before{
  content:""; position:absolute; left:clamp(-22px,-1.5vw,-10px); top:50%; width:4px; height:1px; background:var(--led);
}

/* ---- SCENE 05 : TAKE YOUR TIME ---- */
.takeyourtime{
  position:absolute; inset:0; z-index:7; display:grid; align-content:center;
  padding:0 var(--pad); opacity:0; pointer-events:none;
}
.tyt__l{
  display:block; font-size:clamp(56px,15vw,230px); font-weight:600; line-height:.98; letter-spacing:-.05em;
  color:var(--paper); will-change:transform; text-shadow:0 0 70px rgba(0,0,0,.85);
}
.tyt__l:nth-child(2){ text-align:center }
.tyt__l:nth-child(3){ text-align:right }

/* ---- HUD ---- */
.cinema__hud{
  position:absolute; left:var(--pad); right:var(--pad); bottom:calc(var(--pad) - 8px); z-index:8;
  display:flex; align-items:center; gap:16px; font-size:10px; letter-spacing:.22em;
  color:var(--paper-38); font-family:ui-monospace,Menlo,monospace; pointer-events:none; opacity:0;
}
.cinema__hudBar{ flex:1; height:1px; background:var(--paper-08); position:relative; overflow:hidden }
.cinema__hudBar i{
  position:absolute; inset:0; transform-origin:0 50%; transform:scaleX(0);
  background:linear-gradient(90deg,var(--espresso),var(--led));
}
.cinema__hudLabel{ color:var(--led-dim) }

/* ============================== SPLIT TRANSITION ============================== */
.split{ position:relative; height:110vh; background:#000; overflow:hidden }
.split__line{
  position:absolute; top:50%; left:0; width:100%; height:1px; transform:scaleX(0);
  background:linear-gradient(90deg,transparent,var(--led),#fff,var(--led),transparent);
  box-shadow:0 0 30px rgba(255,46,31,.7); z-index:3;
}
.split__panel{
  position:absolute; left:0; width:100%; height:50%; background:#000; display:grid;
  z-index:2; overflow:hidden;
}
.split__panel--up{ top:0; align-items:end; justify-items:center }
.split__panel--down{ bottom:0; align-items:start; justify-items:center }
.split__panel span{
  font-size:clamp(30px,7vw,108px); font-weight:600; letter-spacing:-.03em; line-height:1;
  padding:0 0 .1em; display:block;
}
.split__panel--up span{ color:var(--led); font-family:ui-monospace,Menlo,monospace; text-shadow:0 0 26px rgba(255,46,31,.5) }
.split__panel--down span{ color:var(--paper); padding-top:.12em }

/* ============================== SECTION SHELL ============================== */
.sec__head{ padding:0 var(--pad); margin-bottom:clamp(40px,7vh,90px) }
.sec__title{
  font-size:clamp(48px,10vw,180px); font-weight:600; letter-spacing:-.045em; line-height:.98;
  margin:14px 0 18px;
}
.sec__title .ch{ display:inline-block; will-change:transform }
.sec__note{ font-size:13px; color:var(--paper-38); max-width:42ch; line-height:1.7 }

/* ============================== MENU ============================== */
.menu{ padding:clamp(70px,14vh,170px) 0 clamp(70px,12vh,150px); background:var(--ink) }
.carte{ border-top:var(--hair) }
.carte__row{
  position:relative; display:flex; align-items:center; gap:clamp(12px,2vw,28px);
  padding:clamp(16px,2.4vw,30px) var(--pad); border-bottom:var(--hair);
  overflow:hidden; isolation:isolate;
}
.carte__row::before{
  content:""; position:absolute; inset:0; z-index:-1; transform:scaleY(0); transform-origin:50% 100%;
  background:linear-gradient(90deg,rgba(122,74,43,.30),rgba(122,74,43,.06) 55%,transparent);
  transition:transform .7s var(--e);
}
.carte__row:hover::before{ transform:scaleY(1); transform-origin:50% 0% }
.carte__n{ font-family:ui-monospace,Menlo,monospace; font-size:11px; color:var(--paper-38); width:3ch }
.carte__name{
  font-size:clamp(22px,4.2vw,58px); font-weight:500; letter-spacing:-.03em; line-height:1;
  transition:transform .7s var(--e),letter-spacing .7s var(--e);
}
.carte__row:hover .carte__name{ transform:translateX(clamp(8px,1.4vw,26px)); letter-spacing:.005em }
.carte__price{
  margin-left:auto; font-family:ui-monospace,Menlo,monospace; font-size:clamp(13px,1.5vw,20px);
  color:var(--paper-60); transition:transform .7s var(--e),color .7s var(--e); font-variant-numeric:tabular-nums;
}
.carte__row:hover .carte__price{ transform:translateX(clamp(-6px,-.8vw,-2px)); color:var(--paper) }
.wave{
  flex:1; height:18px; min-width:40px; opacity:0; transition:opacity .5s var(--e);
  background:
    repeating-linear-gradient(90deg,var(--paper-16) 0 1px,transparent 1px 9px);
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 24' preserveAspectRatio='none'><path d='M0 12 Q 10 12 15 6 T 30 12 T 45 3 T 60 12 T 75 8 T 90 12 T 105 1 T 120 12 T 135 7 T 150 12 T 165 4 T 180 12 T 195 9 T 210 12 T 225 6 T 240 12' fill='none' stroke='black' stroke-width='9'/></svg>");
  mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 24' preserveAspectRatio='none'><path d='M0 12 Q 10 12 15 6 T 30 12 T 45 3 T 60 12 T 75 8 T 90 12 T 105 1 T 120 12 T 135 7 T 150 12 T 165 4 T 180 12 T 195 9 T 210 12 T 225 6 T 240 12' fill='none' stroke='black' stroke-width='9'/></svg>");
  -webkit-mask-size:200% 100%; mask-size:200% 100%;
}
.carte__row:hover .wave{ opacity:.85; animation:wavescroll 2.4s linear infinite }
@keyframes wavescroll{ from{-webkit-mask-position:0 0;mask-position:0 0} to{-webkit-mask-position:-100% 0;mask-position:-100% 0} }

.signature{ margin-top:clamp(60px,10vh,130px); padding:0 var(--pad) }
.signature__head{ display:flex; align-items:center; gap:20px; margin-bottom:34px }
.signature__grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--paper-08); border:1px solid var(--paper-08) }
.sig{ background:var(--ink); padding:clamp(24px,3.4vw,52px); position:relative; overflow:hidden }
.sig::after{
  content:""; position:absolute; inset:0; background:var(--chrome); opacity:0; mix-blend-mode:soft-light;
  transition:opacity .7s var(--e); pointer-events:none;
}
.sig:hover::after{ opacity:.55 }
.sig h3{
  font-size:clamp(28px,4vw,62px); font-weight:600; letter-spacing:-.035em; line-height:1; margin-bottom:14px;
  transition:transform .8s var(--e);
}
.sig:hover h3{ transform:translateY(-4px) }
.sig p{ font-size:13px; color:var(--paper-60); letter-spacing:.02em }
.sig__mark{
  position:absolute; right:clamp(18px,2.4vw,34px); top:clamp(18px,2.4vw,34px);
  width:8px; height:8px; border-radius:50%; background:var(--led); box-shadow:0 0 14px var(--led);
  opacity:.35; transition:opacity .6s var(--e),transform .6s var(--e);
}
.sig:hover .sig__mark{ opacity:1; transform:scale(1.25) }

/* ============================== PHILOSOPHY ============================== */
.philo{
  position:relative; padding:clamp(90px,17vh,220px) var(--pad); overflow:hidden;
  background:linear-gradient(180deg,#000,#0a0a0b 40%,#000);
}
.philo__fx{ position:absolute; inset:0; pointer-events:none; overflow:hidden }
.philo__chrome{
  position:absolute; inset:-30% -10%; background:var(--chrome); opacity:.14;
  filter:blur(38px); transform:translate3d(0,0,0) rotate(-8deg);
}
.philo__steam{
  position:absolute; left:50%; top:0; width:120vmax; height:120vmax; transform:translate(-50%,-30%);
  background:radial-gradient(closest-side,rgba(255,255,255,.14),transparent 70%);
  filter:blur(28px); opacity:.7;
}
.philo__grid{
  position:relative; display:grid; grid-template-columns:1.25fr .75fr; gap:clamp(30px,6vw,90px); align-items:end;
  max-width:1600px; margin:0 auto;
}
.philo__big{
  font-size:clamp(42px,8.4vw,148px); font-weight:600; line-height:1; letter-spacing:-.045em;
}
.philo__big .ln{ display:block; overflow:hidden }
.philo__big .ln > i{ display:block; font-style:normal; will-change:transform }
.philo__side{ padding-bottom:.6em }
.philo__lead{ font-size:clamp(20px,2.4vw,34px); font-weight:400; letter-spacing:-.02em; margin-bottom:26px }
.philo__side p:not(.philo__lead){ font-size:14px; color:var(--paper-60); line-height:2.1 }
.philo__side .rule{ margin-bottom:22px }

/* ============================== ORIGIN ============================== */
.origin{
  position:relative; padding:clamp(80px,16vh,200px) var(--pad); overflow:hidden;
  border-top:var(--hair);
}
.origin__tag{ margin-bottom:clamp(30px,6vh,70px) }
.origin__stack{ position:relative; z-index:2 }
.origin__country,.origin__region{
  font-weight:600; letter-spacing:-.05em; line-height:.84; will-change:transform;
}
.origin__country{ font-size:clamp(52px,13vw,230px) }
.origin__region{
  font-size:clamp(52px,13vw,230px); text-align:right;
  -webkit-text-stroke:1px var(--paper-38); color:transparent;
}
.origin__facts{
  position:relative; z-index:2; display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(20px,4vw,60px); margin-top:clamp(46px,9vh,110px); border-top:var(--hair); padding-top:34px;
}
.origin__facts dt{ font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--paper-38); margin-bottom:12px }
.origin__facts dd{ margin:0; font-size:clamp(17px,2.2vw,30px); font-weight:500; letter-spacing:-.02em; line-height:1.35 }
.origin__ghost{
  position:absolute; right:-2vw; bottom:-3vh; z-index:1; font-size:clamp(110px,17vw,280px);
  font-weight:700; letter-spacing:-.06em; color:rgba(239,236,230,.045);
  pointer-events:none; user-select:none; will-change:transform;
}

/* ============================== EXPERIENCE ============================== */
.exp{ position:relative; background:#000 }
.exp__panel{
  position:relative; min-height:82vh; display:grid; align-content:center; padding:clamp(60px,10vh,120px) var(--pad);
  overflow:hidden;
}
.exp__panel--b{ border-top:var(--hair); justify-items:end; text-align:right }
.exp__line{
  font-size:clamp(46px,11.5vw,205px); font-weight:600; line-height:.97; letter-spacing:-.05em;
}
.exp__line .ln{ display:block; overflow:hidden }
.exp__line .ln > i{ display:block; font-style:normal; will-change:transform }
.exp__note{ margin-top:34px; font-size:13px; line-height:1.9; color:var(--paper-38); max-width:40ch }
.exp__geo{ position:absolute; inset:0; pointer-events:none }
.exp__geo i{
  position:absolute; display:block; border:1px solid var(--paper-08); border-radius:50%;
  left:50%; top:50%; transform:translate(-50%,-50%);
}
.exp__geo i:nth-child(1){ width:38vmax; height:38vmax }
.exp__geo i:nth-child(2){ width:58vmax; height:58vmax; border-color:rgba(255,46,31,.10) }
.exp__geo i:nth-child(3){ width:78vmax; height:78vmax }

/* ============================== CTA ============================== */
.cta{
  position:relative; padding:clamp(90px,18vh,220px) var(--pad) clamp(60px,10vh,120px);
  text-align:center; border-top:var(--hair);
  background:radial-gradient(90% 70% at 50% 0%,rgba(122,74,43,.13),transparent 60%),#000;
}
.cta__led{ margin-bottom:clamp(24px,4vh,44px) }
.cta__title{
  font-size:clamp(38px,7.6vw,132px); font-weight:600; line-height:1; letter-spacing:-.045em;
  margin-bottom:clamp(34px,6vh,64px);
}
.cta__title .ch{ display:inline-block; will-change:transform }
.cta__actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap }
.btn{
  font-size:11px; font-weight:600; letter-spacing:.24em; padding:18px 40px; border-radius:2px;
  background:var(--paper); color:#000;
  transition:background-color .5s var(--e),color .5s var(--e),border-color .5s var(--e);
}
.btn--ghost{ background:transparent; color:var(--paper); border:1px solid var(--paper-16) }
.btn--ghost:hover{ background:var(--paper); color:#000 }
.btn:hover{ background:var(--espresso); color:var(--paper) }

.info{
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,4vw,60px);
  margin-top:clamp(70px,12vh,150px); padding-top:34px; border-top:var(--hair); text-align:left;
}
.info__col p{ font-size:13.5px; color:var(--paper-60); line-height:2; margin-top:2px }
.info__col .tag{ margin-bottom:14px }
.info__col i{ font-style:normal; color:var(--paper); float:right; font-family:ui-monospace,Menlo,monospace }
.info__col a{ border-bottom:1px solid var(--paper-16); transition:color .4s,border-color .4s }
.info__col a:hover{ color:var(--paper); border-color:var(--led) }
.info__disc{ font-size:11.5px !important; line-height:1.8 !important; color:var(--paper-38) !important; max-width:34ch }

/* ============================== FOOTER ============================== */
.foot{ position:relative; padding:clamp(40px,7vh,80px) var(--pad) 0; overflow:hidden; border-top:var(--hair) }
.foot__mark{ font-size:11px; letter-spacing:.3em; color:var(--led); margin-bottom:18px }
.foot__row{
  display:flex; gap:18px; justify-content:space-between; flex-wrap:wrap;
  font-size:11px; letter-spacing:.2em; color:var(--paper-38); padding-bottom:clamp(30px,6vh,60px);
}
.foot__row a{ border-bottom:1px solid var(--paper-16) }
.foot__row a:hover{ color:var(--paper) }
.foot__big{
  font-family:ui-monospace,Menlo,monospace; font-size:clamp(90px,26vw,420px); font-weight:500;
  line-height:.78; letter-spacing:-.02em; color:transparent; -webkit-text-stroke:1px var(--paper-08);
  text-align:center; margin-bottom:-.16em; user-select:none;
}

/* ============================== RESPONSIVE ============================== */
@media (max-width:1024px){
  .philo__grid{ grid-template-columns:1fr; align-items:start }
  .info{ grid-template-columns:1fr 1fr }
  .info__col:last-child{ grid-column:1/-1 }
  .scene{ width:min(34ch,44vw) }
}
@media (max-width:820px){
  .nav__links,.nav__cta{ display:none }
  .nav__burger{ display:block }
  .cinema{ height:460vh }
  .hero__corner--tl{ display:none }
  .takeyourtime{ align-content:end; padding-bottom:12vh }
  .scene{
    top:auto; bottom:calc(var(--pad) + 40px); transform:none; width:auto;
    left:var(--pad); right:var(--pad); text-align:left;
  }
  .scene--right{ text-align:left }
  .scene--right .rule{ transform-origin:0 50% }
  .scene::before{ inset:-30% -20% -60% -20% }
  .scene__title{ font-size:clamp(30px,10vw,52px) }
  .specs li{ padding:7px 0 }
  .bigword__row span{ font-size:19vw }
  .signature__grid{ grid-template-columns:1fr }
  .origin__facts{ grid-template-columns:1fr; gap:26px }
  .origin__region{ text-align:left }
  .info{ grid-template-columns:1fr }
  .exp__panel{ min-height:66vh }
  .cinema__hud{ font-size:9px; gap:10px }
}
@media (max-width:520px){
  .carte__row{ gap:10px }
  .wave{ display:none }
  .carte__name{ font-size:26px }
  .foot__row{ font-size:10px; gap:10px }
}

/* Portrait-ish viewports (phones, tablets): the film sits high, the words live
   in the black below it — never a shrunken copy of the desktop composition. */
@media (max-aspect-ratio:1/1){
  .film{ width:min(100%,48vh); height:auto; transform:translateZ(0) scale(1.06); transform-origin:50% 0 }
  .cinema__video{ align-items:flex-start; padding-top:6vh }
  .hero{ align-content:end; padding-bottom:11vh }
  .hero__title{ font-size:min(27vw,190px); margin-bottom:.1em }
  .hero__note{ margin-top:20px }
  .scene{
    top:auto; bottom:calc(var(--pad) + 40px); transform:none; width:auto;
    left:var(--pad); right:var(--pad); text-align:left;
  }
  .scene--right{ text-align:left }
  .scene--right .rule{ transform-origin:0 50% }
  .scene::before{ inset:-30% -20% -60% -20% }
  .bigword{ align-content:end; padding-bottom:13vh }
  .bigword__row{ justify-content:center }
  .bigword__row span{ font-size:min(14.5vw,132px) }
  .bigword__notes{ bottom:6vh; gap:12px; font-size:10px; justify-content:center; padding:0 var(--pad) }
  .takeyourtime{ align-content:end; padding-bottom:10vh }
  .tyt__l{ font-size:min(17vw,150px) }
  .tyt__l:nth-child(2){ text-align:left; padding-left:8vw }
  .tyt__l:nth-child(3){ text-align:left; padding-left:16vw }
}

/* ============================== A11Y / MOTION ============================== */
@media (prefers-reduced-motion:reduce){
  .cinema{ height:auto }
  .cinema__stage{ position:relative; height:auto; min-height:0; padding:10vh 0 }
  .cinema__video{ position:relative; inset:auto; display:block; padding:0 }
  .cinema__scrim,.cinema__vignette,.cinema__grain,.cinema__hud{ display:none }
  .film{ position:relative; width:min(92vw,720px); height:auto; margin:0 auto; transform:none;
         -webkit-mask-image:none; mask-image:none }
  .hero{ position:relative; inset:auto; padding:6vh var(--pad) 10vh; min-height:0 }
  .hero__corner{ display:none }
  .scene,.bigword,.takeyourtime{
    position:relative; inset:auto; opacity:1; transform:none; width:auto;
    padding:7vh var(--pad); margin:0 auto; text-align:left; display:block;
  }
  .scene::before{ display:none }
  .bigword__row{ justify-content:flex-start; flex-wrap:wrap }
  .bigword__row span{ text-shadow:none }
  .bigword__notes{ position:static; justify-content:flex-start; margin-top:18px }
  .tyt__l{ text-align:left !important; text-shadow:none }
  .rule{ transform:scaleX(1) }
  .hero__cta em{ animation:none }
  .split{ height:auto; padding:10vh 0 }
  .split__panel{ position:relative; height:auto; width:100% }
  .split__line{ position:relative; top:auto; transform:scaleX(1); margin:6vh 0 }
  .drawer{ transition:none }
}
:focus-visible{ outline:1px solid var(--led); outline-offset:4px }