/* =============================================================================
   Lalena Herder Customs — 2026-08-23 preview (Webmaster)
   Prospect. Referred by Justin Howard (Precizion). SHOW MIKE FIRST.
   Nothing on this page emails her. No live domain. No 908-372-5555.

   PALETTE — sampled from her IG stills, contrast computed vs the ground
   it actually sits on (WCAG relative luminance). Not eyeballed.
     ground  #1c1917  evening greige / unlit millwork (ig-03 walls, darkened)
                      L* ≈ 9.  Not cream. Not Precizion #080808.
     ink     #e8dccc  ivory linen (ig-07 panels) — 12.94:1 AAA. Never #fff.
     muted   #b6a896  7.52:1 AA
     brass   #c2a88d  aged brass from ig-08 faucet — 7.73:1 AA
                      NOT Precizion gold #c9a84c, not movers #F0C25A.
     brass-hi #d4ba9e  9.42:1  hover / rod highlight
     blush   #c49a8a  ig-10 panel — supporting, not a second accent
     ink-on-brass  #1c1917 on #c2a88d — 7.73:1 (primary button)

   TYPE — Bricolage Grotesque + DM Sans + JetBrains Mono, self-hosted.
   FX — 38 accordion (pinch-pleat gallery), 15 CSS-perspective hero (ig-10),
        16 drift on cleaning proofs only. Shader/technique, not demo sculptures.
   NO BOXES around copy. Radius only on controls, the RK medallion, inputs.
   NO sun-mark.png. NO drapery.css. NO catalog stills sold as her rooms.
   ============================================================================= */

:root{
  --ground:#d9d0c4;
  --ground-2:#cfc6b8;
  --ground-3:#c4baab;
  --ink:#221e1b;
  --muted:#5a524b;
  --dim:#746b62;
  --brass:#8a6548;
  --brass-hi:#a37a58;
  --brass-dn:#6e5038;
  --blush:#b56a64;
  --line:rgba(34,30,27,.18);
  --line-dn:rgba(34,30,27,.10);
  --danger:#b54a3c;
  --ok:#4a6b4e;
  --display:'Bricolage Grotesque',Georgia,'Times New Roman',serif;
  --sans:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --ink-on-brass:#f4efe8;
  --cyan:#25e6f0;
  --purple:#8a4bff;
  --magenta:#ff3ec8;
  --rk-grad:linear-gradient(100deg,#25e6f0,#8a4bff 52%,#ff3ec8);
  --ease:cubic-bezier(.86,0,.07,1);
  --wrap:1120px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
html,body{margin:0;max-width:100%;min-height:100%}
body{
  background:var(--ground);
  color:var(--ink);
  font-family:var(--sans);
  font-size:clamp(1.02rem,.96rem + .28vw,1.125rem);
  line-height:1.58;
  -webkit-font-smoothing:antialiased;
  font-synthesis:none;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--brass);text-underline-offset:3px}
a:hover{color:var(--ink)}
:focus{outline:none}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
::selection{background:rgba(194,168,141,.35);color:var(--ink)}

/* Subtle vertical pleat in the ground — the trade, not a card.
   Contrast against --ground is < 1.2:1 so it never fights type. */
body{
  background-color:var(--ground);
}

.skip{
  position:absolute;left:-9999px;top:0
}
.skip:focus{
  left:16px;top:10px;z-index:80;
  background:var(--brass);color:var(--ground);
  padding:10px 14px;text-decoration:none;
  font-family:var(--mono);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
}

/* Preview strip — Mike is the audience. Honest about send/domain. */
.preview-bar{
  background:var(--ground-3);
  border-bottom:1px solid var(--line-dn);
  color:var(--dim);
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  text-align:center;
  padding:8px 16px;
  white-space:normal;
}
@media (max-width:767px){
  .preview-bar{font-size:10px;letter-spacing:.08em;padding:8px 12px}
}

/* ── FX-15 lives on the HERO, not on a page-height inner scroller ────
   Lab demo (fx/15.html) uses an iframe stage. A real site that copies
   that 1:1 (perspective on a 100% overflow:auto wrapper) ate the CTAs
   (hero 100svh BELOW the chrome) and broke window scroll / hash links.
   Perspective stays. The scrolling element is the document. */
.fx15-root{display:contents}

/* ── Header ─────────────────────────────────────────────────────────── */
.nav{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;gap:18px;
  min-height:58px;
  padding:8px 20px;
  background:color-mix(in srgb, var(--ground) 92%, transparent);
  border-bottom:1px solid var(--line-dn);
}
@supports not (background:color-mix(in srgb, #000 50%, transparent)){
  .nav{background:var(--ground)}
}
.brand{
  text-decoration:none;color:var(--brass);line-height:1;min-width:0;
  display:flex;flex-direction:column;align-items:flex-start;
}
.brand-name{
  display:block;
  font-family:var(--display);font-weight:500;font-style:italic;
  font-size:clamp(1.2rem,2.6vw,1.55rem);
  letter-spacing:.04em;
  color:var(--brass);
}
.brand-sub{
  display:block;margin-top:7px;padding-top:7px;
  border-top:1px solid var(--brass);
  font-family:var(--display);font-weight:500;
  font-size:10px;letter-spacing:.42em;text-transform:uppercase;
  color:var(--brass);
}
.navlinks{display:none;margin-left:auto;align-items:center;gap:22px}
@media(min-width:880px){.navlinks{display:flex}}
.navlinks a{
  font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--muted);text-decoration:none;
}
.navlinks a:hover,.navlinks a[aria-current="page"]{color:var(--ink)}
.nav-cta{
  color:var(--ground) !important;
  background:var(--brass);
  padding:8px 12px;
  border-radius:4px;
}
.nav-cta:hover{background:var(--brass-hi);color:var(--ground) !important}

/* Brand-law header chip. Compact. Her name stays the title. */
/* Header is hers. RK mark lives in the footer only. */
.menu-btn{
  display:inline-flex;align-items:center;justify-content:center;
  margin-left:auto;
  background:transparent;border:1px solid var(--line);
  color:var(--ink);font-family:var(--mono);font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;
  padding:8px 10px;border-radius:4px;cursor:pointer;
}
@media(min-width:880px){.menu-btn{display:none}}
.drawer{
  display:none;flex-direction:column;gap:4px;
  padding:8px 20px 18px;
  border-bottom:1px solid var(--line-dn);
  background:var(--ground-3);
}
.drawer.is-open{display:flex}
.drawer a{
  font-family:var(--mono);font-size:12px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink);text-decoration:none;
  padding:12px 0;border-bottom:1px solid var(--line-dn);
}
@media(min-width:880px){.drawer{display:none !important}}

/* ── Hero: video on top, page copy under it (United pattern) ──────── */
.hero{
  position:relative;
  background:#1a1614;
  color:var(--ink);
  min-height:0;
  height:auto;
}
.sound-on{display:none !important}
.hero-media{
  position:relative;
  width:100%;
  background:#1a1614;
  aspect-ratio:16/9;
  max-height:78vh;
  overflow:hidden;
}
.hero-media video{
  position:absolute;inset:0;z-index:1;
  width:100%;height:100%;object-fit:cover;object-position:center 55%;
  display:block;opacity:1;background:#1a1614;
}
.hero-below{display:none}
.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
@media (max-width:767px){
  /* Video fits the phone width. Box stays position:relative so Sound on sits ON the video. */
  .hero-media{
    position:relative !important;
    aspect-ratio:auto !important;
    max-height:none !important;
    height:auto !important;
    width:100%;
    overflow:hidden;
    background:#1a1614;
  }
  .hero-media video{
    position:static !important;
    inset:auto !important;
    display:block !important;
    width:100% !important;
    height:auto !important;
    max-width:100% !important;
    object-fit:contain !important;
  }
  .sound-on{top:8px;right:8px;bottom:auto;padding:7px 10px;font-size:10px}
}
.hero-plate{
  position:absolute;inset:-8% 0;
  height:116%;
  transform-origin:center center;
  transform:translateZ(-3px) scale(1.28);
  z-index:0;
  pointer-events:none;
}
.hero-plate img,
.hero-vid{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;object-position:center 55%;
  filter:saturate(.96) contrast(1.06) brightness(.72);
}
.hero-vid{opacity:0;transition:opacity .8s ease}
.hero.has-vid .hero-vid{opacity:1}
.hero.has-vid .hero-plate img{opacity:0}
.hero-sheen{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(105deg,transparent 32%,rgba(232,220,204,.16) 46%,transparent 58%);
  background-size:220% 100%;
  animation:sheen 7.5s ease-in-out infinite;
  mix-blend-mode:screen;
}
@keyframes sheen{
  0%{background-position:120% 0}
  100%{background-position:-40% 0}
}
@media (prefers-reduced-motion:reduce){
  .hero-sheen{animation:none;opacity:0}
}
/* Scroll shift — extra, only where the engine supports it. The
   translateZ plate is the FX-15 object even without this. */
@supports (animation-timeline:scroll()){
  .hero-plate{
    animation:fx15-y linear both;
    animation-timeline:scroll();
    animation-range:0vh 90vh;
  }
  @keyframes fx15-y{
    from{transform:translateZ(-3px) scale(1.25) translateY(0)}
    to{transform:translateZ(-3px) scale(1.25) translateY(10%)}
  }
}
.hero-veil{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(18,16,14,.15) 0%,rgba(18,16,14,.2) 40%,rgba(18,16,14,.78) 100%),
    linear-gradient(90deg,rgba(18,16,14,.45) 0%,transparent 42%);
}
.hero-copy{
  position:relative;z-index:2;
  width:min(var(--wrap),calc(100% - 40px));
  margin:0 auto;
  padding:0 0 48px;
}
@media (max-width:767px),(prefers-reduced-motion:reduce){
  .hero{min-height:0;height:auto;perspective:none;transform-style:flat}
  .hero-plate{position:absolute;inset:0;height:100%;transform:none;animation:none}
}

.kicker{
  font-family:var(--mono);font-weight:500;
  font-size:11px;letter-spacing:.32em;text-transform:uppercase;
  color:var(--brass-hi);margin:0 0 14px;
}
h1,h2,h3{font-family:var(--display);font-weight:600;letter-spacing:-.03em;line-height:1.05;margin:0}
h1{font-size:clamp(2.7rem,8vw,6.1rem)}
h1 em,h2 em,.c-line.em{font-style:italic;font-weight:500;color:var(--brass-hi)}
.cascade{display:flex;flex-direction:column;gap:.08em}
.c-line{display:block}
.c-line .ch,
.split-char{
  display:inline-block;
  will-change:transform,opacity;
}
.c-line .ch{
  opacity:0;transform:translateY(.45em) skewX(8deg);
  animation:cascade .72s var(--ease) forwards;
}
@keyframes cascade{
  to{opacity:1;transform:none}
}
.split-line{display:block;overflow:hidden}
.split-char{
  opacity:0;
  transform:translateX(1.1em) skewX(14deg);
  transform-origin:left center;
}
h2.is-in .split-char{
  animation:cascade-scroll .85s cubic-bezier(.16,1,.3,1) forwards;
}
.split-char.em{font-style:italic;font-weight:500;color:var(--brass-hi)}
@keyframes cascade-scroll{
  to{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .c-line .ch,.split-char{opacity:1;transform:none;animation:none}
}

/* FX-40 river — her stills travel and grow. Not the lab's 100vh hijack. */
.river-sec{padding:48px 0 0;border-top:1px solid var(--line-dn)}
.river-copy{margin-bottom:18px}
.river{
  position:relative;
  height:clamp(340px,62vh,620px);
  overflow:hidden;
  cursor:grab;
  touch-action:pan-y;
}
.river.is-drag{cursor:grabbing}
.river-slide{
  position:absolute;bottom:0;left:0;overflow:hidden;
  will-change:transform,width,height;
  box-shadow:0 28px 50px -24px rgba(0,0,0,.75);
}
.river-slide img{
  width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;
}
@media (prefers-reduced-motion:reduce){
  .river{height:auto;cursor:default;display:flex;gap:10px;overflow-x:auto;padding:0 20px 16px}
  .river-slide{position:relative;flex:0 0 70%;height:auto;aspect-ratio:4/5;transform:none !important;width:auto !important}
}
.lede{
  max-width:38rem;margin:18px 0 0;
  color:var(--ink);font-size:clamp(1.02rem,1.6vw,1.18rem);line-height:1.5;
}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px;align-items:center}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:12px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;text-decoration:none;
  padding:12px 16px;border-radius:4px;border:1px solid transparent;
  cursor:pointer;
}
.btn-primary{background:var(--brass);color:var(--ground);border-color:var(--brass)}
.btn-primary:hover{background:var(--brass-hi);color:var(--ground)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--brass);color:var(--brass-hi)}
.btn[disabled]{opacity:.55;cursor:not-allowed}

/* Brass rod + hanging hem. The trade metaphor, CSS only. Not FX-05 curtain wipe. */
.rod{
  position:relative;
  height:42px;margin:28px 0 0;
  max-width:min(420px,100%);
}
.rod::before{
  content:"";
  position:absolute;left:0;right:0;top:8px;height:5px;
  border-radius:3px;
  background:linear-gradient(180deg,#e2c9ab 0%,#c2a88d 42%,#8a6e54 100%);
  box-shadow:0 1px 0 #5a4636, 0 6px 16px rgba(0,0,0,.35);
}
.rod::after{
  content:"";
  position:absolute;left:4%;right:4%;top:13px;height:26px;
  background:repeating-linear-gradient(
    90deg,
    rgba(232,220,204,.16) 0 9px,
    rgba(18,16,14,.55) 9px 11px,
    rgba(196,154,138,.14) 11px 20px,
    rgba(18,16,14,.5) 20px 22px
  );
  clip-path:polygon(0 0,100% 0,96% 100%,4% 100%);
}

/* Foreground after the parallax hero MUST sit on translateZ(0)
   or it inherits the perspective and slides at the wrong speed. */
.fore{position:relative;background:var(--ground);z-index:3}

.wrap{width:min(var(--wrap),calc(100% - 40px));margin:0 auto}
.section{padding:56px 0;border-top:1px solid var(--line-dn)}
.section h2{font-size:clamp(1.8rem,4.2vw,3rem);margin:0 0 14px}
.section .lead{max-width:38rem;color:var(--muted);margin:0}

/* ── Work · FX-38 accordion as pinch pleats ───────────────────────────
   Mechanic from fx/38.html + Precizion pzfs: one expanded, neighbors
   squeezed. Do NOT copy the lab's full-viewport takeover, white 3px
   frame, or demo photos. Collapsed slivers read as pinch pleats. */
.work{padding:12px 0 0;border-top:0}
.work .wrap{margin-bottom:6px}
.work .kicker{display:none}
.hem-strip{
  position:relative;
  width:100%;
  margin:8px 0 0;
  overflow:hidden;
}
/* Default = grid. JS adds .is-accordion on desktop only. Without that class
   the ten panels would stack at left:0 (absolute) and nine rooms would vanish. */
.hem-stageWrap{position:relative;width:100%;height:auto}
.hem-stage{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:8px;
}
.hem-panel{
  position:relative;
  overflow:hidden;background:var(--ground-3);
  cursor:pointer;padding:0;border:0;display:block;color:inherit;
  aspect-ratio:16/9;width:auto;height:auto;
}
.hem-panel img{
  width:100%;height:100%;object-fit:cover;
  pointer-events:none;user-select:none;-webkit-user-drag:none;
  filter:saturate(.85) brightness(.88);
}
.hem-panel.is-focus{z-index:5}
.hem-panel.is-focus img{filter:saturate(1.02) brightness(.95)}
.hem-strip.is-accordion{overflow:hidden}
.hem-strip.is-accordion .hem-stageWrap{height:clamp(380px,56vh,560px)}
.hem-strip.is-accordion .hem-stage{display:block;position:absolute;inset:0}
.hem-strip.is-accordion .hem-panel{
  position:absolute;top:0;height:100%;aspect-ratio:auto;
  transition:left .9s var(--ease), width .9s var(--ease);
  will-change:left,width;
}
.hem-strip.is-accordion .hem-panel img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:contain;
  object-position:center;
  transform:none;
  filter:saturate(.55) brightness(.55) contrast(1.04);
  transition:filter .9s var(--ease);
}
.hem-strip.is-accordion .hem-panel.is-focus{box-shadow:0 0 0 1px var(--brass), 0 18px 50px rgba(0,0,0,.55)}
.hem-strip.is-accordion .hem-panel.is-focus img{filter:saturate(1.02) brightness(.9) contrast(1.04)}
.hem-cap{
  position:absolute;left:0;right:0;bottom:0;z-index:3;
  padding:20px 18px 16px;
  background:linear-gradient(to top,rgba(18,16,14,.92),rgba(18,16,14,0));
  opacity:1;transform:none;
  pointer-events:none;text-align:left;
}
.hem-strip.is-accordion .hem-cap{
  opacity:0;transform:translateY(8px);
  transition:opacity .5s ease .15s, transform .5s ease .15s;
}
.hem-strip.is-accordion .hem-panel.is-focus .hem-cap{opacity:1;transform:translateY(0)}
.hem-strip.is-accordion .hem-panel:not(.is-focus) .hem-cap{display:none}
.hem-no{
  display:block;
  font-family:var(--mono);font-size:10px;letter-spacing:.32em;
  text-transform:uppercase;color:var(--brass-hi);
}
.hem-name{
  display:block;margin-top:5px;
  font-family:var(--display);font-weight:500;font-size:17px;
  color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* Mobile: snap strip. Precizion pzfs degradation.
   Wins over .is-accordion if a resize left the class on. */
@media (max-width:767px){
  .hem-strip,
  .hem-strip.is-accordion{overflow:visible}
  .hem-strip.is-accordion .hem-stageWrap,
  .hem-stageWrap{height:auto}
  .hem-strip.is-accordion .hem-stage,
  .hem-stage{
    position:static;display:flex;gap:8px;
    overflow-x:auto;-webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;padding:4px 0 10px;
    scrollbar-width:none;
  }
  .hem-stage::-webkit-scrollbar{display:none}
  .hem-panel{
    position:relative !important;left:auto !important;top:auto;
    flex:0 0 68%;width:68% !important;height:auto;aspect-ratio:16/9;
    scroll-snap-align:center;
    box-shadow:0 8px 22px rgba(0,0,0,.35);
    transition:none;will-change:auto;
  }
  .hem-panel img{
    position:static;transform:none;width:100% !important;height:100%;
    object-fit:cover;filter:none;
  }
  .hem-panel .hem-cap{opacity:1;transform:none;padding:12px 12px 10px}
  .hem-name{font-size:14px}

  .section{padding:40px 0}
  .work{padding-top:12px}
  .section h2{font-size:1.5rem}
  .wrap{width:min(var(--wrap),calc(100% - 28px))}

  .proofs{gap:8px;margin-top:16px}
  .drift-frame{
    aspect-ratio:16/9;
    min-height:0;
  }
  .drift-frame img{height:100%}
}

/* Reduced motion: static grid. Finished state, not "nothing." */
@media (prefers-reduced-motion:reduce){
  .hem-strip,
  .hem-strip.is-accordion{overflow:visible}
  .hem-strip.is-accordion .hem-stageWrap,
  .hem-stageWrap{height:auto}
  .hem-strip.is-accordion .hem-stage,
  .hem-stage{
    position:static;display:grid;
    grid-template-columns:repeat(3,1fr);gap:10px;
  }
  .hem-panel{
    position:relative !important;left:auto !important;top:auto;
    width:auto !important;height:auto;aspect-ratio:4/3;
    transition:none;box-shadow:none;will-change:auto;
  }
  .hem-panel img{
    position:static;transform:none;width:100% !important;height:100%;
    filter:none;transition:none;
  }
  .hem-cap{opacity:1 !important;transform:none !important}
}
@media (prefers-reduced-motion:reduce) and (max-width:700px){
  .hem-stage{grid-template-columns:repeat(2,1fr)}
}

/* Lightbox */
.lb{
  position:fixed;inset:0;z-index:90;
  background:rgba(12,10,9,.94);
  display:none;align-items:center;justify-content:center;
  padding:24px;
}
.lb.is-open{display:flex}
.lb img{max-width:min(1100px,96vw);max-height:88vh;object-fit:contain}
.lb-close,.lb-nav{
  position:absolute;background:transparent;border:1px solid var(--line);
  color:var(--ink);font-family:var(--mono);letter-spacing:.16em;
  text-transform:uppercase;font-size:12px;
  padding:8px 12px;border-radius:4px;cursor:pointer;
}
.lb-close{top:16px;right:16px}
.lb-nav{top:50%;transform:translateY(-50%)}
.lb-prev{left:16px}
.lb-next{right:16px}
@media (prefers-reduced-motion:reduce){
  .lb{transition:none}
}

/* ── Make / process — hairline lists, no cards ──────────────────────── */
.make-list,.proc-list{list-style:none;margin:36px 0 0;padding:0}
.make-list li,.proc-list li{
  display:grid;grid-template-columns:auto 1fr;gap:18px 28px;
  padding:22px 0;
  border-top:1px solid var(--line-dn);
  align-items:baseline;
}
.make-list li:last-child,.proc-list li:last-child{border-bottom:1px solid var(--line-dn)}
.make-num,.proc-num{
  font-family:var(--mono);font-size:12px;letter-spacing:.28em;
  color:var(--brass);min-width:2.4em;
}
.make-list h3,.proc-list h3{
  font-family:var(--display);font-weight:600;font-size:clamp(1.35rem,2.4vw,1.8rem);
  margin:0 0 6px;
}
.make-list p,.proc-list p{margin:0;color:var(--muted);max-width:40rem}
@media (max-width:640px){
  .make-list li,.proc-list li{grid-template-columns:1fr;gap:8px}
}

/* ── Cleaning proofs · FX-16 drift ────────────────────────────────────
   Technique: image larger than its crop, drifts on scroll.
   Lab demo uses simpleParallax + travel stock. We do not.
   Vanilla, two frames, her stills only. Off under reduced-motion. */
.proofs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:36px}
@media (max-width:767px){.proofs{grid-template-columns:1fr}}
.drift-frame{
  position:relative;overflow:hidden;
  aspect-ratio:4/5;
  min-height:min(70vh,720px);
  background:var(--ground-3);
}
.drift-frame img{
  width:100%;height:118%;object-fit:cover;
  transform:translate3d(0,var(--drift,0),0);
  will-change:transform;
}
.drift-cap{
  position:absolute;left:0;right:0;bottom:0;
  padding:16px 14px 12px;
  background:linear-gradient(to top,rgba(18,16,14,.88),transparent);
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--brass-hi);
}
@media (prefers-reduced-motion:reduce){
  .drift-frame img{height:100%;transform:none;will-change:auto}
}

/* ── Consult ────────────────────────────────────────────────────────── */
.consult{background:var(--ground-2)}
form{margin-top:28px;max-width:640px}
.field{margin:0 0 18px}
.field label,.field .lbl{
  display:block;
  font-family:var(--mono);font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--brass);margin-bottom:8px;
}
.req{color:var(--brass-hi)}
.opt{color:var(--dim);letter-spacing:.12em;text-transform:uppercase}
input[type="text"],input[type="email"],input[type="tel"],input[type="file"],
select,textarea{
  width:100%;
  background:var(--ground-3);
  color:var(--ink);
  border:1px solid var(--line);
  border-radius:4px;
  padding:12px 12px;
  font-family:var(--sans);font-size:1rem;
  caret-color:var(--brass);
}
textarea{min-height:120px;resize:vertical}
select{appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--brass) 50%),
                   linear-gradient(135deg,var(--brass) 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%, calc(100% - 12px) 50%;
  background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat;
}
input:focus,select:focus,textarea:focus{border-color:var(--brass)}
.field.is-invalid input,
.field.is-invalid select,
.field.is-invalid textarea{border-color:var(--danger)}
.err{
  display:none;margin-top:6px;
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  color:var(--danger);
}
.field.is-invalid .err{display:block}
.hint{margin:6px 0 0;font-size:.88rem;color:var(--dim)}
.hp{position:absolute;left:-9999px;height:0;overflow:hidden}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:640px){.row2{grid-template-columns:1fr}}
.upload{
  border:1px dashed var(--line);
  border-radius:4px;
  padding:16px;
  background:var(--ground-3);
  cursor:pointer;
}
.upload input{position:absolute;opacity:0;width:1px;height:1px}
.thumbs{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.thumbs img{width:72px;height:72px;object-fit:cover;border-radius:4px}
.form-status{margin-top:14px;font-family:var(--mono);font-size:13px;letter-spacing:.04em;min-height:1.2em}
.form-status.is-ok{color:var(--ok)}
.form-status.is-bad{color:var(--danger)}
.ig-line{margin-top:22px;color:var(--muted);font-size:.95rem}
.ig-line a{color:var(--brass-hi)}

/* ── Footer · pzft signature (United/Precizion craft, RK hex copied) ──
   🔴 Hex is #25e6f0 / #8a4bff / #ff3ec8 — Brand Law 2026-08-19.
   Do not ship the old #00eff0 / #8040f0 / #d000f0. Mike spots it.
   Order: Made by [UFO]RunKeepAI — UFO sits against the R. */
.pzft-footer{
  background:#0d0d0d;
  border-top:1px solid #1e1e1e;
  padding:28px 20px 34px;
}
.pzft-inner{
  max-width:1200px;margin:0 auto;
  display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;
}
.pzft-legal{display:flex;align-items:center;flex-wrap:wrap;justify-content:center;font-size:12px}
.pzft-legal a{color:#8a8a8a;text-decoration:none;padding:0 12px;letter-spacing:.04em}
.pzft-legal a:hover,.pzft-legal a[aria-current="page"]{color:var(--brass-hi)}
.pzft-sep{color:#3a3a3a}
.pzft-copy{color:#6f6a61;font-size:11.5px;letter-spacing:.03em}
.pzft-credit{
  display:inline-flex;align-items:center;gap:4px;
  font-size:12px;color:#8a8a8a;text-decoration:none;letter-spacing:.03em;white-space:nowrap;
}
.pzft-ufo{width:26px;height:26px;object-fit:contain;flex:none}
.pzft-rk{color:var(--cyan);font-weight:600}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .pzft-rk{
    background:var(--rk-grad);
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent;
    filter:drop-shadow(0 0 10px rgba(138,75,255,.35));
    transition:filter .25s;
  }
  .pzft-credit:hover .pzft-rk{filter:drop-shadow(0 0 16px rgba(37,230,240,.6)) brightness(1.12)}
}
@media (prefers-reduced-motion:reduce){
  .pzft-legal a,.pzft-rk,.hem-panel,.hem-panel img,.hem-cap{transition:none}
}

/* Legal pages */
.legal-main{padding:48px 0 72px;max-width:720px}
.legal-main h1{font-size:clamp(2rem,5vw,3rem);margin:0 0 8px}
.legal-main h2{
  font-family:var(--display);font-size:1.35rem;margin:32px 0 10px;color:var(--brass-hi)
}
.legal-main p,.legal-main li{color:var(--muted);margin:0 0 14px}
.legal-main ul{padding-left:1.1em}
.legal-main .updated{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)
}
.legal-back{
  display:inline-block;margin-bottom:22px;
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);text-decoration:none;
}
.legal-back:hover{color:var(--brass-hi)}

/* ── Mobile production cut (last, wins) ───────────────────────────────
   Video is a 16:9 strip, not a 4:5 wall. Work cards small enough to see
   two at once. Cleaning shots not 70vh. */
@media (max-width:767px){
  .hero,
  .hero-media{
    min-height:0 !important;
    height:auto !important;
  }
  .hero-media{
    position:relative !important;
    width:100% !important;
    max-height:none !important;
    aspect-ratio:16/9 !important;
  }
  .hero-media video{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    object-fit:contain !important;
    background:#1a1614;
  }
  .sound-on{top:8px;right:8px;bottom:auto !important}

  .section{padding:32px 0}
  .work{padding-top:8px !important;padding-bottom:0 !important}
  .section h2{font-size:1.35rem !important}

  .hem-strip.is-accordion .hem-stageWrap,
  .hem-stageWrap{height:auto !important}
  .hem-strip.is-accordion .hem-stage,
  .hem-stage{
    display:flex !important;
    position:static !important;
    gap:8px;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;
  }
  .hem-panel{
    position:relative !important;
    left:auto !important;
    top:auto !important;
    flex:0 0 58% !important;
    width:58% !important;
    height:auto !important;
    aspect-ratio:16/9 !important;
    scroll-snap-align:start;
  }
  .hem-panel img{
    position:static !important;
    width:100% !important;
    height:100% !important;
    object-fit:contain !important;
    filter:none !important;
  }

  .proofs{grid-template-columns:1fr 1fr !important;gap:8px}
  .drift-frame{
    aspect-ratio:16/9 !important;
    min-height:0 !important;
  }
  .drift-frame img{height:100% !important}
}