/* =========================================================
   WATAR PRODUCTION — cinematic studio site
   Palette: obsidian green + champagne gold
   ========================================================= */

:root{
  --ink:        #0B100F;
  --ink-2:      #0F1615;
  --ink-3:      #131D1B;
  --brand:      #344B47;
  --brand-lift: #4C6A64;
  --gold:       #D9BD8B;
  --gold-hi:    #F2E3C4;
  --gold-lo:    #A98750;
  --cream:      #EDE7DC;
  --muted:      rgba(237,231,220,.56);
  --faint:      rgba(237,231,220,.14);
  --hair:       rgba(217,189,139,.20);

  --f-disp: "Bodoni Moda", "Times New Roman", serif;
  --f-body: "Instrument Sans", "Helvetica Neue", sans-serif;
  --f-mono: "Saira Condensed", "Arial Narrow", sans-serif;

  --pad: clamp(20px, 5vw, 80px);
  --maxw: 1560px;
  --ease: cubic-bezier(.16,1,.3,1);
  --ease-io: cubic-bezier(.65,0,.35,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
html,body{ margin:0; padding:0; }
body{
  background:var(--ink);
  color:var(--cream);
  font-family:var(--f-body);
  font-size:clamp(15px,1.05vw,17px);
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body.is-locked{ overflow:hidden; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
::selection{ background:var(--gold); color:var(--ink); }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }
.mono{
  font-family:var(--f-mono); font-weight:500;
  font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
}
.skip{
  position:fixed; top:-100px; left:16px; z-index:999; padding:10px 16px;
  background:var(--gold); color:var(--ink); border-radius:2px;
}
.skip:focus{ top:16px; }
:focus-visible{ outline:2px solid var(--gold); outline-offset:4px; }

/* ---------------- FX layers ---------------- */
/* Static film-stock texture. One SVG, no canvas, no per-frame work.
   Delete this rule and the .grain div in partials/head.php to remove it. */
.grain{
  position:fixed; inset:0; z-index:9000; pointer-events:none;
  opacity:.042; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px 200px;
}
.vignette{
  position:fixed; inset:0; z-index:8999; pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 45%, transparent 42%, rgba(0,0,0,.55) 100%),
    linear-gradient(to bottom, rgba(0,0,0,.35), transparent 18%, transparent 82%, rgba(0,0,0,.45));
}
.scrollbar{
  position:fixed; top:0; left:0; right:0; height:2px; z-index:8500;
  background:rgba(255,255,255,.05);
}
.scrollbar i{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg,var(--gold-lo),var(--gold-hi));
  box-shadow:0 0 14px rgba(217,189,139,.6);
}

/* ---------------- Preloader ---------------- */
.loader{
  position:fixed; inset:0; z-index:9800; background:var(--ink);
  display:grid; place-items:center;
}
.loader__inner{ position:relative; z-index:2; width:min(420px,72vw); text-align:center; }
.loader__logo{
  width:100%; margin-bottom:34px;
  opacity:0; transform:translateY(14px);
  animation:loadIn 1.1s var(--ease) .15s forwards;
}
@keyframes loadIn{ to{ opacity:1; transform:none; } }
.loader__bar{ height:1px; background:rgba(237,231,220,.16); overflow:hidden; }
.loader__bar span{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg,var(--gold-lo),var(--gold-hi));
}
.loader__meta{
  display:flex; justify-content:space-between; margin-top:12px; color:var(--muted);
}
.loader__curtain{ position:absolute; inset:0; z-index:1; display:flex; pointer-events:none; }
.loader__curtain i{ flex:1; background:var(--ink); transform:translateY(0); }
.loader.is-done .loader__inner{ opacity:0; transition:opacity .35s; }
.loader.is-done .loader__curtain i{
  transform:translateY(-101%);
  transition:transform 1.05s var(--ease);
  transition-delay:calc(var(--n) * 70ms);
}
.loader.is-gone{ display:none; }

/* ---------------- Nav ---------------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:8000;
  display:flex; align-items:center; gap:32px;
  padding:22px var(--pad);
  transition:transform .6s var(--ease), background .4s, backdrop-filter .4s, padding .4s;
}
.nav::after{
  content:""; position:absolute; left:var(--pad); right:var(--pad); bottom:0; height:1px;
  background:var(--hair); opacity:0; transition:opacity .4s;
}
.nav.is-stuck{
  padding:14px var(--pad);
  background:rgba(11,16,15,.72);
  backdrop-filter:blur(18px) saturate(140%);
}
.nav.is-stuck::after{ opacity:1; }
.nav.is-hidden{ transform:translateY(-105%); }
.nav__brand img{ width:clamp(112px,10vw,148px); transition:opacity .3s; }
.nav__brand:hover img{ opacity:.75; }

.nav__links{ display:flex; gap:34px; margin-left:auto; }
.nav__links a{
  font-family:var(--f-mono); font-size:.78rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted); overflow:hidden; display:block; height:1.2em;
}
.nav__links a{ position:relative; }
.nav__links a > span{ display:block; transition:transform .5s var(--ease); }
.nav__links a:hover > span{ transform:translateY(-100%); }
/* the duplicate line is injected by JS so the label rolls up to a gold twin */
.nav__links a .dup{ position:absolute; top:100%; left:0; color:var(--gold); }

.nav__cta{ margin-left:8px; }
@media (max-width:1024px){ .nav .nav__links, .nav .nav__cta{ display:none; } }

/* Burger */
.burger{
  display:none; margin-left:auto; width:44px; height:44px; position:relative;
}
.burger i{
  position:absolute; left:11px; width:22px; height:1px; background:var(--cream);
  transition:transform .45s var(--ease), opacity .3s;
}
.burger i:nth-child(1){ top:19px; } .burger i:nth-child(2){ top:25px; }
.burger.is-open i:nth-child(1){ transform:translateY(3px) rotate(45deg); }
.burger.is-open i:nth-child(2){ transform:translateY(-3px) rotate(-45deg); }
@media (max-width:1024px){ .burger{ display:block; } }

/* Mobile menu */
.menu{ position:fixed; inset:0; z-index:7900; display:grid; align-content:center; }
/* a class-level display would beat the UA [hidden] rule and leave an invisible
   full-screen layer swallowing every click — pin it back down explicitly */
.menu[hidden], .lightbox[hidden]{ display:none; }
.menu__bg{
  position:absolute; inset:0; background:var(--ink-2);
  clip-path:inset(0 0 100% 0); transition:clip-path .8s var(--ease);
}
.menu.is-open .menu__bg{ clip-path:inset(0 0 0 0); }
.menu__list{ position:relative; padding:0 var(--pad); display:grid; gap:6px; }
.menu__list a{
  font-family:var(--f-disp); font-size:clamp(2.2rem,11vw,4rem); line-height:1.05;
  display:flex; align-items:baseline; gap:14px;
  opacity:0; transform:translateY(30px);
  transition:opacity .6s var(--ease), transform .6s var(--ease);
  transition-delay:calc(var(--i) * 60ms + 200ms);
}
.menu__list a em{ font-family:var(--f-mono); font-size:.8rem; font-style:normal; color:var(--gold); letter-spacing:.2em; }
.menu.is-open .menu__list a{ opacity:1; transform:none; }
.menu__foot{
  position:absolute; bottom:40px; left:var(--pad); right:var(--pad);
  display:grid; gap:6px; color:var(--muted); font-family:var(--f-mono); letter-spacing:.14em;
  opacity:0; transition:opacity .5s .5s;
}
.menu.is-open .menu__foot{ opacity:1; }

/* ---------------- Buttons ---------------- */
.btn{
  --bg:transparent; --fg:var(--cream); --bd:var(--hair);
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  padding:15px 30px; border:1px solid var(--bd); border-radius:100px;
  background:var(--bg); color:var(--fg); overflow:hidden;
  font-family:var(--f-mono); font-size:.78rem; letter-spacing:.2em; text-transform:uppercase;
  transition:color .45s var(--ease), border-color .45s;
}
.btn span{ position:relative; z-index:2; }
.btn::before{
  content:""; position:absolute; inset:0; background:var(--gold);
  transform:translateY(101%); border-radius:50% 50% 0 0;
  transition:transform .6s var(--ease), border-radius .6s var(--ease);
}
.btn:hover{ color:var(--ink); border-color:var(--gold); }
.btn:hover::before{ transform:translateY(0); border-radius:0; }
.btn--gold{ background:var(--gold); color:var(--ink); border-color:var(--gold); }
.btn--gold::before{ background:var(--cream); }
.btn--gold:hover{ color:var(--ink); }
.btn--line{ border-color:rgba(237,231,220,.28); }
.btn--wide{ padding-inline:44px; }

/* ---------------- Split text ---------------- */
[data-split]{ display:inline; }
.ch,.wd{ display:inline-block; will-change:transform,opacity; }
.wd{ overflow:hidden; padding-bottom:.18em; margin-bottom:-.18em; }
.wd > i{ display:inline-block; font-style:inherit; transform:translateY(130%); opacity:0; }
.is-in .wd > i{
  transform:none; opacity:1;
  transition:transform .95s var(--ease), opacity .7s ease;
  transition-delay:calc(var(--i) * 26ms);
}
.ch{ transform:translateY(130%) rotate(4deg); opacity:0; }
.split-mask{ display:inline-block; overflow:hidden; vertical-align:bottom; padding-bottom:.2em; margin-bottom:-.2em; }
.is-in .ch{
  transform:none; opacity:1;
  transition:transform 1s var(--ease), opacity .6s ease;
  transition-delay:calc(var(--i) * 32ms);
}

/* generic reveal */
[data-reveal]{ opacity:0; transform:translateY(26px); }
[data-reveal].is-in{
  opacity:1; transform:none;
  transition:opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay:var(--d,0ms);
}

/* ---------------- Kicker / section heads ---------------- */
.kicker{
  display:flex; align-items:center; gap:14px; margin:0 0 26px;
  font-family:var(--f-mono); font-size:.74rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--gold);
}
.kicker i{ display:block; width:clamp(28px,4vw,64px); height:1px; background:var(--gold); opacity:.6; }
.sec-head{ margin-bottom:clamp(48px,7vw,96px); }
.sec-title{
  font-family:var(--f-disp); font-weight:400;
  font-size:clamp(2.6rem,7.2vw,6.4rem); line-height:.98; letter-spacing:-.02em;
  margin:0;
}

/* ---------------- HERO ---------------- */
.hero{
  position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:flex-end;
  padding:140px var(--pad) clamp(40px,6vw,70px);
  overflow:hidden;
}
/* --- calm hero light: three still layers, one very slow breath --- */
.hero__sky{
  position:absolute; inset:0;
  background:linear-gradient(180deg, #070B0A 0%, #0C1413 44%, #0B100F 100%);
}
.hero__key{
  position:absolute; left:50%; top:30%; width:min(1500px,150vw); aspect-ratio:1.5;
  transform:translate(-50%,-50%);
  background:radial-gradient(ellipse at center,
    rgba(66,96,90,.55) 0%,
    rgba(52,75,71,.26) 34%,
    rgba(52,75,71,.08) 56%,
    transparent 72%);
  filter:blur(26px);
}
.hero__floor{
  position:absolute; inset:auto 0 0 0; height:46%;
  background:linear-gradient(180deg, transparent, rgba(4,7,6,.85));
}
.hero__floor::before{
  content:""; position:absolute; inset:auto 0 34% 0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(217,189,139,.16) 30%, rgba(217,189,139,.16) 70%, transparent);
}

/* the same light, reused as a quieter header on inner pages */
.phero__key{
  position:absolute; left:50%; top:-10%; width:min(1400px,150vw); aspect-ratio:1.7;
  transform:translateX(-50%);
  background:radial-gradient(ellipse at center, rgba(60,88,83,.42) 0%, rgba(52,75,71,.14) 42%, transparent 70%);
  filter:blur(28px); pointer-events:none;
}

.bars{ position:absolute; inset:0; pointer-events:none; }
.bars i{ position:absolute; left:0; right:0; height:12vh; background:var(--ink); }
.bars i:first-child{ top:0; transform:translateY(-100%); animation:barIn 1.4s var(--ease) .1s forwards; }
.bars i:last-child{ bottom:0; transform:translateY(100%); animation:barIn 1.4s var(--ease) .1s forwards; }
body.is-loaded .bars i:first-child{ animation:barOut 1.6s var(--ease) forwards; }
body.is-loaded .bars i:last-child{ animation:barOutB 1.6s var(--ease) forwards; }
@keyframes barIn{ to{ transform:translateY(0); } }
@keyframes barOut{ from{ transform:translateY(0);} to{ transform:translateY(-100%);} }
@keyframes barOutB{ from{ transform:translateY(0);} to{ transform:translateY(100%);} }

.hero__inner{ position:relative; width:100%; max-width:var(--maxw); margin-inline:auto; }
.hero__kicker{ color:var(--gold); opacity:0; animation:fadeUp 1s var(--ease) 1.1s forwards; }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(18px);} to{ opacity:1; transform:none;} }

.hero__title{
  font-family:var(--f-disp); font-weight:400;
  font-size:clamp(3.4rem,13vw,12.5rem); line-height:.86; letter-spacing:-.035em;
  margin:0 0 clamp(36px,5vw,64px);
}
.hero__title .line{ display:block; }
.hero__title em{ font-style:italic; font-weight:500; color:var(--gold); }
/* gradient lives on the split chars: an inline-block descendant is not clipped
   by an ancestor's background-clip:text, so each glyph carries its own sweep */
.hero__title em .ch,
.hero__title em .split-mask{
  background-image:linear-gradient(100deg,var(--gold-lo) 0%,var(--gold-hi) 38%,var(--gold) 62%,var(--gold-lo) 100%);
  background-size:260% 100%;
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
}
.hero__title .dot{ color:var(--gold); }

.hero__foot{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:36px;
  border-top:1px solid var(--faint); padding-top:28px;
}
.hero__lede{ max-width:46ch; margin:0; color:var(--muted); font-size:clamp(.95rem,1.25vw,1.12rem); }
.hero__actions{ display:flex; gap:14px; flex-wrap:wrap; opacity:0; animation:fadeUp 1s var(--ease) 1.6s forwards; }

.scrollcue{
  position:absolute; right:calc(var(--pad) * .38); top:50%; transform:translateY(-50%);
  display:grid; gap:16px; justify-items:center; color:var(--muted);
  opacity:0; animation:fadeUp 1s var(--ease) 2s forwards;
}
.scrollcue .mono{ writing-mode:vertical-rl; letter-spacing:.34em; font-size:.66rem; }
.scrollcue i{ width:1px; height:72px; background:linear-gradient(var(--gold),transparent); position:relative; overflow:hidden; }
.scrollcue i::after{
  content:""; position:absolute; left:0; top:0; width:1px; height:22px; background:var(--gold-hi);
}
@media (max-width:900px){ .scrollcue{ display:none; } }

/* ---------------- Marquee ---------------- */
.marquee{
  border-block:1px solid var(--hair); padding:18px 0; overflow:hidden;
  background:linear-gradient(90deg,var(--ink),var(--ink-3),var(--ink));
}
.marquee__track{ display:flex; white-space:nowrap; will-change:transform; }
.marquee__track span{
  font-family:var(--f-disp); font-size:clamp(1.4rem,3.4vw,2.6rem); font-style:italic;
  color:var(--cream); opacity:.85; padding-right:0;
}
.marquee__track b{ color:var(--gold); font-weight:400; font-size:.7em; vertical-align:middle; padding:0 .3em; }

/* ---------------- About ---------------- */
.about{ padding:clamp(90px,13vw,190px) 0; }
.statement{
  font-family:var(--f-disp); font-weight:400;
  font-size:clamp(1.6rem,4.1vw,3.5rem); line-height:1.18; letter-spacing:-.015em;
  margin:0 0 clamp(60px,8vw,110px); max-width:22ch;
}
.statement em{ font-style:italic; color:var(--gold); }
.about__grid{
  display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(36px,6vw,110px);
  border-top:1px solid var(--faint); padding-top:clamp(36px,5vw,60px);
}
.about__col p{ margin:0 0 20px; color:var(--muted); max-width:52ch; }
.about__col p:first-child{ color:var(--cream); font-size:1.08em; }
.about__facts{ list-style:none; margin:0; padding:0; display:grid; gap:0; align-content:start; }
.about__facts li{
  display:flex; justify-content:space-between; align-items:baseline; gap:20px;
  padding:16px 0; border-bottom:1px solid var(--faint);
}
.about__facts span{ color:var(--gold); }
.about__facts b{ font-weight:500; text-align:right; }
@media (max-width:900px){ .about__grid{ grid-template-columns:1fr; } }

/* ---------------- Services ---------------- */
.services{ padding:clamp(80px,11vw,160px) 0; position:relative; }
.svc{ border-top:1px solid var(--faint); }
.svc__row{
  position:relative; display:grid; align-items:center; gap:0 clamp(20px,4vw,60px);
  grid-template-columns:auto minmax(0,1.1fr) minmax(0,1.2fr) auto;
  padding:clamp(26px,3.4vw,44px) 0;
  border-bottom:1px solid var(--faint);
  isolation:isolate; color:inherit;
}
.svc__num{ grid-column:1; grid-row:1; }
.svc__name{ grid-column:2; grid-row:1; }
.svc__desc{ grid-column:3; grid-row:1; }
.svc__tags{ grid-column:3; grid-row:2; }
.svc__arrow{ grid-column:4; grid-row:1 / span 2; align-self:center; }
.svc__row::before{
  content:""; position:absolute; inset:0 calc(var(--pad) * -.4); z-index:-1;
  background:linear-gradient(90deg,rgba(52,75,71,.55),rgba(52,75,71,0));
  transform:scaleY(0); transform-origin:bottom;
  transition:transform .6s var(--ease);
}
.svc__row:hover::before{ transform:scaleY(1); transform-origin:top; }
.svc__num{ color:var(--gold); opacity:.7; }
.svc__name{
  font-family:var(--f-disp); font-weight:400;
  font-size:clamp(1.6rem,3.6vw,3.1rem); line-height:1.02; letter-spacing:-.02em; margin:0;
  transition:transform .6s var(--ease), color .4s;
}
.svc__row:hover .svc__name{ transform:translateX(clamp(8px,1.4vw,22px)); color:var(--gold-hi); }
.svc__desc{ margin:0; color:var(--muted); max-width:46ch; font-size:.96em; }
.svc__tags{
  display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:14px 0 0; padding:0;
}
.svc__tags li{
  font-family:var(--f-mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); border:1px solid var(--faint); border-radius:100px; padding:4px 11px;
  transition:border-color .5s var(--ease), color .5s var(--ease);
}
.svc__row:hover .svc__tags li{ border-color:var(--hair); color:var(--gold); }
.svc__arrow{
  width:44px; height:44px; border:1px solid var(--hair); border-radius:50%;
  display:grid; place-items:center; transition:background .45s var(--ease), transform .6s var(--ease), border-color .4s;
}
.svc__arrow::after{
  content:"↗"; font-family:var(--f-mono); font-size:1rem; color:var(--gold);
  transition:color .4s;
}
.svc__row:hover .svc__arrow{ background:var(--gold); border-color:var(--gold); transform:rotate(45deg); }
.svc__row:hover .svc__arrow::after{ color:var(--ink); }
@media (max-width:900px){
  .svc__row{ grid-template-columns:auto 1fr auto; gap:6px 18px; }
  .svc__name{ grid-column:2 / span 2; }
  .svc__desc{ grid-column:2 / -1; grid-row:2; margin-top:10px; }
  .svc__tags{ grid-column:2 / -1; grid-row:3; }
  .svc__arrow{ grid-column:4; grid-row:1; }
}

/* ---------------- Work / horizontal reel ---------------- */
.work{ padding:clamp(70px,9vw,120px) 0 0; }
.work__head{ margin-bottom:clamp(36px,5vw,64px); }
.work__hint{ color:var(--muted); margin:18px 0 0; }
.work__pin{ position:relative; }
.work__sticky{
  position:sticky; top:0; height:100svh; display:flex; align-items:center; overflow:hidden;
}
.work__track{
  display:flex; gap:clamp(16px,2.4vw,38px); padding-inline:var(--pad);
  will-change:transform;
}
.card{
  flex:0 0 auto; width:clamp(260px,30vw,460px);
  transition:transform .7s var(--ease);
}
.card:nth-child(even){ transform:translateY(clamp(18px,4vh,52px)); }
.card__art{
  position:relative; aspect-ratio:4/5; overflow:hidden; border:1px solid var(--hair);
  background:var(--ink-3);
}
.card__art img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease), filter .6s; }
.card:hover .card__art img{ transform:scale(1.06); }
.card__art::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(80% 60% at 30% 20%, rgba(217,189,139,.32), transparent 60%),
    radial-gradient(70% 70% at 80% 85%, rgba(52,75,71,.9), transparent 65%),
    linear-gradient(150deg, var(--brand) 0%, var(--ink-2) 55%, #06090800 100%);
  transition:transform 1.2s var(--ease), opacity .6s;
  transform:scale(1.04);
}
/* anamorphic streak */
.card__art .card__scan::after{
  content:""; position:absolute; left:-30%; right:-30%; top:38%; height:2px;
  background:linear-gradient(90deg,transparent,rgba(180,214,255,.32),rgba(242,227,196,.5),rgba(180,214,255,.28),transparent);
  filter:blur(3px); opacity:.55;
  transform:rotate(-3deg);
}
.card__art[data-art="2"]::before{ background:radial-gradient(75% 55% at 70% 25%, rgba(217,189,139,.4), transparent 62%), linear-gradient(200deg,#1B2926,#0A0F0E); }
.card__art[data-art="3"]::before{ background:conic-gradient(from 200deg at 50% 60%, #0A0F0E, #344B47, #A98750, #0A0F0E); opacity:.85; }
.card__art[data-art="4"]::before{ background:linear-gradient(115deg,#0A0F0E 20%,#344B47 60%,#D9BD8B 140%); }
.card__art[data-art="5"]::before{ background:radial-gradient(60% 60% at 20% 80%, rgba(217,189,139,.45), transparent 60%), linear-gradient(20deg,#0A0F0E,#22322F); }
.card__art[data-art="6"]::before{ background:radial-gradient(90% 70% at 50% 0%, rgba(237,231,220,.22), transparent 55%), linear-gradient(180deg,#344B47,#0A0F0E); }
.card:hover .card__art::before{ transform:scale(1.08); }
.card__scan{
  position:absolute; inset:0; z-index:2; opacity:.5; mix-blend-mode:overlay;
  background:repeating-linear-gradient(180deg, rgba(255,255,255,.05) 0 1px, transparent 1px 4px);
}
.card__tc{
  position:absolute; z-index:4; left:22px; bottom:22px; color:rgba(237,231,220,.72);
  font-size:.62rem; letter-spacing:.18em;
  opacity:0; transform:translateY(6px); transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.card:hover .card__tc{ opacity:1; transform:none; }
.card__grid{
  position:absolute; inset:0; z-index:2;
  background-image:linear-gradient(var(--faint) 1px, transparent 1px), linear-gradient(90deg, var(--faint) 1px, transparent 1px);
  background-size:100% 33.33%, 33.33% 100%;
  opacity:.5;
}
.card__art::after{
  content:""; position:absolute; z-index:3; inset:14px;
  border:1px solid rgba(237,231,220,.18);
  clip-path:polygon(0 0,26px 0,26px 1px,1px 1px,1px 26px,0 26px,
                    100% 0,100% 26px,calc(100% - 1px) 26px,calc(100% - 1px) 1px,calc(100% - 26px) 1px,calc(100% - 26px) 0,
                    100% 100%,calc(100% - 26px) 100%,calc(100% - 26px) calc(100% - 1px),calc(100% - 1px) calc(100% - 1px),calc(100% - 1px) calc(100% - 26px),100% calc(100% - 26px),
                    0 100%,0 calc(100% - 26px),1px calc(100% - 26px),1px calc(100% - 1px),26px calc(100% - 1px),26px 100%);
  opacity:0; transition:opacity .5s;
}
.card:hover .card__art::after{ opacity:1; }
.card[data-play]{ cursor:pointer; }
.card__meta{ display:flex; justify-content:space-between; margin-top:16px; color:var(--gold); }
.card__title{
  font-family:var(--f-disp); font-weight:400; font-size:clamp(1.3rem,2.2vw,1.9rem);
  margin:6px 0 4px; letter-spacing:-.01em;
}
.card__sub{ margin:0; color:var(--muted); font-size:.9em; }
.card--cta{
  width:clamp(260px,26vw,380px); display:grid; align-content:center; gap:26px;
  padding:0 clamp(10px,2vw,30px);
}
.card--cta h3{
  font-family:var(--f-disp); font-style:italic; font-weight:400;
  font-size:clamp(1.8rem,3.4vw,2.9rem); line-height:1.05; margin:0; color:var(--gold);
}
.card--cta .btn{ justify-self:start; }

/* ---------------- Showreel band ---------------- */
.reelband{ position:relative; padding:clamp(90px,13vw,170px) 0; overflow:hidden; }
.reelband__bg{
  position:absolute; inset:-15% -10%;
  background:radial-gradient(46% 46% at 50% 50%, rgba(52,75,71,.6), rgba(52,75,71,.18) 55%, transparent 76%);
  filter:blur(30px);
}
.reelband__inner{ position:relative; display:flex; align-items:center; gap:clamp(30px,6vw,80px); flex-wrap:wrap; }
.playdisc{
  position:relative; flex:0 0 auto; width:clamp(130px,15vw,190px); aspect-ratio:1;
  display:grid; place-items:center; border-radius:50%;
  border:1px solid var(--hair);
  transition:background .5s var(--ease), border-color .5s;
}
.playdisc:hover{ background:rgba(217,189,139,.08); border-color:var(--gold); }
.playdisc__text{ position:absolute; inset:0; width:100%; height:100%; animation:spin 22s linear infinite; }
.playdisc__text text{
  font-family:var(--f-mono); font-size:7.4px; letter-spacing:.34em; fill:var(--gold);
  text-transform:uppercase;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
.playdisc__tri{
  width:0; height:0; margin-left:6px;
  border-left:18px solid var(--gold); border-block:11px solid transparent;
  transition:transform .5s var(--ease), border-left-color .4s;
}
.playdisc:hover .playdisc__tri{ transform:scale(1.25); border-left-color:var(--gold-hi); }
.reelband__title{
  font-family:var(--f-disp); font-weight:400; font-style:italic;
  font-size:clamp(1.7rem,4.6vw,3.6rem); line-height:1.12; margin:0; max-width:16ch;
}

/* ---------------- Process ---------------- */
.process{ padding:clamp(80px,11vw,160px) 0; }
.steps{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--faint); }
.step{ background:var(--ink); padding:clamp(26px,3vw,42px) clamp(20px,2.2vw,34px); position:relative; }
.step::after{
  content:""; position:absolute; inset:auto 0 0 0; height:2px; background:var(--gold);
  transform:scaleX(0); transform-origin:left; transition:transform .8s var(--ease);
}
.step:hover::after{ transform:scaleX(1); }
.step__n{ color:var(--gold); display:block; margin-bottom:20px; }
.step h3{
  font-family:var(--f-disp); font-weight:400; font-size:clamp(1.4rem,2.4vw,2.1rem);
  margin:0 0 12px; letter-spacing:-.01em;
}
.step p{ margin:0; color:var(--muted); font-size:.94em; }
@media (max-width:1000px){ .steps{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .steps{ grid-template-columns:1fr; } }

/* ---------------- Contact ---------------- */
.contact{ padding:clamp(80px,11vw,160px) 0 clamp(60px,8vw,110px); }
.contact__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(46px,7vw,120px); }
.contact__title{
  font-family:var(--f-disp); font-weight:400;
  font-size:clamp(2.6rem,7vw,5.6rem); line-height:.96; letter-spacing:-.03em; margin:0 0 clamp(40px,5vw,64px);
}
.contact__title em{ font-style:italic; color:var(--gold); }
.contact__list{ list-style:none; margin:0 0 34px; padding:0; }
.contact__list li{
  display:flex; justify-content:space-between; align-items:baseline; gap:20px;
  padding:15px 0; border-bottom:1px solid var(--faint);
}
.contact__list span{ color:var(--gold); }
.contact__list a,.contact__list b{ font-weight:500; text-align:right; transition:color .3s; }
.contact__list a:hover{ color:var(--gold); }
.contact__social{ display:flex; gap:26px; font-family:var(--f-mono); letter-spacing:.18em; text-transform:uppercase; font-size:.78rem; }
.contact__social a{ color:var(--muted); transition:color .3s; }
.contact__social a:hover{ color:var(--gold); }
.contact__social i{ font-style:normal; }

.form{ display:grid; grid-template-columns:1fr 1fr; gap:26px 22px; align-content:start; }
.field{ position:relative; }
.field--full{ grid-column:1 / -1; }
.field input,.field select,.field textarea{
  width:100%; background:transparent; border:0; border-bottom:1px solid var(--faint);
  color:var(--cream); font-family:var(--f-body); font-size:1rem;
  padding:14px 0 12px; border-radius:0; outline:none;
  transition:border-color .4s;
}
.field textarea{ resize:vertical; min-height:110px; }
.field select{ appearance:none; cursor:pointer; color:var(--cream); }
.field select option{ background:var(--ink-2); color:var(--cream); }
.field--select::after{
  content:"▾"; position:absolute; right:2px; bottom:14px; color:var(--gold); pointer-events:none;
}
.field label{
  position:absolute; left:0; top:14px; color:var(--muted); pointer-events:none;
  transition:transform .45s var(--ease), font-size .45s var(--ease), color .45s;
  transform-origin:left top;
}
.field label span{ opacity:.6; }
.field input:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:focus + label,
.field textarea:not(:placeholder-shown) + label{
  transform:translateY(-22px) scale(.72); color:var(--gold); letter-spacing:.1em;
}
.field--select label{ transform:translateY(-22px) scale(.72); color:var(--gold); letter-spacing:.1em; }
.field--select select{ padding-top:22px; }
.field input:focus,.field textarea:focus,.field select:focus{ border-color:var(--gold); }
.field.is-error input,.field.is-error textarea{ border-color:#C4614C; }
.hp{ position:absolute; left:-9999px; opacity:0; height:0; width:0; }
.form__foot{ display:flex; align-items:center; gap:24px; flex-wrap:wrap; margin-top:8px; }
.form__note{ color:var(--muted); margin:0; }
.form__status{ grid-column:1/-1; margin:0; font-family:var(--f-mono); letter-spacing:.14em; text-transform:uppercase; font-size:.78rem; }
.form__status.ok{ color:var(--gold); }
.form__status.bad{ color:#D77A64; }
@media (max-width:900px){
  .contact__grid{ grid-template-columns:1fr; }
  .form{ grid-template-columns:1fr; }
}

/* ---------------- Footer ---------------- */
.foot{ border-top:1px solid var(--faint); padding-top:clamp(30px,4vw,50px); overflow:hidden; }
.foot__mark{
  display:flex; gap:.12em; white-space:nowrap; user-select:none;
  font-family:var(--f-disp); font-weight:400; letter-spacing:-.04em;
  font-size:clamp(4rem,20vw,17rem); line-height:.8;
  color:transparent;
  -webkit-text-stroke:1px rgba(217,189,139,.34);
  padding-inline:var(--pad);
  will-change:transform;
}
.foot__mark span:nth-child(2){ -webkit-text-stroke:1px rgba(237,231,220,.08); }
.foot__bar{
  display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap;
  padding-block:26px 30px; color:var(--muted);
}
.foot__top{ color:var(--gold); }

/* ---------------- Lightbox ---------------- */
.lightbox{
  position:fixed; inset:0; z-index:9600; background:rgba(6,9,8,.92); backdrop-filter:blur(14px);
  display:grid; place-items:center; padding:var(--pad);
  opacity:0; transition:opacity .5s var(--ease);
}
.lightbox.is-open{ opacity:1; }
.lightbox__frame{
  width:min(1200px,100%); aspect-ratio:16/9; background:var(--ink-2);
  border:1px solid var(--hair); display:grid; place-items:center;
  transform:scale(.94); transition:transform .7s var(--ease);
}
.lightbox.is-open .lightbox__frame{ transform:none; }
.lightbox__frame iframe,.lightbox__frame video{ width:100%; height:100%; border:0; display:block; }
.lightbox__empty{ text-align:center; padding:30px; max-width:46ch; color:var(--muted); }
.lightbox__empty p:first-child{ color:var(--gold); margin-bottom:12px; }
.lightbox__empty code{ font-family:var(--f-mono); color:var(--cream); font-size:1em; letter-spacing:.06em; }
.lightbox__close{
  position:absolute; top:calc(var(--pad) * .5); right:calc(var(--pad) * .6);
  width:52px; height:52px; border:1px solid var(--hair); border-radius:50%; color:var(--gold);
  transition:background .4s, transform .4s;
}
.lightbox__close:hover{ background:var(--gold); color:var(--ink); transform:rotate(90deg); }

/* ---------------- Reduced motion ---------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .ch,.wd > i,[data-reveal]{ opacity:1 !important; transform:none !important; }
  .grain{ display:none; }
  .work__sticky{ position:static; height:auto; }
  .work__track{ overflow-x:auto; transform:none !important; padding-block:20px; }
}

/* =========================================================
   SHARED BITS ADDED FOR THE MULTI-PAGE BUILD
   ========================================================= */

.link{
  display:inline-flex; align-items:center; gap:8px; margin-top:8px;
  font-family:var(--f-mono); font-size:.78rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold); border-bottom:1px solid var(--hair); padding-bottom:4px;
  transition:border-color .4s, gap .4s var(--ease);
}
.link:hover{ border-color:var(--gold); gap:14px; }
.link i{ font-style:normal; }

.nav__links a.is-current{ color:var(--gold); }

.sec-head--split{
  display:flex; align-items:flex-end; justify-content:space-between; gap:30px; flex-wrap:wrap;
}
.work__headside{ display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
.work__headside .work__hint{ margin:0; }
@media (max-width:700px){ .work__headside .work__hint{ display:none; } }

/* ---------------- Page header (inner pages) ---------------- */
.phero{
  position:relative; overflow:hidden;
  padding:clamp(150px,17vw,240px) 0 clamp(50px,7vw,100px);
}
.phero--tight{ padding-bottom:clamp(30px,4vw,60px); }
.phero .wrap{ position:relative; }
.phero__kicker{ color:var(--gold); }
.phero__title{
  font-family:var(--f-disp); font-weight:400; text-wrap:balance;
  font-size:clamp(2.6rem,7.4vw,6.6rem); line-height:1; letter-spacing:-.03em; margin:0 0 clamp(24px,3vw,40px);
  max-width:16ch;
}
.phero__title em{ font-style:italic; color:var(--gold); }
.phero__lede{ max-width:52ch; color:var(--muted); font-size:clamp(1rem,1.35vw,1.2rem); margin:0; }

/* ---------------- Services (full page) ---------------- */
.svcfull{ padding:clamp(50px,7vw,90px) 0 clamp(70px,9vw,130px); }
.svcfull__row{
  display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr); gap:clamp(30px,5vw,90px);
  padding:clamp(40px,5vw,72px) 0; border-top:1px solid var(--faint);
  scroll-margin-top:110px;
}
.svcfull__side{ position:relative; }
.svcfull__num{ color:var(--gold); display:block; margin-bottom:18px; }
.svcfull__art{
  position:relative; aspect-ratio:4/3; border:1px solid var(--hair); overflow:hidden; background:var(--ink-3);
}
.svcfull__art::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(150deg, var(--brand) 0%, var(--ink-2) 60%, transparent 100%);
}
.svcfull__art[data-art="2"]::before{ background:radial-gradient(70% 60% at 70% 25%, rgba(217,189,139,.34), transparent 62%), linear-gradient(200deg,#1B2926,#0A0F0E); }
.svcfull__art[data-art="3"]::before{ background:conic-gradient(from 200deg at 50% 60%, #0A0F0E, #344B47, #A98750, #0A0F0E); opacity:.8; }
.svcfull__art[data-art="4"]::before{ background:linear-gradient(115deg,#0A0F0E 20%,#344B47 65%,#D9BD8B 145%); }
.svcfull__art[data-art="5"]::before{ background:radial-gradient(60% 60% at 20% 80%, rgba(217,189,139,.4), transparent 62%), linear-gradient(20deg,#0A0F0E,#22322F); }
.svcfull__art[data-art="6"]::before{ background:radial-gradient(90% 70% at 50% 0%, rgba(237,231,220,.2), transparent 55%), linear-gradient(180deg,#344B47,#0A0F0E); }
.svcfull__name{
  font-family:var(--f-disp); font-weight:400; letter-spacing:-.02em;
  font-size:clamp(1.9rem,4.4vw,3.6rem); line-height:1; margin:0 0 18px;
}
.svcfull__lede{ font-size:clamp(1.05rem,1.6vw,1.35rem); margin:0 0 18px; color:var(--cream); font-style:italic; font-family:var(--f-disp); }
.svcfull__text{ color:var(--muted); margin:0 0 26px; max-width:56ch; }
.svcfull__gets{ list-style:none; margin:0 0 22px; padding:0; display:grid; gap:0; }
.svcfull__gets li{
  padding:11px 0 11px 26px; border-bottom:1px solid var(--faint); position:relative; font-size:.96em;
}
.svcfull__gets li::before{
  content:"—"; position:absolute; left:0; color:var(--gold);
}
@media (max-width:900px){ .svcfull__row{ grid-template-columns:1fr; } .svcfull__art{ aspect-ratio:16/9; } }

/* ---------------- Values (about) ---------------- */
.values{ padding:clamp(70px,10vw,150px) 0; }
.values__grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--faint); }
.value{ background:var(--ink); padding:clamp(28px,3.2vw,46px); }
.value span{ color:var(--gold); display:block; margin-bottom:18px; }
.value h3{ font-family:var(--f-disp); font-weight:400; font-size:clamp(1.3rem,2.2vw,1.9rem); margin:0 0 12px; letter-spacing:-.01em; }
.value p{ margin:0; color:var(--muted); font-size:.96em; }
@media (max-width:800px){ .values__grid{ grid-template-columns:1fr; } }
.about__grid--wide{ grid-template-columns:1.25fr .75fr; }

/* ---------------- CTA band ---------------- */
.cta{ border-top:1px solid var(--faint); padding:clamp(70px,10vw,140px) 0; }
.cta__inner{ display:grid; grid-template-columns:1.2fr .8fr; gap:clamp(36px,6vw,90px); align-items:end; }
.cta__title{
  font-family:var(--f-disp); font-weight:400; letter-spacing:-.03em;
  font-size:clamp(2.2rem,6vw,4.8rem); line-height:.98; margin:0 0 20px;
}
.cta__sub{ color:var(--muted); max-width:44ch; margin:0; }
.cta__actions{ display:grid; gap:14px; justify-items:stretch; }
.cta__note{ color:var(--muted); margin:6px 0 0; }
@media (max-width:900px){ .cta__inner{ grid-template-columns:1fr; } }

/* ---------------- Work grid ---------------- */
.grid-sec{ padding:clamp(30px,4vw,60px) 0 clamp(70px,9vw,130px); }
.filters{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:clamp(30px,4vw,52px); }
.chip{
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted); border:1px solid var(--faint); border-radius:100px; padding:9px 18px;
  transition:color .4s, border-color .4s, background .4s;
}
.chip:hover{ color:var(--cream); border-color:var(--hair); }
.chip.is-on{ background:var(--gold); border-color:var(--gold); color:var(--ink); }
.wgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.6vw,44px); }
.wcard{ width:auto; }
.wcard.is-hidden{ display:none; }
.wcard .card__art{ aspect-ratio:4/3; }
.grid-sec__note{ color:var(--muted); margin:clamp(36px,5vw,64px) 0 0; }
.grid-sec__note a{ color:var(--gold); }
@media (max-width:1000px){ .wgrid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .wgrid{ grid-template-columns:1fr; } }
.wcard:nth-child(even){ transform:none; }

/* ---------------- Contact extras ---------------- */
.contact__book{
  margin-top:clamp(36px,5vw,60px); padding:clamp(24px,3vw,36px);
  border:1px solid var(--hair); background:linear-gradient(150deg, rgba(52,75,71,.4), transparent 70%);
}
.contact__book .mono{ color:var(--gold); margin:0 0 10px; }
.contact__book h3{ font-family:var(--f-disp); font-weight:400; font-size:clamp(1.4rem,2.4vw,2rem); margin:0 0 10px; }
.contact__book p{ color:var(--muted); margin:0 0 20px; max-width:40ch; }

/* ---------------- Footer columns ---------------- */
.foot__cols{
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(24px,4vw,60px);
  padding-block:clamp(30px,4vw,54px); border-top:1px solid var(--faint);
}
.foot__lbl{ color:var(--gold); margin:0 0 14px; }
.foot__cols p{ margin:0 0 6px; }
.foot__cols a:hover{ color:var(--gold); }
.foot__muted{ color:var(--muted); }
@media (max-width:800px){ .foot__cols{ grid-template-columns:repeat(2,1fr); } }

/* =========================================================
   BOOKING
   ========================================================= */
.booker{ padding:clamp(30px,4vw,60px) 0 clamp(70px,9vw,130px); }
.booker__grid{ display:grid; grid-template-columns:minmax(0,.72fr) minmax(0,1.6fr); gap:clamp(28px,4vw,64px); align-items:start; }

.rail{
  position:sticky; top:110px;
  border:1px solid var(--hair); padding:clamp(24px,2.6vw,34px);
  background:linear-gradient(160deg, rgba(52,75,71,.34), rgba(11,16,15,.2) 70%);
}
.rail__logo{ width:120px; margin-bottom:26px; }
.rail__title{ font-family:var(--f-disp); font-weight:400; font-size:clamp(1.5rem,2.4vw,2.1rem); margin:0 0 4px; letter-spacing:-.01em; }
.rail__sub{ color:var(--muted); margin:0 0 26px; font-size:.94em; }
.rail__list{ list-style:none; margin:0 0 24px; padding:0; }
.rail__list li{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:13px 0; border-bottom:1px solid var(--faint); }
.rail__list span{ color:var(--gold); }
.rail__list b{ font-weight:500; text-align:right; }
.rail__tz, .rail__hours{ color:var(--muted); margin:0 0 4px; }
@media (max-width:900px){ .booker__grid{ grid-template-columns:1fr; } .rail{ position:static; } }

.stepbar{
  display:flex; gap:clamp(14px,2.4vw,32px); list-style:none; margin:0 0 clamp(30px,4vw,50px); padding:0 0 18px;
  border-bottom:1px solid var(--faint); flex-wrap:wrap;
}
.stepbar li{
  display:flex; align-items:center; gap:10px; color:var(--muted);
  font-family:var(--f-mono); font-size:.76rem; letter-spacing:.2em; text-transform:uppercase;
  transition:color .4s;
}
.stepbar li span{
  width:26px; height:26px; border-radius:50%; border:1px solid var(--faint);
  display:grid; place-items:center; font-size:.66rem; letter-spacing:.06em;
  transition:background .4s, border-color .4s, color .4s;
}
.stepbar li.is-on{ color:var(--cream); }
.stepbar li.is-on span{ border-color:var(--gold); color:var(--gold); }
.stepbar li.is-done span{ background:var(--gold); border-color:var(--gold); color:var(--ink); }
.stepbar.is-complete li{ color:var(--muted); }

.step-pane{ animation:paneIn .7s var(--ease) both; }
@keyframes paneIn{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
.pane__h{ font-family:var(--f-disp); font-weight:400; font-size:clamp(1.4rem,2.6vw,2.2rem); margin:0 0 22px; letter-spacing:-.01em; }
.pane__h--sub{ margin-top:clamp(34px,4vw,52px); }
.pane__foot{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin-top:clamp(30px,4vw,46px); }
.btn[disabled]{ opacity:.34; pointer-events:none; }

.picks{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.pick{
  text-align:left; border:1px solid var(--faint); padding:clamp(20px,2.2vw,28px);
  display:grid; gap:8px; align-content:start; position:relative; overflow:hidden;
  transition:border-color .45s var(--ease), background .45s var(--ease), transform .45s var(--ease);
}
.pick:hover{ border-color:var(--hair); transform:translateY(-3px); }
.pick.is-on{ border-color:var(--gold); background:linear-gradient(160deg, rgba(217,189,139,.12), transparent 70%); }
.pick__ico{ width:30px; height:30px; border:1px solid var(--gold); border-radius:50%; display:grid; place-items:center; margin-bottom:6px; position:relative; }
.pick__ico::after{ content:""; position:absolute; }
.pick__ico[data-ico="video"]::after{ width:0; height:0; border-left:9px solid var(--gold); border-block:6px solid transparent; margin-left:3px; }
.pick__ico[data-ico="phone"]::after{ width:11px; height:11px; border:2px solid var(--gold); border-radius:3px 3px 8px 3px; }
.pick__ico[data-ico="studio"]::after{ width:12px; height:10px; border:2px solid var(--gold); border-top-width:6px; }
.pick__name{ font-family:var(--f-disp); font-size:1.24rem; }
.pick__note{ color:var(--muted); font-size:.86em; line-height:1.5; }
@media (max-width:760px){ .picks{ grid-template-columns:1fr; } }

.chiprow{ display:flex; gap:10px; flex-wrap:wrap; }

.timegrid{ display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr); gap:clamp(20px,2.6vw,38px); align-items:start; }
@media (max-width:820px){ .timegrid{ grid-template-columns:1fr; } }
.cal{ border:1px solid var(--faint); padding:clamp(18px,2.2vw,26px); }
.cal__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.cal__month{ font-family:var(--f-disp); font-weight:400; font-size:clamp(1.2rem,2vw,1.7rem); margin:0; }
.cal__nav{
  width:40px; height:40px; border:1px solid var(--faint); border-radius:50%; color:var(--gold);
  transition:background .4s, border-color .4s, color .4s;
}
.cal__nav:hover:not([disabled]){ background:var(--gold); border-color:var(--gold); color:var(--ink); }
.cal__nav[disabled]{ opacity:.25; pointer-events:none; }
.cal__dow{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; color:var(--muted); margin-bottom:8px; }
.cal__dow span{ text-align:center; font-size:.64rem; }
.cal__grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; min-height:150px; }
.cal__loading{ grid-column:1/-1; color:var(--muted); text-align:center; padding:40px 0; margin:0; }
.cal__pad{ aspect-ratio:1; }
.cal__day{
  aspect-ratio:1; display:grid; place-items:center; position:relative;
  border:1px solid transparent; border-radius:4px; color:var(--cream);
  font-family:var(--f-mono); font-size:.9rem; letter-spacing:.04em;
  transition:background .3s, border-color .3s, color .3s;
}
.cal__day i{ position:absolute; bottom:7px; width:4px; height:4px; border-radius:50%; background:var(--gold); opacity:.8; }
.cal__day:hover{ border-color:var(--gold); }
.cal__day.is-on{ background:var(--gold); color:var(--ink); border-color:var(--gold); }
.cal__day.is-on i{ background:var(--ink); }
.cal__day.is-off{ color:rgba(237,231,220,.2); pointer-events:none; }
.cal__day.is-off i{ display:none; }
.cal__legend{ color:var(--muted); margin:18px 0 0; display:flex; align-items:center; gap:8px; }
.dot{ width:6px; height:6px; border-radius:50%; display:inline-block; }
.dot--free{ background:var(--gold); }
.dot--busy{ background:rgba(237,231,220,.2); }

.slots{ margin-top:0; }
.slots .pane__h{ font-size:clamp(1.1rem,1.7vw,1.5rem); margin-bottom:16px; }
.slots__list{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:8px;
  scrollbar-width:thin; scrollbar-color:var(--hair) transparent;
}
.slots__list::-webkit-scrollbar{ width:5px; }
.slots__list::-webkit-scrollbar-thumb{ background:var(--hair); border-radius:5px; }
.slot{
  border:1px solid var(--faint); padding:12px 8px; border-radius:4px;
  font-family:var(--f-mono); font-size:.82rem; letter-spacing:.12em; color:var(--cream);
  transition:border-color .35s, background .35s, color .35s;
}
.slot:hover{ border-color:var(--gold); color:var(--gold); }
.slot.is-on{ background:var(--gold); border-color:var(--gold); color:var(--ink); }

.form--book{ margin-top:8px; }
.form--book .field--full{ grid-column:1/-1; }

.done{ text-align:left; max-width:56ch; }
.done__mark{
  width:64px; height:64px; border-radius:50%; border:1px solid var(--gold);
  display:grid; place-items:center; margin-bottom:28px;
  animation:pop .7s var(--ease) both;
}
.done__mark i{
  width:20px; height:11px; border-left:2px solid var(--gold); border-bottom:2px solid var(--gold);
  transform:rotate(-45deg) translate(1px,-3px);
}
@keyframes pop{ from{ transform:scale(.6); opacity:0; } to{ transform:none; opacity:1; } }
.done__h{ font-family:var(--f-disp); font-weight:400; font-size:clamp(2rem,4.4vw,3.4rem); margin:0 0 10px; letter-spacing:-.02em; }
.done__when{ font-family:var(--f-disp); font-style:italic; color:var(--gold); font-size:clamp(1.1rem,2vw,1.5rem); margin:0 0 30px; }
.done__list{ list-style:none; margin:0 0 32px; padding:0; }
.done__list li{ display:flex; justify-content:space-between; gap:16px; padding:13px 0; border-bottom:1px solid var(--faint); }
.done__list span{ color:var(--gold); }
.done__actions{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:24px; }
.done__note{ color:var(--muted); font-size:.9em; margin:0; }
.done__note a{ color:var(--gold); }

/* =========================================================
   ADMIN
   ========================================================= */
.page-admin{ background:var(--ink-2); }
.page-admin .grain,.page-admin .vignette{ display:none; }
.admin-login{ display:grid; place-items:center; min-height:100svh; }
.adm__login{
  width:min(380px,90vw); border:1px solid var(--hair); padding:36px;
  background:var(--ink); display:grid; gap:20px;
}
.adm__login img{ width:150px; }
.adm__login .mono{ color:var(--gold); margin:0; }
.adm{ max-width:1400px; margin-inline:auto; padding:32px clamp(16px,3vw,40px) 80px; }
.adm__head{ display:flex; align-items:center; gap:24px; padding-bottom:20px; border-bottom:1px solid var(--faint); }
.adm__head img{ width:130px; }
.adm__head h1{ color:var(--gold); margin:0; font-size:.8rem; }
.adm__head form{ margin-left:auto; }
.adm__x{
  font-family:var(--f-mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); border:1px solid var(--faint); border-radius:100px; padding:6px 14px;
  transition:color .3s, border-color .3s;
}
.adm__x:hover{ color:var(--gold); border-color:var(--gold); }
.adm__msg{ color:var(--gold); margin:20px 0 0; }
.adm__sec{ margin-top:44px; }
.adm__sec h2{ color:var(--gold); margin:0 0 16px; font-size:.76rem; }
.adm__empty{ color:var(--muted); }
.adm__table{ width:100%; border-collapse:collapse; font-size:.9rem; }
.adm__table th{
  text-align:left; font-family:var(--f-mono); font-weight:500; font-size:.66rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted); padding:10px 14px 10px 0; border-bottom:1px solid var(--faint);
}
.adm__table td{ padding:16px 14px 16px 0; border-bottom:1px solid var(--faint); vertical-align:top; }
.adm__table td span.mono{ display:block; color:var(--muted); font-size:.64rem; margin-top:4px; }
.adm__table tr.is-dead{ opacity:.4; }
.adm__notes{ max-width:34ch; color:var(--muted); }
.adm__tag{ font-family:var(--f-mono); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.adm__block{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-bottom:20px; }
.adm__block input{
  background:transparent; border:1px solid var(--faint); color:var(--cream);
  padding:12px 14px; font-family:var(--f-body); font-size:.9rem; border-radius:4px;
}
.adm__blocks{ list-style:none; margin:0; padding:0; }
.adm__blocks li{ display:flex; align-items:center; gap:14px; padding:12px 0; border-bottom:1px solid var(--faint); }
.adm__blocks form{ margin-left:auto; }

/* =========================================================
   MOBILE / TOUCH
   Everything below is phone-and-tablet correction: swipeable
   reel, comfortable tap targets, readable labels, safe areas.
   ========================================================= */

/* --- notch / home-indicator safe areas (viewport-fit=cover) --- */
.nav{ padding-left:max(var(--pad), env(safe-area-inset-left)); padding-right:max(var(--pad), env(safe-area-inset-right)); }
.menu__list, .menu__foot{ padding-left:max(var(--pad), env(safe-area-inset-left)); padding-right:max(var(--pad), env(safe-area-inset-right)); }
.foot__bar{ padding-bottom:max(30px, calc(env(safe-area-inset-bottom) + 18px)); }

/* --- the work reel becomes a real swipeable strip --- */
.work__pin.is-swipe .work__sticky{ position:static; height:auto; overflow:visible; }
.work__pin.is-swipe .work__track{
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  padding-block:8px 26px;
  transform:none !important;
}
.work__pin.is-swipe .work__track::-webkit-scrollbar{ display:none; }
.work__pin.is-swipe .card{ scroll-snap-align:center; width:min(78vw, 340px); }
.work__pin.is-swipe .card:nth-child(even){ transform:none; }
.work__pin.is-swipe .card--cta{ width:min(70vw, 300px); }

/* --- iOS refuses not to zoom on inputs under 16px --- */
@media (max-width:1024px){
  .field input, .field select, .field textarea, .adm__block input, .adm__login input{ font-size:16px; }
}

@media (max-width:900px){
  /* labels that were sized for a desktop viewing distance */
  .mono{ font-size:.78rem; }
  .kicker{ font-size:.76rem; letter-spacing:.2em; }
  .svc__tags li{ font-size:.72rem; padding:5px 12px; }
  .card__tc{ font-size:.7rem; }
  .cal__dow span{ font-size:.7rem; }
  .stepbar li{ font-size:.74rem; }
  .chip{ font-size:.76rem; padding:11px 18px; }

  /* comfortable targets: nothing tappable under ~44px */
  .contact__list li, .about__facts li, .rail__list li, .done__list li, .foot__cols p{
    min-height:44px; align-items:center;
  }
  .contact__list a, .contact__social a, .foot__cols a, .foot__top, .link, .grid-sec__note a{
    display:inline-flex; align-items:center; min-height:44px;
  }
  .foot__cols p{ display:flex; margin:0; }
  .contact__social{ gap:20px; flex-wrap:wrap; }

  /* long values (emails, addresses) get their own line instead of squeezing */
  .contact__list li, .about__facts li, .rail__list li, .done__list li{
    flex-wrap:wrap; row-gap:2px;
  }
  .contact__list li > *, .about__facts li > *, .rail__list li > *, .done__list li > *{ text-align:left; }
  .contact__list span, .about__facts span, .rail__list span, .done__list span{ flex:1 0 100%; }

  /* hero sits a little higher so the headline is above the fold */
  .hero{ padding-top:118px; min-height:94svh; }
  .hero__foot{ gap:24px; }
  .hero__actions{ width:100%; }
  .hero__actions .btn{ flex:1 1 auto; justify-content:center; }

  .reelband__inner{ gap:28px; }
  .cta__actions .btn{ width:100%; }
}

@media (max-width:560px){
  .foot__cols{ grid-template-columns:1fr; gap:22px; }
  .foot__cols > div:last-child .btn{ width:100%; justify-content:center; }
  .foot__bar{ flex-direction:column; align-items:flex-start; gap:10px; }
  .pane__foot .btn{ flex:1 1 auto; justify-content:center; }
  .slots__list{ grid-template-columns:repeat(auto-fill,minmax(88px,1fr)); }
  .done__actions .btn{ width:100%; justify-content:center; }
}

/* short screens in landscape shouldn't force a full-height hero */
@media (max-height:520px) and (orientation:landscape){
  .hero{ min-height:auto; padding-top:100px; padding-bottom:40px; }
  .scrollcue{ display:none; }
}

/* --- admin on a phone --- */
@media (max-width:820px){
  .adm__table{ display:block; }
  .adm__table thead{ display:none; }
  .adm__table tbody, .adm__table tr{ display:block; }
  .adm__table tr{ border:1px solid var(--faint); padding:14px; margin-bottom:14px; }
  .adm__table td{ display:block; border:0; padding:6px 0; }
  .adm__table td:first-child b{ color:var(--gold); }
  .adm__notes{ max-width:none; }
  .adm__head{ flex-wrap:wrap; gap:14px; }
  .adm__block{ flex-direction:column; align-items:stretch; }
  .adm__block .btn{ justify-content:center; }
}

/* =========================================================
   NAGHAM — chat assistant
   ========================================================= */
.hp-label{ position:absolute; left:-9999px; }

.chat-launch{
  position:fixed; z-index:9300;
  right:max(20px, env(safe-area-inset-right));
  bottom:max(20px, env(safe-area-inset-bottom));
  display:flex; align-items:center; gap:12px;
  padding:11px 20px 11px 12px; border-radius:100px;
  border:1px solid var(--hair);
  background:rgba(13,20,19,.86); backdrop-filter:blur(16px) saturate(150%);
  color:var(--cream); text-align:left;
  box-shadow:0 18px 44px rgba(0,0,0,.5);
  transition:border-color .45s var(--ease), transform .55s var(--ease), background .45s, opacity .5s var(--ease);
  /* stays out of the way until the visitor starts scrolling, so it never
     lands on top of the hero's own buttons */
  opacity:0; transform:translateY(120%); pointer-events:none;
}
.chat-launch.is-ready{ opacity:1; transform:none; pointer-events:auto; }
.chat-launch.is-ready:hover{ border-color:var(--gold); transform:translateY(-2px); }
.chat-launch__txt{ display:grid; line-height:1.25; }
.chat-launch__txt b{ font-family:var(--f-disp); font-weight:400; font-size:1.02rem; }
.chat-launch__txt i{
  font-family:var(--f-mono); font-style:normal; font-size:.66rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
}
.chat-launch__x{ display:none; font-size:.9rem; color:var(--gold); }
.chat-launch.is-open .chat-launch__txt, .chat-launch.is-open .chat-ava{ display:none; }
.chat-launch.is-open .chat-launch__x{ display:block; }
.chat-launch.is-open{ padding:16px 20px; }

.chat-ava{
  flex:0 0 auto; width:38px; height:38px; border-radius:50%;
  display:grid; place-items:center; color:var(--ink);
  background:linear-gradient(140deg, var(--gold-hi), var(--gold) 55%, var(--gold-lo));
}
.chat-ava svg{ width:22px; height:22px; }
.chat-ava--lg{ width:44px; height:44px; }
.chat-ava--lg svg{ width:26px; height:26px; }

.chat{
  position:fixed; z-index:9250;
  right:max(20px, env(safe-area-inset-right));
  bottom:calc(max(20px, env(safe-area-inset-bottom)) + 78px);
  width:min(392px, calc(100vw - 40px));
  height:min(600px, calc(100svh - 190px));
  display:flex; flex-direction:column; overflow:hidden;
  border:1px solid var(--hair); border-radius:18px;
  background:linear-gradient(170deg, #101917 0%, #0B100F 60%);
  box-shadow:0 30px 70px rgba(0,0,0,.62);
  opacity:0; transform:translateY(18px) scale(.98);
  transition:opacity .45s var(--ease), transform .5s var(--ease);
}
.chat.is-open{ opacity:1; transform:none; }
.chat[hidden]{ display:none; }

.chat__head{
  display:flex; align-items:center; gap:12px; padding:16px 16px 14px;
  border-bottom:1px solid var(--faint);
  background:linear-gradient(180deg, rgba(52,75,71,.34), transparent);
}
.chat__who{ display:grid; line-height:1.3; }
.chat__who b{ font-family:var(--f-disp); font-weight:400; font-size:1.16rem; }
.chat__who .mono{ font-size:.68rem; color:var(--muted); letter-spacing:.13em; }
.chat__close{
  margin-left:auto; width:34px; height:34px; border-radius:50%;
  border:1px solid var(--faint); color:var(--muted);
  transition:color .3s, border-color .3s, transform .3s;
}
.chat__close:hover{ color:var(--gold); border-color:var(--gold); transform:rotate(90deg); }

.chat__log{
  flex:1 1 auto; overflow-y:auto; padding:18px 16px 6px;
  display:flex; flex-direction:column; gap:10px;
  scrollbar-width:thin; scrollbar-color:var(--hair) transparent;
  overscroll-behavior:contain;
}
.chat__log::-webkit-scrollbar{ width:5px; }
.chat__log::-webkit-scrollbar-thumb{ background:var(--hair); border-radius:5px; }

.msg{ display:flex; animation:msgIn .4s var(--ease) both; }
@keyframes msgIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
.msg p{
  margin:0; max-width:84%; padding:11px 15px; border-radius:16px;
  font-size:.94rem; line-height:1.55;
}
.msg--bot p{
  background:rgba(52,75,71,.4); border:1px solid var(--faint);
  border-bottom-left-radius:5px; color:var(--cream);
}
.msg--me{ justify-content:flex-end; }
.msg--me p{
  background:var(--gold); color:var(--ink); font-weight:500;
  border-bottom-right-radius:5px;
}
.msg a{ color:var(--gold); border-bottom:1px solid var(--hair); }
.msg--me a{ color:var(--ink); border-color:rgba(11,16,15,.4); }
.msg--typing p{ display:flex; gap:5px; padding:15px; }
.msg--typing i{
  width:6px; height:6px; border-radius:50%; background:var(--gold); opacity:.5;
  animation:blip 1.1s ease-in-out infinite;
}
.msg--typing i:nth-child(2){ animation-delay:.16s; }
.msg--typing i:nth-child(3){ animation-delay:.32s; }
@keyframes blip{ 0%,100%{ opacity:.28; transform:translateY(0); } 50%{ opacity:1; transform:translateY(-3px); } }

.chat__quick{ display:flex; flex-wrap:wrap; gap:7px; padding:10px 16px 4px; }
.chat__quick.is-empty{ padding:0; }
.chat-chip{
  border:1px solid var(--hair); border-radius:100px; padding:8px 14px;
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--cream); transition:background .35s, color .35s, border-color .35s;
}
.chat-chip:hover{ background:var(--gold); border-color:var(--gold); color:var(--ink); }
.chat-chip.is-gold{ background:var(--gold); border-color:var(--gold); color:var(--ink); }
.chat-chip.is-gold:hover{ background:var(--gold-hi); }

.chat__bar{ display:flex; gap:8px; align-items:center; padding:12px 16px 6px; }
.chat__bar input#chatInput{
  flex:1 1 auto; background:transparent; border:1px solid var(--faint); border-radius:100px;
  padding:12px 16px; color:var(--cream); font-family:var(--f-body); font-size:.95rem; outline:none;
  transition:border-color .35s;
}
.chat__bar input#chatInput:focus{ border-color:var(--gold); }
.chat__bar input#chatInput::placeholder{ color:var(--muted); }
.chat__bar button{
  flex:0 0 auto; width:42px; height:42px; border-radius:50%;
  background:var(--gold); color:var(--ink); font-size:1.1rem;
  transition:background .35s, transform .35s;
}
.chat__bar button:hover{ background:var(--gold-hi); transform:translateY(-2px); }
.chat__foot{ margin:0; padding:4px 16px 14px; color:var(--muted); font-size:.68rem; letter-spacing:.1em; }
.chat__foot a{ color:var(--gold); }

@media (max-width:620px){
  .chat{
    right:0; left:0; bottom:0; top:0;
    width:100%; height:100svh; border-radius:0; border:0;
    padding-top:env(safe-area-inset-top);
  }
  .chat__log{ padding-bottom:4px; }
  .chat__foot{ padding-bottom:max(14px, env(safe-area-inset-bottom)); }
  .chat-launch{ padding:12px; gap:0; }
  .chat-launch__txt{ display:none; }
  .chat-launch.is-open{ display:none; }
  .msg p{ max-width:88%; font-size:.98rem; }
  .chat-chip{ font-size:.74rem; padding:10px 15px; }
  .chat__who .mono{ font-size:.72rem; }
  .chat__foot{ font-size:.72rem; }
  .chat__foot a{ display:inline-block; padding:4px 0; }
}

@media (prefers-reduced-motion:reduce){
  .chat-launch, .msg{ animation:none; }
  .msg--typing i{ animation:none; }
}

/* --- the quiet nudge above the launcher (she never opens herself) --- */
.chat-tease{
  position:fixed; z-index:9290;
  right:max(20px, env(safe-area-inset-right));
  bottom:calc(max(20px, env(safe-area-inset-bottom)) + 78px);
  max-width:min(280px, calc(100vw - 40px));
  display:flex; align-items:flex-start; gap:10px;
  padding:13px 12px 13px 16px; border-radius:16px 16px 4px 16px;
  border:1px solid var(--hair);
  background:rgba(13,20,19,.92); backdrop-filter:blur(16px);
  box-shadow:0 16px 40px rgba(0,0,0,.5);
  cursor:pointer;
  opacity:0; transform:translateY(10px);
  transition:opacity .5s var(--ease), transform .5s var(--ease), border-color .4s;
}
.chat-tease.is-on{ opacity:1; transform:none; }
.chat-tease:hover{ border-color:var(--gold); }
.chat-tease[hidden]{ display:none; }
.chat-tease p{ margin:0; font-size:.88rem; line-height:1.45; color:var(--cream); }
.chat-tease button{
  flex:0 0 auto; width:20px; height:20px; border-radius:50%;
  color:var(--muted); font-size:.66rem; line-height:1;
  transition:color .3s;
}
.chat-tease button:hover{ color:var(--gold); }
@media (max-width:620px){
  .chat-tease{ bottom:calc(max(20px, env(safe-area-inset-bottom)) + 74px); }
}