/* Seinelys · site mock
   One environment (Seine at night), one signature (le méandre), brass in rare doses.
   Type: Jost (logo, text, labels) and Bodoni Moda (headlines, prices), both self-hosted in assets/fonts.
   Shape system: interactive = full pill, cards and media = 16px, inputs = 12px.
   Base state is the complete static page. html.pin (set by app.js on wide screens with motion allowed)
   turns the hero and the film strip into pinned, scroll-driven journeys. */
@font-face{font-family:"Jost";src:url("fonts/jost-var.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url("fonts/cormorant-var.woff2") format("woff2");font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url("fonts/cormorant-italic-var.woff2") format("woff2");font-weight:300 700;font-style:italic;font-display:swap}
@font-face{font-family:"Outfit";src:url("fonts/outfit-var.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Noto Naskh Arabic";src:url("fonts/noto-naskh-arabic-var.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
:root{
  color-scheme: dark;
  --canvas:#0B1719; --panel:#11262A; --panel-2:#183338;
  --text:#F3EFE5; --text-2:#BCC8C3;   /* warm ivory for reading, a lighter grey for support (12 Oct type pass) */
  --accent:#D6BC8A; --accent-hover:#E4CDA2; --accent-dark:#8C6E38;
  --verdigris:#7FB5A4; --mist:#E7EDEB; --ink:#0B1719;
  --line:#2A4A4F; --line-strong:#4B6E73;
  /* TYPE A (12 Oct 2026, user's choice): Cormorant Garamond for headlines and names, Outfit for text, prices and buttons; Jost stays for the logo only */
  --f-display:"Cormorant Garamond","Noto Naskh Arabic","Cormorant","Garamond",Georgia,serif;
  --f-text:"Outfit","Noto Naskh Arabic","Segoe UI",system-ui,sans-serif;
  --f-mono:"Outfit","Noto Naskh Arabic","Segoe UI",system-ui,sans-serif;   /* labels, timecodes, small prices: capitals, tracked */
  --f-logo:"Jost","Segoe UI",system-ui,sans-serif;
  --t-label:.8125rem; --t-fine:.906rem; --t-small:1rem; --t-body:1.125rem; --t-lead:1.25rem; --t-item:1.375rem;   /* the six text sizes below the headlines */
  --gutter:clamp(20px,6vw,96px);
  --nav-h:68px;
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;position:relative;background:var(--canvas);color:var(--text);font-family:var(--f-text);font-size:1.0625rem;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
img,svg{max-width:100%}
a{color:inherit}
h1,h2,h3,p,ul,ol,dl,dd,fieldset,legend{margin:0;padding:0}
ul,ol{list-style:none}
fieldset{border:0;min-width:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
[hidden]{display:none !important}
.defs{position:absolute}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--accent);color:var(--ink);padding:.6rem 1rem;border-radius:999px;text-decoration:none}
.skip:focus{top:12px}

/* one fixed environment layer behind everything */
.env{position:fixed;inset:0;z-index:0;pointer-events:none;background:
  radial-gradient(60% 45% at 82% 10%,rgba(127,181,164,.10),transparent 70%),
  radial-gradient(50% 40% at 8% 88%,rgba(214,188,138,.06),transparent 70%)}
.env::after{content:"";position:absolute;inset:0;opacity:.05;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='160' height='160' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E")}
@media (prefers-reduced-motion:no-preference){
  .env{animation:drift 80s ease-in-out infinite alternate}
  @keyframes drift{to{background-position:6% 4%,-5% -3%}}
}
main,.foot{position:relative;z-index:2}

/* logo lettering (same build as the logo files) */
.wm{font-family:var(--f-logo);font-weight:400;text-transform:uppercase;white-space:nowrap;line-height:1;display:inline-block;letter-spacing:.34em;margin-right:-.34em;color:var(--text)}
.pd{position:relative;display:inline-block;letter-spacing:0;margin-right:.34em}
.pd svg{position:absolute;left:50%;transform:translateX(-50%);top:-.36em;width:.34em;height:.34em;overflow:visible;color:var(--accent)}

/* type */
h1,h2{font-family:var(--f-display);font-weight:600;font-optical-sizing:auto;letter-spacing:-.012em;text-wrap:balance}
h1 i,h2 i{font-weight:500}
h1{font-size:clamp(2.8rem,7.6vw,6.4rem);line-height:1.0}
h2{font-size:clamp(2.2rem,5.1vw,3.9rem);line-height:1.06}
h3{font-family:var(--f-text);font-weight:500;font-size:1.1rem}
.dot{color:var(--accent)}
.kicker{font-family:var(--f-mono);font-weight:500;font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;color:var(--text-2)}
.kicker.dark{color:#4E6461}
.fine{font-size:.86rem;color:var(--text-2)}

/* buttons: one accent, pills */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:48px;padding:.7rem 1.5rem;border-radius:999px;border:1px solid var(--accent);background:var(--accent);color:var(--ink);font:500 1rem var(--f-text);text-decoration:none;white-space:nowrap;cursor:pointer;transition:background .25s var(--ease),transform .25s var(--ease),border-color .25s var(--ease)}
.btn:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.btn:active{transform:scale(.98)}
.btn-sm{min-height:40px;padding:.4rem 1.1rem;font-size:.94rem}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--line-strong)}
.btn-ghost:hover{background:rgba(228,235,232,.06);border-color:var(--text-2)}
.btn-ink{background:var(--ink);color:var(--mist);border-color:var(--ink)}
.btn-ink:hover{background:#16292C;border-color:#16292C}
@media (pointer:coarse){.btn-sm{min-height:44px}}

/* nav */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;height:var(--nav-h);padding-top:env(safe-area-inset-top,0px);padding-inline:var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:1rem;transition:background .3s var(--ease),border-color .3s var(--ease);border-bottom:1px solid transparent}
/* at the top of the page the bar is still a dark scrim (the brass sign in the film sat right behind the menu): less glass, readable text */
.nav{background:linear-gradient(180deg,rgba(11,23,25,.84),rgba(11,23,25,.62));backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.nav.solid{background:rgba(11,23,25,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom-color:var(--line)}
.brand{text-decoration:none;font-size:1.1rem;padding-block:.6rem}
.nav-links{display:flex;gap:1.8rem;font-size:.98rem}
.nav-links a{text-decoration:none;color:var(--text-2);padding-block:.6rem;transition:color .2s}
.nav-links a:hover{color:var(--text)}
.nav-end{display:flex;align-items:center;gap:.7rem}
.lang select{appearance:none;-webkit-appearance:none;min-height:40px;padding:0 2rem 0 .95rem;border:1px solid var(--line-strong);border-radius:999px;background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1.5 1.5 6 6l4.5-4.5' fill='none' stroke='%23D6BC8A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right .85rem center/10px;color:var(--text);font:500 .86rem var(--f-text);cursor:pointer;transition:border-color .2s}
.lang select:hover{border-color:var(--text-2)}
.lang option{background:var(--panel);color:var(--text)}
@media (pointer:coarse){.lang select{min-height:44px}}
@media (max-width:719px){.nav-links{display:none}.nav-end .btn{display:none}}

/* media: real client work. 16px corners; 9:16 film frames carry the brass camera corners */
.media{position:relative;border-radius:16px;overflow:hidden;background:var(--panel);border:1px solid var(--line);min-width:0;isolation:isolate}
.media img,.media video{display:block;width:100%;height:100%;object-fit:cover}
.media.shot{aspect-ratio:9/16}
.media.shot::before,.media.shot::after{content:"";position:absolute;z-index:2;width:14px;height:14px;border:0 solid var(--accent);opacity:.9;pointer-events:none}
.media.shot::before{top:10px;left:10px;border-width:1px 0 0 1px}
.media.shot::after{bottom:10px;right:10px;border-width:0 1px 1px 0}

/* ============ HERO JOURNEY ============ */
.stage{position:relative}
.film{position:absolute;inset:0 0 auto 0;height:100dvh;overflow:hidden;background:#10262A}
.film .poster{position:absolute;inset:0;background:url("hero-ending.jpg") center/cover no-repeat}
.film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s var(--ease);transform:translateZ(0)}
.stage.video-ready .film video{opacity:1}
/* no seam at the stage's bottom edge: the film overshoots by a pixel and the poster goes once the film plays (user: "gap of layer") */
.film video{inset:-1px}
.stage.video-ready .film .poster{opacity:0;transition:opacity .4s .3s}
.stage.video-failed .film video{display:none}
/* global base scrim: no frame is ever raw behind the page */
.film .scrim{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 120% 90% at 50% 45%,rgba(11,23,25,0) 35%,rgba(11,23,25,.62) 100%)}
.ring circle{stroke-dashoffset:var(--ld,126)}
.ring{position:absolute;inset-inline-end:30px;bottom:54px;width:28px;height:28px;color:var(--accent);transform:rotate(-90deg);display:none}
html.pin .stage:not(.video-ready):not(.video-failed) .ring{display:block}
html.pin .film .poster{background-image:url("hero-poster.jpg")}
:root{--tshadow:0 1px 2px rgba(5,10,12,.95),0 3px 12px rgba(5,10,12,.78),0 10px 44px rgba(5,10,12,.8)}
.band{text-shadow:var(--tshadow)}
.band .btn{text-shadow:none}
.band::before{content:"";position:absolute;inset:-4% 0;pointer-events:none;z-index:0;opacity:var(--o,1);background:radial-gradient(ellipse 74% 62% at 32% 50%,rgba(5,10,12,.66) 0%,rgba(5,10,12,.44) 46%,rgba(5,10,12,0) 76%)}
.band > *{position:relative;z-index:1}
.chap::before{background:radial-gradient(ellipse 80% 70% at 50% 55%,rgba(5,10,12,.6) 0%,rgba(5,10,12,.38) 48%,rgba(5,10,12,0) 76%)}

.band{position:relative}
.b0{min-height:100dvh;display:flex;flex-direction:column;justify-content:center;gap:1.4rem;padding:calc(var(--nav-h) + 24px) var(--gutter) 72px;max-width:62rem}
.b0 .sub{font-size:1.15rem;color:var(--text-2);max-width:34rem}
.cta-row{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:.4rem}

.chap{min-height:82vh;display:grid;align-content:center;gap:1rem;padding:72px var(--gutter);border-top:1px solid var(--line);overflow:hidden}
.word{font:500 clamp(2.6rem,min(17vw,calc(118vw / var(--n,7))),9rem)/.92 var(--f-text);letter-spacing:.04em;white-space:nowrap;color:var(--text)}
.chap-copy{max-width:30rem}
.chap-copy h2{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.chap-copy p{font-size:1.15rem;color:var(--text)}

/* pinned journey (wide screens, motion allowed, Motion loaded) */
html.pin .journey{height:520vh}
html.pin .stage{position:sticky;top:0;height:100dvh;overflow:hidden}
html.pin .film{inset:0;height:auto}
.b0{isolation:isolate}
html.pin .band{position:absolute;inset:0;opacity:var(--o,0);visibility:var(--v,hidden);will-change:opacity}
html.pin .b0{--o:1;--v:visible;min-height:0;padding-bottom:0;transform:translate3d(0,var(--by,0px),0)}
html.pin .chap{min-height:0;padding:0;border:0;display:block}
html.pin .word{position:absolute;left:50%;top:50%;z-index:2;font-size:clamp(4.2rem,min(19vw,calc(126vw / var(--n,7))),20rem);transform:translate3d(calc(-50% + var(--wx,0px)),-50%,0)}
html.pin .chap-copy{position:absolute;inset-inline-start:var(--gutter);bottom:13vh;z-index:4}

/* ============ DÉJÀ EN LIGNE ============ */
.clients{padding:2.2rem var(--gutter);display:grid;gap:1rem;justify-items:center;text-align:center;border-bottom:1px solid var(--line)}
.clients p{font:500 .72rem var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-2)}
.clients ul{display:grid;gap:1.1rem;justify-items:center}
.clients li{display:grid;gap:.2rem}
.clients b{font:italic 400 clamp(1.3rem,2.4vw,1.75rem)/1.1 var(--f-display);color:var(--text)}
.clients span{font:500 .66rem var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--text-2)}
@media (min-width:720px){
  .clients ul{display:flex;flex-wrap:wrap;justify-content:center;gap:1.1rem 0}
  .clients li{padding:.2rem clamp(1.2rem,3vw,2.6rem)}
  .clients li + li{border-inline-start:1px solid var(--line)}
}

/* ============ FILMS ============ */
.films{position:relative;padding-block:clamp(4rem,9vw,7rem)}
.films-track{display:flex;gap:clamp(14px,2vw,26px);align-items:flex-start;padding-inline:var(--gutter);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.films-track::-webkit-scrollbar{display:none}
.films-intro{flex:0 0 min(78vw,24rem);scroll-snap-align:start;display:grid;gap:1rem;align-content:center;padding-inline-end:1rem}
.films-intro p{color:var(--text-2)}
.ai-note{font:500 .7rem/1.6 var(--f-mono);letter-spacing:.06em;text-transform:uppercase}
.tile{flex:0 0 clamp(200px,23vw,300px);scroll-snap-align:start;display:grid;gap:.35rem}
.tile .tc{font:500 .66rem var(--f-mono);letter-spacing:.1em;color:var(--verdigris);margin-top:.5rem}
.tile h3{font-size:1.05rem}
.tile p{font-size:.92rem;color:var(--text-2)}
.tile .media{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--lift,0px));transition:transform .5s var(--ease),border-color .3s}
.tile:hover .media{--lift:-6px;border-color:var(--accent)}
.tile.wide{flex-basis:min(86vw,39.5rem)}
.tile.wide .media{aspect-ratio:16/9}
.films-end{flex:0 0 auto;align-self:center;padding-inline:1rem var(--gutter);scroll-snap-align:end}
html.pin .films{padding-block:0;height:calc(100vh + var(--dist,0px))}
html.pin .films-pin{position:sticky;top:0;height:100dvh;overflow:hidden;display:flex;align-items:center}
html.pin .tile.wide{flex-basis:calc(clamp(200px,23vw,300px) * 3.1605)}   /* 16:9 at the same height as the 9:16 frames */
html.pin .films-track{overflow:visible;transform:translate3d(var(--x,0px),0,0);will-change:transform;width:max-content}

/* ============ SERVICES (five cells: site, reel, posts, boards, cards) ============ */
.services{padding:clamp(4rem,9vw,8rem) var(--gutter);max-width:84rem;margin-inline:auto}
.services h2{max-width:20ch;margin-bottom:clamp(2rem,4vw,3.5rem)}
.bento{display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
.cell{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:16px;display:grid;gap:14px;align-content:start;min-width:0}
.cell-txt{display:grid;gap:.35rem}
.cell-txt p{color:var(--text-2);font-size:.98rem;max-width:34rem}
.price{font:500 .78rem var(--f-mono);letter-spacing:.12em;text-transform:uppercase;font-variant-numeric:lining-nums;color:var(--accent);margin-top:.3rem}

/* 1 · website: a browser frame with the site scrolling inside */
.browser{display:grid;grid-template-rows:28px minmax(0,1fr);border-radius:12px;overflow:hidden;border:1px solid var(--line-strong);background:#0E1F22;min-width:0}
.browser i{display:block;border-bottom:1px solid var(--line);background:radial-gradient(circle at 16px 50%,var(--line-strong) 3.5px,transparent 4px),radial-gradient(circle at 30px 50%,var(--line-strong) 3.5px,transparent 4px),radial-gradient(circle at 44px 50%,var(--line-strong) 3.5px,transparent 4px)}
.browser video,.browser img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:left top}

/* 2 · the playable reel */
.c-video .media{width:100%;max-width:19rem;justify-self:center}
.reel video{cursor:pointer}
.reel-btn{position:absolute;inset:0;z-index:3;margin:auto;width:72px;height:72px;border-radius:50%;border:1px solid var(--accent);background:rgba(11,23,25,.62);color:var(--accent);cursor:pointer;display:grid;place-items:center;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:transform .3s var(--ease),background .3s,opacity .3s}
.reel-btn svg{width:22px;height:22px;margin-left:4px;overflow:visible}
.reel-btn:hover{transform:scale(1.06);background:rgba(11,23,25,.8)}
.reel.playing .reel-btn{opacity:0;pointer-events:none}

/* 3 · sweet / savoury: the FIRST Naan switch (cross-fade, soft zoom, one sweep of light) */
.duo{aspect-ratio:4/5;touch-action:pan-y}
.duo img{position:absolute;inset:0;transition:opacity .8s var(--ease),transform 1.4s var(--ease),filter .8s var(--ease)}
.duo .im-sale,.duo[data-v="sale"] .im-sucre{opacity:0;transform:scale(1.06);filter:blur(6px)}
.duo[data-v="sale"] .im-sale{opacity:1;transform:none;filter:none}
.sweep{position:absolute;inset:-10% -60%;z-index:2;pointer-events:none;background:linear-gradient(105deg,rgba(255,246,236,0) 40%,rgba(255,236,190,.38) 50%,rgba(255,246,236,0) 60%);transform:translateX(-70%);opacity:0}
.duo.swap .sweep{animation:sweep 1.1s cubic-bezier(.65,0,.35,1)}
@keyframes sweep{0%{transform:translateX(-70%);opacity:0}20%{opacity:1}100%{transform:translateX(70%);opacity:0}}
.switch{position:absolute;z-index:3;left:50%;bottom:14px;transform:translateX(-50%);display:grid;grid-template-columns:1fr 1fr;border-radius:999px;padding:4px;background:rgba(11,23,25,.72);border:1px solid var(--line-strong);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.switch .pill{position:absolute;top:4px;bottom:4px;inset-inline-start:4px;width:calc(50% - 4px);border-radius:999px;background:var(--accent);transition:transform .5s var(--ease)}
.duo[data-v="sale"] .switch .pill{transform:translateX(100%)}
.switch button{position:relative;z-index:1;min-height:40px;min-width:5.6rem;padding:0 1rem;border:0;border-radius:999px;background:transparent;color:var(--text);font:500 .9rem var(--f-text);cursor:pointer;transition:color .3s}
.switch button[aria-pressed="true"]{color:var(--ink)}

/* 4 · menu boards: a swipeable row */
.boards{display:grid;gap:10px;min-width:0}
.boards-track{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;border-radius:12px;-webkit-overflow-scrolling:touch}
.boards-track::-webkit-scrollbar{display:none}
.boards-track li{flex:0 0 100%;scroll-snap-align:start;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:#0E1F22}
.boards-track img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.boards-nav{display:flex;align-items:center;justify-content:center;gap:1rem;font:500 .74rem var(--f-mono);letter-spacing:.14em;color:var(--text-2)}
.boards-nav button{width:44px;height:44px;border-radius:50%;border:1px solid var(--line-strong);background:transparent;color:var(--text);cursor:pointer;display:grid;place-items:center;transition:border-color .2s,color .2s}
.boards-nav button:hover{border-color:var(--accent);color:var(--accent)}
.boards-nav button:disabled{opacity:.35;cursor:default}
.boards-nav svg{width:12px;height:12px;overflow:visible}
#boards-prev svg{transform:scaleX(-1)}

/* 5 · NFC cards, drawn in code on the site's own ground */
.c-nfc{background:var(--panel-2)}
.cards{position:relative;min-height:17rem;border-radius:12px;overflow:hidden;display:grid;place-items:center;background:radial-gradient(70% 90% at 22% 18%,rgba(214,188,138,.2),transparent 70%),radial-gradient(60% 80% at 84% 88%,rgba(127,181,164,.18),transparent 70%),var(--canvas)}
.nfc-card{position:absolute;width:min(54%,14rem);aspect-ratio:85.6/54;border-radius:14px;padding:1rem 1.1rem;display:grid;align-content:space-between;justify-items:start;box-shadow:0 26px 50px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.18)}
.nfc-card svg{position:absolute;top:.8rem;right:.9rem;width:22px;height:22px}
.nfc-card b{font:500 1.25rem/1 var(--f-text);letter-spacing:.01em}
.nfc-card small{font:500 .62rem var(--f-mono);letter-spacing:.16em;text-transform:uppercase}
.nfc-card.g{background:linear-gradient(140deg,#F4F7F5,#D9E2DE);color:#0B1719;transform:translate(-36%,-16%) rotate(-7deg)}
.nfc-card.g .stars{color:#8C6E38;letter-spacing:.18em;font-size:1.05rem}
.nfc-card.ig{background:linear-gradient(140deg,#1D4046,#0E1F22);color:var(--text);border:1px solid rgba(214,188,138,.55);transform:translate(34%,18%) rotate(6deg)}
.nfc-card.ig svg,.nfc-card.ig small{color:var(--accent)}
.nfc-card .handle{font:italic 400 1.05rem var(--f-display);color:var(--text-2)}

@media (min-width:900px){
  .bento{grid-template-columns:repeat(6,minmax(0,1fr))}
  .c-site{grid-column:1 / 5;grid-template-rows:minmax(0,1fr) auto;align-content:stretch}
  .c-site .browser video{height:100%;aspect-ratio:auto;min-height:20rem}
  .c-video{grid-column:5 / 7}
  .c-photo{grid-column:1 / 3}
  .c-boards{grid-column:3 / 7}
  .c-nfc{grid-column:1 / 7;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:center;gap:clamp(1.5rem,4vw,3.5rem)}
  .c-video .media{max-width:none;height:100%;max-height:35rem;width:auto}
}
@media (prefers-reduced-motion:reduce){.duo img,.switch .pill{transition:none}}

/* ============ AVANT / APRÈS ============ */
.proof{padding:clamp(3rem,7vw,6rem) var(--gutter);max-width:84rem;margin-inline:auto;display:grid;gap:clamp(1.5rem,4vw,3rem);align-items:center}
.proof-txt{display:grid;gap:1rem}
.proof-txt p{color:var(--text-2);max-width:30rem}
.compare{position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;border:1px solid var(--line);isolation:isolate;background:var(--panel)}
.compare .side{position:absolute;inset:0}
.compare .side img{display:block;width:100%;height:100%;object-fit:cover}
.compare .before{clip-path:inset(0 calc(100% - var(--cut)) 0 0)}
.proof-txt .credit{font:500 .68rem var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--verdigris)}
.cut{position:absolute;top:0;bottom:0;left:var(--cut);width:2px;background:var(--accent);transform:translateX(-1px);z-index:2}
.cut b{position:absolute;top:50%;left:50%;width:44px;height:44px;border-radius:50%;background:var(--accent);transform:translate(-50%,-50%);box-shadow:0 6px 20px rgba(0,0,0,.35)}
.cut b::before,.cut b::after{content:"";position:absolute;top:50%;width:8px;height:8px;border:solid var(--ink);border-width:0 0 2px 2px}
.cut b::before{left:11px;transform:translateY(-50%) rotate(45deg)}
.cut b::after{right:11px;transform:translateY(-50%) rotate(-135deg)}
.lab{position:absolute;bottom:12px;z-index:2;font:500 .66rem var(--f-mono);letter-spacing:.1em;text-transform:uppercase;background:rgba(11,23,25,.72);color:var(--text);padding:.3rem .6rem;border-radius:999px}
.lab.l{left:12px}.lab.r{right:12px}
.compare input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;z-index:3}
.compare:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:3px}
@media (min-width:860px){.proof{grid-template-columns:.8fr 1.2fr}}

/* ============ LA CARTE (dark menu board: brass frame, serif prices, one lit pack) ============ */
.carte{position:relative;background:linear-gradient(180deg,var(--panel-2) 0%,var(--canvas) 100%);border-top:1px solid var(--line);margin-top:clamp(2rem,5vw,4rem)}
.carte::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(60% 42% at 50% 0%,rgba(214,188,138,.11),transparent 70%)}
.carte-in{position:relative;max-width:84rem;margin-inline:auto;padding:clamp(3.5rem,8vw,7rem) var(--gutter)}
.carte h2{margin:.6rem 0 clamp(2rem,4vw,3rem)}
.packs{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(15.5rem,1fr));align-items:stretch}
.pack{position:relative;background:linear-gradient(180deg,rgba(228,235,232,.045),rgba(228,235,232,.012));border:1px solid var(--line-strong);border-radius:16px;padding:1.8rem 1.5rem 1.6rem;display:grid;gap:.2rem;align-content:start;box-shadow:inset 0 1px 0 rgba(228,235,232,.07)}
.pack::before,.pack::after{content:"";position:absolute;width:14px;height:14px;border:0 solid var(--accent);opacity:.6}
.pack::before{top:10px;left:10px;border-width:1px 0 0 1px}
.pack::after{bottom:10px;right:10px;border-width:0 1px 1px 0}
.pack.pop{border-color:var(--accent);background:linear-gradient(180deg,rgba(214,188,138,.14),rgba(214,188,138,.03) 42%,rgba(228,235,232,.012));box-shadow:inset 0 1px 0 rgba(214,188,138,.4),0 30px 60px rgba(0,0,0,.35)}
.pack.pop::before,.pack.pop::after{opacity:1}
.badge{position:absolute;top:-.8rem;inset-inline-start:1.3rem;background:var(--accent);color:var(--ink);font:500 .66rem var(--f-mono);letter-spacing:.12em;text-transform:uppercase;padding:.3rem .8rem;border-radius:999px}
.pack h3{font-family:var(--f-display);font-weight:400;font-size:1.75rem;line-height:1.12;color:var(--text)}
.pack .for{font-size:.92rem;color:var(--text-2);margin-top:.2rem}
.pack .amt{font-family:var(--f-display);font-weight:400;font-size:clamp(2.7rem,4.2vw,3.4rem);line-height:1;letter-spacing:-.02em;font-variant-numeric:lining-nums;margin-top:1.2rem;color:var(--text)}
.pack.pop .amt{color:var(--accent)}
.pack .alt{font-size:.88rem;color:var(--text-2);min-height:1.3rem;margin-top:.35rem}
.pack ul{margin-top:1.1rem;padding-top:1rem;border-top:1px solid var(--line);display:grid;gap:.42rem;font-size:.97rem;color:var(--text)}
.pack li{padding-inline-start:1.2rem;position:relative}
.pack li::before{content:"";position:absolute;inset-inline-start:0;top:.75em;width:.55rem;height:1px;background:var(--accent)}
.pack .val{font:500 .74rem var(--f-mono);letter-spacing:.04em;color:var(--verdigris);margin-top:1rem}
.monthly{margin-top:14px;border:1px solid var(--line-strong);border-radius:16px;padding:1.5rem 1.5rem 1.2rem;display:grid;gap:.9rem;background:rgba(228,235,232,.025);box-shadow:inset 0 1px 0 rgba(228,235,232,.06)}
.monthly h3{font-family:var(--f-display);font-weight:400;font-size:1.65rem}
.monthly ul{display:grid;grid-template-columns:minmax(0,1fr)}
.monthly li{display:grid;grid-template-columns:10.5rem 1fr auto;gap:1rem;align-items:baseline;padding-block:.8rem}
.monthly li + li{border-top:1px solid var(--line)}
.monthly li b{font-weight:500}
.monthly li span{color:var(--text-2);font-size:.95rem}
.monthly li em{font:normal 400 1.45rem var(--f-display);color:var(--accent);white-space:nowrap}
.carte .fine{color:var(--text-2)}
@media (max-width:560px){.monthly li{grid-template-columns:1fr auto}.monthly li span{grid-column:1 / -1;grid-row:2}}

.order{margin-top:clamp(2.5rem,5vw,4rem);background:var(--panel);border:1px solid var(--line-strong);border-radius:16px;padding:clamp(1.3rem,3vw,2.2rem);display:grid;gap:1.5rem;box-shadow:inset 0 1px 0 rgba(228,235,232,.06)}
.order > h3{font-family:var(--f-display);font-weight:400;font-size:1.85rem}
.order legend{font:500 .7rem var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:.65rem}
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chips label{position:relative;cursor:pointer}
.chips input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.chips span{display:inline-flex;align-items:center;min-height:44px;padding:.45rem 1.05rem;border:1px solid var(--line-strong);border-radius:999px;font-size:.95rem;color:var(--text);background:transparent;transition:background .2s,color .2s,border-color .2s}
.chips label:hover span{border-color:var(--text-2)}
.chips input:checked + span{background:var(--accent);border-color:var(--accent);color:var(--ink)}
.chips input:focus-visible + span{outline:2px solid var(--accent);outline-offset:2px}
.chips input:disabled + span{opacity:.4;cursor:not-allowed}
.recap{border-top:1px solid var(--line);padding-top:1.4rem;display:grid;gap:.8rem;justify-items:start}
.recap dl{display:grid;gap:.45rem;width:100%;max-width:34rem}
.recap dl div{display:flex;justify-content:space-between;gap:1rem;align-items:baseline}
.recap dt{color:var(--text-2)}
.recap dd{font:500 1.05rem var(--f-mono);font-variant-numeric:lining-nums tabular-nums;white-space:nowrap;color:var(--text)}
.recap .strong dt{color:var(--text);font-weight:500}
.recap .strong dd{font:400 2.1rem var(--f-display);color:var(--accent)}
.recap .cap{color:var(--text-2)}
.pro{display:flex;gap:.6rem;align-items:center;min-height:44px;cursor:pointer;font-size:.95rem}
.pro input{width:1.15rem;height:1.15rem;accent-color:var(--accent)}
.done{background:rgba(127,181,164,.12);border:1px solid rgba(127,181,164,.45);color:var(--text);border-radius:12px;padding:.8rem 1rem;font-size:.95rem;max-width:34rem}
.err{background:rgba(226,199,150,.12);border:1px solid rgba(226,199,150,.5);color:var(--text);border-radius:12px;padding:.8rem 1rem;font-size:.95rem}

/* ============ MÉTHODE ============ */
.method{padding:clamp(4rem,9vw,8rem) var(--gutter);max-width:84rem;margin-inline:auto}
.method h2{max-width:24ch;margin-bottom:clamp(2rem,4vw,3.5rem)}
.days{display:grid;gap:0;grid-template-columns:1fr}
.days li{padding:1.4rem 0;border-top:1px solid var(--line);display:grid;gap:.4rem;position:relative}
.days li::before{content:"";position:absolute;top:-1px;inset-inline-start:0;width:2.5rem;height:1px;background:var(--accent)}
.when{font:500 .72rem var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.days p{color:var(--text-2);max-width:26rem}
@media (min-width:860px){.days{grid-template-columns:repeat(4,1fr);gap:1.5rem}}

/* ============ QUESTIONS ============ */
.faq{padding:clamp(2rem,6vw,5rem) var(--gutter) clamp(4rem,9vw,8rem);display:grid;gap:2.5rem;max-width:84rem;margin-inline:auto}
.faq-left{display:grid;gap:1.6rem;align-content:start}
.guar{display:grid;gap:.6rem;color:var(--text-2)}
.guar li{padding-inline-start:1.4rem;position:relative}
.guar li::before{content:"";position:absolute;inset-inline-start:0;top:.5em;width:.55rem;height:.3rem;border:solid var(--verdigris);border-width:0 0 1.5px 1.5px;transform:rotate(-45deg)}
.faq-list{display:grid;align-content:start}
details{border-top:1px solid var(--line)}
details:last-child{border-bottom:1px solid var(--line)}
summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:1rem;align-items:center;padding:1.1rem 0;font-size:1.08rem;min-height:44px}
summary::-webkit-details-marker{display:none}
summary::after{content:"";flex:none;width:.7rem;height:.7rem;border:solid var(--accent);border-width:0 1.5px 1.5px 0;transform:rotate(45deg);transition:transform .3s var(--ease);margin-inline-end:.3rem}
details[open] summary::after{transform:rotate(-135deg)}
details p{color:var(--text-2);padding:0 0 1.2rem;padding-inline-end:2rem;max-width:38rem}
@media (min-width:860px){.faq{grid-template-columns:.8fr 1.2fr}}

/* ============ STUDIO ============ */
.studio{background:var(--panel);padding:clamp(4rem,9vw,7rem) var(--gutter);display:grid;gap:2rem;align-items:start}
.studio > *{min-width:0}
.studio-head{display:grid;gap:1rem}
.studio-head h2{max-width:14ch}
.studio-txt{display:grid;gap:1rem;max-width:36rem}
.studio-txt p:not(.kicker){color:var(--text-2)}
.studio-txt .zone{font-size:.95rem;border-top:1px solid var(--line);padding-top:1rem}
@media (min-width:860px){.studio{grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,6rem);padding-inline:max(var(--gutter),calc((100vw - 76rem)/2))}.studio-txt{padding-top:2.4rem}}

/* ============ FINAL ============ */
.final{padding:clamp(5rem,11vw,9rem) var(--gutter);display:grid;gap:2rem;justify-items:center;text-align:center}
.sig{display:grid;justify-items:center;gap:1.1rem}
.wm.big{font-size:clamp(1.7rem,6vw,3.6rem)}
.sig .rule{width:min(60%,18rem);height:1px;background:var(--line-strong)}
.sig h2{font-style:italic;font-weight:400;letter-spacing:-.01em;font-size:clamp(1.5rem,3.6vw,2.4rem);color:var(--text-2)}
.offer{display:grid;gap:.6rem;max-width:40rem;justify-items:center}
.offer h3{font-family:var(--f-display);font-weight:400;font-size:clamp(1.4rem,3.2vw,1.9rem)}
.offer p{color:var(--text-2)}
.callback{width:100%;max-width:60rem;display:grid;gap:.9rem;grid-template-columns:1fr;text-align:start;align-items:end}
.callback button{grid-column:1 / -1;justify-self:center;min-width:16rem}
.alt-contact{grid-column:1 / -1;text-align:center;color:var(--text-2);font-size:.95rem;margin:0}
.f label small{font-size:.8rem;color:var(--text-2);margin-inline-start:.3rem}
.f{display:grid;gap:.4rem}
.f label{font-size:.9rem;color:var(--text-2)}
.f input{min-height:48px;border-radius:12px;border:1px solid var(--line-strong);background:var(--panel);color:var(--text);padding:.6rem .9rem;font:400 1rem var(--f-text)}
.f input:focus-visible{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.callback .err,.callback .done{grid-column:1 / -1}
@media (min-width:760px){.callback{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.callback{grid-template-columns:repeat(4,1fr);max-width:68rem}.f label{white-space:nowrap}}

.contact-row{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center}
.soon{font:500 .68rem var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--verdigris)}
.what{padding:clamp(4rem,9vw,8rem) var(--gutter);max-width:84rem;margin-inline:auto}
.what h2{max-width:20ch;margin-bottom:clamp(2rem,4vw,3.5rem)}

/* ============ FOOTER ============ */
.foot{background:var(--panel);border-top:1px solid var(--line)}
.foot-in{max-width:84rem;margin-inline:auto;padding:3rem var(--gutter) calc(2.5rem + env(safe-area-inset-bottom,0px));display:grid;gap:1.4rem;color:var(--text-2);font-size:.95rem}
.foot .wm{font-size:1rem}
.legal,.social{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem}
/* social links as brass-rimmed pills with their symbol (user: the plain words looked basic) */
.social{gap:.6rem}
.social a{gap:.55rem;min-height:46px;padding:.35rem 1rem .35rem .6rem;border:1px solid rgba(214,188,138,.32);border-radius:999px;color:var(--text);font-size:var(--t-small);transition:border-color .2s,background .2s,transform .2s var(--ease)}
.social a:hover{border-color:var(--accent);background:rgba(214,188,138,.08);transform:translateY(-1px);color:var(--text)}
.social svg{width:1.3rem;height:1.3rem;color:var(--accent);flex:none}
.foot a{color:var(--text-2);text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.foot a:hover{color:var(--text)}

/* ============ MOBILE ACTION BAR ============ */
.mbar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:none;gap:.5rem;padding:.6rem var(--gutter) calc(.6rem + env(safe-area-inset-bottom,0px));background:rgba(11,23,25,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--line);transition:transform .35s var(--ease)}
.mbar .btn{flex:1;min-height:46px;padding-inline:.8rem;font-size:.95rem}
.mbar.off{transform:translateY(110%)}
@media (max-width:859px){.mbar{display:flex}.foot-in{padding-bottom:calc(6.5rem + env(safe-area-inset-bottom,0px))}}

/* ============ LE MÉANDRE (signature line) ============ */
.meandre{position:absolute;top:0;right:0;width:clamp(70px,11vw,170px);height:100%;z-index:1;pointer-events:none;clip-path:inset(0 0 calc(100% - var(--mp,100%)) 0)}
@media (max-width:859px){.meandre{display:none}}

/* ============ TYPE PASS (12 Oct 2026, after the font audit) ============
   The audit found 35 font sizes, 19 text styles under 12 px and most reading text in a dim grey.
   This block sets the type for the whole page: six text sizes below the headlines, nothing under 12.5 px,
   ivory for reading, brass for labels and prices, no green text. It comes after the components on purpose. */
body{font-size:var(--t-body);line-height:1.62}

/* ---- labels: one size, one weight, tighter tracking, never smaller than 13 px ---- */
.kicker,.tile .tc,.when,.order legend,.clients p,.clients span,.badge,.lab,.ai-note,.soon,.proof-txt .credit,.price,.film-time,.chap-num,
html.pin .rail,.boards-nav,.nfc-card small{font-size:var(--t-label);font-weight:600;letter-spacing:.13em}
.kicker,.when,.order legend,.price,.chap-num,.soon{color:var(--accent)}
.tile .tc,.proof-txt .credit,.clients span,.ai-note{color:var(--text-2)}
.badge{font-size:.78rem;letter-spacing:.12em;padding:.38rem .9rem}

/* ---- hero: the film stays, the words get their own ground ---- */
.b0::before{background:linear-gradient(90deg,rgba(5,10,12,.86) 0%,rgba(5,10,12,.66) 34%,rgba(5,10,12,.22) 62%,rgba(5,10,12,0) 80%)}
html[dir="rtl"] .b0::before{background:linear-gradient(270deg,rgba(5,10,12,.86) 0%,rgba(5,10,12,.66) 34%,rgba(5,10,12,.22) 62%,rgba(5,10,12,0) 80%)}
.b0 .kicker{font-size:.875rem;letter-spacing:.16em}
.b0 .sub{font-size:var(--t-lead);line-height:1.55;color:var(--text);max-width:35rem}
.chap-copy p{font-size:var(--t-lead)}
.nav-links{font-size:var(--t-small)}
.nav-links a{color:var(--text);opacity:.82}
.nav-links a:hover{opacity:1}
.btn{font-weight:600;letter-spacing:.005em}

/* ---- reading text ---- */
.films-intro p:not(.ai-note),.proof-txt p:not(.credit),.studio-txt p,.offer p,.days p,details p,.guar,.cell-txt p{font-size:var(--t-body);color:var(--text-2)}
.studio-txt .zone,.fine,.alt-contact,.f label,.tile p,.foot-in{font-size:var(--t-fine)}
.fine,.carte .fine{color:var(--text-2)}
h3{font-size:var(--t-item);font-weight:500;letter-spacing:-.005em}
.tile h3{font-size:1.1875rem}
summary{font-size:1.1875rem;font-weight:500;padding:1.25rem 0}
.guar li::before{border-color:var(--accent)}

/* ---- the menu: three packs ---- */
.pack{padding:2.3rem 1.9rem 2rem;gap:.25rem;background:linear-gradient(180deg,rgba(243,239,229,.055),rgba(243,239,229,.012));border-color:rgba(188,200,195,.26)}
.pack h3{font-family:var(--f-display);font-weight:500;font-size:2rem;letter-spacing:-.01em;color:var(--text)}
.pack .for{font-size:var(--t-small);color:var(--text-2);margin-top:.35rem}
.pack .amt{font-size:clamp(3.2rem,4.8vw,4.1rem);margin-top:1.5rem;color:var(--text)}
.pack.pop .amt{color:var(--accent)}
.pack .alt{font-size:var(--t-fine);color:var(--text-2);margin-top:.5rem}
.pack ul{margin-top:1.5rem;padding-top:1.4rem;border-top:1px solid rgba(214,188,138,.3);gap:.7rem;font-size:1.0625rem;line-height:1.45;color:var(--text)}
.pack li{padding-inline-start:1.7rem}
.pack li::before{top:.42em;width:.62rem;height:.34rem;background:none;border:solid var(--accent);border-width:0 0 1.5px 1.5px;transform:rotate(-45deg)}
.pack .val{font-size:var(--t-fine);font-weight:500;letter-spacing:.01em;text-transform:none;color:var(--text-2);margin-top:1.4rem;padding-top:1rem;border-top:1px solid var(--line)}
.pack.pop{border-color:var(--accent);background:linear-gradient(180deg,rgba(214,188,138,.16),rgba(214,188,138,.035) 46%,rgba(243,239,229,.012))}

/* ---- monthly and à la carte rows ---- */
.monthly{padding:1.9rem 1.9rem 1.5rem}
.monthly h3,.order > h3{font-family:var(--f-display);font-weight:500;font-size:2rem}
.monthly li{padding-block:1.05rem;grid-template-columns:12.5rem 1fr auto}
.monthly li b{font-size:1.1875rem;font-weight:500;color:var(--text)}
.monthly li span{font-size:var(--t-small);color:var(--text-2)}
.monthly li em{font-size:1.7rem;color:var(--accent)}

/* ---- order builder ---- */
.chips span{font-size:var(--t-small);min-height:46px;padding:.5rem 1.15rem}
.chips input:checked + span{font-weight:500}
.recap dt{font-size:1.0625rem;color:var(--text-2)}
.recap dd{font:600 1.1875rem var(--f-text)}
.recap .strong dt{font-size:1.1875rem;color:var(--text)}
.recap .strong dd{font:400 2.6rem var(--f-display)}
.pro{font-size:var(--t-small)}

/* ---- method, services, footer ---- */
.days h3{font-size:var(--t-item)}
.days li{padding:1.6rem 0;gap:.55rem}
.cell-txt{gap:.5rem}
.switch button{font-size:var(--t-small)}
.foot a,.foot p{color:var(--text-2)}
.clients b{font-size:clamp(1.45rem,2.5vw,1.9rem)}

@media (max-width:560px){
  .monthly li{grid-template-columns:1fr auto}
  .monthly li b{font-size:1.0625rem}
  .monthly li em{font-size:1.35rem}
  .pack{padding:1.9rem 1.4rem 1.7rem}
  .pack .amt{font-size:3.2rem}
}

/* packs: the "bought separately" line sits on the same baseline in all three cards */
.pack{display:flex;flex-direction:column}
.pack ul{margin-bottom:1.4rem}
.pack .val{margin-top:auto}

/* ============ V3 (12 Oct 2026): depth, playhead, a pinned peak, sections that each behave their own way ============ */

/* hero depth: three layers between the film and the words. Each moves at its own rate (app.js writes the variables). */
.depth{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.film video,.film .poster{transform:scale(var(--fs,1)) translateZ(0)}
.mist,.glow,.fore{position:absolute;will-change:transform;transition:transform .7s var(--ease)}
.mist{inset:-18% -26%;filter:blur(14px)}
.mist.m1{background:radial-gradient(38% 26% at 28% 64%,rgba(170,196,204,.17),transparent 70%),radial-gradient(30% 22% at 66% 58%,rgba(170,196,204,.11),transparent 70%);transform:translate3d(calc(var(--m1x,0px) + var(--px,0) * 10px),calc(var(--m1y,0px) + var(--py,0) * 6px),0)}
.mist.m2{background:radial-gradient(44% 24% at 58% 84%,rgba(190,206,210,.2),transparent 70%),radial-gradient(30% 18% at 16% 90%,rgba(190,206,210,.15),transparent 70%);transform:translate3d(calc(var(--m2x,0px) + var(--px,0) * 26px),calc(var(--m2y,0px) + var(--py,0) * 14px),0)}
.glow{left:-12%;top:-18%;width:52vw;height:52vw;border-radius:50%;background:radial-gradient(circle,rgba(214,188,138,.26),rgba(214,188,138,.07) 42%,transparent 66%);mix-blend-mode:screen;opacity:var(--go,.55);transform:translate3d(calc(var(--px,0) * 16px),calc(var(--gy,0px) + var(--py,0) * 10px),0)}
.fore{inset:auto 0 -12% 0;height:44%;background:linear-gradient(180deg,rgba(5,10,12,0),rgba(5,10,12,.62));transform:translate3d(0,var(--fy,0px),0)}
html[dir="rtl"] .film video,html[dir="rtl"] .film .poster{transform:scaleX(-1) scale(var(--fs,1))}
html[dir="rtl"] .depth{transform:scaleX(-1)}
/* depth planes (pinned journey only): --e is the scroll push-in, --lr the lily rise, --px/--py the pointer lean set on .stage */
.planes{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden;display:none}
html.pin .planes{display:block}
.planes img{position:absolute;display:block;height:auto;will-change:transform;transition:transform .7s var(--ease),opacity .7s var(--ease),filter .7s var(--ease)}
.plane-lantern{top:-6%;right:-3%;width:min(20vw,330px);transform-origin:50% 0;filter:blur(1.4px) brightness(.9);
  transform:translate3d(calc(var(--e,0) * 70px + var(--px,0) * 34px),calc(var(--e,0) * -120px + var(--py,0) * 18px),0) scaleX(-1) scale(calc(1 + var(--e,0) * .12))}
/* the lantern's light: a warm pool that follows the lantern and reaches the headline's right edge, breathing slowly */
.plane-lamp{position:absolute;left:60vw;top:-14vw;width:60vw;height:60vw;border-radius:50%;mix-blend-mode:screen;will-change:transform,opacity;
  background:radial-gradient(circle,rgba(228,178,106,.5),rgba(228,178,106,.2) 28%,rgba(228,178,106,.07) 50%,rgba(228,178,106,0) 74%);
  transform:translate3d(calc(var(--e,0) * 70px + var(--px,0) * 34px),calc(var(--e,0) * -120px + var(--py,0) * 18px),0);
  transition:transform .7s var(--ease);animation:lamp 4.6s ease-in-out infinite}
@keyframes lamp{0%,100%{opacity:.86}42%{opacity:1}70%{opacity:.93}}
.plane-foliage{bottom:-11%;left:-11%;width:min(31vw,48vh,520px);transform-origin:0 100%;filter:blur(1.1px) brightness(.9);
  transform:translate3d(calc(var(--e,0) * -170px + var(--px,0) * 30px),calc(var(--e,0) * 130px + var(--py,0) * 14px),0) scale(calc(1 + var(--e,0) * .1))}
.plane-lilies{bottom:-7%;right:-5%;width:min(30vw,52vh,500px);transform-origin:100% 100%;opacity:var(--lr,0);filter:blur(calc((1 - var(--lr,0)) * 12px)) brightness(.92);
  transform:translate3d(calc(var(--px,0) * 24px),calc((1 - var(--lr,0)) * 28% + var(--py,0) * 10px),0) scale(calc(.92 + var(--lr,0) * .1))}
html[dir="rtl"] .planes{transform:scaleX(-1)}

/* ============ OPENING (logo reveal) ============
   .intro.go starts the timeline; --ix/--iy (set by the script) is where the logo's own play mark sits, so the sweep lands on it.
   0.15–1.35 s sweep + write · 1.35–1.85 s land on the I · 1.6 s tagline · 2.3 s curtain lifts */
.intro{position:fixed;inset:0;z-index:100;background:var(--canvas);display:grid;place-items:center;overflow:hidden;transition:transform .8s cubic-bezier(.7,0,.2,1),visibility 0s .8s}
.intro::after{content:"";position:absolute;inset:auto 0 0 0;height:18vh;background:linear-gradient(180deg,rgba(11,23,25,0),rgba(11,23,25,.5));opacity:0;transition:opacity .4s}
.intro.leave{transform:translate3d(0,-100%,0);visibility:hidden}
.intro.leave::after{opacity:1}
html.introing{overflow:hidden}
html.intro-skip .intro{display:none}
.intro-lock{position:relative;font-size:clamp(2.2rem,6.4vw,4.8rem);text-align:center;direction:ltr}
.intro .wm{font-size:1em;clip-path:inset(-40% 100% -40% 0);color:var(--text)}
.intro .pd svg{opacity:0}
.intro-sweep{position:absolute;top:-.46em;left:0;width:.6em;height:.6em;margin-left:-.3em;color:var(--accent);opacity:0;filter:drop-shadow(0 0 .18em rgba(214,188,138,.75))}
.intro-sweep svg{display:block;width:100%;height:100%;overflow:visible}
/* the brass trail the mark leaves while it writes: grows with the sweep, brightest just behind the mark, gone once it lands */
.intro-trail{position:absolute;left:0;top:-.17em;height:2px;width:0;opacity:0;transform-origin:0 50%;border-radius:2px;
  background:linear-gradient(90deg,rgba(214,188,138,0),rgba(214,188,138,.18) 55%,rgba(214,188,138,.8));box-shadow:0 0 .22em rgba(214,188,138,.45)}
.intro.go .intro-trail{animation:intro-run-trail 1.2s .15s cubic-bezier(.65,0,.3,1) both,intro-out .45s 1.35s forwards}
@keyframes intro-run-trail{0%{width:0;opacity:0}8%{opacity:1}100%{width:100%;opacity:1}}
.intro-tag{margin:.7em 0 0;font:italic 400 .36em/1.25 var(--f-display);letter-spacing:.02em;color:var(--text-2);opacity:0;transform:translateY(.4em)}
.intro-tag i{color:var(--accent)}
.intro-tag .dot{color:var(--accent)}
.intro.go .wm{animation:intro-write 1.2s .15s cubic-bezier(.65,0,.3,1) both}
.intro.go .intro-sweep{animation:intro-run 1.2s .15s cubic-bezier(.65,0,.3,1) both,intro-land .5s 1.35s cubic-bezier(.3,0,.15,1) forwards,intro-out .3s 1.9s forwards}
.intro.go .pd svg{animation:intro-in .3s 1.85s forwards}
.intro.go .intro-tag{animation:intro-up .8s 1.6s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes intro-write{from{clip-path:inset(-40% 100% -40% 0)}to{clip-path:inset(-40% -4% -40% 0)}}
@keyframes intro-run{0%{left:0;opacity:0}8%{opacity:1}100%{left:100%;opacity:1}}
@keyframes intro-land{from{left:100%;top:-.46em;width:.6em;height:.6em;margin-left:-.3em}to{left:var(--ix,50%);top:var(--iy,-.36em);width:.34em;height:.34em;margin-left:0}}
@keyframes intro-out{to{opacity:0}}
@keyframes intro-in{to{opacity:1}}
@keyframes intro-up{to{opacity:1;transform:none}}

/* ============ LA CARTE v2 (12 Oct 2026, user chose "velvet glass"): the hero film blurred behind frosted dark cards,
   prices in Jost Light with a small brass € set against the digits (the script wraps the sign in .cur), double hairline frames ============ */
.carte{background:#0B1719;isolation:isolate;overflow:hidden}
.carte::before{inset:0;background:url("hero-ending.jpg") center 30%/cover no-repeat;filter:blur(28px) saturate(.8) brightness(.42);transform:scale(1.08);opacity:.55}
.carte::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(11,23,25,.55),rgba(11,23,25,.82) 40%,#0B1719 100%),radial-gradient(70% 40% at 50% 0%,rgba(214,188,138,.16),transparent 70%)}
.carte-in{z-index:1}
.carte h2{margin-bottom:clamp(2.4rem,4.4vw,3.4rem)}
.pack,.monthly,.order{position:relative;border-radius:6px;background:rgba(11,23,25,.62);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid rgba(214,188,138,.32);box-shadow:0 1px 0 rgba(243,239,229,.06) inset,0 24px 60px rgba(0,0,0,.35)}
.pack::before,.monthly::before,.order::before{content:"";position:absolute;inset:7px;width:auto;height:auto;border:1px solid rgba(214,188,138,.22);border-radius:3px;pointer-events:none;opacity:1}
.pack::after,.monthly::after{display:none}
.pack.pop{background:linear-gradient(180deg,rgba(214,188,138,.18),rgba(214,188,138,.05) 38%,rgba(11,23,25,.66) 100%);border-color:rgba(214,188,138,.7);box-shadow:0 1px 0 rgba(214,188,138,.5) inset,0 0 0 1px rgba(214,188,138,.12),0 30px 70px rgba(0,0,0,.45),0 0 90px rgba(214,188,138,.1)}
.pack.pop::before{border-color:rgba(214,188,138,.5)}
.pack h3{font:italic 400 2.1rem/1.1 var(--f-display);letter-spacing:0}
.pack .for{margin-top:.45rem}
.pack .amt{font:300 clamp(3.4rem,5vw,4.6rem)/1 var(--f-text);letter-spacing:-.015em;font-variant-numeric:tabular-nums lining-nums;margin-top:1.4rem}
.amt .cur{font-size:.44em;font-weight:400;vertical-align:.92em;margin-inline-end:.04em;color:var(--accent);letter-spacing:0}
.pack .alt{font-size:.95rem;margin-top:.55rem;letter-spacing:.01em}
.pack ul{border-top:1px solid rgba(214,188,138,.28);margin-top:1.6rem;padding-top:1.4rem}
.pack .val{border-top:1px solid rgba(214,188,138,.18)}
.badge{font-family:var(--f-text);font-size:.7rem;letter-spacing:.16em;padding:.38rem .9rem;top:-.85rem;inset-inline-start:1.6rem}
.monthly li em{font:400 1.3rem/1 var(--f-text);font-variant-numeric:tabular-nums lining-nums;letter-spacing:-.01em}
.monthly li em .cur{font-size:.72em;vertical-align:.3em;margin-inline-end:.04em}

/* monthly packages as tiles (two cards), with their heading */
.carte .sub-h{font:italic 400 clamp(1.6rem,2.4vw,2.1rem)/1.1 var(--f-display);margin:clamp(2.2rem,4vw,3.2rem) 0 1rem;color:var(--text)}
.packs-mo{grid-template-columns:repeat(auto-fit,minmax(15.5rem,1fr))}   /* three tiles: Starter, Premium, the free on-site review */
.pack .amt.free{font:italic 400 clamp(2.4rem,3.4vw,3.2rem)/1 var(--f-display);letter-spacing:0;color:var(--accent)}   /* brass, like every other price (user: no green) */
.pack-visit{border-color:rgba(127,181,164,.45)}
.pack-visit::before{border-color:rgba(127,181,164,.25)}
.pack-visit .add{background:transparent;color:var(--text);border-color:rgba(214,188,138,.6)}
.pack-visit .add:hover{background:rgba(214,188,138,.1)}
/* one € everywhere: a small brass sign (the script wraps every € in .cur inside the price list and the cart) */
.cur{font-size:.8em;color:var(--accent);margin-inline:.06em .04em;vertical-align:.08em}
.packs-mo + details.monthly{margin-top:clamp(1.6rem,3vw,2.4rem)}

/* ============ TILES IN MOTION (12 Oct): every tile moves a little with the scroll ============
   --in  0→1 as a film tile enters the pinned strip (blur and dim lift), --par its parallax
   --cy  the slow drift of a service image / price card across the viewport, --rx/--ry the pointer tilt */
.tile .media{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translate3d(var(--par,0px),var(--lift,0px),0);filter:blur(calc((1 - var(--in,1)) * 10px));opacity:calc(.3 + var(--in,1) * .7);transition:transform .5s var(--ease),border-color .3s,filter .35s var(--ease),opacity .35s var(--ease)}
.tile .media > *{transform:scale(calc(1.04 + (1 - var(--in,1)) * .06)) translateX(calc(var(--par,0px) * -.6));transition:transform .5s var(--ease)}
.cell .media{overflow:hidden}
.cell .media > img,.cell .media > video,.cell .browser{transform:translate3d(0,var(--cy,0px),0) scale(1.06);transition:transform .6s var(--ease)}
.pack{transform:translate3d(0,var(--cy,0px),0);transition:transform .6s var(--ease),border-color .3s,box-shadow .3s}
.pack:hover{border-color:rgba(214,188,138,.7)}
@media (prefers-reduced-motion:reduce){.tile .media,.tile .media > *,.cell .media > *,.pack{transform:none !important;filter:none !important;opacity:1 !important}}

/* ============ THE CURSOR (fine pointers, wide screens): brass dot + lagging ring ============ */
.cursor{display:none}
@media (pointer:fine) and (min-width:720px){
  html.cur,html.cur a,html.cur button,html.cur label,html.cur summary,html.cur [role="button"]{cursor:none}
  html.cur input,html.cur select,html.cur textarea{cursor:auto}
  html.cur .cursor{display:block;position:fixed;inset:0;z-index:200;pointer-events:none;opacity:0;transition:opacity .25s}
  html.cur.cur-in .cursor{opacity:1}
  .c-dot,.c-ring{position:absolute;top:0;left:0;border-radius:50%;will-change:transform}
  .c-dot{width:6px;height:6px;margin:-3px 0 0 -3px;background:var(--accent);transform:translate3d(var(--x,-100px),var(--y,-100px),0);transition:opacity .2s}
  .c-ring{width:34px;height:34px;margin:-17px 0 0 -17px;border:1px solid rgba(214,188,138,.75);display:grid;place-items:center;transform:translate3d(var(--rx2,-100px),var(--ry2,-100px),0) scale(var(--s,1));transition:border-color .25s,background .25s;background:rgba(214,188,138,0)}
  .c-ring svg{width:12px;height:12px;color:var(--accent);opacity:0;transform:scale(.5);transition:opacity .2s,transform .25s var(--ease)}
  .c-ring i{position:absolute;width:14px;height:1px;background:var(--accent);opacity:0;transition:opacity .2s}
  .c-ring i::before,.c-ring i::after{content:"";position:absolute;top:-3px;width:6px;height:6px;border:solid var(--accent);border-width:1px 0 0 1px}
  .c-ring i::before{left:-1px;transform:rotate(-45deg)}.c-ring i::after{right:-1px;transform:rotate(135deg)}
  html.cur-link .c-ring{--s:1.7;background:rgba(214,188,138,.1);border-color:rgba(214,188,138,.4)}
  html.cur-link .c-dot{opacity:0}
  html.cur-play .c-ring{--s:2.2;background:rgba(11,23,25,.45);border-color:rgba(214,188,138,.55)}
  html.cur-play .c-ring svg{opacity:1;transform:scale(1)}
  html.cur-play .c-dot{opacity:0}
  html.cur-drag .c-ring{--s:1.9;background:rgba(11,23,25,.45)}
  html.cur-drag .c-ring i{opacity:1}
  html.cur-drag .c-dot{opacity:0}
  html.cur-off .cursor{opacity:0}
}

/* ============ CART + UPLIFT (12 Oct 2026) ============ */
/* add-to-cart on the cards and the à-la-carte lines */
.pack .add{margin-top:auto;padding-top:0;justify-content:center;gap:.55rem}   /* sits at the bottom of every card, whatever the list length */
.pack ul{margin-bottom:1.3rem}
.pack .add + .val{margin-top:1.1rem}
.pack .add svg{width:1.05em;height:1.05em}
.pack .add.ok{background:var(--verdigris);border-color:var(--verdigris)}
.pack.pop .add{box-shadow:0 12px 30px rgba(214,188,138,.2)}
.add-sm{flex:none;width:40px;height:40px;margin-inline-start:.6rem;border-radius:50%;border:1px solid rgba(214,188,138,.4);background:transparent;color:var(--accent);display:inline-grid;place-items:center;cursor:pointer;transition:background .2s,transform .2s var(--ease),border-color .2s}
.add-sm svg{width:1.05rem;height:1.05rem}
.add-sm:hover{background:rgba(214,188,138,.12);border-color:var(--accent);transform:translateY(-1px)}
.add-sm.ok{background:var(--verdigris);border-color:var(--verdigris);color:var(--ink)}
.monthly li{grid-template-columns:10.5rem 1fr auto auto}
@media (max-width:560px){.monthly li{grid-template-columns:1fr auto auto}}
.carte-hint{display:flex;gap:.8rem;align-items:flex-start;max-width:52rem;margin-top:clamp(1.6rem,3vw,2.4rem);color:var(--text-2);font-size:var(--t-small)}
.carte-hint svg{flex:none;width:1.3rem;height:1.3rem;color:var(--accent);margin-top:.15rem}
.cart-btn{position:relative;gap:.5rem}
.cart-btn svg{width:1.05em;height:1.05em}
.cart-btn b{position:absolute;top:-6px;inset-inline-end:-6px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:var(--text);color:var(--ink);font:600 .72rem/20px var(--f-text);text-align:center}
.cart-btn.bump b{animation:bump .45s var(--ease)}
@keyframes bump{40%{transform:scale(1.35)}}

/* the drawer */
.cart-veil{position:fixed;inset:0;z-index:90;background:rgba(5,10,12,.55);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);opacity:0;transition:opacity .35s}
.cart-veil.on{opacity:1}
.cart{position:fixed;top:0;bottom:0;inset-inline-end:0;z-index:95;width:min(100%,30rem);background:rgba(11,23,25,.94);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-inline-start:1px solid rgba(214,188,138,.35);box-shadow:-30px 0 80px rgba(0,0,0,.5);display:grid;grid-template-rows:auto minmax(0,1fr);transform:translate3d(100%,0,0);transition:transform .5s cubic-bezier(.7,0,.2,1)}
html[dir="rtl"] .cart{transform:translate3d(-100%,0,0)}
.cart.on,html[dir="rtl"] .cart.on{transform:none}
html.cart-open{overflow:hidden}
.cart-head{padding:1.4rem 1.6rem 1rem;border-bottom:1px solid rgba(214,188,138,.22);position:relative}
.cart-head h2{font:italic 400 clamp(1.7rem,2.4vw,2.1rem)/1.1 var(--f-display)}
.cart-close{position:absolute;top:1.1rem;inset-inline-end:1.2rem;width:44px;height:44px;border-radius:50%;border:1px solid rgba(214,188,138,.35);background:transparent;color:var(--text);display:grid;place-items:center;cursor:pointer}
.cart-close svg{width:1.1rem;height:1.1rem}
.cart-close:hover{border-color:var(--accent);color:var(--accent)}
.cart-body{overflow:auto;padding:1.2rem 1.6rem calc(2rem + env(safe-area-inset-bottom,0px));display:grid;gap:1.2rem;align-content:start;overscroll-behavior:contain}
.cart-empty{color:var(--text-2)}
.cart-lines{display:grid;gap:.1rem}
.cart-lines li{display:grid;grid-template-columns:1fr auto;gap:.3rem .8rem;align-items:center;padding:.75rem 0;border-bottom:1px solid var(--line)}
/* the secondary voice of the cards and the cart is the italic serif, not small grey sans (user: "fonts look cheap") */
.cart-lines .nm{font:italic 400 1.3rem/1.1 var(--f-display);letter-spacing:0;color:var(--text)}
.cart-lines .sub{grid-column:1;color:var(--text-2);font:400 var(--t-fine)/1.45 var(--f-text);max-width:19rem}
.cart-lines .pr{font:400 1.1rem var(--f-text)}
.pack .alt{font:italic 400 1.05rem/1.35 var(--f-display);letter-spacing:0;color:rgba(243,239,229,.78)}
.pack .for{font:italic 400 1.02rem/1.35 var(--f-display);color:var(--text-2)}
.pack .val{font:400 var(--t-fine) var(--f-text);color:var(--text-2)}
.cart-lines .pr{grid-column:2;grid-row:1;font-variant-numeric:tabular-nums lining-nums;color:var(--text)}
.cart-lines .ctl{grid-column:2;grid-row:2;display:flex;align-items:center;gap:.25rem;justify-self:end}
.cart-lines .ctl button{width:30px;height:30px;border-radius:50%;border:1px solid rgba(214,188,138,.35);background:transparent;color:var(--text);font:400 1rem var(--f-text);cursor:pointer;display:grid;place-items:center}
.cart-lines .ctl button:hover{border-color:var(--accent);color:var(--accent)}
.cart-lines .ctl b{min-width:1.4rem;text-align:center;font-weight:500}
.cart-lines .rm{background:none;border:0;color:var(--text-2);font-size:var(--t-fine);cursor:pointer;padding:0;text-decoration:underline;text-underline-offset:3px}
.cart-lines .rm:hover{color:var(--accent)}
.cart-ticket{padding:1.2rem 1.3rem 1.1rem}
.cart-ticket dl{display:grid;gap:.55rem}
.cart-ticket dl div{display:flex;justify-content:space-between;gap:1rem;align-items:baseline}
.cart-ticket dt{font-size:var(--t-small);color:var(--text-2)}
.cart-ticket dd{font:400 1.0625rem var(--f-text);font-variant-numeric:tabular-nums lining-nums;white-space:nowrap;color:var(--text)}
.cart-ticket dd .cur{font-size:.78em;vertical-align:.12em;margin-inline:.08em .05em;color:var(--accent)}   /* a hair of space on both sides: FR puts the sign after the figure */
.cart-ticket .strong{margin-top:.5rem;padding-top:.8rem;border-top:1px solid rgba(214,188,138,.3);align-items:end}
.cart-ticket .strong dt{font-size:var(--t-body);color:var(--text);font-weight:500}
.cart-ticket .strong dd{font:300 2.2rem/1 var(--f-text);letter-spacing:-.015em;color:var(--accent)}
.cart-ticket .strong dd .cur{font-size:.5em;vertical-align:.75em}
.cart-ticket .fine{margin-top:.8rem;color:var(--text-2)}
.cart-lines .ctl button.rm{width:auto;height:auto;border:0;border-radius:0;padding:.2rem 0;font-size:var(--t-fine);color:var(--text-2);text-decoration:underline;text-underline-offset:3px}
.cart-form{display:grid;gap:1.1rem}
.cart-form fieldset{display:grid;gap:.7rem}
.cart-form legend{display:flex;align-items:center;gap:.6rem;font:600 var(--t-label) var(--f-text);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:.4rem}
.cart-form legend .n{width:22px;height:22px;border-radius:50%;border:1px solid var(--accent);display:grid;place-items:center;font-size:.72rem;letter-spacing:0}
.cart-form .chips span{min-height:40px;padding:.35rem .9rem;font-size:var(--t-fine)}
.cart-form .other{display:block;max-width:none}
.cart-form .other input,.cart-form .f input{width:100%;min-height:46px;padding:.5rem .9rem;border:1px solid rgba(214,188,138,.32);border-radius:6px;background:rgba(11,23,25,.5);color:var(--text);font:400 var(--t-small) var(--f-text)}
.cart-form .fields{display:grid;gap:.7rem;grid-template-columns:1fr 1fr}
.cart-form .f{gap:.3rem}
.cart-form .btn-pay{width:100%}
.cart-form .btn-ghost{width:100%;justify-content:center}
@media (max-width:420px){.cart-form .fields{grid-template-columns:1fr}}

/* ---- uplift: method, questions, studio, final, footer ---- */
.method{position:relative}
.method h2{max-width:22ch}
.days li{padding:1.9rem 0 1.4rem}
.days h3{font:italic 400 var(--t-item) var(--f-display);letter-spacing:0}
.when{font-weight:600;letter-spacing:.16em}
@media (min-width:860px){.days li{padding-inline-end:1.5rem}}
.faq{position:relative}
.faq-left h2{max-width:14ch}
.guar{gap:.8rem;margin-top:.4rem}
.guar li{padding:.8rem 1rem .8rem 2.4rem;border:1px solid rgba(214,188,138,.2);border-radius:6px;background:rgba(243,239,229,.025);color:var(--text)}
.guar li::before{inset-inline-start:1rem;top:1.25em}
.faq-list details{border-top-color:rgba(214,188,138,.18)}
.faq-list details:last-child{border-bottom-color:rgba(214,188,138,.18)}
.faq-list summary{font:400 var(--t-lead) var(--f-text);padding:1.25rem 0;transition:color .2s}
.faq-list summary:hover{color:var(--accent)}
.faq-list details[open] summary{color:var(--accent)}
.studio{background:linear-gradient(180deg,var(--panel),#0E2226);position:relative;isolation:isolate}
.studio::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(50% 60% at 85% 30%,rgba(214,188,138,.1),transparent 70%)}
.studio-txt p:first-child{font:italic 400 clamp(1.3rem,2vw,1.7rem)/1.35 var(--f-display);color:var(--text)}
.studio-txt .zone{border-top-color:rgba(214,188,138,.25);color:var(--text-2)}
.final{padding-block:clamp(5rem,10vw,8rem)}
.final-in{width:100%;max-width:76rem;margin-inline:auto;display:grid;gap:clamp(2.5rem,5vw,4rem);justify-items:center}
.sig h2{color:var(--text)}
.mock-card{position:relative;width:100%;display:grid;gap:clamp(1.6rem,3vw,2.6rem);padding:clamp(1.6rem,3.2vw,2.6rem);border:1px solid rgba(214,188,138,.4);border-radius:6px;background:rgba(11,23,25,.7);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 1px 0 rgba(243,239,229,.06) inset,0 30px 80px rgba(0,0,0,.5);text-align:start}
.mock-card::before{content:"";position:absolute;inset:7px;border:1px solid rgba(214,188,138,.22);border-radius:3px;pointer-events:none}
@media (min-width:900px){.mock-card{grid-template-columns:.9fr 1.1fr;align-items:start}}
.mock-txt{display:grid;gap:.9rem;align-content:start}
.mock-txt .t-kicker{font:600 var(--t-label) var(--f-text);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.mock-txt h3{font:italic 400 clamp(1.6rem,2.6vw,2.2rem)/1.1 var(--f-display);letter-spacing:0}
.mock-txt p{color:var(--text-2)}
.mock-steps{display:grid;gap:.55rem;margin-top:.4rem;counter-reset:s}
.mock-steps li{position:relative;padding-inline-start:2.2rem;color:var(--text);counter-increment:s}
.mock-steps li::before{content:counter(s);position:absolute;inset-inline-start:0;top:.05em;width:1.5rem;height:1.5rem;border-radius:50%;border:1px solid var(--accent);color:var(--accent);font-size:.75rem;display:grid;place-items:center}
.final .callback{max-width:none;grid-template-columns:1fr 1fr;gap:.9rem}
.final .callback button{justify-self:stretch;min-width:0}
.final .f input{background:rgba(11,23,25,.55);border-color:rgba(214,188,138,.32);border-radius:6px}
@media (max-width:560px){.final .callback{grid-template-columns:1fr}}
.foot{background:#0A1416;border-top:1px solid rgba(214,188,138,.2)}
.foot-in{display:grid;gap:2.2rem 3rem;padding-block:clamp(3rem,6vw,4.5rem) calc(2rem + env(safe-area-inset-bottom,0px))}
@media (min-width:860px){.foot-in{grid-template-columns:1.2fr .7fr 1.1fr}.foot-base{grid-column:1 / -1}}
.foot-brand{display:grid;gap:.7rem;align-content:start}
.foot-tag{font:italic 400 1.15rem var(--f-display);color:var(--text)}
.foot .t-kicker{font:600 var(--t-label) var(--f-text);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:.6rem}
.foot-nav{display:grid;gap:.1rem;align-content:start}
.foot-nav a{min-height:36px;color:var(--text-2)}
.foot-nav a:hover{color:var(--accent)}
.foot-contact{display:grid;gap:.6rem;align-content:start}
.foot-mail{font:400 1.15rem var(--f-text);color:var(--text) !important}
.foot-mail:hover{color:var(--accent) !important}
.foot-base{display:grid;gap:1rem;padding-top:1.6rem;border-top:1px solid rgba(214,188,138,.14)}
.foot-base .legal a{min-height:36px}

/* ---- on site: the free 30-minute review, with the booking button (Google Calendar link set in app.js) ---- */
.visit{position:relative;margin-top:clamp(2.2rem,4vw,3.4rem);display:grid;gap:1.4rem;align-items:center;padding:clamp(1.5rem,3vw,2.3rem);border:1px solid rgba(214,188,138,.4);border-radius:6px;background:linear-gradient(135deg,rgba(214,188,138,.12),rgba(214,188,138,.03) 50%,rgba(11,23,25,.3))}
.visit::before{content:"";position:absolute;inset:7px;border:1px solid rgba(214,188,138,.2);border-radius:3px;pointer-events:none}
@media (min-width:860px){.visit{grid-template-columns:1fr auto;gap:2.5rem}}
.visit-txt{display:grid;gap:.6rem}
.visit .t-kicker{font:600 var(--t-label) var(--f-text);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.visit h3{font:italic 400 clamp(1.5rem,2.4vw,2rem)/1.1 var(--f-display);letter-spacing:0}
.visit p:not(.t-kicker){color:var(--text-2);max-width:40rem}
.visit .btn{gap:.6rem;justify-self:start}
.visit .btn svg,.callback .btn svg,.cart-form .btn svg,.foot-book svg{width:1.1em;height:1.1em}
.callback a.btn-ghost{grid-column:1 / -1;justify-self:center;gap:.6rem}
.foot-book{display:inline-flex;align-items:center;gap:.55rem;color:var(--text) !important;min-height:40px}
.foot-book:hover{color:var(--accent) !important}
.monthly li em.free{color:var(--accent)}

/* ============ THE PUSH-IN (FIRST Naan, street → dining room), pinned, scrubbed by the scroll ============ */
.push{padding:clamp(3rem,7vw,6rem) var(--gutter) 0;max-width:84rem;margin-inline:auto}
.push-pin{display:grid;gap:clamp(1.5rem,4vw,3rem);align-items:center}
.push-txt{display:grid;gap:1rem}
.push-txt p:not(.credit){color:var(--text-2);max-width:30rem}
.push-txt .credit{font:600 var(--t-label) var(--f-text);letter-spacing:.16em;text-transform:uppercase;color:var(--text-2)}
.push-steps{display:flex;gap:1.6rem;margin-top:.6rem;font:600 var(--t-label) var(--f-text);letter-spacing:.16em;text-transform:uppercase;color:var(--text-2)}
.push-steps li{position:relative;padding-top:.7rem;opacity:.45;transition:opacity .4s,color .4s}
.push-steps li::before{content:"";position:absolute;top:0;left:0;width:2.4rem;height:1px;background:var(--line-strong);transition:background .4s,width .4s var(--ease)}
.push-steps li.on{opacity:1;color:var(--accent)}
.push-steps li.on::before{background:var(--accent);width:3.4rem}
.phone{position:relative;justify-self:center;aspect-ratio:9/16;width:min(100%,22rem);border-radius:34px;padding:9px;background:#0A1416;border:1px solid rgba(214,188,138,.45);box-shadow:0 1px 0 rgba(243,239,229,.08) inset,0 40px 90px rgba(0,0,0,.55)}
.phone::after{content:"";position:absolute;top:9px;left:50%;transform:translateX(-50%);width:34%;height:16px;border-radius:0 0 12px 12px;background:#0A1416}
.phone video{display:block;width:100%;height:100%;object-fit:cover;border-radius:26px;background:#0E1D20}
@media (min-width:860px){.push-pin{grid-template-columns:.9fr 1.1fr}}
html.pin .push{max-width:none;padding:0;display:block;height:220vh}
html.pin .push-pin{position:sticky;top:0;height:100vh;padding:calc(var(--nav-h) + 2.6rem) var(--gutter) 2.2rem;max-width:84rem;margin-inline:auto;grid-template-columns:.9fr 1.1fr;align-items:center}
html.pin .phone{height:min(78vh,52rem);width:auto;max-width:100%}

/* ============ TYPE A adjustments: Cormorant runs small and light for its size, so names and italic lines get weight 500–600 and a touch more size ============ */
.pack h3,.monthly h3,.cart-head h2,.mock-txt h3,.visit h3,.carte .sub-h,.sig h2,.foot-tag,.studio-txt p:first-child,.days h3{font-weight:600}
.pack h3{font-size:2.2rem}
.cart-lines .nm{font-weight:600;font-size:1.4rem}
.pack .alt,.pack .for,.intro-tag,.cart-head h2{font-weight:500}
.pack .alt{font-size:1.25rem}.pack .for{font-size:1.2rem}
.pack .amt{font-weight:300}
.word{font-weight:500}
.btn{font-weight:500}
.kicker,.t-kicker,.when,.badge,.lab,.price,.playhead a,.push-steps,.push-txt .credit,.tile .tc{font-weight:600}

/* price lists as <details>: the title is the summary; folded on phones, open and inert on wide screens */
details.monthly summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:1rem}
details.monthly summary::-webkit-details-marker{display:none}
details.monthly summary::after{content:"";width:.55rem;height:.55rem;border:solid var(--accent);border-width:0 1.5px 1.5px 0;transform:rotate(45deg);transition:transform .3s var(--ease);margin-inline-end:.3rem}
details.monthly[open] summary::after{transform:rotate(-135deg)}
@media (min-width:720px){details.monthly summary{pointer-events:none}details.monthly summary::after{display:none}}

/* the order ticket: figures on the left, payment on the right (user: the old row looked cheap) */
.order fieldset .other{display:block;margin-top:.8rem;max-width:22rem}
.order fieldset .other input{width:100%;min-height:46px;padding:.5rem .9rem;border:1px solid rgba(214,188,138,.32);border-radius:6px;background:rgba(11,23,25,.5);color:var(--text);font:400 var(--t-small) var(--f-text)}
.order fieldset .other input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.recap{border-top:0;padding-top:.4rem;display:grid;gap:1.2rem;grid-template-columns:1fr;align-items:start;justify-items:stretch}
@media (min-width:860px){.recap{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:1.6rem}}
.ticket{position:relative;padding:1.5rem 1.6rem 1.4rem;border:1px solid rgba(214,188,138,.38);border-radius:6px;background:linear-gradient(180deg,rgba(214,188,138,.1),rgba(214,188,138,.02) 60%,rgba(11,23,25,.3))}
.ticket::before{content:"";position:absolute;inset:6px;border:1px solid rgba(214,188,138,.2);border-radius:3px;pointer-events:none}
.ticket .t-kicker{font:600 var(--t-label) var(--f-text);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:1rem}
.recap dl{max-width:none;gap:.55rem}
.recap dl div{padding-block:.1rem}
.recap dt{font-size:var(--t-small);color:var(--text-2)}
.recap dd{font:400 1.0625rem var(--f-text);font-variant-numeric:tabular-nums lining-nums;color:var(--text)}
.recap .strong{margin-top:.6rem;padding-top:.9rem;border-top:1px solid rgba(214,188,138,.3);align-items:end}
.recap .strong dt{font-size:var(--t-body);color:var(--text);font-weight:500}
.recap .strong dd{font:300 clamp(2.2rem,3.2vw,2.8rem)/1 var(--f-text);letter-spacing:-.015em;color:var(--accent)}
.recap dd .cur{font-size:.78em;vertical-align:.12em;margin-inline-end:.05em;color:var(--accent)}
.recap .strong dd .cur{font-size:.5em;font-weight:400;vertical-align:.75em;margin-inline-end:.04em}
.ticket .fine{margin-top:.8rem}
.pay{display:grid;gap:.9rem;align-content:start;padding-top:.4rem}
.pay .pro{display:flex;gap:.6rem;align-items:center;font-size:var(--t-small);color:var(--text-2)}
.btn-pay{justify-content:center;min-height:56px;font-size:var(--t-body);gap:.6rem;box-shadow:0 14px 34px rgba(214,188,138,.18),0 1px 0 rgba(255,255,255,.25) inset}
.btn-pay svg{width:1.1em;height:1.1em}
.pay .fine{color:var(--text-2)}

/* planes on phones (user's choice): the lantern and the lilies only, still, no pointer lean */
@media (max-width:719px){
  html:not(.pin) .planes{display:block;position:absolute;inset:0 0 auto 0;height:100dvh;--e:0;--lr:1;--px:0;--py:0}
  html:not(.pin) .plane-foliage,html:not(.pin) .plane-lamp{display:none}
  html:not(.pin) .plane-lantern{width:min(34vw,150px);top:-3%;right:-6%;filter:none}
  html:not(.pin) .plane-lilies{width:min(54vw,250px);bottom:5%;right:-8%;filter:none;opacity:.95}   /* above the phone action bar */
}

/* the playhead */
/* the playhead sits a clear step under the menu bar, on its own dark band, so it reads over any section (user, 12 Oct) */
.playhead{position:fixed;z-index:49;top:calc(var(--nav-h) + 14px + env(safe-area-inset-top,0px));left:var(--gutter);right:var(--gutter);height:30px;display:none;direction:ltr}
/* a solid band from the menu down to 18 px under the labels, then a short fade: content scrolls under the band, never through the labels */
.playhead::before{content:"";position:absolute;z-index:-1;top:-14px;bottom:-30px;left:calc(-1 * var(--gutter));right:calc(-1 * var(--gutter));background:linear-gradient(180deg,rgba(11,23,25,.96) 0%,rgba(11,23,25,.96) 72%,rgba(11,23,25,0) 100%);pointer-events:none}
html{scroll-padding-top:calc(var(--nav-h) + 84px)}
.cta-row .btn svg{width:1.1em;height:1.1em}
.ph-line{position:absolute;left:0;right:0;top:0;height:1px;background:var(--line-strong);opacity:.7}
.ph-line::after{content:"";position:absolute;inset:0;background:var(--accent);transform-origin:left;transform:scaleX(var(--pp,0))}
.ph-mark{position:absolute;top:-5px;left:calc(var(--pp,0) * 100%);width:11px;height:11px;margin-left:-3px;color:var(--accent);filter:drop-shadow(0 1px 3px rgba(0,0,0,.6))}
.ph-mark svg{display:block;width:100%;height:100%;overflow:visible}
.playhead a{position:absolute;top:0;left:calc(var(--at,0) * 100%);padding:10px 6px 4px 0;font:600 .72rem var(--f-text);letter-spacing:.14em;text-transform:uppercase;color:var(--text-2);text-decoration:none;white-space:nowrap;opacity:0;transition:opacity .25s,color .25s}
.playhead a::before{content:"";position:absolute;left:0;top:0;width:1px;height:7px;background:var(--line-strong);transition:background .25s,height .25s}
.playhead a.past::before{background:var(--accent)}
.playhead a.now{opacity:1;color:var(--accent)}
.playhead a.now::before{height:9px;background:var(--accent)}
.playhead:hover a,.playhead a:focus-visible{opacity:1}
.playhead:hover a:not(.now){color:var(--text-2)}
.playhead a:hover{color:var(--text) !important}
.playhead:hover a{transform:translateY(calc(var(--row,0) * 15px))}   /* neighbours that would collide drop to a second row on hover */
@media (min-width:860px){.playhead{display:block}}

/* the peak: on wide screens the section pins and the scroll wipes the phone photo away */
html.pin .proof{max-width:none;padding:0;display:block;height:260vh}
html.pin .proof-pin{position:sticky;top:0;height:100vh;display:grid;grid-template-rows:auto minmax(0,1fr);gap:clamp(1rem,2.4vh,1.8rem);padding:calc(var(--nav-h) + 2.6rem) var(--gutter) 2.2rem;max-width:96rem;margin-inline:auto}
html.pin .proof-txt{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:end;column-gap:clamp(2rem,6vw,6rem)}
html.pin .proof-txt h2{grid-row:1 / 3}
html.pin .proof-txt p{max-width:34rem}
html.pin .proof-pin .compare{height:100%;width:auto;max-width:100%;aspect-ratio:16/9;justify-self:center;border-radius:18px;box-shadow:0 40px 90px rgba(0,0,0,.5)}
.proof-pin{display:contents}
html.pin .proof-pin{display:grid}

/* the method draws itself */
@media (min-width:860px){
  .days{position:relative}
  .days::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--accent);transform-origin:left;transform:scaleX(var(--mt,1));z-index:1}
  .days li::before{top:-4px;width:7px;height:7px;border-radius:50%;background:var(--canvas);border:1px solid var(--line-strong);transition:background .4s,border-color .4s,transform .4s var(--ease)}
  .days li.on::before{background:var(--accent);border-color:var(--accent);transform:scale(1.25)}
  html.anim .days li > *{transition:opacity .6s var(--ease),transform .6s var(--ease)}
  html.anim .days li:not(.on) > *{opacity:.32;transform:translateY(6px)}
}

/* the studio statement lights one paragraph at a time */
html.anim .studio-txt p{transition:opacity .6s var(--ease),color .6s}
html.anim .studio-txt p:not(.lit){opacity:.34}
html.anim .studio-txt p.lit:not(.zone){color:var(--text)}

/* the ending: the shopfront from the opening, now lit */
.final{position:relative;isolation:isolate;overflow:hidden;min-height:100vh;align-content:center}
.final-bg{position:absolute;inset:0;z-index:-1;background:url("hero-ending.jpg") center 38%/cover no-repeat;opacity:.9;transform:scale(calc(1.1 - var(--fp,1) * .1))}
html.anim .final-bg{opacity:calc(var(--fp,0) * .95)}
.final-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--canvas) 0%,rgba(11,23,25,0) 26%),radial-gradient(ellipse 62% 74% at 50% 54%,rgba(5,10,12,.9) 0%,rgba(5,10,12,.72) 52%,rgba(5,10,12,.3) 100%)}
.final .f input{background:rgba(17,38,42,.86)}

/* reveal variants: scale for the service cells, fade only for prices */
html.anim [data-reveal][data-reveal="scale"].wait{transform:scale(.96)}
html.anim [data-reveal][data-reveal="fade"].wait{transform:none}

/* small interactions */
.btn{transition:background .25s var(--ease),transform .25s var(--ease),border-color .25s var(--ease),box-shadow .25s var(--ease)}
.btn:not(.btn-ghost):hover{transform:translateY(-1px);box-shadow:0 10px 26px rgba(214,188,138,.18)}
.btn:active{transform:translateY(0) scale(.975)}
.chips span{transition:background .2s,color .2s,border-color .2s,transform .15s var(--ease)}
.chips label:active span{transform:scale(.96)}
details p{overflow:hidden}
.recap dd{transition:color .3s}
.recap dd.roll{color:var(--accent)}

/* ============ ARABIC: right to left ============ */
html[dir="rtl"] .wm,html[dir="rtl"] .compare,html[dir="rtl"] .browser,html[dir="rtl"] .nfc-card,html[dir="rtl"] .film-time,html[dir="rtl"] #boards-count{direction:ltr}
html[dir="rtl"] .wm{unicode-bidi:isolate}
html[dir="rtl"] .film .poster,html[dir="rtl"] .film video{transform:scaleX(-1)}   /* the film has no lettering: mirrored, the quiet side sits under the text */
html[dir="rtl"] .band::before{background:radial-gradient(ellipse 74% 62% at 68% 50%,rgba(5,10,12,.66) 0%,rgba(5,10,12,.44) 46%,rgba(5,10,12,0) 76%)}
html[dir="rtl"] .chap::before{background:radial-gradient(ellipse 80% 70% at 50% 55%,rgba(5,10,12,.6) 0%,rgba(5,10,12,.38) 48%,rgba(5,10,12,0) 76%)}
html[dir="rtl"] .duo[data-v="sale"] .switch .pill{transform:translateX(-100%)}
html[dir="rtl"] #boards-prev svg{transform:none}
html[dir="rtl"] #boards-next svg{transform:scaleX(-1)}
html[dir="rtl"] .lang select{padding:0 .95rem 0 2rem;background-position:left .85rem center}
html[dir="rtl"] input[type="tel"],html[dir="rtl"] input[type="url"]{direction:ltr;text-align:right}
/* Arabic script: no tracking (it breaks the joins), no italics (the face has none), more leading */
html[lang="ar"] body{line-height:1.85;font-size:1.125rem}
html[lang="ar"] .kicker,html[lang="ar"] .price,html[lang="ar"] .tile .tc,html[lang="ar"] .when,html[lang="ar"] .order legend,html[lang="ar"] .clients p,html[lang="ar"] .clients span,html[lang="ar"] .pack .val,html[lang="ar"] .badge,html[lang="ar"] .lab,html[lang="ar"] .ai-note,html[lang="ar"] .soon,html[lang="ar"] .proof-txt .credit,html[lang="ar"] .nfc-card small,html[lang="ar"] .chap-num{font-size:.92rem}
html[lang="ar"] *{letter-spacing:0 !important}
html[lang="ar"] .wm{letter-spacing:.34em !important}
html[lang="ar"] h1,html[lang="ar"] h2{line-height:1.35}
html[lang="ar"] h1 i,html[lang="ar"] h2 i,html[lang="ar"] .monthly li em{font-style:normal}
html[lang="ar"] h1 i,html[lang="ar"] h2 i{color:var(--accent)}
html[lang="ar"] .word{font-weight:700;line-height:1.3}
html[lang="ar"] .pack h3,html[lang="ar"] .pack .amt{line-height:1.3}

/* reveals: only armed by app.js for elements still below the fold */
html.anim [data-reveal].wait{opacity:0;transform:translate3d(0,22px,0)}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important}
}