/* =========================================================
   PINEFORGE COLLECTIVE — art direction
   Forest / cone / wood tones, restrained contrast, tactile grain
   ========================================================= */

@font-face {
  font-family:"DM Sans"; font-style:normal; font-weight:400 600; font-display:swap;
  src:url("./assets/fonts/dm-sans-latin.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;
}
@font-face {
  font-family:"DM Sans"; font-style:normal; font-weight:400 600; font-display:swap;
  src:url("./assets/fonts/dm-sans-latin-ext.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;
}
@font-face {
  font-family:"Manrope"; font-style:normal; font-weight:400 700; font-display:swap;
  src:url("./assets/fonts/manrope-latin.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;
}
@font-face {
  font-family:"Manrope"; font-style:normal; font-weight:400 700; font-display:swap;
  src:url("./assets/fonts/manrope-latin-ext.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;
}

:root {
  color-scheme:dark;
  --font-display:"Manrope",sans-serif;
  --font-body:"DM Sans",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-mono:ui-monospace,"Cascadia Mono","SFMono-Regular",Consolas,"Liberation Mono",monospace;
  --radius-lg:42px;
  --radius-md:28px;
  --phone-w:clamp(280px, 29vw, 390px);
  --ease:cubic-bezier(.2,.75,.2,1);
  --z-background:-1;
  --z-content:1;
  --z-rail:50;
  --z-floating:70;
  --z-header:80;
  --z-grain:100;
  --z-progress:130;
  --viewport-height:100svh;
  --bg-primary:#07110c;
  --bg-secondary:#0c1a12;
  --bg-tertiary:#18251b;
  --forest-primary:#153b2c;
  --forest-deep:#09160f;
  --moss-primary:#344e35;
  --sage-primary:#93b887;
  --wood-deep:#2b1c16;
  --wood-primary:#4a2f22;
  --wood-warm:#664531;
  --text-primary:#f0f3ea;
  --text-secondary:#aeb9aa;
  --accent-primary:#9abd8e;
  --accent-secondary:#b1835e;
  --accent-soft:#b8d2ae;
  --surface:rgba(19,36,26,.78);
  --surface-soft:rgba(32,54,39,.42);
  --surface-glass:rgba(24,47,33,.52);
  --surface-glass-strong:rgba(18,36,25,.78);
  --surface-wood:rgba(73,45,32,.48);
  --border-soft:rgba(190,220,185,.14);
  --border-strong:rgba(202,227,194,.24);
  --border-warm:rgba(190,145,100,.17);
  --glow-primary:rgba(139,188,126,.18);
  --glow-warm:rgba(177,131,94,.16);
  --shadow-soft:0 18px 60px rgba(1,8,4,.18);
  --shadow-card:0 24px 70px rgba(1,8,4,.25);
  --shadow-float:0 30px 90px rgba(1,8,4,.34);
  --glass-blur:18px;
  --theme-duration:320ms;
  --ink:var(--bg-primary);
  --ink-2:var(--bg-secondary);
  --pine:var(--forest-primary);
  --moss:var(--moss-primary);
  --olive:#708c69;
  --cone:var(--wood-warm);
  --wood:var(--wood-deep);
  --wood-2:var(--wood-primary);
  --cream:var(--text-primary);
  --sand:var(--accent-soft);
  --line:var(--border-soft);
  --line-strong:var(--border-strong);
  --muted:var(--text-secondary);
  --forge-copper:#c58b60;
  --forge-copper-bright:#e1b07f;
  --forge-moss:#a7c89a;
  --forge-ivory:#f4f2e9;
  --forge-rule:linear-gradient(90deg,transparent,var(--border-soft) 12%,var(--border-strong) 50%,var(--border-soft) 88%,transparent);
  --forge-rule-warm:linear-gradient(90deg,transparent,color-mix(in srgb,var(--forge-copper) 48%,transparent),transparent);
  --section-pad-x:clamp(24px,8vw,145px);
  --section-pad-y:clamp(110px,11vw,176px);
}

:root[data-theme="light"] {
  color-scheme:light;
  --bg-primary:#eaf3e4;
  --bg-secondary:#dfeeda;
  --bg-tertiary:#d5e8ce;
  --forest-primary:#9fc497;
  --forest-deep:#d8ead2;
  --moss-primary:#8fb083;
  --sage-primary:#527c4c;
  --wood-deep:#d8c4b4;
  --wood-primary:#cdb49f;
  --wood-warm:#a78265;
  --text-primary:#173024;
  --text-secondary:#58705d;
  --accent-primary:#486f43;
  --accent-secondary:#7d5c45;
  --accent-soft:#5f8558;
  --surface:rgba(248,252,245,.72);
  --surface-soft:rgba(255,255,255,.38);
  --surface-glass:rgba(255,255,255,.53);
  --surface-glass-strong:rgba(244,250,240,.82);
  --surface-wood:rgba(244,237,228,.62);
  --border-soft:rgba(65,107,61,.14);
  --border-strong:rgba(55,95,52,.24);
  --border-warm:rgba(132,91,61,.18);
  --glow-primary:rgba(83,139,74,.16);
  --glow-warm:rgba(152,111,77,.11);
  --shadow-soft:0 18px 60px rgba(45,79,39,.10);
  --shadow-card:0 24px 70px rgba(45,79,39,.14);
  --shadow-float:0 30px 90px rgba(45,79,39,.18);
  --ink:var(--bg-primary);
  --ink-2:var(--bg-secondary);
  --pine:var(--forest-primary);
  --moss:var(--moss-primary);
  --olive:#78966f;
  --cone:var(--wood-warm);
  --wood:var(--wood-deep);
  --wood-2:var(--wood-primary);
  --cream:var(--text-primary);
  --sand:var(--accent-soft);
  --line:var(--border-soft);
  --line-strong:var(--border-strong);
  --muted:var(--text-secondary);
  --forge-copper:#8e6145;
  --forge-copper-bright:#6f4933;
  --forge-moss:#527c4c;
  --forge-ivory:#183024;
}

* { box-sizing: border-box; }
html { scroll-behavior: auto; }
.i18n-pending body { visibility: hidden; }
body {
  margin:0;
  min-width:320px;
  font-family:var(--font-body);
  overflow-x:hidden;
  width:100%;
  max-width:100%;
  background:radial-gradient(70rem 50rem at 8% 6%,rgba(67,119,79,.16),transparent 66%), radial-gradient(62rem 52rem at 92% 42%,rgba(115,76,51,.13),transparent 67%), linear-gradient(155deg,var(--bg-primary),var(--bg-secondary) 48%,var(--wood-deep) 120%);
  background-attachment:scroll;
  color:var(--text-primary);
  transition:background-color var(--theme-duration) ease,color var(--theme-duration) ease;
}

body::selection { background: var(--sand); color: var(--ink); }
button, a { font: inherit; }
a { color: inherit; text-decoration: none; }
button { color: inherit; }

.site-header {
  padding:0 clamp(24px, 4vw, 72px);
  display:grid;
  align-items:center;
  transition:height .35s var(--ease),background .45s ease,color .35s ease;
}

.brand {
  display:inline-flex;
  align-items:center;
  gap:12px;
  width:max-content;
  font:600 13px/1 "Manrope", sans-serif;
  letter-spacing:.2em;
}
.brand img { width:27px; height:34px; filter:drop-shadow(0 5px 12px color-mix(in srgb,var(--forge-copper) 28%,transparent)); }

.nav {
  display:flex;
  align-items:center;
  color:rgba(236,232,223,.66);
  font-size:13px;
  gap:clamp(18px,1.65vw,28px);
  white-space:nowrap;
}
.nav a, .nav-cta { transition: color .3s ease, opacity .3s ease; }
.nav a:hover, .nav-cta:hover { color: var(--cream); }
.nav-cta {
  font-size:13px;
  border-bottom:1px solid var(--line-strong);
  padding-bottom:5px;
  border:1px solid var(--border-soft);
  border-radius:999px;
  background:var(--surface-soft);
}
.theme-toggle {
  padding:5px 8px 5px 6px;
  display:flex;
  align-items:center;
  gap:8px;
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--muted);
  background:color-mix(in srgb,var(--cream) 4%,transparent);
  cursor:pointer;
  transition:color .3s ease,border-color .3s ease,background .3s ease;
}
.theme-toggle:hover { color:var(--cream); border-color:var(--line-strong); }
.theme-toggle:focus-visible { outline:2px solid var(--sand); outline-offset:3px; }
.theme-toggle-track {
  width:30px;
  height:16px;
  padding:2px;
  display:block;
  border-radius:999px;
  background:color-mix(in srgb,var(--cream) 14%,transparent);
}
.theme-toggle-track i {
  display:block;
  width:12px;
  height:12px;
  border-radius:50%;
  background:var(--sand);
  box-shadow:0 2px 8px rgba(0,0,0,.16);
  transform:translateX(0);
  transition:transform .42s var(--ease),background .3s ease;
}
:root[data-theme="light"] .theme-toggle-track i { transform:translateX(14px); }
.theme-toggle-label {
  min-width:30px;
  text-align:left;
  font:600 8px/1 "Manrope",sans-serif;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.growth-rail {
  left:clamp(18px, 2vw, 34px);
  top:50%;
  transform:translateY(-50%);
  display:flex;
  gap:10px;
  height:44vh;
  min-height:330px;
}
.growth-line {
  width: 1px;
  height: 100%;
  position: relative;
  background: rgba(236,232,223,.12);
  overflow: hidden;
}
.growth-line-fill {
  display: block;
  width: 100%;
  height: 100%;
  transform: scaleY(0);
  transform-origin: top;
  background: linear-gradient(var(--sand), var(--moss), var(--cone));
}
.growth-labels {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.growth-labels span {
  color: rgba(236,232,223,.24);
  font: 500 9px/1 "Manrope", sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  transition: color .25s ease, transform .25s ease;
}
.growth-labels span.active { color: var(--sand); transform: translateX(4px); }

.hero {
  padding:124px clamp(24px, 8vw, 145px) 76px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  position:relative;
  overflow:hidden;
  background:radial-gradient(46rem 36rem at 50% 27%,var(--glow-primary),transparent 68%), radial-gradient(40rem 30rem at 88% 84%,var(--glow-warm),transparent 72%), linear-gradient(155deg,var(--forest-deep),var(--bg-primary) 48%,color-mix(in srgb,var(--wood-deep) 72%,var(--bg-primary)));
  isolation:isolate;
}
.hero::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background:repeating-radial-gradient(ellipse at 50% 120%,transparent 0 42px,rgba(181,211,172,.028) 43px 44px), radial-gradient(circle at center,var(--glow-primary),transparent 68%);
  opacity:.88;
  background:repeating-radial-gradient(ellipse at 50% 118%,transparent 0 54px,rgba(181,211,172,.025) 55px 56px), linear-gradient(110deg,transparent 46%,color-mix(in srgb,var(--forge-copper) 4%,transparent) 50%,transparent 54%), radial-gradient(circle at center,var(--glow-primary),transparent 68%);
}
.hero-tree-lines {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .17;
}
.hero-tree-lines i {
  position: absolute;
  left: 50%;
  bottom: 14%;
  width: 1px;
  height: 64vh;
  transform-origin: bottom;
  background: linear-gradient(to top, rgba(216,206,187,.45), transparent);
}
.hero-tree-lines i:nth-child(1){ transform: rotate(-33deg); }
.hero-tree-lines i:nth-child(2){ transform: rotate(-18deg); }
.hero-tree-lines i:nth-child(3){ transform: rotate(0); }
.hero-tree-lines i:nth-child(4){ transform: rotate(18deg); }
.hero-tree-lines i:nth-child(5){ transform: rotate(33deg); }

.hero-mark-wrap {
  position:relative;
  width:140px;
  height:140px;
  display:grid;
  place-items:center;
  margin-bottom:26px;
  filter:drop-shadow(0 28px 50px rgba(4,13,7,.24));
}
.hero-mark { width: 70px; filter: drop-shadow(0 20px 35px rgba(0,0,0,.38)); }
.hero-ring {
  position:absolute;
  inset:0;
  border:1px solid rgba(216,206,187,.12);
  border-radius:50%;
  border-color:var(--border-strong);
  box-shadow:inset 0 0 50px var(--glow-primary);
}
.hero-ring::after {
  content: "";
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--sand);
  left: 50%; top: -3px;
  box-shadow: 0 0 18px rgba(216,206,187,.35);
}

.hero h1, .section-copy h2, .universe-copy h2, .build-heading h2, .contact-section h2 {
  margin: 0;
  font-family: "Manrope", sans-serif;
  font-weight: 500;
  letter-spacing: -.052em;
}
.hero h1 {
  font-size:clamp(52px, 7.4vw, 120px);
  line-height:.94;
  text-shadow:0 14px 50px rgba(0,0,0,.13);
  max-width:14ch;
  letter-spacing:-.072em;
}
.hero h1 span,
.section-copy h2 span,
.universe-copy h2 span,
.build-heading h2 span,
.contact-section h2 span {
  color: var(--sand);
  font-weight: 400;
}
.hero-copy {
  margin:28px auto 0;
  color:var(--muted);
  font-size:clamp(15px, 1.2vw, 18px);
  line-height:1.7;
  max-width:62ch;
}
.scroll-cue {
  position: absolute;
  bottom: 36px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(236,232,223,.5);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.scroll-cue i {
  width: 34px;
  height: 1px;
  background: var(--line-strong);
  position: relative;
}
.scroll-cue i::after {
  content: "";
  position: absolute;
  right: 0;
  top: -2px;
  width: 5px; height: 5px;
  border-right: 1px solid var(--sand);
  border-bottom: 1px solid var(--sand);
  transform: rotate(45deg);
}

.phone-section {
  min-height: 100vh;
  position: relative;
  border-top: 1px solid rgba(236,232,223,.06);
  isolation: isolate;
}
.phone-stage {
  height: 100svh;
  min-height: 720px;
  padding: 110px clamp(40px, 8vw, 150px) 70px;
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(360px, 1.15fr);
  gap: clamp(50px, 8vw, 140px);
  align-items: center;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: background-color .5s ease;
}
.phone-stage::before {
  content:"";
  position:absolute;
  width: 55vw; aspect-ratio:1;
  right:-12vw; top:50%;
  transform:translateY(-50%);
  border-radius:50%;
  background:radial-gradient(circle, rgba(88,99,82,.16), transparent 64%);
  pointer-events:none;
}
.phone-stage::after {
  content:"";
  position:absolute;
  z-index:-1;
  width:min(720px,58vw);
  aspect-ratio:1;
  right:clamp(-180px,-8vw,-80px);
  top:50%;
  transform:translateY(-50%) scale(.78);
  border-radius:50%;
  opacity:0;
  background:
    radial-gradient(circle, rgba(216,206,187,.11) 0 1px, transparent 2px) 0 0/20px 20px,
    radial-gradient(circle, rgba(88,99,82,.2), transparent 66%);
  transition:opacity .65s var(--ease), transform .85s var(--ease);
  pointer-events:none;
}
.phone-stage.is-focused::after { opacity:1; transform:translateY(-50%) scale(1); }
.phone-stage .section-copy { transition:opacity .5s ease, filter .5s ease, transform .7s var(--ease); }
.phone-stage.is-focused .section-copy { opacity:.74; filter:saturate(.82); transform:translateY(-4px); }

.section-copy { max-width: 600px; position: relative; z-index: 4; }
.section-copy h2 {
  font-size: clamp(44px, 5.2vw, 80px);
  line-height: 1.02;
}
.section-copy > p:not(.eyebrow) {
  max-width: 530px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.75;
  margin: 26px 0 0;
}
.section-index {
  display:flex; align-items:baseline; gap:7px;
  margin-top:50px;
  font-family:"Manrope",sans-serif;
}
.section-index strong { font-size: 42px; font-weight: 400; letter-spacing:-.05em; }
.section-index span { color: rgba(236,232,223,.3); font-size: 12px; }
.section-progress {
  width:min(210px,72%);
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:1fr;
  gap:7px;
  margin-top:16px;
}
.section-progress i {
  height:2px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(236,232,223,.12);
  position:relative;
}
.section-progress i::after {
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(90deg,var(--sand),var(--moss));
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .45s var(--ease);
}
.section-progress i.complete::after,
.section-progress i.active::after { transform:scaleX(1); }
.section-progress i.active::after { box-shadow:0 0 12px rgba(216,206,187,.28); }

.phone-stack {
  --active-phone-w: min(var(--phone-w), calc((100svh - 180px) * .505));
  position: relative;
  transform:translateY(-8px);
  display: grid;
  place-items: center;
  min-height: 650px;
  z-index: 3;
  perspective: 1200px;
}
.phone-stack::before {
  content:"";
  position:absolute;
  width:calc(var(--active-phone-w) * 1.38);
  aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle, rgba(216,206,187,.13), rgba(88,99,82,.055) 46%, transparent 70%);
  opacity:.25;
  transform:scale(.8);
  transition:opacity .65s ease, transform .8s var(--ease);
  pointer-events:none;
}
.phone-stage.is-focused .phone-stack::before { opacity:1; transform:scale(1.12); }
.phone-focus-status {
  position:absolute;
  z-index:8;
  top:18px;
  left:50%;
  transform:translate(-50%,8px);
  display:flex;
  align-items:center;
  gap:9px;
  padding:8px 12px;
  border:1px solid rgba(236,232,223,.1);
  border-radius:999px;
  color:rgba(236,232,223,.42);
  background:rgba(21,24,20,.46);
  backdrop-filter:blur(12px);
  font:600 8px/1 "Manrope",sans-serif;
  letter-spacing:.18em;
  text-transform:uppercase;
  opacity:0;
  transition:opacity .4s ease, transform .55s var(--ease), border-color .4s ease;
  pointer-events:none;
}
.phone-focus-status i {
  width:6px;
  height:6px;
  border-radius:50%;
  box-shadow:0 0 0 0 rgba(216,206,187,.35);
}
.phone-stage.is-focused .phone-focus-status {
  opacity:1;
  transform:translate(-50%,0);
  border-color:rgba(216,206,187,.2);
}
.phone-stage.is-focused .phone-focus-status i { animation:focusPulse 1.8s ease-out infinite; }
@keyframes focusPulse {
  70%,100% { box-shadow:0 0 0 8px rgba(216,206,187,0); }
}
.phone {
  width:var(--active-phone-w);
  aspect-ratio:.505;
  position:relative;
  z-index:3;
  filter:none;
}
.phone-shell {
  position:absolute;
  inset:0;
  border-radius:clamp(42px, 4vw, 58px);
  padding:10px;
  background:linear-gradient(145deg, rgba(236,232,223,.26), rgba(59,45,35,.12) 12%, rgba(0,0,0,.5)), #23231f;
  border:1px solid rgba(236,232,223,.18);
  border-color:var(--border-strong);
  border-color:color-mix(in srgb,var(--border-strong) 78%,var(--forge-copper) 22%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.055),0 38px 94px rgba(2,8,4,.36),0 0 0 8px rgba(197,139,96,.025);
}
.phone-speaker {
  position:absolute;
  z-index:5;
  top: 20px;
  left:50%;
  transform:translateX(-50%);
  width: 29%;
  height: 24px;
  border-radius: 16px;
  background:#10110f;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
}
.phone-home {
  position:absolute;
  z-index:5;
  bottom:17px;
  left:50%;
  transform:translateX(-50%);
  width:31%;
  height:4px;
  border-radius: 4px;
  background:rgba(236,232,223,.58);
}
.phone-screen {
  width:100%;
  height:100%;
  border-radius: calc(clamp(42px, 4vw, 58px) - 10px);
  overflow:hidden;
  background:#10130f;
  position:relative;
}
.phone-screen::after {
  content:"";
  position:absolute;
  inset:0;
  z-index:10;
  pointer-events:none;
  border-radius:inherit;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), inset 0 -70px 70px rgba(0,0,0,.18);
}
.phone-screen-track {
  width:100%;
  height:calc(var(--phone-panel-count, 1) * 100%);
  will-change:transform;
}
.phone-panel {
  height:calc(100% / var(--phone-panel-count, 1));
  padding: 54px 18px 22px;
  display:flex;
  flex-direction:column;
  gap:18px;
}
.phone-panel .project-meta > * { transition:opacity .32s ease, transform .45s var(--ease); }
.phone-panel:not(.is-active) .project-meta > * { opacity:.36; transform:translateY(7px); }
.phone-panel.is-active .project-meta > * { opacity:1; transform:translateY(0); }
.game-panel--one { background: linear-gradient(#1a211c, #10130f); }
.game-panel--two { background: linear-gradient(#281f18, #12110e); }
.game-panel--three { background: linear-gradient(#20251d, #11130f); }
.app-panel--one { background: linear-gradient(#e6e0d4, #cfc6b7); color:#20231e; }
.app-panel--two { background: linear-gradient(#d9d0c0, #bbb09d); color:#20231e; }
.app-panel--three { background: linear-gradient(#d9d5c9, #c3bba9); color:#20231e; }

.project-meta { padding:0 6px 4px; }
.project-meta > span {
  display:block; margin-bottom:6px;
  color:rgba(236,232,223,.43);
  text-transform:uppercase;
  letter-spacing:.12em;
  font:600 9px/1 "Manrope",sans-serif;
}
.project-meta h3 {
  margin:0;
  font:500 clamp(26px,2.2vw,34px)/1.1 "Manrope",sans-serif;
  letter-spacing:-.04em;
}
.project-meta p {
  margin:8px 0 0;
  color:rgba(236,232,223,.55);
  font-size:12px; line-height:1.5;
}
.phone-cta {
  width:100%;
  min-height:46px;
  margin-top:14px;
  padding:0 6px 0 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border:0;
  border-radius:999px;
  color:#141a14;
  background:linear-gradient(135deg,#efe6d6,#c9dcb8);
  box-shadow:0 12px 28px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.6);
  font:600 13px/1 "Manrope",sans-serif;
  letter-spacing:.01em;
  text-align:left;
  cursor:pointer;
  transition:transform .3s var(--ease),box-shadow .3s ease;
}
.phone-cta i {
  flex:0 0 auto;
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#efe6d6;
  background:#141a14;
  font-style:normal;
  font-size:14px;
  transition:transform .3s var(--ease);
}
.phone-panel:not(.is-active) .phone-cta { pointer-events:none; }
.phone-cta:hover { transform:translateY(-2px);box-shadow:0 16px 34px rgba(0,0,0,.34),inset 0 1px rgba(255,255,255,.6); }
.phone-cta:hover i { transform:translateX(3px); }
.phone-cta:focus-visible { outline:2px solid var(--sand); outline-offset:3px; }
.store-play {
  width:30px;
  height:30px;
  border-radius:9px;
  display:grid;
  place-items:center;
  background:var(--sand);
  box-shadow:0 8px 18px rgba(0,0,0,.16);
}
.store-play::before {
  content:"";
  width:5px;
  height:5px;
  border-radius:1px;
  background:var(--ink);
  box-shadow:7px 0 var(--ink),0 7px var(--ink),7px 7px var(--ink);
  transform:translate(-3.5px,-3.5px);
}

.phone-ghost {
  position:absolute;
  width:calc(var(--active-phone-w) * .92);
  aspect-ratio:.505;
  border-radius:50px;
  border:1px solid rgba(236,232,223,.1);
  background:linear-gradient(145deg, rgba(88,99,82,.08), rgba(59,45,35,.18));
  box-shadow:0 28px 60px rgba(0,0,0,.2);
}
.phone-ghost--left { transform:translate(-88px, 20px) rotate(-12deg) scale(.92); opacity:.42; }
.phone-ghost--right { transform:translate(88px, 22px) rotate(11deg) scale(.92); opacity:.31; }

.phone-nav {
  position:absolute;
  z-index:12;
  left:50%;
  bottom:2px;
  width:min(270px,82%);
  min-height:42px;
  padding:5px;
  display:none;
  grid-template-columns:38px minmax(0,1fr) 38px;
  align-items:center;
  gap:6px;
  border:1px solid rgba(236,232,223,.14);
  border-radius:999px;
  background:rgba(12,19,14,.82);
  box-shadow:0 16px 34px rgba(0,0,0,.24),inset 0 1px rgba(255,255,255,.055);
  backdrop-filter:blur(14px);
  transform:translateX(-50%);
}
.phone-stage.is-lite .phone-nav { display:grid; }
.phone-nav button {
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border:1px solid rgba(236,232,223,.14);
  border-radius:50%;
  color:var(--cream);
  background:rgba(236,232,223,.065);
  font-size:16px;
  cursor:pointer;
  transition:background .22s ease,border-color .22s ease,opacity .22s ease;
}
.phone-nav button:hover:not(:disabled),.phone-nav button:focus-visible {
  border-color:rgba(216,206,187,.4);
  background:rgba(216,206,187,.15);
}
.phone-nav button:disabled { opacity:.28; cursor:not-allowed; }
.phone-nav span {
  overflow:hidden;
  color:rgba(236,232,223,.72);
  font:600 8px/1.2 "Manrope",sans-serif;
  letter-spacing:.1em;
  text-align:center;
  text-overflow:ellipsis;
  text-transform:uppercase;
  white-space:nowrap;
}

.scroll-note {
  position:absolute;
  right:clamp(24px,4vw,68px);
  bottom:28px;
  display:flex; gap:10px; align-items:center;
  color:rgba(236,232,223,.35);
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:9px;
  transition:color .35s ease, transform .45s var(--ease);
}
.scroll-note i { width:28px; height:1px; overflow:hidden; background:rgba(236,232,223,.18); position:relative; }
.scroll-note i::after {
  content:"";
  position:absolute;
  inset:0;
  background:var(--sand);
  transform:translateX(-100%);
}
.phone-stage.is-focused .scroll-note { color:rgba(236,232,223,.62); transform:translateY(-2px); }
.phone-stage.is-focused .scroll-note i::after { animation:scrollSweep 1.8s ease-in-out infinite; }
.phone-stage.is-final .scroll-note { color:var(--sand); }
@keyframes scrollSweep { 50%,100% { transform:translateX(100%); } }

.universe-section {
  min-height:100svh;
  padding:clamp(96px,12vh,130px) clamp(24px,6vw,110px) clamp(64px,8vh,100px);
  position:relative;
  display:grid;
  grid-template-columns:minmax(440px,.82fr) minmax(0,1.18fr);
  align-items:center;
  gap:clamp(48px,5vw,88px);
  overflow:hidden;
  background:radial-gradient(54rem 42rem at 72% 50%,var(--glow-primary),transparent 70%), linear-gradient(150deg,var(--forest-deep),var(--bg-primary) 62%,color-mix(in srgb,var(--wood-deep) 45%,var(--bg-primary)));
}
.universe-section::before {
  content:"";
  position:absolute;
  width:70vw;
  aspect-ratio:1;
  right:-17vw;
  top:50%;
  transform:translateY(-50%);
  border-radius:50%;
  pointer-events:none;
  background:repeating-radial-gradient(ellipse at 67% 52%,transparent 0 54px,rgba(180,211,171,.035) 55px 56px), radial-gradient(circle at 72% 50%,rgba(167,200,154,.08),transparent 54%);
}
.universe-copy { max-width:640px; position:relative; z-index:5; }
.universe-copy h2 { font-size:clamp(44px,3.6vw,64px); line-height:1.02; }
.universe-copy > p:last-child { max-width:500px; color:var(--muted); line-height:1.75; margin:26px 0 0; }

.universe {
  min-width:0;
  min-height:520px;
  height:clamp(520px,calc(100svh - 160px),680px);
  position:relative;
  display:grid;
  place-items:center;
  perspective:1200px;
  cursor:grab;
  user-select:none;
  touch-action:pan-y;
}
.universe:active { cursor:grabbing; }
#pineforgeCanvas {
  width:min(350px, 34vw);
  height:min(500px, 52vw);
  max-height:520px;
  position:relative;
  z-index:5;
  pointer-events:auto;
}
.orbit-ring {
  position:absolute;
  left:50%;
  top:50%;
  border:1px solid rgba(236,232,223,.08);
  border-radius:50%;
  transform:translate(-50%,-50%) rotateX(67deg) rotateZ(-8deg);
  border-color:color-mix(in srgb,var(--border-soft) 72%,var(--forge-copper) 28%);
}
.orbit-ring--one { width:88%; height:64%; }
.orbit-ring--two { width:72%; height:52%; opacity:.55; transform:translate(-50%,-50%) rotateX(67deg) rotateZ(8deg); }

.orbit-cards { position:absolute; inset:0; z-index:8; pointer-events:none; }
.orbit-card {
  position:absolute;
  left:50%; top:50%;
  width:clamp(142px,9vw,156px);
  padding:9px 9px 12px;
  border:1px solid rgba(236,232,223,.12);
  border-radius:18px;
  background:rgba(28,33,29,.74);
  backdrop-filter:blur(12px);
  box-shadow:0 20px 42px rgba(0,0,0,.2);
  text-align:left;
  transform-origin:center;
  pointer-events:auto;
  cursor:pointer;
  will-change:transform,opacity;
  transition:border-color .25s ease, background .25s ease;
}
.orbit-card:hover { border-color:rgba(216,206,187,.32); background:rgba(36,49,40,.85); }
.orbit-thumb {
  display:block; height:80px; border-radius:12px; margin-bottom:10px; overflow:hidden;
  border:1px solid rgba(236,232,223,.06);
}
.orbit-card small { color:rgba(236,232,223,.42); text-transform:uppercase; letter-spacing:.13em; font-size:8px; }
.orbit-card b { display:block; margin-top:4px; font:500 13px/1.2 "Manrope",sans-serif; }
.drag-hint {
  position:absolute; bottom:32px; left:50%; transform:translateX(-50%);
  display:flex; gap:10px; align-items:center;
  color:rgba(236,232,223,.36);
  font-size:9px; letter-spacing:.14em; text-transform:uppercase;
}

@media (min-width:1051px) {
  .universe { margin-inline:-30px -80px; }
}

.build-section { padding:150px clamp(24px, 11vw, 190px) 170px; border-top:1px solid rgba(236,232,223,.06); }
.build-heading { max-width:750px; margin-bottom:100px; }
.build-heading h2 { font-size:clamp(46px,6vw,90px); line-height:1; }

.process-tree {
  position:relative;
  max-width:1020px;
  margin:0 auto;
  min-height:760px;
}
.process-stem {
  position:absolute;
  left:50%; top:0; bottom:0;
  width:80px; height:100%;
  transform:translateX(-50%);
  overflow:visible;
}
.process-stem path {
  fill:none;
  stroke:rgba(216,206,187,.18);
  stroke-width:1.3;
  stroke-linecap:round;
  vector-effect:non-scaling-stroke;
  stroke:color-mix(in srgb,var(--forge-copper) 42%,var(--border-strong));
}
.process-step {
  width:46%;
  min-height:110px;
  display:grid;
  grid-template-columns:46px 1fr;
  gap:20px;
  align-items:start;
  margin-bottom:14px;
  opacity:.54;
  transition:opacity .35s ease, transform .35s ease;
}
.process-step:nth-of-type(2){ margin-top:70px; }
.process-step--left { margin-right:auto; padding-right:42px; }
.process-step--right { margin-left:auto; padding-left:42px; }
.process-step.active { opacity:1; }
.process-step > span {
  width:42px;
  height:42px;
  border-radius:50%;
  border:1px solid rgba(216,206,187,.2);
  display:grid;
  place-items:center;
  font:500 10px/1 "Manrope",sans-serif;
  background:var(--surface-glass-strong);
  box-shadow:0 0 0 7px color-mix(in srgb,var(--accent-primary) 9%,transparent);
}
.process-step small { color:var(--moss); letter-spacing:.16em; font:600 9px/1 "Manrope",sans-serif; }
.process-step h3 { margin:8px 0 10px; font:500 22px/1.25 "Manrope",sans-serif; letter-spacing:-.035em; }
.process-step p { margin:0; color:var(--muted); font-size:13px; line-height:1.65; }

.contact-section {
  min-height:95svh;
  padding:150px clamp(24px,8vw,145px) 44px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  position:relative;
  background:radial-gradient(circle at 50% 50%, rgba(116,91,67,.16), transparent 26rem), linear-gradient(to bottom, transparent, rgba(36,49,40,.14));
  background:radial-gradient(48rem 34rem at 50% 28%,var(--glow-primary),transparent 70%), linear-gradient(180deg,var(--bg-secondary),color-mix(in srgb,var(--wood-deep) 40%,var(--bg-primary)));
}
.contact-mark-wrap {
  width:110px;
  height:110px;
  border-radius:50%;
  border:1px solid rgba(216,206,187,.12);
  display:grid;
  place-items:center;
  margin-bottom:30px;
  border-color:color-mix(in srgb,var(--border-soft) 65%,var(--forge-copper) 35%);
}
.contact-mark-wrap img { width:50px; }
.contact-section h2 { font-size:clamp(48px,7vw,108px); line-height:.98; }
.contact-link {
  display:flex;
  align-items:center;
  gap:30px;
  margin-top:48px;
  border-bottom:1px solid rgba(216,206,187,.24);
  padding:0 4px 10px;
  font:500 clamp(16px,1.4vw,20px)/1 "Manrope",sans-serif;
  color:var(--text-primary);
  border-color:var(--border-strong);
  text-decoration-thickness:1px;
  text-underline-offset:9px;
}
.contact-link span { color:var(--sand); }

.social-links {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin-top:32px;
}
.social-link {
  width:188px;
  padding:10px 12px 10px 10px;
  display:grid;
  grid-template-columns:36px 1fr auto;
  gap:10px;
  align-items:center;
  text-align:left;
  border:1px solid var(--line);
  border-radius:16px;
  background:color-mix(in srgb,var(--cream) 3%,transparent);
  transition:transform .35s var(--ease),border-color .3s ease,background .3s ease;
}
.social-link:hover {
  transform:translateY(-3px);
  border-color:var(--line-strong);
  background:color-mix(in srgb,var(--cream) 7%,transparent);
}
.social-link:focus-visible { outline:2px solid var(--sand); outline-offset:3px; }
.social-icon {
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  border-radius:11px;
  color:var(--sand);
}
.social-icon svg { width:19px; height:19px; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.social-icon--linkedin { font:700 13px/1 "Manrope",sans-serif; letter-spacing:-.04em; }
.social-copy { display:flex; flex-direction:column; gap:3px; }
.social-copy small { color:var(--muted); font-size:7px; letter-spacing:.13em; text-transform:uppercase; }
.social-copy b { font:600 11px/1.1 "Manrope",sans-serif; }
.social-link em { color:var(--sand); font-style:normal; font-size:12px; }

footer {
  position:absolute;
  left:clamp(24px,4vw,72px); right:clamp(24px,4vw,72px); bottom:28px;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  color:rgba(236,232,223,.32);
  font-size:10px;
}
footer p:last-child { justify-self:end; }
.footer-brand { color:var(--cream); transform:scale(.9); transform-origin:left; }
.dialog-body h3 { margin:0; font:500 54px/1 "Manrope",sans-serif; letter-spacing:-.055em; }
.button-primary,.button-secondary {
  padding:13px 16px; border-radius:999px; font-size:11px;
  border:1px solid rgba(236,232,223,.14);
}
.button-primary {
  background:var(--sand);
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:linear-gradient(115deg,var(--accent-primary),var(--accent-soft),color-mix(in srgb,var(--accent-primary) 86%,var(--accent-secondary)));
  background-size:180% 100%;
  color:var(--bg-primary);
  border-color:transparent;
  box-shadow:0 12px 34px color-mix(in srgb,var(--accent-primary) 22%,transparent),inset 0 1px rgba(255,255,255,.28);
  transition:transform .3s var(--ease),box-shadow .3s ease,background-position .45s ease;
}
.dialog-close {
  position:absolute;
  right:18px;
  top:18px;
  width:40px;
  height:40px;
  border-radius:50%;
  border:1px solid rgba(236,232,223,.12);
  font-size:24px;
  cursor:pointer;
  z-index:12;
  min-width:44px;
  min-height:44px;
  border-color:rgba(255,255,255,.18);
  background:rgba(7,16,10,.58);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
}

/* Light mode keeps the same forest character with paper, sage and bark tones. */
:root[data-theme="light"] .brand img,
:root[data-theme="light"] .hero-mark,
:root[data-theme="light"] .contact-mark-wrap img {
  filter:brightness(.42) saturate(.8) drop-shadow(0 14px 28px rgba(25,32,25,.12));
}
:root[data-theme="light"] .nav { color:rgba(25,32,25,.64); }
:root[data-theme="light"] .growth-line { background:rgba(25,32,25,.12); }
:root[data-theme="light"] .growth-labels span { color:rgba(25,32,25,.3); }
:root[data-theme="light"] .growth-labels span.active { color:var(--sand); }
:root[data-theme="light"] .hero-tree-lines i {
  background:linear-gradient(to top,rgba(25,32,25,.25),transparent);
}
:root[data-theme="light"] .hero-ring { border-color:rgba(25,32,25,.14); }
:root[data-theme="light"] .hero-ring::after { box-shadow:0 0 18px rgba(83,96,82,.25); }
:root[data-theme="light"] .scroll-cue { color:rgba(25,32,25,.52); }
:root[data-theme="light"] .phone-section,
:root[data-theme="light"] .build-section { border-color:rgba(25,32,25,.08); }
:root[data-theme="light"] .section-index span { color:rgba(25,32,25,.34); }
:root[data-theme="light"] .section-progress i { background:rgba(25,32,25,.13); }
:root[data-theme="light"] .phone-stage.is-focused .section-copy { opacity:.86; filter:saturate(.92); }
:root[data-theme="light"] .scroll-note { color:rgba(25,32,25,.4); }
:root[data-theme="light"] .phone-stage.is-focused .scroll-note { color:rgba(25,32,25,.68); }
:root[data-theme="light"] .orbit-ring { border-color:rgba(25,32,25,.1); }
:root[data-theme="light"] .drag-hint { color:rgba(25,32,25,.42); }
:root[data-theme="light"] .process-stem path { stroke:rgba(25,32,25,.2); }
:root[data-theme="light"] .process-step > span { border-color:rgba(25,32,25,.2); }
:root[data-theme="light"] .contact-mark-wrap { border-color:rgba(25,32,25,.14); }
:root[data-theme="light"] .contact-link { border-color:rgba(25,32,25,.24); }
:root[data-theme="light"] footer { color:rgba(25,32,25,.42); }

/* Device and modal surfaces intentionally stay dark in both themes. */
.phone-stack,
.project-dialog,
.orbit-card {
  --ink:#151814;
  --ink-2:#1c211d;
  --pine:#243128;
  --moss:#586352;
  --cream:#ece8df;
  --sand:#d8cebb;
  --line:rgba(236,232,223,.12);
  --line-strong:rgba(236,232,223,.2);
  --muted:rgba(236,232,223,.62);
}
:root[data-theme="light"] .orbit-card { color:#ece8df; }

@media (max-width: 1050px) {
  .nav { display:none; }
  .site-header { grid-template-columns:1fr 1fr; }
  .growth-rail { display:none; }
  .phone-stage {
    min-height: 760px;
    padding-inline:40px;
    gap:32px;
  }
  .universe-section {
    grid-template-columns:1fr;
    padding-top:120px;
  }
  .universe-copy { max-width:720px; }
  .universe { height:auto; min-height:680px; }
}

@media (max-width: 760px) {
  .site-header { height:72px; padding-inline:20px; }
  .nav-cta { font-size:11px; }
  .header-actions { gap:12px; }
  .theme-toggle { padding:5px; }
  .theme-toggle-label { display:block; min-width:28px; font-size:7px; }
  .brand { font-size:11px; }
  .brand img { width:23px; }
  .hero { padding-inline:22px; }
  .hero-mark-wrap { width:112px; height:112px; }
  .hero-mark { width:56px; }
  .scroll-cue { bottom:24px; }

  .phone-stage {
    height:100svh;
    min-height:720px;
    padding:88px 22px 30px;
    grid-template-columns:1fr;
    grid-template-rows:auto 1fr;
    gap:14px;
  }
  .phone-stage .section-copy,
  .phone-stage .phone-stack {
    grid-column:1;
  }
  .phone-stage .section-copy { grid-row:1; }
  .phone-stage .phone-stack { grid-row:2; }
  .section-copy h2 { font-size:36px; }
  .section-copy > p:not(.eyebrow) { display:none; }
  .section-index { position:absolute; right:0; top:4px; margin:0; }
  .section-index strong { font-size:30px; }
  .section-progress { width:112px; margin-top:12px; }
  .phone-stack { min-height:0; height:100%; }
  .phone-stack::before { width:calc(min(57vh,560px) * .72); }
  .phone-focus-status { top:2px; padding:7px 10px; font-size:7px; }
  .phone-stage.is-lite .phone-stack { padding-bottom:50px; }
  .phone { height:min(57vh,560px); width:auto; }
  .phone-stage.is-lite .phone { height:min(50vh,500px); }
  .phone-ghost { height:calc(min(57vh,560px) * .92); width:auto; }
  .phone-stage.is-lite .phone-ghost { height:calc(min(50vh,500px) * .92); }
  .phone-ghost--left { transform:translate(-48px,15px) rotate(-10deg) scale(.9); }
  .phone-ghost--right { transform:translate(48px,15px) rotate(10deg) scale(.9); }
  .scroll-note { display:none; }
  .phone-panel { padding:47px 14px 17px; gap:11px; }
  .project-meta h3 { font-size:24px; }
  .project-meta p { font-size:10px; }
  .phone-cta { min-height:40px; margin-top:10px; padding-left:15px; font-size:11px; }
  .phone-cta i { width:28px; height:28px; font-size:12px; }
  .store-play { width:26px; height:26px; border-radius:8px; }

  .universe-section { padding:100px 20px 90px; }
  .universe-copy h2 { font-size:40px; }
  .universe-copy > p:last-child { font-size:13px; }
  .universe { min-height:590px; margin-inline:-20px; }
  #pineforgeCanvas { width:220px; height:360px; }
  .orbit-card { width:112px; padding:6px 6px 9px; border-radius:14px; }
  .orbit-thumb { height:55px; border-radius:9px; }
  .orbit-card b { font-size:11px; }
  .orbit-ring--one { width:95%; }
  .orbit-ring--two { width:78%; }

  .build-section { padding:110px 22px 120px; }
  .build-heading { margin-bottom:60px; }
  .process-stem { left:20px; transform:none; width:50px; }
  .process-step,
  .process-step--left,
  .process-step--right {
    width:100%; margin-left:0; margin-right:0; padding:0 0 0 70px;
    grid-template-columns:36px 1fr;
  }
  .process-step > span { width:34px; height:34px; }
  .process-step:nth-of-type(2){ margin-top:0; }

  .contact-section { min-height:980px; padding-inline:22px; padding-bottom:92px; }
  .social-links { width:100%; flex-direction:column; gap:9px; margin-top:26px; }
  .social-link { width:min(100%,280px); }
  footer { grid-template-columns:1fr auto; }
  footer > p:nth-child(2) { display:none; }
  footer p:last-child { justify-self:end; }
  .project-dialog[open] { grid-template-columns:1fr; }
  .dialog-preview { min-height:260px; }
  .dialog-body { padding:38px 26px 34px; }
  .dialog-body h3 { font-size:40px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:smooth; }
  *, *::before, *::after {
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}

/* =========================================================
   COMPANY LAYER — navigation, credibility and project depth
   ========================================================= */
.page-progress {
  position:fixed;
  inset:0 0 auto;
  height:2px;
  pointer-events:none;
  background:transparent;
  z-index:var(--z-progress);
}
.page-progress i {
  display:block; width:100%; height:100%; transform:scaleX(0); transform-origin:left;
  background:linear-gradient(90deg,var(--moss),var(--sand),var(--cone));
  box-shadow:0 0 18px color-mix(in srgb,var(--sand) 35%,transparent);
}

.site-header::after {
  content:"";
  position:absolute;
  height:1px;
  opacity:0;
  transition:opacity .35s ease;
  inset:auto 24px 0;
  background:linear-gradient(90deg,transparent,var(--border-strong),transparent);
}
.site-header.is-scrolled {
  border-bottom-color:var(--line);
  height:66px;
  background:color-mix(in srgb,var(--surface-glass-strong) 92%,transparent);
  border-color:var(--border-soft);
  -webkit-backdrop-filter:blur(22px) saturate(135%);
  backdrop-filter:blur(22px) saturate(135%);
  box-shadow:var(--shadow-soft),inset 0 1px rgba(255,255,255,.07);
}
.site-header.is-scrolled::after { opacity:1; }
.nav a::after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-10px;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .35s var(--ease);
  background:linear-gradient(90deg,var(--accent-primary),var(--accent-secondary));
  height:2px;
  border-radius:2px;
}
.nav a.active { color:var(--cream); }
.nav a.active::after { transform:scaleX(1); }

.motion-toggle {
  display:flex; align-items:center; gap:7px; padding:6px 9px; border:1px solid var(--line);
  border-radius:999px; background:transparent; color:var(--muted); cursor:pointer;
}
.motion-toggle > span:first-child { width:18px; height:12px; display:flex; align-items:center; justify-content:center; gap:2px; }
.motion-toggle i { display:block; width:2px; height:8px; border-radius:2px; background:currentColor; animation:motionBars 1s ease-in-out infinite alternate; }
.motion-toggle i:nth-child(2) { height:12px; animation-delay:-.35s; }
.motion-toggle i:nth-child(3) { height:6px; animation-delay:-.7s; }
.motion-toggle b { font:600 7px/1 "Manrope",sans-serif; letter-spacing:.13em; text-transform:uppercase; }
.motion-toggle[aria-pressed="true"] i { animation-play-state:paused; height:5px; }
.motion-toggle:focus-visible,.menu-toggle:focus-visible,.back-to-top:focus-visible { outline:2px solid var(--sand); outline-offset:3px; }
@keyframes motionBars { to { height:3px; opacity:.45; } }

.menu-toggle {
  display:none; width:42px; height:42px; border:1px solid var(--line); border-radius:50%;
  background:color-mix(in srgb,var(--cream) 4%,transparent); cursor:pointer; position:relative; z-index:3;
}
.menu-toggle i { position:absolute; left:12px; width:17px; height:1px; background:currentColor; transition:transform .35s var(--ease),top .35s var(--ease); }
.menu-toggle i:first-child { top:16px; }.menu-toggle i:last-child { top:23px; }
.menu-toggle[aria-expanded="true"] i:first-child { top:20px; transform:rotate(45deg); }
.menu-toggle[aria-expanded="true"] i:last-child { top:20px; transform:rotate(-45deg); }
.mobile-nav { display:none; }

.hero-kinetic {
  display:flex; align-items:center; gap:.35em; min-height:31px; margin:18px 0 0;
  color:var(--muted); font:500 13px/1 "Manrope",sans-serif; letter-spacing:.08em; text-transform:uppercase;
}
.hero-kinetic strong { color:var(--sand); min-width:86px; text-align:left; }
.hero-actions { display:flex; align-items:center; justify-content:center; gap:12px; margin-top:25px; }
.hero-actions .button-primary,.featured-actions .button-primary {
  display:inline-flex; align-items:center; justify-content:center; gap:24px; min-height:50px; padding:0 20px;
  border:0; cursor:pointer; transition:transform .35s var(--ease),box-shadow .35s ease;
}
.hero-actions .button-primary:hover,.featured-actions .button-primary:hover { transform:translateY(-3px); box-shadow:0 14px 30px rgba(0,0,0,.16); }
.hero-actions .button-secondary,.featured-actions .button-secondary { min-height:50px; display:inline-flex; align-items:center; justify-content:center; padding-inline:19px; }
.hero-trust {
  position:absolute;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  width:min(680px,calc(100% - 210px));
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border:1px solid var(--line);
  border-radius:18px;
  overflow:hidden;
  border-color:var(--border-soft);
  background:var(--surface-glass);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(135%);
  backdrop-filter:blur(var(--glass-blur)) saturate(135%);
  box-shadow:var(--shadow-soft),inset 0 1px rgba(255,255,255,.08);
  max-width:680px;
  border-color:color-mix(in srgb,var(--border-soft) 78%,var(--forge-copper) 22%);
}
.hero-trust > span { min-height:54px; display:flex; align-items:center; justify-content:center; gap:8px; padding:10px 14px; border-right:1px solid var(--line); }
.hero-trust > span:last-child { border:0; }
.hero-trust i { width:7px; height:7px; border-radius:50%; background:#8ea77f; box-shadow:0 0 0 5px rgba(142,167,127,.12); animation:statusPulse 2s ease-in-out infinite; }
.hero-trust small { color:var(--muted); font-size:7px; letter-spacing:.14em; }
.hero-trust b { font:600 10px/1.2 "Manrope",sans-serif; }
.scroll-cue { left:clamp(24px,4vw,72px); }
@keyframes statusPulse { 50% { box-shadow:0 0 0 8px rgba(142,167,127,0); } }

.studio-section,.capabilities-section,.work-archive,.principles-section,.faq-section {
  position:relative; padding:150px clamp(24px,8vw,145px); border-top:1px solid var(--line); overflow:hidden;
}
.studio-section {
  min-height:100svh;
  display:grid;
  align-content:center;
  gap:70px 10vw;
  background:radial-gradient(42rem 30rem at 88% 12%,var(--glow-primary),transparent 72%), linear-gradient(180deg,var(--bg-primary),var(--bg-secondary));
  grid-template-columns:minmax(0,1.08fr) minmax(330px,.72fr);
}
.studio-heading h2,.section-heading-row h2,.archive-head h2,.principles-heading h2,.faq-heading h2,.featured-copy h2 {
  margin:0; font:500 clamp(46px,6vw,92px)/.98 "Manrope",sans-serif; letter-spacing:-.055em;
}
.studio-heading h2 span,.section-heading-row h2 span,.archive-head h2 span,.principles-heading h2 span,.faq-heading h2 span,.featured-copy h2 span { color:var(--sand); font-weight:400; }
.studio-story { max-width:610px; padding-left:clamp(0px,4vw,68px); }
.studio-story p { margin:0; color:var(--muted); line-height:1.75; }
.studio-story .studio-lead {
  margin-bottom:25px;
  font:500 clamp(22px,2vw,31px)/1.35 "Manrope",sans-serif;
  letter-spacing:-.035em;
  color:var(--text-primary);
}
.studio-metrics { grid-column:1/-1; display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); }
.studio-metrics article { min-height:190px; padding:36px 34px; border-right:1px solid var(--line); }
.studio-metrics article:last-child { border:0; }
.studio-metrics strong { display:block; font:500 clamp(58px,6vw,92px)/.85 "Manrope",sans-serif; letter-spacing:-.07em; }
.studio-metrics span { display:block; margin-top:22px; font:600 12px/1 "Manrope",sans-serif; text-transform:uppercase; letter-spacing:.12em; }
.studio-metrics small { display:block; margin-top:8px; color:var(--muted); }
.studio-orbit {
  position:absolute;
  width:38vw;
  aspect-ratio:1;
  right:-14vw;
  top:-10vw;
  pointer-events:none;
}
.studio-orbit i { position:absolute; inset:0; border:1px solid var(--line); }
.studio-orbit i:nth-child(2) { inset:15%; }.studio-orbit i:nth-child(3) { inset:30%; }

.capabilities-section { background:linear-gradient(180deg,color-mix(in srgb,var(--pine) 18%,transparent),transparent); }
.section-heading-row,.archive-head { display:grid; grid-template-columns:1.25fr .75fr; gap:8vw; align-items:end; margin-bottom:75px; }
.section-heading-row > p { max-width:480px; justify-self:end; margin:0; color:var(--muted); line-height:1.75; }
.capability-card {
  min-height:330px; padding:30px; position:relative; border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  background:color-mix(in srgb,var(--cream) 1.5%,transparent); transform-style:preserve-3d; overflow:hidden;
  transition:background .35s ease,border-color .35s ease;
}
.capability-card:nth-child(3n) { border-right:0; }.capability-card:nth-child(n+4) { border-bottom:0; }
.capability-card::before { content:""; position:absolute; width:240px; aspect-ratio:1; left:var(--spot-x,50%); top:var(--spot-y,50%); transform:translate(-50%,-50%); background:radial-gradient(circle,color-mix(in srgb,var(--sand) 14%,transparent),transparent 68%); opacity:0; transition:opacity .3s ease; pointer-events:none; }
.capability-card:hover::before { opacity:1; }.capability-card:hover { background:color-mix(in srgb,var(--cream) 4%,transparent); }
.capability-card > span { font:500 9px/1 "Manrope",sans-serif; letter-spacing:.15em; }
.capability-card > i {
  position:absolute;
  right:28px;
  top:26px;
  font:normal 22px/1 serif;
}
.capability-card h3 { margin:112px 0 14px; font:500 27px/1.1 "Manrope",sans-serif; letter-spacing:-.04em; }
.capability-card .preserve-case { text-transform:none; }
.capability-card p { margin:0; max-width:330px; color:var(--muted); font-size:13px; line-height:1.65; }
.capability-card small {
  left:30px;
  bottom:27px;
  color:var(--sand);
  font-size:8px;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.craft-marquee { padding:25px 0; border-block:1px solid var(--line); overflow:hidden; background:color-mix(in srgb,var(--cone) 8%,transparent); }
.craft-marquee-track { width:max-content; display:flex; align-items:center; gap:34px; animation:craftLoop 28s linear infinite; }
.craft-marquee span { font:500 clamp(24px,2.3vw,38px)/1 "Manrope",sans-serif; letter-spacing:-.04em; white-space:nowrap; }
.craft-marquee i { color:var(--sand); font-style:normal; }
@keyframes craftLoop { to { transform:translateX(-50%); } }

.featured-work {
  min-height:100svh;
  padding:130px clamp(24px,6vw,110px);
  display:grid;
  gap:7vw;
  align-items:center;
  border-top:1px solid var(--line);
  position:relative;
  overflow:hidden;
  background:radial-gradient(42rem 32rem at 78% 45%,var(--glow-warm),transparent 68%), linear-gradient(150deg,color-mix(in srgb,var(--wood-deep) 72%,var(--bg-primary)),var(--bg-primary));
  grid-template-columns:minmax(320px,.7fr) minmax(0,1.3fr);
}
.featured-copy > p:not(.eyebrow) { max-width:540px; margin:28px 0 0; color:var(--muted); line-height:1.75; }
.featured-actions { display:flex; gap:12px; margin-top:34px; }
.featured-visual {
  position:relative;
  border:1px solid var(--line);
  overflow:hidden;
  background:#111712;
  color:#ece8df;
  cursor:pointer;
  isolation:isolate;
  border-color:var(--border-soft);
  box-shadow:var(--shadow-float),inset 0 1px rgba(255,255,255,.08);
  aspect-ratio:1.34;
  min-height:540px;
  border-radius:38px 38px 112px 38px;
  border-color:color-mix(in srgb,var(--border-soft) 70%,var(--forge-copper) 30%);
}
.featured-visual::after { content:""; position:absolute; inset:0; z-index:8; box-shadow:inset 0 0 100px rgba(0,0,0,.36); pointer-events:none; }
.featured-badge { position:absolute; z-index:12; left:28px; bottom:28px; display:flex; align-items:center; gap:12px; text-align:left; }
.featured-badge i { width:46px; height:46px; display:grid; place-items:center; border:1px solid rgba(236,232,223,.32); border-radius:50%; font-style:normal; backdrop-filter:blur(8px); transition:transform .35s var(--ease),background .35s ease; }
.featured-visual:hover .featured-badge i { transform:scale(1.12); background:#d8cebb; color:#151814; }
.featured-badge b { font:600 9px/1.3 "Manrope",sans-serif; letter-spacing:.12em; text-transform:uppercase; }
.featured-visual > small { position:absolute; z-index:12; top:27px; left:28px; letter-spacing:.13em; text-transform:uppercase; color:rgba(236,232,223,.55); }

.archive-head { margin-bottom:54px; }.archive-head > div:last-child { justify-self:end; }
.work-filters {
  display:flex;
  gap:7px;
  padding:5px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--surface-glass);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  box-shadow:inset 0 1px rgba(255,255,255,.06);
}
.work-filters button { padding:9px 12px; border:0; border-radius:999px; background:transparent; color:var(--muted); cursor:pointer; font-size:10px; }.work-filters span { opacity:.55; margin-left:4px; }
.project-card {
  border-bottom:1px solid var(--line);
  background:transparent;
  cursor:pointer;
  position:relative;
  transition:opacity .3s ease,transform .45s var(--ease);
}
.project-card[hidden] { display:none; }
.project-card-art {
  display:block;
  overflow:hidden;
  position:relative;
  background:#151b16;
}
.project-card small { color:var(--sand); font-size:8px; letter-spacing:.14em; text-transform:uppercase; }
.project-card h3 { margin:8px 0 0; font:500 28px/1 "Manrope",sans-serif; letter-spacing:-.04em; }
.project-card em {
  right:0;
  bottom:25px;
  color:var(--muted);
  font-style:normal;
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.1em;
  position:static;
  grid-column:2;
  grid-row:3;
  align-self:end;
  justify-self:end;
  margin:0 10px 2px 0;
  white-space:nowrap;
  transition:transform .28s var(--ease),color .28s ease;
}

.principles-section { display:grid; grid-template-columns:.8fr 1.2fr; gap:9vw; align-items:start; }
.principles-heading { position:sticky; top:130px; }
.principle-list article {
  padding:36px 0;
  display:grid;
  grid-template-columns:48px 1fr auto;
  gap:24px;
  border-top:1px solid var(--line);
  align-items:start;
}
.principle-list article:last-child { border-bottom:1px solid var(--line); }
.principle-list > article > span { color:var(--sand); font:600 9px/1 "Manrope",sans-serif; letter-spacing:.15em; }
.principle-list h3 { margin:0 0 15px; font:500 clamp(25px,2.2vw,36px)/1.1 "Manrope",sans-serif; letter-spacing:-.04em; }
.principle-list p { max-width:520px; margin:0; color:var(--muted); line-height:1.7; }
.principle-list > article > i {
  width:68px;
  height:68px;
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  color:var(--sand);
  font:400 24px/1 "Manrope",sans-serif;
  transition:transform .45s var(--ease),background .3s ease;
}
.principle-list article:hover > i { transform:rotate(12deg) scale(1.06); background:color-mix(in srgb,var(--sand) 10%,transparent); }

.studio-cta {
  display:grid;
  grid-template-columns:1fr 1fr;
  border-block:1px solid var(--line);
  background:linear-gradient(135deg,var(--bg-primary),color-mix(in srgb,var(--wood-primary) 35%,var(--bg-primary)));
  gap:18px;
  padding-inline:clamp(24px,6vw,110px);
}
.studio-cta article {
  min-height:520px;
  padding:90px clamp(34px,7vw,120px);
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.studio-cta article::before { content:""; position:absolute; width:320px; aspect-ratio:1; right:-170px; top:-170px; border:1px solid var(--line); border-radius:50%; box-shadow:0 0 0 45px color-mix(in srgb,var(--sand) 2%,transparent),0 0 0 90px color-mix(in srgb,var(--sand) 2%,transparent); transition:transform .8s var(--ease); }
.studio-cta article:hover::before { transform:translate(-24px,24px) scale(1.08); }
.studio-cta small { color:var(--sand); text-transform:uppercase; letter-spacing:.17em; }
.studio-cta h2 { margin:22px 0 18px; font:500 clamp(46px,5vw,78px)/1 "Manrope",sans-serif; letter-spacing:-.055em; }
.studio-cta p { max-width:470px; margin:0; color:var(--muted); line-height:1.7; }
.studio-cta a { width:max-content; margin-top:36px; padding-bottom:8px; border-bottom:1px solid var(--line-strong); }.studio-cta a span { margin-left:22px; color:var(--sand); }

.faq-section {
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:9vw;
  background:linear-gradient(180deg,var(--bg-primary),var(--bg-secondary));
}
.faq-heading { position:sticky; top:130px; align-self:start; }
.faq-list details {
  border-top:1px solid var(--line);
  padding-inline:22px;
  border-color:var(--border-soft);
  border-radius:18px;
}.faq-list details:last-child { border-bottom:1px solid var(--line); }
.faq-list summary {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  cursor:pointer;
  list-style:none;
  font:500 clamp(17px,1.5vw,22px)/1.3 "Manrope",sans-serif;
}
.faq-list summary::-webkit-details-marker { display:none; }.faq-list summary i {
  width:30px;
  height:30px;
  border:1px solid var(--line);
  border-radius:50%;
  position:relative;
  flex:0 0 auto;
  background:var(--surface-soft);
  border-color:var(--border-soft);
}
.faq-list summary i::before,.faq-list summary i::after { content:""; position:absolute; left:8px; right:8px; top:14px; height:1px; background:currentColor; transition:transform .3s ease; }.faq-list summary i::after { transform:rotate(90deg); }
.faq-list details[open] summary i::after { transform:rotate(0); }
.faq-list details > div { display:grid; grid-template-rows:0fr; transition:grid-template-rows .4s var(--ease); }.faq-list details[open] > div { grid-template-rows:1fr; }
.faq-list details p { overflow:hidden; margin:0; padding:0 64px 30px 0; color:var(--muted); line-height:1.75; }

.back-to-top {
  right:22px;
  bottom:22px;
  width:54px;
  height:54px;
  border:1px solid var(--line);
  border-radius:50%;
  backdrop-filter:blur(16px);
  color:var(--cream);
  display:grid;
  place-items:center;
  cursor:pointer;
  opacity:0;
  visibility:hidden;
  transform:translateY(12px);
  transition:opacity .3s ease,visibility .3s ease,transform .3s var(--ease),background .3s ease;
  background:var(--surface-glass-strong);
  border-color:var(--border-soft);
  box-shadow:var(--shadow-soft);
}
.back-to-top.visible { opacity:1; visibility:visible; transform:none; }.back-to-top span { font-size:16px; line-height:.7; }.back-to-top small { font-size:7px; letter-spacing:.12em; text-transform:uppercase; }

.dialog-next {
  margin-top:34px;
  padding:18px 0 0;
  display:flex;
  justify-content:space-between;
  border:0;
  background:transparent;
  cursor:pointer;
  color:#ece8df;
}.dialog-next span { color:rgba(236,232,223,.5); font-size:9px; letter-spacing:.12em; text-transform:uppercase; }.dialog-next b { font:500 11px/1 "Manrope",sans-serif; }

:root.motion-paused *,:root.motion-paused *::before,:root.motion-paused *::after { animation-play-state:paused !important; }

@media (max-width:1050px) {
  .menu-toggle { display:block; }
  .mobile-nav {
    display:flex; position:fixed; inset:0; z-index:2; padding:120px 30px 40px; flex-direction:column;
    background:color-mix(in srgb,var(--ink) 97%,transparent); backdrop-filter:blur(24px);
    opacity:0; visibility:hidden; transform:translateY(-18px); transition:opacity .35s ease,visibility .35s ease,transform .45s var(--ease);
  }
  .mobile-nav.open { opacity:1; visibility:visible; transform:none; }
  .mobile-nav > span { margin-bottom:25px; color:var(--sand); font-size:8px; letter-spacing:.17em; text-transform:uppercase; }
  .mobile-nav > a { border-bottom:1px solid var(--line); font:500 clamp(30px,7vw,54px)/1 "Manrope",sans-serif; letter-spacing:-.04em; }
  .mobile-nav > a b { display:inline-block; width:34px; color:var(--muted); font-size:9px; letter-spacing:.1em; }
  .mobile-nav > small {
    color:var(--muted);
    letter-spacing:.13em;
    text-transform:uppercase;
    margin-top:28px;
  }
  body.menu-open { overflow:hidden; }.studio-story { padding:0; max-width:720px; }.capability-grid { grid-template-columns:repeat(2,1fr); }.capability-card:nth-child(3n) { border-right:1px solid var(--line); }.capability-card:nth-child(2n) { border-right:0; }.capability-card:nth-child(n+4) { border-bottom:1px solid var(--line); }.capability-card:nth-child(n+5) { border-bottom:0; }.featured-copy { max-width:760px; }.featured-visual { width:min(100%,820px); justify-self:center; }
  .project-grid { grid-template-columns:repeat(2,1fr); }
  .principles-section,.faq-section { grid-template-columns:1fr; }.principles-heading,.faq-heading { position:relative; top:0; }
}

@media (max-width:760px) {
  .header-actions { gap:7px; }.motion-toggle b { display:none; }.motion-toggle { width:37px; height:37px; justify-content:center; padding:0; }.nav-cta { display:none; }.menu-toggle { width:38px; height:38px; }.menu-toggle i { left:10px; }
  .hero { min-height:840px; padding:108px 20px 138px; justify-content:flex-start; }.hero-mark-wrap { margin-top:16px; }.hero h1 { font-size:clamp(46px,14vw,68px); }.hero-copy { font-size:13px; margin-top:21px; }.hero-kinetic { margin-top:14px; }.hero-actions {
    flex-direction:column;
    width:100%;
    margin-top:20px;
    gap:10px;
  }.hero-actions a { width:min(100%,290px); }.hero-trust > span { min-height:36px; border-right:0; border-bottom:1px solid var(--line); }.hero-trust > span:last-child { border-bottom:0; }.scroll-cue { display:none; }
  .studio-section,.capabilities-section,.work-archive,.principles-section,.faq-section { padding:100px 22px; }.studio-section { gap:44px; }.studio-heading h2,.section-heading-row h2,.archive-head h2,.principles-heading h2,.faq-heading h2,.featured-copy h2 { font-size:42px; }.studio-story .studio-lead { font-size:21px; }.studio-metrics article { min-height:140px; padding:28px 0; border-right:0; border-bottom:1px solid var(--line); }.studio-metrics article:last-child { border-bottom:0; }.studio-metrics strong { font-size:58px; }
  .section-heading-row,.archive-head { grid-template-columns:1fr; gap:30px; margin-bottom:45px; }.section-heading-row > p { justify-self:start; }.capability-grid { border-radius:28px; }.capability-card,.capability-card:nth-child(2n),.capability-card:nth-child(3n),.capability-card:nth-child(n+4),.capability-card:nth-child(n+5) { min-height:290px; border-right:0; border-bottom:1px solid var(--line); }.capability-card:last-child { border-bottom:0; }.capability-card h3 { margin-top:92px; }
  .craft-marquee { padding-block:19px; }.craft-marquee-track { gap:23px; }
  .featured-work { min-height:auto; padding:100px 22px; gap:50px; }.featured-actions { flex-direction:column; }.featured-actions > * { width:100%; }.featured-badge { left:20px; bottom:20px; }.featured-visual > small { top:20px; left:20px; right:20px; line-height:1.5; }
  .archive-head > div:last-child { justify-self:start; }.work-filters { width:100%; }.work-filters button { flex:1; }.project-grid { gap:38px; }.project-card-art { height:400px; border-radius:20px; }.project-card em { bottom:26px; }.principle-list > article > i { display:none; }
  .studio-cta { grid-template-columns:1fr; padding:90px 18px; }.studio-cta article { min-height:430px; padding:70px 24px; }.studio-cta article:first-child { border-right:0; border-bottom:1px solid var(--line); }
  .faq-list summary { min-height:86px; font-size:17px; }.faq-list details p { padding-right:18px; }
  .back-to-top { right:14px; bottom:14px; width:48px; height:48px; }
  .dialog-next { margin-top:25px; }
}

@media (max-width:430px) {
  .theme-toggle-label { display:none; }.theme-toggle { width:37px; height:37px; padding:0; justify-content:center; }.theme-toggle-track { width:27px; }.theme-toggle-track i { width:11px; height:11px; }:root[data-theme="light"] .theme-toggle-track i { transform:translateX(12px); }
  .project-card-art { height:330px; }
}

@media (prefers-reduced-motion:reduce) {
  .craft-marquee-track { animation:none; transform:none; }
  .hero-trust i,.motion-toggle i { animation:none; }
}

/* =========================================================
   Stability, responsive behaviour and shared company components
   (formerly css/production.css)
   ========================================================= */
/* Production hardening and modular company sections. */

html,body { overflow-x:hidden;overflow-x:clip; }
html { scroll-padding-top:82px; }
main,section,article,header,footer,nav,div { min-width:0; }
section[id] { scroll-margin-top:80px; }
.skip-link {
  position:fixed; z-index:calc(var(--z-progress) + 10); left:18px; top:14px;
  padding:11px 15px; border-radius:999px; color:var(--ink); background:var(--sand);
  font:600 10px/1 "Manrope",sans-serif; letter-spacing:.08em; text-transform:uppercase;
  transform:translateY(-160%); transition:transform .2s ease;
}
.skip-link:focus { transform:translateY(0); outline:2px solid var(--cream); outline-offset:3px; }
*[aria-disabled="true"] { cursor:not-allowed; opacity:.62; }
main:focus { outline:none; }

.ui-scroll-locked { overscroll-behavior:none; }
.ui-scroll-locked body { touch-action:none; }

.language-switch {
  min-height:34px; padding:4px 7px; display:flex; align-items:center; gap:5px;
  border:1px solid var(--line); border-radius:999px; background:color-mix(in srgb,var(--cream) 3%,transparent);
}
.language-switch button {
  min-width:28px; min-height:24px; padding:0 5px; border:0; border-radius:999px;
  background:transparent; color:var(--muted); cursor:pointer;
  font:600 8px/1 "Manrope",sans-serif; letter-spacing:.1em;
  transition:background .25s ease,color .25s ease;
}
.language-switch button.active { background:var(--sand); color:var(--ink); }
.language-switch button:focus-visible { outline:2px solid var(--sand); outline-offset:3px; }
.language-switch i { width:1px; height:10px; background:var(--line-strong); }
.mobile-preferences { margin-top:24px; display:flex; align-items:center; justify-content:space-between; gap:14px; }
.mobile-motion-toggle {
  min-height:42px; padding:0 15px; border:1px solid var(--line); border-radius:999px;
  background:transparent; color:var(--muted); font:600 8px/1 "Manrope",sans-serif;
  letter-spacing:.12em; text-transform:uppercase; cursor:pointer;
}

.purpose-section,.team-section,.partners-section {
  position:relative; padding:150px clamp(24px,8vw,145px); border-top:1px solid var(--line);
}
.purpose-section {
  overflow:hidden;
  background:radial-gradient(36rem 32rem at 0 50%,var(--glow-primary),transparent 70%), linear-gradient(180deg,var(--bg-secondary),color-mix(in srgb,var(--moss-primary) 34%,var(--bg-primary)));
}
.purpose-heading h2,.people-heading h2 {
  margin:0; font:500 clamp(46px,6vw,92px)/.98 "Manrope",sans-serif; letter-spacing:-.055em;
}
.purpose-heading h2 span,.people-heading h2 span { color:var(--sand); font-weight:400; }
.purpose-grid { margin-top:75px; display:grid; }
.purpose-grid article {
  padding:clamp(34px,5vw,72px);
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  position:relative;
  background:color-mix(in srgb,var(--cream) 2%,transparent);
}
.purpose-grid article:first-child { border-right:1px solid var(--line); }
.purpose-grid article::before { content:""; position:absolute; width:210px; aspect-ratio:1; right:-70px; top:-70px; border:1px solid var(--line); border-radius:50%; box-shadow:0 0 0 32px color-mix(in srgb,var(--sand) 2%,transparent),0 0 0 64px color-mix(in srgb,var(--sand) 2%,transparent); }
.purpose-grid span { color:var(--sand); font:600 9px/1 "Manrope",sans-serif; letter-spacing:.16em; text-transform:uppercase; }
.purpose-grid h3 { max-width:530px; margin:26px 0 18px; font:500 clamp(29px,3vw,46px)/1.08 "Manrope",sans-serif; letter-spacing:-.045em; }
.purpose-grid p { max-width:570px; margin:0; color:var(--muted); line-height:1.75; }
.purpose-note { max-width:920px; margin:68px auto 0; text-align:center; color:var(--muted); font:400 clamp(20px,2.2vw,34px)/1.5 "Manrope",sans-serif; letter-spacing:-.025em; }
.purpose-note strong { color:var(--cream); font-weight:500; }
.people-heading { display:grid; grid-template-columns:1.2fr .8fr; gap:8vw; align-items:end; margin-bottom:70px; }
.people-heading > p { max-width:500px; justify-self:end; margin:0; color:var(--muted); line-height:1.75; }
.people-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.person-card { border:1px solid var(--line); border-radius:30px; overflow:hidden; background:color-mix(in srgb,var(--cream) 2%,transparent); }
.person-media {
  min-height:320px;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:linear-gradient(145deg,color-mix(in srgb,var(--forest-primary) 65%,transparent),color-mix(in srgb,var(--wood-primary) 50%,transparent));
}
.person-media img { width:100%; height:100%; object-fit:cover; }.person-media > span { font:500 62px/1 "Manrope",sans-serif; color:var(--sand); opacity:.5; }
.person-body { padding:28px; }.person-body small,.partner-card small { color:var(--sand); letter-spacing:.13em; text-transform:uppercase; }.person-body h3,.partner-card h3 { margin:10px 0 0; font:500 28px/1.1 "Manrope",sans-serif; letter-spacing:-.04em; }.person-body strong { display:block; margin-top:13px; font-size:11px; }.person-body p,.partner-card p { color:var(--muted); line-height:1.65; }.person-links { display:flex; flex-wrap:wrap; gap:12px; margin-top:22px; }.person-links a,.partner-card > a { font-size:9px; text-transform:capitalize; border-bottom:1px solid var(--line-strong); padding-bottom:4px; }

.partners-section { overflow:hidden; }
.partner-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.partner-card { min-height:250px; padding:30px; border:1px solid var(--line); border-radius:26px; background:color-mix(in srgb,var(--cream) 2%,transparent); }
.partner-card img { max-width:130px; max-height:48px; object-fit:contain; object-position:left; margin-bottom:50px; }

.verified-empty-state {
  grid-column:1/-1; min-height:280px; padding:45px; display:grid; grid-template-columns:150px 1fr;
  gap:44px; align-items:center; border:1px dashed var(--line-strong); border-radius:var(--radius-lg);
  background:linear-gradient(135deg,color-mix(in srgb,var(--moss) 9%,transparent),color-mix(in srgb,var(--cone) 5%,transparent));
}
.empty-state-mark { width:140px; aspect-ratio:1; position:relative; display:grid; place-items:center; }
.empty-state-mark i { position:absolute; inset:0; border:1px solid var(--line); border-radius:50%; }
.empty-state-mark i:nth-child(2) { inset:20%; }.empty-state-mark i:nth-child(3) { inset:40%; background:var(--sand); border:0; }
.verified-empty-state h3 { margin:0; font:500 clamp(25px,2.5vw,38px)/1.15 "Manrope",sans-serif; letter-spacing:-.04em; }
.verified-empty-state p { margin:14px 0 0; color:var(--muted); line-height:1.7; }

.project-dialog {
  padding:0;
  position:fixed;
  inset:0;
  margin:auto;
  z-index:1000;
  overscroll-behavior:contain;
  border:1px solid var(--border-strong);
  color:var(--text-primary);
  background:var(--surface-glass-strong);
  -webkit-backdrop-filter:blur(24px) saturate(130%);
  backdrop-filter:blur(24px) saturate(130%);
  box-shadow:0 42px 120px rgba(0,0,0,.48),inset 0 1px rgba(255,255,255,.08);
  scrollbar-color:var(--accent-primary) transparent;
  scrollbar-width:thin;
}
.mobile-nav {
  height:var(--viewport-height);
  max-height:100dvh;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding-top:max(110px,calc(env(safe-area-inset-top) + 88px));
  padding-bottom:max(34px,env(safe-area-inset-bottom));
  background:radial-gradient(36rem 28rem at 88% 12%,var(--glow-primary),transparent 70%), linear-gradient(155deg,var(--bg-secondary),color-mix(in srgb,var(--wood-deep) 55%,var(--bg-primary)));
  -webkit-backdrop-filter:blur(22px) saturate(130%);
  backdrop-filter:blur(22px) saturate(130%);
}

@media (max-width:1050px) {
  .language-switch--desktop { display:none; }
  .dialog-preview,.dialog-gallery-image { min-height:440px; height:52vh; }
  .mobile-nav > a { padding:12px 0; font-size:clamp(27px,6vw,48px); }
  .people-heading { grid-template-columns:1fr; gap:28px; }.people-heading > p { justify-self:start; }
  .people-grid { grid-template-columns:repeat(2,1fr); }.partner-grid { grid-template-columns:repeat(2,1fr); }
}

@media (max-width:760px) {
  .purpose-section,.team-section,.partners-section { padding:100px 22px; }
  .purpose-heading h2,.people-heading h2 { font-size:42px; }
  .purpose-grid { margin-top:45px; border-radius:28px; }.purpose-grid article { min-height:350px; padding:32px 24px; }.purpose-grid article:first-child { border-right:0; border-bottom:1px solid var(--line); }.purpose-note { margin-top:44px; text-align:left; }
  .people-heading { margin-bottom:42px; }.people-grid,.partner-grid { grid-template-columns:1fr; }
  .verified-empty-state { min-height:320px; padding:30px 24px; grid-template-columns:1fr; gap:24px; }.empty-state-mark { width:105px; }
  .project-dialog[open] { display:block; }.dialog-preview { min-height:220px; height:32vh; }.dialog-body { min-height:0; background:var(--surface-glass-strong); }
}

@media (max-width:430px) {
  .header-actions { gap:5px; }
  .motion-toggle { display:none; }
  .brand { gap:8px; }.brand span { font-size:10px; letter-spacing:.14em; }
  .mobile-nav > a { font-size:27px; }
}

@media (max-width:340px) {
  .site-header { padding-inline:14px; }.brand span { display:none; }
  .hero { padding-inline:16px; }.hero h1 { font-size:43px; }
  .phone-stage { padding-inline:16px; }
  .project-card-art { height:290px; }
}

@media (max-height:700px) and (max-width:760px) {
  .phone-stage { min-height:660px; padding-top:78px; }
  .phone { height:min(52vh,480px); }.phone-ghost { height:calc(min(52vh,480px) * .92); }
  .hero { min-height:720px; }
}

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .purpose-grid article::before { transition:none; }
}

/* Real game portfolio media ------------------------------------------------ */
.game-shot {
  position:relative;
  flex:1;
  min-height:0;
  overflow:hidden;
  border-radius:26px;
  border:1px solid rgba(236,232,223,.1);
  background:#111712;
  border-color:var(--border-soft);
  box-shadow:0 18px 42px rgba(0,0,0,.2),inset 0 1px rgba(255,255,255,.06);
}
.game-shot::after { content:""; position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 0 45px rgba(0,0,0,.18); }
.game-shot--icon { display:grid; place-items:center; padding:9%; }
.game-shot-glow { position:absolute; inset:-18%; filter:blur(34px) saturate(1.25); opacity:.5; pointer-events:none; }
.game-shot-glow img { width:100%; height:100%; display:block; object-fit:cover; }
.game-shot-icon { position:relative; z-index:1; width:auto; height:auto; max-width:100%; max-height:100%; aspect-ratio:1/1; display:block; object-fit:contain; border-radius:22%; box-shadow:0 22px 48px rgba(0,0,0,.42),0 0 0 1px rgba(255,255,255,.08); }
.performance-lite .game-shot-glow { display:none; }
.app-panel--one,.app-panel--two,.app-panel--three { color:var(--cream); background:linear-gradient(#1b221c,#10130f); }
.app-panel .project-meta > span { color:rgba(236,232,223,.43); }
.app-panel .project-meta p { color:rgba(236,232,223,.58); }

.featured-visual--media > img { width:100%; height:100%; display:block; object-fit:cover; transition:transform .9s var(--ease); }
.featured-visual--media:hover > img { transform:scale(1.035); }
.featured-visual--media > small { padding:8px 11px; border-radius:999px; background:rgba(9,14,11,.48); backdrop-filter:blur(9px); }
.project-card-art img { width:100%; height:100%; display:block; object-fit:cover; transition:transform .75s var(--ease),filter .4s ease; }
.project-card-art--portrait img { object-position:center 28%; }

.orbit-thumb img { width:100%; height:100%; display:block; object-fit:cover; transition:transform .5s var(--ease); }
.orbit-card:hover .orbit-thumb img { transform:scale(1.08); }
.universe.three-unavailable #pineforgeCanvas {
  background:url("../pineforge-mark.svg") center/104px auto no-repeat;
  opacity:.58;
}

.dialog-preview {
  position:relative;
  overflow:hidden;
  isolation:isolate;
  touch-action:pan-y;
}
.dialog-gallery-label {
  position:absolute;
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 11px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  color:#fff;
  backdrop-filter:blur(12px);
  font:600 8px/1 "Manrope",sans-serif;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.dialog-gallery-label i {
  width:7px; height:7px; border-radius:50%; background:var(--project-accent,#d8cebb);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--project-accent,#d8cebb) 20%,transparent);
}
.dialog-gallery-controls button {
  display:grid;
  place-items:center;
  border:0;
  border-radius:50%;
  color:#f5f1e9;
  background:rgba(255,255,255,.09);
  cursor:pointer;
  font-size:15px;
  transition:transform .22s var(--ease),background .22s ease;
}
.dialog-gallery-controls button:hover { transform:scale(1.06); background:var(--project-accent,#d8cebb); color:#101410; }
.dialog-gallery-controls span { min-width:50px; text-align:center; color:rgba(255,255,255,.76); font:600 8px/1 "Manrope",sans-serif; letter-spacing:.12em; }
.dialog-gallery-caption {
  z-index:5;
  left:22px;
  right:190px;
  bottom:25px;
}
.dialog-title-row {
  display:grid;
  align-items:center;
  grid-template-columns:58px minmax(0,1fr);
  gap:15px;
}
.dialog-title-row > img {
  display:block;
  object-fit:cover;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 13px 30px rgba(0,0,0,.28);
}
.dialog-title-row .eyebrow { margin:0 0 8px; margin-bottom:7px; }
.dialog-facts {
  margin:24px 0 0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  list-style:none;
  margin-top:20px;
  gap:7px;
}
.dialog-facts li {
  border:1px solid rgba(236,232,223,.12);
  border-radius:999px;
  font-size:8px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--text-secondary);
  border-color:var(--border-soft);
  background:var(--surface-soft);
  padding:8px 10px;
  background:color-mix(in srgb,var(--surface-soft) 86%,transparent);
}
.dialog-gallery {
  margin-top:24px;
  grid-column:1/-1;
  width:100%;
  margin:0;
  display:grid;
  grid-template-columns:repeat(3,minmax(84px,112px));
  justify-content:start;
  gap:9px;
}
.dialog-gallery button {
  position:relative;
  min-width:0;
  padding:0;
  overflow:hidden;
  border:1px solid rgba(236,232,223,.11);
  cursor:pointer;
  transition:opacity .24s ease,border-color .24s ease,transform .24s var(--ease);
}
.dialog-gallery img { width:100%; height:100%; display:block; object-fit:cover; background:#101510; }
.dialog-gallery button span {
  position:absolute;
  padding:4px 6px;
  border-radius:999px;
  color:#fff;
  background:rgba(7,10,8,.68);
  font:600 7px/1 "Manrope",sans-serif;
  letter-spacing:.08em;
  left:6px;
  bottom:5px;
}
.dialog-actions [hidden] { display:none !important; }

@media (min-width:1051px) {
  .project-dialog { height:min(760px,calc(var(--viewport-height) - max(56px,env(safe-area-inset-top)) - max(56px,env(safe-area-inset-bottom)))); }
  .project-dialog[open] { grid-template-rows:minmax(0,1fr); }
  .dialog-preview,.dialog-gallery-image,.dialog-body { min-height:0; }
}

@media (max-width:760px) {
  .dialog-gallery-caption { left:15px; right:150px; bottom:20px; font-size:12px; }
  .dialog-gallery-controls button { width:34px; height:34px; }
  .dialog-gallery-controls span { min-width:42px; }
  .dialog-gallery button { border-radius:10px; }
}

/* =========================================================
   Design system: Forest/Wood and Fresh Sage themes, Liquid Glass
   (formerly css/design-system.css)
   ========================================================= */
/* =========================================================
   PINEFORGE COLLECTIVE — Forest / Wood / Liquid Glass system
   This final cascade layer changes presentation only. Existing
   layout, localization, content and interaction logic stay intact.
   ========================================================= */

/* Three purposeful type roles: display, reading and technical labels. */
:where(h1,h2,h3,.route-cta strong,.site-pathway-card strong) { font-family:var(--font-display); }
:where(.eyebrow,small,.section-index,.route-summary,.game-library-note,.dialog-release-status,
.phone-focus-status,.motion-copy,.language-switch,.drag-hint,.company-feature-no) {
  font-family:var(--font-mono);font-variant-numeric:tabular-nums;
}

/* Page-level animation stop: hidden tabs and the user's motion control pause every CSS loop. */
:root.motion-document-hidden *,:root.motion-document-hidden *::before,:root.motion-document-hidden *::after {
  animation-play-state:paused !important;
}

:root[data-theme="light"] .button-primary {
  color:#fff;
  background:linear-gradient(115deg,#486f43,#52784c,#76533e);
}
:root[data-theme="light"] .work-filters button.active { color:#fff; }

@media (pointer:coarse) {
  :where(.button-primary,.button-secondary,.nav-cta,.menu-toggle,.theme-toggle,.motion-toggle,
  .language-switch button,.phone-nav button,.dialog-close,.dialog-share,.route-menu summary,
  .route-header-nav a,.route-menu nav a,.social-link) {
    min-width:44px;min-height:44px;
  }
}

:root[data-theme="light"] body {
  background:
    radial-gradient(62rem 44rem at 9% 5%,rgba(255,255,255,.72),transparent 68%),
    radial-gradient(56rem 44rem at 92% 38%,rgba(147,190,133,.27),transparent 68%),
    linear-gradient(155deg,#f3f8ef,var(--bg-primary) 46%,#d9ebcf);
}
/* Theme changes are deliberate and limited to paint properties. */
:where(.site-header,.mobile-nav,.theme-toggle,.motion-toggle,.language-switch,.menu-toggle,
.button-primary,.button-secondary,.nav-cta,.back-to-top,.project-dialog,.dialog-body,
.capability-card,.project-card,.person-card,.partner-card,.purpose-grid article,
.studio-metrics article,.principle-list article,.studio-cta article,.social-link,
.faq-list details,.orbit-card,.hero-trust,.work-filters) {
  transition-property:background-color,border-color,color,box-shadow,opacity,transform;
  transition-duration:var(--theme-duration);
  transition-timing-function:var(--ease);
}

/* Navigation — transparent at the top, denser liquid glass after scroll. */
.site-header {
  top:12px;
  left:clamp(12px,2vw,32px);
  right:clamp(12px,2vw,32px);
  height:72px;
  padding-inline:clamp(18px,2.6vw,42px);
  border:1px solid transparent;
  border-radius:24px;
  background:linear-gradient(180deg,rgba(9,24,15,.34),rgba(9,24,15,.12));
  -webkit-backdrop-filter:blur(10px) saturate(120%);
  backdrop-filter:blur(10px) saturate(120%);
}
.site-header::before {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(112deg,rgba(255,255,255,.09),transparent 27%,transparent 74%,rgba(177,131,94,.06));
  background:linear-gradient(112deg,rgba(255,255,255,.075),transparent 24%,transparent 72%,rgba(197,139,96,.075)), linear-gradient(90deg,transparent 4%,color-mix(in srgb,var(--forge-copper) 9%,transparent) 50%,transparent 96%);
}
:root[data-theme="light"] .site-header {
  background:linear-gradient(180deg,rgba(246,251,242,.62),rgba(232,244,225,.25));
}
:root[data-theme="light"] .site-header.is-scrolled { background:rgba(244,250,240,.78); }
.theme-toggle,.motion-toggle,.language-switch,.menu-toggle {
  border-color:var(--border-soft); background:var(--surface-glass); box-shadow:inset 0 1px rgba(255,255,255,.06);
  -webkit-backdrop-filter:blur(14px) saturate(125%); backdrop-filter:blur(14px) saturate(125%);
}
.theme-toggle:hover,.motion-toggle:hover,.menu-toggle:hover { border-color:var(--border-strong); background:var(--surface-glass-strong); }

/* Hero — layered forest light, walnut warmth, and a restrained mesh. */
:root[data-theme="light"] .hero {
  background:
    radial-gradient(44rem 34rem at 50% 25%,rgba(255,255,255,.8),transparent 66%),
    radial-gradient(36rem 28rem at 88% 82%,rgba(122,164,105,.22),transparent 72%),
    linear-gradient(155deg,#edf6e8,#e1efdb 52%,#d6e9ce);
}
.hero h1 span,.hero-kinetic strong { color:var(--accent-soft); }

/* Primary controls */
.button-primary::before {
  content:""; position:absolute; inset:1px 20% auto; height:45%; z-index:-1; border-radius:999px;
  background:linear-gradient(rgba(255,255,255,.2),transparent); filter:blur(8px); pointer-events:none;
}
.button-primary:hover { transform:translateY(-3px); background-position:100% 50%; box-shadow:0 18px 42px color-mix(in srgb,var(--accent-primary) 28%,transparent); }
.button-primary:hover i,.button-primary:hover span:last-child { transform:translateX(3px); }
.button-primary i,.button-primary span:last-child { transition:transform .25s var(--ease); }
.button-secondary {
  background:var(--surface-glass); border-color:var(--border-soft);
  -webkit-backdrop-filter:blur(14px) saturate(125%); backdrop-filter:blur(14px) saturate(125%);
  box-shadow:inset 0 1px rgba(255,255,255,.06);
}
.button-secondary:hover { background:var(--surface-glass-strong); border-color:var(--border-strong); transform:translateY(-2px); }

/* The page slowly travels from forest to earth and walnut. */
.team-section {
  background:
    radial-gradient(42rem 30rem at 100% 22%,var(--glow-warm),transparent 72%),
    linear-gradient(180deg,color-mix(in srgb,var(--moss-primary) 32%,var(--bg-primary)),var(--bg-primary));
}
.partners-section,.capabilities-section {
  background:linear-gradient(180deg,var(--bg-primary),color-mix(in srgb,var(--forest-primary) 28%,var(--bg-primary)));
}
.phone-section--games {
  background:
    radial-gradient(40rem 34rem at 76% 50%,var(--glow-primary),transparent 70%),
    linear-gradient(180deg,color-mix(in srgb,var(--forest-primary) 26%,var(--bg-primary)),var(--bg-primary));
}
.work-archive {
  background:linear-gradient(180deg,var(--bg-primary),color-mix(in srgb,var(--wood-primary) 25%,var(--bg-primary)));
}
.build-section,.principles-section {
  background:linear-gradient(180deg,color-mix(in srgb,var(--wood-deep) 52%,var(--bg-primary)),var(--bg-primary));
}

:root[data-theme="light"] :where(.studio-section,.purpose-section,.team-section,.partners-section,.capabilities-section,
.phone-section--games,.featured-work,.work-archive,.universe-section,.build-section,
.principles-section,.studio-cta,.faq-section,.contact-section) { border-color:var(--border-soft); }
:root[data-theme="light"] .purpose-section { background:linear-gradient(180deg,#e8f3e2,#dcebd5); }
:root[data-theme="light"] .team-section { background:linear-gradient(180deg,#dcebd5,#eaf3e4); }
:root[data-theme="light"] .featured-work { background:linear-gradient(155deg,#e9f2e3,#e0ead8 65%,#eadfd4); }
:root[data-theme="light"] .work-archive,
:root[data-theme="light"] .build-section,
:root[data-theme="light"] .principles-section { background:linear-gradient(180deg,#eaf3e4,#e2eddb); }
:root[data-theme="light"] .universe-section { background:radial-gradient(52rem 38rem at 70% 50%,rgba(106,157,92,.24),transparent 68%),linear-gradient(145deg,#dcecd6,#eef6e9); }

/* Shared liquid-glass surfaces. */
:where(.capability-card,.project-card,.person-card,.partner-card,.purpose-grid article,
.studio-metrics article,.principle-list article,.studio-cta article,.social-link,.orbit-card) {
  --glass-x:50%; --glass-y:50%;
  border-color:var(--border-soft);
  background-color:var(--surface-glass-strong);
  background-image:
    radial-gradient(280px circle at var(--glass-x) var(--glass-y),rgba(208,234,200,.105),transparent 68%),
    linear-gradient(145deg,rgba(255,255,255,.045),transparent 36%,rgba(177,131,94,.025));
  box-shadow:var(--shadow-soft),inset 0 1px rgba(255,255,255,.07),inset 0 -1px rgba(255,255,255,.018);
}
:where(.capability-card,.project-card,.person-card,.partner-card,.studio-metrics article,
.principle-list article,.studio-cta article,.social-link)::after {
  content:""; position:absolute; inset:0; z-index:0; border-radius:inherit; pointer-events:none; opacity:.34;
  background:
    radial-gradient(240px circle at var(--glass-x) var(--glass-y),rgba(225,243,219,.13),transparent 66%),
    linear-gradient(112deg,rgba(255,255,255,.1),transparent 24%,transparent 76%);
  transition:opacity .3s ease;
}
:where(.capability-card,.project-card,.person-card,.partner-card,.studio-metrics article,
.principle-list article,.studio-cta article,.social-link) > * { position:relative; z-index:1; }
:where(.capability-card,.project-card,.person-card,.partner-card,.principle-list article,.studio-cta article,.social-link):hover {
  border-color:var(--border-strong);
  box-shadow:var(--shadow-card),inset 0 1px rgba(255,255,255,.1);
}
:root[data-theme="light"] :where(.capability-card,.project-card,.person-card,.partner-card,.purpose-grid article,
.studio-metrics article,.principle-list article,.studio-cta article,.social-link,.orbit-card) {
  background-color:var(--surface-glass);
  background-image:radial-gradient(280px circle at var(--glass-x) var(--glass-y),rgba(255,255,255,.64),transparent 66%),linear-gradient(145deg,rgba(255,255,255,.26),transparent 50%);
  box-shadow:var(--shadow-soft),inset 0 1px rgba(255,255,255,.6);
}

/* Pineforge Liquid Surface — the application showcase's pointer-following
   woodland light, shared by the primary cards across the main site. */
.is-liquid-surface {
  --liquid-x:50%;
  --liquid-y:8%;
  position:relative;
  isolation:isolate;
  overflow:hidden;
}
.hero-trust.is-liquid-surface { position:absolute; }
.orbit-card.is-liquid-surface { position:absolute; }
.is-liquid-surface > .liquid-pointer-light {
  position:absolute !important;
  z-index:8 !important;
  inset:-1px !important;
  display:block;
  overflow:hidden;
  border:1px solid rgba(235,207,178,.08);
  border-radius:inherit;
  pointer-events:none;
  opacity:.3;
  background:
    radial-gradient(150px circle at var(--liquid-x) var(--liquid-y),rgba(255,250,236,.2),rgba(214,168,123,.075) 42%,transparent 72%),
    radial-gradient(440px circle at var(--liquid-x) var(--liquid-y),rgba(169,204,153,.09),transparent 67%),
    linear-gradient(112deg,rgba(255,255,255,.075),transparent 23%,transparent 72%,rgba(185,137,99,.045));
  box-shadow:inset 0 1px rgba(255,248,235,.06),inset 0 -1px rgba(124,82,52,.04);
  mix-blend-mode:screen;
  transition:opacity .26s ease,border-color .26s ease,box-shadow .26s ease;
  contain:strict;
}
.is-liquid-surface > .liquid-pointer-light::before {
  content:"";
  position:absolute;
  left:var(--liquid-x);
  top:var(--liquid-y);
  width:230px;
  height:104px;
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(255,248,224,.32),rgba(231,181,132,.1) 40%,transparent 72%);
  filter:blur(8px);
  opacity:.15;
  transform:translate(-50%,-50%) rotate(-12deg) scale(.72);
  transition:opacity .25s ease,transform .34s var(--ease);
}
.is-liquid-surface > .liquid-pointer-light::after {
  content:"";
  position:absolute;
  left:var(--liquid-x);
  top:var(--liquid-y);
  width:88px;
  aspect-ratio:1;
  border:1px solid rgba(255,235,204,.24);
  border-radius:42% 58% 48% 52%;
  opacity:0;
  transform:translate(-50%,-50%) scale(.45) rotate(18deg);
  box-shadow:0 0 22px rgba(220,166,113,.08),inset 0 0 18px rgba(255,246,225,.05);
  transition:opacity .22s ease,transform .36s var(--ease);
}
.is-liquid-surface.is-liquid-active > .liquid-pointer-light,
.is-liquid-surface.is-liquid-focus > .liquid-pointer-light,
.is-liquid-surface:focus-visible > .liquid-pointer-light { opacity:1;border-color:rgba(236,207,176,.24);box-shadow:inset 0 1px rgba(255,250,238,.16),inset 0 -1px rgba(133,91,59,.08); }
.is-liquid-surface.is-liquid-active > .liquid-pointer-light::before,
.is-liquid-surface.is-liquid-focus > .liquid-pointer-light::before,
.is-liquid-surface:focus-visible > .liquid-pointer-light::before { opacity:1;transform:translate(-50%,-50%) rotate(-12deg) scale(1); }
.is-liquid-surface.is-liquid-active > .liquid-pointer-light::after,
.is-liquid-surface.is-liquid-focus > .liquid-pointer-light::after,
.is-liquid-surface:focus-visible > .liquid-pointer-light::after { opacity:.72;transform:translate(-50%,-50%) scale(1) rotate(0); }
:root[data-theme="light"] .is-liquid-surface > .liquid-pointer-light {
  border-color:rgba(112,76,50,.07);
  background:
    radial-gradient(160px circle at var(--liquid-x) var(--liquid-y),rgba(255,255,255,.78),rgba(255,247,231,.28) 46%,transparent 74%),
    radial-gradient(440px circle at var(--liquid-x) var(--liquid-y),rgba(129,171,111,.08),transparent 68%),
    linear-gradient(112deg,rgba(255,255,255,.24),transparent 25%,transparent 72%,rgba(126,83,53,.035));
  mix-blend-mode:soft-light;
}
:root[data-theme="light"] .is-liquid-surface.is-liquid-active > .liquid-pointer-light { border-color:rgba(121,82,55,.18); }
.process-step > .is-liquid-surface { transition:translate .32s var(--ease),border-color .3s ease,box-shadow .3s ease; }
.process-step > .is-liquid-surface.is-liquid-active { translate:0 -4px;border-color:var(--border-strong);box-shadow:var(--shadow-card),inset 0 1px rgba(255,255,255,.1); }

@media (hover:none) and (pointer:coarse) {
  .is-liquid-surface > .liquid-pointer-light { display:none; }
}
.performance-lite .is-liquid-surface > .liquid-pointer-light,
.data-saver .is-liquid-surface > .liquid-pointer-light,
.motion-paused .is-liquid-surface > .liquid-pointer-light { display:none; }
@media (prefers-reduced-motion:reduce),(prefers-reduced-transparency:reduce) {
  .is-liquid-surface > .liquid-pointer-light { display:none; }
  .process-step > .is-liquid-surface.is-liquid-active { translate:0; }
}

.studio-metrics { border:1px solid var(--border-soft); overflow:hidden; box-shadow:var(--shadow-soft); }
.studio-metrics article { position:relative; }
.purpose-grid,.capability-grid { border-color:var(--border-soft); box-shadow:var(--shadow-card); }
.purpose-grid article:first-child { border-color:var(--border-soft); }
.person-card,.partner-card { position:relative; }

/* Games — covers remain the hero; glass builds a clear content frame. */
.featured-visual::before {
  content:"";
  position:absolute;
  z-index:9;
  inset:0;
  pointer-events:none;
  background:linear-gradient(115deg,rgba(255,255,255,.13),transparent 20%,transparent 70%,rgba(16,29,19,.24)), linear-gradient(180deg,transparent 64%,rgba(4,10,6,.3));
}
.project-grid {
  display:grid;
  gap:22px;
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:start;
}
.project-card {
  padding:10px 10px 24px;
  overflow:hidden;
  border:1px solid var(--border-soft);
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-rows:auto auto auto;
  column-gap:16px;
  text-align:left;
  isolation:isolate;
}
.project-card:hover { transform:translateY(-5px) scale(1.008); }
.project-card small { grid-column:1/-1; margin-left:10px; }
.project-card:hover em { transform:translateX(4px); color:var(--text-primary); }
.project-card:hover .project-card-art img { filter:saturate(1.06); transform:scale(1.035); }
.work-filters button.active { background:var(--accent-primary); color:var(--bg-primary); box-shadow:0 6px 18px var(--glow-primary); }

/* Phone showcase and supporting floating surfaces. */
.phone-focus-status,.scroll-note,.drag-hint {
  border-color:var(--border-soft); background:var(--surface-glass);
  -webkit-backdrop-filter:blur(14px) saturate(125%); backdrop-filter:blur(14px) saturate(125%);
  box-shadow:var(--shadow-soft),inset 0 1px rgba(255,255,255,.06);
}

/* Process, principles, CTA, FAQ and contact share the same material language. */
.process-step > div {
  border-color:var(--border-soft);
  background:var(--surface-glass-strong);
  box-shadow:var(--shadow-soft);
  border-radius:26px;
}
.principle-list article { position:relative; padding-inline:24px; border:1px solid transparent; border-radius:24px; }
.principle-list article:hover { transform:translateX(4px); border-color:var(--border-soft); }
.studio-cta article { position:relative; overflow:hidden; border:1px solid var(--border-soft); border-radius:34px; }
.studio-cta article:first-child { background:color-mix(in srgb,var(--moss) 11%,transparent); border-right:1px solid var(--border-soft); }
.studio-cta article a span { transition:transform .25s var(--ease); }
.studio-cta article a:hover span { transform:translateX(4px); }
.faq-list details[open] { background:var(--surface-glass); border-radius:20px; box-shadow:inset 0 1px rgba(255,255,255,.05); }
.social-link { position:relative; overflow:hidden; border-color:var(--border-soft); }

/* Modal and menus keep legibility above complex scenes. */
.project-dialog::backdrop { background:rgba(3,10,6,.72); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.dialog-body { color:var(--text-primary); position:relative; }
:root[data-theme="light"] .project-dialog { color:var(--text-primary); background:rgba(239,247,234,.92); }
:root[data-theme="light"] .project-dialog::backdrop { background:rgba(22,42,28,.42); }
:root[data-theme="light"] .dialog-body { color:var(--text-primary); }

/* Accessible, consistent interaction states. */
:where(a,button,summary,[tabindex]):focus-visible { outline:3px solid var(--accent-primary); outline-offset:4px; }
::selection { background:var(--accent-primary); color:var(--bg-primary); }

@media (hover:none),(pointer:coarse) {
  :where(.capability-card,.project-card,.person-card,.partner-card,.purpose-grid article,
  .studio-metrics article,.principle-list article,.studio-cta article,.social-link,.orbit-card) {
    --glass-x:50%; --glass-y:0%;
  }
  .project-card:hover,.principle-list article:hover { transform:none; }
}

@media (max-width:1050px) {
  .site-header { top:8px; left:10px; right:10px; border-radius:21px; }
  .project-grid { gap:16px; }
  .project-card { border-radius:26px; }
  .studio-cta { gap:12px; }
}

@media (max-width:760px) {
  :root { --glass-blur:12px; --section-pad-x:22px; --section-pad-y:100px; }
  body { background-attachment:scroll; }
  .site-header { top:6px; height:64px; padding-inline:14px; border-radius:19px; }
  .site-header.is-scrolled { height:60px; }
  .hero-actions .button-primary,
  .hero-actions .button-secondary { min-height:48px; }
  .hero-trust { grid-template-columns:1fr; width:calc(100% - 36px); bottom:26px; }
  .studio-metrics { grid-template-columns:1fr; border-radius:28px; }
  .project-card { padding:8px 8px 21px; }
  .studio-cta article { border-radius:28px; }
  .principle-list article { grid-template-columns:35px 1fr; padding-inline:16px; }
}

@media (max-width:430px) {
  .hero-trust { grid-template-columns:1fr; width:min(250px,calc(100% - 44px)); }
  .hero-trust > span { min-height:38px; border-right:0; border-bottom:1px solid var(--border-soft); }
  .hero-trust > span:last-child { border-bottom:0; }
  .project-card h3 { max-width:none; font-size:25px; }
  .project-card em { grid-column:1/-1; grid-row:auto; justify-self:start; margin:12px 10px 0; }
}

@media (prefers-reduced-motion:reduce) {
  :where(.project-card,.capability-card,.person-card,.partner-card,.principle-list article,
  .studio-cta article,.social-link,.button-primary,.button-secondary) { transform:none !important; }
  .project-card-art img,.featured-visual img { transform:none !important; }
}

/* =========================================================
   EXPERIENCE QUALITY LAYER
   Routing feedback, robust media states and inclusive fallbacks.
   ========================================================= */

.sr-only {
  position:absolute !important; width:1px !important; height:1px !important; padding:0 !important;
  margin:-1px !important; overflow:hidden !important; clip:rect(0,0,0,0) !important;
  white-space:nowrap !important; border:0 !important;
}

.noscript-message {
  position:relative; z-index:200; padding:14px 20px; text-align:center;
  color:var(--text-primary); background:var(--wood-primary); border-bottom:1px solid var(--border-warm);
  font:600 12px/1.5 "Manrope",sans-serif;
}

:where(button,a,summary) { -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
:where(.project-card,.capability-card,.person-card,.partner-card,.orbit-card,.featured-visual) { contain:paint; }
.work-filters:focus-within { border-color:var(--border-strong); box-shadow:0 0 0 4px var(--glow-primary); }
.project-card:focus-visible { transform:translateY(-4px); border-color:var(--accent-primary); box-shadow:var(--shadow-card),0 0 0 3px var(--glow-primary); }
.dialog-share {
  position:absolute; z-index:4; top:19px; right:70px; min-height:42px; padding:0 13px;
  display:inline-flex; align-items:center; gap:8px; border:1px solid var(--border-soft); border-radius:999px;
  color:var(--text-secondary); background:var(--surface-glass); cursor:pointer;
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  box-shadow:inset 0 1px rgba(255,255,255,.07);
}
.dialog-share span { font-size:14px; transition:transform .25s var(--ease); }
.dialog-share b { font:600 8px/1 "Manrope",sans-serif; letter-spacing:.1em; text-transform:uppercase; }
.dialog-share:hover { color:var(--text-primary); border-color:var(--border-strong); background:var(--surface-glass-strong); }
.dialog-share:hover span { transform:translate(2px,-2px); }
.dialog-project-position {
  display:block;
  color:var(--text-secondary);
  font:600 8px/1 "Manrope",sans-serif;
  letter-spacing:.13em;
  margin-top:8px;
}

.dialog-project-nav {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
  border-top:1px solid var(--border-soft);
}
.dialog-project-nav > span { color:var(--text-secondary); font:600 8px/1 "Manrope",sans-serif; letter-spacing:.12em; }
.dialog-previous,.dialog-next {
  min-height:45px; margin:0; padding:0; display:flex; flex-direction:column; justify-content:center;
  gap:7px; border:0; background:transparent; color:var(--text-primary); cursor:pointer;
}
.dialog-previous { align-items:flex-start; text-align:left; }
.dialog-next { align-items:flex-end; text-align:right; border-top:0; }
.dialog-previous span,.dialog-next span { color:var(--text-secondary); font:600 8px/1 "Manrope",sans-serif; letter-spacing:.12em; text-transform:uppercase; }
.dialog-previous:hover b { transform:translateX(-3px); color:var(--accent-soft); }
.dialog-next:hover b { transform:translateX(3px); color:var(--accent-soft); }

.dialog-gallery-progress {
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:3px;
  background:rgba(255,255,255,.08);
  overflow:hidden;
  z-index:6;
}
.dialog-gallery-progress i {
  display:block; width:100%; height:100%; transform:scaleX(.3333); transform-origin:left;
  background:linear-gradient(90deg,var(--project-accent,#93b887),rgba(255,255,255,.85));
  transition:transform .34s var(--ease);
}
.dialog-preview::before {
  content:""; position:absolute; z-index:7; left:50%; top:50%; width:34px; height:34px;
  margin:-17px 0 0 -17px; border:2px solid rgba(255,255,255,.16); border-top-color:var(--project-accent,#93b887);
  border-radius:50%; opacity:0; pointer-events:none; transition:opacity .18s ease; animation:mediaSpin .8s linear infinite;
}
.dialog-preview.is-loading::before { opacity:1; }
.dialog-preview.is-loading .dialog-gallery-image { opacity:.5; }
@keyframes mediaSpin { to { transform:rotate(1turn); } }

.media-error { position:relative; background:linear-gradient(145deg,var(--forest-deep),var(--wood-deep)) !important; }
.media-error::before {
  content:"◇"; position:absolute; z-index:3; inset:0; display:grid; place-items:center;
  color:var(--accent-soft); font:400 32px/1 "Manrope",sans-serif; opacity:.7;
}
.media-error > img,img.media-error { opacity:0; }

.ui-toast {
  position:fixed; z-index:1300; left:50%; bottom:max(24px,env(safe-area-inset-bottom));
  min-width:min(320px,calc(100vw - 32px)); max-width:calc(100vw - 32px); padding:14px 18px;
  border:1px solid var(--border-strong); border-radius:999px; color:var(--text-primary);
  background:var(--surface-glass-strong); text-align:center; box-shadow:var(--shadow-float);
  -webkit-backdrop-filter:blur(20px) saturate(135%); backdrop-filter:blur(20px) saturate(135%);
  font:600 10px/1.35 "Manrope",sans-serif; letter-spacing:.04em;
  opacity:0; visibility:hidden; transform:translate(-50%,12px); pointer-events:none;
  transition:opacity .25s ease,visibility .25s ease,transform .3s var(--ease);
}
.ui-toast.is-visible { opacity:1; visibility:visible; transform:translate(-50%,0); }
.project-dialog::-webkit-scrollbar { width:7px; }
.project-dialog::-webkit-scrollbar-thumb { background:var(--accent-primary); border-radius:99px; }

/* Browsers without backdrop-filter still receive an opaque, readable material. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  :where(.site-header,.hero-trust,.mobile-nav,.project-dialog,.dialog-share,.button-secondary,
  .capability-card,.project-card,.person-card,.partner-card,.purpose-grid article,.studio-metrics article,
  .principle-list article,.studio-cta article,.social-link,.orbit-card,.ui-toast) {
    background-color:var(--bg-secondary);
  }
  :root[data-theme="light"] :where(.site-header,.hero-trust,.mobile-nav,.project-dialog,.dialog-share,.button-secondary,
  .capability-card,.project-card,.person-card,.partner-card,.purpose-grid article,.studio-metrics article,
  .principle-list article,.studio-cta article,.social-link,.orbit-card,.ui-toast) { background-color:#f3f8ef; }
}

@media (prefers-reduced-transparency:reduce) {
  :root { --surface-glass:var(--bg-secondary); --surface-glass-strong:var(--bg-secondary); }
  :where(.site-header,.mobile-nav,.hero-trust,.project-dialog,.dialog-share,.ui-toast) {
    -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  }
}

@media (prefers-contrast:more) {
  :root { --border-soft:rgba(240,243,234,.42); --border-strong:rgba(240,243,234,.7); --text-secondary:#d7ded3; }
  :root[data-theme="light"] { --border-soft:rgba(23,48,36,.38); --border-strong:rgba(23,48,36,.68); --text-secondary:#304c39; }
  :where(.button-primary,.button-secondary,.project-card,.capability-card,.dialog-share) { border-width:2px; }
}

@media (forced-colors:active) {
  * { forced-color-adjust:auto; }
  .hero-tree-lines,.studio-orbit,.process-stem { display:none !important; }
  :where(.project-card,.capability-card,.button-primary,.button-secondary,.dialog-share,.dialog-close,.site-header) { border:1px solid CanvasText; }
  :where(a,button,summary):focus-visible { outline:3px solid Highlight; }
}

.data-saver .hero-tree-lines { display:none; }
.data-saver :where(.site-header,.hero-trust,.project-dialog,.project-card,.capability-card) {
  -webkit-backdrop-filter:none; backdrop-filter:none;
}

@media (max-width:760px) {
  .dialog-share { top:13px; right:16px; min-height:38px; padding-inline:11px; }
  .dialog-share b { display:none; }
  .dialog-project-nav { gap:8px; }
  .dialog-previous b,.dialog-next b { max-width:105px; }
  .ui-toast { bottom:max(16px,env(safe-area-inset-bottom)); }
}

@media (max-width:380px) {
  .dialog-project-nav > span { display:none; }
  .dialog-project-nav { grid-template-columns:1fr 1fr; }
}

/* =========================================================
   PINEFORGE COLLECTIVE — Editorial visual direction
   A quiet growth-ring environment, forged copper details and
   varied section rhythm. Paint-only where possible; no heavy media.
   ========================================================= */

/* A single low-cost environment layer carries the brand through the page. */
.visual-environment {
  position:fixed;
  z-index:2;
  inset:-18vmax;
  pointer-events:none;
  overflow:hidden;
  opacity:.2;
  contain:strict;
  transform:translateZ(0);
}
.visual-environment::before {
  content:"";
  position:absolute;
  width:82vmax;
  aspect-ratio:1;
  left:-19vmax;
  top:20vh;
  border-radius:46% 54% 48% 52%;
  background:repeating-radial-gradient(ellipse at 48% 52%,transparent 0 66px,rgba(180,211,171,.055) 67px 68px);
  transform:rotate(-14deg);
}
.visual-environment i {
  position:absolute;
  display:block;
  width:34vmax;
  aspect-ratio:1;
  border:1px solid color-mix(in srgb,var(--forge-copper) 12%,transparent);
  border-radius:46% 54% 43% 57%;
}
.visual-environment i:first-child { right:5vmax; top:14vh; transform:rotate(24deg); }
.visual-environment i:last-child { right:23vmax; bottom:7vh; width:20vmax; transform:rotate(-18deg); }
:root[data-theme="light"] .visual-environment { opacity:.14; mix-blend-mode:multiply; }

main { position:relative; z-index:1; }
.site-header {
  position:fixed;
  z-index:var(--z-header,80);
  border-color:color-mix(in srgb,var(--border-soft) 78%,transparent);
  box-shadow:0 18px 54px rgba(1,8,4,.1),inset 0 1px rgba(255,255,255,.055);
  grid-template-columns:minmax(190px,1fr) auto minmax(390px,1fr);
  column-gap:clamp(22px,2.2vw,38px);
}
.growth-rail { position:fixed; z-index:var(--z-rail,50); }
.back-to-top { position:fixed; z-index:var(--z-floating,70); }

/* Type: editorial display scale with comfortable reading measures. */
:where(.hero h1,.studio-heading h2,.purpose-heading h2,.people-heading h2,.section-heading-row h2,
.featured-copy h2,.archive-head h2,.universe-copy h2,.build-heading h2,.principles-heading h2,
.company-heading h2,.faq-heading h2,.contact-section h2) {
  text-wrap:balance;
  font-kerning:normal;
}
:where(.hero-copy,.studio-story p,.section-heading-row>p,.people-heading>p,.company-heading>p,
.purpose-grid p,.capability-card p,.featured-copy>p,.universe-copy>p,.principle-list p,.faq-list p) {
  text-wrap:pretty;
}
.studio-heading h2,.purpose-heading h2,.people-heading h2,.section-heading-row h2,
.archive-head h2,.principles-heading h2,.faq-heading h2,.company-heading h2 { max-width:13ch; }

/* The copper seed is the only recurring accent; the rest stays quiet. */
.eyebrow {
  margin:0 0 18px;
  color:var(--sand);
  font:600 11px/1 "Manrope", sans-serif;
  text-transform:uppercase;
  width:max-content;
  max-width:100%;
  display:flex;
  align-items:center;
  gap:10px;
  color:color-mix(in srgb,var(--text-secondary) 82%,var(--forge-copper));
  font-size:10px;
  letter-spacing:.19em;
}
.eyebrow::before {
  content:"";
  width:6px;
  height:6px;
  flex:0 0 auto;
  border:1px solid var(--forge-copper);
  transform:rotate(45deg);
  box-shadow:0 0 14px color-mix(in srgb,var(--forge-copper) 30%,transparent);
}
.hero-eyebrow { justify-content:center; margin-inline:auto; }

main > section:not(.hero) { isolation:isolate; }
main > section:not(.hero)::after {
  content:"";
  position:absolute;
  z-index:5;
  left:var(--section-pad-x);
  right:var(--section-pad-x);
  bottom:0;
  height:1px;
  pointer-events:none;
  background:var(--forge-rule);
  opacity:.72;
}

/* Navigation receives a more deliberate edge and clearer brand presence. */
.nav a { position:relative; }
.nav a::before {
  content:"";
  position:absolute;
  width:3px;
  height:3px;
  left:50%;
  bottom:-11px;
  border-radius:50%;
  background:var(--forge-copper-bright);
  opacity:0;
  transform:translate(-50%,4px);
  transition:opacity .25s ease,transform .3s var(--ease);
}
.nav a:hover::before,.nav a.active::before { opacity:1; transform:translate(-50%,0); }

/* Hero: stronger depth without adding another animated object. */
.hero {
  min-height:max(760px,100svh);
  border-bottom:0;
}
.hero h1 span {
  background:linear-gradient(102deg,var(--accent-soft) 5%,color-mix(in srgb,var(--accent-soft) 72%,var(--forge-copper-bright)) 86%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hero-trust > span:nth-child(2) { position:relative; }
.hero-trust > span:nth-child(2)::before {
  content:"";
  position:absolute;
  top:0;
  left:18%;
  right:18%;
  height:1px;
  background:var(--forge-rule-warm);
}

/* About: asymmetric editorial rhythm and framed metrics. */
.studio-story { align-self:end; padding-bottom:10px; }
.studio-orbit { opacity:.13; transform:rotate(-8deg); }
.studio-orbit i { border-color:color-mix(in srgb,var(--forge-copper) 25%,var(--border-soft)); border-radius:47% 53% 46% 54%; }
.studio-metrics {
  border-radius:34px;
  background:color-mix(in srgb,var(--surface-glass-strong) 82%,transparent);
}
.studio-metrics article { overflow:hidden; }
.studio-metrics article::before {
  content:"";
  position:absolute;
  inset:0 auto auto 34px;
  width:44px;
  height:2px;
  background:var(--forge-copper);
  opacity:.68;
}
.studio-metrics strong { color:var(--forge-moss); }

/* Mission cards no longer repeat as two identical slabs. */
.purpose-grid {
  grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:16px;
  overflow:visible;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.purpose-grid article {
  min-height:440px;
  border:1px solid var(--border-soft) !important;
  border-radius:34px;
  overflow:hidden;
  box-shadow:var(--shadow-soft),inset 0 1px rgba(255,255,255,.06);
}
.purpose-grid article:last-child { margin-top:68px; min-height:390px; }
.purpose-grid article::after {
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:3px;
  background:linear-gradient(90deg,var(--forge-copper),transparent 72%);
  opacity:.45;
}
.purpose-grid article:last-child::after { background:linear-gradient(90deg,var(--forge-moss),transparent 72%); }

/* Capability cards become a true bento composition. */
.capability-grid {
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:14px;
  overflow:visible;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.capability-card,
.capability-card:nth-child(2n),
.capability-card:nth-child(3n),
.capability-card:nth-child(n+4),
.capability-card:nth-child(n+5) {
  grid-column:span 4;
  min-height:330px;
  display:flex;
  flex-direction:column;
  border:1px solid var(--border-soft);
  border-radius:28px;
  overflow:hidden;
}
.capability-card:nth-child(1),.capability-card:nth-child(5) { grid-column:span 5; }
.capability-card:nth-child(2),.capability-card:nth-child(6) { grid-column:span 7; }
.capability-card:nth-child(6) {
  background-image:
    radial-gradient(360px circle at var(--glass-x) var(--glass-y),rgba(218,182,146,.1),transparent 68%),
    linear-gradient(145deg,color-mix(in srgb,var(--surface-wood) 72%,transparent),var(--surface-glass-strong));
}
.capability-card > span { color:var(--forge-copper-bright); }
.capability-card > i { color:var(--forge-copper-bright); }
.capability-card h3 { max-width:12ch; font-size:clamp(27px,2.2vw,35px); }
.capability-card p { margin-bottom:24px; }
.capability-card small {
  position:static;
  margin-top:auto;
  color:color-mix(in srgb,var(--text-secondary) 74%,var(--forge-copper));
}

/* Product moments: stronger device silhouette and quiet copper focus. */
.phone-focus-status i { background:var(--forge-copper-bright); box-shadow:0 0 0 5px color-mix(in srgb,var(--forge-copper) 16%,transparent); }
.section-index strong { color:var(--forge-copper-bright); }
.section-progress i.active { background:linear-gradient(90deg,var(--forge-copper),var(--forge-moss)); }

/* Featured work reads like a cover story, not another card grid. */
.featured-copy { position:relative; z-index:2; }
.featured-copy::after {
  content:"SELECTED / 01";
  display:block;
  width:max-content;
  margin-top:42px;
  padding-top:12px;
  border-top:1px solid var(--forge-copper);
  color:var(--text-secondary);
  font:600 8px/1 "Manrope",sans-serif;
  letter-spacing:.18em;
}

/* Portfolio: one editorial lead item, five supporting worlds. */
.project-card:first-child { grid-column:span 2; }
.project-card:first-child .project-card-art { height:clamp(330px,36vw,530px); }
.project-card:nth-child(2) .project-card-art { height:clamp(330px,36vw,530px); }
.project-card {
  border-radius:28px;
  border-color:color-mix(in srgb,var(--border-soft) 90%,var(--forge-copper) 10%);
}
.project-card::before {
  content:"";
  position:absolute;
  z-index:3;
  left:20px;
  top:20px;
  width:30px;
  height:1px;
  background:var(--forge-copper-bright);
  opacity:.68;
}
.project-card-art {
  grid-column:1/-1;
  height:clamp(250px,27vw,420px);
  margin-bottom:20px;
  box-shadow:0 16px 38px rgba(3,10,5,.18);
  border-radius:20px;
}
.project-card h3 {
  grid-column:1;
  margin-left:10px;
  min-width:0;
  font-size:clamp(24px,2.2vw,32px);
}

/* Orbit and process inherit the same growth-ring logic. */
.drag-hint { border-color:color-mix(in srgb,var(--border-soft) 70%,var(--forge-copper) 30%); }
.process-step > span {
  border-color:color-mix(in srgb,var(--border-strong) 74%,var(--forge-copper) 26%);
  color:var(--forge-copper-bright);
}
.process-step:nth-of-type(even) > div { background:color-mix(in srgb,var(--surface-glass-strong) 84%,var(--surface-wood)); }

/* Principles, company and FAQ gain clearer editorial hierarchy. */
.principle-list article { min-height:200px; }
.principle-list > article > span,.company-feature>small { color:var(--forge-copper-bright); }
.principle-list > article > i { border-radius:38% 62% 46% 54%; border-color:color-mix(in srgb,var(--border-soft) 70%,var(--forge-copper) 30%); }
.company-feature-grid { gap:18px; }
.company-feature {
  border-color:color-mix(in srgb,var(--border-soft) 88%,var(--forge-copper) 12%);
  border-radius:28px;
}
.company-feature:nth-child(2),.company-feature:nth-child(6),.company-feature:nth-child(10) {
  background-image:
    radial-gradient(320px circle at var(--glass-x) var(--glass-y),rgba(225,185,145,.1),transparent 68%),
    linear-gradient(145deg,color-mix(in srgb,var(--surface-wood) 58%,transparent),var(--surface-glass-strong));
}
.faq-list summary { min-height:76px; }

/* Final call-to-action has a precise, warm center line. */
.studio-cta::before {
  content:"";
  position:absolute;
  z-index:3;
  left:50%;
  top:14%;
  bottom:14%;
  width:1px;
  pointer-events:none;
  background:var(--forge-rule-warm);
}
.studio-cta { position:relative; }
.studio-cta article h2 { text-wrap:balance; }

/* Inclusive fallbacks for motion, contrast and compact-height screens. */
@media (max-width:1050px) {
  .studio-section { grid-template-columns:1fr; }
  .capability-card,
  .capability-card:nth-child(1),.capability-card:nth-child(2),.capability-card:nth-child(5),.capability-card:nth-child(6) { grid-column:span 6; }
  .featured-work { grid-template-columns:1fr; }
  .project-card:first-child { grid-column:span 2; }
}

@media (max-width:760px) {
  .visual-environment { opacity:.1; }
  .visual-environment::before { width:120vmax; left:-60vmax; }
  main > section:not(.hero)::after { left:22px; right:22px; }
  .eyebrow { font-size:9px; letter-spacing:.16em; }
  .hero { padding-top:90px; min-height:max(850px,100svh); }
  .purpose-grid { grid-template-columns:1fr; gap:14px; }
  .purpose-grid article,.purpose-grid article:last-child { min-height:340px; margin-top:0; border-radius:27px; }
  .capability-grid { grid-template-columns:1fr; }
  .capability-card,
  .capability-card:nth-child(1),.capability-card:nth-child(2),.capability-card:nth-child(5),.capability-card:nth-child(6),
  .capability-card:nth-child(2n),.capability-card:nth-child(3n),.capability-card:nth-child(n+4),.capability-card:nth-child(n+5) {
    grid-column:auto;
    min-height:285px;
    border:1px solid var(--border-soft);
    border-radius:24px;
  }
  .featured-visual { min-height:390px; aspect-ratio:.86; border-radius:28px 28px 68px 28px; }
  .project-grid { grid-template-columns:1fr; }
  .project-card:first-child { grid-column:auto; }
  .project-card:first-child .project-card-art,.project-card:nth-child(2) .project-card-art { height:400px; }
  .studio-cta::before { display:none; }
  .company-feature { border-radius:24px; }
}

@media (max-width:430px) {
  .visual-environment { display:none; }
  .hero h1 { letter-spacing:-.06em; }
  .project-card:first-child .project-card-art,.project-card:nth-child(2) .project-card-art { height:360px; }
}

@media (max-height:800px) and (min-width:761px) {
  .visual-environment i { display:none; }
  .hero {
    min-height:max(720px,100svh);
    padding-top:96px;
    justify-content:flex-start;
  }
  .hero h1 { font-size:clamp(52px,6.6vw,84px); }
  .hero-copy { margin-top:24px; }
  .hero-kinetic { margin-top:15px; }
  .hero-actions { margin-top:20px; }
  .hero-trust {
    bottom:18px;
    width:min(680px,calc(100% - 64px));
  }
}

@media (max-height:660px) and (min-width:761px) {
  .hero { min-height:640px; padding-top:82px; }
  .hero h1 { font-size:clamp(48px,5.8vw,72px); }
  .hero-copy { margin-top:18px; line-height:1.55; }
  .hero-kinetic { min-height:26px; margin-top:10px; }
  .hero-actions { margin-top:12px; }
  .hero-actions .button-primary,
  .hero-actions .button-secondary { min-height:44px; }
  .hero-trust { bottom:14px; }
  .hero-trust > span { min-height:48px; padding-block:8px; }
}

@media (prefers-reduced-motion:reduce) {
  .visual-environment { transform:none; }
  .nav a::before { transition:none; }
}

@media (forced-colors:active) {
  .visual-environment { display:none; }
  .eyebrow::before,.project-card::before { background:CanvasText; }
  main > section:not(.hero)::after { background:CanvasText; }
}

/* =========================================================
   OPENING FILM — wood, ember, pinecone, reveal
   A self-contained first-session brand story. It uses the existing
   optimized emblem and transform/opacity animation only.
   ========================================================= */

/* =========================================================
   PROJECT SHOWCASE — a clear, stable game dossier
   ========================================================= */
.project-dialog {
  width:min(1240px,calc(100vw - 40px));
  height:min(780px,calc(var(--viewport-height) - 40px));
  max-height:calc(var(--viewport-height) - 40px);
  border-radius:30px;
  background:color-mix(in srgb,var(--bg-secondary) 94%,#0b120d);
  overflow:hidden;
}
.project-dialog[open] {
  overflow:auto;
  display:grid;
  grid-template-columns:minmax(0,1.42fr) minmax(380px,.78fr);
  grid-template-rows:60px minmax(0,1fr);
}
.dialog-toolbar {
  position:relative;
  z-index:20;
  grid-column:1/-1;
  grid-row:1;
  min-width:0;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  align-items:center;
  gap:10px;
  padding:8px 10px 8px 20px;
  border-bottom:1px solid var(--border-soft);
  background:color-mix(in srgb,var(--bg-secondary) 96%,transparent);
  box-shadow:0 12px 34px rgba(0,0,0,.12);
}
.dialog-toolbar > p {
  min-width:0;
  margin:0;
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--text-secondary);
  font:600 8px/1 "Manrope",sans-serif;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.dialog-toolbar > p i {
  width:7px;
  height:7px;
  flex:0 0 auto;
  border-radius:50%;
  background:var(--project-accent,#93b887);
  box-shadow:0 0 0 5px color-mix(in srgb,var(--project-accent,#93b887) 14%,transparent);
}
.dialog-toolbar .dialog-share,
.dialog-toolbar .dialog-close {
  position:static;
  inset:auto;
  margin:0;
  transform:none;
}
.dialog-toolbar .dialog-share {
  min-height:42px;
  padding:0 14px;
  color:var(--text-secondary);
  background:var(--surface-soft);
}
.dialog-toolbar .dialog-close {
  width:42px;
  height:42px;
  min-width:42px;
  min-height:42px;
  display:grid;
  place-items:center;
  padding:0;
  color:var(--text-primary);
  background:var(--surface-soft);
  border-color:var(--border-soft);
  font:400 23px/1 "Manrope",sans-serif;
  transition:transform .25s var(--ease),border-color .25s ease,background-color .25s ease;
}
.dialog-toolbar .dialog-close:hover { transform:rotate(6deg);border-color:var(--border-strong);background:var(--surface-glass-strong); }
.dialog-preview {
  grid-column:1;
  grid-row:2;
  min-width:0;
  min-height:0;
  height:auto;
  display:grid;
  grid-template-rows:minmax(0,1fr) auto;
  place-items:stretch;
  background:#07100b;
}
.dialog-media-stage {
  position:relative;
  min-width:0;
  min-height:0;
  display:grid;
  place-items:center;
  overflow:hidden;
  isolation:isolate;
  background:
    radial-gradient(circle at 50% 42%,color-mix(in srgb,var(--project-accent,#93b887) 12%,transparent),transparent 54%),
    linear-gradient(145deg,#111a14,#050906 78%);
}
.dialog-media-stage::after {
  content:"";
  position:absolute;
  z-index:2;
  inset:0;
  pointer-events:none;
  background:linear-gradient(to bottom,rgba(0,0,0,.02) 62%,rgba(0,0,0,.18));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.025);
}
.dialog-gallery-image {
  display:block;
  transition:filter .25s ease;
  position:relative;
  z-index:1;
  width:100%;
  height:100%;
  min-height:0;
  object-fit:contain;
  background:transparent;
}
.dialog-gallery-label {
  left:18px;
  top:18px;
  z-index:5;
  border-color:rgba(255,255,255,.13);
  background:rgba(4,10,7,.74);
}
.dialog-media-dock {
  position:relative;
  z-index:4;
  min-height:146px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:12px 18px;
  padding:15px 18px 17px;
  border-top:1px solid rgba(255,255,255,.08);
  background:linear-gradient(135deg,rgba(12,20,15,.98),rgba(6,11,8,.99));
}
.dialog-caption-block { min-width:0; }
.dialog-caption-block small {
  display:block;
  margin-bottom:7px;
  color:rgba(236,232,223,.42);
  font:600 7px/1 "Manrope",sans-serif;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.dialog-gallery-caption {
  position:static;
  margin:0;
  color:#f4f2eb;
  font:500 clamp(13px,1.2vw,16px)/1.3 "Manrope",sans-serif;
  text-shadow:none;
}
.dialog-gallery-controls {
  z-index:6;
  right:20px;
  bottom:20px;
  align-items:center;
  gap:7px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;
  backdrop-filter:blur(14px);
  position:static;
  display:grid;
  grid-template-columns:36px minmax(48px,auto) 36px;
  padding:4px;
  background:rgba(255,255,255,.045);
  box-shadow:none;
}
.dialog-gallery-controls button { width:36px;height:36px; }
.dialog-gallery button {
  aspect-ratio:16/9;
  border-radius:10px;
  opacity:.58;
  background:#0a110d;
}
.dialog-gallery button:hover { opacity:.86;transform:translateY(-1px); }
.dialog-gallery button.is-active {
  border-color:var(--project-accent,#d8cebb);
  opacity:1;
  border-color:color-mix(in srgb,var(--project-accent,#93b887) 72%,white);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--project-accent,#93b887) 16%,transparent);
}
.dialog-body {
  grid-column:2;
  grid-row:2;
  min-width:0;
  min-height:0;
  padding:34px 36px 26px;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  overflow:auto;
  background:
    radial-gradient(26rem 22rem at 100% 0,color-mix(in srgb,var(--project-accent) 10%,transparent),transparent 72%),
    linear-gradient(155deg,var(--surface-glass-strong),color-mix(in srgb,var(--surface-wood) 58%,var(--surface-glass-strong)));
}
.dialog-title-row > img { width:58px;height:58px;border-radius:15px; }
.dialog-title-row h3 { font-size:clamp(36px,3.6vw,52px);line-height:.94; }
.dialog-body > p:not(.eyebrow) {
  margin:24px 0 0;
  color:var(--text-secondary);
  font-size:15px;
  line-height:1.68;
}
.dialog-release-status {
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:center;
  gap:12px;
  margin-top:22px;
  padding:13px 14px;
  border:1px solid var(--border-soft);
  border-radius:14px;
  background:var(--surface-soft);
}
.dialog-release-status small {
  color:var(--text-secondary);
  font:600 7px/1 "Manrope",sans-serif;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.dialog-release-status strong {
  min-width:0;
  text-align:right;
  color:var(--text-primary);
  font:600 10px/1.3 "Manrope",sans-serif;
}
.dialog-actions {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
  margin-top:18px;
}
.dialog-actions .button-primary,
.dialog-actions .button-secondary {
  min-height:46px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 13px;
  text-align:center;
  font:600 9px/1.25 "Manrope",sans-serif;
}
.dialog-project-nav {
  margin-top:auto;
  padding-top:20px;
  gap:10px;
}
.dialog-previous b,.dialog-next b {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font:600 10px/1.2 "Manrope",sans-serif;
  transition:transform .25s var(--ease),color .25s ease;
  max-width:132px;
}

@media (max-width:1050px) {
  .project-dialog {
    width:calc(100vw - 24px);
    height:auto;
    max-height:calc(var(--viewport-height) - 24px);
    overflow:auto;
  }
  .project-dialog[open] {
    grid-template-columns:1fr;
    grid-template-rows:58px minmax(430px,52vh) auto;
  }
  .dialog-toolbar { grid-column:1;grid-row:1;position:sticky;top:0; }
  .dialog-preview { grid-column:1;grid-row:2; }
  .dialog-body { grid-column:1;grid-row:3;min-height:auto;overflow:visible;padding:36px; }
  .dialog-title-row h3 { font-size:clamp(38px,7vw,58px); }
  .dialog-project-nav { margin-top:34px; }
}

@media (max-width:760px) {
  .project-dialog { width:calc(100vw - 12px);max-height:calc(var(--viewport-height) - 12px);border-radius:22px; }
  .project-dialog[open] { grid-template-rows:56px minmax(420px,56vh) auto; }
  .dialog-toolbar { padding:7px 8px 7px 14px; }
  .dialog-toolbar .dialog-share { min-height:40px;padding-inline:11px; }
  .dialog-toolbar .dialog-share b { display:block; }
  .dialog-toolbar .dialog-close { width:40px;height:40px;min-width:40px;min-height:40px; }
  .dialog-preview,.dialog-gallery-image { height:auto;min-height:0; }
  .dialog-media-dock { min-height:138px;padding:13px 14px 14px;gap:10px 12px; }
  .dialog-gallery-label { left:13px;top:13px; }
  .dialog-gallery-controls { right:auto;bottom:auto; }
  .dialog-gallery { gap:7px;grid-template-columns:repeat(3,minmax(0,1fr)); }
  .dialog-body { padding:28px 22px 24px; }
  .dialog-title-row { grid-template-columns:52px minmax(0,1fr);gap:13px;padding-right:0; }
  .dialog-title-row > img { width:52px;height:52px;border-radius:13px; }
  .dialog-title-row h3 { font-size:clamp(34px,10vw,46px); }
  .dialog-body > p:not(.eyebrow) { margin-top:20px;font-size:14px; }
  .dialog-actions { flex-wrap:wrap; grid-template-columns:1fr; }
  .dialog-project-nav { margin-top:28px; }
}

@media (max-width:430px) {
  .dialog-toolbar .dialog-share { padding-inline:10px; }
  .dialog-media-dock { grid-template-columns:minmax(0,1fr) auto; }
  .dialog-gallery-controls span { min-width:36px; }
  .dialog-release-status { grid-template-columns:1fr;gap:7px; }
  .dialog-release-status strong { text-align:left; }
  .dialog-previous b,.dialog-next b { max-width:112px; }
}

/* Header control deck — keeps navigation, preferences and the primary action
   as three distinct visual groups instead of compressing them into one row. */
.header-actions {
  justify-self:end;
  display:flex;
  align-items:center;
  gap:clamp(14px,1.25vw,22px);
}
.header-preferences {
  min-height:44px;display:flex;align-items:center;gap:4px;padding:4px;
  border:1px solid var(--border-soft);border-radius:18px;background:var(--surface-soft);
  box-shadow:inset 0 1px rgba(255,255,255,.055);
}
.header-preferences :where(.motion-toggle,.theme-toggle,.language-switch) {
  min-height:34px;border-color:transparent;background:transparent;box-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none;
}
.header-preferences :where(.motion-toggle,.theme-toggle) { border-radius:13px; }
.header-preferences :where(.motion-toggle,.theme-toggle):hover { background:var(--surface-glass-strong); }
.header-preferences .language-switch { padding-inline:5px; }
.motion-toggle { min-width:92px;justify-content:center;transition:color .25s ease,background-color .25s ease,border-color .25s ease; }
.motion-copy { display:grid;gap:3px;text-align:left; }
.motion-toggle b { font-size:7px;line-height:1; }
.motion-toggle em { color:var(--accent-primary);font:600 6px/1 "Manrope",sans-serif;letter-spacing:.12em;text-transform:uppercase;font-style:normal; }
.motion-toggle[aria-pressed="true"] { color:var(--text-secondary);background:var(--surface-soft); }
.motion-toggle[aria-pressed="true"] em { color:var(--text-secondary); }
.motion-toggle[aria-pressed="false"]>span:first-child { color:var(--accent-primary); }
.nav-cta { min-height:42px;display:inline-flex;align-items:center;padding:0 17px;white-space:nowrap; }

/* Language selector — a compact segmented control, shared by every page. */
.language-switch.language-switch {
  position:relative;isolation:isolate;display:grid;grid-template-columns:repeat(2,minmax(36px,1fr));
  width:86px;min-width:86px;min-height:38px;padding:3px;gap:2px;overflow:hidden;
  border:1px solid color-mix(in srgb,var(--accent-primary) 24%,var(--border-soft));
  border-radius:13px;
  background:linear-gradient(145deg,color-mix(in srgb,var(--surface-glass-strong) 88%,transparent),color-mix(in srgb,var(--surface-soft) 74%,transparent));
  box-shadow:inset 0 1px rgba(255,255,255,.07),0 8px 24px rgba(0,0,0,.12);
  -webkit-backdrop-filter:blur(16px) saturate(128%);backdrop-filter:blur(16px) saturate(128%);
}
.language-switch.language-switch button {
  position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;
  min-width:36px;min-height:30px;padding:0 7px;border:1px solid transparent;border-radius:9px;
  background:transparent;color:var(--text-secondary);cursor:pointer;
  font:700 9px/1 var(--font-mono);letter-spacing:.08em;
  transition:color .22s ease,background-color .22s ease,border-color .22s ease,box-shadow .22s ease,transform .22s var(--ease);
}
.language-switch.language-switch button:hover:not([aria-pressed="true"]) {
  color:var(--text-primary);background:color-mix(in srgb,var(--accent-primary) 9%,transparent);
}
.language-switch.language-switch button[aria-pressed="true"],
.language-switch.language-switch button.active {
  color:#102116;border-color:rgba(226,243,216,.42);
  background:linear-gradient(145deg,#d7e8cc,#a8c99a 72%,#91b582);
  box-shadow:inset 0 1px rgba(255,255,255,.62),0 3px 10px rgba(6,18,10,.28);
}
.language-switch.language-switch button[aria-pressed="true"]::after,
.language-switch.language-switch button.active::after {
  content:"";position:absolute;left:50%;bottom:3px;width:3px;height:3px;border-radius:50%;
  background:#41683f;transform:translateX(-50%);opacity:.78;
}
.language-switch.language-switch button:active { transform:scale(.95); }
.language-switch.language-switch button:focus-visible { outline:2px solid var(--accent-primary);outline-offset:2px; }
.language-switch.language-switch > i { display:none; }
:root[data-theme="light"] .language-switch.language-switch {
  border-color:color-mix(in srgb,var(--accent-primary) 30%,var(--border-soft));
  background:rgba(255,255,255,.48);box-shadow:inset 0 1px rgba(255,255,255,.8),0 8px 22px rgba(44,72,43,.09);
}
:root[data-theme="light"] .language-switch.language-switch button[aria-pressed="true"],
:root[data-theme="light"] .language-switch.language-switch button.active {
  color:#fff;border-color:rgba(255,255,255,.14);background:linear-gradient(145deg,#4f7849,#365d3b);
  box-shadow:inset 0 1px rgba(255,255,255,.15),0 3px 10px rgba(43,81,48,.2);
}
:root[data-theme="light"] .language-switch.language-switch button[aria-pressed="true"]::after,
:root[data-theme="light"] .language-switch.language-switch button.active::after { background:#d9edcf; }

@media (min-width:1051px) and (max-width:1370px) {
  .site-header { grid-template-columns:minmax(190px,1fr) auto;column-gap:28px; }
  .site-header .nav { display:none; }
  .menu-toggle { display:block; }
  .mobile-nav {
    display:flex;position:fixed;inset:0;z-index:2;padding:120px 42px 40px;flex-direction:column;
    background:color-mix(in srgb,var(--ink) 97%,transparent);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);
    opacity:0;visibility:hidden;transform:translateY(-18px);transition:opacity .35s ease,visibility .35s ease,transform .45s var(--ease);
  }
  .mobile-nav.open { opacity:1;visibility:visible;transform:none; }
  .mobile-nav>span { margin-bottom:25px;color:var(--sand);font-size:8px;letter-spacing:.17em;text-transform:uppercase; }
  .mobile-nav>a { padding:12px 0;border-bottom:1px solid var(--line);font:500 clamp(30px,4.4vw,50px)/1 "Manrope",sans-serif;letter-spacing:-.04em; }
  .mobile-nav a b { display:inline-block;width:38px;color:var(--sand);font-size:8px;letter-spacing:.12em;vertical-align:middle; }
  .mobile-nav>small { margin-top:auto;color:var(--muted);font-size:9px;letter-spacing:.12em;text-transform:uppercase; }
  body.menu-open { overflow:hidden; }
}

/* Below very wide screens the process rail has no free gutter for its text,
   so the stages collapse to tick marks instead of sliding under the content. */
@media (max-width:2199px) {
  .growth-labels span { width:7px;height:1px;font-size:0;background:currentColor;transition:color .25s ease,width .25s ease; }
  .growth-labels span.active { width:13px;transform:none; }
}

/* The three-column deck above assumes the desktop nav is present. Once it is
   hidden, the actions must not fall into the empty middle track. */
@media (max-width:1050px) {
  .site-header { grid-template-columns:minmax(0,1fr) auto;column-gap:12px; }
}

@media (max-width:760px) {
  .header-preferences { min-height:0;padding:0;border:0;background:transparent;box-shadow:none; }
  .motion-toggle { min-width:37px; }
  .motion-copy { display:none; }
  .nav-cta { min-height:0; }
}

@media print {
  :root { color-scheme:light; }
  body { color:#173024; background:#fff !important; font-size:11pt; }
  .site-header,.growth-rail,.page-progress,.visual-environment,.hero-actions,.hero-trust,.scroll-cue,
  .craft-marquee,.phone-section,.universe-section,.back-to-top,.project-dialog,.ui-toast,.work-filters,
  .social-links { display:none !important; }
  main > section { content-visibility:visible; min-height:0 !important; padding:32px 0 !important; break-inside:avoid; background:#fff !important; color:#173024 !important; }
  .hero { display:flex; min-height:0 !important; padding-top:0 !important; }
  .hero h1 { font-size:42pt; }
  .project-grid { grid-template-columns:repeat(2,1fr); }
  .project-card { box-shadow:none; border:1px solid #7c907f; }
  a[href^="http"]::after { content:" (" attr(href) ")"; font-size:8pt; }
}

/* Unverified content remains in the data layer but never occupies layout space. */
[hidden] { display:none !important; }

@media (max-width:760px) {
  .site-header .nav-cta { display:none !important; }
}

@media (max-width:430px) {
  .site-header .brand span { display:none; }
}