/* =============================================================
   KAEPHOR — design system
   Aesthetic: structural-engineering precision in warm stone.
   Color: Committed (ink ↔ paper sections, stone accent ~10%).
   ============================================================= */

/* ---------- Tokens ---------- */
:root {
  /* Ink — warm near-blacks */
  --ink-900: oklch(15.5% 0.006 70);
  --ink-850: oklch(19%   0.007 70);
  --ink-800: oklch(24%   0.008 70);
  --ink-700: oklch(32%   0.009 70);
  --ink-600: oklch(45%   0.010 72);
  --ink-500: oklch(56%   0.011 72);

  /* Paper — warm off-whites */
  --paper:     oklch(96.5% 0.007 78);
  --paper-2:   oklch(93.5% 0.009 78);
  --paper-3:   oklch(89%   0.010 78);
  --paper-dim: oklch(82%   0.012 76);

  /* Stone — the accent */
  --stone:        oklch(64% 0.030 68);
  --stone-deep:   oklch(53% 0.036 60);
  --stone-bright: oklch(75% 0.034 74);
  --stone-soft:   oklch(88% 0.018 76);

  /* Semantic */
  --bg: var(--paper);
  --fg: var(--ink-900);
  --muted: var(--ink-600);
  --accent: var(--stone);
  --hairline: var(--paper-3);
  --focus: oklch(64% 0.13 68);

  /* Type */
  --font-sans: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'Spline Sans Mono', ui-monospace, 'SFMono-Regular', monospace;
  --text-hero:  clamp(2.6rem, 1.7rem + 4.4vw, 5.25rem);
  --text-h1:    clamp(2.25rem, 1.5rem + 3.2vw, 4rem);
  --text-h2:    clamp(1.75rem, 1.3rem + 1.9vw, 2.75rem);
  --text-h3:    clamp(1.3rem, 1.15rem + 0.7vw, 1.6rem);
  --text-lead:  clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
  --text-body:  1.0625rem;
  --text-sm:    0.9375rem;
  --text-label: 0.75rem;

  /* Spacing (4pt) */
  --space-3xs: 4px; --space-2xs: 8px; --space-xs: 12px; --space-sm: 16px;
  --space-md: 24px; --space-lg: 32px; --space-xl: 48px; --space-2xl: 64px;
  --space-3xl: 96px; --space-4xl: 128px;
  --section-pad: clamp(4rem, 2.5rem + 7vw, 9rem);
  --gutter: clamp(1.25rem, 0.5rem + 3vw, 3rem);
  --maxw: 1280px;
  --maxw-text: 70ch;
  --header-h: 76px;

  /* Motion */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --dur-fast: 140ms; --dur-mid: 280ms; --dur-slow: 520ms;

  /* Elevation (subtle) */
  --shadow-md: 0 2px 8px oklch(15.5% 0.01 70 / 0.06), 0 8px 24px oklch(15.5% 0.01 70 / 0.06);
  --shadow-lg: 0 4px 16px oklch(15.5% 0.01 70 / 0.08), 0 20px 48px oklch(15.5% 0.01 70 / 0.10);
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: 400;
  line-height: 1.6;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; }
ul { list-style: none; padding: 0; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 1px; }
::selection { background: var(--stone); color: var(--ink-900); }

/* ---------- Layout ---------- */
.shell { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.shell--wide { max-width: 1440px; }
.section { padding-block: var(--section-pad); position: relative; }
.section--ink { background: var(--ink-900); color: var(--paper-dim); }
.section--ink h1, .section--ink h2, .section--ink h3 { color: var(--paper); }
.section--paper2 { background: var(--paper-2); }
.stack > * + * { margin-top: var(--flow, var(--space-md)); }

/* ---------- Typography ---------- */
h1, h2, h3, h4 { font-family: var(--font-sans); text-wrap: balance; font-optical-sizing: auto; line-height: 1.08; letter-spacing: -0.01em; color: var(--fg); }
.display { font-weight: 800; font-stretch: 118%; letter-spacing: -0.018em; line-height: 1.0; }
.h1 { font-size: var(--text-h1); font-weight: 800; font-stretch: 112%; letter-spacing: -0.018em; }
.h2 { font-size: var(--text-h2); font-weight: 750; font-stretch: 108%; letter-spacing: -0.015em; }
.h3 { font-size: var(--text-h3); font-weight: 650; }
.lead { font-size: var(--text-lead); line-height: 1.45; color: var(--muted); font-weight: 400; max-width: 56ch; }
.section--ink .lead { color: var(--paper-dim); }
p { max-width: var(--maxw-text); text-wrap: pretty; }
.muted { color: var(--muted); }
.small { font-size: var(--text-sm); }

.eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-2xs);
  font-family: var(--font-mono); font-size: var(--text-label); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.18em; color: var(--stone-deep);
}
.section--ink .eyebrow { color: var(--stone-bright); }
.eyebrow::before { content: ""; width: 18px; height: 1px; background: currentColor; opacity: 0.6; }

/* on-dark reading compensation */
.section--ink p, .section--ink li { line-height: 1.68; letter-spacing: 0.01em; font-weight: 420; }

/* ---------- Slash motif ---------- */
.slash { display: inline-block; width: 0.42em; height: 0.92em; background: var(--stone); transform: skewX(-20deg); vertical-align: -0.06em; }
.slash-mark { width: clamp(22px, 3vw, 40px); height: 6px; background: var(--stone); transform: skewX(-20deg); }

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--stone); --btn-fg: var(--ink-900);
  position: relative; display: inline-flex; align-items: center; gap: var(--space-2xs);
  padding: 14px 26px; font-weight: 600; font-size: var(--text-sm); letter-spacing: 0.005em;
  background: var(--btn-bg); color: var(--btn-fg); border-radius: 2px; overflow: hidden;
  transition: color var(--dur-mid) var(--ease-out-expo), transform var(--dur-fast) var(--ease-out-quart);
  isolation: isolate; min-height: 48px;
}
.btn:active { transform: scale(0.97); }
@media (prefers-reduced-motion: reduce) { .btn:active { transform: none; } }
.btn::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -20%; width: 140%;
  background: var(--stone-deep);
  transform: translateX(-105%) skewX(-12deg);
  transition: transform var(--dur-mid) var(--ease-out-expo); z-index: -1;
}
.btn:hover::before, .btn:focus-visible::before { transform: translateX(0) skewX(-12deg); }
.btn .arrow { transition: transform var(--dur-mid) var(--ease-out-expo); }
.btn:hover .arrow { transform: translateX(3px); }

.btn--ghost {
  --btn-bg: transparent; --btn-fg: var(--fg);
  border: 1px solid currentColor; color: var(--fg);
}
.section--ink .btn--ghost { color: var(--paper); }
.btn--ghost::before { background: var(--fg); }
.section--ink .btn--ghost::before { background: var(--paper); }
.btn--ghost:hover, .btn--ghost:focus-visible { color: var(--paper); }
.section--ink .btn--ghost:hover, .section--ink .btn--ghost:focus-visible { color: var(--ink-900); }

.btn--lg { padding: 17px 32px; font-size: var(--text-body); }

/* ---------- Text links with slash-wipe underline ---------- */
.link {
  position: relative; color: var(--stone-deep); font-weight: 500;
  display: inline-flex; align-items: center; gap: 6px;
}
.section--ink .link { color: var(--stone-bright); }
.link::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 100%;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-mid) var(--ease-out-expo);
}
.link:hover::after, .link:focus-visible::after { transform: scaleX(1); }
.link .arrow { transition: transform var(--dur-mid) var(--ease-out-expo); }
.link:hover .arrow { transform: translateX(3px); }

/* ---------- Header ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--header-h);
  display: flex; align-items: center;
  transition: height var(--dur-mid) var(--ease-out-expo),
              background var(--dur-mid) var(--ease-out-expo),
              border-color var(--dur-mid) var(--ease-out-expo);
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled {
  height: 60px;
  background: oklch(96.5% 0.007 78 / 0.85);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom-color: var(--hairline);
}
/* dark-hero pages start with light logo/nav over ink */
.site-header.on-hero:not(.is-scrolled) { color: var(--paper); }
.site-header .inner { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); }
.brand { display: inline-flex; align-items: center; }
.brand svg, .brand img { height: 54px; width: auto; transition: height var(--dur-mid) var(--ease-out-expo); }
.is-scrolled .brand svg, .is-scrolled .brand img { height: 44px; }
/* Logo swap: light logo only over a dark hero before scroll */
.brand .logo-light { display: none; }
.site-header.on-hero:not(.is-scrolled) .logo-light { display: block; }
.site-header.on-hero:not(.is-scrolled) .logo-dark { display: none; }

.nav { display: flex; align-items: center; gap: clamp(var(--space-md), 2vw, var(--space-xl)); }
.nav a { font-size: var(--text-sm); font-weight: 500; position: relative; padding-block: 6px; color: inherit; opacity: 0.85; transition: opacity var(--dur-fast); }
.nav a:hover { opacity: 1; }
.nav a[aria-current="page"] { opacity: 1; }
.nav a[aria-current="page"]::after { content: ""; position: absolute; left: 0; bottom: 0; width: 14px; height: 3px; background: var(--stone); transform: skewX(-20deg); }
.header-cta { display: inline-flex; align-items: center; gap: var(--space-sm); }

/* Mobile nav */
.nav-toggle { display: none; width: 44px; height: 44px; position: relative; z-index: 110; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: ""; position: absolute; left: 10px; width: 24px; height: 2px; background: currentColor;
  transition: transform var(--dur-mid) var(--ease-out-expo), opacity var(--dur-fast);
}
.nav-toggle span { top: 21px; }
.nav-toggle span::before { top: -7px; } .nav-toggle span::after { top: 7px; }
body.nav-open .nav-toggle span { background: transparent; }
body.nav-open .nav-toggle span::before { transform: translateY(7px) rotate(45deg); }
body.nav-open .nav-toggle span::after { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 880px) {
  .nav-toggle { display: block; }
  .nav {
    position: fixed; inset: 0; z-index: 105;
    flex-direction: column; justify-content: center; align-items: flex-start;
    gap: var(--space-lg); padding: var(--gutter);
    background: var(--ink-900); color: var(--paper);
    transform: translateX(100%); transition: transform var(--dur-slow) var(--ease-out-expo);
    visibility: hidden;
  }
  body.nav-open .nav { transform: translateX(0); visibility: visible; }
  .nav a { font-size: clamp(1.5rem, 8vw, 2.25rem); font-weight: 700; font-stretch: 110%; opacity: 1; }
  .nav .header-cta { flex-direction: column; align-items: flex-start; gap: var(--space-md); margin-top: var(--space-md); }
  .nav .header-cta .btn { width: auto; }
}

/* ---------- Hero ---------- */
.hero { position: relative; min-height: clamp(620px, 92svh, 940px); display: flex; align-items: center; background: var(--ink-900); color: var(--paper); overflow: hidden; padding-top: var(--header-h); }
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media img, .hero__media canvas { width: 100%; height: 100%; object-fit: cover; object-position: 70% center; }
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(100deg, var(--ink-900) 0%, oklch(15.5% 0.006 70 / 0.88) 34%, oklch(15.5% 0.006 70 / 0.30) 64%, transparent 100%),
    linear-gradient(0deg, var(--ink-900) 2%, transparent 38%);
}
.hero__inner { position: relative; z-index: 1; width: 100%; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); max-width: 900px; }
.hero h1 { color: var(--paper); font-size: var(--text-hero); margin-top: var(--space-md); }
.hero .lead { color: var(--paper-dim); margin-top: var(--space-lg); }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-xl); }
.hero__scroll { position: absolute; bottom: var(--space-lg); left: var(--gutter); z-index: 1; font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: 0.18em; text-transform: uppercase; color: var(--paper-dim); display: inline-flex; align-items: center; gap: var(--space-2xs); }
.hero__scroll .bar { width: 1px; height: 34px; background: linear-gradient(var(--stone), transparent); }

/* ---------- Page hero (inner pages) ---------- */
.page-hero { background: var(--ink-900); color: var(--paper-dim); padding-top: calc(var(--header-h) + clamp(3rem, 1.5rem + 6vw, 6.5rem)); padding-bottom: clamp(3rem, 1.5rem + 6vw, 6.5rem); position: relative; overflow: hidden; }
.page-hero h1 { color: var(--paper); font-size: var(--text-h1); font-weight: 800; font-stretch: 112%; letter-spacing: -0.018em; margin-top: var(--space-md); max-width: 18ch; }
.page-hero .lead { color: var(--paper-dim); margin-top: var(--space-lg); max-width: 60ch; }
.page-hero__slash { position: absolute; right: -3%; top: -20%; width: 32%; height: 150%; background: oklch(64% 0.030 68 / 0.08); transform: skewX(-20deg); z-index: 0; pointer-events: none; }
.page-hero > * { position: relative; z-index: 1; }

/* ---------- Section header pattern ---------- */
.sec-head { max-width: 60ch; margin-bottom: var(--space-2xl); }
.sec-head .h2 { margin-top: var(--space-sm); }
.sec-head .lead { margin-top: var(--space-md); }
.sec-head--split { display: grid; gap: var(--space-lg); grid-template-columns: 1fr; align-items: end; max-width: none; margin-bottom: var(--space-2xl); }
@media (min-width: 880px) { .sec-head--split { grid-template-columns: 1.4fr 1fr; } .sec-head--split .side { justify-self: end; } }

/* ---------- Capability spec list ---------- */
.spec-list { border-top: 1px solid var(--hairline); }
.section--ink .spec-list { border-top-color: var(--ink-700); }
.spec {
  display: grid; gap: var(--space-sm) var(--space-lg); align-items: start;
  grid-template-columns: 1fr; padding-block: var(--space-lg);
  border-bottom: 1px solid var(--hairline);
  transition: background var(--dur-mid) var(--ease-out-expo);
}
.section--ink .spec { border-bottom-color: var(--ink-700); }
.spec__no { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--stone-deep); font-weight: 500; }
.section--ink .spec__no { color: var(--stone-bright); }
.spec__name { font-size: var(--text-h3); font-weight: 700; font-stretch: 106%; letter-spacing: -0.01em; }
.spec__desc { color: var(--muted); max-width: 60ch; }
.section--ink .spec__desc { color: var(--paper-dim); }
.spec__tags { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.tag { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 5px 10px; border: 1px solid var(--hairline); color: var(--muted); border-radius: 2px; }
.section--ink .tag { border-color: var(--ink-700); color: var(--paper-dim); }
.spec:hover { background: var(--stone-soft); }
.section--ink .spec:hover { background: var(--ink-850); }
@media (min-width: 760px) {
  .spec { grid-template-columns: 3.5rem minmax(0, 1.1fr) minmax(0, 1.4fr); gap: var(--space-xl); }
  .spec__tags { margin-top: var(--space-xs); }
}

/* ---------- Work / project blocks ---------- */
.project { display: grid; gap: var(--space-xl); align-items: center; grid-template-columns: 1fr; }
.project + .project { margin-top: var(--space-4xl); }
.project__media { position: relative; border-radius: 3px; overflow: hidden; box-shadow: var(--shadow-lg); background: var(--paper-2); }
.project__media img { width: 100%; height: auto; display: block; object-fit: contain; object-position: top center; transition: transform var(--dur-slow) var(--ease-out-expo); }
.project:hover .project__media img { transform: scale(1.03); }
.project__media::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; box-shadow: inset 0 0 0 1px oklch(15.5% 0.01 70 / 0.08); border-radius: 3px; }
.project__no { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--stone-deep); }
.section--ink .project__no { color: var(--stone-bright); }
.project__name { font-size: var(--text-h2); font-weight: 780; font-stretch: 108%; letter-spacing: -0.015em; margin-top: var(--space-xs); }
.project__meta { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin: var(--space-md) 0; }
.project__desc { color: var(--muted); }
.section--ink .project__desc { color: var(--paper-dim); }
.project__link { margin-top: var(--space-lg); }
@media (min-width: 860px) {
  .project { grid-template-columns: 1fr 1fr; gap: var(--space-3xl); }
  .project--flip .project__media { order: 2; }
}

/* compact work strip (home) */
.work-strip { display: grid; gap: var(--space-lg); grid-template-columns: 1fr; }
@media (min-width: 720px) { .work-strip { grid-template-columns: 1fr 1fr; } }
.work-card { display: block; position: relative; }
.work-card__media { position: relative; border-radius: 3px; overflow: hidden; aspect-ratio: 16 / 10; box-shadow: var(--shadow-md); background: var(--paper-2); }
.work-card__media img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform var(--dur-slow) var(--ease-out-expo); }
.work-card:hover .work-card__media img { transform: scale(1.04); }
.work-card__bar { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-sm); margin-top: var(--space-md); }
.work-card__name { font-size: var(--text-h3); font-weight: 700; font-stretch: 106%; }
.work-card__desc { color: var(--muted); margin-top: var(--space-2xs); }
.section--ink .work-card__desc { color: var(--paper-dim); }

/* ---------- Stats / proof ---------- */
.stats { display: grid; gap: var(--space-xl) var(--space-lg); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.stat__num { font-size: clamp(2.25rem, 1.5rem + 3vw, 3.5rem); font-weight: 800; font-stretch: 115%; letter-spacing: -0.02em; line-height: 1; }
.stat__num .slash { height: 0.7em; }
.stat__label { color: var(--muted); margin-top: var(--space-2xs); font-size: var(--text-sm); }
.section--ink .stat__label { color: var(--paper-dim); }

/* ---------- Process steps ---------- */
.steps { display: grid; gap: var(--space-xl); grid-template-columns: 1fr; counter-reset: step; }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(4, 1fr); gap: var(--space-lg); } }
.step { position: relative; border-top: 2px solid transparent; padding-top: var(--space-md); }
.step::before { content: ""; position: absolute; top: -2px; left: 0; height: 2px; width: 100%; background: var(--stone); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-slow) var(--ease-out-expo); transition-delay: calc(var(--i, 0) * 90ms + 120ms); }
.step.is-in::before { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { .step::before { transition: none; transform: scaleX(1); } }
.step__no { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--stone-deep); }
.section--ink .step__no { color: var(--stone-bright); }
.step__title { font-size: var(--text-h3); font-weight: 700; margin: var(--space-2xs) 0 var(--space-xs); }

/* ---------- Industries grid ---------- */
.ind-grid { display: grid; gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); grid-template-columns: 1fr; }
.section--ink .ind-grid { background: var(--ink-700); border-color: var(--ink-700); }
@media (min-width: 620px) { .ind-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .ind-grid { grid-template-columns: repeat(4, 1fr); } }
.ind { background: var(--bg); padding: var(--space-lg); min-height: 200px; display: flex; flex-direction: column; justify-content: space-between; transition: background var(--dur-mid) var(--ease-out-expo); }
.section--ink .ind { background: var(--ink-900); }
.ind:hover { background: var(--stone-soft); }
.section--ink .ind:hover { background: var(--ink-850); }
.ind__no { font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: 0.12em; color: var(--stone-deep); }
.section--ink .ind__no { color: var(--stone-bright); }
.ind__name { font-size: var(--text-h3); font-weight: 700; margin-top: var(--space-sm); }
.ind__desc { color: var(--muted); font-size: var(--text-sm); margin-top: var(--space-2xs); }
.section--ink .ind__desc { color: var(--paper-dim); }

/* ---------- CTA band ---------- */
.cta-band { position: relative; overflow: hidden; }
.cta-band .h1 { max-width: 18ch; }
.cta-band__row { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-xl); }
.cta-band__slash { position: absolute; right: -4%; top: 50%; translate: 0 -50%; width: 40%; height: 160%; background: oklch(64% 0.030 68 / 0.10); transform: skewX(-20deg); z-index: 0; }
.cta-band > * { position: relative; z-index: 1; }

/* ---------- Contact ---------- */
.contact-grid { display: grid; gap: var(--space-2xl); grid-template-columns: 1fr; }
@media (min-width: 920px) { .contact-grid { grid-template-columns: 1fr 1fr; gap: var(--space-4xl); } }
.channels { display: grid; gap: var(--space-md); }
.channel { display: flex; align-items: flex-start; gap: var(--space-md); padding: var(--space-md) 0; border-bottom: 1px solid var(--hairline); }
.section--ink .channel { border-bottom-color: var(--ink-700); }
.channel__ico { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--hairline); border-radius: 2px; color: var(--stone-deep); }
.section--ink .channel__ico { border-color: var(--ink-700); color: var(--stone-bright); }
.channel__label { font-family: var(--font-mono); font-size: var(--text-label); text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); }
.channel__val { font-size: var(--text-lead); font-weight: 600; }

.form { display: grid; gap: var(--space-md); }
.field { display: grid; gap: var(--space-2xs); }
.field label { font-family: var(--font-mono); font-size: var(--text-label); text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); }
.field input, .field textarea, .field select {
  font: inherit; color: var(--fg); background: var(--paper); border: 1px solid var(--paper-3);
  padding: 13px 14px; border-radius: 2px; width: 100%;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--stone); box-shadow: 0 0 0 3px oklch(64% 0.03 68 / 0.25); }
.field input:user-invalid, .field textarea:user-invalid { border-color: oklch(55% 0.16 25); }
.form__status { font-size: var(--text-sm); min-height: 1.4em; }
.form__status.is-error { color: oklch(52% 0.17 25); }
.form__status.is-ok { color: var(--stone-deep); }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink-900); color: var(--paper-dim); padding-block: var(--space-3xl) var(--space-xl); }
.site-footer h2, .site-footer h3 { color: var(--paper); }
.footer-top { display: grid; gap: var(--space-2xl); grid-template-columns: 1fr; }
@media (min-width: 760px) { .footer-top { grid-template-columns: 1.6fr 1fr 1fr; gap: var(--space-xl); } }
.footer-brand svg, .footer-brand img { height: 50px; width: auto; }
.footer-tagline { margin-top: var(--space-md); max-width: 36ch; color: var(--paper-dim); }
.footer-col h3 { font-size: var(--text-sm); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.14em; color: var(--stone-bright); margin-bottom: var(--space-md); font-weight: 500; }
.footer-col a { display: block; padding: 6px 0; color: var(--paper-dim); transition: color var(--dur-fast); }
.footer-col a:hover { color: var(--paper); }
.footer-bottom { display: flex; flex-wrap: wrap; gap: var(--space-md); justify-content: space-between; align-items: center; margin-top: var(--space-3xl); padding-top: var(--space-lg); border-top: 1px solid var(--ink-700); font-size: var(--text-sm); }

/* ---------- Reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity var(--dur-slow) var(--ease-out-expo), transform var(--dur-slow) var(--ease-out-expo); transition-delay: calc(var(--i, 0) * 70ms); }
.reveal.is-in { opacity: 1; transform: none; }

/* page-load hero stagger */
.hero .reveal { opacity: 0; transform: translateY(22px); }
.hero.is-ready .reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .hero .reveal { transition: opacity 200ms ease; transform: none; }
  .btn::before, .link::after { transition: none; }
  .project:hover .project__media img, .work-card:hover .work-card__media img { transform: none; }
  *, *::before, *::after { animation-duration: 0.01ms !important; }
}

/* ---------- Utilities ---------- */
.measure { max-width: var(--maxw-text); }
.center-x { margin-inline: auto; }
.divider { height: 1px; background: var(--hairline); border: 0; }
.section--ink .divider { background: var(--ink-700); }
.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; }
.grid-2 { display: grid; gap: var(--space-2xl); grid-template-columns: 1fr; }
@media (min-width: 860px) { .grid-2 { grid-template-columns: 1fr 1fr; } }
.flow-lg { --flow: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }
.skip-link { position: absolute; left: var(--gutter); top: -60px; background: var(--ink-900); color: var(--paper); padding: 10px 16px; z-index: 200; border-radius: 2px; transition: top var(--dur-mid) var(--ease-out-expo); }
.skip-link:focus { top: 12px; }

/* =============================================================
   WOW LAYER — hero motion, autonomous-ops console, marquee, scroll progress
   GPU-only (transform/opacity). Every animation degrades under
   prefers-reduced-motion (guard block at the end of this section).
   ============================================================= */

/* ---- Scroll progress hairline ---- */
.scroll-progress { position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 200; pointer-events: none; background: transparent; }
.scroll-progress__bar { height: 100%; transform: scaleX(0); transform-origin: 0 50%; background: linear-gradient(90deg, var(--stone-deep), var(--stone-bright)); will-change: transform; }

/* ---- Hero media: poster img + video + canvas, with parallax ---- */
.hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% center; transform: translate3d(0, var(--py, 0px), 0) scale(1.08); will-change: transform; }
.hero__video { opacity: 0; transition: opacity 1000ms var(--ease-out-expo); }
.hero__video.is-playing { opacity: 1; }
.hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.btn[data-magnetic] { will-change: transform; transform: translate(var(--mx, 0px), var(--my, 0px)) scale(var(--press, 1)); transition: color var(--dur-mid) var(--ease-out-expo), transform 240ms var(--ease-out-expo); }
.btn[data-magnetic]:active { --press: 0.96; }
@media (prefers-reduced-motion: reduce) { .btn[data-magnetic] { transform: none; } }

/* ---- Keyword marquee ---- */
.marquee { background: var(--paper-2); border-block: 1px solid var(--hairline); overflow: hidden; padding-block: var(--space-md); }
.marquee__track { display: inline-flex; align-items: center; gap: var(--space-2xl); white-space: nowrap; will-change: transform; animation: kael-marquee 44s linear infinite; }
.marquee:hover .marquee__track,
.marquee__track.is-paused { animation-play-state: paused; }
.marquee__item { font-family: var(--font-mono); font-size: var(--text-sm); letter-spacing: 0.09em; text-transform: uppercase; color: var(--stone-deep); display: inline-flex; align-items: center; gap: var(--space-2xl); }
.marquee__item::after { content: ""; flex: none; width: 6px; height: 6px; background: var(--stone); transform: skewX(-20deg); }
@keyframes kael-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---- Autonomous Operations control room ---- */
.ops { position: relative; overflow: hidden; }
.ops::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
  background-image: linear-gradient(var(--ink-700) 1px, transparent 1px), linear-gradient(90deg, var(--ink-700) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(120% 90% at 80% 10%, oklch(15.5% 0.006 70 / 0.5), transparent 70%);
  mask-image: radial-gradient(120% 90% at 80% 10%, oklch(15.5% 0.006 70 / 0.5), transparent 70%);
}
.ops > .shell { position: relative; z-index: 1; }
.ops__live { color: var(--stone-bright); }
.ops__live::before { display: none; }
.ops__sim { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--paper-dim); border: 1px solid var(--ink-700); border-radius: 2px; padding: 3px 7px; }
.ops__live .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--stone-bright); display: inline-block; box-shadow: 0 0 0 0 oklch(75% 0.034 74 / 0.6); animation: kael-pulse 2.4s var(--ease-out-expo) infinite; }
@keyframes kael-pulse { 0% { box-shadow: 0 0 0 0 oklch(75% 0.034 74 / 0.5); } 70% { box-shadow: 0 0 0 8px oklch(75% 0.034 74 / 0); } 100% { box-shadow: 0 0 0 0 oklch(75% 0.034 74 / 0); } }

/* asymmetric engineering readout: one dominant figure + a mono ledger (not a KPI quad) */
.ops__readout { margin-top: var(--space-2xl); display: grid; gap: var(--space-xl); grid-template-columns: 1fr; align-items: end; }
@media (min-width: 820px) { .ops__readout { grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: var(--space-3xl); } }
.ops__primary { border-top: 2px solid var(--stone); padding-top: var(--space-sm); }
.ops__statnum { font-weight: 800; font-stretch: 115%; letter-spacing: -0.02em; line-height: 0.95; color: var(--paper); font-variant-numeric: tabular-nums; }
.ops__statnum--xl { font-size: clamp(3rem, 2rem + 6vw, 5.5rem); }
.ops__statlabel { color: var(--paper-dim); font-size: var(--text-sm); margin-top: var(--space-xs); max-width: 24ch; }
.ops__ledger { align-self: end; border-top: 1px solid var(--ink-700); }
.ops__row { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: var(--space-md); padding: var(--space-sm) 0; border-bottom: 1px solid var(--ink-700); }
.ops__row dt { font-family: var(--font-mono); font-size: var(--text-sm); letter-spacing: 0.06em; text-transform: uppercase; color: var(--paper-dim); }
.ops__row dd { font-family: var(--font-mono); font-size: var(--text-lead); font-weight: 600; color: var(--paper); font-variant-numeric: tabular-nums; }
.ops__row dd .suffix { color: var(--stone-bright); }

.ops__console { margin-top: var(--space-2xl); display: grid; gap: var(--space-md); grid-template-columns: 1fr; }
@media (min-width: 680px) { .ops__console { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .ops__console { grid-template-columns: repeat(4, 1fr); } }
.lane { display: flex; flex-direction: column; min-height: 286px; border: 1px solid var(--ink-700); border-radius: 4px; background: oklch(17.5% 0.006 70); overflow: hidden; }
.lane__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2xs); padding: var(--space-sm) var(--space-md); border-bottom: 1px solid var(--ink-700); }
.lane__name { font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--paper); }
.lane__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--stone-bright); flex: none; box-shadow: 0 0 0 0 oklch(75% 0.034 74 / 0.6); animation: kael-pulse 2.6s var(--ease-out-expo) infinite; }
.lane__feed { display: flex; flex-direction: column; gap: var(--space-2xs); padding: var(--space-sm) var(--space-md) var(--space-md); flex: 1; overflow: hidden; }
.task { font-family: var(--font-mono); font-size: 0.76rem; line-height: 1.45; color: var(--paper-dim); opacity: 0; transform: translateY(7px); animation: kael-taskin 380ms var(--ease-out-expo) forwards; }
@keyframes kael-taskin { to { opacity: 1; transform: none; } }
.task__mark { color: var(--ink-500); margin-right: 0.5em; }
.task.is-running { color: var(--paper); }
.task.is-running .task__mark { color: var(--stone-bright); }
.task.is-running .task__txt::after { content: "▍"; margin-left: 1px; color: var(--stone-bright); animation: kael-blink 1s steps(2, start) infinite; }
.task.is-done { color: var(--paper); }
.task.is-done .task__mark { color: var(--stone-bright); }
.task__dur { color: var(--ink-500); }
@keyframes kael-blink { 50% { opacity: 0; } }
.ops__foot { margin-top: var(--space-xl); color: var(--paper-dim); font-size: var(--text-sm); }

/* ---- Reduced-motion: freeze the wow layer ---- */
@media (prefers-reduced-motion: reduce) {
  .hero__bg { transform: none; }
  .hero__video { display: none; }
  .marquee__track { animation: none; }
  .ops__live .dot, .lane__dot { animation: none; }
  .task { animation: none; opacity: 1; transform: none; }
  .task.is-running .task__txt::after { animation: none; }
  .scroll-progress { display: none; }
}

/* =============================================================
   IMAGERY LAYER — section media, creative-AI gallery,
   capability emblems, industry tiles
   ============================================================= */

/* ---- Generic section media frame (Positioning / Why) ---- */
.sec-media { position: relative; border-radius: 3px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--ink-900); box-shadow: var(--shadow-lg); }
.sec-media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out-expo); }
.sec-media:hover img { transform: scale(1.03); }
.sec-media::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px oklch(96.5% 0.007 78 / 0.08); border-radius: 3px; pointer-events: none; }
/* "Artwork" media (glow-on-white plate) blends into the paper section — no box, gold path floats */
.sec-media--art { background: transparent; box-shadow: none; overflow: visible; aspect-ratio: auto; }
.sec-media--art::after { display: none; }
.sec-media--art img { height: auto; object-fit: contain; }
/* split layout: text + media side by side */
.media-split { display: grid; gap: var(--space-2xl); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 880px) { .media-split { grid-template-columns: 1.1fr 1fr; gap: var(--space-3xl); } .media-split--flip > :first-child { order: 2; } }

/* ---- Process band (wide thin accent above steps) ---- */
.process-band { position: relative; border-radius: 3px; overflow: hidden; aspect-ratio: 16 / 4; margin-bottom: var(--space-2xl); background: var(--ink-900); }
.process-band img { width: 100%; height: 100%; object-fit: cover; }

/* ---- Creative-AI gallery (bento, asymmetric) ---- */
.cgal__grid { display: grid; gap: var(--space-sm); grid-template-columns: 1fr 1fr; grid-auto-rows: 46vw; }
@media (min-width: 720px) { .cgal__grid { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 220px; gap: var(--space-md); } }
.cgal__item { position: relative; overflow: hidden; border-radius: 3px; background: var(--ink-850); display: block; }
.cgal__item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out-expo); }
.cgal__item:hover img { transform: scale(1.05); }
.cgal__item::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px oklch(96.5% 0.007 78 / 0.08); border-radius: 3px; pointer-events: none; }
.cgal__tag { position: absolute; left: 12px; bottom: 12px; z-index: 2; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--paper); background: oklch(15.5% 0.006 70 / 0.55); backdrop-filter: blur(6px); padding: 5px 9px; border-radius: 2px; }
/* bento spans (desktop) */
@media (min-width: 720px) {
  .cgal__item--a { grid-column: span 2; grid-row: span 2; }
  .cgal__item--b { grid-column: span 2; }
  .cgal__item--e { grid-column: span 2; }
  .cgal__item--f { grid-column: span 2; }
}

/* ---- Capability emblems (thumbnail on each spec row) ---- */
.spec__thumb { width: 96px; height: 96px; flex: none; border-radius: 4px; overflow: hidden; background: transparent; border: none; justify-self: start; }
.spec__thumb img { width: 100%; height: 100%; object-fit: contain; }
/* stone line-icons are tuned for dark sections; darken them on light sections (e.g. services) for contrast */
.section:not(.section--ink) .spec__thumb img { filter: brightness(0.34) saturate(1.35); }
@media (min-width: 760px) {
  .spec--media { grid-template-columns: 96px 3rem minmax(0, 1.1fr) minmax(0, 1.4fr); }
  .spec--media .spec__thumb { justify-self: start; }
}
@media (max-width: 759px) {
  .spec--media .spec__thumb { margin-bottom: var(--space-2xs); }
}

/* ---- Industry tiles (image atop each cell) ---- */
.ind--media { padding: 0; justify-content: flex-start; }
.ind--media .ind__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--ink-850); }
.ind--media .ind__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out-expo); }
.ind--media:hover .ind__media img { transform: scale(1.04); }
.ind--media .ind__body { padding: var(--space-lg); }
.ind--media .ind__no { display: block; margin-bottom: var(--space-2xs); }
@media (prefers-reduced-motion: reduce) {
  .sec-media:hover img, .cgal__item:hover img, .ind--media:hover .ind__media img { transform: none; }
}

/* ---- Cafe case study ---- */
.case__features { margin-top: var(--space-2xl); display: grid; gap: var(--space-lg); grid-template-columns: 1fr; }
@media (min-width: 800px) { .case__features { grid-template-columns: 1fr 1fr; } }
.case__feature { position: relative; border-radius: 4px; overflow: hidden; aspect-ratio: 16 / 10; box-shadow: var(--shadow-lg); background: var(--ink-850); }
.case__feature img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out-expo); }
.case__feature:hover img { transform: scale(1.03); }
.case__cap { position: absolute; left: 12px; bottom: 12px; z-index: 2; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--paper); background: oklch(15.5% 0.006 70 / 0.62); backdrop-filter: blur(6px); padding: 6px 11px; border-radius: 2px; }

.case__subhead { font-family: var(--font-mono); font-size: var(--text-sm); letter-spacing: 0.06em; color: var(--muted); text-transform: uppercase; }
.case__grid { margin-top: var(--space-md); display: grid; gap: var(--space-md); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 620px) { .case__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .case__grid { grid-template-columns: repeat(4, 1fr); } }
.case__tile { position: relative; border-radius: 3px; overflow: hidden; aspect-ratio: 4 / 5; background: var(--paper-3); }
.case__tile img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out-expo); }
.case__tile:hover img { transform: scale(1.05); }
.case__tile::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px oklch(15.5% 0.01 70 / 0.07); border-radius: 3px; pointer-events: none; }

.case__dirs { margin-top: var(--space-2xl); }
.case__dirs-grid { margin-top: var(--space-md); display: grid; gap: var(--space-md); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 760px) { .case__dirs-grid { grid-template-columns: repeat(4, 1fr); } }
.case__dir { border-radius: 3px; overflow: hidden; aspect-ratio: 16 / 10; background: var(--paper-3); box-shadow: var(--shadow-md); }
.case__dir img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out-expo); }
.case__dir:hover img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) { .case__feature:hover img, .case__tile:hover img, .case__dir:hover img { transform: none; } }

/* =============================================================
   INNER-PAGE BACKDROPS — partial atmospheric overlays
   D (dark stone / contour, right-edge) on dark areas;
   H (edgeless faint corner) on beige sections.
   Section rules scoped to .inner so the home page stays untouched.
   Everything masked + partial; text always sits on flat colour.
   ============================================================= */

/* D — page hero (inner pages only; .page-hero is not used on home) */
.page-hero { overflow: hidden; }
.page-hero__slash { display: none; }
.page-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url('../bg/bg-stone-web.jpg') center right / cover;
  filter: brightness(0.5) saturate(1.05);
  -webkit-mask-image: linear-gradient(90deg, transparent 26%, #000 92%);
  mask-image: linear-gradient(90deg, transparent 26%, #000 92%);
}
.page-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(90deg, var(--ink-900) 40%, oklch(15.5% 0.006 70 / 0.72) 68%, oklch(15.5% 0.006 70 / 0.34) 100%);
}
.page-hero > * { position: relative; z-index: 1; }

/* D — dark mid sections on inner pages (contour plate for variety) */
.inner .section--ink { overflow: hidden; }
.inner .section--ink::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url('../bg/bg-contour-web.jpg') center right / cover;
  filter: brightness(0.7);
  -webkit-mask-image: linear-gradient(90deg, transparent 32%, #000 96%);
  mask-image: linear-gradient(90deg, transparent 32%, #000 96%);
}
.inner .section--ink::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(90deg, var(--ink-900) 42%, oklch(15.5% 0.006 70 / 0.66) 72%, oklch(15.5% 0.006 70 / 0.30) 100%);
}
.inner .section--ink > .shell { position: relative; z-index: 1; }

/* H — beige content sections on inner pages (edgeless faint corner) */
.inner .section:not(.section--ink):not(.cta-band) { overflow: hidden; }
.inner .section:not(.section--ink):not(.cta-band)::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url('../bg/bg-stone-web.jpg') bottom right / cover;
  opacity: 0.3;
  -webkit-mask-image: radial-gradient(135% 135% at 100% 100%, #000 0%, rgba(0,0,0,0.4) 40%, transparent 72%);
  mask-image: radial-gradient(135% 135% at 100% 100%, #000 0%, rgba(0,0,0,0.4) 40%, transparent 72%);
}
.inner .section:not(.section--ink):not(.cta-band) > .shell { position: relative; z-index: 1; }

/* =============================================================
   HOME dark-section atmosphere — warm gold-on-near-black plates
   (Higgsfield "path of light" family). mix-blend-mode:screen drops
   the black entirely so only the gold light adds over the ink; a
   corner-anchored radial mask keeps it subtle and clear of text.
   Per-section plate + corner are set inline via --plate / --plate-pos
   / --plate-anchor so this stays one generic rule.
   ============================================================= */
.section--ink[data-plate] { position: relative; overflow: hidden; }
.section--ink[data-plate]::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: var(--plate);
  background-repeat: no-repeat;
  background-size: 44% auto;
  background-position: var(--plate-pos, right bottom);
  mix-blend-mode: screen;
  opacity: 0.32;
  -webkit-mask-image: radial-gradient(78% 78% at var(--plate-anchor, 100% 100%), #000 0%, rgba(0,0,0,0.32) 30%, transparent 58%);
  mask-image: radial-gradient(78% 78% at var(--plate-anchor, 100% 100%), #000 0%, rgba(0,0,0,0.32) 30%, transparent 58%);
}
.section--ink[data-plate] > .shell { position: relative; z-index: 1; }
@media (max-width: 640px) { .section--ink[data-plate]::after { background-size: 78% auto; opacity: 0.26; } }

/* Atmospheric backdrops — DARK sections. A distinct gold-on-black image per section
   (set inline via --bg-img), screen-blended so the black melts into the ink, masked to
   the top-right and kept clear of the left-side text. */
.section--ink[data-bg] { position: relative; overflow: hidden; }
.section--ink[data-bg]::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: var(--bg-img) var(--bg-pos, top right) / var(--bg-size, 72% auto) no-repeat;
  mix-blend-mode: screen;
  opacity: var(--bg-op, 0.45);
  -webkit-mask-image: radial-gradient(125% 110% at var(--bg-anchor, 100% 0%), #000 0%, rgba(0,0,0,0.5) 44%, transparent 72%);
  mask-image: radial-gradient(125% 110% at var(--bg-anchor, 100% 0%), #000 0%, rgba(0,0,0,0.5) 44%, transparent 72%);
}
.section--ink[data-bg] > .shell { position: relative; z-index: 1; }
.ops[data-bg]::before { display: none; } /* drop the grid when a backdrop is present */
@media (max-width: 760px) { .section--ink[data-bg]::after { background-size: 135% auto; opacity: 0.3; } }

/* Atmospheric backdrops — LIGHT sections. A soft warm light-glow in one corner, drawn as
   a pure radial gradient (no image — image textures leave a visible seam / tonal block on
   flat beige). Corner set inline via --bg-anchor; hue can be nudged via --bg-tint. */
.section[data-bg-light] { position: relative; }
.section[data-bg-light]::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(72% 82% at var(--bg-anchor, 100% 0%),
              oklch(87% 0.05 var(--bg-tint, 76) / 0.30) 0%,
              oklch(90% 0.03 var(--bg-tint, 78) / 0.10) 40%,
              transparent 70%);
}
.section[data-bg-light] > .shell { position: relative; z-index: 1; }

/* =============================================================
   ENGINEERING / COMPLIANCE / APPS section
   ============================================================= */
.eng-standards { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-md); }
.std { font-family: var(--font-mono); font-size: var(--text-sm); letter-spacing: 0.03em; padding: 9px 15px; border: 1px solid var(--hairline); border-radius: 2px; color: var(--fg); background: var(--paper); display: inline-flex; align-items: center; gap: 9px; font-weight: 500; }
.std::before { content: ""; width: 7px; height: 7px; background: var(--stone); transform: skewX(-20deg); flex: none; }
.section--ink .std { border-color: var(--ink-700); color: var(--paper); background: transparent; }
.eng-note { color: var(--muted); font-size: var(--text-sm); margin-top: var(--space-md); max-width: 62ch; }

.pillars { display: grid; gap: var(--space-xl); grid-template-columns: 1fr; margin-top: var(--space-3xl); }
@media (min-width: 680px) { .pillars { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .pillars { grid-template-columns: repeat(4, 1fr); gap: var(--space-lg); } }
.pillar h3 { margin-top: var(--space-md); }
.pillar p { color: var(--muted); margin-top: var(--space-2xs); font-size: var(--text-sm); }

.stack-groups { margin-top: var(--space-2xl); border-top: 1px solid var(--hairline); }
.stack-group { display: grid; gap: var(--space-2xs) var(--space-lg); grid-template-columns: 1fr; padding-block: var(--space-md); border-bottom: 1px solid var(--hairline); }
@media (min-width: 760px) { .stack-group { grid-template-columns: 13rem 1fr; align-items: baseline; } }
.stack-group__label { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--stone-deep); text-transform: uppercase; letter-spacing: 0.08em; }
.stack-group__tags { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }

/* logo wall */
.logo-wall { margin-top: var(--space-3xl); }
.logo-wall__grid { margin-top: var(--space-lg); display: grid; gap: var(--space-lg) var(--space-md); grid-template-columns: repeat(3, 1fr); align-items: center; }
@media (min-width: 540px) { .logo-wall__grid { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 920px) { .logo-wall__grid { grid-template-columns: repeat(9, 1fr); } }
.logo-wall__item { display: grid; place-items: center; padding: var(--space-2xs); }
.logo-wall__item img { width: auto; height: 30px; max-width: 104px; opacity: 0.5; transition: opacity var(--dur-mid) var(--ease-out-expo), transform var(--dur-mid) var(--ease-out-expo); }
.logo-wall__item:hover img { opacity: 0.95; transform: scale(1.08); }
@media (prefers-reduced-motion: reduce) { .logo-wall__item:hover img { transform: none; } }