/* sbuda.co.za — "Forest" design system (spec v2.1, section 25) */

/* Self-hosted fonts (Fontsource, woff2). */
/* geist-sans-latin-400-normal */
@font-face {
  font-family: 'Geist Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/fonts/geist-sans-latin-400-normal.woff2) format('woff2');
}
/* geist-sans-latin-500-normal */
@font-face {
  font-family: 'Geist Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/assets/fonts/geist-sans-latin-500-normal.woff2) format('woff2');
}
/* geist-sans-latin-600-normal */
@font-face {
  font-family: 'Geist Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/assets/fonts/geist-sans-latin-600-normal.woff2) format('woff2');
}
/* geist-mono-cyrillic-ext-400-normal */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/fonts/geist-mono-cyrillic-ext-400-normal.woff2) format('woff2');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* geist-mono-cyrillic-400-normal */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/fonts/geist-mono-cyrillic-400-normal.woff2) format('woff2');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* geist-mono-symbols2-400-normal */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/fonts/geist-mono-symbols2-400-normal.woff2) format('woff2');
  unicode-range: U+2000-2001,U+2004-2008,U+200A,U+23B8-23BD,U+2500-259F;
}

/* geist-mono-vietnamese-400-normal */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/fonts/geist-mono-vietnamese-400-normal.woff2) format('woff2');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* geist-mono-latin-ext-400-normal */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/fonts/geist-mono-latin-ext-400-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* geist-mono-latin-400-normal */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/fonts/geist-mono-latin-400-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* geist-mono-cyrillic-ext-500-normal */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/assets/fonts/geist-mono-cyrillic-ext-500-normal.woff2) format('woff2');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* geist-mono-cyrillic-500-normal */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/assets/fonts/geist-mono-cyrillic-500-normal.woff2) format('woff2');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* geist-mono-symbols2-500-normal */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/assets/fonts/geist-mono-symbols2-500-normal.woff2) format('woff2');
  unicode-range: U+2000-2001,U+2004-2008,U+200A,U+23B8-23BD,U+2500-259F;
}

/* geist-mono-vietnamese-500-normal */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/assets/fonts/geist-mono-vietnamese-500-normal.woff2) format('woff2');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* geist-mono-latin-ext-500-normal */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/assets/fonts/geist-mono-latin-ext-500-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* geist-mono-latin-500-normal */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/assets/fonts/geist-mono-latin-500-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* instrument-serif-latin-ext-400-italic */
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/fonts/instrument-serif-latin-ext-400-italic.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* instrument-serif-latin-400-italic */
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/fonts/instrument-serif-latin-400-italic.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root {
  --forest: #1B221E;
  --canopy: #232C27;
  --moss: #2B3530;
  --moss-2: #34403A;
  --bone: #EEEBE3;
  --lichen: #B2B9AF;
  --muted: #8D958A;
  --copper: #D98A5B;
  --clay: #E6B98C;
  --ochre: #E0A458;
  --leaf: #9CC7A0;
  --hair: rgba(238, 235, 227, 0.10);
  --hair-2: rgba(238, 235, 227, 0.13);
  --hair-3: rgba(238, 235, 227, 0.22);

  --sans: 'Geist Sans', ui-sans-serif, system-ui, sans-serif;
  --mono: 'Geist Mono', ui-monospace, monospace;
  --serif: 'Instrument Serif', Georgia, serif;

  --gutter: 80px;
  --section: 128px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 80px; }

body {
  margin: 0;
  background: var(--forest);
  color: var(--bone);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--bone); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--copper); outline-offset: 3px; border-radius: 6px; }
img, svg { max-width: 100%; }
p { margin: 0; }
h1, h2 { margin: 0; font-weight: 600; }

.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; padding: 12px 18px; border-radius: 999px; background: var(--bone); color: var(--forest); }
.skip:focus { left: 16px; }

.wrap { max-width: 1440px; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }

/* ---------- shared type ---------- */
.serif { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -0.015em; }
.clay { color: var(--clay); }
.label {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lichen);
}
.dot { width: 8px; height: 8px; border-radius: 999px; background: var(--copper); flex-shrink: 0; }
.dot.leaf { background: var(--leaf); }
.dot.sm { width: 6px; height: 6px; }
.h-section { font-size: clamp(38px, 4.5vw, 64px); line-height: 1.02; letter-spacing: -0.035em; }
.h-section.sm { font-size: clamp(36px, 3.9vw, 56px); }
.body { font-size: 18px; line-height: 1.7; color: var(--lichen); }
.meta { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--lichen); }
.meta-muted { font-family: var(--mono); font-size: 11px; color: var(--muted); line-height: 1.7; }

section { border-top: 1px solid var(--hair); }
.section { padding-top: var(--section); padding-bottom: var(--section); }
/* Anchor jumps land on the content, not the top padding: 40px below the header. */
.section[id] { scroll-margin-top: calc(40px - var(--section)); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 52px; padding: 0 26px; border-radius: 999px;
  font-size: 15px; font-weight: 500; white-space: nowrap;
  transition: transform .2s ease, background-color .2s ease, border-color .2s ease;
}
.btn-primary { background: var(--bone); color: var(--forest); }
.btn-primary:hover { color: var(--forest); background: #fff8ec; transform: translateY(-2px); }
.btn-ghost { border: 1px solid var(--hair-3); color: var(--bone); }
.btn-ghost:hover { border-color: rgba(238,235,227,0.45); transform: translateY(-2px); }
.btn-text { color: var(--lichen); padding: 0 20px; }
.btn-sm { height: 44px; padding: 0 20px; font-size: 14px; }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; }

.chip { display: inline-flex; align-items: center; padding: 6px 11px; border-radius: 999px; border: 1px solid var(--hair-2); font-size: 12px; color: var(--lichen); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }

.card {
  border-radius: 20px; border: 1px solid var(--hair); background: var(--canopy);
  transition: transform .25s ease, border-color .25s ease;
}
a.card:hover, .card.lift:hover { transform: translateY(-2px); border-color: rgba(238,235,227,0.18); }

/* ---------- utilities ---------- */
.measure { max-width: 700px; }
.gap-20 { gap: 20px !important; } .gap-22 { gap: 22px !important; } .gap-56 { gap: 56px !important; }
.self-start { align-self: flex-start; }
.no-shrink { flex-shrink: 0; }
.inline-label { display: inline-flex; align-items: center; gap: 12px; }
.hl { color: var(--bone); font-weight: 500; }
.text-link { align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; font-weight: 500; color: var(--bone); border-bottom: 1px solid var(--hair-3); }
.text-link:hover { border-color: var(--copper); }
.card, .ent-card { position: relative; }
.stretch::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.stretch:focus-visible { outline: none; }
.stretch:focus-visible::after { outline: 2px solid var(--copper); outline-offset: 2px; border-radius: 20px; }
a.ent-card { color: var(--bone); transition: transform .25s ease, border-color .25s ease; }
a.ent-card:hover { transform: translateY(-2px); border-color: rgba(238,235,227,0.18); }
.card.lift:hover .text-link, a.ent-card:hover .text-link { border-color: var(--copper); }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(27, 34, 30, 0.86);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--hair);
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: 80px; gap: 24px; }
.brand { display: flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.nav { display: flex; gap: 36px; font-size: 14px; color: var(--lichen); }
.nav a { padding: 8px 0; }
.menu-btn { display: none; }
.mobile-nav { display: none; }

/* ---------- hero ---------- */
.hero { border-top: 0; padding-top: 112px; padding-bottom: 104px; }
.hero .wrap { display: flex; flex-direction: column; gap: 56px; }
.hero h1 { font-size: clamp(54px, 7.8vw, 112px); line-height: 0.95; letter-spacing: -0.045em; }
.hero h1 .serif { color: var(--clay); letter-spacing: -0.02em; }
.hero-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 64px; }
.hero-row p { max-width: 620px; font-size: 20px; line-height: 1.6; color: var(--lichen); }
.flow { position: relative; border-radius: 24px; border: 1px solid var(--hair); background: var(--canopy); overflow: hidden; }
.flow svg { display: block; width: 100%; height: auto; }
.flow .flow-v { display: none; }
.hero-foot { display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.greet { display: inline-flex; align-items: center; gap: 14px; }
.avatar {
  width: 44px; height: 44px; border-radius: 999px; background: var(--moss);
  border: 2px solid var(--canopy); box-shadow: 0 0 0 1px var(--hair-2);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-style: italic; font-size: 20px; color: var(--clay);
}
.avatar img { width: 100%; height: 100%; border-radius: 999px; object-fit: cover; }
.avatar { overflow: hidden; }
.greet .hi { font-family: var(--serif); font-style: italic; font-size: 22px; color: var(--bone); text-transform: none; letter-spacing: 0; }
.greet-text { display: inline-flex; align-items: center; gap: 14px; }
.greet .loc { display: inline-flex; align-items: center; gap: 8px; }

/* the one orchestrated moment: path draws, nodes light in sequence (~1.2s) */
.flow-path { stroke-dasharray: 1; animation: draw 1.2s cubic-bezier(.65,0,.35,1) both; }
.flow-node { animation: light .35s ease-out both; animation-delay: calc(var(--i, 0) * 0.24s + 0.1s); }
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes light { from { opacity: 0.15; } to { opacity: 1; } }
.flow-sats { transition: transform .6s ease-out; will-change: transform; }

/* ---------- about ---------- */
.two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 80px; }
.stack { display: flex; flex-direction: column; gap: 28px; }
.portrait {
  margin-top: 20px; width: 100%; max-width: 400px; aspect-ratio: 5 / 6; border-radius: 28px;
  background: var(--moss); border: 1px solid var(--hair); position: relative; overflow: hidden;
  display: flex; align-items: flex-end;
}
.portrait svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Black-and-white portrait. The photo files stay in colour; delete this rule to go back. */
.portrait img, .avatar img { filter: grayscale(1) contrast(1.06); }
.portrait .tag { position: relative; margin: 20px; padding: 10px 14px; border-radius: 999px; background: var(--canopy); font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--lichen); }
.about-copy { display: flex; flex-direction: column; gap: 22px; padding-top: 44px; max-width: 600px; }
.about-copy .lead { color: var(--bone); font-size: 22px; letter-spacing: -0.01em; }
.signature { margin-top: 12px; display: flex; flex-direction: column; gap: 4px; }
.signature .name { font-family: var(--serif); font-style: italic; font-size: 44px; line-height: 1; color: var(--clay); }
.signature .role { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }

/* ---------- experience ---------- */
.experience .two-col { align-items: center; }
.exp-title { display: flex; flex-direction: column; gap: 10px; }
.exp-title .org { font-family: var(--serif); font-style: italic; font-size: 30px; color: var(--clay); }
.cap-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; font-size: 15px; }
.cap-grid > div { padding: 14px 0; border-top: 1px solid var(--hair); }
.cap-grid > div:nth-last-child(-n+3) { border-bottom: 1px solid var(--hair); }
.cap-map { border-radius: 28px; border: 1px solid var(--hair); background: var(--canopy); display: flex; align-items: center; justify-content: center; padding: 30px; aspect-ratio: 1 / 1.1; }
.cap-map svg { width: 100%; max-width: 520px; height: auto; }

/* ---------- expertise ---------- */
.head-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 64px; }
.head-row > p { max-width: 380px; font-size: 16px; line-height: 1.65; color: var(--lichen); }
.expertise .wrap, .work .wrap, .ideas .wrap, .stack-sec .wrap { display: flex; flex-direction: column; gap: 56px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.exp-card { padding: 32px; min-height: 340px; display: flex; flex-direction: column; gap: 18px; }
.exp-card .top { display: flex; justify-content: space-between; align-items: center; }
.exp-card .num { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.exp-card h3 { margin: 0; font-size: 24px; font-weight: 500; letter-spacing: -0.02em; }
.exp-card p { font-size: 15px; line-height: 1.6; color: var(--lichen); }
.exp-card .chips { margin-top: auto; }

/* mobile accordion (built from same content) */
.accordion { display: none; }

/* ---------- work ---------- */
.work .wrap { gap: 48px; }
.rule-head { display: flex; justify-content: space-between; padding-bottom: 14px; border-bottom: 1px solid var(--hair); font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lichen); }
.rule-head.mt { margin-top: 24px; }
.ent-card { padding: 32px; border-radius: 20px; border: 1px solid var(--hair); display: flex; flex-direction: column; gap: 16px; }
.ent-card h3, .prod-body h3 { margin: 0; font-size: 24px; font-weight: 500; letter-spacing: -0.02em; }
.ent-card p, .prod-body p { font-size: 15px; line-height: 1.6; color: var(--lichen); }

.flagship { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: 28px; border: 1px solid var(--hair); background: var(--canopy); overflow: hidden; }
.flagship .copy { padding: 56px; display: flex; flex-direction: column; gap: 24px; }
.flagship .title { display: flex; flex-direction: column; gap: 6px; }
.flagship .title strong { font-size: clamp(40px, 4.5vw, 64px); font-weight: 600; letter-spacing: -0.045em; line-height: 1; }
.flagship .title .serif { font-size: 34px; color: var(--clay); }
.flagship .copy > p { font-size: 17px; line-height: 1.65; color: var(--lichen); max-width: 520px; }
.specs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; border-top: 1px solid var(--hair); padding-top: 24px; }
.specs div { display: flex; flex-direction: column; gap: 8px; }
.specs .k { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; color: var(--muted); }
.specs .v { font-size: 15px; line-height: 1.45; }
.flagship .btn { align-self: flex-start; margin-top: 8px; height: 48px; padding: 0 22px; }
.flagship .art { background: var(--moss); border-left: 1px solid var(--hair); display: flex; align-items: center; justify-content: center; min-height: 560px; padding: 40px; }
.flagship .art svg { width: 100%; max-width: 400px; height: auto; }

.prod-card { overflow: hidden; display: flex; flex-direction: column; }
.prod-art { height: 180px; background: var(--moss); border-bottom: 1px solid var(--hair); display: flex; align-items: center; justify-content: center; }
.prod-body { padding: 28px; display: flex; flex-direction: column; gap: 12px; }
.prod-body h3 { font-size: 22px; }
.prod-body h3 small { color: var(--muted); font-weight: 400; font-size: inherit; }

.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.wide-card { overflow: hidden; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wide-card .prod-body { padding: 32px; }
.wide-card .side { background: var(--moss); border-left: 1px solid var(--hair); display: flex; align-items: center; justify-content: center; gap: 8px; padding: 24px; }
.tiles { display: flex; gap: 8px; }
.tile { width: 44px; height: 52px; border-radius: 10px; border: 1px solid var(--hair-3); display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 600; }
.tile.gap { border: 1px dashed var(--copper); color: var(--copper); font-weight: 400; }

.more-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 16px; }
.more-grid > div { padding-top: 18px; border-top: 1px solid var(--hair); display: flex; flex-direction: column; gap: 6px; }
.more-grid strong { font-size: 16px; font-weight: 500; }
.more-grid span { font-size: 14px; line-height: 1.5; color: var(--lichen); }

/* Store links sit above a card's stretched link so both stay clickable. */
.store-links { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 8px; }
.store-links a { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--hair-3); font-size: 13px; font-weight: 500; color: var(--bone); transition: border-color .2s ease, transform .2s ease; }
.store-links a span { color: var(--copper); }
.store-links a:hover { border-color: var(--copper); transform: translateY(-1px); }
.store-links a:focus-visible { outline: 2px solid var(--copper); outline-offset: 2px; }
.prod-body .store-links { margin-top: 4px; }
.flag-stats { display: flex; gap: 40px; }
.flag-stats div { display: flex; flex-direction: column; gap: 4px; }
.flag-stats strong { font-size: 36px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; color: var(--clay); }
.flag-stats span { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.flag-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 8px; }
.flagship .flag-actions .btn { margin-top: 0; }
.also-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.also-grid > div { display: flex; flex-direction: column; gap: 10px; }
.also-grid strong { font-size: 18px; font-weight: 500; }
.also-grid > div > span { font-size: 14px; color: var(--lichen); }
.proof-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin: 0; padding-top: 32px; border-top: 1px solid var(--hair); }
.proof-row div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 8px; }
.proof-row dt { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); line-height: 1.5; }
.proof-row dd { margin: 0; }
.proof-row .proof-n { font-size: clamp(36px, 3.6vw, 52px); font-weight: 600; letter-spacing: -0.035em; line-height: 1; color: var(--clay); }

/* ---------- founder ---------- */
.founder { border-top: 0; padding-top: 112px; padding-bottom: var(--section); }
.founder-panel { border-radius: 28px; border: 1px solid var(--hair); background: var(--canopy); padding: 72px; display: flex; flex-direction: column; gap: 56px; }
.founder-panel .toprow { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.founder-panel h2 { font-size: clamp(38px, 5vw, 72px); line-height: 1; letter-spacing: -0.04em; }
.founder-panel h2 .serif { color: var(--clay); }
.founder-panel .strong { font-size: 24px; line-height: 1.45; letter-spacing: -0.015em; color: var(--bone); }
.steps .k { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); padding-bottom: 16px; }
.steps .row { display: flex; gap: 24px; padding: 22px 0; border-top: 1px solid var(--hair); }
.steps .row:last-child { border-bottom: 1px solid var(--hair); }
.steps .n { font-family: var(--mono); font-size: 12px; color: var(--copper); padding-top: 3px; }
.steps .t { font-size: 17px; line-height: 1.55; }
.founder-foot { display: flex; justify-content: space-between; align-items: center; gap: 32px; padding-top: 32px; border-top: 1px solid var(--hair); }
.pill { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border-radius: 999px; background: var(--moss); font-size: 13px; color: var(--clay); }
.pill i { width: 6px; height: 6px; border-radius: 999px; background: var(--lichen); }
.pill i.c { background: var(--copper); } .pill i.l { background: var(--leaf); }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- focus ---------- */
.focus .wrap { display: flex; flex-direction: column; gap: 64px; }
.list-2 { padding-top: 44px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; align-content: start; font-size: 15px; }
.list-2 > div { padding: 14px 0; border-top: 1px solid var(--hair); }
.list-2 > div:nth-last-child(-n+2) { border-bottom: 1px solid var(--hair); }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.mini-card { padding: 28px; min-height: 240px; display: flex; flex-direction: column; gap: 14px; }
.mini-card h3 { margin: 0; font-size: 20px; font-weight: 500; letter-spacing: -0.02em; }
.mini-card p { font-size: 14px; line-height: 1.6; color: var(--lichen); }
.quote-band { padding-top: 56px; border-top: 1px solid var(--hair); display: flex; flex-direction: column; gap: 8px; align-items: center; text-align: center; }
.quote-band .a { font-size: clamp(30px, 3.4vw, 48px); line-height: 1.1; letter-spacing: -0.035em; font-weight: 600; max-width: 1040px; }
.quote-band .b { font-family: var(--serif); font-style: italic; font-size: clamp(26px, 3vw, 44px); line-height: 1.15; color: var(--lichen); max-width: 1040px; }

/* ---------- career ---------- */
.career .wrap { display: flex; flex-direction: column; gap: 64px; }
.timeline { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 24px; list-style: none; margin: 0; padding: 0; }
.timeline::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 1px; background: rgba(238,235,227,0.14); transform-origin: left; transform: scaleX(var(--draw, 1)); transition: transform 1.2s ease; }
.timeline li { display: flex; flex-direction: column; gap: 14px; position: relative; }
.timeline .node { width: 15px; height: 15px; border-radius: 999px; background: var(--forest); border: 1px solid rgba(238,235,227,0.35); }
.timeline .now .node { background: var(--copper); border: 0; box-shadow: 0 0 0 6px rgba(217,138,91,0.20); }
.timeline .n { font-family: var(--mono); font-size: 11px; color: var(--muted); margin-top: 12px; }
.timeline .now .n { color: var(--copper); }
.timeline strong { font-size: 19px; font-weight: 500; letter-spacing: -0.015em; }
.timeline span.d { font-size: 14px; line-height: 1.6; color: var(--lichen); }
.timeline .now span.d { color: var(--clay); }
.foundation { display: flex; justify-content: space-between; align-items: center; gap: 40px; padding: 28px 32px; border-radius: 20px; border: 1px solid var(--hair); }
.foundation .k { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.foundation strong { font-size: 17px; font-weight: 500; white-space: nowrap; }
.foundation span.d { flex-grow: 1; font-size: 15px; color: var(--lichen); }

/* ---------- leadership ---------- */
.pull { margin: 16px 0 0;  padding-top: 32px; border-top: 1px solid var(--hair); display: flex; flex-direction: column; gap: 16px; }
.pull blockquote { margin: 0; font-family: var(--serif); font-style: italic; font-size: clamp(30px, 2.8vw, 40px); line-height: 1.15; color: var(--bone); }
.pull .k { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.values { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-content: start; padding-top: 44px; }
.value { padding: 28px; min-height: 210px; display: flex; flex-direction: column; gap: 12px; }
.value .n { font-family: var(--mono); font-size: 12px; color: var(--copper); }
.value h3 { margin: 0; font-size: 22px; font-weight: 500; letter-spacing: -0.02em; }
.value p { font-size: 15px; line-height: 1.6; color: var(--lichen); }

/* ---------- stack ---------- */
.stack-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 32px; }
.stack-grid > div { display: flex; flex-direction: column; gap: 10px; padding-top: 18px; border-top: 1px solid rgba(238,235,227,0.16); }
.stack-grid > div.ai { border-top-color: var(--copper); }
.stack-grid .k { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lichen); margin-bottom: 8px; }
.stack-grid .v { font-size: 15px; line-height: 1.5; color: var(--clay); }

/* ---------- ideas ---------- */
.ideas .wrap { gap: 48px; }
.idea-card { padding: 32px; min-height: 280px; display: flex; flex-direction: column; gap: 14px; color: var(--bone); }
.idea-card .k { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lichen); }
.idea-card h3 { margin: 0; font-size: 26px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.2; }
.idea-card p { font-size: 15px; line-height: 1.6; color: var(--lichen); }
.idea-card .when { margin-top: auto; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.idea-list .row { display: grid; grid-template-columns: 180px 1fr auto; align-items: center; gap: 24px; padding: 22px 0; border-top: 1px solid var(--hair); color: var(--bone); transition: padding-left .25s ease; }
.idea-list .row:last-child { border-bottom: 1px solid var(--hair); }
.idea-list a.row:hover { padding-left: 8px; }
.idea-list .k { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.idea-list .t { font-size: 19px; letter-spacing: -0.01em; }
.idea-list .arrow { color: var(--lichen); text-align: right; }

/* ---------- beyond ---------- */
.beyond { padding-top: 112px; padding-bottom: 112px; }
.beyond h2 { font-size: clamp(34px, 3.4vw, 48px); line-height: 1.05; letter-spacing: -0.035em; }
.beyond .copy { display: flex; flex-direction: column; gap: 20px; padding-top: 44px; }

/* ---------- contact ---------- */
.contact { padding-top: 144px; padding-bottom: 128px; scroll-margin-top: -104px; }
.contact .wrap { display: flex; flex-direction: column; gap: 40px; }
.contact h2 { font-size: clamp(50px, 8.3vw, 120px); line-height: 0.95; letter-spacing: -0.05em; }
.contact h2 .serif { color: var(--clay); letter-spacing: -0.02em; }
.contact .hero-row p { max-width: 560px; font-size: 19px; line-height: 1.65; }
.contact .btn { height: 56px; padding: 0 28px; }

/* ---------- subpages ---------- */
.page-hero { border-top: 0; padding: 112px 0 96px; }
.page-hero.tall { padding: 160px 0; }
.page-hero .wrap { display: flex; flex-direction: column; gap: 32px; }
.page-hero h1 { font-size: clamp(46px, 6.4vw, 96px); line-height: 0.98; letter-spacing: -0.045em; max-width: 1180px; }
.page-hero h1 .serif { color: var(--clay); letter-spacing: -0.02em; }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 8px 0 0; border-top: 1px solid var(--hair); padding-top: 24px; max-width: 900px; }
.facts dt { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.facts dd { margin: 0; font-size: 15px; }
.case-visual { border-radius: 28px; border: 1px solid var(--hair); background: var(--moss); display: flex; align-items: center; justify-content: center; min-height: 360px; padding: 48px; }
.case-visual svg { width: 100%; max-width: 360px; height: auto; }
.case-visual.board svg { max-width: 420px; }
.lead-text { font-size: 22px; line-height: 1.55; color: var(--bone); max-width: 760px; }
.prose { max-width: 700px; font-size: 18px; line-height: 1.7; color: var(--lichen); }
.prose h2 { font-size: 28px; font-weight: 500; letter-spacing: -0.02em; color: var(--bone); margin: 56px 0 16px; }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose ul { margin: 0 0 18px; }
.prose ul { padding-left: 20px; }
.prose strong { color: var(--bone); font-weight: 500; }
.prose a { color: var(--copper); border-bottom: 1px solid currentColor; }
.philosophy { display: flex; flex-direction: column; gap: 32px; }
.philosophy blockquote { margin: 0; font-size: clamp(30px, 3.6vw, 52px); line-height: 1.12; letter-spacing: -0.035em; font-weight: 600; max-width: 1100px; }
.philosophy blockquote .serif { color: var(--clay); font-weight: 400; }
.prod-art-board svg { width: 150px; height: 150px; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.filter { height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--hair-3); background: transparent; color: var(--lichen); font: 500 14px var(--sans); cursor: pointer; transition: background-color .2s ease, color .2s ease; }
.filter:hover { color: var(--bone); }
.filter[aria-pressed="true"] { background: var(--bone); border-color: var(--bone); color: var(--forest); }
[hidden] { display: none !important; }

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--hair); padding: 56px 0 48px; }
.site-footer .wrap { display: flex; flex-direction: column; gap: 48px; }
.foot-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; }
.foot-grid .who { display: flex; flex-direction: column; gap: 10px; }
.foot-grid .who .n { font-family: var(--mono); font-size: 13px; letter-spacing: 0.16em; }
.foot-grid .who .s { font-size: 14px; color: var(--lichen); }
.foot-grid .who .m { font-size: 14px; color: var(--muted); }
.foot-grid .line { font-family: var(--serif); font-style: italic; font-size: 26px; line-height: 1.25; color: var(--clay); }
.foot-grid .links { display: flex; flex-direction: column; gap: 10px; align-items: flex-end; font-size: 14px; color: var(--lichen); }
.copyright { font-family: var(--mono); font-size: 11px; color: var(--muted); }


/* =========================================================
   Tablet
   ========================================================= */
@media (max-width: 1180px) {
  :root { --gutter: 48px; --section: 104px; }
  .nav { gap: 24px; }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stack-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 40px; }
  .timeline { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 48px; }
  .timeline::before { display: none; }
  .wide-card { grid-template-columns: 1fr; }
  .wide-card .side { border-left: 0; border-top: 1px solid var(--hair); min-height: 160px; order: -1; }
  .more-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .founder-panel { padding: 48px; }
}

@media (max-width: 960px) {
  .nav, .site-header .cta { display: none; }
  .menu-btn {
    display: flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; border-radius: 999px; border: 1px solid rgba(238,235,227,0.16);
    background: transparent; color: var(--bone); cursor: pointer;
  }
  .mobile-nav {
    position: fixed; inset: 80px 0 0 0; z-index: 49; background: var(--forest);
    padding: 24px 20px 40px; flex-direction: column; overflow-y: auto;
  }
  .mobile-nav.open { display: flex; }
  .mobile-nav a { display: flex; align-items: center; justify-content: space-between; min-height: 60px; border-bottom: 1px solid var(--hair); font-size: 24px; font-weight: 500; letter-spacing: -0.02em; }
  .mobile-nav a span { font-family: var(--mono); font-size: 11px; color: var(--muted); }
  .mobile-nav .btn { margin-top: 28px; border-bottom: 0; font-size: 16px; justify-content: center; }
  body.nav-open { overflow: hidden; }

  .two-col, .grid-3, .grid-2, .flagship { grid-template-columns: 1fr; }
  .two-col { gap: 48px; }
  .about-copy, .list-2, .values, .beyond .copy { padding-top: 0; }
  .flagship .art { border-left: 0; border-top: 1px solid var(--hair); min-height: 0; order: -1; }
  .head-row { flex-direction: column; align-items: flex-start; gap: 20px; }
  .hero-row { flex-direction: column; align-items: flex-start; gap: 32px; }
  .hero-foot > span:last-child { display: none; }
  .founder-foot { flex-direction: column; align-items: flex-start; }
  .proof-row { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }
  .also-grid { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr; gap: 24px; }
  .foot-grid .links { flex-direction: row; gap: 20px; align-items: flex-start; }
}

/* =========================================================
   Phone — its own composition
   ========================================================= */
@media (max-width: 640px) {
  :root { --gutter: 20px; --section: 56px; }
  .store-links a { min-height: 44px; }
  .flag-stats { gap: 28px; }
  html { scroll-padding-top: 64px; }
  .mobile-nav { top: 64px; }
  .site-header .wrap { height: 64px; }
  .brand { font-size: 15px; gap: 10px; }

  .label { font-size: 11px; letter-spacing: 0.12em; gap: 10px; }
  .body { font-size: 16px; line-height: 1.65; }
  .h-section, .h-section.sm { font-size: 36px; line-height: 1.05; }

  .hero { padding-top: 48px; padding-bottom: 56px; }
  .hero .wrap { gap: 28px; }
  .hero h1 { font-size: 54px; line-height: 0.96; }
  .hero h1 .serif { font-size: 48px; }
  .hero-row p { font-size: 17px; }
  .btn-row { flex-direction: column; width: 100%; gap: 10px; }
  .btn-row .btn { width: 100%; height: 54px; font-size: 16px; }
  .btn-row .btn-text { height: 48px; }
  .flow { border-radius: 20px; }
  .flow .flow-h { display: none; }
  .flow .flow-v { display: block; }
  .portrait .tag { font-size: 10px; letter-spacing: 0.08em; }
  .greet .avatar { width: 52px; height: 52px; font-size: 22px; }
  .avatar img { width: 100%; height: 100%; border-radius: 999px; object-fit: cover; }
.avatar { overflow: hidden; }
.greet .hi { font-size: 24px; }
  .greet-text { flex-direction: column; align-items: flex-start; gap: 4px; }

  .portrait { max-width: none; aspect-ratio: 4 / 4.2; }
  .about-copy .lead { font-size: 19px; }
  .signature .name { font-size: 36px; }

  .exp-title .org { font-size: 24px; }
  .cap-grid { display: flex; flex-wrap: wrap; gap: 6px; }
  .cap-grid > div { padding: 8px 12px; border: 1px solid var(--hair-2) !important; border-radius: 999px; font-size: 13px; color: var(--clay); }
  .cap-map { display: none; }

  .expertise .grid-3 { display: none; }
  .expertise .head-row > p { display: none; }
  .accordion { display: flex; flex-direction: column; }
  .accordion details { border-top: 1px solid var(--hair); }
  .accordion details:last-child { border-bottom: 1px solid var(--hair); }
  .accordion summary { list-style: none; display: flex; align-items: center; gap: 16px; min-height: 68px; cursor: pointer; }
  .accordion summary::-webkit-details-marker { display: none; }
  .accordion .n { font-family: var(--mono); font-size: 11px; color: var(--muted); width: 18px; }
  .accordion details[open] .n { color: var(--copper); }
  .accordion .t { flex-grow: 1; font-size: 19px; font-weight: 500; letter-spacing: -0.015em; }
  .accordion .pm { font-size: 20px; color: var(--lichen); }
  .accordion .pm::before { content: "+"; }
  .accordion details[open] .pm::before { content: "−"; }
  .accordion .panel { padding: 0 0 20px 34px; display: flex; flex-direction: column; gap: 14px; }
  .accordion .panel p { font-size: 15px; line-height: 1.6; color: var(--lichen); }

  .work .wrap, .expertise .wrap, .ideas .wrap, .stack-sec .wrap, .focus .wrap, .career .wrap { gap: 24px; }
  .rule-head { font-size: 11px; }
  .ent-card, .prod-body, .wide-card .prod-body { padding: 24px; }
  .flagship { border-radius: 22px; }
  .flagship .copy { padding: 24px; gap: 14px; }
  .flagship .art { padding: 25px; }
  .flagship .art svg { max-width: 230px; }
  .flagship .title { flex-direction: row; align-items: baseline; gap: 10px; flex-wrap: wrap; }
  .flagship .title strong { font-size: 30px; letter-spacing: -0.035em; }
  .flagship .title .serif { font-size: 22px; }
  .flagship .copy > p { font-size: 15px; }
  .specs { grid-template-columns: 1fr; gap: 12px; }
  .flagship .btn { width: 100%; }
  .card, .ent-card { border-radius: 22px; }
  .more-grid { grid-template-columns: 1fr; gap: 0; margin-top: 0; }
  .more-grid > div { padding: 16px 0; }

  .founder { padding: 16px 0 56px; }
  .founder .wrap { padding-left: 12px; padding-right: 12px; }
  .founder-panel { padding: 32px 20px; gap: 20px; border-radius: 24px; }
  .founder-panel h2 { font-size: 34px; line-height: 1.05; letter-spacing: -0.035em; }
  .founder-panel .toprow > span:last-child { display: none; }
  .founder-panel .strong { font-size: 19px; }
  .founder-panel .two-col { gap: 24px; }
  .founder-foot { padding-top: 20px; }
  .founder-foot .btn-row .btn { height: 52px; font-size: 15px; }

  .grid-4 { grid-template-columns: 1fr; gap: 0; }
  .mini-card { min-height: 0; padding: 18px 0; border: 0; border-top: 1px solid var(--hair); border-radius: 0; background: transparent; gap: 6px; }
  .mini-card:last-child { border-bottom: 1px solid var(--hair); }
  .mini-card svg { display: none; }
  .mini-card h3 { font-size: 17px; }
  .list-2 { grid-template-columns: 1fr; }
  .list-2 > div:nth-last-child(2) { border-bottom: 0; }
  .quote-band { padding-top: 24px; align-items: flex-start; text-align: left; border-top: 0; }
  .quote-band .a { display: none; }
  .quote-band .b { font-size: 28px; line-height: 1.2; color: var(--clay); }

  .timeline { grid-template-columns: 1fr; gap: 22px; padding-left: 28px; }
  .timeline::before { display: block; left: 6px; right: auto; top: 6px; bottom: 6px; width: 1px; height: auto; transform: scaleY(var(--draw, 1)); transform-origin: top; }
  .timeline li { gap: 4px; }
  .timeline .node { position: absolute; left: -28px; top: 4px; width: 13px; height: 13px; }
  .timeline .n { display: none; }
  .timeline strong { font-size: 17px; }
  .timeline .now span.d { color: var(--clay); }
  .foundation { flex-direction: column; align-items: flex-start; gap: 8px; padding: 20px; }

  .values { grid-template-columns: 1fr; gap: 12px; }
  .value { min-height: 0; padding: 24px; }
  .pull blockquote { font-size: 28px; }

  .stack-grid { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .stack-grid .v { font-size: 14px; }

  .idea-card { min-height: 0; padding: 24px; }
  .idea-card h3 { font-size: 22px; }
  .idea-list .row { grid-template-columns: 1fr auto; gap: 6px 12px; padding: 18px 0; }
  .idea-list .k { grid-column: 1 / -1; }
  .idea-list .t { font-size: 17px; }
  .ideas .head-row .btn { display: none; }

  .beyond { padding-top: 56px; padding-bottom: 56px; }
  .page-hero { padding: 48px 0 40px; }
  .page-hero .wrap { gap: 24px; }
  .page-hero h1 { font-size: 44px; }
  .facts { grid-template-columns: 1fr; gap: 14px; }
  .case-visual { min-height: 260px; padding: 24px; border-radius: 22px; }
  .lead-text { font-size: 19px; }
  .prose { font-size: 16px; }
  .prose h2 { font-size: 22px; margin-top: 40px; }
  .gap-56 { gap: 32px !important; }
  .beyond h2 { font-size: 34px; }

  .contact { padding-top: 72px; padding-bottom: 56px; scroll-margin-top: -32px; }
  .contact .wrap { gap: 24px; }
  .contact h2 { font-size: 50px; line-height: 0.98; letter-spacing: -0.045em; }
  .contact .hero-row p { font-size: 16px; }

  .site-footer { padding: 36px 0 40px; }
  .site-footer .wrap { gap: 18px; }
  .foot-grid { gap: 18px; }
  .foot-grid .who .s { display: none; }
  .foot-grid .line { font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

.idea-list .arrow .when, .idea-card .when { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }