/* ============================================================
   SITE TEMPLATE — set the palette below, per brand (never reuse the last one)
   warm paper · near-black ink · one clay accent · giant lowercase type
   ============================================================ */
:root{
  /* veladigital — derived on tone (L*), not HSL. See memory: veladigital-studio-site.
     This is a DARK system, so --paper is the near-black ground and --ink is near-white.
     Cool neutral ramp, hue 220, saturation 22% (darkest) -> 2% (lightest).            */
  --paper:#07090C;         /* ground          L* 2.4  · ink contrast 18.26:1 */
  --paper-2:#111319;       /* surface 1       L* 6    */
  --paper-3:#181C23;       /* surface 2       L* 10   */
  --ink:#F5F5F5;           /* primary text    L* 96.5 */
  --ink-soft:#ADB1B8;      /* secondary text  L* 72   · 9.24:1 on ground */
  --muted:#848C9B;         /* tertiary text   L* 58   · 5.88:1 on ground — passes body */
  --accent:#DE2E0C;        /* vermilion       L* 48.9 · white body text 4.66:1
                              ONE job only: "act now". Never decorative.
                              ⚠ carries LARGE text only — above L* 49.8 white body fails. */
  --accent-2:#E8330E;      /* accent hover    L* 51.3 */
  --line:#2A303D;          /* hairline        */
  --line-2:#3B4251;        /* border default  */
  --line-3:#515A6B;        /* border strong   */
  --screen-light:#CFE0FF;  /* emission inside the 3D only — never a fill */

  --font-sans:'Heebo',system-ui,sans-serif;   /* ONE family. Signature move: 2/4 of the flagship tier */
  --radius:0;                                 /* committed lever — 0, never 8-16 (the slop default) */
  --hairline:1px;

  /* RESTRICTED SCALE — five steps, nothing between. The reference tier renders
     2-3 sizes on a whole page; the template shipped 40 clamp() values, which is
     what "flat, templated hierarchy" actually looks like under measurement.   */
  --fs-display:clamp(2.6rem,8.4vw,8.6rem);
  --fs-head:clamp(2.2rem,6vw,5rem);
  --fs-title:clamp(1.4rem,3.2vw,2.6rem);
  --fs-body:1.05rem;
  --fs-label:.72rem;

  --pad:clamp(1.25rem,4.5vw,4rem);
  --maxw:1500px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
html,body{height:100%}
body{background:var(--paper);color:var(--ink);
  font-family:var(--font-sans);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
::selection{background:var(--accent);color:var(--ink)}

.display{font-family:var(--font-sans);font-weight:200;
  letter-spacing:0;line-height:.9;text-transform:none}
.mono{font-family:var(--font-sans);font-weight:500;
  font-size:var(--fs-label);letter-spacing:0;text-transform:none;color:var(--muted)}
.accent{color:var(--accent)}
em{font-style:normal;color:var(--accent)}

/* film grain, very subtle on light */
.grain{position:fixed;inset:0;z-index:120;pointer-events:none;opacity:.055;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------------- nav ---------------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;
  justify-content:space-between;padding:1.15rem var(--pad);
  mix-blend-mode:difference;color:var(--ink);transition:opacity .4s}
.nav a{color:var(--ink)}
.nav__brand{font-family:var(--font-sans);font-weight:800;font-size:var(--fs-body);letter-spacing:0}
.nav__links{display:flex;align-items:center;gap:clamp(1rem,2.4vw,2rem);font-size:var(--fs-label);letter-spacing:0}
.nav__links a{opacity:.8;transition:opacity .2s}
.nav__links a:hover{opacity:1}
.nav__cta{border:1px solid rgba(255,255,255,.5);padding:.5rem .95rem;border-radius:var(--radius);opacity:1!important}
@media(max-width:720px){.nav__links a:not(.nav__cta){display:none}}

/* ============================================================
   HERO — the scroll-scrub film (old door → build → reveal → drone+car)
   ============================================================ */
.film{position:relative;height:420vh}                 /* scroll length of the film (build + orbit + reveal + sunset) */
.film__stage{position:sticky;top:0;height:100vh;overflow:hidden;background:var(--paper)}
.film__canvas{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover}
.film__scrim{position:absolute;inset:0;pointer-events:none;
  /* RTL: the type hangs off the right edge, so that side needs a reading scrim —
     otherwise a bright panel drifts under the headline and eats it */
  background:
    linear-gradient(270deg,rgba(7,9,12,.88) 0%,rgba(7,9,12,.5) 24%,transparent 52%),
    linear-gradient(180deg,rgba(7,9,12,.34) 0%,transparent 22% 60%,rgba(7,9,12,.55) 100%)}

/* type beats over the film */
.beat{position:absolute;left:var(--pad);right:var(--pad);z-index:5;color:var(--ink);
  will-change:opacity,transform;pointer-events:none}
.beat--tl{top:20vh}
.beat--c{top:50%;transform:translateY(-50%);text-align:center;left:0;right:0;padding:0 var(--pad)}
.beat--bl{bottom:14vh}
.beat :is(h1,h2){font-family:var(--font-sans);font-weight:800;letter-spacing:0;
  line-height:.92;text-transform:none;text-shadow:0 2px 40px rgba(0,0,0,.35)}
.beat--tl :is(h1,h2),.beat--bl :is(h1,h2){font-size:var(--fs-head);max-width:16ch}
.beat--c :is(h1,h2){font-size:var(--fs-display)}
.beat p{margin-top:1rem;max-width:34ch;font-size:var(--fs-body);line-height:1.5;
  color:rgba(245,245,245,.86);text-shadow:0 1px 20px rgba(0,0,0,.4)}
.beat--c p{margin-inline:auto}
.beat__cta{pointer-events:auto;display:inline-block;margin-top:1.6rem;font-weight:600;font-size:var(--fs-body);
  padding:.85rem 1.7rem;border-radius:var(--radius);background:var(--accent);color:var(--ink);transition:transform .18s}
.beat__cta:hover{transform:translateY(-2px)}

.film__cue{position:absolute;left:50%;bottom:2.4vh;translate:-50% 0;z-index:6;color:rgba(245,245,245,.7)}
.film__cue i{display:block;width:1px;height:36px;margin:.5rem auto 0;background:linear-gradient(rgba(245,245,245,.9),transparent);animation:cue 1.9s ease-in-out infinite}
@keyframes cue{0%,100%{transform:scaleY(.35);opacity:.4;transform-origin:top}50%{transform:scaleY(1);opacity:1}}

/* loader while frames buffer */
.filmload{position:absolute;inset:0;z-index:8;display:grid;place-items:center;background:var(--paper);
  color:rgba(245,245,245,.7);transition:opacity .6s}
.filmload.hide{opacity:0;pointer-events:none}

/* ============================================================
   EDITORIAL BODY
   ============================================================ */
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
section{position:relative}
.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}.film__cue i{animation:none}}

.eyebrow{display:flex;align-items:center;gap:.7rem;margin-bottom:1.6rem}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--accent)}

/* — lede / manifesto — */
.lede{padding-block:clamp(6rem,15vh,12rem) clamp(4rem,9vh,7rem)}
.lede__big{font-family:var(--font-sans);font-weight:800;letter-spacing:0;
  line-height:1.02;text-transform:none;font-size:var(--fs-head);max-width:20ch}
.lede__big span{color:var(--muted)}

/* — index list (services) — */
.idx{border-top:1px solid var(--line)}
.idx__row{display:grid;grid-template-columns:4rem 1fr auto;gap:1.5rem;align-items:baseline;
  padding:clamp(1.4rem,3vw,2.4rem) 0;border-bottom:1px solid var(--line);transition:padding .3s}
.idx__row:hover{padding-left:1rem}
.idx__no{font-family:var(--font-sans);font-size:var(--fs-label);color:var(--muted);letter-spacing:0}
.idx__t{font-family:var(--font-sans);font-weight:700;font-size:var(--fs-title);
  letter-spacing:0;line-height:1.05}
.idx__d{color:var(--ink-soft);font-size:var(--fs-body);line-height:1.55;max-width:46ch;margin-top:.5rem}
.idx__tag{font-size:var(--fs-label);letter-spacing:0;text-transform:none;color:var(--muted);white-space:nowrap}

/* — section heads — */
.head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:1rem;
  padding-top:clamp(5rem,11vh,9rem);margin-bottom:clamp(2rem,5vh,4rem)}
.head h2{font-family:var(--font-sans);font-weight:800;letter-spacing:0;
  line-height:.95;text-transform:none;font-size:var(--fs-head);max-width:14ch}

/* — horizontal door-styles gallery — */
.gal{overflow:hidden}
.gal__track{display:flex;gap:clamp(1rem,2vw,2rem);padding:0 var(--pad) clamp(4rem,9vh,7rem);will-change:transform}
.gcard{position:relative;flex:0 0 clamp(300px,42vw,620px);aspect-ratio:4/5;border-radius:var(--radius);overflow:hidden;background:var(--paper-2)}
.gcard img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.gcard:hover img{transform:scale(1.05)}
.gcard__cap{position:absolute;left:0;right:0;bottom:0;padding:1.4rem 1.5rem;color:var(--ink);
  background:linear-gradient(0deg,rgba(0,0,0,.6),transparent);z-index:2}
.gcard__cap h3{font-family:var(--font-sans);font-weight:700;font-size:var(--fs-title);letter-spacing:0}
.gcard__cap p{font-size:var(--fs-label);opacity:.82;margin-top:.2rem}
.gcard__no{position:absolute;top:1.1rem;left:1.3rem;z-index:2;color:var(--ink);font-size:var(--fs-label);letter-spacing:0;opacity:.85}

/* — process — */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-bottom:clamp(4rem,9vh,7rem)}
.step{background:var(--paper);padding:clamp(1.8rem,3vw,2.6rem)}
.step__no{font-family:var(--font-sans);font-weight:800;font-size:var(--fs-title);color:var(--accent);line-height:1}
.step h3{font-family:var(--font-sans);font-weight:700;font-size:var(--fs-title);margin:.9rem 0 .5rem}
.step p{color:var(--ink-soft);font-size:var(--fs-body);line-height:1.55}

/* — area pills — */
.pills{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:clamp(4rem,9vh,7rem)}
.pills span{border:1px solid var(--line);border-radius:var(--radius);padding:.55rem 1.1rem;font-size:var(--fs-body);color:var(--ink-soft)}
.pills span.home{background:var(--paper-2);color:var(--ink);border-color:var(--line-2)}

/* — reviews — */
.revs{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.4rem;margin-bottom:clamp(4rem,9vh,7rem)}
.rev{border:1px solid var(--line);border-radius:var(--radius);padding:1.8rem}
.rev__stars{color:var(--accent);letter-spacing:0;margin-bottom:.9rem}
.rev p{font-size:var(--fs-body);line-height:1.5;margin-bottom:1.1rem}
.rev__who{font-size:var(--fs-label);color:var(--muted)}

/* — CTA — */
.cta{background:var(--paper-2);color:var(--ink);
  padding:clamp(3.5rem,9vw,8rem) clamp(1.5rem,6vw,6rem)}
.cta h2{font-family:var(--font-sans);font-weight:800;letter-spacing:0;
  line-height:.95;text-transform:none;font-size:var(--fs-head);max-width:16ch}
.cta em{color:var(--accent)}
.cta__row{display:flex;flex-wrap:wrap;gap:2.5rem;margin-top:2.6rem}
.cta__row a{display:block}
.cta__row span{display:block}
.cta__row b{font-family:var(--font-sans);font-weight:700;font-size:var(--fs-title)}

/* — footer — */
.foot{padding:clamp(3rem,7vh,5rem) var(--pad);display:flex;justify-content:space-between;flex-wrap:wrap;gap:1.5rem;
  border-top:1px solid var(--line);color:var(--muted);font-size:var(--fs-label)}
.foot b{font-family:var(--font-sans);font-weight:800;font-size:var(--fs-body);color:var(--ink);display:block;margin-bottom:.3rem}

/* ============================================================
   LIVING CRAFT LAYER — cursor · enter gate · sound · reactive motion
   ============================================================ */

/* preload lock + hide native cursor on precise pointers */
body.preload{overflow:hidden;height:100vh}
@media (hover:hover) and (pointer:fine){ html.cursoron, html.cursoron * { cursor:none !important } }

/* ---- custom cursor (colour-inverting, grows + labels on hover) ---- */
.cursor{position:fixed;top:0;left:0;z-index:210;pointer-events:none;width:12px;height:12px;border-radius:50%;
  border:1.5px solid var(--ink);background:transparent;translate:-50% -50%;mix-blend-mode:difference;opacity:0;
  transition:width .28s cubic-bezier(.2,.7,.2,1),height .28s cubic-bezier(.2,.7,.2,1),background .28s,border-color .28s,opacity .3s,mix-blend-mode .1s}
.cursor.on{opacity:1}
.cursor::after{content:"";position:absolute;inset:0;margin:auto;width:3px;height:3px;border-radius:50%;background:var(--paper-2)}
.cursor.hover{width:76px;height:76px;background:var(--accent);border-color:var(--accent);mix-blend-mode:normal}
.cursor.hover::after{opacity:0}
.cursor.click{scale:.82}
.cursor__label{position:absolute;inset:0;display:grid;place-items:center;color:var(--ink);font:600 var(--fs-label)/1 var(--font-sans);letter-spacing:0;text-transform:none;opacity:0;transition:opacity .18s}
.cursor.hover .cursor__label{opacity:1}
@media (hover:none){ .cursor{display:none!important} }

/* ---- cinematic enter gate ---- */
.enter{position:fixed;inset:0;z-index:150;background:var(--paper);color:var(--ink);display:grid;place-items:center;overflow:hidden;
  transition:opacity 1s ease,visibility 1s}
.enter.gone{opacity:0;visibility:hidden;pointer-events:none}
.enter::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 40%,rgba(222,46,12,.10),transparent 60%)}
.enter__in{position:relative;z-index:2;text-align:center;padding:2rem}
.enter__eyebrow{color:var(--accent);font-size:var(--fs-label);margin-bottom:1.5rem;opacity:0;animation:enUp .9s .05s forwards}
.enter__mark{font-size:var(--fs-display);line-height:.88;letter-spacing:0;color:var(--ink);
  opacity:0;animation:enUp 1.05s .12s forwards cubic-bezier(.2,.7,.2,1)}
.enter__bar{width:min(64vw,300px);height:1px;background:color-mix(in srgb, var(--ink) 18%, transparent);margin:2.4rem auto 0;overflow:hidden}
.enter__bar span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width .25s ease}
.enter__btn{margin-top:2.1rem;display:inline-flex;align-items:center;gap:.75rem;background:transparent;
  border:1px solid color-mix(in srgb, var(--ink) 32%, transparent);color:var(--ink);font:600 var(--fs-label) var(--font-sans);letter-spacing:0;
  text-transform:none;padding:1rem 2.4rem;border-radius:var(--radius);opacity:0;transform:translateY(10px);pointer-events:none;
  transition:opacity .6s,transform .6s,background .3s,border-color .3s,color .3s}
.enter__btn.ready{opacity:1;transform:none;pointer-events:auto}
.enter__btn:hover{background:var(--paper);border-color:var(--line-2);color:var(--ink)}
.enter__btn i{width:18px;height:1px;background:currentColor;transition:width .3s}
.enter__btn:hover i{width:30px}
.enter__hint{margin-top:1.4rem;font-size:var(--fs-label);color:color-mix(in srgb, var(--ink) 50%, transparent);letter-spacing:0}

/* ---- sound toggle (equalizer bars) ---- */
.soundbtn{display:inline-flex;align-items:center;gap:2.5px;height:18px;background:none;border:none;padding:0 .2rem}
.soundbtn i{width:2px;height:4px;background:currentColor;display:block;opacity:.5;border-radius:1px;transition:opacity .2s}
.soundbtn.on i{opacity:.95;animation:eq 900ms ease-in-out infinite}
.soundbtn.on i:nth-child(2){animation-delay:.12s}.soundbtn.on i:nth-child(3){animation-delay:.28s}
.soundbtn.on i:nth-child(4){animation-delay:.42s}.soundbtn.on i:nth-child(5){animation-delay:.18s}
@keyframes eq{0%,100%{height:4px}50%{height:15px}}

/* ---- word reveal (headings) ---- */
.split .line{display:block;overflow:hidden}
.split .word{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.02em}
.split .word > span{display:inline-block;transform:translateY(115%);transition:transform .95s cubic-bezier(.19,1,.22,1)}
.split.in .word > span{transform:none}

/* ---- magnetic + reactive ---- */
.magnetic{will-change:transform}
.film__stage{will-change:transform}
@keyframes enUp{to{opacity:1;transform:none}}

/* ============================================================
   DOMAIN INTERACTIVE ELEMENTS — marquee · before/after · stats · tilt
   ============================================================ */

/* ---- infinite marquee ticker ---- */
.marq{overflow:hidden;border-block:1px solid var(--line);padding:1.1rem 0;background:var(--paper);
  margin-top:clamp(2rem,6vh,4rem);user-select:none}
.marq__row{display:flex;gap:0;white-space:nowrap;width:max-content;animation:marq 38s linear infinite}
.marq:hover .marq__row{animation-play-state:paused}
.marq__row span{font-family:var(--font-sans);font-weight:700;text-transform:none;
  font-size:var(--fs-title);letter-spacing:0;padding:0 1.4rem;color:var(--ink);opacity:.9}
.marq__row i{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--accent);
  align-self:center;flex:0 0 auto;opacity:.85}
@keyframes marq{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.marq__row{animation:none}}

/* ---- before / after drag compare ---- */
.ba{position:relative;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;background:var(--paper-2);
  margin-bottom:clamp(4rem,9vh,7rem);touch-action:pan-y;user-select:none}
.ba__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.ba__clip{position:absolute;inset:0;overflow:hidden;will-change:clip-path;clip-path:inset(0 50% 0 0)}
.ba__handle{position:absolute;top:0;bottom:0;left:50%;width:2px;background:rgba(255,255,255,.9);
  translate:-50% 0;z-index:3;will-change:left;}
.ba__handle b{position:absolute;top:50%;left:50%;translate:-50% -50%;width:54px;height:54px;border-radius:50%;
  background:var(--paper);display:block}
.ba__handle i{position:absolute;top:50%;left:50%;translate:-50% -50%;z-index:2;width:22px;height:10px;display:block;
  background:
    linear-gradient(var(--ink),var(--ink)) left center/2px 10px no-repeat,
    linear-gradient(var(--ink),var(--ink)) right center/2px 10px no-repeat;opacity:.75}
.ba__tag{position:absolute;bottom:1rem;z-index:4;background:rgba(10,8,6,.55);color:var(--ink);
  padding:.4rem .8rem;border-radius:var(--radius);font-size:var(--fs-label);backdrop-filter:blur(6px)}
.ba__tag--l{left:1rem}.ba__tag--r{right:1rem}

/* ---- stats counters ---- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;background:var(--line);
  border-block:1px solid var(--line);margin-bottom:clamp(4rem,9vh,7rem)}
.stat{background:var(--paper);padding:clamp(1.6rem,3vw,2.4rem) clamp(1rem,2vw,1.6rem)}
.stat b{display:block;font-family:var(--font-sans);font-weight:800;letter-spacing:0;
  font-size:var(--fs-head);line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.stat span{display:block;margin-top:.7rem;color:var(--ink-soft);font-size:var(--fs-body);line-height:1.45;max-width:22ch}

/* ---- 3D tilt gallery cards ---- */
.gcard{transform-style:preserve-3d;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.gcard__cap,.gcard__no{transform:translateZ(30px)}

/* ============================================================
   LAYOUT v2 — richer, layered, less "simple"
   ============================================================ */

/* full-bleed colour bands behind max-width sections */
.band{position:relative;isolation:isolate}
.band::before{content:"";position:absolute;left:50%;translate:-50% 0;width:100vw;top:0;bottom:0;z-index:-1}
.band--dark::before{background:var(--paper-2)}
.band--tint::before{background:var(--paper-2)}
.band{padding-bottom:clamp(4rem,9vh,7rem)}
.band--dark{color:var(--ink)}
.band--dark .head h2{color:var(--ink)}
.band--dark .mono{color:var(--muted)}
.band--dark .eyebrow::before{background:var(--accent)}
.band--dark .idx{border-color:color-mix(in srgb, var(--ink) 16%, transparent)}
.band--dark .idx__row{border-color:color-mix(in srgb, var(--ink) 16%, transparent)}
.band--dark .idx__d{color:color-mix(in srgb, var(--ink) 66%, transparent)}
.band--dark .idx__no,.band--dark .idx__tag{color:var(--muted)}
.band--dark .rev{border-color:color-mix(in srgb, var(--ink) 18%, transparent);background:color-mix(in srgb, var(--ink) 4%, transparent)}
.band--dark .rev__who{color:var(--muted)}

/* services list — accent wipe on hover, tighter editorial rhythm */
.idx__row{position:relative;overflow:hidden}
.idx__row::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--accent);transition:width .55s cubic-bezier(.2,.7,.2,1)}
.idx__row:hover::after{width:100%}
.idx__row:hover .idx__t{color:var(--accent)}
.idx__t{transition:color .3s}

/* process — oversized ghost numerals, asymmetric */
.steps{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));background:transparent;border:none;gap:clamp(1rem,2vw,2rem)}
.step{position:relative;background:var(--paper-2);border:1px solid var(--line-2);border-radius:var(--radius);overflow:hidden;
  padding:clamp(2rem,3.4vw,3rem) clamp(1.4rem,2.4vw,2rem) clamp(2.4rem,4vw,3.4rem)}
.step:nth-child(even){transform:translateY(clamp(12px,2.4vw,34px))}
.step__no{position:absolute;right:.5rem;bottom:-.9rem;font-size:var(--fs-head);line-height:1;
  color:var(--accent);opacity:.13;pointer-events:none;font-weight:800}
.step h3{margin-top:0}

/* stats — staggered, not a flat grid */
.stats{background:transparent;border:none;gap:clamp(1rem,2vw,1.6rem);
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.stat{border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);
  padding:clamp(1.6rem,3vw,2.2rem)}
.stat:nth-child(odd){transform:translateY(clamp(10px,2vw,26px))}

/* lede — layered pull quote with a rule */
.lede__big{position:relative;padding-left:clamp(1rem,3vw,2.6rem)}
.lede__big::before{content:"";position:absolute;left:0;top:.35em;bottom:.2em;width:3px;
  background:linear-gradient(var(--accent),transparent)}

/* area pills — richer */
.pills span{background:var(--paper);transition:.25s}
.pills span:hover{border-color:var(--accent);color:var(--accent)}

/* gallery cards — deeper radius + warm tint frame */
.gcard{border-radius:var(--radius);}

/* CTA — richer bronze gradient */
.cta{background:var(--paper-2)}
.cta em{color:var(--accent-2)}

/* marquee sits on the tint */
.marq{background:var(--paper-2)}

/* ---- enter gate: full-bleed 3D depth door behind the type ---- */
.enter__bg{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0}
.enter__scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(120% 85% at 50% 52%,transparent 18%,rgba(10,7,4,.55) 62%,rgba(8,5,3,.88) 100%),
    linear-gradient(180deg,rgba(8,5,3,.72) 0%,transparent 26% 62%,rgba(8,5,3,.82) 100%)}
.enter::after{display:none}
.enter__in{position:relative;z-index:2}
.enter__mark{text-shadow:0 6px 60px rgba(0,0,0,.65)}
.enter__eyebrow{text-shadow:0 2px 20px rgba(0,0,0,.7)}

/* ---- recent work: real 3D depth cards ---- */
.work{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));
  gap:clamp(1rem,2vw,1.8rem);margin-bottom:clamp(4rem,9vh,7rem)}
.wcard{position:relative;border-radius:var(--radius);overflow:hidden;background:var(--paper-2);
  aspect-ratio:4/5}
.wcard:nth-child(even){transform:translateY(clamp(10px,2.2vw,30px))}
.wcard canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.wcard figcaption{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:1.5rem 1.4rem 1.3rem;color:var(--ink);
  background:linear-gradient(0deg,rgba(12,8,5,.86),rgba(12,8,5,.4) 55%,transparent);pointer-events:none}
.wcard figcaption .mono{display:block;color:var(--accent);font-size:var(--fs-label);margin-bottom:.45rem}
.wcard figcaption h3{font-family:var(--font-sans);font-weight:700;font-size:var(--fs-title);letter-spacing:0}
.wcard figcaption p{font-size:var(--fs-label);opacity:.72;margin-top:.18rem}

/* ============================================================
   DESIGN POLISH — nav · progress · hero fade · CTA · footer · type
   ============================================================ */

/* ---- nav: stable, readable, adapts past the film ---- */
.nav{mix-blend-mode:normal;color:var(--ink);
  background:linear-gradient(180deg,rgba(7,9,12,.55),transparent);
  transition:background .45s ease,color .45s ease,padding .35s ease}
.nav a{color:inherit}
.nav__cta{border-color:color-mix(in srgb, var(--ink) 45%, transparent)}
.nav.past{background:color-mix(in srgb, var(--paper) 88%, transparent);backdrop-filter:blur(14px) saturate(1.2);
  color:var(--ink);padding-block:.85rem;box-shadow:0 1px 0 var(--line)}
.nav.past .nav__cta{border-color:var(--line)}
.nav.past .nav__cta:hover{background:var(--accent);border-color:var(--accent);color:var(--ink)!important}

/* ---- scroll progress rail ---- */
.prog{position:fixed;top:0;left:0;right:0;height:2px;z-index:130;pointer-events:none;background:transparent}
.prog span{display:block;height:100%;width:0;transform-origin:left;
  background:linear-gradient(90deg,var(--accent),var(--accent-2))}

/* ---- soften the hero → content edge ---- */
.film-fade{position:relative;z-index:6;height:clamp(70px,10vh,130px);margin-top:-1px;
  background:linear-gradient(180deg,var(--paper-2) 0%,var(--paper) 100%)}

/* ---- CTA: two columns, real weight ---- */
.cta{overflow:hidden}
.cta__grid{display:grid;grid-template-columns:1.15fr .85fr;align-items:stretch;min-height:clamp(420px,58vh,620px)}
.cta__copy{padding:clamp(2.6rem,5.5vw,5rem);display:flex;flex-direction:column;justify-content:center}
.cta__lead{color:color-mix(in srgb, var(--ink) 74%, transparent);font-size:var(--fs-body);line-height:1.6;max-width:44ch;margin-top:1.4rem}
.cta__btn{display:inline-flex;align-items:center;gap:.7rem;align-self:flex-start;margin-top:2rem;
  background:var(--paper);color:var(--ink);font-weight:700;font-size:var(--fs-body);
  padding:1.05rem 2rem;border-radius:var(--radius);
  transition:transform .2s,box-shadow .2s}
.cta__btn span{transition:transform .2s}
.cta__btn:hover{transform:translateY(-2px)}
.cta__btn:hover span{transform:translateX(5px)}
.cta__row{display:flex;flex-wrap:wrap;gap:2.2rem;margin-top:2.6rem;
  padding-top:1.8rem;border-top:1px solid color-mix(in srgb, var(--ink) 16%, transparent)}
.cta__row .mono{color:var(--muted)}
.cta__row b{font-family:var(--font-sans);font-weight:700;font-size:var(--fs-body);display:block;margin-top:.3rem}
.cta__art{position:relative;overflow:hidden}
.cta__art img{width:100%;height:100%;object-fit:cover}
.cta__art::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,var(--line),var(--line) 42%,transparent)}
@media(max-width:900px){.cta__grid{grid-template-columns:1fr}.cta__art{height:clamp(200px,34vh,300px);order:-1}
  .cta__art::after{background:linear-gradient(180deg,var(--line),var(--line))}}

/* ---- footer with substance ---- */
.foot{display:block;padding:clamp(3.5rem,8vh,6rem) var(--pad) clamp(1.6rem,4vh,2.4rem);
  border-top:1px solid var(--line)}
.foot__top{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:clamp(1.6rem,3vw,3rem);
  padding-bottom:clamp(2.4rem,5vh,3.6rem)}
.foot__brand b{font-family:var(--font-sans);font-weight:800;font-size:var(--fs-title);
  color:var(--ink);display:block;margin-bottom:.7rem;letter-spacing:0}
.foot__brand p{color:var(--ink-soft);font-size:var(--fs-body);line-height:1.6;max-width:34ch}
.foot__col{display:flex;flex-direction:column;gap:.55rem}
.foot__col .mono{margin-bottom:.5rem;font-size:var(--fs-label)}
.foot__col a{color:var(--ink-soft);font-size:var(--fs-body);transition:color .2s,transform .2s}
.foot__col a:hover{color:var(--accent);transform:translateX(3px)}
.foot__hours{color:var(--muted);font-size:var(--fs-label);margin-top:.4rem;line-height:1.5}
.foot__base{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.8rem;
  padding-top:clamp(1.2rem,3vh,2rem);border-top:1px solid var(--line);font-size:var(--fs-label);color:var(--muted)}
@media(max-width:820px){.foot__top{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.foot__top{grid-template-columns:1fr}}

/* ---- typography: give one statement true scale ---- */
.lede__big{font-size:var(--fs-head);line-height:.98}
.head h2{font-size:var(--fs-head)}
.cta h2{font-size:var(--fs-head);line-height:.93}



/* ============================================================
   CONTACT FORM (Netlify Forms) — lives in the dark CTA band
   ============================================================ */
.cta__grid{grid-template-columns:1fr 1fr}
.cta__form{position:relative;padding:clamp(2rem,4vw,3.4rem);display:flex;align-items:center;
  background:rgba(0,0,0,.22);border-left:1px solid color-mix(in srgb, var(--ink) 12%, transparent)}
.cta__form form,.cta__form .f__ok{width:100%}
.hp{position:absolute;left:-9999px;opacity:0;pointer-events:none}

.f{display:block;margin-bottom:1rem}
.f > span{display:block;font-size:var(--fs-label);letter-spacing:0;text-transform:none;
  color:var(--muted);margin-bottom:.5rem;font-weight:500}
.f > span i{font-style:normal;opacity:.6;letter-spacing:0;text-transform:none}
.f input,.f select,.f textarea{
  width:100%;background:color-mix(in srgb, var(--ink) 6%, transparent);border:1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  border-radius:var(--radius);padding:.85rem 1rem;color:var(--ink);font:400 var(--fs-body)/1.4 var(--font-sans);
  transition:border-color .2s,background .2s;-webkit-appearance:none;appearance:none}
.f textarea{resize:vertical;min-height:84px}
.f select{background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px,6px 6px;background-repeat:no-repeat}
.f select option{background:var(--paper-2);color:var(--ink)}
.f input::placeholder,.f textarea::placeholder{color:color-mix(in srgb, var(--ink) 34%, transparent)}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;border-color:var(--accent);background:color-mix(in srgb, var(--ink) 10%, transparent)}
.f__row{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}

.f__btn{width:100%;margin-top:.6rem;display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  background:var(--accent);color:var(--ink);border:none;border-radius:var(--radius);cursor:pointer;
  font:700 var(--fs-body) var(--font-sans);padding:1.05rem 1.6rem;
  transition:transform .18s,box-shadow .18s}
.f__btn span{transition:transform .2s}
.f__btn:hover{transform:translateY(-2px)}
.f__btn:hover span{transform:translateX(5px)}
.f__btn[disabled]{opacity:.6;cursor:wait;transform:none}
.f__note{margin-top:.9rem;text-align:center;font-size:var(--fs-label);color:color-mix(in srgb, var(--ink) 45%, transparent)}

.f__ok{text-align:center;color:var(--ink)}
.f__ok-mark{width:56px;height:56px;margin:0 auto 1.2rem;border-radius:50%;display:grid;place-items:center;
  background:var(--accent);color:var(--ink);font-size:var(--fs-title)}
.f__ok h3{font-family:var(--font-sans);font-weight:700;font-size:var(--fs-title);letter-spacing:0}
.f__ok p{margin-top:.6rem;color:color-mix(in srgb, var(--ink) 72%, transparent);font-size:var(--fs-body)}

@media(max-width:900px){
  .cta__grid{grid-template-columns:1fr}
  .cta__form{border-left:none;border-top:1px solid color-mix(in srgb, var(--ink) 12%, transparent)}
  .f__row{grid-template-columns:1fr}
}

/* ============================================================
   veladigital — additions for classes used in index.html
   ============================================================ */
/* the wordmark is Latin, so optical tracking IS allowed here — never on Hebrew */
.wordmark{font-family:var(--font-sans);font-weight:200;letter-spacing:.045em;color:var(--ink)}
.nav__brand.wordmark{font-weight:200;font-size:var(--fs-body)}
.enter__mark.wordmark{font-weight:200;color:var(--ink)}

.skip{position:fixed;top:-100px;inset-inline-start:1rem;z-index:200;background:var(--accent);
  color:var(--ink);padding:.7rem 1.1rem;border-radius:var(--radius);transition:top .2s}
.skip:focus{top:1rem}

:where(a,button,input,select,textarea):focus-visible{
  outline:2px solid var(--accent);outline-offset:3px}

.work__note{margin-top:2rem;color:var(--muted);max-width:60ch;line-height:1.7}

.cta__wa b{color:var(--accent)}
.cta__row a{display:block}
.cta__row .mono{display:block;margin-bottom:.3rem}

.f--check{display:flex;align-items:flex-start;gap:.7rem;margin-top:.4rem}
.f--check input{width:18px;height:18px;flex:0 0 auto;margin-top:.15rem;accent-color:var(--accent)}
.f--check span{font-size:var(--fs-body);line-height:1.6;color:var(--ink-soft)}

/* Hebrew body copy: reads smaller than Latin at equal px, so it needs more leading */
body{font-size:var(--fs-body);line-height:1.7}

/* the hero's honest degradation: no WebGL, or reduced-motion, still gets a
   composed still with the headline already up — never a blank black box */
.film__stage.is-poster{background:var(--paper) url(assets/work/nuderma.jpg) center/cover no-repeat}
.film__stage.is-poster .film__canvas{display:none}
.film__stage.is-poster::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(7,9,12,.55) 0%,rgba(7,9,12,.88) 100%)}
.film__canvas{opacity:0;transition:opacity 1.1s ease}
.film__canvas.is-live{opacity:1}

/* A reading scrim bound to the BEAT, not the whole frame. A frame-wide wash
   flattens the artwork; this darkens only what sits directly behind the type,
   which is what actually threatens legibility when a bright panel drifts under it. */
.beat{isolation:isolate}
.beat::before{content:"";position:absolute;z-index:-1;pointer-events:none;
  inset:-10vh -8vw -12vh -22vw;
  background:radial-gradient(58% 62% at 76% 50%,
    rgba(7,9,12,.94) 0%, rgba(7,9,12,.72) 42%, rgba(7,9,12,.28) 68%, transparent 82%)}
.beat--c::before{background:radial-gradient(52% 58% at 50% 50%,
    rgba(7,9,12,.92) 0%, rgba(7,9,12,.6) 48%, transparent 80%)}

/* The gate is not a lid over the site — it is the FIRST FRAME of the concept.
   Letting the breathing line and the dust read through it means the very first
   thing a visitor sees already has a pulse, instead of a static splash screen
   that measures (correctly) as motion-at-rest 0%. */
.enter{background:transparent}
.enter__scrim{background:radial-gradient(62% 58% at 50% 46%,
  transparent 0%, rgba(7,9,12,.18) 44%, rgba(7,9,12,.72) 78%, rgba(7,9,12,.93) 100%)}
.enter::after{background:radial-gradient(120% 90% at 50% 40%,rgba(222,46,12,.07),transparent 62%)}
/* the loading rule keeps moving even when the bar is full */
.enter__bar{position:relative}
.enter__bar::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(207,224,255,.55),transparent);
  animation:enScan 2.6s ease-in-out infinite}
@keyframes enScan{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
@media(prefers-reduced-motion:reduce){.enter__bar::after{animation:none}}

/* ONE reading edge. Every section now hangs off the same right gutter as .wrap,
   so the page reads as a single column of decisions instead of eight of them.
   Measured: the shared edge carried 16 elements while six strays sat elsewhere. */
.cta,.foot{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.cta{margin-bottom:2rem}
.foot{border-top:1px solid var(--line)}

/* Service-area chips were five separate alignment edges AND a "cute" marker.
   One typographic line: same edge as everything else, and it carries real weight. */
.pills{display:block;font-size:var(--fs-title);line-height:1.5;color:var(--ink-soft);
  max-width:30ch;margin-bottom:clamp(4rem,9vh,7rem)}
.pills span{display:inline;border:none;background:none;padding:0;font-size:inherit;color:inherit}
.pills span.home{color:var(--ink);background:none}
.pills span:not(:last-child)::after{content:" · ";color:var(--muted)}
.pills span:hover{color:var(--accent)}

/* ============================================================
   ONE GRID for the whole page.
   The template shipped four independent auto-fit grids with four different
   minimums (230/190/250/290px) and four different gaps, so every section
   invented its own column positions. That is precisely what "13 alignment
   edges against a field median of 1" measures. Columns now land on the same
   x in every section, so the strays collapse into the shared edges.
   ============================================================ */
:root{ --grid-cols:4; --grid-gap:clamp(1rem,2vw,2rem); }
@media(max-width:1040px){ :root{ --grid-cols:2 } }
@media(max-width:620px){  :root{ --grid-cols:1 } }

.work,.steps,.stats,.foot__top{
  display:grid;
  grid-template-columns:repeat(var(--grid-cols),minmax(0,1fr));
  gap:var(--grid-gap);
  background:transparent;border:none;
}

/* The beats are driven by JS from scroll progress, but they had no initial
   state — so between first paint and hydration all four headlines rendered
   stacked on top of each other. Declare the opening frame in CSS instead. */
.beat{opacity:0}
#b1{opacity:1}
@media(prefers-reduced-motion:reduce){ .beat{opacity:1} #b2,#b3{opacity:0} }