:root{
  --ink:#0D0D0F; --bone:#EDE9E3; --dim:#9A958D; --line:#2A2A2E; --brass:#C09B54;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --serif:"Palatino Linotype",Palatino,"Book Antiqua","Noto Serif",Georgia,serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--bone);font-family:var(--sans);
  line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;background:var(--bone);color:var(--ink);padding:.6rem 1rem;z-index:99}

/* header — MOBILE FIRST.
   ⛔ The first build used absolutely-positioned hover dropdowns at every width. On a 390px
   screenshot they rendered open, overhung the viewport, and pushed scrollWidth past clientWidth,
   which cut the right edge off EVERY page. Hover menus are also simply wrong on a touch device.
   So: flat wrapped list by default; dropdowns only where a real pointer exists. */
/* ⭐ 10/2 REBUILT TO MATCH THE ORIGINAL. Jun: "make it so it looks exactly as it did before."
   His Wix header stacked a centred JK mark, the wordmark, then the tagline, with ONE horizontal
   row of seven top-level links beneath. My version listed all 17 links stacked vertically, which
   filled the entire first screen of a phone before any content appeared.
   ⛔ The old comment below was right that OPEN dropdowns caused the overflow bug — but the fix I
   chose (show every child inline, always) traded a layout bug for a fidelity bug.
   🔒 The actual answer: one NON-WRAPPING row that scrolls INSIDE the nav. `overflow-x:auto` on the
   nav keeps the scroll inside that element, so the BODY's scrollWidth still equals clientWidth and
   gate_layout.sh keeps passing. Fidelity and the gate are not in conflict; I just hadn't found the
   containing element. */
header.site{display:flex;flex-direction:column;align-items:center;gap:.9rem;
  padding:1.1rem clamp(1rem,4vw,3rem) 0;border-bottom:1px solid var(--line)}
.brand{display:flex;flex-direction:column;align-items:center;gap:.35rem;text-decoration:none}
.mark-img{width:46px;height:46px;object-fit:contain;display:block}
.mark{font-weight:400;letter-spacing:.22em;font-size:.95rem;white-space:nowrap;color:var(--bone)}
.tagline{font-size:.7rem;letter-spacing:.06em;color:var(--dim)}
header.site nav{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;padding-bottom:.9rem}
header.site nav::-webkit-scrollbar{display:none}
header.site ul{display:flex;flex-wrap:nowrap;justify-content:flex-start;gap:0 1.4rem;
  list-style:none;margin:0;padding:0;width:max-content;min-width:100%}
header.site a{text-decoration:none;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--dim)}
header.site a:hover,header.site a[aria-current]{color:var(--bone)}
/* ⛔ Sub-items are HIDDEN on touch. The original showed seven top-level links and nothing else;
   every child page is still reachable from its parent page, and every one keeps a redirect. */
/* ⛔ SPECIFICITY: `header.site ul` is (0,1,2) and beat a bare `.sub` at (0,1,0), so the first
   attempt at display:none silently lost and all 17 links kept rendering. Measured, not assumed —
   the browser reported 18 visible nav links after the "fix". Qualify the selector. */
header.site ul.sub{display:none}
.sub a{font-size:.68rem;opacity:.75}
@media (min-width:900px) and (hover:hover){
  header.site{align-items:center}
  header.site nav{overflow:visible;width:auto}
  header.site ul{gap:2.2rem;justify-content:center;width:auto}
  header.site a{font-size:.78rem;letter-spacing:.14em}
  .has-sub{position:relative}
  header.site ul.sub{position:absolute;left:0;top:100%;background:var(--ink);
    border:1px solid var(--line);border-left:1px solid var(--line);
    padding:.6rem 0;margin:0;min-width:13rem;z-index:20;flex-direction:column;gap:0}
  .has-sub:hover ul.sub,.has-sub:focus-within ul.sub{display:flex}
  .sub li{padding:.3rem 1rem}
  .sub a{font-size:.75rem;opacity:1}
}

/* home */
.hero{position:relative;min-height:min(78vh,720px);display:grid;place-items:center;overflow:hidden}
.hero-media{position:absolute;inset:0}
.hero-media img{width:100%;height:100%;object-fit:cover;opacity:.55}
.hero-text{position:relative;text-align:center;padding:2rem}
/* ⚠️ The wordmark is 12 characters and letter-spacing multiplies its width by ~1.2.
   clamp(2rem,9vw,5rem) + .2em rendered ~460px of glyphs into a 326px content box at 390px wide,
   so "HYBRIDMOTION" was clipped to "HYBRIDMOTI". Scale the tracking down with the type. */
.hero-text h1{font-size:clamp(1.35rem,6vw,5rem);letter-spacing:.14em;margin:0;font-weight:700;
  overflow-wrap:anywhere}
@media (min-width:700px){.hero-text h1{letter-spacing:.2em}}
.hero-text p{font-family:var(--serif);font-style:italic;font-size:clamp(1.1rem,3vw,1.6rem);
  color:var(--bone);margin:.6rem 0 0;letter-spacing:.04em}
.strands{display:grid;gap:1px;background:var(--line);
  grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));border-bottom:1px solid var(--line)}
.strands article{background:var(--ink);padding:clamp(1.5rem,4vw,2.75rem)}
.strands h2{font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--brass);
  margin:0 0 .75rem}
.strands p{margin:0 0 1rem;color:var(--dim)}
.strands a{font-size:.8rem;letter-spacing:.1em;text-transform:uppercase}

/* pages */
.page{max-width:44rem;margin:0 auto;padding:clamp(2rem,6vw,4.5rem) clamp(1rem,4vw,2rem) 5rem}
.page-head h1{font-size:clamp(1.9rem,6vw,3rem);letter-spacing:.04em;margin:0 0 2rem;
  text-wrap:balance}
.lead{font-family:var(--serif);font-size:clamp(1.2rem,2.6vw,1.5rem);line-height:1.5;
  margin:0 0 2rem;text-wrap:pretty}
.page h2{font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;color:var(--brass);
  margin:2.75rem 0 .75rem}
.page h3{font-size:1.05rem;margin:0 0 .15rem}
.page p{margin:0 0 1.1rem}
.note{color:var(--dim);border-left:2px solid var(--line);padding-left:1rem}
.draft{border:1px dashed var(--brass);padding:.9rem 1.1rem;color:var(--brass);font-size:.9rem}
.cta{display:inline-block;border:1px solid var(--bone);padding:.7rem 1.6rem;text-decoration:none;
  font-size:.78rem;letter-spacing:.16em;text-transform:uppercase}
.cta:hover{background:var(--bone);color:var(--ink)}
.people,.deflist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1.75rem}
.people .role{color:var(--brass);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;
  margin:0 0 .5rem}
.deflist{gap:.6rem}
.deflist dt{font-weight:600}
.deflist dd{margin:0;color:var(--dim)}
.quotes{display:flex;flex-direction:column;gap:2.5rem}
.quotes figure{margin:0}
.quotes blockquote{margin:0;font-family:var(--serif);font-size:1.1rem;line-height:1.55;
  border-left:2px solid var(--brass);padding-left:1.25rem}
.quotes figcaption{margin-top:.7rem;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase}
.quotes figcaption span{color:var(--dim);text-transform:none;letter-spacing:0;display:block;
  font-size:.85rem;margin-top:.15rem}
.gallery{display:grid;gap:.5rem;grid-template-columns:repeat(auto-fill,minmax(13rem,1fr));
  margin:2.5rem 0 0}
.gallery figure{margin:0}
.gallery img{width:100%;aspect-ratio:4/5;object-fit:cover}

/* footer */
footer.site{border-top:1px solid var(--line);padding:clamp(2rem,5vw,3.5rem) clamp(1rem,4vw,3rem);
  text-align:center;color:var(--dim);font-size:.85rem}
footer.site .wordmark{letter-spacing:.22em;font-weight:700;color:var(--bone);margin:0 0 .75rem}
footer.site p{margin:.3rem 0}
.fine{font-size:.75rem}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ── homepage tiles + contact panel, matching the original ───────────────────────────────── */
.tiles{display:flex;flex-wrap:nowrap;justify-content:center;gap:1rem;
  padding:3.5rem clamp(1rem,5vw,3rem)}
.tile{flex:1 1 0;min-width:0;max-width:16rem;display:flex;flex-direction:column;align-items:center;
  gap:.9rem;text-decoration:none;text-align:center}
/* ⛔ The ring was a BLACK circle PNG, invisible on a dark page, and stacking two absolutely
   positioned images with conflicting inset+width distorted the mark. Draw the ring in CSS and let
   the monogram sit in normal flow: one element, no stacking, scales cleanly at any size. */
.tile-mark{width:clamp(74px,22vw,118px);aspect-ratio:1;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.55);border-radius:50%}
.tile-mark img{width:46%;height:46%;object-fit:contain}
.tile-label{font-size:clamp(.58rem,2.4vw,.82rem);overflow-wrap:anywhere;letter-spacing:.14em;text-transform:uppercase;color:var(--bone)}
.tile-cat{font-size:clamp(.56rem,2.2vw,.72rem);color:var(--dim)}
.tile:hover .tile-label{text-decoration:underline}

.contact-split{display:flex;flex-wrap:wrap;background:#000;border-top:1px solid var(--line)}
.cs-text{flex:1 1 16rem;padding:clamp(2rem,6vw,3.5rem);display:flex;flex-direction:column;
  justify-content:center;gap:.35rem}
.cs-text h2{font-size:clamp(1.5rem,6vw,2.1rem);font-weight:400;letter-spacing:.02em;margin:0 0 .6rem}
.cs-text p{margin:0;font-size:.82rem;color:var(--dim)}
.cs-text a{color:var(--dim);text-decoration:none}
.cs-text a:hover{color:var(--bone)}
.cs-mark{flex:1 1 16rem;display:grid;place-items:center;padding:2.5rem;min-height:14rem}
.cs-mark img{width:min(58%,220px);height:auto;object-fit:contain}