/* =========================================================================
   TUHFA — تُحفة   |   Design system + sections
   Hand-made editorial. Cream paper with dark cozy chapters.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic:wght@300;400;500;600;700&family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400;1,9..144,500&display=swap');

/* ---------- tokens ---------- */
:root{
  --ink:        oklch(0.243 0.018 246);
  --ink-soft:   oklch(0.305 0.020 246);
  --ink-deep:   oklch(0.195 0.018 248);
  --cream:      oklch(0.967 0.006 85);
  --cream-2:    oklch(0.945 0.008 80);
  --paper-line: oklch(0.90 0.010 78);

  --slate:      oklch(0.470 0.052 246);
  --slate-deep: oklch(0.39 0.050 246);
  --slate-tint: oklch(0.94 0.018 246);

  --clay:       oklch(0.470 0.058 68);
  --clay-deep:  oklch(0.40 0.052 64);
  --clay-tint:  oklch(0.945 0.020 72);

  --terra:      oklch(0.595 0.105 55);
  --terra-deep: oklch(0.52 0.105 50);

  --neon:       oklch(0.74 0.135 238);

  --text:       var(--ink);
  --text-muted: oklch(0.46 0.012 246);
  --on-dark:    oklch(0.96 0.006 85);
  --on-dark-mut:oklch(0.745 0.012 246);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.33, 0, 0.2, 1);

  --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-xl: 32px;
  --shadow-soft: 0 1px 0 var(--paper-line);
  --shadow-lift: 0 26px 60px -30px oklch(0.40 0.05 60 / .34);
  --shadow-dark: 0 30px 70px -32px oklch(0.10 0.02 246 / .7);

  --container: 1200px;
  --gutter: clamp(1.1rem, 4vw, 3rem);

  --nav-h: 68px;

  --fz--1: clamp(.8rem,.78rem + .1vw,.875rem);
  --fz-0:  clamp(1rem,.96rem + .2vw,1.0625rem);
  --fz-1:  clamp(1.125rem,1.04rem + .42vw,1.28rem);
  --fz-2:  clamp(1.35rem,1.16rem + .9vw,1.7rem);
  --fz-3:  clamp(1.9rem,1.4rem + 2.2vw,3rem);
  --fz-4:  clamp(2.6rem,1.7rem + 4.2vw,4.6rem);
  --fz-disp: clamp(3.2rem,1.9rem + 5.5vw,6.8rem);
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
[hidden]{ display:none !important; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  font-family:'Noto Kufi Arabic', system-ui, sans-serif;
  background:var(--cream);
  color:var(--text);
  font-size:var(--fz-0);
  line-height:1.75;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,video{ display:block; max-width:100%; height:auto; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ background:none; border:none; cursor:pointer; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
:focus-visible{ outline:2.5px solid var(--terra); outline-offset:3px; border-radius:4px; }
::selection{ background:oklch(0.595 0.105 55 / .22); }

/* scrollbar */
::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-thumb{ background:oklch(0.47 0.05 68 / .4); border-radius:99px; border:3px solid var(--cream); }
::-webkit-scrollbar-track{ background:var(--cream); }

/* ---------- language / direction ---------- */
html[lang="en"] body{ font-family:'Fraunces', ui-serif, Georgia, serif; }
html[lang="en"] .ui, html[lang="en"] input, html[lang="en"] select, html[lang="en"] .btn,
html[lang="en"] .chip, html[lang="en"] .nav-link{
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
/* text is swapped in JS via data-ar/data-en; main cross-fades on toggle */
main{ opacity:1; }
/* Latin tracking only in English (never letter-space Arabic) */
html[lang="ar"] .eyebrow,
html[lang="ar"] .btn,
html[lang="ar"] .chip,
html[lang="ar"] .nav-link{ letter-spacing: normal; }
/* keep Latin numerals/identifiers isolated */
bdi{ unicode-bidi: isolate; }

/* ---------- layout primitives ---------- */
.wrap{ width:min(100% - 2*var(--gutter), var(--container)); margin-inline:auto; }
.wrap-narrow{ width:min(100% - 2*var(--gutter), 760px); margin-inline:auto; }
.section{ padding-block: clamp(4rem, 8vw, 8rem); position:relative; }
.section-sm{ padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.dark-chapter{ background:var(--ink); color:var(--on-dark); }
.dark-chapter .muted{ color:var(--on-dark-mut); }

.eyebrow{
  font-size:var(--fz--1); font-weight:600; letter-spacing:.02em;
  color:var(--clay); display:inline-flex; align-items:center; gap:.6rem;
  text-transform:none;
}
html[lang="en"] .eyebrow{ letter-spacing:.16em; text-transform:uppercase; }
.dark-chapter .eyebrow{ color:oklch(0.78 0.07 70); }
.eyebrow::before{ content:""; width:26px; height:2px; background:currentColor; opacity:.7; border-radius:2px; }

.h-display{ font-size:var(--fz-disp); line-height:1.02; font-weight:700; letter-spacing:-0.01em; }
html[lang="ar"] .h-display{ letter-spacing:0; line-height:1.12; }
.h2{ font-size:var(--fz-3); line-height:1.12; font-weight:700; letter-spacing:-0.01em; }
html[lang="ar"] .h2{ letter-spacing:0; line-height:1.3; }
.h3{ font-size:var(--fz-2); line-height:1.2; font-weight:700; }
html[lang="ar"] .h3{ line-height:1.45; }
.lead{ font-size:var(--fz-1); line-height:1.75; color:var(--text-muted); max-width:62ch; }
.dark-chapter .lead{ color:var(--on-dark-mut); }
.muted{ color:var(--text-muted); }
.measure{ max-width:64ch; }
html[lang="en"] .serif-italic{ font-style:italic; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:.92rem 1.5rem; border-radius:var(--r-md);
  font-size:var(--fz-0); font-weight:600; line-height:1;
  transition: transform .2s var(--ease), background-color .2s var(--ease), color .2s var(--ease), box-shadow .25s var(--ease);
  will-change: transform; cursor:pointer; white-space:nowrap;
}
.btn svg{ width:1.1em; height:1.1em; flex:none; }
.btn-primary{ background:var(--terra); color:oklch(0.99 0.005 85); box-shadow: var(--shadow-lift); }
.btn-primary:hover{ background:var(--terra-deep); transform:translateY(-2px); }
.btn-ghost{ background:transparent; color:var(--ink); box-shadow: inset 0 0 0 1.5px oklch(0.243 0.018 246 / .28); }
.btn-ghost:hover{ box-shadow: inset 0 0 0 1.5px var(--ink); transform:translateY(-2px); }
.dark-chapter .btn-ghost, .btn-ghost.on-dark{ color:var(--on-dark); box-shadow: inset 0 0 0 1.5px oklch(0.96 0.006 85 / .35); }
.dark-chapter .btn-ghost:hover, .btn-ghost.on-dark:hover{ box-shadow: inset 0 0 0 1.5px var(--on-dark); }
.btn-wa{ background:#1faf54; color:#fff; box-shadow: var(--shadow-lift); }
.btn-wa:hover{ background:#19994a; transform:translateY(-2px); }
.btn-lg{ padding:1.05rem 1.9rem; font-size:var(--fz-1); }
.btn[disabled]{ opacity:.45; cursor:not-allowed; transform:none !important; box-shadow:none; }

/* ---------- chips ---------- */
.chip{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.36rem .8rem; border-radius:999px;
  font-size:var(--fz--1); font-weight:500; line-height:1;
}
.chip svg{ width:1em; height:1em; }
.chip-slate{ background:var(--slate-tint); color:var(--slate-deep); }
.chip-clay{ background:var(--clay-tint); color:var(--clay-deep); }
.dark-chapter .chip-slate{ background:oklch(0.47 0.05 246 / .28); color:oklch(0.86 0.04 246); }
.dark-chapter .chip-clay{ background:oklch(0.47 0.06 68 / .3); color:oklch(0.85 0.05 72); }

/* ---------- organic blobs ---------- */
.blob{ position:absolute; border-radius:42% 58% 63% 37% / 47% 38% 62% 53%; filter:blur(.2px); pointer-events:none; }
.blob-slate{ background:var(--slate); }
.blob-clay{ background:var(--clay); }
@keyframes morph{
  0%,100%{ border-radius:42% 58% 63% 37% / 47% 38% 62% 53%; transform:rotate(0deg) scale(1); }
  33%{ border-radius:60% 40% 38% 62% / 55% 62% 38% 45%; transform:rotate(8deg) scale(1.06); }
  66%{ border-radius:38% 62% 56% 44% / 62% 42% 58% 38%; transform:rotate(-6deg) scale(.97); }
}
.morph{ animation: morph 20s var(--ease-soft) infinite; }
.morph-slow{ animation-duration: 28s; }

/* ---------- reveal on scroll ---------- */
/* reveals are an enhancement: only hide when JS is active (no-JS shows content) */
.js .reveal{ opacity:0; transform:translateY(20px); filter:blur(6px); transition: opacity .8s var(--ease), transform .8s var(--ease), filter .8s var(--ease); }
.js .reveal.in{ opacity:1; transform:none; filter:none; }
.reveal-d1{ transition-delay:.07s; } .reveal-d2{ transition-delay:.14s; } .reveal-d3{ transition-delay:.21s; }
.reveal-d4{ transition-delay:.28s; } .reveal-d5{ transition-delay:.35s; } .reveal-d6{ transition-delay:.42s; }

/* ---------- paper grain overlay ---------- */
.grain::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1; opacity:.14;
  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='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}
/* global paper grain on the cream surface */
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:9998; opacity:.04; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
}
.skip-link{ position:absolute; inset-block-start:-60px; inset-inline-start:1rem; z-index:200; background:var(--terra); color:#fff; padding:.6rem 1rem; border-radius:0 0 10px 10px; transition:inset-block-start .2s var(--ease); }
.skip-link:focus{ inset-block-start:0; }

.visually-hidden{ position:absolute!important; width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0; }

/* =========================================================================
   NAV — floating
   ========================================================================= */
.nav{
  position:fixed; inset-block-start:0; inset-inline:0; z-index:90;
  display:flex; align-items:center; justify-content:flex-start; gap:1.7rem;
  height:var(--nav-h); padding-inline: var(--gutter);
  transition: background-color .35s var(--ease), backdrop-filter .35s var(--ease), box-shadow .35s var(--ease);
}
.nav.scrolled{ background:oklch(0.243 0.018 246 / .82); backdrop-filter: blur(14px) saturate(1.1); box-shadow: 0 1px 0 oklch(1 0 0 / .06); }
.nav-brand{ display:flex; align-items:center; gap:.7rem; }
.nav-logo{ width:40px; height:40px; border-radius:50%; background:var(--cream); padding:4px; box-shadow: 0 2px 10px oklch(0 0 0 / .18); flex:none; }
.nav-logo img{ width:100%; height:100%; object-fit:contain; }
.nav-name{ display:flex; flex-direction:column; line-height:1.05; color:var(--on-dark); }
.nav-name b{ font-size:1.12rem; font-weight:700; }
.nav-name span{ font-size:.62rem; font-weight:400; color:var(--on-dark-mut); }
html[lang="en"] .nav-name b{ font-family:'Fraunces',serif; font-weight:500; }
.nav-links{ display:flex; align-items:center; gap:1.6rem; }
.nav-link{ font-size:var(--fz--1); font-weight:500; color:oklch(0.96 0.006 85 / .72); transition:color .2s var(--ease); position:relative; }
.nav-link:hover{ color:var(--on-dark); }
.nav-link::after{ content:""; position:absolute; inset-block-end:-6px; inset-inline-start:0; width:0; height:2px; background:var(--terra); transition:width .3s var(--ease); border-radius:2px; }
.nav-link:hover::after{ width:100%; }
.nav-tools{ display:flex; align-items:center; gap:.7rem; margin-inline-start:auto; }
.lang-toggle{
  display:inline-flex; align-items:center; gap:.3rem; padding:.4rem .7rem; border-radius:999px;
  font-size:var(--fz--1); font-weight:600; color:var(--on-dark);
  box-shadow: inset 0 0 0 1.4px oklch(0.96 0.006 85 / .3); transition: box-shadow .2s var(--ease);
}
.lang-toggle:hover{ box-shadow: inset 0 0 0 1.4px oklch(0.96 0.006 85 / .65); }
.nav-cta{ padding:.6rem 1.15rem; font-size:var(--fz--1); }
.nav-burger{ display:none; width:42px; height:42px; border-radius:12px; align-items:center; justify-content:center; color:var(--on-dark); box-shadow: inset 0 0 0 1.4px oklch(0.96 0.006 85 / .3); }
.nav-burger svg{ width:22px; height:22px; }

/* mobile menu sheet */
.nav-sheet{
  position:fixed; inset:0; z-index:95; background:oklch(0.195 0.018 248 / .97); backdrop-filter:blur(8px);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.4rem;
  opacity:0; visibility:hidden; transition: opacity .4s var(--ease), visibility .4s;
}
.nav-sheet.open{ opacity:1; visibility:visible; }
.nav-sheet a{ color:var(--on-dark); font-size:1.5rem; font-weight:600; }
.nav-sheet .close{ position:absolute; inset-block-start:1.2rem; inset-inline-end:1.2rem; width:46px;height:46px; color:var(--on-dark); display:flex;align-items:center;justify-content:center; }
.nav-sheet .close svg{ width:26px;height:26px; }

@media (max-width: 880px){
  .nav-links{ display:none; }
  .nav-cta{ display:none; }
  .nav-burger{ display:flex; }
}

/* =========================================================================
   BLOB FRAMES (organic media masks) + section heads
   ========================================================================= */
.blob-1{ border-radius:64% 36% 51% 49% / 49% 41% 59% 51%; }
.blob-2{ border-radius:38% 62% 63% 37% / 55% 49% 51% 45%; }
.blob-3{ border-radius:49% 51% 38% 62% / 63% 56% 44% 37%; }

.sec-head{ max-width:60ch; margin-block-end: clamp(2rem,4vw,3.5rem); }
.sec-head .eyebrow{ margin-block-end:1rem; }
.sec-head .h2{ margin-block-end:1rem; }
.sec-head.center{ margin-inline:auto; text-align:center; }
.sec-head.center .eyebrow{ justify-content:center; }

/* =========================================================================
   1 · HERO
   ========================================================================= */
.hero{ position:relative; min-height:100svh; display:flex; align-items:center; padding-block: calc(var(--nav-h) + 2rem) 4rem; overflow:hidden; }
.hero-bg{ position:absolute; inset:0; z-index:0; }
.hero-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(.92) contrast(1.02); }
.hero-scrim{ position:absolute; inset:0; background:
   linear-gradient(to bottom, oklch(0.17 0.018 248 / .58), oklch(0.15 0.018 248 / .40) 32%, oklch(0.13 0.018 248 / .9)),
   linear-gradient(to left, oklch(0.13 0.018 248 / .62), transparent 56%),
   radial-gradient(115% 95% at 80% 46%, transparent, oklch(0.13 0.018 248 / .5)); }
.hero-inner{ position:relative; z-index:2; max-width:none; }
.hero .eyebrow{ color:oklch(0.82 0.06 70); margin-block-end:1.4rem; }
.hero-title{ font-size:var(--fz-disp); font-weight:700; line-height:1.12; color:var(--on-dark); max-width:15ch; text-wrap:balance; margin-block-end:1.4rem; text-shadow:0 2px 32px oklch(0.12 0.02 248 / .5); }
html[lang="en"] .hero-title{ font-weight:500; line-height:1.02; letter-spacing:-.015em; }
.hero-sub{ color:oklch(0.9 0.01 85 / .92); max-width:44ch; font-size:var(--fz-1); margin-block-end:2rem; }
.hero-cta{ display:flex; gap:.9rem; flex-wrap:wrap; }
.hero-micro{ margin-block-start:1.4rem; font-size:var(--fz--1); }
.scroll-cue{ position:absolute; inset-block-end:1.6rem; inset-inline-start:50%; transform:translateX(-50%); z-index:2;
   display:flex; flex-direction:column; align-items:center; gap:.5rem; color:oklch(0.9 0.01 85 / .7); font-size:var(--fz--1); }
.scroll-cue svg{ width:20px; height:20px; animation:nudge 2.4s var(--ease) infinite; }
@keyframes nudge{ 0%,100%{ transform:translateY(0); opacity:.6; } 50%{ transform:translateY(6px); opacity:1; } }

/* =========================================================================
   2 · MANIFESTO
   ========================================================================= */
.manifesto{ text-align:center; padding-block:clamp(2.75rem,6vw,5rem); }
.manifesto-inner{ display:flex; flex-direction:column; gap:1.4rem; align-items:center; }
.manifesto-line{ font-weight:700; text-wrap:balance; color:var(--ink); max-width:20ch; }
html[lang="en"] .manifesto-line{ font-style:italic; font-weight:500; }
.manifesto-sub{ max-width:48ch; }

/* =========================================================================
   3 · FORK
   ========================================================================= */
.fork .eyebrow{ margin-block-end:1.4rem; justify-content:center; }
.fork-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(.8rem,1.6vw,1.3rem); }
.fork-tile{ position:relative; display:flex; flex-direction:column; border-radius:var(--r-lg); overflow:hidden;
   background:var(--ink); color:var(--on-dark); box-shadow:var(--shadow-lift); transition:transform .4s var(--ease); min-height:300px; }
.fork-tile:hover{ transform:translateY(-4px); }
.fork-media{ position:absolute; inset:0; background-size:cover; background-position:center;
   filter:saturate(.9) brightness(.62); transition:filter .5s var(--ease), transform .6s var(--ease); }
.fork-tile:hover .fork-media{ filter:saturate(1) brightness(.74); transform:scale(1.05); }
.fork-tile::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, oklch(0.16 0.018 248 / .92), transparent 62%); }
.fork-body{ position:relative; z-index:2; margin-block-start:auto; padding:1.3rem; }
.fork-title{ font-size:var(--fz-2); font-weight:700; margin-block-end:.3rem; }
.fork-body .muted{ color:oklch(0.86 0.01 85 / .82); font-size:var(--fz--1); }

/* =========================================================================
   4 · GALLERY (mosaic)
   ========================================================================= */
.gallery{ background:var(--cream-2); }
.art-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:clamp(1rem,1.8vw,1.6rem); grid-auto-flow:row dense; }
.art-tile{ grid-column:span 2; position:relative; }   /* row 2 — three portraits */
.art-feature{ grid-column:span 3; }                    /* row 1 — two wide features */
.art-media{ position:relative; overflow:hidden; aspect-ratio:4/5; background:var(--ink); box-shadow:var(--shadow-lift); cursor:pointer; isolation:isolate; }
.art-feature .art-media{ aspect-ratio:16/10; }
.art-media video, .art-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
   transition:transform .6s var(--ease), filter .6s var(--ease); filter:saturate(.86) contrast(1.01); }
.art-tile:hover .art-media video, .art-tile:hover .art-media img{ transform:scale(1.05); filter:saturate(1.02); }
.art-media::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, oklch(0.16 0.018 248 / .35), transparent 45%); pointer-events:none; }
.art-play{ position:absolute; inset-block-start:50%; inset-inline-start:50%; translate:-50% -50%; z-index:2;
   width:54px; height:54px; border-radius:50%; background:oklch(0.97 0.006 85 / .9); pointer-events:none;
   opacity:0; transition:opacity .3s var(--ease), transform .3s var(--ease); display:grid; place-items:center; }
/* play triangle is a universal media symbol — always points right, never mirrored */
.art-play::before{ content:""; width:0; height:0; border-style:solid; border-width:9px 0 9px 15px; border-color:transparent transparent transparent var(--ink); margin-left:3px; }
.art-tile:hover .art-play{ opacity:1; }
/* info stacks so title + price stay grouped at the start edge at any tile width */
.art-info{ display:flex; flex-direction:column; align-items:flex-start; gap:.5rem; padding:1rem .15rem .25rem; }
.art-titles{ display:flex; align-items:baseline; gap:.6rem; flex-wrap:wrap; }
.art-titles h3{ font-size:var(--fz-2); font-weight:700; }
.art-verb{ color:var(--clay); font-size:var(--fz-0); }
html[lang="en"] .art-verb{ font-style:italic; }
.art-meta{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.art-book{ font-size:var(--fz--1); font-weight:600; color:var(--terra-deep); white-space:nowrap; }
.art-book:hover{ text-decoration:underline; text-underline-offset:3px; }

/* =========================================================================
   5 · MARQUEE
   ========================================================================= */
.marquee{ overflow:hidden; padding-block:1.1rem; border-block:1px solid oklch(1 0 0 / .07); }
.marquee-track{ display:inline-flex; align-items:center; gap:1.6rem; white-space:nowrap; will-change:transform;
   animation:marq 48s linear infinite; font-size:clamp(1.3rem,1rem+1.6vw,2.2rem); font-weight:700; color:oklch(0.96 0.006 85 / .9); }
.marquee:hover .marquee-track{ animation-play-state:paused; }
.marquee .dot{ color:var(--clay); }
.marquee .soft{ color:oklch(0.78 0.07 70); font-weight:500; }
html[lang="en"] .marquee .soft{ font-style:italic; }
@keyframes marq{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
html[dir="rtl"] .marquee-track{ animation-name:marq-rtl; }
@keyframes marq-rtl{ from{ transform:translateX(0); } to{ transform:translateX(50%); } }

/* =========================================================================
   MOMENTS (masonry, mobile-first: 2 cols → 3 → 4)
   ========================================================================= */
.moments-grid{ columns:2; column-gap:clamp(.55rem,1.6vw,1rem); }
@media(min-width:760px){ .moments-grid{ columns:3; } }   /* 3 cols max → 9 items balance cleanly */
.moment{ display:block; width:100%; margin:0 0 clamp(.55rem,1.6vw,1rem); padding:0; line-height:0;
   position:relative; break-inside:avoid; border-radius:var(--r-md); overflow:hidden;
   background:var(--ink); box-shadow:var(--shadow-lift); cursor:pointer; }
.moment img, .moment video{ width:100%; height:auto; display:block;
   transition:transform .6s var(--ease), filter .6s var(--ease); filter:saturate(.92); }
.moment:hover img, .moment:hover video{ transform:scale(1.04); filter:saturate(1.03); }
.moment::after{ content:""; position:absolute; inset:0; pointer-events:none;
   background:linear-gradient(to top, oklch(0.16 0.018 248 / .34), transparent 55%); opacity:0; transition:opacity .4s var(--ease); }
.moment:hover::after{ opacity:1; }
.moment-play{ position:absolute; inset-block-start:50%; inset-inline-start:50%; translate:-50% -50%; z-index:2;
   width:48px; height:48px; border-radius:50%; background:oklch(0.97 0.006 85 / .9); display:grid; place-items:center; pointer-events:none; }
.moment-play::before{ content:""; width:0; height:0; border-style:solid; border-width:8px 0 8px 13px; border-color:transparent transparent transparent var(--ink); margin-left:3px; }

/* =========================================================================
   6 · TRUST
   ========================================================================= */
.trust-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1rem,2.5vw,2.2rem); }
.trust-item{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:.9rem; }
.trust-ic{ width:56px; height:56px; border-radius:50%; display:grid; place-items:center; color:var(--slate);
   background:var(--slate-tint); }
.trust-ic svg{ width:26px; height:26px; }
.trust-item:nth-child(even) .trust-ic{ color:var(--clay); background:var(--clay-tint); }
.trust-item p{ font-size:var(--fz-0); max-width:22ch; }

/* =========================================================================
   7 · OPEN DAYS
   ========================================================================= */
.opendays{ position:relative; }
.event-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2vw,1.6rem); }
.event-card{ display:flex; gap:1.1rem; align-items:stretch; background:oklch(0.30 0.02 246 / .55); border:1px solid oklch(1 0 0 / .08);
   border-radius:var(--r-lg); padding:1.1rem; }
.event-date{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.1rem;
   background:var(--ink-deep); border-radius:var(--r-md); padding:.9rem .7rem; min-width:74px; color:var(--on-dark); }
.ev-wd{ font-size:var(--fz--1); color:oklch(0.78 0.07 70); }
.ev-dn{ font-size:1.8rem; font-weight:700; line-height:1; }
.ev-mo{ font-size:var(--fz--1); color:var(--on-dark-mut); }
.event-body{ display:flex; flex-direction:column; gap:.6rem; }
.event-body h3{ font-size:var(--fz-1); font-weight:700; color:var(--on-dark); }
.event-meta{ display:flex; gap:.45rem; flex-wrap:wrap; }
.event-cta{ margin-block-start:auto; align-self:flex-start; padding:.6rem 1.1rem; font-size:var(--fz--1); }
.opendays-note{ margin-block-start:1.6rem; text-align:center; }

/* =========================================================================
   8 · PRIVATE
   ========================================================================= */
.private-wrap{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(1.5rem,4vw,4rem); align-items:center; }
.private-media .art-media{ aspect-ratio:4/5; cursor:pointer; }
.private-body .eyebrow{ margin-block-end:1rem; }
.private-body .h2{ margin-block-end:1rem; }
.private-body .lead{ margin-block-end:1.4rem; }
.occasion-chips{ display:flex; flex-wrap:wrap; gap:.5rem; margin-block-end:1.2rem; }
.occasion{ cursor:pointer; border:1px solid transparent; transition:transform .2s var(--ease), background-color .2s var(--ease); }
.occasion:hover{ transform:translateY(-2px); }
.private-note{ font-size:var(--fz--1); margin-block-end:1.4rem; }

/* =========================================================================
   9 · CORPORATE
   ========================================================================= */
.corp-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.2rem,2.5vw,2rem); align-items:stretch; }
.corp-contrast{ display:flex; flex-direction:column; gap:1rem; justify-content:center; }
.corp-vs{ border-radius:var(--r-lg); padding:1.4rem 1.5rem; border:1px solid oklch(1 0 0 / .1); }
.corp-vs-tag{ display:block; font-size:var(--fz--1); font-weight:600; margin-block-end:.5rem; }
.corp-vs-old{ background:oklch(0.30 0.02 246 / .4); }
.corp-vs-old p{ color:oklch(0.84 0.01 85); }
.corp-vs-new{ background:oklch(0.47 0.06 68 / .22); border-color:oklch(0.6 0.1 60 / .4); }
.corp-vs-new .corp-vs-tag{ color:oklch(0.82 0.08 70); }
.corp-vs-new p{ color:var(--on-dark); font-weight:500; }
.corp-card{ background:oklch(0.30 0.02 246 / .6); border:1px solid oklch(1 0 0 / .1); border-radius:var(--r-lg); padding:clamp(1.4rem,2.5vw,2rem); display:flex; flex-direction:column; gap:1rem; }
.corp-badge{ display:inline-flex; align-items:center; gap:.55rem; align-self:flex-start; padding:.45rem .9rem; border-radius:999px;
   background:oklch(0.74 0.135 238 / .16); color:oklch(0.82 0.09 235); font-size:var(--fz--1); font-weight:600; }
.corp-badge svg{ width:1.1em; height:1.1em; }
.corp-list{ display:flex; flex-direction:column; gap:.7rem; }
.corp-list li{ position:relative; padding-inline-start:1.6rem; color:oklch(0.9 0.01 85 / .9); }
.corp-list li::before{ content:""; position:absolute; inset-inline-start:0; inset-block-start:.6em; width:8px; height:8px; border-radius:50%; background:var(--clay); }
.corp-early{ font-size:var(--fz--1); }
.corp-card .btn{ align-self:flex-start; }

/* =========================================================================
   10 · BOOKING
   ========================================================================= */
.booking{ background:var(--cream-2); }
.book-honesty{ color:var(--clay-deep); font-size:var(--fz-0); margin-block-start:.8rem; }
.book-alt{ margin-block-start:.5rem; }
.form-link{ color:var(--slate-deep); font-weight:600; font-size:var(--fz--1); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; cursor:pointer; }
.form-link:hover{ color:var(--terra-deep); }
.steps{ display:flex; align-items:center; justify-content:center; gap:.5rem; margin-block-end:1.6rem; flex-wrap:wrap; }
.step{ display:flex; align-items:center; gap:.55rem; opacity:.5; transition:opacity .3s var(--ease); }
.step.is-active, .step.is-done{ opacity:1; }
.step-dot{ width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font-size:var(--fz--1); font-weight:700;
   background:var(--cream); box-shadow:inset 0 0 0 1.6px var(--paper-line); color:var(--text-muted); }
.step.is-active .step-dot{ background:var(--slate); color:#fff; box-shadow:none; }
.step.is-done .step-dot{ background:var(--clay); color:#fff; box-shadow:none; }
.step-lbl{ font-size:var(--fz--1); }
@media(max-width:560px){ .step-lbl{ display:none; } .step:not(.is-active) .step-lbl{ display:none; } }
.steps.corp .step[data-step="2"]{ display:none; }

.bk-summary{ display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; justify-content:center; margin-block-end:1.4rem;
   padding:.7rem 1rem; background:var(--ink); color:var(--on-dark); border-radius:999px; font-size:var(--fz--1); font-weight:500; }
.sum-dot{ color:oklch(0.78 0.07 70); }
.bk-form{ background:#fff; border:1px solid var(--paper-line); border-radius:var(--r-xl); padding:clamp(1.3rem,3vw,2.2rem); box-shadow:var(--shadow-lift); }
.bk-legend{ font-size:var(--fz-0); font-weight:600; margin-block-end:.9rem; color:var(--ink); }
.bk-type{ border:none; margin-block-end:1.6rem; }
.seg{ display:inline-flex; padding:.3rem; gap:.25rem; background:var(--cream-2); border-radius:999px; }
.seg-btn{ padding:.55rem 1.1rem; border-radius:999px; font-size:var(--fz--1); font-weight:600; color:var(--text-muted); transition:all .25s var(--ease); }
.seg-btn.is-on{ background:#fff; color:var(--ink); box-shadow:var(--shadow-lift); }
.bk-art-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:.7rem; margin-block-end:1.6rem; }
.bk-art{ position:relative; display:flex; flex-direction:column; gap:.5rem; padding:.5rem; border-radius:var(--r-md);
   border:1.6px solid var(--paper-line); background:#fff; cursor:pointer; transition:border-color .25s var(--ease), transform .25s var(--ease); text-align:start; }
.bk-art:hover{ transform:translateY(-2px); border-color:var(--slate); }
.bk-art.is-on{ border-color:var(--terra); box-shadow:0 0 0 3px oklch(0.595 0.105 55 / .14); }
.bk-art-img{ display:block; aspect-ratio:4/3; border-radius:10px; background-size:cover; background-position:center; }
.bk-art-nm{ font-size:var(--fz-0); font-weight:600; padding-inline:.2rem; }
.bk-art-pr{ font-size:var(--fz--1); color:var(--text-muted); padding-inline:.2rem; }
.bk-art-fri{ position:absolute; inset-block-start:.8rem; inset-inline-end:.8rem; z-index:2; background:oklch(0.74 0.135 238 / .9); color:#06243a; font-size:.66rem; font-weight:700; padding:.18rem .5rem; border-radius:999px; }
.bk-actions{ display:flex; gap:.7rem; justify-content:flex-end; margin-block-start:1.4rem; }
.bk-actions .btn-primary{ min-width:130px; }

.day-row{ display:flex; gap:.6rem; overflow-x:auto; padding-block-end:.6rem; scroll-snap-type:x mandatory; margin-block-end:1.6rem; }
.day-tile{ flex:0 0 auto; scroll-snap-align:start; width:72px; padding:.7rem .4rem; border-radius:var(--r-md);
   border:1.6px solid var(--paper-line); background:#fff; display:flex; flex-direction:column; align-items:center; gap:.25rem; cursor:pointer; transition:all .25s var(--ease); }
.day-tile:hover{ border-color:var(--slate); transform:translateY(-2px); }
.day-tile.is-on{ background:var(--slate); border-color:var(--slate); color:#fff; }
.day-wd{ font-size:var(--fz--1); color:var(--text-muted); }
.day-tile.is-on .day-wd{ color:oklch(0.9 0.02 246); }
.day-n{ font-size:1.4rem; font-weight:700; line-height:1; }
.day-note{ flex:0 0 auto; align-self:center; font-size:var(--fz--1); padding-inline:.6rem; }
.slot-wrap{ display:flex; flex-direction:column; gap:1rem; margin-block-end:.4rem; }
.slot-hint{ font-size:var(--fz--1); }
.slot-group{ display:flex; flex-direction:column; gap:.5rem; }
.slot-lbl{ font-size:var(--fz--1); color:var(--text-muted); font-weight:600; }
.slot-list{ display:flex; flex-wrap:wrap; gap:.5rem; }
.slot{ padding:.55rem .9rem; border-radius:999px; border:1.6px solid var(--paper-line); background:#fff; font-size:var(--fz--1); font-weight:600; cursor:pointer; transition:all .2s var(--ease); }
.slot:hover{ border-color:var(--slate); color:var(--slate-deep); }
.slot.is-on{ background:var(--terra); border-color:var(--terra); color:#fff; }

.field{ display:flex; flex-direction:column; gap:.45rem; margin-block-end:1rem; }
.field label{ font-size:var(--fz--1); color:var(--text-muted); font-weight:600; }
.field input, .field select{ padding:.8rem 1rem; border-radius:var(--r-md); border:1.6px solid var(--paper-line); background:#fff; font-size:var(--fz-0); transition:border-color .2s var(--ease); }
.field input:focus, .field select:focus{ border-color:var(--slate); outline:none; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.bk-err{ background:oklch(0.6 0.13 25 / .1); border:1px solid oklch(0.6 0.13 25 / .3); color:oklch(0.5 0.13 25); padding:.7rem 1rem; border-radius:var(--r-md); font-size:var(--fz--1); margin-block-end:1rem; }
.bk-reassure{ text-align:center; font-size:var(--fz--1); margin-block-start:1rem; }

.bk-success{ background:#fff; border:1px solid var(--paper-line); border-radius:var(--r-xl); padding:clamp(1.8rem,4vw,3rem); text-align:center; box-shadow:var(--shadow-lift); display:flex; flex-direction:column; align-items:center; gap:.8rem; }
.bk-success-mark{ width:72px; height:72px; border-radius:50%; background:var(--clay-tint); color:var(--clay-deep); display:grid; place-items:center; }
.bk-success-mark svg{ width:34px; height:34px; }
.bk-receipt{ width:100%; max-width:360px; margin-block:1rem; display:flex; flex-direction:column; gap:.1rem; text-align:start; }
.rc-row{ display:flex; justify-content:space-between; gap:1rem; padding:.6rem .2rem; border-block-end:1px solid var(--paper-line); font-size:var(--fz-0); }
.rc-row:last-child{ border-block-end:none; }
.rc-k{ color:var(--text-muted); }
.rc-v{ font-weight:600; }
.bk-success .btn-wa{ margin-block-start:.5rem; }

/* =========================================================================
   INFO
   ========================================================================= */
.info-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.2rem,3vw,2.5rem); }
.info-item{ display:flex; flex-direction:column; gap:.4rem; }
.info-ic{ width:48px; height:48px; border-radius:50%; display:grid; place-items:center; background:var(--clay-tint); color:var(--clay-deep); margin-block-end:.4rem; }
.info-ic svg{ width:24px; height:24px; }
.info-item h3{ font-size:var(--fz-1); font-weight:700; }
.info-link{ color:var(--slate-deep); font-weight:600; text-underline-offset:3px; }
.info-link:hover{ text-decoration:underline; color:var(--terra-deep); }

/* =========================================================================
   FOOTER + WhatsApp float + lightbox
   ========================================================================= */
.footer{ position:relative; padding-block:clamp(2.5rem,5vw,4rem); }
.footer-inner{ display:flex; flex-direction:column; align-items:center; gap:1.2rem; text-align:center; }
.footer-logo{ display:block; width:84px; height:84px; background:none; padding:0; box-shadow:none; border-radius:0; }
.footer-logo img{ width:100%; height:100%; object-fit:contain; }
.footer-word{ font-size:1.8rem; font-weight:700; color:var(--on-dark); }
.footer-links{ display:flex; gap:1.4rem; flex-wrap:wrap; justify-content:center; }
.footer-links a{ color:oklch(0.9 0.01 85 / .7); font-size:var(--fz--1); transition:color .2s var(--ease); }
.footer-links a:hover{ color:var(--on-dark); }
.footer-micro{ font-size:var(--fz--1); }

.wa-float{ position:fixed; inset-block-end:1.2rem; inset-inline-end:1.2rem; z-index:80; width:56px; height:56px; border-radius:50%;
   background:var(--slate); color:#fff; display:grid; place-items:center; box-shadow:var(--shadow-dark); transition:transform .3s var(--ease), background-color .3s var(--ease); }
.wa-float svg{ width:30px; height:30px; }
.wa-float:hover{ transform:translateY(-3px) scale(1.04); background:var(--slate-deep); }

/* mobile sticky booking bar — persistent primary CTA on phones */
.mcta{ display:none; }
@media(max-width:880px){
  .mcta{ position:fixed; inset-inline:0; inset-block-end:0; z-index:86; display:flex; gap:.6rem;
    padding:.7rem .9rem calc(.7rem + env(safe-area-inset-bottom));
    background:oklch(0.243 0.018 246 / .94); backdrop-filter:blur(14px) saturate(1.1);
    box-shadow:0 -10px 34px oklch(0.10 0.02 246 / .3);
    transform:translateY(130%); transition:transform .45s var(--ease); }
  .mcta.show{ transform:none; }
  .mcta-book{ flex:1; min-height:52px; }
  .mcta-wa{ flex:none; width:54px; min-height:52px; display:grid; place-items:center; border-radius:var(--r-md); background:#1faf54; color:#fff; }
  .mcta-wa svg{ width:26px; height:26px; }
  .wa-float{ display:none; }   /* the bar carries WhatsApp on mobile */
}

.lightbox{ position:fixed; inset:0; z-index:120; display:none; align-items:center; justify-content:center; padding:clamp(1rem,4vw,3rem);
   background:oklch(0.16 0.018 248 / .92); backdrop-filter:blur(6px); }
.lightbox.open{ display:flex; }
.lb-figure{ max-width:min(92vw,1100px); max-height:88vh; display:flex; flex-direction:column; gap:.8rem; align-items:center; }
.lb-media{ max-width:100%; max-height:80vh; border-radius:var(--r-md); overflow:hidden; box-shadow:var(--shadow-dark); }
.lb-media img, .lb-media video{ max-width:100%; max-height:80vh; object-fit:contain; border-radius:var(--r-md); }
.lb-cap{ color:var(--on-dark-mut); font-size:var(--fz--1); }
.lb-btn{ position:absolute; z-index:2; width:46px; height:46px; border-radius:50%; background:oklch(0.97 0.006 85 / .12); color:#fff; display:grid; place-items:center; transition:background-color .2s var(--ease); }
.lb-btn:hover{ background:oklch(0.97 0.006 85 / .24); }
.lb-btn svg{ width:24px; height:24px; }
.lb-close{ inset-block-start:1.1rem; inset-inline-end:1.1rem; }
.lb-prev{ inset-inline-start:1.1rem; inset-block-start:50%; transform:translateY(-50%); }
.lb-next{ inset-inline-end:1.1rem; inset-block-start:50%; transform:translateY(-50%); }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media(max-width:980px){
  .fork-grid{ grid-template-columns:repeat(2,1fr); }
  .art-grid{ grid-template-columns:repeat(2,1fr); }
  .art-tile, .art-feature{ grid-column:span 1; }
  .art-media, .art-feature .art-media{ aspect-ratio:4/5; }
  .art-tile:last-child{ grid-column:span 2; }            /* tufting fills the row instead of sitting alone */
  .art-tile:last-child .art-media{ aspect-ratio:16/9; }
  .trust-grid{ grid-template-columns:repeat(2,1fr); }
  .event-grid{ grid-template-columns:1fr 1fr; }
  .private-wrap{ grid-template-columns:1fr; }
  .private-media{ max-width:440px; margin-inline:auto; }
  .corp-grid{ grid-template-columns:1fr; }
  .info-grid{ grid-template-columns:1fr; gap:1.6rem; }
  .bk-art-grid{ grid-template-columns:repeat(2,1fr); }
}
@media(max-width:620px){
  .fork-grid{ grid-template-columns:1fr; }
  .art-grid{ grid-template-columns:1fr; }
  .art-tile, .art-feature, .art-tile:last-child{ grid-column:span 1; }
  .art-media, .art-feature .art-media, .art-tile:last-child .art-media{ aspect-ratio:4/5; }
  .trust-grid{ grid-template-columns:1fr; }
  .event-grid{ grid-template-columns:1fr; }
  .field-row{ grid-template-columns:1fr; }
  .hero{ min-height:92svh; }
  .wa-float{ width:52px; height:52px; }
}

/* mobile-first touch comfort — ≥44px tap targets */
@media(max-width:880px){
  .btn{ min-height:48px; }
  .nav-cta{ min-height:0; }
  .nav-burger, .lang-toggle{ min-height:44px; }
  .lang-toggle{ padding-block:.55rem; }
  .seg-btn, .slot, .occasion{ min-height:44px; display:inline-flex; align-items:center; justify-content:center; }
  .day-tile{ min-height:66px; }
  .art-book{ padding:.45rem .2rem; display:inline-block; }
  .info-link{ display:inline-block; padding-block:.35rem; }
  .footer-links a{ padding:.4rem .3rem; }
  .occasion-chips{ gap:.6rem; }
}

/* =========================================================================
   reduced motion
   ========================================================================= */
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1 !important; transform:none !important; filter:none !important; transition:none; }
  .morph, .marquee-track, .scroll-cue svg{ animation:none; }
  /* hero video is neutralized in JS under reduced-motion; its poster stays as a static hero */
  *{ scroll-behavior:auto; }
}