/* ============================================================
   Components — buttons, nav, cards, forms, sections
   All @media queries are consolidated in responsive.css.
   @keyframes definitions live in animations.css.
   ============================================================ */

/* ============ hero shader section ============
   Sized in CSS (not inline JSX) so the dvh fallback chain works:
   browsers without dvh fall back to vh, and the floor is capped to
   the actual visible viewport so iOS Safari's chrome can't push the
   "Trusted by" strip below the fold. */
.hero-shader-section {
  position: relative;
  height: 85vh;
  height: 85dvh;
  min-height: min(560px, 92svh);
  overflow: hidden;
  cursor: crosshair;
}
.hero-shader-text-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(96px, 10vw, 120px) clamp(20px, 4vw, 32px) clamp(56px, 7vw, 80px);
  z-index: 2;
  text-align: center;
}

/* ============ live text-edit mode ============
   Activated via the tweaks panel ("Edit text inline"). The body gets
   [data-edit-mode] and editable elements get .editable + contenteditable.
   Edits are session-only (not persisted). Press Escape on a focused
   element to exit. */
[data-edit-mode] .editable {
  outline: 1px dashed transparent;
  outline-offset: 4px;
  border-radius: 2px;
  cursor: text;
  transition: outline-color .2s ease, background-color .2s ease;
}
[data-edit-mode] .editable:hover {
  outline-color: color-mix(in srgb, var(--hot) 35%, transparent);
}
[data-edit-mode] .editable:focus,
[data-edit-mode] .editable:focus-visible {
  outline: 1px solid var(--hot);
  outline-offset: 4px;
  background-color: color-mix(in srgb, var(--hot) 6%, transparent);
}
/* While in edit mode, show a small floating banner so it's obvious
   this is dev-only mode, not a published state. */
body[data-edit-mode]::before {
  content: '◆  EDIT MODE  ·  Esc to exit';
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 95;
  padding: 6px 14px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--ls-wide);
  color: #fff;
  background: var(--hot);
  box-shadow: 0 8px 24px -8px color-mix(in srgb, var(--hot) 60%, transparent);
  pointer-events: none;
}

/* ============ utilities ============ */

.mono { font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; }
.dim { color: var(--fg-dim); }
.mute { color: var(--fg-mute); }
.hot { color: var(--hot); }
.serif-it { font-weight: var(--fw-regular); letter-spacing: var(--ls-snug); }

/* ============ typography utilities (design system) ============
   Semantic typography classes built from the tokens in variables.css.
   Apply these to any element to opt into the unified type system.
   Migration target — components are moved onto these in later phases. */

.t-display {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--text-mega);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tightest);
  text-wrap: balance;
}

.t-h1 {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--text-5xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  text-wrap: balance;
}

.t-h2 {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--text-4xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  text-wrap: balance;
}

.t-h3 {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--text-2xl);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-snug);
}

.t-h4 {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--text-xl);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-snug);
}

.t-body-lg {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--text-lg);
  line-height: var(--lh-relaxed);
  letter-spacing: var(--ls-normal);
  text-wrap: pretty;
}

.t-body {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--text-base);
  line-height: var(--lh-relaxed);
  letter-spacing: var(--ls-normal);
  text-wrap: pretty;
}

.t-body-sm {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--text-sm);
  line-height: var(--lh-relaxed);
  letter-spacing: var(--ls-normal);
  text-wrap: pretty;
}

.t-eyebrow {
  font-family: var(--font-mono);
  font-weight: var(--fw-regular);
  font-size: var(--text-eyebrow);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

.t-caption {
  font-family: var(--font-mono);
  font-weight: var(--fw-regular);
  font-size: var(--text-caption);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-normal);
}

.t-button {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--text-sm);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-snug);
}

/* Color modifiers — pair with the .t-* classes above */
.t-dim  { color: var(--fg-dim); }
.t-mute { color: var(--fg-mute); }
.t-hot  { color: var(--hot); }

/* ============ chrome / nav ============ */

.chrome-top {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding-top: 18px;
  padding-bottom: 18px;
  padding-left: 32px;
  padding-right: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: transparent;
  backdrop-filter: blur(0px) saturate(100%);
  -webkit-backdrop-filter: blur(0px) saturate(100%);
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: transparent;
  box-shadow: 0 0 0 0 rgba(0,0,0,0);
  transition:
    background-color .45s cubic-bezier(.2,.7,.2,1),
    backdrop-filter .45s cubic-bezier(.2,.7,.2,1),
    -webkit-backdrop-filter .45s cubic-bezier(.2,.7,.2,1),
    border-bottom-color .45s cubic-bezier(.2,.7,.2,1),
    box-shadow .45s cubic-bezier(.2,.7,.2,1),
    padding-top .35s cubic-bezier(.2,.7,.2,1),
    padding-bottom .35s cubic-bezier(.2,.7,.2,1);
  /* exposed height so responsive.css can swap it on small screens */
  height: var(--chrome-h, 80px);
}
.chrome-top.scrolled {
  background-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
  box-shadow: none;
  padding-top: 14px;
  padding-bottom: 14px;
}
.theme-dark .chrome-top.scrolled {
  background-color: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
}
/* Beef up the layered blur once scrolled */
.chrome-top.scrolled::before {
  backdrop-filter: blur(28px) saturate(140%);
  -webkit-backdrop-filter: blur(28px) saturate(140%);
}
.chrome-top.scrolled::after {
  backdrop-filter: blur(12px) saturate(130%);
  -webkit-backdrop-filter: blur(12px) saturate(130%);
}

.brand { display: flex; align-items: center; }
.brand-mark {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--text-xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-snug);
  /* color follows the locally-scoped --fg (light over dark hero,
     dark over light content, set on .theme-dark in variables.css) */
  color: var(--fg);
}
.brand-status {
  display: inline-flex; align-items: center; gap: var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--fg-dim);
}
.status-led {
  width: 6px; height: 6px; border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 8px #4ade80;
  animation: led-pulse 2s ease-in-out infinite;
}

.nav { display: flex; gap: 4px; align-items: center; }
/* Desktop nav is absolutely centered in the bar so it stays in the
   middle regardless of how wide the brand or the right-hand actions
   are (matches the Figma header). */
.nav--desktop {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.nav button,
.nav a {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--text-sm);
  letter-spacing: var(--ls-snug);
  color: var(--fg-dim);
  transition: color .2s, background .2s;
  background: none;
  border: 0;
  cursor: pointer;
  text-decoration: none;
}
.nav button:hover, .nav a:hover { color: var(--fg); }
.nav button.active, .nav a.active { color: var(--fg); background: var(--line-soft); }

/* ============ CTA pill — accessible, mouse-reactive ============
   Light mode: dark fill, white text, accent bloom on top
   Dark mode:  accent fill, white text, brighter accent bloom on top
*/
.cta-pill {
  position: relative;
  display: inline-flex; align-items: center; gap: var(--space-3);
  padding: 12px 18px 12px 20px;
  border-radius: var(--radius-pill);
  background: var(--fg);
  color: var(--bg);
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--text-sm);
  letter-spacing: var(--ls-snug);
  isolation: isolate;
  border: 1px solid transparent;
  transition: transform .25s cubic-bezier(.2,.7,.2,1), color .25s, box-shadow .35s, background .25s, border-color .25s;
  --pill-mx: 50%;
  --pill-my: 50%;
}

/* Dark mode: accent base so the orange identity is always present */
.theme-dark .cta-pill {
  background: var(--hot);
  color: #fff;
  border-color: color-mix(in srgb, #fff 12%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--hot) 60%, transparent),
    0 8px 28px -10px color-mix(in srgb, var(--hot) 65%, transparent);
}

/* Cursor-following bloom — DISABLED inside the pill so text stays
   fully legible against the solid fill. The motion lives in ::after. */
.cta-pill::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: transparent;
  opacity: 0;
  z-index: 0;
  pointer-events: none;
}
.theme-dark .cta-pill::before { background: transparent; }

.cta-pill > * { position: relative; z-index: 1; }

/* Outer halo bleeds beyond the pill */
.cta-pill::after {
  content: '';
  position: absolute;
  inset: -22px;
  border-radius: 999px;
  background: radial-gradient(
    closest-side at var(--pill-mx) var(--pill-my),
    color-mix(in srgb, var(--hot) 60%, transparent) 0%,
    transparent 70%
  );
  opacity: 0;
  transition: opacity .35s ease-out;
  z-index: -1;
  pointer-events: none;
  filter: blur(16px);
}
.theme-dark .cta-pill::after {
  inset: -28px;
  background: radial-gradient(
    closest-side at var(--pill-mx) var(--pill-my),
    color-mix(in srgb, var(--hot) 90%, transparent) 0%,
    transparent 70%
  );
  opacity: 0.45; /* always faintly glowing in dark mode */
  filter: blur(20px);
}

.cta-pill:hover {
  transform: translateY(-1px);
  color: #fff;
  background: #050505;
  border-color: #050505;
  box-shadow:
    0 0 0 1px color-mix(in srgb, #050505 60%, transparent),
    0 12px 36px -10px color-mix(in srgb, #050505 70%, transparent);
}
.theme-dark .cta-pill:hover {
  background: #050505;
  border-color: color-mix(in srgb, #fff 30%, transparent);
}
.cta-pill:hover::after  { opacity: 1; }

/* CTA pill arrow — circle wraps a Phosphor icon glyph (font-icon).
   The icon's color is set via `color`; the circle bg via `background`. */
.cta-pill .arr {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--bg);
  font-size: 10px;
  color: var(--fg);
  line-height: 1;
  transition: background .25s, color .25s;
}
.cta-pill .arr i { display: block; }
.theme-dark .cta-pill .arr { background: #fff; color: var(--hot); }
.cta-pill:hover .arr { background: #fff; color: var(--hot); }
.theme-dark .cta-pill:hover .arr { background: #fff; color: var(--hot); }

/* ============ footer ============ */
.foot {
  border-top: 1px solid var(--line);
  margin-top: var(--space-12);
  padding: var(--space-7) var(--space-6) var(--space-5);
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: var(--space-9);
  font-size: var(--text-sm);
}
.foot h6 {
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--fg-mute);
  margin-bottom: var(--space-4);
  font-weight: var(--fw-medium);
}
.foot ul { list-style: none; display: flex; flex-direction: column; gap: var(--space-2); }
.foot ul a { color: var(--fg-dim); transition: color .2s; }
.foot ul a:hover { color: var(--fg); }
.foot-bottom {
  border-top: 1px solid var(--line);
  margin: var(--space-6) var(--space-6) 0;
  padding-top: var(--space-4);
  display: flex; justify-content: space-between;
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--fg-mute);
}

/* ============ HERO (legacy — used only by case-nespresso) ============ */
.hero-display {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--text-mega);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tightest);
  margin-top: var(--space-7);
  position: relative;
  z-index: 2;
}

.btn-ghost {
  display: inline-flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border: 1px solid color-mix(in srgb, var(--fg) 35%, transparent);
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-snug);
  color: var(--fg);
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: border-color .2s, color .2s, background .2s, transform .2s;
}
.theme-dark .btn-ghost {
  border-color: color-mix(in srgb, var(--fg) 22%, transparent);
  background: color-mix(in srgb, var(--fg) 5%, transparent);
}
.btn-ghost:hover {
  border-color: var(--fg);
  color: var(--bg);
  background: var(--fg);
  transform: translateY(-1px);
}
.theme-dark .btn-ghost:hover {
  border-color: var(--hot);
  color: #fff;
  background: var(--hot);
}
/* Standalone arrow glyph — font-icon. Inherits color from parent. */
.btn-ghost .arr-s,
.svc-block-cta .arr-s {
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  line-height: 1;
  color: currentColor;
}

/* ============ work / case studies ============ */
.work-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}
.work-card {
  cursor: pointer;
  display: flex; flex-direction: column;
  gap: 18px;
}
.work-thumb {
  position: relative;
  aspect-ratio: 4/3;
  background: var(--line-soft);
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
.work-card:hover .work-thumb { transform: translateY(-4px); }
.work-card:hover .work-thumb-fill { transform: scale(1.04); }
.work-thumb-fill {
  position: absolute; inset: 0;
  transition: transform .8s cubic-bezier(.2,.7,.2,1);
}
.work-stripe {
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(
    -45deg,
    transparent 0,
    transparent 14px,
    var(--line) 14px,
    var(--line) 15px
  );
}
.work-label {
  position: absolute; left: var(--space-4); bottom: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--fg-mute);
}
.work-tag {
  position: absolute; right: var(--space-4); top: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--bg);
  color: var(--fg-dim);
}
.work-meta {
  display: flex; justify-content: space-between;
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--fg-mute);
}
.work-name {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--text-3xl);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
}
.work-name .arr-inline {
  display: inline-block; margin-left: var(--space-3); transition: transform .3s;
}
.work-card:hover .arr-inline { transform: translate(4px, -4px); }
.work-summary {
  color: var(--fg-dim);
  font-size: var(--text-sm);
  line-height: var(--lh-relaxed);
  max-width: 48ch;
}

/* placeholder fills - flat tonal blocks */
.fill-blur-1, .fill-blur-2, .fill-blur-3, .fill-blur-4, .fill-blur-5 {
  background: #f0f0ee;
}

/* ============ end-CTA defaults (used inside .end-cta-card-inner) ============ */
.end-cta-title {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--text-5xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tightest);
  text-wrap: balance;
  max-width: 1200px;
  margin: 0 auto;
}
.end-cta-title .soft {
  font-weight: var(--fw-light);
  color: color-mix(in srgb, var(--fg) 42%, transparent);
  letter-spacing: var(--ls-tightest);
  display: inline;
}
.end-cta-sub {
  margin-top: var(--space-5);
  color: var(--fg-dim);
  font-size: var(--text-base);
  line-height: var(--lh-relaxed);
  max-width: 50ch;
  margin-left: auto; margin-right: auto;
}
.end-cta-btn { margin-top: var(--space-8); display: inline-flex; }

/* ============ kinetic / ticker ============ */
.kinetic-strip {
  margin: 0;
  padding: var(--space-5) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  white-space: nowrap;
}
.kinetic-strip .ks-track {
  display: inline-flex;
  gap: var(--space-8);
  font-family: var(--font-sans);
  font-size: var(--text-3xl);
  letter-spacing: var(--ls-tight);
  font-weight: var(--fw-regular);
  line-height: var(--lh-tight);
  animation: marq calc(80s / var(--motion, 1)) linear infinite;
}
.kinetic-strip .ks-track .stk { -webkit-text-stroke: 1px var(--fg); color: transparent; }
.kinetic-strip .ks-track .it { font-style: normal; }
.kinetic-strip .ks-track .star { color: var(--hot); display: inline-block; font-size: 0.7em; vertical-align: middle; }
[data-motion="0"] .kinetic-strip .ks-track { animation: none; }

/* ============ services page — premium agency layout ============ */

/* ============ services-page submenu — geometry ============
   Goal: bar's vertical midline sits on the hero/section seam at rest;
   when the user scrolls past, the bar sticks at --svc-bar-top from the
   viewport top.

   Implementation: the bar is `position: fixed` with its `top` driven
   by JS (page-services.js). One scroll listener + one ResizeObserver,
   both reading the hero's bounding rect and the bar's measured height.
   No margin tricks, no calc() chains, no margin-collapse hazards —
   the bar's top is exactly:

     top = max(--svc-bar-top, hero.bottom - bar.height / 2)

   This places the bar's center on the seam when the seam is below the
   sticky threshold, and locks the bar's top edge to --svc-bar-top
   once the user scrolls past. Continuous. Resolution-independent. */
.page-services {
  --svc-bar-top: 88px;
  --svc-hero-pad-bottom: 112px;
}
.page-services .page-hero {
  padding-bottom: var(--svc-hero-pad-bottom);
}

.svc-jump-wrap {
  position: fixed;
  /* `top` is set by JS — see page-services.js. Keep an inert default
     so the bar doesn't flash at the top of the viewport pre-mount. */
  top: var(--svc-bar-top);
  left: 0;
  right: 0;
  z-index: 50;
  padding: 0 32px;
  pointer-events: none;
}
.svc-jump-wrap > * { pointer-events: auto; }
.svc-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px;
  border: 1px solid color-mix(in srgb, #fff 70%, transparent);
  border-radius: 999px;
  /* Bright frosted-glass surface — anchored to white (not theme bg) so it
     reads as a luminous standout panel even when straddling the dark hero
     half of the page. Heavy backdrop blur + saturation pop the colors of
     whatever is behind without the panel itself looking gray. */
  background: color-mix(in srgb, #fff 86%, transparent);
  backdrop-filter: blur(32px) saturate(180%);
  -webkit-backdrop-filter: blur(32px) saturate(180%);
  width: fit-content;
  margin: 0 auto;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  isolation: isolate;
  box-shadow:
    0 1px 0 0 rgba(255, 255, 255, 0.6) inset,
    0 8px 24px -10px rgba(0, 0, 0, 0.18),
    0 22px 48px -18px rgba(0, 0, 0, 0.28);
}
.svc-jump::-webkit-scrollbar { display: none; }
.svc-jump-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-snug);
  color: var(--fg-dim);
  text-decoration: none;
  white-space: nowrap;
  transition: background .2s, color .2s;
}
.svc-jump-pill:hover { background: var(--line-soft); color: var(--fg); }
.svc-jump-pill.active {
  background: var(--fg);
  color: var(--bg);
}
.svc-jump-pill.active .svc-jump-num {
  color: var(--bg);
  opacity: 0.55;
}
.svc-jump-num {
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--ls-wide);
  color: var(--fg-mute);
  font-weight: var(--fw-medium);
}

.svc-stack {
  padding: 96px 32px 128px;
  display: flex;
  flex-direction: column;
  gap: 144px;
}

.svc-block {
  position: relative;
  scroll-margin-top: 200px;
}
.svc-block-grid {
  display: grid;
  grid-template-columns: minmax(260px, 0.9fr) 2fr;
  gap: 56px;
  align-items: start;
}

/* Left column — service identity */
.svc-block-head {
  position: sticky;
  top: 180px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.svc-block-num {
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--hot);
  margin-bottom: -4px;
}
.svc-block-title {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--text-4xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--fg);
  text-wrap: balance;
  margin: 0;
}
.svc-block-lede {
  font-size: var(--text-base);
  line-height: var(--lh-relaxed);
  color: var(--fg-dim);
  max-width: 44ch;
  margin: 0;
}
.svc-block-meta {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 12px 0 4px;
  padding: 18px 0 4px;
  border-top: 1px solid var(--line);
}
.svc-block-meta > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.svc-block-meta dt {
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--fg-mute);
  font-weight: var(--fw-medium);
}
.svc-block-meta dd {
  font-size: var(--text-sm);
  line-height: var(--lh-relaxed);
  color: var(--fg);
  margin: 0;
  max-width: 36ch;
}
.svc-block-cta { align-self: flex-start; }

/* Right column — deliverables */
.svc-block-body-eye {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--fg-dim);
  margin-bottom: var(--space-4);
}
.svc-block-body-rule {
  display: inline-block;
  width: 24px; height: 1px;
  background: var(--hot);
}
.svc-block-body-count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  color: var(--fg-mute);
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
}

.svc-deliv-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.svc-deliv-card {
  --mx: 50%;
  --my: 50%;
  position: relative;
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-5);
  /* explicit white surface so cards lift visibly off the warmer #fafafa page */
  background: #ffffff;
  border: 1px solid #eee;
  border-radius: var(--radius-lg);
  transition:
    border-color .25s ease,
    background .25s ease,
    transform .25s ease,
    box-shadow .35s cubic-bezier(.2,.7,.2,1);
  overflow: hidden;
  isolation: isolate;
}
/* Cursor-following highlight — matches .svc-graphic-card pattern.
   --mx/--my are updated by onMouseMove handler in page-services.jsx. */
.svc-deliv-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(
    320px circle at var(--mx) var(--my),
    color-mix(in srgb, var(--hot) 12%, transparent) 0%,
    color-mix(in srgb, var(--hot) 4%, transparent) 32%,
    transparent 60%
  );
  opacity: 0;
  transition: opacity .35s cubic-bezier(.2,.7,.2,1);
  z-index: 0;
}
.svc-deliv-card > * { position: relative; z-index: 1; }
.svc-deliv-card:hover {
  border-color: color-mix(in srgb, var(--fg) 8%, transparent);
  transform: translateY(-1px);
  box-shadow:
    0 1px 2px color-mix(in srgb, var(--fg) 4%, transparent),
    0 8px 16px -8px color-mix(in srgb, var(--fg) 8%, transparent),
    0 24px 48px -24px color-mix(in srgb, var(--fg) 12%, transparent);
}
.svc-deliv-card:hover::before { opacity: 1; }
.svc-deliv-card:hover .svc-deliv-icon {
  color: var(--hot);
}

/* Frameless icon — sits in its own column, vertically centered with title+sub */
.svc-deliv-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fg);
  transition: color .25s ease;
  flex-shrink: 0;
  font-size: 32px;     /* sizes Phosphor font icons */
  line-height: 1;
}
.svc-deliv-icon i { display: block; }
.svc-deliv-icon svg {
  width: 32px;
  height: 32px;
  display: block;
  stroke-width: 1.2;
}

.svc-deliv-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.svc-deliv-text h4 {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--text-base);
  letter-spacing: var(--ls-snug);
  line-height: var(--lh-normal);
  color: var(--fg);
  margin: 0;
}
.svc-deliv-text p {
  font-size: var(--text-sm);
  line-height: var(--lh-relaxed);
  color: var(--fg-dim);
  margin: 0;
  text-wrap: pretty;
}

/* Subtle separators between service blocks instead of hard rules */
.svc-block + .svc-block::before {
  content: '';
  position: absolute;
  top: -72px;
  left: 0; right: 0;
  height: 1px;
  background: linear-gradient(to right,
    transparent,
    var(--line) 30%,
    var(--line) 70%,
    transparent);
}

/* ============ work page grid ============ */
.work-page-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 80px 40px;
  margin-top: 40px;
}

/* ============ case study ============ */
.case-hero {
  padding: 140px 32px 80px;
  border-bottom: 1px solid var(--line);
}
.case-meta-strip {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
  margin-top: 60px; padding-top: 32px; border-top: 1px solid var(--line);
}
.case-meta-strip > div .lbl {
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--fg-mute);
  margin-bottom: var(--space-2);
}
.case-meta-strip > div .val {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  letter-spacing: var(--ls-snug);
}

.case-hero-image {
  margin-top: 60px;
  height: 60vh; min-height: 480px;
  position: relative; overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--line-soft);
}
.case-section {
  padding: 96px var(--space-6);
  border-bottom: 1px solid var(--line);
}
.case-section .grid {
  max-width: var(--container-full); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 2fr; gap: var(--space-10);
}
.case-section h3 {
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--fg-dim);
  font-weight: var(--fw-medium);
}
.case-section h3::before {
  content: ''; display: inline-block; width: var(--space-5); height: 1px;
  background: var(--hot); vertical-align: middle; margin-right: var(--space-3);
}
.case-section .body {
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: var(--text-3xl);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-tight);
  text-wrap: pretty;
}
.case-section .body em { font-style: normal; font-weight: var(--fw-regular); }

.case-shots {
  display: grid; grid-template-columns: 1fr 1fr; gap: 32px;
  padding: 60px 32px;
}
.case-shot {
  aspect-ratio: 4/3;
  background: var(--line-soft); border: 1px solid var(--line);
  border-radius: 20px;
  position: relative; overflow: hidden;
}
.case-shot.tall { grid-row: span 2; aspect-ratio: 4/5; }
.case-shot.wide { grid-column: span 2; aspect-ratio: 21/9; }

.case-quote {
  padding: 120px 32px;
  text-align: left;
  border-bottom: 1px solid var(--line);
}
.case-quote blockquote {
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: var(--text-4xl);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-snug);
  text-wrap: balance;
  max-width: 1100px; margin: 0;
}
.case-quote blockquote em { font-style: normal; font-weight: var(--fw-regular); }
.case-quote cite {
  display: block; margin-top: var(--space-6);
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--fg-dim);
  font-style: normal;
}

.case-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--line);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.case-stat {
  background: var(--bg);
  padding: 60px 32px;
  text-align: left;
}
.case-stat .n {
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: var(--text-6xl);
  letter-spacing: var(--ls-tightest);
  line-height: var(--lh-tight);
}
.case-stat .n .u { font-size: 0.55em; color: var(--fg-dim); margin-left: var(--space-1); }
.case-stat .lbl {
  margin-top: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--fg-dim);
  max-width: 32ch;
}

/* ============ contact ============ */
.contact-wrap {
  display: grid; grid-template-columns: 1.3fr 1fr;
  gap: 80px;
  padding: 80px 0 0;
}
.contact-form {
  display: flex; flex-direction: column; gap: 24px;
}
.field {
  display: flex; flex-direction: column; gap: 8px;
  position: relative;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
  transition: border-color .25s;
}
.field:focus-within { border-color: var(--fg); }
.field label {
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--fg-mute);
}
.field input, .field textarea, .field select {
  background: transparent; border: 0;
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  letter-spacing: var(--ls-snug);
  outline: none; padding: 0;
  color: var(--fg);
  width: 100%;
}
.field textarea {
  resize: vertical;
  min-height: 100px;
  line-height: var(--lh-relaxed);
  font-size: var(--text-md);
}
.field select { appearance: none; -webkit-appearance: none; cursor: pointer; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }

.contact-side {
  display: flex; flex-direction: column; gap: 48px;
  padding-top: 8px;
}
.contact-side .block .lbl {
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--fg-mute);
  margin-bottom: var(--space-3);
}
.contact-side .block .val {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  letter-spacing: var(--ls-snug);
  line-height: var(--lh-normal);
}
.contact-side .block .val.small {
  font-size: var(--text-base);
  color: var(--fg-dim);
  line-height: var(--lh-relaxed);
}

/* ============ about page — editorial ============ */

/* Centered lead block — meta byline + a single calm statement. */
.about-lead-wrap {
  max-width: 920px;
  margin: 0 auto;
  text-align: center;
}
.about-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-4);
  justify-content: center;
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--fg-mute);
  margin-bottom: var(--space-6);
}
.about-meta span { display: inline-flex; align-items: center; }
.about-meta span:not(:last-child)::after {
  content: '·';
  margin-left: var(--space-4);
  color: var(--fg-mute);
}
.about-lead {
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: clamp(28px, 3.6vw, 48px);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  text-wrap: balance;
  margin: 0 auto;
  max-width: 22ch;
  color: var(--fg);
}
.about-lead em {
  font-style: normal;
  font-weight: var(--fw-regular);
  color: var(--fg);
}

/* Portrait + body — two-column editorial layout. */
.about-body-wrap {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: var(--space-10);
  align-items: start;
}
.about-portrait {
  position: relative;
  margin: 0;
}
.about-portrait .work-thumb {
  aspect-ratio: 4/5;
  border-radius: 0;
  border: 1px solid var(--line);
}
.about-portrait-cap {
  margin-top: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--fg-mute);
}
.about-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  max-width: 60ch;
  padding-top: var(--space-2);
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--text-md);
  line-height: var(--lh-relaxed);
  color: var(--fg);
}
.about-body p { margin: 0; }
.about-body em {
  font-style: normal;
  font-weight: var(--fw-medium);
}

/* Pull quote — large, bordered, hot-tinted opening mark. */
.about-pull {
  position: relative;
  margin: 0 auto;
  max-width: 1080px;
  text-align: center;
  padding: var(--space-9) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.about-pull-mark {
  display: block;
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: clamp(96px, 12vw, 160px);
  line-height: 0.55;
  color: var(--hot);
  margin-bottom: var(--space-3);
  user-select: none;
}
.about-pull p {
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: clamp(28px, 3.4vw, 48px);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  text-wrap: balance;
  max-width: 24ch;
  margin: 0 auto;
}
.about-pull p em {
  font-style: normal;
  font-weight: var(--fw-medium);
}

/* Expertise — editorial numbered list. */
.about-expertise {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
}
.about-expertise li {
  display: flex;
  align-items: baseline;
  gap: var(--space-5);
  padding: var(--space-5) var(--space-2) var(--space-5) 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: clamp(20px, 2vw, 28px);
  letter-spacing: var(--ls-tight);
  color: var(--fg);
  cursor: default;
  transition: padding-left .35s cubic-bezier(.2,.7,.2,1), color .25s;
  position: relative;
}
.about-expertise li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: var(--hot);
  transition: width .35s cubic-bezier(.2,.7,.2,1);
}
.about-expertise li:hover {
  padding-left: var(--space-4);
}
.about-expertise li:hover::before {
  width: 3px;
}
.about-expertise-num {
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--ls-wide);
  color: var(--fg-mute);
  flex-shrink: 0;
  min-width: 28px;
}
.about-expertise-name {
  flex: 1;
}

/* — Legacy classes kept so any cached HTML pre-rebuild still renders — */
.about-text {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--text-md);
  line-height: var(--lh-relaxed);
  text-wrap: pretty;
}
.about-text em { font-style: normal; font-weight: var(--fw-medium); }
.expertise-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--line);
}
.expertise-grid > div {
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  letter-spacing: var(--ls-snug);
  display: flex; align-items: baseline; gap: var(--space-4);
}
.expertise-grid > div .n {
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--ls-wide);
  color: var(--fg-mute);
}

/* ============ hero shader — reactive headline ============ */
.hero-shader-h1 { transition: none; }
.hero-shader-line {
  --prox: 0;
  --hov: 0;
  /* glow color provided via inline --glow var on the section */
  transition: text-shadow .25s, color .35s, letter-spacing .35s, filter .35s;
  will-change: text-shadow, color, letter-spacing;
}
/* Lead line — gets a soft glow halo + slight tracking change near cursor */
[data-hero-mood="subtle"] .hero-shader-line--lead {
  text-shadow:
    0 0 calc(8px + 28px * var(--prox) * var(--hov)) color-mix(in srgb, var(--hero-glow, #ff4a1c) calc(20% + 50% * var(--prox) * var(--hov)), transparent);
}
[data-hero-mood="bloom"] .hero-shader-line--lead {
  text-shadow:
    0 0 calc(10px + 32px * var(--prox)) color-mix(in srgb, var(--hero-glow, #ff4a1c) calc(35% + 55% * var(--prox)), transparent),
    0 0 calc(40px + 80px * var(--prox)) color-mix(in srgb, var(--hero-glow, #ff4a1c) calc(15% + 35% * var(--prox)), transparent);
  letter-spacing: calc(-0.038em + var(--prox) * 0.01em);
}
[data-hero-mood="bloom"] .hero-shader-line--sub {
  color: color-mix(in srgb, var(--hero-glow, #ff4a1c) calc(var(--prox) * 80%), var(--fg-dim));
}
[data-hero-mood="spotlight"] .hero-shader-line--lead {
  text-shadow:
    0 0 calc(2px + 14px * var(--prox)) color-mix(in srgb, var(--hero-glow, #ff4a1c) calc(40% * var(--prox)), transparent);
  filter: drop-shadow(0 0 calc(20px * var(--prox)) color-mix(in srgb, var(--hero-glow, #ff4a1c) calc(60% * var(--prox)), transparent));
  /* darken when away from cursor — feels like a spotlight */
  opacity: calc(0.55 + 0.45 * var(--prox));
}
[data-hero-mood="spotlight"] .hero-shader-line--sub {
  opacity: calc(0.4 + 0.6 * var(--prox));
}
[data-hero-mood="inverted"] .hero-shader-line--lead {
  /* near cursor → text inverts to glow color and gets thick */
  color: color-mix(in srgb, var(--hero-glow, #ff4a1c) calc(var(--prox) * 90%), var(--fg));
  text-shadow: 0 0 calc(20px * var(--prox)) color-mix(in srgb, var(--hero-glow, #ff4a1c) calc(50% * var(--prox)), transparent);
  letter-spacing: calc(-0.038em - var(--prox) * 0.012em);
}
[data-hero-mood="inverted"] .hero-shader-line--sub {
  color: color-mix(in srgb, var(--hero-glow, #ff4a1c) calc(var(--prox) * 60%), var(--fg-dim));
}

/* universal cursor reactivity — matches the inner-page section-hero behavior:
   text inverts to bg color near cursor (creates a "hole" effect against the shader).
   Uses !important to override the inline color set by hero-shader.jsx. */
.hero-shader-line--lead {
  color: color-mix(in srgb, var(--bg) calc(var(--prox) * 100%), var(--fg)) !important;
  text-shadow:
    0 0 calc(var(--prox) * 24px) color-mix(in srgb, var(--hot) calc(var(--prox) * 60%), transparent);
  transition: color .15s ease-out, text-shadow .15s ease-out;
}
.hero-shader-line--sub {
  color: color-mix(in srgb, var(--bg) calc(var(--prox) * 100%), var(--fg-dim)) !important;
  transition: color .15s ease-out;
}

/* ============ home process — visual flow ============ */
.proc-flow {
  position: relative;
  margin-top: 40px;
  padding: 60px 0 40px;
}
.proc-flow-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: auto 64px auto;  /* up cards / line gutter / down cards */
  column-gap: 16px;
  row-gap: 0;
  z-index: 1;
}
/* Track lives in row 2, spanning all columns; sits centered on the gutter */
.proc-flow-track {
  grid-row: 2;
  grid-column: 1 / -1;
  align-self: center;
  position: relative;
  height: 1px;
  pointer-events: none;
}
.proc-flow-line {
  position: absolute;
  left: 4%; right: 4%; top: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--line) 6%,
    var(--line) 94%,
    transparent 100%);
}
.proc-flow-card {
  position: relative;
  padding: 24px 20px;
  /* explicit white so cards pop against the #fafafa page bg */
  background: #ffffff;
  border: 1px solid #eee;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform .3s cubic-bezier(.2,.7,.2,1), border-color .25s, background .25s;
  /* Each card explicitly placed in its own column via inline --col var */
  grid-column: var(--col);
}
/* Up cards: top row, anchored to bottom (touching the line) */
.proc-flow-card.up {
  grid-row: 1;
  align-self: end;
}
/* Down cards: bottom row, anchored to top (touching the line) */
.proc-flow-card.down {
  grid-row: 3;
  align-self: start;
}
.proc-flow-card:hover {
  border-color: color-mix(in srgb, var(--fg) 10%, transparent);
  box-shadow: 0 12px 24px -16px color-mix(in srgb, var(--fg) 14%, transparent);
}
.proc-flow-card.up:hover   { transform: translateY(-3px); }
.proc-flow-card.down:hover { transform: translateY(3px); }

/* Dot is centered on the line (32px from card edge into the 64px gutter) */
.proc-flow-dot {
  position: absolute;
  left: 50%;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--hot);
  transform: translateX(-50%);
}
.proc-flow-card.up   .proc-flow-dot { bottom: -37px; top: auto; }
.proc-flow-card.down .proc-flow-dot { top: -37px; bottom: auto; }

/* Stem: thin connector from card edge down/up to the line */
.proc-flow-card.up::after,
.proc-flow-card.down::after {
  content:'';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  background: var(--line);
}
.proc-flow-card.up::after   { top: 100%;    height: 27px; }  /* card bottom → dot top */
.proc-flow-card.down::after { bottom: 100%; height: 27px; }  /* dot bottom → card top */

.proc-flow-num {
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--hot);
}
.proc-flow-name {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--text-lg);
  letter-spacing: var(--ls-tight);
  color: var(--fg);
  line-height: var(--lh-snug);
}
.proc-flow-desc {
  font-size: var(--text-sm);
  color: var(--fg-dim);
  line-height: var(--lh-relaxed);
  text-wrap: pretty;
}
.proc-flow-items {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-top: var(--space-1);
}
.proc-flow-items li {
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--ls-wide);
  color: var(--fg-mute);
  text-transform: uppercase;
  padding-left: var(--space-3);
  position: relative;
}
.proc-flow-items li::before {
  content: '';
  position: absolute;
  left: 0; top: 7px;
  width: 6px; height: 1px;
  background: var(--fg-mute);
}
.proc-flow-dur {
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px solid var(--line-soft);
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--ls-wide);
  color: var(--fg-dim);
  text-transform: uppercase;
}

/* ============ end CTA — shader card ============ */
.end-cta-wrap {
  padding: 60px 32px 80px;
  display: flex;
  justify-content: center;
}
.end-cta-card {
  position: relative;
  width: 100%;
  max-width: 1320px;
  min-height: 520px;
  border-radius: 28px;
  overflow: hidden;
  isolation: isolate;
  cursor: crosshair;
  border: 1px solid var(--line);
  box-shadow:
    0 1px 0 0 color-mix(in srgb, var(--fg) 6%, transparent),
    0 30px 80px -40px color-mix(in srgb, var(--fg) 20%, transparent);
}
.end-cta-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    radial-gradient(ellipse at center,
      transparent 30%,
      color-mix(in srgb, var(--bg) 25%, transparent) 75%,
      color-mix(in srgb, var(--bg) 55%, transparent) 100%);
}
.end-cta-card-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 96px 48px 96px;
  gap: 22px;
  min-height: 520px;
}
.end-cta-card-inner .end-cta-title {
  --prox: 0;
  --hov: 0;
  margin: 0;
  max-width: 22ch;
  font-size: var(--text-5xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tightest);
  text-wrap: balance;
  /* Tint toward the panel background as the cursor approaches — matches
     section-hero's invert-on-proximity pattern. In dark mode this reads
     as the text "going dark"; in light mode it lifts toward cream. */
  color: color-mix(in srgb, var(--bg) calc(var(--prox) * var(--hov) * 100%), var(--fg));
  text-shadow:
    0 0 calc(var(--prox) * var(--hov) * 28px) color-mix(in srgb, var(--hero-glow, #ff4a1c) calc(var(--prox) * var(--hov) * 60%), transparent);
  transition: color .15s ease-out, text-shadow .15s ease-out;
}
.end-cta-card-inner .end-cta-sub {
  --prox: 0;
  --hov: 0;
  max-width: 56ch;
  margin: 0;
  font-size: var(--text-md);
  line-height: var(--lh-relaxed);
  color: color-mix(in srgb, var(--bg) calc(var(--prox) * var(--hov) * 100%), var(--fg-dim));
  transition: color .15s ease-out;
}
.end-cta-card-inner .end-cta-btn {
  margin-top: 22px;
}

/* ============ home references — trusted by infinite marquee ============ */
.refs-strip {
  padding: 56px 0 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.refs-strip-eye {
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--fg-mute);
}
.refs-marquee {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  /* edge fade so logos slide in/out instead of clipping hard */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.refs-marquee-track {
  display: inline-flex;
  align-items: center;
  gap: 96px;
  padding: 36px 48px;
  white-space: nowrap;
  animation: marq calc(40s / var(--motion, 1)) linear infinite;
  will-change: transform;
}
.refs-marquee:hover .refs-marquee-track { animation-play-state: paused; }
.refs-marquee-logo {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--text-xl);
  letter-spacing: var(--ls-tight);
  color: var(--fg-dim);
  transition: color .25s;
}
.refs-marquee-logo:hover { color: var(--fg); }
[data-motion="0"] .refs-marquee-track { animation: none; }

/* ============ home services — graphic cards ============ */
.svc-graphic {
  display: grid;
  /* 5 cards: 2 wide on first row, 3 on second — feels intentional, not a strict grid */
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  margin-top: 48px;
}
.svc-graphic-card:nth-child(1) { grid-column: span 3; }
.svc-graphic-card:nth-child(2) { grid-column: span 3; }
.svc-graphic-card:nth-child(3) { grid-column: span 2; }
.svc-graphic-card:nth-child(4) { grid-column: span 2; }
.svc-graphic-card:nth-child(5) { grid-column: span 2; }

.svc-graphic-card {
  --mx: 50%;
  --my: 50%;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 32px 28px 28px;
  border: 1px solid #eee;
  border-radius: 18px;
  background: #ffffff;
  text-decoration: none;
  color: var(--fg);
  overflow: hidden;
  isolation: isolate;
  transition:
    border-color .3s,
    transform .35s cubic-bezier(.2,.7,.2,1),
    box-shadow .35s cubic-bezier(.2,.7,.2,1);
  min-height: 320px;
}
/* Cursor-following highlight — opacity raises on hover, position is set via
   --mx/--my by the onMouseMove handler in page-home.jsx. */
.svc-graphic-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    520px circle at var(--mx) var(--my),
    color-mix(in srgb, var(--hot) 14%, transparent) 0%,
    color-mix(in srgb, var(--hot) 4%, transparent) 32%,
    transparent 60%
  );
  opacity: 0;
  transition: opacity .35s cubic-bezier(.2,.7,.2,1);
  pointer-events: none;
  z-index: 0;
}
.svc-graphic-card > * { position: relative; z-index: 1; }
.svc-graphic-card:hover {
  border-color: color-mix(in srgb, var(--fg) 8%, transparent);
  transform: translateY(-2px);
  /* layered modern shadow — tight contact + soft mid + diffuse halo */
  box-shadow:
    0 1px 2px color-mix(in srgb, var(--fg) 4%, transparent),
    0 12px 24px -8px color-mix(in srgb, var(--fg) 8%, transparent),
    0 32px 64px -24px color-mix(in srgb, var(--fg) 14%, transparent);
}
.svc-graphic-card:hover::before { opacity: 1; }

.svc-graphic-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
/* Frameless icon — no background or border, just the glyph. */
.svc-graphic-icon {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  color: var(--fg);
  transition: color .3s;
  font-size: 44px;     /* sizes Phosphor font icons */
  line-height: 1;
}
.svc-graphic-icon i { display: block; }
.svc-graphic-icon svg { width: 44px; height: 44px; display: block; stroke-width: 1.2; }
.svc-graphic-card:hover .svc-graphic-icon {
  color: var(--hot);
}

.svc-graphic-num {
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--fg-mute);
}

.svc-graphic-title {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--text-2xl);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-snug);
  color: var(--fg);
  margin-top: var(--space-1);
}
.svc-graphic-lede {
  font-size: var(--text-sm);
  line-height: var(--lh-relaxed);
  color: var(--fg-dim);
  text-wrap: pretty;
  max-width: 44ch;
}

.svc-graphic-tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-top: auto;
}
.svc-graphic-tags li {
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--fg-dim);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--bg) 60%, transparent);
}

.svc-graphic-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 18px;
  border-top: 1px solid var(--line-soft);
  margin-top: 4px;
}
.svc-graphic-cta {
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--fg);
}
.svc-graphic-arr {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px;
  color: var(--fg-dim);
  transition: border-color .25s, background .25s, color .25s, transform .25s;
}
.svc-graphic-arr i { display: block; }
.svc-graphic-card:hover .svc-graphic-arr {
  background: var(--hot);
  border-color: var(--hot);
  color: #fff;
  transform: translate(2px, -2px);
}

/* ============ carousel nav (progress bar + arrows) ============ */
.carousel-nav {
  display: none; /* shown only when carousel is active (mobile) */
  align-items: center;
  gap: 24px;
  margin-top: 24px;
  padding: 0 4px;
}
.carousel-nav-track {
  flex: 1;
  height: 2px;
  background: var(--line);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.carousel-nav-fill {
  display: block;
  height: 100%;
  background: var(--fg);
  border-radius: 999px;
  transition: width .25s cubic-bezier(.2,.7,.2,1);
}
.carousel-nav-arrows {
  display: inline-flex;
  gap: 10px;
  flex-shrink: 0;
}
.carousel-arrow {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--fg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color .25s, background .25s, color .25s, opacity .25s, transform .2s;
}
.carousel-arrow:hover:not(:disabled) {
  background: var(--fg);
  border-color: var(--fg);
  color: var(--bg);
}
.carousel-arrow:active:not(:disabled) { transform: scale(0.95); }
.carousel-arrow:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.carousel-arrow svg { display: block; }

/* Drag-to-scroll: cursor feedback on .svc-graphic */
.svc-graphic { cursor: grab; }
.svc-graphic.dragging { cursor: grabbing; }
.svc-graphic.dragging * { cursor: grabbing !important; }
.svc-graphic.dragging { scroll-snap-type: none; user-select: none; }
.svc-graphic.dragging .svc-graphic-card { pointer-events: none; }
.svc-graphic.dragging .svc-graphic-card * { user-select: none; }

/* ============ secondary-page hero (shader-backed, inverted) ============ */
.page-hero {
  position: relative;
  min-height: 52vh;
  padding: 140px 32px 64px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  isolation: isolate;
  cursor: crosshair;
  border-bottom: 1px solid var(--line);
}
.page-hero canvas {
  position: absolute !important;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.page-hero-veil {
  position: absolute; left: 0; right: 0; top: 0; height: 180px;
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--bg) 78%, transparent),
    transparent);
  z-index: 1; pointer-events: none;
}
/* Bottom vignette — fades the bottom of the hero into its OWN dark
   color, creating a soft inward focus. The boundary with the (light)
   content section below is then a hard edge, matching the Figma. */
.page-hero-fade {
  position: absolute; left: 0; right: 0; bottom: 0; height: 140px;
  background: linear-gradient(to bottom, transparent, var(--bg));
  z-index: 1; pointer-events: none;
}
.page-hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 48px;
  align-items: end;
}
.page-hero-eye {
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--hot);
  padding-top: var(--space-1);
}
.page-hero-eye::before {
  content: '✦';
  margin-right: var(--space-2);
  font-size: var(--text-eyebrow);
  vertical-align: -1px;
}
.page-hero-body { max-width: 920px; }
.page-hero-title {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--text-4xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--fg);
  text-wrap: balance;
  margin: 0;
}
.page-hero-title .soft {
  color: color-mix(in srgb, var(--fg) 38%, transparent);
  font-weight: var(--fw-light);
}
.page-hero-sub {
  margin-top: var(--space-4);
  font-size: var(--text-base);
  line-height: var(--lh-relaxed);
  /* full --fg in the hero scope = #f5f5f2 (light) per Figma; fades to dim
     elsewhere because page-hero only renders inside .theme-dark */
  color: var(--fg);
  max-width: 56ch;
}

/* ============ ensure top nav reads on top of shader ============ */
/* Progressive (layered) backdrop blur — strong at the top, fading to
   zero at the bottom so the nav has no hard edge.

   Implemented as a stack of pseudo-elements, each with a mask gradient
   that limits its visible band to a slice of the bar; each slice has a
   different blur radius. The result is a smooth blur ramp.

   The .chrome-top itself stays without backdrop-filter so it doesn't
   interfere with the layered version. */
.chrome-top {
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--bg) 28%, transparent) 0%,
    color-mix(in srgb, var(--bg) 14%, transparent) 50%,
    transparent 100%);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent !important;
  box-shadow: none !important;
}
/* shared base for blur layers */
.chrome-top::before,
.chrome-top::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
}
/* layer 1 — strongest blur, weighted toward the very top */
.chrome-top::before {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  -webkit-mask: linear-gradient(to bottom,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,1) 30%,
    rgba(0,0,0,0) 70%);
          mask: linear-gradient(to bottom,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,1) 30%,
    rgba(0,0,0,0) 70%);
}
/* layer 2 — medium blur, occupying the middle band */
.chrome-top::after {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  -webkit-mask: linear-gradient(to bottom,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,1) 35%,
    rgba(0,0,0,1) 65%,
    rgba(0,0,0,0) 100%);
          mask: linear-gradient(to bottom,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,1) 35%,
    rgba(0,0,0,1) 65%,
    rgba(0,0,0,0) 100%);
}

/* ============ section-hero — text reacts to cursor (inverts) ============ */
.page-hero-react {
  --inv: 0;
  display: inline;
  /* fg color stays default; we tint toward the inverse (bg) when cursor is near */
  color: color-mix(in srgb, var(--bg) calc(var(--inv) * 100%), var(--fg));
  text-shadow:
    0 0 calc(var(--inv) * 24px) color-mix(in srgb, var(--hot) calc(var(--inv) * 60%), transparent);
  transition: color .15s ease-out, text-shadow .15s ease-out;
}
.page-hero-title .soft {
  color: color-mix(in srgb, var(--bg) calc(var(--inv, 0) * 100%), color-mix(in srgb, var(--fg) 38%, transparent));
}

/* ============ chrome actions row ============ */
.chrome-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ============ burger button ============ */
.burger {
  display: none;
  width: 44px; height: 44px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 60%, transparent);
  position: relative;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  transition: border-color .25s, background .25s;
}
.burger:hover { border-color: color-mix(in srgb, var(--fg) 30%, transparent); }
.burger > span {
  position: absolute;
  left: 13px; right: 13px;
  height: 1.5px;
  background: var(--fg);
  border-radius: 2px;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), top .25s, opacity .2s;
}
.burger > span:nth-child(1) { top: 17px; }
.burger > span:nth-child(2) { top: 25px; }
.burger.open > span:nth-child(1) { top: 21px; transform: rotate(45deg); }
.burger.open > span:nth-child(2) { top: 21px; transform: rotate(-45deg); }

/* ============ mobile fullscreen menu ============ */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s cubic-bezier(.2,.7,.2,1);
}
.mobile-menu.open {
  opacity: 1;
  pointer-events: auto;
}
.mobile-menu-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 110px 28px 32px;
  gap: 36px;
}
.mobile-menu-eye {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--fg-dim);
  align-self: flex-start;
}
.mobile-menu-nav {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line);
  margin-top: 4px;
}
.mobile-menu-nav button,
.mobile-menu-nav a {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 16px;
  padding: 24px 4px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  text-align: left;
  cursor: pointer;
  color: var(--fg);
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--text-4xl);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
  text-wrap: nowrap;
  opacity: 0;
  transform: translateY(20px);
  transition: color .2s, opacity .35s ease-out, transform .45s cubic-bezier(.2,.7,.2,1);
  text-decoration: none;
}
.mobile-menu.open .mobile-menu-nav button,
.mobile-menu.open .mobile-menu-nav a {
  opacity: 1;
  transform: none;
  transition-delay: calc(0.06s * var(--i, 0) + 0.08s);
}
.mobile-menu-nav button:hover, .mobile-menu-nav a:hover { color: var(--hot); }
.mobile-menu-nav button.active, .mobile-menu-nav a.active { color: var(--hot); }
.mobile-menu-num {
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--ls-wide);
  color: var(--fg-mute);
  text-transform: uppercase;
  font-weight: var(--fw-medium);
  align-self: center;
}
.mobile-menu-label { display: inline-block; }
.mobile-menu-arr {
  font-size: var(--text-md);
  color: var(--fg-mute);
  transition: transform .25s, color .25s;
  align-self: center;
}
.mobile-menu-nav button:hover .mobile-menu-arr,
.mobile-menu-nav button.active .mobile-menu-arr,
.mobile-menu-nav a:hover .mobile-menu-arr,
.mobile-menu-nav a.active .mobile-menu-arr {
  color: var(--hot);
  transform: translate(2px, -2px);
}
.mobile-menu-foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.mobile-menu-foot .cta-pill { align-self: flex-start; }
.mobile-menu-mail {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: var(--ls-wide);
  color: var(--fg-dim);
  text-decoration: none;
}
.mobile-menu-mail:hover { color: var(--fg); }

/* ============ Tweaks panel (dev-time edit overlay) ============
   Originally injected at runtime by tweaks-panel.js. Hoisted here
   so the panel doesn't FOUC on first paint. */
.tweaks-fab {
  position: fixed; right: 20px; bottom: 20px; z-index: 9998;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--fg); color: var(--bg);
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 28px -8px color-mix(in srgb, var(--fg) 50%, transparent),
              0 2px 6px rgba(0,0,0,0.15);
  transition: transform .25s cubic-bezier(.2,.7,.2,1), background .2s;
}
.tweaks-fab:hover { transform: translateY(-2px) rotate(15deg); }
.tweaks-fab svg { width: 22px; height: 22px; }

.tweaks-panel {
  position: fixed; right: 20px; bottom: 80px; z-index: 9998;
  width: 320px; max-height: calc(100vh - 120px);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.4),
              0 8px 20px -4px rgba(0,0,0,0.15);
  font-family: var(--body);
  color: var(--fg);
  display: flex; flex-direction: column;
  overflow: hidden;
  opacity: 0; transform: translateY(8px) scale(0.98); pointer-events: none;
  transition: opacity .25s cubic-bezier(.2,.7,.2,1), transform .25s cubic-bezier(.2,.7,.2,1);
}
.tweaks-panel.open { opacity: 1; transform: none; pointer-events: auto; }
.tweaks-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--fg-dim);
}
.tweaks-panel-close {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--line-soft); color: var(--fg);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .2s;
}
.tweaks-panel-close:hover { background: var(--line); }
.tweaks-panel-body {
  padding: 8px 0; overflow-y: auto; flex: 1;
}
.tweaks-section {
  padding: 12px 16px 6px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--fg-mute);
}
.tweaks-row {
  padding: 10px 16px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  font-size: 13px;
}
.tweaks-row .tweaks-label {
  color: var(--fg-dim); font-size: 12px;
  flex: 1; min-width: 0;
}
.tweaks-row.col { flex-direction: column; align-items: stretch; gap: 8px; }
.tweaks-row.col .tweaks-label {
  display: flex; justify-content: space-between; align-items: center;
}
.tweaks-row.col .tweaks-label .tweaks-val {
  font-family: var(--mono); font-size: 11px; color: var(--fg);
}
.tweaks-row input[type="color"] {
  width: 40px; height: 28px; border-radius: 8px;
  border: 1px solid var(--line); padding: 2px;
  background: transparent; cursor: pointer;
}
.tweaks-row select {
  padding: 6px 10px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--bg);
  font-family: var(--body); font-size: 12px; color: var(--fg);
  cursor: pointer; min-width: 130px;
}
.tweaks-row .tweaks-radio {
  display: flex; gap: 4px;
  background: var(--line-soft); padding: 2px; border-radius: 8px;
}
.tweaks-row .tweaks-radio button {
  padding: 5px 12px; border-radius: 6px;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--fg-dim); background: transparent;
  border: 0; cursor: pointer; transition: background .2s, color .2s;
}
.tweaks-row .tweaks-radio button.active {
  background: var(--fg); color: var(--bg);
}
.tweaks-action {
  width: 100%;
  padding: 9px 12px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: transparent;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-dim);
  cursor: pointer;
  transition: border-color .2s, color .2s, background .2s;
}
.tweaks-action:hover {
  border-color: color-mix(in srgb, var(--fg) 30%, transparent);
  color: var(--fg);
}
.tweaks-action--danger:hover {
  border-color: var(--hot);
  color: var(--hot);
  background: color-mix(in srgb, var(--hot) 8%, transparent);
}
.tweaks-toggle {
  width: 38px; height: 22px; border-radius: 999px;
  background: var(--line); position: relative; cursor: pointer;
  transition: background .25s;
  flex-shrink: 0;
}
.tweaks-toggle.on { background: var(--hot); }
.tweaks-toggle::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff;
  transition: transform .25s cubic-bezier(.2,.7,.2,1);
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.tweaks-toggle.on::after { transform: translateX(16px); }
.tweaks-row input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 4px; border-radius: 999px;
  background: var(--line);
  outline: none; cursor: pointer;
}
.tweaks-row input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--hot); border: 2px solid var(--bg);
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
  cursor: pointer;
}
.tweaks-row input[type="range"]::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--hot); border: 2px solid var(--bg);
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
  cursor: pointer;
}