/* Griffith Consulting Group · prototype stylesheet
   Sections: tokens, base, layout, components (button, switch, rail...),
   page sections, isometric art, motion preferences. */

/* ---------------------------------------------------------------- tokens */
@property --e1 { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
@property --e2 { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
@property --e3 { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
@property --e4 { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
@property --depth { syntax: '<length>'; inherits: false; initial-value: 0px; }

:root {
  /* Logo palette (round 5): charcoal, olive, bone, white, ochre accent.
     The round-4 names stay so the component files keep working:
     ocean is now a warm charcoal gray, forest and moss are olives, bark and sand are ochres. */
  --ocean: #4a4741;
  --forest: #6B7339;
  --bark: #8C6A2A;
  --moss: #9AA35F;
  --sand: #c8aa6e;
  --ochre: #B8862B;

  --f-body: 'Google Sans Flex', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --f-mono: var(--f-body);
  --f-display: var(--f-body);
  --f-jp: 'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic', sans-serif;

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --wrap: 1180px;
  --radius: 10px;
}

html, html[data-theme="light"] {
  color-scheme: light;
  --bg: #ffffff;
  --bg-2: #f7f6f3;
  --bg-3: #efede8;
  --ink: #2E2C29;
  --muted: #5f5b54;
  --line: rgb(46 44 41 / .12);
  --line-2: rgb(46 44 41 / .22);
  --accent: var(--forest);
  --accent-ink: #ffffff;
  --accent-side: #4c5228;
  --alt: #2E2C29;
  --alt-ink: #ffffff;
  --alt-side: #161513;
  --shadow: 0 1px 0 rgb(46 44 41 / .04), 0 12px 32px -18px rgb(46 44 41 / .25);

  /* isometric materials */
  --c-ocean: #4a4741;
  --c-forest: #6B7339;
  --c-bark: #8C6A2A;
  --c-moss: #9AA35F;
  --c-sand: #c8aa6e;
  --c-paper: #E9E2D3;
  --c-ink: #2E2C29;
  --slab-t: #f7f6f3;
  --slab-l: #ebe8e1;
  --slab-r: #dedad1;
  --slab-in: #fcfbf9;
  --hole: #2E2C29;
  --glass: #dcd8cf;
  --screen: #2E2C29;
  --board: #E9E2D3;
  --iso-line: rgb(46 44 41 / .3);
  --iso-text: #2E2C29;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --ocean: #b9b4aa;
  --forest: #9AA35F;
  --bark: #c9a04f;
  --moss: #b4bb7f;
  --sand: #d9c39a;
  --bg: #1d1c1a;
  --bg-2: #252321;
  --bg-3: #2E2C29;
  --ink: #f3efe6;
  --muted: #b3ada2;
  --line: rgb(243 239 230 / .09);
  --line-2: rgb(243 239 230 / .2);
  --accent: var(--forest);
  --accent-ink: #1d1c1a;
  --accent-side: #6B7339;
  --alt: #E9E2D3;
  --alt-ink: #2E2C29;
  --alt-side: #b9b09c;
  --shadow: 0 1px 0 rgb(0 0 0 / .3), 0 16px 40px -20px rgb(0 0 0 / .8);

  --c-ocean: #6a665e;
  --c-paper: #d9d2c2;
  --c-ink: #2E2C29;
  --slab-t: #262421;
  --slab-l: #201f1c;
  --slab-r: #1a1917;
  --slab-in: #2c2a27;
  --hole: #0d0c0b;
  --glass: #8a857b;
  --screen: #121110;
  --board: #d9cdb3;
  --iso-line: rgb(0 0 0 / .6);
  --iso-text: #2E2C29;
}

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0;
  font: 400 1.1875rem/1.6 var(--f-body);
  color: var(--ink);
  background-color: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 700; line-height: 1.12; margin: 0; letter-spacing: -0.005em; }
p { margin: 0; }
a { color: inherit; }
img, svg { display: block; }
button { font: inherit; color: inherit; }
::selection { background: color-mix(in oklab, var(--moss) 40%, transparent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.mono { font-family: var(--f-mono); }
.wrap { width: min(100% - 40px, var(--wrap)); margin-inline: auto; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 100; padding: 10px 14px; background: var(--ink); color: var(--bg); border-radius: 6px; transition: top .2s; }
.skip:focus { top: 12px; }

.eyebrow {
  display: inline-flex; align-items: center; gap: .6em;
  font: 500 .8rem/1 var(--f-mono); letter-spacing: .04em; text-transform: lowercase;
  color: var(--accent);
  padding: .45em .7em; border: 1px dashed color-mix(in oklab, var(--accent) 45%, transparent); border-radius: 4px;
  background: color-mix(in oklab, var(--accent) 6%, var(--bg));
}
.blink { width: 7px; height: 7px; border-radius: 50%; background: var(--moss); animation: blink 1.4s steps(2, start) infinite; }
@keyframes blink { to { visibility: hidden; } }

/* ---------------------------------------------------------------- progress + top bar */
.progress { position: fixed; inset: 0 0 auto; height: 3px; z-index: 60; }
.progress span {
  display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(var(--p, 0));
  background: var(--forest);
}

.topbar {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in oklab, var(--bg) 82%, transparent);
  backdrop-filter: blur(12px) saturate(1.2);
  border-bottom: 1px solid var(--line);
}
.topbar-inner { display: flex; align-items: center; gap: 24px; height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 600; }
.brand .logo-mark { height: 28px; width: auto; transition: transform .5s var(--ease-spring); }
.brand:hover .logo-mark { transform: translateY(-2px); }
/* the logo and lockup keep the logo colors; dark mode lightens the ink */
.gcg .ink { fill: var(--ink); }
.gcg .olive { fill: var(--forest); }
.brand-name { font-family: var(--f-display); letter-spacing: -0.01em; white-space: nowrap; }
.brand-name span { color: var(--muted); font-weight: 400; }
.nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav > a, .nav .nav-top {
  position: relative; padding: 8px 12px; border-radius: 6px; text-decoration: none; font-size: .95rem; color: var(--muted); white-space: nowrap;
  transition: color .2s;
}
.nav > a::after, .nav .nav-top::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px; border-radius: 2px;
  background: var(--accent); transform: scaleX(0); transform-origin: right; transition: transform .35s var(--ease-out);
}
.nav > a:hover, .nav > a.is-active, .nav .nav-top:hover, .nav .nav-top.is-active { color: var(--ink); }
.nav > a:hover::after, .nav > a.is-active::after, .nav .nav-top:hover::after, .nav .nav-top.is-active::after { transform: scaleX(1); transform-origin: left; }

/* Services dropdown (js/site.js opens it on hover, focus or a click on the arrow).
   Two columns: the four Digital Infrastructure & Engineering pages, then Data Engineering and its four stages. */
.nav-dd { position: relative; display: flex; align-items: center; }
.nav .nav-top { padding-right: 6px; }
.nav .nav-top::after { right: 6px; }
.nav-dd-btn {
  display: grid; place-items: center; width: 22px; height: 30px; margin-left: -2px; padding: 0;
  border: 0; border-radius: 5px; background: none; color: var(--muted); cursor: pointer;
}
.nav-dd-btn svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--ease-out); }
.nav-dd-btn:hover, .nav-dd.is-open .nav-dd-btn { color: var(--ink); }
.nav-dd-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.nav-dd.is-open .nav-dd-btn svg { transform: rotate(180deg); }
/* One column per service bin in § 04. tools/nav.mjs writes the links into every page. */
.nav-dd-menu {
  /* centered under the Services button, so the 720px menu stays on screen from 961px up */
  position: absolute; top: calc(100% + 12px); left: 50%; z-index: 60; width: 720px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 26px; padding: 18px 22px 14px;
  background: var(--bg); border: 1px solid var(--line-2); border-radius: 10px;
  box-shadow: 0 22px 44px -24px rgb(46 44 41 / .45);
  opacity: 0; visibility: hidden; transform: translate(-50%, -6px);
  transition: opacity .18s ease, transform .22s var(--ease-out), visibility 0s linear .22s;
}
.nav-dd-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.nav-dd.is-open .nav-dd-menu { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .18s ease, transform .22s var(--ease-out), visibility 0s; }
.nav-dd-col { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.nav-dd-h { min-height: 2.6em; margin: 0 0 6px; font-size: .66rem; line-height: 1.3; letter-spacing: .07em; text-transform: uppercase; color: var(--forest); }
.nav-dd-menu a { display: block; margin-inline: -10px; padding: 7px 10px; border-radius: 6px; font-size: .95rem; line-height: 1.25; color: var(--ink); text-decoration: none; }
.nav-dd-menu a:hover { background: color-mix(in oklab, var(--forest) 11%, transparent); }
.nav-dd-menu a:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.nav-dd-menu a[aria-current="page"] { color: var(--forest); font-weight: 600; }
.nav-dd-menu a.nav-dd-sub { padding-left: 24px; font-size: .9rem; color: var(--muted); }
.nav-dd-menu a.nav-dd-sub:hover { color: var(--ink); }
.nav-dd-menu a.nav-dd-all { grid-column: 1 / -1; margin: 10px 0 0; padding: 12px 0 2px; border-top: 1px solid var(--line); border-radius: 0; font-size: .76rem; color: var(--forest); }
.nav-dd-menu a.nav-dd-all:hover { background: none; text-decoration: underline; text-underline-offset: 3px; }
.topbar-actions { display: flex; align-items: center; gap: 12px; }

.theme-toggle {
  width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid var(--line-2); background: var(--bg); cursor: pointer;
  transition: transform .4s var(--ease-spring), border-color .2s;
}
.theme-toggle:hover { transform: rotate(-20deg) scale(1.06); border-color: var(--accent); }
.theme-toggle svg { width: 20px; height: 20px; fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; overflow: visible; }
.theme-toggle .sun-core { fill: var(--sand); stroke: none; transition: r .4s var(--ease-spring), opacity .3s; }
.theme-toggle .sun-rays { transform-origin: 12px 12px; transition: transform .5s var(--ease-out), opacity .3s; }
.theme-toggle .moon { fill: var(--sand); stroke: none; opacity: 0; transform-origin: 12px 12px; transform: rotate(-60deg) scale(.4); transition: transform .5s var(--ease-spring), opacity .3s; }
html[data-theme="dark"] .theme-toggle .sun-core { r: 0; opacity: 0; }
html[data-theme="dark"] .theme-toggle .sun-rays { transform: rotate(90deg) scale(.4); opacity: 0; }
html[data-theme="dark"] .theme-toggle .moon { opacity: 1; transform: none; }

/* view-transition circle for the theme change */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { z-index: 9999; }

/* ---------------------------------------------------------------- 3D button
   Hover sequence: the four edges draw clockwise (0-320ms), the block extrudes
   (320-480ms), it hops and fuses (480-900ms), and the fill pops in with sparks. */
.btn3d {
  --a: var(--accent);
  --a-ink: var(--accent-ink);
  --a-side: var(--accent-side);
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  padding: .95em 1.4em;
  border: 0; border-radius: 3px;
  font: 600 1rem/1 var(--f-body); letter-spacing: -0.005em;
  color: var(--a);
  background-color: color-mix(in oklab, var(--a) 11%, var(--bg));
  text-decoration: none; white-space: nowrap; cursor: pointer;
  box-shadow:
    calc(var(--depth) * .25) calc(var(--depth) * .25) 0 var(--a-side),
    calc(var(--depth) * .5) calc(var(--depth) * .5) 0 var(--a-side),
    calc(var(--depth) * .75) calc(var(--depth) * .75) 0 var(--a-side),
    var(--depth) var(--depth) 0 var(--a-side);
  translate: calc(var(--depth) * -.5) calc(var(--depth) * -.5);
  transition: --depth .16s ease, background-color .14s ease, color .14s ease;
}
.btn3d > span { position: relative; z-index: 1; }
.btn3d::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background:
    linear-gradient(var(--a), var(--a)) left top / var(--e1) 2px no-repeat,
    linear-gradient(var(--a), var(--a)) right top / 2px var(--e2) no-repeat,
    linear-gradient(var(--a), var(--a)) right bottom / var(--e3) 2px no-repeat,
    linear-gradient(var(--a), var(--a)) left bottom / 2px var(--e4) no-repeat;
  transition: --e1 .12s ease, --e2 .12s ease, --e3 .12s ease, --e4 .12s ease;
}
.btn3d::after {
  content: ""; position: absolute; inset: -2px; pointer-events: none; opacity: 0;
  background:
    radial-gradient(circle, var(--moss) 0 2.5px, transparent 3px) left top / 8px 8px no-repeat,
    radial-gradient(circle, var(--sand) 0 2.5px, transparent 3px) center top / 8px 8px no-repeat,
    radial-gradient(circle, var(--forest) 0 2.5px, transparent 3px) right top / 8px 8px no-repeat,
    radial-gradient(circle, var(--sand) 0 2.5px, transparent 3px) right bottom / 8px 8px no-repeat,
    radial-gradient(circle, var(--moss) 0 2.5px, transparent 3px) center bottom / 8px 8px no-repeat,
    radial-gradient(circle, var(--ocean) 0 2.5px, transparent 3px) left bottom / 8px 8px no-repeat;
}
.btn3d--alt { --a: var(--alt); --a-ink: var(--alt-ink); --a-side: var(--alt-side); }
.btn3d--sm { padding: .7em 1.05em; font-size: .9rem; }

.btn3d:focus-visible { outline: none; }
.btn3d:focus-visible,
.btn3d.is-built {
  --depth: 6px;
  color: var(--a-ink);
  background-color: var(--a);
  animation: btn-fuse .44s .48s cubic-bezier(.3, .7, .4, 1) both;
  transition: --depth .16s var(--ease-out) .32s, background-color .1s ease .78s, color .1s ease .78s;
}
.btn3d:focus-visible::before,
.btn3d.is-built::before {
  --e1: 100%; --e2: 100%; --e3: 100%; --e4: 100%;
  transition: --e1 .09s linear 0s, --e2 .07s linear .09s, --e3 .09s linear .16s, --e4 .07s linear .25s;
}
.btn3d:focus-visible::after,
.btn3d.is-built::after { animation: btn-spark .5s .8s ease-out forwards; }
@media (hover: hover) {
  .btn3d:hover {
    --depth: 6px;
    color: var(--a-ink);
    background-color: var(--a);
    animation: btn-fuse .44s .48s cubic-bezier(.3, .7, .4, 1) both;
    transition: --depth .16s var(--ease-out) .32s, background-color .1s ease .78s, color .1s ease .78s;
  }
  .btn3d:hover::before {
    --e1: 100%; --e2: 100%; --e3: 100%; --e4: 100%;
    transition: --e1 .09s linear 0s, --e2 .07s linear .09s, --e3 .09s linear .16s, --e4 .07s linear .25s;
  }
  .btn3d:hover::after { animation: btn-spark .5s .8s ease-out forwards; }
}
.btn3d:active { --depth: 2px !important; transition: --depth .06s !important; }

@keyframes btn-fuse {
  0%   { transform: none; }
  28%  { transform: translateY(-6px) scale(.96, 1.05); }
  52%  { transform: translateY(0) scale(1.05, .92); }
  70%  { transform: translateY(-1px) scale(.99, 1.01); }
  84%  { transform: scale(1.07); }
  100% { transform: scale(1); }
}
@keyframes btn-spark {
  0%   { opacity: 1; inset: -2px; }
  100% { opacity: 0; inset: -16px -22px; }
}

/* plain text buttons */
.ghost {
  padding: 8px 12px; border: 1px solid var(--line-2); border-radius: 6px; background: var(--bg);
  font: 500 .85rem/1 var(--f-mono); cursor: pointer; transition: border-color .2s, transform .3s var(--ease-spring);
}
.ghost:hover { border-color: var(--accent); transform: translateY(-2px); }
.ghost:disabled { opacity: .4; cursor: default; transform: none; }

/* ---------------------------------------------------------------- dot rail, HUD, cursor */
.rail {
  position: fixed; right: 22px; top: 50%; translate: 0 -50%; z-index: 40;
  display: flex; flex-direction: column; gap: 14px;
}
.rail a {
  position: relative; display: block; width: 10px; height: 10px; border-radius: 50%;
  border: 1.5px solid var(--muted); transition: transform .3s var(--ease-spring), background-color .2s, border-color .2s;
}
.rail a::after {
  content: attr(data-label); position: absolute; right: 22px; top: 50%; translate: 6px -50%;
  font: 500 .72rem/1 var(--f-mono); white-space: nowrap; color: var(--ink);
  background: var(--bg); border: 1px solid var(--line-2); padding: 5px 7px; border-radius: 4px;
  opacity: 0; pointer-events: none; transition: opacity .2s, translate .3s var(--ease-out);
}
.rail a:hover { transform: scale(1.4); border-color: var(--accent); }
.rail a:hover::after, .rail a:focus-visible::after { opacity: 1; translate: 0 -50%; }
.rail a.is-active { background: var(--accent); border-color: var(--accent); transform: scale(1.25); }

/* stacked so it fits the left gutter beside the 1180px column */
.hud {
  position: fixed; left: 10px; bottom: 16px; z-index: 40;
  display: grid; grid-template-columns: auto auto; align-items: center; gap: 4px 8px;
  font-size: .66rem; color: var(--muted);
  padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px;
  background: color-mix(in oklab, var(--bg) 85%, transparent); backdrop-filter: blur(8px);
}
.hud [data-hud-xy] { grid-column: 1 / -1; }
.hud-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--forest); box-shadow: 0 0 0 3px color-mix(in oklab, var(--forest) 25%, transparent); }

.cursor { position: fixed; left: 0; top: 0; z-index: 70; pointer-events: none; display: none; }
.cursor i {
  position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%;
  background: var(--moss); transition: width .25s var(--ease-spring), height .25s var(--ease-spring), margin .25s var(--ease-spring), background-color .2s, border-color .2s;
}
.cursor.is-over i { width: 34px; height: 34px; margin: -17px 0 0 -17px; background: transparent; border: 1.5px solid var(--moss); }
@media (hover: hover) and (pointer: fine) { .js .cursor { display: block; } }

/* ---------------------------------------------------------------- hero */
.hero { padding: 56px 0 40px; position: relative; }
/* copy on the left, art on the right; phones stack copy over art */
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); column-gap: 40px; align-items: center; }
.hero-side { min-width: 0; }
.hero h1 { font-size: clamp(2.3rem, 4.6vw, 3.9rem); font-weight: 600; margin: 0 0 20px; }
.hero h1 em { font-style: normal; color: var(--accent); white-space: nowrap; }
.lede { font-size: 1.15rem; color: var(--muted); max-width: 54ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 16px; margin: 30px 0 30px; }

.art-frame { position: relative; padding: 8px; }
.frame-corner { position: absolute; width: 18px; height: 18px; border: 0 solid var(--line-2); }
.frame-corner.tl { left: 0; top: 0; border-width: 1.5px 0 0 1.5px; }
.frame-corner.tr { right: 0; top: 0; border-width: 1.5px 1.5px 0 0; }
.frame-corner.bl { left: 0; bottom: 0; border-width: 0 0 1.5px 1.5px; }
.frame-corner.br { right: 0; bottom: 0; border-width: 0 1.5px 1.5px 0; }
.fig-note { font-size: .75rem; color: var(--muted); }

/* hero art: the office animation (tools/anim.mjs, scene hero), framed like the service pages' art */
.hero-art { margin: 0 0 0 auto; width: 100%; max-width: 640px; }
.hero-art .iso { display: block; width: 100%; height: auto; }

/* principles square (§ 02, under the heading): the three principles on white, one per row, kanji large.
   Sizes in cqi follow the card's inner width, so the rows keep their shape from phone to desktop. */
.pr-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 540px); gap: 64px; align-items: center; margin-bottom: 64px; }
.pr-top .section-head { margin-bottom: 0; }
.principles .kata-card { margin: 0; max-width: 540px; }
.kata-card {
  position: relative; margin: 0 0 0 auto; width: 100%; max-width: 560px; aspect-ratio: 1; container-type: inline-size;
  display: flex; flex-direction: column;
  padding: clamp(20px, 3.4vw, 40px); background: var(--bg); border: 1px solid var(--line-2); border-radius: 4px;
}
.kata-card figcaption { margin: 0; flex: 1; display: flex; }
.kata-row { flex: 1; list-style: none; margin: 0; padding: 0; display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); }
.kata {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: center; align-items: center;
  column-gap: 14px; row-gap: 2.4cqi; min-width: 0;
}
.kata + .kata { border-top: 1px solid var(--line-2); }
.kata-jp { grid-column: 1 / -1; font: 500 17cqi/1 var(--f-jp); color: var(--ink); white-space: nowrap; transition: color .2s ease; }
.kata-word { display: block; height: clamp(11px, 3cqi, 15px); width: auto; max-width: 100%; color: var(--forest); }
.kata-line { font-size: clamp(.78rem, 3.2cqi, .95rem); line-height: 1.3; color: var(--muted); }
/* history line per kanji: read aloud in the static card, shown when its kanji comes up (js/kata.js) */
.kata-note { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* the card in motion (js/kata.js): after a few seconds the rows give way and the kanji take turns */
.kc-ready:not(.kc-open) .kata { cursor: pointer; }
.kc-ready:not(.kc-open) .kata:hover .kata-jp { color: var(--forest); }
.kata-card figcaption { transition: opacity .35s ease; }
.kc-open figcaption { opacity: 0; pointer-events: none; }
.kc-open .kata-jp { visibility: hidden; }
.kc-layer { position: absolute; inset: 0; visibility: hidden; pointer-events: none; }
.kc-open .kc-layer { visibility: visible; }
.kc-jp {
  position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none; transform-origin: 0 0;
  font: 500 40px/1 var(--f-jp); color: var(--ink); white-space: nowrap;
  transition: translate .8s var(--ease-out), scale .8s var(--ease-out), rotate .8s var(--ease-out);
}
.kc-rule { position: absolute; height: 1px; background: var(--line-2); opacity: 0; transition: opacity .4s ease; }
.kc-turn .kc-rule { opacity: 1; }
.kc-bar { position: absolute; left: 0; top: -1px; width: 100%; height: 3px; background: var(--accent); transform-origin: left; scale: 0 1; }
.kc-mini {
  position: absolute; display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
  margin: 0; padding: 0; border: 0; background: none; cursor: pointer;
  opacity: 0; pointer-events: none; transition: opacity .35s ease, translate .8s var(--ease-out);
}
.kc-mini.is-on { opacity: 1; pointer-events: auto; }
.kc-ro { display: block; height: 12px; width: auto; color: var(--forest); transition: color .2s ease; }
.kc-mini:hover .kc-ro { color: var(--ink); }
.kc-info { position: absolute; opacity: 0; translate: 0 8px; transition: opacity .25s ease, translate .25s ease; }
.kc-info.is-on { opacity: 1; translate: 0 0; transition: opacity .45s ease .35s, translate .5s var(--ease-out) .35s; }
.kc-word { display: block; height: 18px; width: auto; margin-bottom: 12px; color: var(--forest); }
.kc-line { margin: 0 0 6px; font-size: 1.05rem; font-weight: 600; line-height: 1.3; color: var(--ink); }
.kc-note { margin: 0; max-width: 42ch; font-size: .86rem; line-height: 1.45; color: var(--muted); }
.kc-instant, .kc-instant * { transition: none !important; }

/* ---------------------------------------------------------------- sections */
.section { padding: 110px 0; position: relative; }
.section-head { max-width: 680px; margin-bottom: 52px; }
.section-head h2 { font-size: clamp(2rem, 3.6vw, 2.9rem); font-weight: 600; margin: 18px 0 14px; }
.section-sub { color: var(--muted); font-size: 1.08rem; }

/* glossary term */
.term[data-def], button.term {
  position: relative; display: inline; padding: 0; border: 0; background: none; cursor: help;
  font: inherit; color: inherit; border-bottom: 1.5px dotted var(--accent);
}
button.term::after {
  content: attr(data-def); position: absolute; left: 50%; bottom: calc(100% + 10px); z-index: 20;
  width: max-content; max-width: 260px; padding: 10px 12px; border-radius: 8px;
  font: 400 .8rem/1.45 var(--f-body); letter-spacing: 0; text-align: left; color: var(--bg); background: var(--ink);
  opacity: 0; translate: -50% 6px; pointer-events: none; transition: opacity .2s, translate .3s var(--ease-out);
}
button.term:hover::after, button.term:focus-visible::after { opacity: 1; translate: -50% 0; }


/* ---------------------------------------------------------------- services
   Three bins hold the service blocks, stacked as full-width shelves: Digital Infrastructure
   & Engineering, Marketing & Social Media Analysis, Data Engineering. Each shelf has its
   name and button in a left column and its blocks in one row on the right, so a shelf with
   two blocks gets two wide ones. Each block is a link with a 3D side.
   Pointing at one pops a thought bubble, "Go to the page". A click or tap makes
   js/site.js wipe the screen in the block color from that point and open the
   service page. */
.bin-hint { margin-top: 14px; font-size: .78rem; color: var(--muted); }
.bin-hint .hint-tap { display: none; }
@media (hover: none) {
  .bin-hint .hint-hover { display: none; }
  .bin-hint .hint-tap { display: inline; }
}
.bins { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
.bin {
  --b: var(--accent);
  position: relative; display: grid; grid-template-columns: 290px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 34px;
  padding: 30px 26px 26px; border-radius: 20px;
  border: 1.5px solid var(--line-2);
  background: var(--bg-2);
  box-shadow: var(--shadow);
}
.bin--mkt { --b: var(--ochre); }
.bin--data { --b: var(--alt); }
.bin-head { grid-column: 1; grid-row: 1; margin-bottom: 20px; }
.bin-head h3 { font-size: 1.4rem; font-weight: 600; margin-bottom: 6px; }
/* each bin keeps its color as a small diamond before its title, not as a line along the top */
.bin-head h3::before {
  content: ""; display: inline-block; width: 11px; height: 11px; margin: 0 12px 0 2px; vertical-align: .12em;
  border-radius: 2px; background: var(--b); transform: rotate(45deg);
}
.bin-head p { color: var(--muted); }
.bin-blocks { grid-column: 2; grid-row: 1 / 3; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 16px; }
.bin-cta { grid-column: 1; grid-row: 2; margin-top: 24px; align-self: end; }

.sblock {
  --c: var(--accent);
  --side: color-mix(in oklab, var(--c) 58%, black);
  --lift: 5px;
  position: relative; display: flex; flex-direction: column; gap: 4px;
  padding: 10px 14px 16px; border-radius: 6px;
  color: var(--ink); text-decoration: none; cursor: pointer;
  background: color-mix(in oklab, var(--c) 8%, var(--bg));
  border: 1.5px solid color-mix(in oklab, var(--c) 60%, transparent);
  box-shadow: 1px 1px 0 var(--side), 2px 2px 0 var(--side), 3px 3px 0 var(--side), 4px 4px 0 var(--side), var(--lift) var(--lift) 0 var(--side);
  translate: 0 0;
  transition: translate .3s var(--ease-spring), box-shadow .3s var(--ease-out), background-color .2s;
}
.sblock-art { display: block; margin: 0 -6px; }
.sblock-art .ico { display: block; width: auto; height: 116px; max-width: 100%; margin: 0 auto 4px; }
.sblock-name { font-weight: 600; font-size: 1.04rem; }
.sblock-line { color: var(--muted); font-size: .9rem; line-height: 1.45; }
.sblock:hover, .sblock:focus-visible {
  translate: -3px -3px;
  background: color-mix(in oklab, var(--c) 14%, var(--bg));
  box-shadow: 1px 1px 0 var(--side), 2px 2px 0 var(--side), 4px 4px 0 var(--side), 6px 6px 0 var(--side), 8px 8px 0 var(--side);
}
.sblock:focus-visible { outline: 2px solid var(--c); outline-offset: 4px; }
.sblock:active { translate: 3px 3px; box-shadow: 1px 1px 0 var(--side), 2px 2px 0 var(--side); transition-duration: .06s; }
/* the thought bubble: a rounded cloud above the block's top right corner with
   two small dots trailing down to the block. It springs in on hover or focus.
   It uses the block's darker side color so white text stays readable. */
.sblock-bubble {
  position: absolute; right: -10px; bottom: calc(100% - 14px); z-index: 3;
  padding: 8px 14px; border-radius: 999px; white-space: nowrap; pointer-events: none;
  font: 600 .84rem/1 var(--f-body); color: #ffffff; background: var(--side);
  box-shadow: 0 6px 18px -8px var(--side);
  opacity: 0; scale: .3; translate: 0 10px; transform-origin: 20% 120%;
  transition: opacity .18s ease, scale .45s var(--ease-spring), translate .45s var(--ease-spring);
}
.sblock-bubble b { display: inline-block; font-weight: 700; transition: translate .3s var(--ease-spring); }
.sblock-bubble::before, .sblock-bubble::after { content: ""; position: absolute; border-radius: 50%; background: var(--side); }
.sblock-bubble::before { width: 10px; height: 10px; left: 16px; bottom: -9px; }
.sblock-bubble::after { width: 6px; height: 6px; left: 9px; bottom: -17px; }
.sblock:hover .sblock-bubble, .sblock:focus-visible .sblock-bubble { opacity: 1; scale: 1; translate: 0 0; }
.sblock:hover .sblock-bubble b { translate: 3px 0; }
/* The band under the bins: one line drops from the last shelf into the three principles, then an arrow
   leads to the result for the client. It links to § 02. */
.bins-link {
  grid-column: 1 / -1; position: relative; margin-top: 40px;
  display: flex; flex-direction: column; align-items: stretch;
}
.bl-drop { position: absolute; top: -40px; left: calc(50% - 1px); height: 40px; width: 0; border-left: 2px dashed var(--line-2); }
.bl-in {
  padding: 18px 22px 20px; border: 1.5px solid var(--ink); border-radius: 10px; background: var(--bg);
}
.bl-kicker { margin: 0 0 12px; font-size: .7rem; letter-spacing: .07em; text-transform: uppercase; color: var(--forest); }
.bl-terms { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.bl-terms a {
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; align-items: baseline;
  height: 100%; padding: 10px 12px; border-radius: 6px; text-decoration: none; color: var(--ink);
  background: var(--bg-2); border: 1px solid var(--line); transition: border-color .2s, background-color .2s;
}
.bl-terms a:hover { border-color: var(--forest); background: color-mix(in oklab, var(--forest) 7%, var(--bg)); }
.bl-terms a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.bl-jp { grid-row: 1 / 3; align-self: center; font: 500 1.7rem/1 var(--f-jp); }
.bl-ro { font-weight: 600; font-size: .98rem; color: var(--forest); }
.bl-do { font-size: .86rem; line-height: 1.3; color: var(--muted); }
.bl-arrow { position: relative; align-self: center; width: 2px; height: 30px; background: var(--forest); }
.bl-arrow::after {
  content: ""; position: absolute; left: -5px; bottom: -2px; width: 0; height: 0;
  border-top: 9px solid var(--forest); border-left: 6px solid transparent; border-right: 6px solid transparent;
}
.bl-out {
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 28px; align-items: center;
  margin-top: 4px; padding: 18px 22px; border-radius: 10px; color: var(--accent-ink); background: var(--accent); box-shadow: 4px 4px 0 var(--accent-side);
}
.bl-out p { margin: 0; font-size: .95rem; line-height: 1.45; color: color-mix(in oklab, var(--accent-ink) 88%, transparent); }
.bl-out .bl-out-h { font-size: 1.25rem; font-weight: 700; color: var(--accent-ink); white-space: nowrap; }

/* full-screen wipe in the block color, grown from the pointer */
.fx-wipe { position: fixed; inset: 0; z-index: 200; pointer-events: none; background: var(--c); }

/* content plan pieces, used on services/content-brand.html */
.tagline { font: 600 1.35rem/1.2 var(--f-display); letter-spacing: -0.02em; margin: 6px 0 14px; }
.tagline::first-line { color: var(--ink); }
.you-we { display: grid; grid-template-columns: .8fr 1.2fr; gap: 12px; }
.you-we > div { border-radius: 10px; padding: 12px 14px; background: var(--bg); border: 1px solid var(--line); }
.you-we ul { margin: 6px 0 0; padding-left: 1.05em; font-size: .93rem; color: var(--muted); }
.you-we li + li { margin-top: 4px; }
.who { display: inline-block; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; padding: 3px 7px; border-radius: 4px; background: var(--bg-3); }
.col-we .who { background: var(--moss); color: #1b1320; }
.week { margin-top: 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); overflow: hidden; }
.week-head { display: flex; justify-content: space-between; gap: 10px; font-size: .7rem; color: var(--muted); padding: 8px 12px; border-bottom: 1px solid var(--line); background: var(--bg-2); }
.week-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.week-grid > div { min-height: 74px; padding: 8px 5px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.week-grid > div:last-child { border-right: 0; }
.week-grid b { font: 500 .7rem/1 var(--f-mono); color: var(--muted); }
.post {
  font: 500 .64rem/1.25 var(--f-mono); padding: 5px 4px; border-radius: 4px; text-align: center;
  color: #fff; background: var(--c); box-shadow: 2px 2px 0 color-mix(in oklab, var(--c) 60%, black);
}
@keyframes pop-in { from { scale: .2; opacity: 0; } }
.static .post { animation: none !important; }
.static *, .static *::before, .static *::after { transition: none !important; }
.fine { font-size: .88rem; color: var(--muted); margin-top: 14px; }

/* ---------------------------------------------------------------- data tables (services/data-engineering.html) */
.you-get { margin-top: 18px; padding: 12px 14px; border-left: 3px solid var(--moss); background: var(--bg-2); border-radius: 0 8px 8px 0; color: var(--ink) !important; font-size: .95rem; }
.you-get .mono { display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-bottom: 3px; }
@keyframes view-in { from { opacity: 0; translate: 0 10px; } }

.tbl-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; }
.tbl { width: 100%; border-collapse: collapse; font: 400 .8rem/1.3 var(--f-mono); }
.tbl caption { caption-side: bottom; text-align: left; padding: 8px 12px; font-size: .72rem; color: var(--muted); border-top: 1px solid var(--line); }
.tbl th { text-align: left; font-weight: 600; font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); background: var(--bg-2); }
.tbl th, .tbl td { padding: 7px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl td.num, .tbl th.num { text-align: right; }
.tbl tbody tr { animation: row-in .4s var(--ease-out) both; animation-delay: calc(var(--r, 0) * 30ms); }
@keyframes row-in { from { opacity: 0; translate: -8px 0; } }
.tbl .src { display: inline-block; padding: 2px 6px; border-radius: 4px; font-size: .68rem; background: var(--bg-3); }
.tbl tr.you td { background: color-mix(in oklab, var(--accent) 9%, transparent); font-weight: 600; }

.chart { border: 1px solid var(--line); border-radius: 12px; padding: 20px 20px 14px; background: var(--bg); }
.chart h4 { font-size: .95rem; font-weight: 600; margin-bottom: 16px; }
.bar-row { display: grid; grid-template-columns: 84px 1fr 108px; align-items: center; gap: 12px; margin-bottom: 12px; font: 500 .8rem/1 var(--f-mono); }
.bar-row .track { height: 24px; border-radius: 4px; background: var(--bg-3); overflow: hidden; }
.bar-row .fill { display: block; height: 100%; width: 0; border-radius: 4px; background: var(--c); box-shadow: inset -3px 0 0 color-mix(in oklab, var(--c) 70%, black); transition: width .9s var(--ease-out); transition-delay: calc(var(--i) * 90ms + 120ms); }
.bar-row .val { color: var(--muted); text-align: right; }

/* ---------------------------------------------------------------- work */
.cases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.case {
  --c: var(--ocean);
  position: relative; display: flex; flex-direction: column; padding: 28px; border-radius: 18px; background: var(--bg); border: 1px solid var(--line); box-shadow: var(--shadow);
  transition: translate .45s var(--ease-spring), box-shadow .3s;
}
.case:hover { translate: -4px -6px; box-shadow: 10px 12px 0 -2px color-mix(in oklab, var(--c) 30%, transparent), var(--shadow); }
.case-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: .75rem; color: var(--muted); }
.chip { font: 500 .72rem/1 var(--f-mono); padding: 6px 9px; border-radius: 999px; color: var(--ink); background: color-mix(in oklab, var(--c) 18%, transparent); }
.case h3 { font-size: 1.45rem; font-weight: 600; margin: 18px 0 6px; }
.case-meta { font-size: .78rem; color: var(--muted); }
/* who the work was done for: the firm Drake worked at, linked; it sits above the card-wide link so it opens on its own */
.case-credit { margin-top: 4px; font-size: .75rem; color: var(--muted); }
.case-credit a { position: relative; z-index: 1; color: var(--ink); text-decoration: underline; text-decoration-color: var(--c); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.case dl { margin: 20px 0 12px; display: grid; grid-template-columns: 1fr; gap: 4px; }
.case dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); padding-top: 3px; }
.case dd { margin: 0 0 10px; font-size: .97rem; color: var(--muted); }
.case dd b { font-weight: 700; color: var(--ink); }
/* three cards side by side are narrow, so labels sit above their text; a full-width card puts them beside it */
@media (min-width: 641px) and (max-width: 960px) { .case dl { grid-template-columns: 82px 1fr; gap: 12px 16px; } .case dd { margin-bottom: 0; } }
/* the whole card opens its case study (blog/*.html): the link's ::after covers the card */
.case-more { margin-top: auto; padding-top: 16px; border-top: 1px dashed var(--line-2); }
.case-link {
  font-weight: 600; color: var(--ink); text-decoration: underline; text-decoration-color: var(--c);
  text-decoration-thickness: 2px; text-underline-offset: 4px;
}
.case-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.case-link span { display: inline-block; transition: translate .3s var(--ease-spring); }
.case:hover .case-link span { translate: 4px 0; }
.case:hover .case-link { text-decoration-color: currentColor; }
.case-link:focus-visible { outline: none; }
.case:has(.case-link:focus-visible) { outline: 2px solid var(--accent); outline-offset: 4px; }

/* ---------------------------------------------------------------- faq */
.faq-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 40px; align-items: start; }
.faq-list { display: grid; gap: 12px; }
.faq details { border: 1px solid var(--line); border-radius: 12px; background: var(--bg); transition: border-color .2s, box-shadow .3s; }
.faq details[open] { border-color: color-mix(in oklab, var(--accent) 35%, var(--line)); box-shadow: var(--shadow); }
.faq summary { list-style: none; cursor: pointer; padding: 18px 54px 18px 20px; font-weight: 500; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 20px; top: 50%; width: 14px; height: 14px; margin-top: -7px;
  background: linear-gradient(var(--accent), var(--accent)) center / 100% 2px no-repeat, linear-gradient(var(--accent), var(--accent)) center / 2px 100% no-repeat;
  transition: transform .35s var(--ease-spring);
}
.faq details[open] summary::after { transform: rotate(135deg); }
.faq details p { padding: 0 20px 20px; color: var(--muted); }
.faq details[open] p { animation: view-in .35s var(--ease-out); }

/* ---------------------------------------------------------------- contact */
.contact-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 40px; align-items: start; }
.contact-grid .section-head { margin-bottom: 0; }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 28px; border-radius: 18px; border: 1px solid var(--line); background: var(--bg); box-shadow: var(--shadow); }
.field--wide { grid-column: 1 / -1; }
.field { display: grid; gap: 6px; }
.field > span, .chips-field legend { font: 500 .75rem/1 var(--f-mono); color: var(--muted); text-transform: lowercase; letter-spacing: .02em; }
.field input, .field textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--ink); padding: 12px 14px; border-radius: 8px;
  border: 1px solid var(--line-2); background: var(--bg-2); resize: vertical;
  transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--accent); background: var(--bg); box-shadow: 4px 4px 0 color-mix(in oklab, var(--accent) 25%, transparent); }
.field.is-bad input { border-color: var(--moss); }
.chips-field { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips-field legend { margin-bottom: 8px; padding: 0; }
.chips-field label { cursor: pointer; }
.chips-field input { position: absolute; opacity: 0; pointer-events: none; }
.chips-field span { display: inline-block; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line-2); font-size: .9rem; transition: background-color .2s, color .2s, border-color .2s, scale .3s var(--ease-spring); }
.chips-field label:hover span { border-color: var(--accent); }
.chips-field input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); scale: 1.04; }
.chips-field input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.form-foot { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 4px; }
.form-note { font-size: .78rem; color: var(--muted); }

/* ---------------------------------------------------------------- footer */
.footer { border-top: 1px solid var(--line); background: var(--bg-2); padding: 40px 0 70px; }
.footer-grid { display: grid; grid-template-columns: auto 1fr auto; gap: 18px 30px; align-items: center; }
.footer-line { color: var(--muted); font-size: .95rem; }
.footer-meta { grid-column: 1 / -1; font-size: .74rem; color: var(--muted); }
/* the service areas, written by tools/nav.mjs: one column per area, the locations index on the left */
.footer-areas { grid-column: 1 / -1; display: grid; grid-template-columns: 150px repeat(3, minmax(0, 1fr)); gap: 14px 30px; padding-top: 20px; border-top: 1px solid var(--line); }
.footer-areas .fa-h { font-size: .74rem; }
.footer-areas .fa-h a { color: var(--ink); }
.fa-r { font-size: .7rem; color: var(--muted); margin-bottom: 8px; }
.footer-areas ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .88rem; }
.footer-areas a { color: var(--muted); text-decoration: none; }
.footer-areas a:hover, .footer-areas a:focus-visible, .footer-areas a[aria-current] { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 960px) { .footer-areas { grid-template-columns: repeat(3, minmax(0, 1fr)); } .footer-areas .fa-h { grid-column: 1 / -1; } }
@media (max-width: 640px) { .footer-areas { grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------------------------------- isometric art */
.iso { overflow: visible; }
.iso polygon, .iso path, .iso ellipse { stroke: var(--iso-line); stroke-width: .8; stroke-linejoin: round; }
.iso .ocean-t   { fill: color-mix(in oklab, var(--c-ocean), white 28%); }
.iso .ocean-l   { fill: var(--c-ocean); }
.iso .ocean-r   { fill: color-mix(in oklab, var(--c-ocean), black 30%); }
.iso .forest-t    { fill: color-mix(in oklab, var(--c-forest), white 30%); }
.iso .forest-l    { fill: var(--c-forest); }
.iso .forest-r    { fill: color-mix(in oklab, var(--c-forest), black 30%); }
.iso .bark-t   { fill: color-mix(in oklab, var(--c-bark), white 28%); }
.iso .bark-l   { fill: var(--c-bark); }
.iso .bark-r   { fill: color-mix(in oklab, var(--c-bark), black 28%); }
.iso .moss-t  { fill: color-mix(in oklab, var(--c-moss), white 24%); }
.iso .moss-l  { fill: var(--c-moss); }
.iso .moss-r  { fill: color-mix(in oklab, var(--c-moss), black 26%); }
.iso .sand-t { fill: color-mix(in oklab, var(--c-sand), white 32%); }
.iso .sand-l { fill: var(--c-sand); }
.iso .sand-r { fill: color-mix(in oklab, var(--c-sand), var(--c-bark) 34%); }
.iso .paper-t  { fill: color-mix(in oklab, var(--c-paper), white 65%); }
.iso .paper-l  { fill: var(--c-paper); }
.iso .paper-r  { fill: color-mix(in oklab, var(--c-paper), var(--c-ink) 18%); }
.iso .ink-t    { fill: color-mix(in oklab, var(--c-ink), white 14%); }
.iso .ink-l    { fill: var(--c-ink); }
.iso .ink-r    { fill: color-mix(in oklab, var(--c-ink), black 35%); }
.iso .slab-t { fill: var(--slab-t); }
.iso .slab-l { fill: var(--slab-l); }
.iso .slab-r { fill: var(--slab-r); }
.iso .slab-inset { fill: var(--slab-in); stroke: color-mix(in oklab, var(--iso-line), transparent 40%); stroke-dasharray: 3 4; }
.iso .hole { fill: var(--hole); }
.iso .glass { fill: var(--glass); }
.iso .screen { fill: var(--screen); }
.iso .board { fill: var(--board); }
.iso .scan { fill: color-mix(in oklab, var(--moss) 35%, transparent); stroke: var(--moss); stroke-dasharray: 3 3; animation: scan 1.8s ease-in-out infinite alternate; }
.iso .belt { fill: #2f3a33; stroke: none; }
.iso .ring { fill: color-mix(in oklab, var(--forest) 22%, transparent); stroke: color-mix(in oklab, var(--forest) 60%, transparent); stroke-dasharray: 4 5; }
.iso .knob { fill: var(--c-sand); }

.iso polyline { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.iso .scribble { stroke: color-mix(in oklab, var(--c-ink), transparent 45%); stroke-width: 1.3; }
.iso .crack { stroke: color-mix(in oklab, var(--c-ink), transparent 35%); stroke-width: 1.4; transition: opacity .6s; }
.iso .mullion { stroke: color-mix(in oklab, white, transparent 25%); stroke-width: 2; }
.iso .tape { stroke: color-mix(in oklab, var(--c-sand), black 22%); stroke-width: 3; }
.iso .handle { stroke: var(--c-ink); stroke-width: 2; }
.iso .axis { stroke: var(--muted); stroke-width: 1.2; stroke-dasharray: 2 4; }
.iso .cart-rail { stroke: var(--c-ink); stroke-width: 1.6; opacity: .7; }
.iso .trend { stroke: var(--moss); stroke-width: 2; stroke-dasharray: 4 3; }
.iso .scrape-hi { animation: hi-blink 1.4s ease-in-out infinite alternate; }
@keyframes hi-blink { from { opacity: .45; } }
.iso .wire { stroke: var(--accent); stroke-width: 2; stroke-dasharray: 5 6; opacity: .9; }
.iso .wire--on { animation: dash 1s linear infinite reverse; }
@keyframes dash { to { stroke-dashoffset: 26; } }
.iso .flag { stroke-width: .8; }
/* Labels and the arrow inside the drawings (tools/iso.mjs note() and arc()), on every page */
.iso .note-box { fill: var(--bg); stroke: var(--line-2); stroke-width: .8; }
.iso .note-lead { stroke: var(--muted); stroke-width: .8; stroke-dasharray: 1.6 2.2; }
.iso .note-dot { fill: var(--moss); }
.iso .note-txt { font: 500 7.5px/1 var(--f-mono); fill: var(--bark); }
html[data-theme="dark"] .iso .note-txt { fill: var(--moss); }
.iso .note-arrow { fill: none; stroke: var(--ocean); stroke-width: 1.8; stroke-linecap: round; stroke-dasharray: 4 3; }
.iso .note-head { fill: var(--ocean); stroke: none; }
.iso-txt { font: 700 10px/1 var(--f-mono); fill: var(--iso-text); letter-spacing: .02em; }
.iso-txt--light { fill: #ffffff; }

/* vignette motion */
.iso .fstep { animation: step-in 2.4s ease-in-out infinite; animation-delay: calc(var(--i) * .25s); }
@keyframes step-in { 0%, 100% { opacity: .25; } 40%, 60% { opacity: 1; } }
.iso .pin, .iso .float, .iso .drop { transform-box: fill-box; transform-origin: center; }
.iso .pin { animation: hover-y 1.8s ease-in-out infinite alternate; }
.iso .float { animation: hover-y 2.2s ease-in-out infinite alternate; }
.iso .drop { animation: drop 3s var(--ease-spring) infinite; }
.iso .tagpop { transform-box: fill-box; transform-origin: center bottom; animation: tagpop 3.2s var(--ease-spring) infinite; animation-delay: calc(var(--i) * .2s); }
.iso .spin { animation: spin 5s linear infinite; }
.iso .gear { animation: spin 7s linear infinite; }
.iso .gear circle, .iso .gear rect { fill: var(--c-sand); stroke: var(--iso-line); stroke-width: .8; }
.iso .gear .gear-hole { fill: var(--slab-in); }
.iso .lens-ring { fill: color-mix(in oklab, var(--glass) 45%, transparent); stroke: var(--c-ink); stroke-width: 4; }
.iso .lens-handle { stroke: var(--c-ink); stroke-width: 6; stroke-linecap: round; }
.iso .lens { animation: hover-y 2.6s ease-in-out infinite alternate; }
.iso .ride { animation: ride 4.8s linear infinite; animation-delay: calc(var(--i) * -1.2s); }
.iso .grow { transform-box: fill-box; transform-origin: center bottom; animation: grow 4.8s var(--ease-out) infinite; animation-delay: calc(var(--i) * .15s); }
.iso .bar { transform-box: fill-box; transform-origin: center bottom; }
@keyframes hover-y { to { transform: translateY(-6px); } }
@keyframes drop { 0%, 15% { transform: translateY(-40px); opacity: 0; } 35%, 85% { transform: none; opacity: 1; } 100% { transform: none; opacity: 0; } }
@keyframes tagpop { 0%, 10% { transform: scale(0); } 25%, 90% { transform: scale(1); } 100% { transform: scale(0); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes ride { 0% { transform: translate(0, 0); opacity: 0; } 8% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translate(77.9px, 45px); opacity: 0; } }
@keyframes grow { 0%, 8% { transform: scaleY(.1); } 30%, 92% { transform: scaleY(1); } 100% { transform: scaleY(.1); } }
@keyframes scan { from { opacity: .35; } to { opacity: 1; } }
/* The five symptoms row (§ 01, tools/iso.mjs): every drawing moves a little. symLong drops a box (.drop) and
   symSmall's pin hovers (.pin); the other three use these. */
.iso .sx-sheet, .iso .sx-bob, .iso .sx-hop { transform-box: fill-box; transform-origin: center bottom; }
.iso .sx-sheet { animation: sx-sheet 3.6s linear infinite; }
.iso .sx-bob { animation: sx-bob 2.4s ease-in-out infinite; animation-delay: calc(var(--i) * .7s); }
.iso .sx-march { animation: sx-march 1.2s linear infinite; }
.iso .sx-hop { animation: sx-hop 3.4s ease-out infinite 1s; }
/* the sheet shows above the pile, falls (ease-in, like a drop), settles with a small bounce, then fades */
@keyframes sx-sheet {
  0%, 10% { transform: translate(-5px, -36px) rotate(-14deg); opacity: 0; animation-timing-function: ease-out; }
  18% { transform: translate(-4px, -33px) rotate(-12deg); opacity: 1; animation-timing-function: cubic-bezier(.55, 0, .85, .45); }
  42% { transform: none; opacity: 1; animation-timing-function: ease-out; }
  46% { transform: translateY(-3px) rotate(1.5deg); }
  50%, 86% { transform: none; opacity: 1; }
  100% { transform: none; opacity: 0; }
}
@keyframes sx-bob { 0%, 50%, 100% { transform: none; } 22% { transform: translateY(-8px); } }
@keyframes sx-march { to { stroke-dashoffset: -12; } }
@keyframes sx-hop { 0%, 62%, 100% { transform: none; } 70% { transform: translateY(-8px); } 78% { transform: none; } 84% { transform: translateY(-3px); } 90% { transform: none; } }
.static .iso .sx-sheet, .static .iso .sx-bob, .static .iso .sx-march, .static .iso .sx-hop { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .iso .sx-sheet, .iso .sx-bob, .iso .sx-march, .iso .sx-hop { animation: none !important; }
}

/* Decide: steps toward the hunch flip ochre, then steps toward the data flip olive. 8s loop. */
:root { --go: #6B7339; --stop: #B8862B; }
html[data-theme="dark"] { --go: #9AA35F; --stop: #d0a14a; }
.iso .dstep { fill: var(--c-paper); transform-box: fill-box; transform-origin: center; animation: 8s linear infinite; animation-delay: calc(var(--i) * .3s); }
.iso .dstep.stop { animation-name: step-stop; }
.iso .dstep.go { animation-name: step-go; }
.iso .sign-go .sgn-l { fill: var(--c-paper); animation: sign-go 8s linear infinite; }
.iso .sign-stop .sgn-r { fill: var(--c-paper); animation: sign-stop 8s linear infinite; }
.iso .sign-txt { font-size: 6.5px; }
.iso .dflag { fill: var(--c-paper); stroke: var(--iso-line); animation: sign-go 8s linear infinite; animation-delay: .9s; }
.iso .verdict { opacity: 0; }
.iso .verdict circle { stroke: #fff; stroke-width: 1.5; }
.iso .verdict path { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.iso .v-go circle { fill: var(--go); }
.iso .v-stop circle { fill: var(--stop); }
.iso .v-go { animation: verdict-go 8s var(--ease-spring) infinite; }
.iso .v-stop { animation: verdict-stop 8s var(--ease-spring) infinite; }
@keyframes step-stop {
  0%, 3% { fill: var(--c-paper); transform: scale(1, 1); }
  5% { fill: var(--c-paper); transform: scale(1, 0); }
  5.1% { fill: var(--stop); transform: scale(1, 0); }
  8%, 40% { fill: var(--stop); transform: scale(1, 1); }
  44%, 100% { fill: var(--c-paper); transform: scale(1, 1); }
}
@keyframes step-go {
  0%, 51% { fill: var(--c-paper); transform: scale(1, 1); }
  53% { fill: var(--c-paper); transform: scale(1, 0); }
  53.1% { fill: var(--go); transform: scale(1, 0); }
  56%, 90% { fill: var(--go); transform: scale(1, 1); }
  94%, 100% { fill: var(--c-paper); transform: scale(1, 1); }
}
@keyframes sign-stop { 0%, 2% { fill: var(--c-paper); } 4%, 42% { fill: var(--stop); } 46%, 100% { fill: var(--c-paper); } }
@keyframes sign-go { 0%, 50% { fill: var(--c-paper); } 52%, 92% { fill: var(--go); } 96%, 100% { fill: var(--c-paper); } }
@keyframes verdict-stop { 0%, 20% { opacity: 0; transform: translateY(6px) scale(.4); } 24%, 40% { opacity: 1; transform: none; } 44%, 100% { opacity: 0; transform: none; } }
@keyframes verdict-go { 0%, 68% { opacity: 0; transform: translateY(6px) scale(.4); } 72%, 90% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; transform: none; } }
.iso .verdict { transform-box: fill-box; transform-origin: center; }
.static .iso .dstep, .static .iso .sgn-l, .static .iso .sgn-r, .static .iso .dflag, .static .iso .verdict { animation: none; }
.static .iso .dstep.go, .static .iso .sign-go .sgn-l, .static .iso .dflag, .static .iso .v-go circle { fill: var(--go); }
.static .iso .dstep.stop, .static .iso .sign-stop .sgn-r { fill: var(--stop); }
.static .iso .verdict { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .iso .dstep, .iso .sgn-l, .iso .sgn-r, .iso .dflag, .iso .verdict { animation: none !important; }
  .iso .dstep.go, .iso .sign-go .sgn-l, .iso .dflag { fill: var(--go); }
  .iso .dstep.stop, .iso .sign-stop .sgn-r { fill: var(--stop); }
  .iso .verdict { opacity: 1; }
}

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1100px) {
  .pr-top { grid-template-columns: minmax(0, 1fr) minmax(0, 480px); gap: 40px; }
  .rail { display: none; }
  /* shelves: the name goes above the blocks, the button below them */
  .bin { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .bin-head, .bin-blocks, .bin-cta { grid-column: auto; grid-row: auto; }
}
@media (max-width: 1419px) {
  .hud { display: none; }
}
@media (max-width: 960px) {
  .hero-grid, .cases, .faq-grid, .contact-grid { grid-template-columns: 1fr; }
  .bins-link { margin-top: 0; }
  .bl-drop { display: none; }
  .hero-grid { row-gap: 36px; }
  .hero-actions { margin-bottom: 0; }
  .hero-art { margin: 0 auto; }
  .pr-top { grid-template-columns: minmax(0, 1fr); gap: 40px; margin-bottom: 48px; }
  .principles .kata-card { margin: 0 auto; }
  .nav { position: absolute; left: 0; right: 0; top: 68px; justify-content: flex-start; overflow-x: auto; padding: 6px 14px; margin: 0; background: color-mix(in oklab, var(--bg) 92%, transparent); border-bottom: 1px solid var(--line); scrollbar-width: none; }
  /* The nav scrolls sideways here, so the menu is fixed to the screen below it, full width, one column. */
  .nav-dd { position: static; }
  .nav-dd-menu {
    position: fixed; left: 0; right: 0; top: var(--dd-top, 116px); width: auto; max-height: calc(100vh - var(--dd-top, 116px) - 12px); overflow-y: auto;
    grid-template-columns: 1fr; gap: 14px; padding: 16px 22px 18px; border-radius: 0; border-width: 0 0 1px;
    transform: translateY(-6px);
  }
  .nav-dd.is-open .nav-dd-menu { transform: none; }
  .nav-dd-menu::before { display: none; }
  .nav-dd-h { min-height: 0; }
  .topbar-actions { margin-left: auto; }
  html { scroll-padding-top: 120px; }
  .hero { padding-top: 92px; }
  .hud { display: none; }
}
/* shelves: below 760px the blocks wrap two to a row, and an odd last block takes the full row */
@media (max-width: 760px) {
  .bin-blocks { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bin-blocks > .sblock:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .section { padding: 80px 0; }
  .brand-name span { display: none; }
  .form { grid-template-columns: 1fr; padding: 20px; }
  .you-we { grid-template-columns: 1fr; }
  .bin { padding: 26px 14px 18px; }
  .bin-blocks { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .bl-terms { grid-template-columns: 1fr; gap: 8px; }
  .bl-out { grid-template-columns: 1fr; row-gap: 6px; }
  .bl-out .bl-out-h { white-space: normal; }
  .sblock { display: grid; grid-template-columns: 92px 1fr; grid-template-rows: auto auto; column-gap: 12px; row-gap: 2px; align-items: center; padding: 10px 12px; }
  .sblock-art { grid-row: 1 / 3; margin: 0; }
  .sblock-art .ico { height: 88px; margin: 0 auto; }
  .sblock-name { align-self: end; }
  .sblock-line { align-self: start; font-size: .86rem; }
  .case dl { grid-template-columns: 1fr; gap: 4px; }
  .case dd { margin-bottom: 10px; }
  .footer-grid { grid-template-columns: minmax(0, 1fr); }
  .bar-row { grid-template-columns: 70px 1fr 92px; gap: 8px; }
  .week-grid > div { padding: 6px 3px; }
  .post { font-size: .56rem; }
  .tbl { font-size: .7rem; }
  .tbl th, .tbl td { padding: 6px 5px; }
  .tbl th { white-space: normal; letter-spacing: 0; vertical-align: bottom; }
  .tbl .src { padding: 1px 4px; font-size: .62rem; }
}

/* ---------------------------------------------------------------- motion preferences */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .cursor { display: none !important; }
}