/* ZGRAIA/den-site — public styles. Extracted from the original single-file build. */
  :root{
    --bg:#0a0705; --bg-soft:#130d09; --surface:#1a1310; --line:#2e231c;
    --ink:#f6efe4; --ink-dim:#9a8d80;
    --teal:#1f8f8a; --amber:#f08a26; --red:#c9412c;
    --grain:0.11; --vignette:0.6; --halo:0.85; --bloom:0.85; --warmth:0.5;
    --sat:1; --contrast:1; --fringe:0.6; --shadow-depth:0;
    --glow-a:rgba(255,150,48,0.24); --glow-b:rgba(255,196,120,0.14);
    --glow-c:rgba(214,70,44,0.16);  --glow-d:rgba(255,120,60,0.10);
    --bloom-a:rgba(255,145,40,0.18); --bloom-b:rgba(206,60,40,0.13); --bloom-c:rgba(40,150,145,0.08);
    --glow-solid:#ff922c;
    /* live-editable design tokens */
    --wrap-max:1560px;
    --sec-pad:46px;
    --font-scale:1;
    --head-font:'Anton', sans-serif;
    --gap:10px;
    --slide-h:78vh; --slide-scale:0.76;
    --vcols:4;
    --vcols-m:3;
    --hero-size:1; --hero-above:0.42; --hero-gap:1; --head-weight:400; --role-size:1; --sub-size:1; --meta-size:1;
    --name-blur:0px; --name-opacity:1; --name-glow:1; --name-fringe:1;
    --name-glow-color:#ff922c; --name-fringe-color:#c9412c;
    --name-glow-blur:26px; --name-fringe-blur:7px; --name-glow-spread:1;
    --sub-color:var(--ink-dim); --meta-color:var(--ink-dim);
    --role-color:var(--amber); --above-color:var(--ink);
    --role-blur:0px; --above-blur:0px; --sub-blur:0px; --meta-blur:0px;
    --role-opacity:1; --above-opacity:0.92; --sub-opacity:1; --meta-opacity:1;
    --role-glow:0; --above-glow:1; --sub-glow:0; --meta-glow:0;
    --role-fringe:0; --above-fringe:0; --sub-fringe:0; --meta-fringe:0;
    --meta-color:#9a8d80; --meta-blur:0px; --meta-opacity:1; --meta-glow:0;
  }
  *{box-sizing:border-box; margin:0; padding:0;}

  /* ---------- FILM LAYERS ---------- */
  #filmGrain{
    position:absolute; inset:-120px; z-index:2; pointer-events:none; opacity:var(--grain);
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size:180px 180px;
    mix-blend-mode:overlay;
  }
  /* coarse second grain pass — bigger, slower clumps, like pushed stock */
  #filmGrainCoarse{
    position:absolute; inset:-140px; z-index:2; pointer-events:none; opacity:calc(var(--grain) * 0.85);
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.28' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='320' height='320' filter='url(%23c)'/%3E%3C/svg%3E");
    background-size:320px 320px;
    mix-blend-mode:soft-light;
  }
  body.no-film #filmGrainCoarse{ display:none; }
  @media (max-width:560px){
    header.hero .wrap{ zoom:var(--m-hero-zoom, 0.8); }
  }
  @media (max-width:560px){
    #filmGrain{ background-size:calc(180px * var(--m-grain-scale, 0.5)) calc(180px * var(--m-grain-scale, 0.5)); }
    #filmGrainCoarse{ background-size:calc(320px * var(--m-grain-scale, 0.5)) calc(320px * var(--m-grain-scale, 0.5)); }
  }
  /* warm skin-tone grade — lifts midtones toward Kodak flesh */
  #warmGrade{
    position:absolute; inset:0; z-index:1; pointer-events:none; mix-blend-mode:soft-light;
    opacity:var(--warmth); filter:saturate(var(--sat)) contrast(var(--contrast));
    background:linear-gradient(168deg, rgba(255,176,120,0.38) 0%, rgba(255,138,80,0.20) 45%, rgba(40,120,125,0.20) 100%);
  }
  body.no-film #warmGrade{ display:none; }
  #wear{ position:absolute; inset:0; z-index:3; pointer-events:none; opacity:var(--wear-op, 0); mix-blend-mode:soft-light; }
  body.no-film #wear{ display:none; }
  #dust{ position:absolute; inset:0; z-index:3; pointer-events:none; opacity:var(--dust-op, 0.5); mix-blend-mode:screen; }
  body.no-film #dust{ display:none; }
  #shadowDepth{
    position:absolute; inset:0; z-index:3; pointer-events:none; mix-blend-mode:multiply;
    opacity:var(--shadow-depth);
    background:linear-gradient(180deg, rgba(12,8,6,0.85) 0%, rgba(6,10,12,0.95) 100%);
  }
  body.no-film #shadowDepth{ display:none; }
  #vignette{
    position:fixed; inset:0; z-index:4; pointer-events:none;
    background:radial-gradient(ellipse 96% 88% at 50% 48%, transparent 42%, rgba(0,0,0,calc(var(--vignette) * 0.55)) 88%, rgba(0,0,0,var(--vignette)) 100%);
  }
  #halation{
    position:absolute; inset:0; z-index:1; pointer-events:none; mix-blend-mode:screen;
    opacity:var(--halo);
    background:
      radial-gradient(ellipse 62% 44% at 80% 14%, var(--glow-a), transparent 60%),
      radial-gradient(ellipse 44% 34% at 74% 22%, var(--glow-b), transparent 58%),
      radial-gradient(ellipse 52% 40% at 14% 84%, var(--glow-c), transparent 64%),
      radial-gradient(ellipse 38% 30% at 22% 74%, var(--glow-d), transparent 60%);
    filter:blur(22px) saturate(var(--sat));
  }
  /* second bloom pass — wide, soft, drifting */
  #bloom{
    position:absolute; inset:-15%; z-index:0;
    filter:blur(70px) saturate(var(--sat)); pointer-events:none; mix-blend-mode:screen;
    opacity:var(--bloom);
    background:
      radial-gradient(circle 42vw at 76% 16%, var(--bloom-a), transparent 62%),
      radial-gradient(circle 32vw at 18% 80%, var(--bloom-b), transparent 64%),
      radial-gradient(circle 26vw at 46% 44%, var(--bloom-c), transparent 66%);
  }
  body.no-film #bloom{ display:none; }
  body.no-film #filmGrain, body.no-film #vignette, body.no-film #halation{ display:none; }


  /* warm halation on media edges */

  html{scroll-behavior:smooth; background:var(--bg);}
  #filmLayers{ position:absolute; top:0; left:0; right:0; height:100%; max-height:100%;
    pointer-events:none; z-index:0; overflow:hidden; contain:paint; }
  body{ position:relative; color:var(--ink); font-family:'Inter',-apple-system,sans-serif; line-height:1.5; overflow-x:hidden;
        font-size:calc(16px * var(--font-scale));
        background:
          radial-gradient(ellipse 80% 30% at 8% 30%, rgba(32,138,136,0.08), transparent 62%),
          radial-gradient(ellipse 70% 28% at 92% 68%, rgba(30,132,130,0.06), transparent 64%),
          var(--bg);
        background-attachment:scroll; }
  ::selection{ background:var(--teal); color:#04100f; }

  /* when the background is bright, the whole contrast scheme flips */
  body.light-bg{ --ink:#0d1016; --ink-dim:rgba(13,16,22,0.68); --line:rgba(13,16,22,0.20); }
  body.light-bg .nav-links a, body.light-bg .nav-id span{ color:var(--ink); }
  body.light-bg nav{ background:linear-gradient(to bottom, rgba(255,255,255,0.28), rgba(255,255,255,0)); }
  body.light-bg .service{ background:rgba(255,255,255,0.30); }
  body.light-bg .services{ background:rgba(13,16,22,0.14); }
  body.light-bg .contact{ background:radial-gradient(ellipse 62% 62% at 50% 100%, var(--glow-a), transparent 72%); }
  body.light-bg .cbox{ background:rgba(255,255,255,0.34); }
  body.light-bg .cbox svg{ fill:rgba(13,16,22,0.6); }
  body.light-bg .swtab{ background:rgba(255,255,255,0.3); color:rgba(13,16,22,0.7); }
  body.light-bg .swtab.on{ background:rgba(255,255,255,0.7); }
  body.light-bg .filter-btn{ color:rgba(13,16,22,0.65); }
  body.light-bg .filter-btn.active, body.light-bg .filter-btn:hover{ background:rgba(255,255,255,0.45); color:var(--ink); }
  body.light-bg .btn-primary{ background:#0d1016; color:#fff; border-color:#0d1016; }
  body.light-bg .brand .bname{ color:rgba(13,16,22,0.45); }
  body.light-bg .brand:hover .bname{ color:var(--ink); }
  body.light-bg .about-tags span{ color:rgba(13,16,22,0.7); }
  body.light-bg #stickyBar a{ background:rgba(255,255,255,0.9); border-color:rgba(13,16,22,0.2); color:#0d1016; }
  body.light-bg #stickyBar a:hover{ background:#fff; border-color:#0d1016; }
  body.light-bg .cbox{ background:transparent; border-color:rgba(13,16,22,0.25); color:var(--ink); }
  body.light-bg .cbox:hover{ background:rgba(13,16,22,0.06); border-color:#0d1016; }
  body.light-bg .cbox svg{ fill:rgba(13,16,22,0.6); }
  body.light-bg .swtab.on{ background:#0d1016; border-color:#0d1016; color:#fff; }
  body.light-bg .mode-btn.on{ background:#0d1016; border-color:#0d1016; color:#fff; }
  body.light-bg footer{ color:rgba(13,16,22,0.5); }
  body.light-bg #vignette{ opacity:0.45; }
  body.light-bg #filmGrain, body.light-bg #filmGrainCoarse{ mix-blend-mode:multiply; }
  body.light-bg .scene-num{ color:rgba(13,16,22,0.6); }

  /* minimal: the frame markers and scene numbering earn nothing here, so they go */
  body.minimal .vf{ display:none; }
  body.minimal .scene-num{ display:none; }
  body.minimal .timeline-ruler{ display:none; }
  body.minimal .scene{ margin-bottom:clamp(24px,3.4vh,44px); }
  body.minimal .scene-line{ opacity:0.45; }
  body.minimal .service h3{ letter-spacing:0.01em; }
  body.minimal .services{ background:none; border:none; gap:clamp(20px,2.4vw,44px); }
  body.minimal .service{ background:none; padding:0; border-top:1px solid var(--line); padding-top:18px; }
  body.minimal .cbox{ background:none; border-width:1px; }
  body.minimal .slide, body.minimal .vtile{ border:none; }
  /* on a coloured background the tinted washes would turn to mud */
  body.vivid-bg header.hero{ background:none; }
  body.vivid-bg #warmGrade{ opacity:calc(var(--warmth) * 0.35); }
  body.vivid-bg #bloom{ opacity:calc(var(--bloom) * 0.6); }
  .mono{ font-family:'JetBrains Mono', monospace; }
  .display{ font-family:var(--head-font); text-transform:uppercase; font-weight:var(--head-weight); }
  /* everything the viewer actually reads sits above the film layers */
  nav, header.hero, main, section.contact, footer,
  #adminToggle, #adminDrawer, #previewExit, #stickyBar,
  #expandBackdrop, #expandStage, #expandCaption, #lightbox{ position:relative; z-index:10; }
  nav{ z-index:100; }
  #stickyBar{ z-index:250; }
  #adminToggle{ z-index:300; } #previewExit{ z-index:320; } #adminDrawer{ z-index:400; }
  #expandBackdrop{ z-index:480; } #expandStage{ z-index:490; } #expandCaption{ z-index:495; } #lightbox{ z-index:500; }
  .wrap{ width:100%; max-width:min(var(--wrap-max), 96vw); margin:0 auto; padding:0 clamp(14px, 2.2vw, 40px); }
  @media (max-width:640px){ .wrap{ max-width:100%; padding:0 14px; } }

  nav{ position:fixed; top:0; left:0; right:0; z-index:100; display:flex; align-items:center; justify-content:space-between;
       padding:clamp(12px,1.4vw,20px) clamp(14px,2.2vw,40px);
       background:linear-gradient(to bottom, rgba(7,8,10,0.92), rgba(7,8,10,0)); }
  .nav-id span{ font-size:13px; color:var(--ink-dim); letter-spacing:0.03em; }
  .nav-links{ display:flex; gap:26px; }
  .nav-links a{ color:var(--ink); text-decoration:none; font-size:14px; font-weight:500; opacity:0.7; transition:opacity .7s; }
  .nav-links a:hover{ opacity:1; }
  @media (max-width:760px){
    nav{ flex-wrap:wrap; row-gap:8px; }
    .nav-id{ flex:0 0 100%; }
    .nav-links{ flex:0 0 100%; gap:16px; justify-content:center; }
    .nav-links a{ font-size:12px; }
  }
  @media (max-width:480px){ nav{ padding-left:10px; padding-right:10px; } .nav-links{ gap:10px; } .nav-links a{ font-size:11px; } }

  /* Mobile: clean opening frame — hide desktop navigation and let the hero background fill the top. */
  @media (max-width:760px){
    nav{ display:none; }
    header.hero{
      padding-top:clamp(34px, 7vh, 58px);
      margin-top:0;
      background:
        radial-gradient(ellipse 78% 42% at 84% 4%, rgba(240,138,38,0.18), transparent 64%),
        radial-gradient(ellipse 58% 40% at 8% 18%, rgba(37,160,154,0.15), transparent 68%),
        radial-gradient(ellipse 54% 38% at 14% 88%, rgba(201,65,44,0.10), transparent 66%),
        var(--bg);
    }
  }

  header.hero{ min-height:0; display:flex; flex-direction:column; justify-content:flex-start; align-items:center;
    text-align:center; position:relative;
    padding:clamp(64px, 8vh, 96px) clamp(14px, 2.2vw, 40px) clamp(20px, 3vh, 40px);
    background:radial-gradient(ellipse 66% 48% at 84% 12%, rgba(240,138,38,0.18), transparent 62%),
               radial-gradient(ellipse 50% 42% at 12% 84%, rgba(201,65,44,0.11), transparent 64%),
               radial-gradient(ellipse 72% 58% at 14% 22%, rgba(37,160,154,0.15), transparent 66%),
               radial-gradient(ellipse 50% 44% at 62% 92%, rgba(30,120,124,0.11), transparent 68%); }
  .vf{ position:absolute; inset:clamp(10px,1.2vw,20px); pointer-events:none; }
  .vf-corner{ position:absolute; width:24px; height:24px; border-color:rgba(243,241,234,0.3); }
  .vf-corner.tl{ top:0; left:0; border-top:2px solid; border-left:2px solid; }
  .vf-corner.tr{ top:0; right:0; border-top:2px solid; border-right:2px solid; }
  .vf-corner.bl{ bottom:0; left:0; border-bottom:2px solid; border-left:2px solid; }
  .vf-corner.br{ bottom:0; right:0; border-bottom:2px solid; border-right:2px solid; }
  .hero-role-line{ display:flex; align-items:center; justify-content:center; gap:14px;
    margin-bottom:calc(20px * var(--hero-gap)); flex-wrap:wrap; }
  .hero-role-line .mono{ font-size:calc(13px * var(--role-size)); color:var(--role-color); letter-spacing:0.08em;
    filter:blur(var(--role-blur)); opacity:var(--role-opacity);
    text-shadow:0 0 calc(24px * var(--role-glow)) var(--glow-a), 0 0 calc(9px * var(--role-fringe)) var(--red); }
  .hero-role-line .div{ width:1px; height:12px; background:var(--line); }
  .hero-name-wrap{ position:relative; display:inline-block; max-width:100%; }
  /* blurred duplicate behind the type = halation bleeding off the letterforms */
  .hero-name-glow{
    position:absolute; inset:0; z-index:0; pointer-events:none; user-select:none;
    font-family:var(--head-font); text-transform:uppercase;
    font-size:calc(clamp(50px,11.5vw,150px) * var(--hero-size) * var(--hero-fit, 1)); line-height:0.9;
    white-space:nowrap; color:var(--name-glow-color);
    filter:blur(var(--name-glow-blur)) saturate(1.5);
    opacity:var(--name-glow);
    transform:scale(var(--name-glow-spread));
    mix-blend-mode:screen;
  }
  /* red bleed hugging the glyph edges — the fringe a hot highlight leaves on film */
  .hero-name-fringe{
    position:absolute; inset:0; z-index:0; pointer-events:none; user-select:none;
    font-family:var(--head-font); text-transform:uppercase;
    font-size:calc(clamp(50px,11.5vw,150px) * var(--hero-size) * var(--hero-fit, 1)); line-height:0.9;
    white-space:nowrap; color:var(--name-fringe-color);
    filter:blur(var(--name-fringe-blur)) saturate(1.6);
    opacity:var(--name-fringe);
    mix-blend-mode:screen;
    transform:scale(calc(1 + var(--name-fringe-spread, 0.008)));
  }
  body.no-film .hero-name-fringe{ display:none; }
  .hero-above{ font-family:var(--head-font); text-transform:uppercase; line-height:0.95;
    font-size:calc(clamp(50px,11.5vw,150px) * var(--hero-size) * var(--hero-above));
    color:var(--above-color); opacity:var(--above-opacity); margin-bottom:calc(0.10em * var(--hero-gap));
    filter:blur(var(--above-blur));
    text-shadow:0 0 calc(34px * var(--above-glow)) var(--glow-a), 0 0 calc(12px * var(--above-fringe)) var(--red); }
  h1.hero-name{
    position:relative; z-index:1; white-space:nowrap;
    filter:blur(var(--name-blur)); opacity:var(--name-opacity);
    font-size:calc(clamp(50px,11.5vw,150px) * var(--hero-size) * var(--hero-fit, 1)); line-height:0.9;
    /* noise layered over the gradient, both clipped to the glyphs */
    background-image:linear-gradient(98deg, var(--ink) 30%, var(--amber) 72%, var(--red) 100%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  body.no-film h1.hero-name{ background-image:linear-gradient(98deg, var(--ink) 30%, var(--amber) 72%, var(--red) 100%); }
  body.no-film .hero-name-glow{ display:none; }
  /* section headings get the same bleed, quieter */
  .scene h2{ text-shadow:0 0 30px var(--glow-a), 0 0 8px rgba(201,65,44,calc(var(--fringe) * 0.45)); }
  .slide-title{ text-shadow:0 0 34px var(--glow-a), 0 0 10px rgba(201,65,44,calc(var(--fringe) * 0.5)), 0 2px 14px rgba(0,0,0,0.6); }
  .hero-sub{ margin:calc(clamp(18px,2.6vh,28px) * var(--hero-gap)) auto 0;
    font-size:calc(clamp(17px,1.55vw,23px) * var(--sub-size)); line-height:1.5;
    color:var(--sub-color); max-width:62ch;
    filter:blur(var(--sub-blur)); opacity:var(--sub-opacity);
    text-shadow:0 0 calc(26px * var(--sub-glow)) var(--glow-a), 0 0 calc(9px * var(--sub-fringe)) var(--red); }
  .hero-sub b{ color:var(--ink); font-weight:600; }
  .hero-sub .hl{ color:var(--amber); font-weight:600; }
  .hero-meta{ margin-top:calc(clamp(14px,2vh,22px) * var(--hero-gap));
    font-size:calc(clamp(12px,1vw,14px) * var(--meta-size));
    color:var(--meta-color); opacity:var(--meta-opacity);
    filter:blur(var(--meta-blur));
    text-shadow:0 0 calc(26px * var(--meta-glow)) var(--meta-color),
                0 0 calc(9px * var(--meta-glow)) var(--meta-color);
    display:flex; justify-content:center; gap:clamp(12px,2vw,28px); flex-wrap:wrap; }
  .hero-meta b{ color:var(--meta-color); font-weight:700; }
  .hero-cta{ display:none; }
  .btn{ display:inline-flex; align-items:center; gap:8px; padding:13px 24px; border-radius:2px; font-size:14px; font-weight:600;
        text-decoration:none; border:1px solid var(--line); transition:transform .15s ease, background .7s ease, border-color .7s ease; cursor:pointer; font-family:inherit; }
  .btn:hover{ transform:translateY(-2px); }
  .btn-primary{ background:var(--ink); color:#07080a; border-color:var(--ink); }
  .btn-primary:hover{ background:var(--teal); border-color:var(--teal); color:#04100f; }
  .btn-ghost{ background:transparent; color:var(--ink); }
  .btn-ghost:hover{ border-color:var(--ink-dim); }

  section.section{ padding:clamp(26px, var(--sec-pad), var(--sec-pad)) 0; }
  .scene{ display:flex; align-items:baseline; gap:clamp(10px,1.4vw,18px); margin-bottom:clamp(20px,3vh,38px); flex-wrap:wrap; }
  .scene-num{ font-size:13px; color:var(--ink-dim); white-space:nowrap; }
  .scene-num b{ color:var(--amber); font-weight:600; }
  .scene h2{ font-size:clamp(30px,4.5vw,52px); font-weight:700; letter-spacing:-0.01em; }
  .slide-title{ font-weight:var(--head-weight); }
  h1.hero-name, .hero-name-glow, .hero-name-fringe, .hero-above{ font-weight:var(--head-weight); }
  .scene-line{ flex:1; height:1px; background:var(--line); min-width:40px; }
  .sec-align-center .scene{ justify-content:center; text-align:center; }
  .sec-align-center .scene-line{ display:none; }

  .filters{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:34px; }
  .filter-btn{ padding:9px 18px; border-radius:999px; border:1px solid var(--line); background:transparent; color:var(--ink-dim);
               font-size:13px; font-weight:600; cursor:pointer; transition:all .15s ease; font-family:inherit; }
  .filter-btn.active, .filter-btn:hover{ border-color:var(--teal); color:var(--ink); background:rgba(47,182,173,0.08); }

  /* 2K and wider: let the layout breathe instead of stranding it mid-screen */
  @media (min-width:1800px){
    .wrap{ max-width:min(var(--wrap-max), 88vw); }
  }
  @media (min-width:2400px){
    body{ font-size:calc(17px * var(--font-scale)); }
  }

  /* tall phones (9:16): keep the hero legible without scrolling */
  @media (max-width:560px){
    h1.hero-name, .hero-name-glow, .hero-name-fringe{
      font-size:calc(clamp(30px, 15vw, 74px) * var(--hero-size) * var(--hero-fit, 1)); line-height:0.94; }
    /* Scale optical effects with the smaller mobile typography.
       iOS/Safari otherwise makes fixed-pixel blur look much softer than desktop. */
    /* Mobile Safari: fractional filter blur softens glyphs much more than desktop Chromium.
       Keep the face/fringe crisp and use only the separate glow layer for optical bloom. */
    .hero-name-glow{ filter:blur(calc(var(--name-glow-blur) * var(--m-name-glow-mult, 0.18))) saturate(1.5); }
    .hero-name-fringe{
      filter:blur(calc(var(--name-fringe-blur) * var(--m-name-fringe-mult, 0.10))) saturate(1.6);
      transform:none;
    }
    h1.hero-name{ filter:blur(calc(var(--name-blur) * var(--m-text-blur-mult, 0))); }
    .hero-role-line .mono{
      font-size:11px;
      filter:blur(calc(var(--role-blur) * var(--m-text-blur-mult, 0)));
      text-shadow:0 0 calc(24px * var(--role-glow) * var(--m-text-glow-mult, 0.22)) var(--glow-a),
                  0 0 calc(9px * var(--role-fringe) * var(--m-text-fringe-mult, 0.22)) var(--red);
    }
    .hero-above{
      filter:blur(calc(var(--above-blur) * var(--m-text-blur-mult, 0)));
      text-shadow:0 0 calc(34px * var(--above-glow) * var(--m-text-glow-mult, 0.22)) var(--glow-a),
                  0 0 calc(12px * var(--above-fringe) * var(--m-text-fringe-mult, 0.22)) var(--red);
    }
    .hero-sub{
      font-size:16px; margin-top:14px;
      filter:blur(calc(var(--sub-blur) * var(--m-text-blur-mult, 0)));
      text-shadow:0 0 calc(26px * var(--sub-glow) * var(--m-text-glow-mult, 0.22)) var(--glow-a),
                  0 0 calc(9px * var(--sub-fringe) * var(--m-text-fringe-mult, 0.22)) var(--red);
    }
    .hero-meta{
      filter:blur(calc(var(--meta-blur) * var(--m-text-blur-mult, 0)));
      text-shadow:0 0 calc(26px * var(--meta-glow) * var(--m-text-glow-mult, 0.22)) var(--meta-color),
                  0 0 calc(9px * var(--meta-glow) * var(--m-text-fringe-mult, 0.22)) var(--meta-color);
    }
    .hero-role-line{ gap:9px; margin-bottom:14px; }
    .hero-cta{ margin-top:24px; gap:10px; width:auto; }
    .hero-cta .btn{ flex:0 0 auto; justify-content:center; padding:8px 14px; font-size:12px; }
    .scene h2{ font-size:clamp(24px,7vw,34px); }
    .scene-num{ font-size:11px; }
  }

  /* ---------- BIG SLIDER (horizontal / music videos) ---------- */
  .block{ margin-bottom:var(--gap); }
  /* a quiet rule so horizontal and vertical work read as separate sets */
  .block + .block{ padding-top:clamp(18px,2.6vh,34px); margin-top:clamp(10px,1.6vh,22px); position:relative; }
  .block + .block::before{ content:''; position:absolute; top:0; left:50%; transform:translateX(-50%);
    width:min(var(--wrap-max), 94vw); height:1px; background:var(--line); opacity:0.7; }
  .block-head{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:16px; flex-wrap:wrap; }
  .block-title{ display:flex; align-items:center; gap:12px; }
  .track-tag{ font-size:11px; padding:3px 9px; border-radius:2px; font-weight:700; }
  .track-tag.v3{ background:rgba(240,138,38,0.16); color:var(--amber); }
  .track-tag.v2{ background:rgba(201,65,44,0.18); color:#e0705c; }
  .track-tag.v1{ background:rgba(243,241,234,0.1); color:var(--ink-dim); }
  .track-name{ font-size:clamp(18px,2.4vw,26px); font-weight:700; }
  .nav-arrows{ display:flex; gap:8px; }
  .arrow{ width:44px; height:44px; border-radius:50%; border:1px solid var(--line); background:rgba(21,24,28,0.7); color:var(--ink);
          display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all .18s ease; font-size:18px; }
  .arrow:hover{ border-color:var(--teal); background:rgba(47,182,173,0.16); transform:scale(1.06); }
  .arrow[disabled]{ opacity:0.3; cursor:default; transform:none; }

  /* works read as a wall of frames, the way a reel contact sheet does */
  .slider{ display:grid; grid-template-columns:repeat(var(--hcols, 3), 1fr); gap:var(--gap); }
  @media (max-width:900px){ .slider{ grid-template-columns:repeat(2, 1fr); } }
  @media (max-width:560px){ .slider{ grid-template-columns:repeat(4, minmax(0,1fr)); gap:var(--gap); } }
  .slide{ position:relative; width:100%; aspect-ratio:16 / 9; height:auto;
          scroll-snap-align:center; border:1px solid var(--line); border-radius:3px; overflow:hidden; cursor:pointer;
          transition:border-color .3s ease; background:#101316; }
  .slide:hover{ border-color:rgba(47,182,173,0.5); z-index:5; }
  @media (max-width:560px){
    .slide-info{ display:none !important; }
    .slide::after{ display:none !important; }
    .slide-meta{ display:none !important; }
    .vtile-info{ display:none !important; }
    .vtile::after{ display:none !important; }
    .vtile-stats{ display:none !important; }
    .slide-meta{ font-size:7.8px; }
    .slide-meta > span:not(.slide-views){ display:none !important; }
    .slide-meta:empty{ display:none !important; }
    .slide .modes, .vtile .modes{ display:none !important; }
  }
  .slide img, .slide video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.2s ease; }
  .slide:hover img, .slide:hover video{ transform:scale(1.04); }
  .slide::after{ content:""; position:absolute; inset:0; z-index:1;
    background:linear-gradient(to top, rgba(4,20,22,0.96) 0%, rgba(6,26,28,0.55) 32%, rgba(6,26,28,0.1) 60%, transparent 80%); }
  .slide-info{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:14px 16px; }
  .slide-title{ font-family:var(--head-font); text-transform:uppercase; font-size:clamp(13px,1.2vw,19px); line-height:1; margin-bottom:4px; }
  .slide-meta{ display:flex; gap:18px; font-size:13px; color:var(--ink-dim); flex-wrap:wrap; align-items:center;
    position:absolute; top:14px; right:16px; z-index:2; }
  .slide-meta > span:not(.slide-views){ display:none; }
  .stat{ display:inline-flex; align-items:center; gap:6px; font-weight:600; }
  .stat svg{ width:14px; height:14px; fill:currentColor; opacity:0.9; }
  .slide-views{ color:var(--amber); padding:4px 8px; background:rgba(7,5,4,0.55); border-radius:2px; backdrop-filter:blur(4px); }
  .slide-likes{ color:var(--ink); }
  .vtile-stats{ position:absolute; top:10px; right:10px; z-index:2; display:flex; flex-direction:column; gap:4px; align-items:flex-end; }
  .vtile-stats span{ font-size:10px; padding:3px 7px; border-radius:2px; background:rgba(7,5,4,0.66);
    color:var(--ink-dim); backdrop-filter:blur(3px); display:inline-flex; align-items:center; gap:4px; }
  .vtile-stats svg{ width:10px; height:10px; fill:currentColor; }
  .slide.playing .slide-info, .slide.playing::after, .slide.playing .playbadge{ opacity:0; pointer-events:none; }
  .slide.playing{ cursor:default; }
  .slide-player{ position:absolute; inset:0; z-index:5; background:#000; display:none; }
  .slide.playing .slide-player{ display:block; }
  .slide-player video, .slide-player iframe{ width:100%; height:100%; border:0; display:block; object-fit:contain; background:#000; }
  .slide-stop{ position:absolute; top:14px; right:14px; z-index:6; width:38px; height:38px; border-radius:50%;
    border:1px solid rgba(243,241,234,0.35); background:rgba(10,7,5,0.72); color:var(--ink); font-size:16px;
    cursor:pointer; display:none; align-items:center; justify-content:center; backdrop-filter:blur(5px); }
  .slide.playing .slide-stop{ display:flex; }
  .slide-stop:hover{ background:var(--red); border-color:var(--red); }
  .slide::after, .slide-info, .slide-meta{ opacity:0; }
  .slide:hover::after, .slide:hover .slide-info, .slide:hover .slide-meta{ opacity:1; }
  .slide::after, .slide-info, .slide-meta, .playbadge{ transition:opacity .6s ease; }

  .vtile.playing .vtile-info, .vtile.playing::after, .vtile.playing .vtile-stats{ opacity:0; pointer-events:none; }
  .vtile-player{ position:absolute; inset:0; z-index:5; background:#000; display:none; }
  .vtile.playing .vtile-player{ display:block; }
  .vtile-player video, .vtile-player iframe{ width:100%; height:100%; border:0; display:block; object-fit:contain; background:#000; }
  .vtile-stop{ position:absolute; top:8px; right:8px; z-index:6; width:30px; height:30px; border-radius:50%;
    border:1px solid rgba(243,241,234,0.3); background:rgba(10,7,5,0.72); color:var(--ink); font-size:13px;
    cursor:pointer; display:none; align-items:center; justify-content:center; }
  .vtile.playing .vtile-stop{ display:flex; }
  .vtile::after, .vtile-info, .vtile-stats{ opacity:0; }
  .vtile:hover::after, .vtile:hover .vtile-info, .vtile:hover .vtile-stats{ opacity:1; }
  .vtile::after, .vtile-info, .vtile-stats{ transition:opacity .6s ease; }

  /* CLIP / SHOTS switch — always on show, right under the title */
  .localhint{ font-size:11px; color:var(--ink-dim); opacity:0.75; }
  /* reorder handles — only while editing */
  .movers{ position:absolute; top:10px; left:10px; z-index:9; display:none; gap:4px; }
  .share-btn{ position:absolute; top:10px; right:10px; z-index:9; width:30px; height:30px;
    border-radius:4px; border:1px solid rgba(243,241,234,0.3); background:rgba(7,5,4,0.82);
    backdrop-filter:blur(5px); color:var(--ink); cursor:pointer; display:flex;
    align-items:center; justify-content:center; padding:0; opacity:0; pointer-events:none;
    transition:opacity .4s ease, background .7s ease, border-color .7s ease, color .7s ease; }
  .slide:hover .share-btn, .vtile:hover .share-btn{ opacity:1; pointer-events:auto; }
  .share-btn:hover{ background:rgba(243,241,234,0.9); border-color:var(--ink); color:#0d1016; }
  .share-btn.copied{ opacity:1 !important; pointer-events:auto; background:var(--teal); border-color:var(--teal); color:#04100f; }
  .share-btn svg{ width:14px; height:14px; }
  .vtile .share-btn{ width:24px; height:24px; }
  .vtile .share-btn svg{ width:12px; height:12px; }
  @media (max-width:560px){ .share-btn{ display:none !important; } }
  .movers.grid4{ display:none; grid-template-columns:repeat(2, auto); }
  body.editing .vtile:hover .movers.grid4{ display:grid; }
  body.editing .slide:hover .movers, body.editing .vtile:hover .movers{ display:flex; }
  .mover{ width:30px; height:30px; border-radius:4px; border:1px solid rgba(243,241,234,0.3);
    background:rgba(7,5,4,0.82); backdrop-filter:blur(5px); color:var(--ink); font-size:14px; line-height:1;
    cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0; }
  .mover:hover{ background:rgba(243,241,234,0.9); border-color:var(--ink); color:#0d1016; }
  .vtile .mover{ width:24px; height:24px; font-size:12px; }
  .modes{ display:none !important; }
  .mode-btn{ font-family:'JetBrains Mono',monospace; font-size:8px; letter-spacing:0.08em; padding:4px 9px;
    background:rgba(7,5,4,0.6); border:1px solid var(--line); border-radius:2px; color:var(--ink-dim);
    cursor:pointer; transition:all .2s ease; backdrop-filter:blur(6px); }
  .mode-btn:hover{ color:var(--ink); border-color:rgba(243,241,234,0.6); }
  .mode-btn.on{ background:var(--ink); border-color:var(--ink); color:#0d1016; }
  .mode-btn[disabled]{ opacity:0.38; cursor:default; }
  .mode-btn[disabled]:hover{ color:var(--ink-dim); border-color:var(--line); }
  .vtile .modes{ margin-top:8px; gap:4px; }
  .vtile .mode-btn{ font-size:9px; padding:4px 8px; letter-spacing:0.06em; }
  .slide.playing .slide-info{ opacity:0; }
  .slide.playing{ z-index:12; border-color:rgba(240,138,38,0.55); box-shadow:0 24px 70px rgba(0,0,0,0.6); }
  .slider:has(.slide.playing) .slide:not(.playing){ opacity:0.3; transition:opacity .4s ease; }

  /* the frame physically turns over: clip on the front, 3x3 contact sheet on the back */
  .slide, .vtile{ perspective:1400px; }
  .flip{ position:absolute; inset:0; z-index:1; transform-style:preserve-3d; border-radius:3px;
    transition:transform .85s cubic-bezier(.62,.02,.34,1); }
  .slide.shots .flip, .vtile.shots .flip{ transform:rotateY(180deg); }
  .face{ position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; overflow:hidden; }
  .shotreel{ position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden;
    transform:rotateY(180deg); background:#0a0705; padding:5px; border-radius:4px;
    display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr); gap:5px; }
  .shotreel .cell{ position:relative; overflow:hidden; background:#15100c; border-radius:6px;
    transition:transform .5s cubic-bezier(.18,.84,.28,1), box-shadow .5s ease, border-radius .5s ease; }
  .shotreel .cell:hover{ transform:scale(1.2); z-index:9; border-radius:8px;
    box-shadow:0 22px 55px rgba(0,0,0,0.7), 0 0 34px var(--glow-a); }
  .shotreel .cell:hover img{ transform:scale(1.06); }
  .shotreel .cell img{ transition:opacity .55s ease, transform .9s cubic-bezier(.2,.7,.3,1); }
  .shotreel .cell img{ width:100%; height:100%; object-fit:cover; display:block;
    opacity:0; transform:scale(1.12); transition:opacity .55s ease, transform .9s cubic-bezier(.2,.7,.3,1); }
  .slide.shots .shotreel .cell img, .vtile.shots .shotreel .cell img{ opacity:1; transform:none; }
  .slide.shots .shotreel, .vtile.shots .shotreel{ overflow:visible; }
  .vtile .shotreel{ padding:3px; gap:3px; } .vtile .shotreel .cell{ border-radius:4px; }
  .vtile .shotreel .cell:hover{ transform:scale(1.35); }
  .shotreel .cell:nth-child(1) img{ transition-delay:.30s } .shotreel .cell:nth-child(2) img{ transition-delay:.36s }
  .shotreel .cell:nth-child(3) img{ transition-delay:.42s } .shotreel .cell:nth-child(4) img{ transition-delay:.48s }
  .shotreel .cell:nth-child(5) img{ transition-delay:.54s } .shotreel .cell:nth-child(6) img{ transition-delay:.60s }
  .shotreel .cell:nth-child(7) img{ transition-delay:.66s } .shotreel .cell:nth-child(8) img{ transition-delay:.72s }
  .shotreel .cell:nth-child(9) img{ transition-delay:.78s }
  .shotreel .cell.empty::after{ content:''; position:absolute; inset:0;
    background:repeating-linear-gradient(45deg, rgba(255,255,255,0.03) 0 6px, transparent 6px 12px); }
  /* caption and switch never turn — they stay readable through the flip */
  .slide-info, .vtile-info{ z-index:8; }
  .slide::after, .vtile::after{ z-index:2; pointer-events:none; }
  .playbadge{ display:none !important; }
  /* the caption strip spans the bottom row, so only its buttons stay clickable */
  .slide-info, .vtile-info{ pointer-events:none; }
  .modes, .mode-btn{ pointer-events:auto; }
  /* once flipped, the gradient would only muddy the stills */
  .slide.shots::after, .vtile.shots::after{ opacity:0; }
  @media (prefers-reduced-motion: reduce){ .flip{ transition:none; } }

  .playbadge{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:5;
    width:clamp(62px, 7vw, 96px); aspect-ratio:1 / 1; height:auto; flex:0 0 auto; box-sizing:border-box;
    border-radius:9999px; border:1.5px solid rgba(243,241,234,0.55);
    background:rgba(7,5,4,0.32); -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px);
    display:grid; place-items:center; pointer-events:auto; cursor:pointer; overflow:hidden;
    transition:transform .35s cubic-bezier(.2,.8,.3,1), background .35s ease, border-color .35s ease;
    box-shadow:0 10px 40px rgba(0,0,0,0.45); }
  .playbadge:hover{ transform:translate(-50%,-50%) scale(1.07);
    background:rgba(20,14,10,0.5); border-color:rgba(255,236,214,0.85);
    box-shadow:0 12px 44px rgba(0,0,0,0.5), 0 0 26px rgba(255,190,120,0.28); }
  /* the glyph is nudged right by a hair so the triangle reads as optically centred */
  .playbadge svg{ width:32%; height:32%; display:block; fill:var(--ink); transform:translateX(7%); }
  .playbadge:hover svg{ fill:#fff; }
  .slide.playing .playbadge, .slide.shots .playbadge,
  .vtile.playing .playbadge, .vtile.shots .playbadge{ opacity:0; }
  .playbadge{ opacity:1; transition:transform .35s cubic-bezier(.2,.8,.3,1), background .35s ease, border-color .35s ease, opacity .3s ease; }
  .vtile .playbadge{ width:clamp(38px,4vw,52px); border-width:1px; }
  .vtile .playbadge:hover{ transform:translate(-50%,-50%) scale(1.07);
    background:rgba(20,14,10,0.5); border-color:rgba(255,236,214,0.85); }

  /* Mobile: play button at half desktop/mobile inherited size */
  @media (max-width:560px){
    .slide .playbadge{ width:clamp(31px, 3.5vw, 48px); border-width:1px; }
    .vtile .playbadge{ width:clamp(19px, 2vw, 26px); }
  }

  /* ---------- VERTICAL GRID ---------- */
  .vgrid{ display:grid; grid-template-columns:repeat(var(--vcols), 1fr); gap:var(--gap); }
  @media (max-width:860px){ .vgrid{ grid-template-columns:repeat(var(--vcols-m), 1fr); } }
  @media (max-width:560px){
    .vtile-title{ font-size:12px; } .vtile-meta{ font-size:10px; } .vtile-info{ padding:10px; }
    .vtile-stats span{ font-size:9px; padding:2px 5px; }
  }
  .vtile.h{ aspect-ratio:16/9; grid-column:span 2; }
  @media (max-width:560px){ .vtile.h{ grid-column:1 / -1; } }
  .vtile{ position:relative; aspect-ratio:9/16; overflow:hidden; border:1px solid var(--line); border-radius:3px; cursor:pointer;
          background:#101316; transition:transform .25s ease, border-color .25s ease; }
  .vtile:hover{ transform:translateY(-5px); border-color:rgba(47,182,173,0.5); z-index:5; }
  .vtile img, .vtile video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.2s ease; }
  .vtile:hover img, .vtile:hover video{ transform:scale(1.05); }
  .vtile::after{ content:""; position:absolute; inset:0; z-index:1;
    background:linear-gradient(to top, rgba(4,20,22,0.94) 0%, rgba(6,26,28,0.5) 30%, rgba(6,26,28,0.1) 55%, transparent 76%); }
  .vtile-info{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:14px; }
  .vtile-title{ font-size:14px; font-weight:700; line-height:1.25; }
  .vtile-meta{ font-size:11px; color:var(--ink-dim); margin-top:3px; }
  .vtile-views{ position:absolute; top:10px; right:10px; z-index:2; font-size:10px; padding:3px 7px; border-radius:2px;
    background:rgba(7,8,10,0.6); color:var(--ink-dim); backdrop-filter:blur(3px); }
  .g0{background:linear-gradient(135deg,#12312f,#4a2a10,#6b3312);} .g1{background:linear-gradient(150deg,#1d2836,#52290f,#7a3a14);}
  .g2{background:linear-gradient(120deg,#14322d,#3d1d13,#8a4415);} .g3{background:linear-gradient(160deg,#102b2c,#45200f,#6d2f18);}
  .g4{background:linear-gradient(140deg,#183230,#4d2a12,#7e3a13);} .g5{background:linear-gradient(130deg,#122a2c,#3a2113,#93471a);}
  .g6{background:linear-gradient(155deg,#113330,#4a2611,#742c1a);} .g7{background:linear-gradient(145deg,#143130,#55300f,#8a3d12);}

  /* ---------- ABOUT / PROCESS / SERVICES ---------- */
  /* two tabs sitting side by side; the open one grows and fills */
  .switcher{ display:flex; gap:8px; margin-bottom:32px; flex-wrap:wrap; }
  .swtab{ display:flex; align-items:baseline; gap:7px; padding:9px 16px; cursor:pointer;
    border:1px solid var(--line); border-radius:2px; background:rgba(10,7,5,0.45); color:var(--ink-dim);
    font-family:inherit; transition:all .7s cubic-bezier(.22,.61,.36,1); }
  .swtab:hover{ border-color:rgba(243,241,234,0.55); color:var(--ink); }
  .swtab .sw-name{ font-size:13px; font-weight:700; transition:font-size .35s ease; white-space:nowrap; }
  .swtab .sw-count{ font-size:10px; opacity:0.75; }
  .swtab.on{ color:#0d1016; border-color:var(--ink); background:var(--ink);
    padding:10px 18px; }
  /* the tab that isn't open breathes gently, so it reads as something you can press */
  .swtab:not(.on){ animation:tabBreathe 2.4s ease-in-out infinite; }
  .swtab:not(.on):hover{ animation:none; }
  @keyframes tabBreathe{
    0%, 100%{ border-color:var(--line); }
    50%{ border-color:rgba(243,241,234,0.6); color:var(--ink); }
  }
  @media (prefers-reduced-motion: reduce){ .swtab:not(.on){ animation:none; } }
  .swtab.on .sw-name{ font-size:clamp(14px,1.4vw,16px); }
  .swpane{ display:none; }
  .swpane.on{ display:block; animation:swIn .4s ease; }
  @keyframes swIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
  @media (max-width:560px){
    .switcher{ gap:6px; margin-bottom:20px; justify-content:flex-start; }
    .swtab{ padding:6px 10px; gap:5px; flex:0 0 auto; justify-content:flex-start;
      background:transparent !important; animation:none !important; }
    .swtab.on{ padding:6px 10px; color:var(--ink); background:transparent !important;
      border-color:var(--ink); animation:swtabBlink 1.4s ease-in-out infinite !important; }
    .swtab .sw-name{ font-size:12px; }
    .swtab.on .sw-name{ font-size:12px; }
    .swtab .sw-count{ font-size:10px; }
    @keyframes swtabBlink{ 0%,100%{ border-color:var(--ink); opacity:1; } 50%{ border-color:rgba(243,241,234,0.25); opacity:0.75; } }
  }

  .about{ display:grid; grid-template-columns:0.8fr 1.2fr; gap:40px; align-items:start; }
  @media (max-width:900px){
    .about{ grid-template-columns:1fr; gap:28px; }
    /* stacked on one column the portrait would run the full width and tower over the text */
    .about-frame{ max-width:min(320px, 62vw); margin:0 auto; }
  }
  @media (max-width:560px){
    .about{ display:grid; grid-template-columns:118px minmax(0,1fr); column-gap:14px; row-gap:10px; align-items:start; }
    .about-frame{ float:none; max-width:none; width:118px; height:154px; aspect-ratio:auto; border-radius:16px; margin:0; grid-column:1; grid-row:1 / span 2; }
    .about-text{ display:contents; text-align:left; }
    .about-text h2{ grid-column:2; grid-row:1; font-size:14px; line-height:1.15; margin:0; max-width:none; align-self:end; font-weight:700; }
    .about-text #aboutIntro{ grid-column:2; grid-row:2; font-size:14px; line-height:1.32; margin:0; align-self:start; overflow:hidden; font-weight:400; }
    .about-text #aboutText{ grid-column:1 / -1; grid-row:3; font-size:14px; line-height:1.5; margin:4px 0 0; }
    .about-tags{ grid-column:1 / -1; grid-row:4; }
    .stat-row{ grid-column:1 / -1; grid-row:5; }
  }
  .about-frame{ aspect-ratio:4/5; border-radius:16px; position:relative; overflow:hidden; border:1px solid var(--line);
    background:linear-gradient(150deg,#123331,#1a2233,#3d2712); background-size:cover; background-position:center; }
  .about-text h2{ font-size:clamp(28px,4vw,38px); margin-bottom:18px; font-weight:700; }
  .about-text p{ color:var(--ink-dim); font-size:16px; margin-bottom:15px; max-width:56ch; white-space:pre-line; }
  .about-tags{ display:flex; gap:8px; flex-wrap:wrap; margin-top:20px; }
  .about-tags span{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.08em;
    padding:7px 13px; border:1px solid var(--line); border-radius:2px; color:var(--ink-dim);
    transition:color .25s ease, border-color .25s ease; }
  .about-tags span:hover{ color:var(--ink); border-color:var(--amber); }
  @media (max-width:560px){
    .about-tags{ gap:5px; margin-top:14px; }
    .about-tags span{ font-size:8px; letter-spacing:0.04em; padding:4px 7px; }
  }
  .stat-row{ display:flex; gap:34px; margin-top:30px; flex-wrap:wrap; }
  .stat-row div{ display:flex; flex-direction:column; }
  .stat-num{ font-size:27px; font-weight:700; }
  .stat-label{ font-size:12px; color:var(--ink-dim); margin-top:2px; }
  @media (max-width:560px){
    .stat-row{ flex-wrap:nowrap; gap:12px; margin-top:20px; }
    .stat-row div{ flex:1 1 0; min-width:0; }
    .stat-num{ font-size:17px; }
    .stat-label{ font-size:9px; line-height:1.25; }
  }


  #services{ border-top:1px solid var(--line); margin-top:clamp(28px,4vh,60px); }
  .services{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(46,35,28,0.8); border:1px solid var(--line); }
  @media (max-width:800px){ .services{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:480px){ .services{ grid-template-columns:1fr; } .service{ padding:22px 18px; } }
  .service{ background:rgba(10,7,5,0.62); padding:30px 24px; }
  .service .tc{ font-size:12px; color:var(--amber); margin-bottom:16px; }
  .service h3{ font-family:var(--head-font); text-transform:uppercase; letter-spacing:0.02em;
    font-size:clamp(17px,1.9vw,24px); margin-bottom:10px; font-weight:var(--head-weight); }
  .service p{ font-size:14px; color:var(--ink-dim); }
  #brands{ border-top:1px solid var(--line); margin-top:clamp(28px,4vh,60px); }
  #brands .brandwall{ margin-top:clamp(14px,2.4vh,30px); }
  /* brand wall — logos and wordmarks floating on the page, no boxes */
  .brandwall{ display:grid; grid-template-columns:repeat(4, 1fr);
    row-gap:clamp(48px, 7vw, 110px); column-gap:clamp(24px, 4vw, 70px); align-items:center; }
  @media (max-width:900px){ .brandwall{ grid-template-columns:repeat(3, 1fr); row-gap:clamp(40px,8vw,70px); } }
  @media (max-width:560px){ .brandwall{ grid-template-columns:repeat(2, 1fr); row-gap:44px; column-gap:22px; } }
  .brand{ display:flex; align-items:center; justify-content:center; min-height:clamp(60px, 7vw, 96px);
    padding:6px; text-align:center; }
  .brand .bname{ color:#8c8276; transition:color .35s ease, text-shadow .35s ease; line-height:1;
    display:inline-block; max-width:100%; word-break:break-word; }
  .brand:hover .bname{ color:var(--ink); text-shadow:0 0 30px var(--glow-a); }
  .brand img{ max-width:82%; max-height:clamp(44px, 5.4vw, 76px); object-fit:contain;
    filter:grayscale(1) brightness(1.8) opacity(0.6); transition:filter .35s ease; }
  .brand:hover img{ filter:grayscale(0) brightness(1) opacity(1); }

  /* wordmark voices — pick the one closest to the real brand */
  .bm-display{ font-family:var(--head-font); text-transform:uppercase; font-size:clamp(20px,2.5vw,40px); letter-spacing:0.005em; }
  .bm-grotesk{ font-family:'Inter',sans-serif; font-weight:900; text-transform:uppercase; font-size:clamp(16px,1.9vw,30px); letter-spacing:-0.02em; }
  .bm-serif{ font-family:'Cormorant Garamond',serif; font-weight:400; font-size:clamp(22px,2.8vw,44px); letter-spacing:0.06em; }
  .bm-serif-i{ font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:400; font-size:clamp(22px,2.8vw,44px); letter-spacing:0.02em; }
  .bm-fashion{ font-family:'Inter',sans-serif; font-weight:300; text-transform:uppercase; font-size:clamp(13px,1.5vw,23px); letter-spacing:0.34em; }
  .bm-mono{ font-family:'JetBrains Mono',monospace; font-weight:500; text-transform:uppercase; font-size:clamp(13px,1.5vw,23px); letter-spacing:0.1em; }
  /* geometric, medium weight, generously tracked — Reytel's register */
  .bm-geo{ font-family:'Inter',sans-serif; font-weight:500; text-transform:uppercase; font-size:clamp(15px,1.8vw,27px); letter-spacing:0.2em; }
  /* heavy but wide — Stimma's register */
  .bm-wide{ font-family:'Inter',sans-serif; font-weight:700; text-transform:uppercase; font-size:clamp(15px,1.8vw,28px); letter-spacing:0.16em; }

  .clients-strip{ margin-top:44px; padding-top:26px; border-top:1px solid var(--line); }
  .clients-strip .cs-label{ font-size:12px; color:var(--ink-dim); margin-bottom:14px; }
  .clients-strip .cs-list{ display:flex; flex-wrap:wrap; gap:10px 26px; }
  .clients-strip .cs-list span{ font-size:15px; font-weight:600; color:#6f757d; transition:color .2s; }
  .clients-strip .cs-list span:hover{ color:var(--ink); }

  .contact{ text-align:center; padding:clamp(34px, var(--sec-pad), var(--sec-pad)) clamp(14px,2.2vw,40px) clamp(28px,4vh,56px);
    background:radial-gradient(ellipse 62% 62% at 50% 100%, var(--glow-a), transparent 72%);
    border-top:1px solid var(--line); }
  .contact h2{ font-family:var(--head-font); text-transform:uppercase;
    font-size:clamp(22px,2.6vw,38px); font-weight:var(--head-weight);
    letter-spacing:0.12em; margin-bottom:16px; }
  .contact p{ color:var(--ink-dim); margin-bottom:34px; font-size:16px; }
  .contact-grid{ display:flex; justify-content:center; gap:clamp(10px,1.6vw,18px); flex-wrap:wrap;
    max-width:960px; margin:0 auto; }
  .cbox{ background:transparent; border:1px solid var(--line); border-radius:2px;
    padding:clamp(16px,1.8vw,20px) clamp(20px,2.4vw,32px); text-decoration:none; color:var(--ink);
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; min-width:138px;
    transition:border-color .7s ease, background .7s ease, transform .2s ease; }
  .cbox:hover{ border-color:var(--ink); background:rgba(243,241,234,0.07); transform:translateY(-3px); }
  .cbox svg{ width:clamp(22px,2.2vw,28px); height:clamp(22px,2.2vw,28px); fill:var(--ink-dim); transition:fill .25s ease; }
  .cbox:hover svg{ fill:var(--ink); }
  .cbox .k{ font-size:14px; font-weight:700; letter-spacing:0.03em; }
  .cbox .v{ display:none; }
  @media (max-width:560px){
    .contact-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; max-width:100%; }
    .cbox{ min-width:0; padding:10px 4px; gap:4px; border-radius:2px; }
    .cbox svg{ width:17px; height:17px; }
    .cbox .k{ font-size:10px; letter-spacing:0.01em; }
    .cbox .v{ font-size:8.5px; }
  }
  footer{ background:none; text-align:center; padding:20px 18px 84px; font-size:12px; color:#4d525a; border-top:1px solid var(--line); }
  #stickyBar{ position:fixed; left:auto; right:16px; bottom:18px; z-index:250; display:flex; justify-content:flex-end;
    pointer-events:none; opacity:0; transform:translateY(14px); transition:opacity .3s ease, transform .3s ease; }
  #stickyBar.shown{ opacity:1; transform:translateY(0); pointer-events:auto; }
  #stickyBar a{ text-align:center; padding:9px 20px; font-size:12px; background:rgba(14,16,19,0.55);
    backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border:1px solid rgba(243,241,234,0.25); border-radius:2px;
    text-decoration:none; color:var(--ink); font-size:13px; font-weight:600; letter-spacing:0.02em;
    transition:border-color .7s ease, background .7s ease; }
  #stickyBar a:hover{ border-color:var(--ink); background:rgba(14,16,19,0.75); }

  /* ---------- hover expand ---------- */
  #expandBackdrop{ position:fixed; inset:0; z-index:480; background:rgba(5,6,7,0); pointer-events:none; transition:background .42s cubic-bezier(.22,.61,.36,1); }
  #expandBackdrop.on{ background:rgba(5,6,7,0.95); pointer-events:auto; }
  #expandStage{ position:fixed; z-index:490; overflow:hidden; border-radius:2px; background:#0a0b0d; pointer-events:none;
    transition:top .45s cubic-bezier(.22,.61,.36,1), left .45s cubic-bezier(.22,.61,.36,1), width .45s cubic-bezier(.22,.61,.36,1), height .45s cubic-bezier(.22,.61,.36,1); }
  #expandStage.on{ pointer-events:auto; }
  #expandStage video, #expandStage img, #expandStage iframe{ width:100%; height:100%; object-fit:cover; display:block; border:0; }
  #expandStage.full video, #expandStage.full img{ object-fit:contain; background:#000; }
  #expandClose{ position:fixed; z-index:497; top:22px; right:26px; width:46px; height:46px; border-radius:50%;
    border:1px solid rgba(243,241,234,0.35); background:rgba(10,7,5,0.75); backdrop-filter:blur(6px);
    color:var(--ink); font-size:20px; cursor:pointer; display:none; align-items:center; justify-content:center; }
  #expandClose.on{ display:flex; }
  #expandClose:hover{ border-color:var(--amber); background:rgba(240,138,38,0.22); }
  #expandClose{ position:fixed; z-index:497; top:22px; right:26px; width:46px; height:46px; border-radius:50%;
    border:1px solid rgba(243,241,234,0.35); background:rgba(10,7,5,0.75); backdrop-filter:blur(6px);
    color:var(--ink); font-size:20px; cursor:pointer; display:none; align-items:center; justify-content:center;
    transition:background .2s ease, border-color .2s ease, transform .2s ease; }
  #expandClose.on{ display:flex; }
  #expandClose:hover{ background:var(--red); border-color:var(--red); transform:scale(1.08); }
  #expandHintBar{ position:fixed; z-index:496; top:30px; left:50%; transform:translateX(-50%);
    font-size:12px; color:var(--ink-dim); background:rgba(10,7,5,0.7); padding:7px 14px; border-radius:999px;
    backdrop-filter:blur(6px); display:none; }
  #expandHintBar.on{ display:block; }
  @media (max-width:640px){ #expandHintBar{ display:none !important; } }
  #expandCaption{ position:fixed; z-index:495; left:0; right:0; bottom:30px; text-align:center; color:var(--ink); font-size:16px; opacity:0;
    transition:opacity .3s ease .2s; pointer-events:none; }
  #expandCaption small{ display:block; color:var(--ink-dim); font-size:12px; margin-top:4px; }
  #expandCaption.on{ opacity:1; }

  /* backstage gallery */
  .about-gallery-cta{ margin-top:26px; display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
  .gallery-btn{ display:inline-flex; align-items:center; gap:10px; padding:13px 22px; border-radius:2px;
    border:1px solid var(--line); background:transparent; color:var(--ink); font-family:inherit; font-size:14px;
    font-weight:600; cursor:pointer; transition:border-color .18s ease, background .18s ease, transform .15s ease; }
  .gallery-btn:hover{ border-color:var(--ink); background:var(--ink); color:#0d1016; transform:translateY(-2px); }
  .gallery-btn .count{ color:var(--ink-dim); font-weight:500; font-size:13px; }
  .gallery-thumbs{ display:flex; gap:6px; }
  .gallery-thumbs span{ width:30px; height:42px; border:1px solid var(--line); border-radius:2px; background-size:cover;
    background-position:center; }

  #gallery{ position:fixed; inset:0; z-index:470; background:rgba(7,5,4,0.97); display:none; flex-direction:column; }
  #gallery.open{ display:flex; }
  .gallery-head{ display:flex; align-items:center; justify-content:space-between; padding:22px 28px;
    border-bottom:1px solid var(--line); flex-wrap:wrap; gap:12px; }
  .gallery-head h3{ font-size:clamp(20px,3vw,30px); font-weight:700; }
  .gallery-head p{ font-size:13px; color:var(--ink-dim); margin-top:3px; }
  #galleryClose{ background:none; border:1px solid var(--line); color:var(--ink); width:40px; height:40px; border-radius:50%;
    cursor:pointer; font-size:18px; }
  #galleryClose:hover{ border-color:var(--amber); }
  .gallery-body{ flex:1; overflow-y:auto; padding:26px 28px 60px; }
  @media (max-width:640px){ .gallery-head{ padding:16px 18px; } .gallery-body{ padding:18px 18px 50px; } }

  #lightbox{ position:fixed; inset:0; background:rgba(6,6,5,0.96); z-index:500; display:none; align-items:center; justify-content:center; padding:40px; }
  #lightbox.open{ display:flex; }
  #lightbox img, #lightbox video, #lightbox iframe{ max-width:100%; max-height:82vh; }
  #lightboxClose{ position:absolute; top:24px; right:32px; background:none; border:none; color:var(--ink); font-size:24px; cursor:pointer; }
  #lightboxCaption{ position:absolute; bottom:26px; left:0; right:0; text-align:center; color:var(--ink-dim); font-size:14px; }


/* --- mobile: two columns in the slider --- */
@media (max-width:560px){ .slider{ grid-template-columns:repeat(2, minmax(0,1fr)) !important; } }

@media (max-width: 768px) {
  .hero-kicker, .hero-sub, .hero-meta, .hero-locations {
    filter: blur(0px);
    -webkit-filter: blur(0px);
  }
}

@media (max-width:560px){
  /* iOS Safari: do not use CSS filter blur on the small hero copy.
     The previous variable multiplier still rasterized these glyphs softly. */
  .hero-role-line .mono,
  .hero-sub,
  .hero-meta{
    -webkit-font-smoothing:antialiased;
    text-rendering:geometricPrecision;
  }
  /* Barely-there mobile blur: just softer than DEN OSTROVSKIY, without iOS mush. */
  .hero-role-line .mono{ -webkit-filter:none !important; filter:none !important; }
  .hero-sub{ -webkit-filter:none !important; filter:none !important; }
  .hero-meta{ -webkit-filter:none !important; filter:none !important; }
  .hero-role-line .mono{
    text-shadow:0 0 .45px var(--role-color) !important;
  }
  .hero-sub{
    text-shadow:0 0 .55px var(--sub-color) !important;
  }
  .hero-meta{
    text-shadow:0 0 .45px var(--meta-color) !important;
  }
}

  /* Mobile: horizontal videos one per row */
  @media (max-width:560px){
    .slider{ grid-template-columns:1fr !important; }
  }

/* ---------------------------------------------------------------------------
   Saved design tokens. applyDesign() writes the same custom properties onto
   the <html> element on every render, which wins over this block — these are
   only the values the page starts from, so nothing flashes before the first
   render. They used to live in a style="" attribute on <html>.
   --------------------------------------------------------------------------- */
:root{
  --wrap-max: 2200px;
  --sec-pad: 12px;
  --font-scale: 0.98;
  --gap: 5px;
  --slide-h: 58vh;
  --slide-scale: 0.76;
  --vcols: 4;
  --vcols-m: 3;
  --head-font: 'Anton', sans-serif;
  --hero-size: 1.12;
  --hero-above: 0.29;
  --hero-gap: 1.55;
  --head-weight: 300;
  --role-size: 1.6;
  --sub-size: 0.85;
  --meta-size: 0.85;
  --sub-color: #ff9e42;
  --meta-color: #da822b;
  --role-color: #ea913e;
  --above-color: var(--ink);
  --role-blur: 1px;
  --role-opacity: 1;
  --role-glow: 0.25;
  --role-fringe: 0.5;
  --above-blur: 0px;
  --above-opacity: 0.92;
  --above-glow: 1;
  --above-fringe: 0;
  --sub-blur: 1px;
  --sub-opacity: 1;
  --sub-glow: 0.5;
  --sub-fringe: 0.6;
  --meta-blur: 0.4px;
  --meta-opacity: 0.95;
  --meta-glow: 0.45;
  --meta-fringe: 0;
  --name-blur: 0px;
  --name-opacity: 1;
  --name-glow: 0.5;
  --name-fringe: 1.7;
  --name-fringe-spread: 0.008;
  --name-glow-color: #000000;
  --name-fringe-color: #ee562b;
  --name-glow-blur: 26px;
  --name-fringe-blur: 4px;
  --name-glow-spread: 1;
  --teal: #2cb9b0;
  --amber: #ecb94b;
  --red: #f35326;
  --grain: 0.13;
  --vignette: 0.38;
  --halo: 0.55;
  --bloom: 0.55;
  --warmth: 0;
  --dust-op: 0.25;
  --sat: 1.05;
  --contrast: 0.9;
  --fringe: 0.4;
  --shadow-depth: 0.45;
  --glow-a: hsla(107.9,96.6%,58.0%,0.24);
  --glow-b: hsla(121.9,77.3%,74.0%,0.14);
  --glow-c: hsla(89.9,96.6%,50.0%,0.16);
  --glow-d: hsla(113.9,96.6%,60.0%,0.1);
  --bloom-a: hsla(107.9,96.6%,56.0%,0.18);
  --bloom-b: hsla(85.9,96.6%,48.0%,0.13);
  --bloom-c: hsla(277.9,72.5%,44.0%,0.08);
  --glow-solid: hsla(107.9,96.6%,58.0%,0.9);
  --bg: #02151d;
  --bg-soft: #031f2b;
  --surface: #042a3a;
  --line: #084159;
  --wear-op: 0.85;
  --hero-fit: 1.0000;
  --m-hero-zoom: 0.8;
  --m-name-glow-mult: 0.6;
  --m-name-fringe-mult: 0.9;
  --m-grain-scale: 0.21;
  --m-text-glow-mult: 0.36;
  --m-text-fringe-mult: 0.22;
  --m-text-blur-mult: 0.38;
  color-scheme: dark;
  --m-subtext-blur-mult: 0;
}