/* ==========================================================================
   RelaNex Studio
   Layout: an engineering spec sheet. A 6-column grid drawn as faint hairline
   guides, mono labels, oversized variable display type laid across the grid,
   and one ultramarine signal colour used sparingly.
   ========================================================================== */

/* ---------- Fonts ---------- */
/* Self-hosted (Fontsource 5.3.0, SIL Open Font License 1.1; see /assets/fonts/OFL-LICENSES.txt), so pages need no
   third-party font requests. Latin plus Latin Extended, which covers Azerbaijani (ə, ğ, ı, ş, ç, ö, ü). */
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("/assets/fonts/manrope-latin-wght-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("/assets/fonts/manrope-latin-ext-wght-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/assets/fonts/geist-latin-wght-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/assets/fonts/geist-latin-ext-wght-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/geist-mono-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/geist-mono-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/geist-mono-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/geist-mono-latin-ext-500-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

/* ---------- Tokens (dark-first) ---------- */
:root {
  --bg: #0B0C10;
  --bg-raised: #111319;
  --bg-sunken: #07080B;
  --fg: #ECEEF3;
  --fg-2: #A4A9B7;
  --fg-3: #7C8294;
  --line: rgba(236, 238, 243, 0.08);
  --line-2: rgba(236, 238, 243, 0.16);
  --guide: rgba(236, 238, 243, 0.035);
  --accent: #4D5DFF;
  --accent-text: #9AA4FF;
  --accent-soft: rgba(77, 93, 255, 0.14);
  --on-accent: #FFFFFF;
  --good: #3DD68C;
  --mid: #F5B83D;
  --poor: #F2555A;
  --c-str: #7EE0B5;
  --c-fn: #F4C27A;
  --c-num: #F59BB8;
  --shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.85);
  --grain-opacity: 0.05;
  --gl-line-alpha: 0.32;
  --sun: 1;
  --moon: 0;

  --font-display: "Manrope", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --fs-label: 0.8125rem; /* 13px: the smallest size for labels, tags, notes and form labels */
  --gutter: clamp(16px, 4vw, 48px);
  --maxw: 1320px;
  --header-h: 68px;
  --ease: cubic-bezier(0.2, 0.7, 0.1, 1);
  --ease-io: cubic-bezier(0.7, 0, 0.2, 1);

  color-scheme: dark;
  interpolate-size: allow-keywords;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #F3F4F6;
    --bg-raised: #FFFFFF;
    --bg-sunken: #E9EBEF;
    --fg: #0C0E14;
    --fg-2: #454B5A;
    --fg-3: #626878;
    --line: rgba(12, 14, 20, 0.09);
    --line-2: rgba(12, 14, 20, 0.17);
    --guide: rgba(12, 14, 20, 0.045);
    --accent: #2E42F0;
    --accent-text: #2A3BE0;
    --accent-soft: rgba(46, 66, 240, 0.09);
    --on-accent: #FFFFFF;
    --good: #0F9D58;
    --mid: #B7790A;
    --poor: #D33A40;
    --c-str: #0B7A55;
    --c-fn: #A15C00;
    --c-num: #B4235A;
    --shadow: 0 40px 80px -40px rgba(20, 24, 40, 0.38);
    --grain-opacity: 0.06;
    --gl-line-alpha: 0.5;
    --sun: 0;
    --moon: 1;
    color-scheme: light;
  }
}

:root[data-theme="light"] {
  --bg: #F3F4F6;
  --bg-raised: #FFFFFF;
  --bg-sunken: #E9EBEF;
  --fg: #0C0E14;
  --fg-2: #454B5A;
  --fg-3: #626878;
  --line: rgba(12, 14, 20, 0.09);
  --line-2: rgba(12, 14, 20, 0.17);
  --guide: rgba(12, 14, 20, 0.045);
  --accent: #2E42F0;
  --accent-text: #2A3BE0;
  --accent-soft: rgba(46, 66, 240, 0.09);
  --on-accent: #FFFFFF;
  --good: #0F9D58;
  --mid: #B7790A;
  --poor: #D33A40;
  --c-str: #0B7A55;
  --c-fn: #A15C00;
  --c-num: #B4235A;
  --shadow: 0 40px 80px -40px rgba(20, 24, 40, 0.38);
  --grain-opacity: 0.06;
  --gl-line-alpha: 0.5;
  --sun: 0;
  --moon: 1;
  color-scheme: light;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

body.menu-open { overflow: hidden; }

img, svg { max-width: 100%; }
a { color: inherit; }
p { margin: 0; }
button { font: inherit; color: inherit; }

h1, h2, h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.05;
  text-wrap: balance;
}

::selection { background: var(--accent); color: var(--on-accent); }

:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 3px;
  border-radius: 4px;
}

kbd {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  line-height: 1;
  padding: 3px 5px;
  border: 1px solid var(--line-2);
  border-bottom-width: 2px;
  border-radius: 4px;
  color: var(--fg-2);
  background: var(--bg-raised);
}

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

.skip-link {
  position: fixed;
  left: 16px;
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  z-index: 100;
  padding: 10px 16px;
  border-radius: 6px;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 500;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform 0.2s;
}
.skip-link:focus { transform: none; }

.wrap {
  width: 100%;
  max-width: calc(var(--maxw) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Hairline column guides */
.guides {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.guides__inner {
  height: 100%;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}
.guides__inner i { border-left: 1px solid var(--guide); }
.guides__inner i:last-child { border-right: 1px solid var(--guide); }
@media (max-width: 720px) { .guides { display: none; } }

/* ---------- Type helpers ---------- */
.kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-2);
}
.kicker::before {
  content: "";
  width: 7px;
  height: 7px;
  background: var(--accent);
  transform: rotate(45deg);
  flex: none;
}

.h2 {
  font-size: clamp(2.3rem, 1.3rem + 4.2vw, 5rem);
  line-height: 1;
  letter-spacing: -0.035em;
}

.lede {
  max-width: 60ch;
  color: var(--fg-2);
  font-size: clamp(1.02rem, 0.96rem + 0.25vw, 1.15rem);
  text-wrap: pretty;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border: 1px solid var(--line-2);
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--fg-2);
  white-space: nowrap;
}
.chip--accent {
  border-color: transparent;
  background: var(--accent-soft);
  color: var(--accent-text);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px dashed var(--line-2);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-2);
}
.badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-text);
}

/* ---------- Buttons ---------- */
.btn {
  --b-bg: transparent;
  --b-fg: var(--fg);
  --b-bd: var(--line-2);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  min-height: 46px;
  padding: 0 20px;
  border: 1px solid var(--b-bd);
  border-radius: 6px;
  background: var(--b-bg);
  color: var(--b-fg);
  font: 500 0.95rem/1 var(--font-body);
  letter-spacing: -0.005em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: background-color 0.25s, border-color 0.25s, color 0.25s, transform 0.35s var(--ease);
}
.btn--primary {
  --b-bg: var(--accent);
  --b-fg: var(--on-accent);
  --b-bd: var(--accent);
  box-shadow: 0 10px 30px -12px var(--accent);
}
.btn--primary::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.32) 50%, transparent 80%);
  transform: translateX(-110%);
  transition: transform 0.8s var(--ease);
}
.btn--primary:hover::before { transform: translateX(110%); }
.btn--ghost:hover { --b-bd: var(--fg-3); background: var(--line); }
.btn--sm { min-height: 38px; padding: 0 14px; font-size: 0.875rem; }
.btn--lg { min-height: 54px; padding: 0 26px; font-size: 1rem; }
.btn .arrow { width: 16px; height: 16px; transition: transform 0.35s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }

.icon-btn {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--line-2);
  border-radius: 6px;
  background: transparent;
  color: var(--fg);
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s;
}
.icon-btn:hover { background: var(--line); }
.icon-btn svg { width: 18px; height: 18px; }

.theme-btn svg {
  grid-area: 1 / 1;
  transition: opacity 0.35s, transform 0.5s var(--ease);
}
.theme-btn .i-sun { opacity: var(--sun); transform: rotate(calc((1 - var(--sun)) * -90deg)) scale(calc(0.6 + var(--sun) * 0.4)); }
.theme-btn .i-moon { opacity: var(--moon); transform: rotate(calc((1 - var(--moon)) * 90deg)) scale(calc(0.6 + var(--moon) * 0.4)); }

.linklike {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  text-align: left;
}

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  padding-top: env(safe-area-inset-top, 0px);
  border-bottom: 1px solid transparent;
  transition: background-color 0.35s, border-color 0.35s, backdrop-filter 0.35s;
}
.site-header.is-scrolled,
body.menu-open .site-header {
  background: color-mix(in srgb, var(--bg) 76%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  border-bottom-color: var(--line);
}
.site-header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  justify-self: start;
  color: var(--fg);
  text-decoration: none;
}
/* The logo (brand/, built by tools/make-logo.mjs): dark lettering on the light theme, light lettering on the dark one,
   chosen by the same rules as the colour tokens above. */
.brand__logo { display: block; width: auto; height: 18px; }
.brand__logo--light { display: none; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .brand__logo--light { display: block; }
  :root:not([data-theme="dark"]) .brand__logo--dark { display: none; }
}
:root[data-theme="light"] .brand__logo--light { display: block; }
:root[data-theme="light"] .brand__logo--dark { display: none; }

.site-nav ul {
  display: flex;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-nav a {
  position: relative;
  display: block;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 0.9rem;
  color: var(--fg-2);
  text-decoration: none;
  transition: color 0.2s, background-color 0.2s;
}
.site-nav a:hover { color: var(--fg); background: var(--line); }
.site-nav a.is-active { color: var(--fg); }
.site-nav a.is-active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: var(--accent-text);
}

.site-header__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.cmdk-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 8px 0 10px;
  border: 1px solid var(--line-2);
  border-radius: 6px;
  background: transparent;
  color: var(--fg-2);
  font-size: 0.85rem;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}
.cmdk-trigger:hover { background: var(--line); color: var(--fg); }
.cmdk-trigger svg { width: 16px; height: 16px; }

.menu-btn { display: none; }
.menu-btn span {
  position: absolute;
  left: 11px;
  right: 11px;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.35s var(--ease);
}
.menu-btn span:first-child { transform: translateY(-3.5px); }
.menu-btn span:last-child { transform: translateY(3.5px); }
.menu-btn[aria-expanded="true"] span:first-child { transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] span:last-child { transform: rotate(-45deg); }

.scroll-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  overflow: hidden;
}
.scroll-progress span {
  display: block;
  height: 100%;
  background: var(--accent-text);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 45;
  padding-top: calc(env(safe-area-inset-top, 0px) + var(--header-h) + 24px);
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 24px);
  background: var(--bg);
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s, visibility 0.3s;
  overflow-y: auto;
}
.mobile-menu.is-open { visibility: visible; opacity: 1; }
.mobile-menu__nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.mobile-menu__nav a:not(.btn) {
  font-family: var(--font-display);
  font-size: clamp(2rem, 8vw, 3rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.2;
  text-decoration: none;
}
.mobile-menu__nav .btn { margin-top: 24px; }
.mobile-menu.is-open .mobile-menu__nav a {
  animation: menu-in 0.5s var(--ease) backwards;
}
.mobile-menu.is-open .mobile-menu__nav a:nth-child(2) { animation-delay: 40ms; }
.mobile-menu.is-open .mobile-menu__nav a:nth-child(3) { animation-delay: 80ms; }
.mobile-menu.is-open .mobile-menu__nav a:nth-child(4) { animation-delay: 120ms; }
.mobile-menu.is-open .mobile-menu__nav a:nth-child(5) { animation-delay: 160ms; }
.mobile-menu.is-open .mobile-menu__nav a:nth-child(6) { animation-delay: 200ms; }
.mobile-menu.is-open .mobile-menu__nav a:nth-child(7) { animation-delay: 240ms; }
.mobile-menu.is-open .mobile-menu__nav a:nth-child(8) { animation-delay: 280ms; }
@keyframes menu-in { from { transform: translateY(16px); opacity: 0; } }

@media (max-width: 1100px) {
  .site-nav { display: none; }
  .menu-btn { display: inline-grid; }
  .site-header__inner { grid-template-columns: 1fr auto; }
}
.site-header__actions > * { flex-shrink: 0; }
/* Keyboard shortcut hints mean nothing on a touch screen. */
@media (hover: none) and (pointer: coarse) {
  .cmdk-trigger kbd, .cmdk .cmdk__foot { display: none; }
}
/* Just above the menu-button breakpoint the full nav, the search label and the CTA don't all fit. */
@media (max-width: 640px), (min-width: 1101px) and (max-width: 1260px) {
  .cmdk-trigger__label, .cmdk-trigger kbd { display: none; }
  .cmdk-trigger { width: 38px; padding: 0; justify-content: center; }
}
@media (max-width: 640px) {
  .header-cta { display: none; }
  .brand__logo { height: 16px; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-top: calc(env(safe-area-inset-top, 0px) + var(--header-h) + clamp(40px, 8vw, 112px));
  padding-bottom: clamp(40px, 6vw, 72px);
}
.hero__gl {
  position: absolute;
  inset: 0;
  z-index: -2;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.4s ease;
}
.hero__gl.is-ready { opacity: 1; }
.hero__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(50% 55% at 80% 30%, var(--accent-soft), transparent 70%),
    linear-gradient(180deg, transparent 62%, var(--bg) 100%);
}
.hero.no-gl .hero__veil {
  background:
    radial-gradient(45% 55% at 82% 28%, var(--accent-soft), transparent 70%),
    radial-gradient(30% 40% at 60% 70%, var(--accent-soft), transparent 70%),
    linear-gradient(180deg, transparent 62%, var(--bg) 100%);
}

.hero__eyebrow {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: clamp(24px, 3.5vw, 44px);
  padding: 7px 14px 7px 12px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-2);
}
.hero__eyebrow-sep { color: var(--fg-3); }
@media (max-width: 560px) {
  .hero__eyebrow-long, .hero__eyebrow-sep { display: none; }
}

.pulse {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--good);
  flex: none;
}
.pulse::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: inherit;
  animation: ping 2s var(--ease) infinite;
}
@keyframes ping { 0% { transform: scale(1); opacity: 0.7; } 80%, 100% { transform: scale(3); opacity: 0; } }

/* Phones keep the large scale and wrap the long lines; from 900px each line fits
   on one line (the longest, "Web Design, Development", is about 11.6em). Lines
   may always wrap, so enlarged or translated text never runs off the screen. */
.hero__title {
  --title-box: min(var(--maxw), 100vw - 2 * var(--gutter));
  font-size: min(var(--title-box) / 8.8, 18vh);
  font-weight: 620;
  line-height: 0.96;
  letter-spacing: -0.04em;
}
@media (min-width: 900px) {
  .hero { padding-top: calc(env(safe-area-inset-top, 0px) + var(--header-h) + clamp(40px, 8vh, 112px)); }
  .hero__eyebrow { margin-bottom: clamp(24px, 3.5vh, 44px); }
  .hero__title { font-size: min(var(--title-box) / 12.4, 14vh); }
}
.hero__title .line { display: block; }
.hero__title .line > span {
  display: inline-block;
  animation: settle 1.5s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 120ms);
}
/* Colour and position only: animating the weight changed the text width, which
   could re-wrap a line and move the content below while it settled. */
@keyframes settle {
  from {
    color: var(--fg-3);
    transform: translateY(0.08em);
  }
}
.line--accent { color: var(--accent-text); }
/* main.js fixes the width to the widest word, so a change never re-wraps the line. */
.cycle { display: inline-block; white-space: nowrap; }
.cycle::after {
  content: "";
  display: inline-block;
  width: 0.07em;
  height: 0.72em;
  margin-left: 0.08em;
  background: var(--accent);
  vertical-align: -0.02em;
  animation: blink 1.1s steps(1) infinite;
}
/* line-height 0: the mono font's taller line box would otherwise grow the title while scrambling. */
.cycle .glyph {
  line-height: 0;
  font-family: var(--font-mono);
  font-weight: 400;
  color: var(--fg-3);
}
@keyframes blink { 50% { opacity: 0; } }

.hero__row {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 32px;
  align-items: start;
  margin-top: clamp(32px, 5vw, 64px);
}
.hero__intro { grid-column: 1 / span 6; min-width: 0; }
.hero__lede {
  max-width: 54ch;
  margin-bottom: 14px;
  color: var(--fg-2);
  font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.25rem);
  line-height: 1.55;
  text-wrap: pretty;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; }
@media (min-width: 900px) {
  .hero__row { margin-top: clamp(32px, 5vh, 64px); }
}
.hero__note {
  margin-bottom: 28px;
  color: var(--fg-2);
  font-size: 0.9375rem;
  line-height: 1.6;
}
.hero__offers {
  grid-column: 8 / -1;
  min-width: 0;
  border-bottom: 1px solid var(--line-2);
}
.hero__offer {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 20px;
  align-items: start;
  gap: 16px;
  padding-block: 22px;
  border-top: 1px solid var(--line-2);
  text-decoration: none;
}
.hero__offer-number {
  padding-top: 4px;
  color: var(--fg-3);
  font: 500 var(--fs-label)/1.5 var(--font-mono);
}
.hero__offer-copy { display: grid; gap: 7px; }
.hero__offer-title {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 0.9rem + 0.3vw, 1.2rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.3;
}
.hero__offer-detail { color: var(--fg-2); font-size: 0.9375rem; line-height: 1.5; }
.hero__offer-arrow {
  width: 20px;
  height: 20px;
  margin-top: 3px;
  color: var(--accent-text);
  transition: transform 0.25s var(--ease);
}
.hero__offer:hover .hero__offer-title { color: var(--accent-text); }
.hero__offer:hover .hero__offer-arrow { transform: translateX(3px); }

@media (max-width: 960px) {
  .hero__intro { grid-column: 1 / -1; }
  .hero__offers { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
}
@media (max-width: 640px) {
  .hero__offers { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .hero__offer { padding-block: 18px; gap: 12px; }
}
@media (max-width: 520px) {
  .hero__cta .btn { flex: 1 1 auto; }
}

/* ---------- Sections ---------- */
/* Menu links skip a section's empty top padding, so its heading lands just below the header
   (12px here plus the 16px scroll-padding on html) instead of far down the screen. */
.section {
  --section-pad: clamp(88px, 12vw, 168px);
  position: relative;
  padding-block: var(--section-pad);
  border-top: 1px solid var(--line);
  scroll-margin-top: calc(12px - var(--section-pad));
}
.section-head {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 20px 32px;
}
.section-head .kicker { grid-column: 1 / span 3; padding-top: 0.9em; align-self: start; }
.section-head__main { grid-column: 4 / -1; display: grid; gap: 24px; min-width: 0; }
@media (max-width: 860px) {
  .section-head .kicker, .section-head__main { grid-column: 1 / -1; }
  .section-head .kicker { padding-top: 0; }
}

/* Scroll-linked entrance: transform only, so content is readable at rest */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .rv {
      animation: rv-in linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 70%;
    }
    @keyframes rv-in { from { transform: translateY(56px) scale(0.985); } to { transform: none; } }
  }
}

/* ---------- Studio / manifesto ---------- */
.manifesto {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 0.95rem + 2.5vw, 3.3rem);
  font-weight: 520;
  line-height: 1.12;
  letter-spacing: -0.03em;
  text-wrap: pretty;
}
.manifesto.is-split .w { color: var(--fg-3); transition: color 0.4s ease; }
.manifesto.is-split .w.on { color: var(--fg); }

.pillars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  margin-top: clamp(56px, 8vw, 104px);
}
.pillar {
  display: grid;
  align-content: start;
  gap: 14px;
  padding-top: 24px;
  border-top: 1px solid var(--line-2);
  min-width: 0;
}
.pillar svg { width: 40px; height: 40px; color: var(--accent-text); }
.pillar h3 { font-size: 1.4rem; letter-spacing: -0.02em; }
.pillar p { color: var(--fg-2); max-width: 42ch; }
@media (max-width: 860px) { .pillars { grid-template-columns: 1fr; gap: 0; } .pillar { padding-block: 24px; } }

/* ---------- Services bento ---------- */
.bento {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
  margin-top: clamp(48px, 6vw, 80px);
}
.card {
  position: relative;
  isolation: isolate;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-raised);
  overflow: hidden;
  container-type: inline-size;
}
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  padding: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(380px circle at var(--mx, -500px) var(--my, -500px), var(--accent-text), transparent 45%);
  -webkit-mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
  -webkit-mask-clip: content-box, border-box;
  -webkit-mask-composite: xor;
  mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
  mask-clip: content-box, border-box;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s;
}
.card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(560px circle at var(--mx, -500px) var(--my, -500px), var(--accent-soft), transparent 50%);
  opacity: 0;
  transition: opacity 0.4s;
}
[data-spotlight]:hover .card::before,
[data-spotlight]:hover .card::after { opacity: 1; }

.card__inner {
  display: flex;
  flex-direction: column;
  gap: 28px;
  height: 100%;
  padding: clamp(22px, 2.4vw, 32px);
}
.card__text { display: grid; gap: 12px; align-content: start; }
.card__tag {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.card h3 {
  font-size: clamp(1.3rem, 1.1rem + 0.5vw, 1.6rem);
  font-weight: 580;
  line-height: 1.12;
  letter-spacing: -0.025em;
}
.card__text p:last-child { color: var(--fg-2); font-size: 0.97rem; max-width: 52ch; }
.card__foot {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-2);
}
.viz { position: relative; margin-top: auto; min-width: 0; }

/* Rows of the 6-column grid: the two ways to start (3 + 3), performance across the width, then 3 + 3 and 3 + 3. */
.card--dev, .card--apps { grid-column: span 3; }
.card--perf { grid-column: 1 / -1; }
.card--ai, .card--ux { grid-column: span 3; }
.card--shop, .card--ops { grid-column: span 3; }

/* The two entry points: a website, or a business application on its own. Same weight, a little more presence
   than the other cards: a stronger border, a numbered "path" label and a larger heading. */
.card--path { border-color: var(--line-2); }
/* Keep new service deep links steady while scroll-linked entrances resolve. */
.card--path:target { animation: none; }
.card--path h3 { font-size: clamp(1.5rem, 1.15rem + 0.8vw, 2rem); }
.card__path {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg);
}
.card__path span {
  display: inline-grid;
  place-items: center;
  min-width: 30px;
  height: 24px;
  padding: 0 6px;
  border-radius: 4px;
  background: var(--accent-soft);
  color: var(--accent-text);
}
.card__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.93rem;
  color: var(--fg);
}
.card__list li { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 10px; }
.card__list li::before {
  content: "";
  width: 10px;
  height: 6px;
  margin-top: 0.5em;
  border-left: 1.5px solid var(--accent-text);
  border-bottom: 1.5px solid var(--accent-text);
  transform: rotate(-45deg);
}
@container (max-width: 400px) { .card__list { grid-template-columns: minmax(0, 1fr); } }
.card__cta { align-self: flex-start; }

@media (max-width: 1100px) {
  /* Two columns: the two ways to start side by side, performance across the width, then pairs. */
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card--dev, .card--apps, .card--ai, .card--ux, .card--shop, .card--ops { grid-column: span 1; }
}
/* Narrow tablets: the two ways to start, one above the other at full width (side by side they get cramped). */
@media (max-width: 900px) {
  .card--dev, .card--apps { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .bento { grid-template-columns: minmax(0, 1fr); }
  .card { grid-column: 1 / -1 !important; }
}

/* A real client website in the Business websites card, in place of an illustration. */
.shot { display: grid; gap: 10px; margin: 0; }
.shot figcaption { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-2); }
.card .measure { margin-top: auto; }

/* Work queue: an illustrative business-application screen (no figures, labelled as illustrative under it) */
.flow {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg-sunken);
  overflow: hidden;
}
.flow__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--fg-3);
}
.flow__bar span { color: var(--fg); }
.flow__bar em { font-style: normal; }
.flow__rows { display: grid; margin: 0; padding: 6px 0; list-style: none; }
.flow__rows li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  font-size: 0.82rem;
}
.flow__rows li + li { border-top: 1px solid var(--line); }
.flow__task { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg); }
.flow__who { font-size: 0.74rem; color: var(--fg-3); white-space: nowrap; }
.flow__st {
  padding: 2px 8px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  white-space: nowrap;
}
.flow__st--ok { background: color-mix(in srgb, var(--good) 16%, transparent); color: var(--good); }
.flow__st--mid { background: color-mix(in srgb, var(--mid) 18%, transparent); color: var(--mid); }
.flow__st--accent { background: var(--accent-soft); color: var(--accent-text); }
.play .flow__rows li { animation: line-in 0.45s var(--ease) backwards; animation-delay: calc(var(--i) * 140ms + 120ms); }
@container (max-width: 380px) { .flow__who { display: none; } }

/* Chat */
.chat { display: grid; gap: 10px; }
.chat__msg {
  max-width: 92%;
  padding: 10px 13px;
  border-radius: 10px;
  font-size: 0.86rem;
  line-height: 1.5;
}
.chat__msg--user {
  justify-self: end;
  border-bottom-right-radius: 3px;
  background: var(--accent);
  color: var(--on-accent);
}
.chat__msg--ai {
  justify-self: start;
  min-height: 6.6em;
  border: 1px solid var(--line);
  border-bottom-left-radius: 3px;
  background: var(--bg-sunken);
  color: var(--fg-2);
}
.chat__who {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.chat__who::before { content: ""; width: 6px; height: 6px; border-radius: 2px; background: var(--accent-text); transform: rotate(45deg); }
.chat.is-streaming [data-chat-a]::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 1em;
  margin-left: 2px;
  vertical-align: -0.15em;
  background: var(--accent-text);
  animation: blink 0.9s steps(1) infinite;
}

/* Design board */
.board {
  position: relative;
  height: 196px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background-color: var(--bg-sunken);
  background-image: radial-gradient(var(--line-2) 1px, transparent 1px);
  background-size: 14px 14px;
  overflow: hidden;
}
.board__frame {
  position: absolute;
  inset: 26px 18px 16px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 10px;
  padding: 12px;
  border-radius: 4px;
  background: var(--bg-raised);
  box-shadow: 0 0 0 1px var(--line), 0 18px 40px -24px rgba(0, 0, 0, 0.5);
}
.board__label {
  position: absolute;
  top: -18px;
  left: 0;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--fg-2);
}
.board__nav { display: flex; gap: 6px; align-items: center; }
.board__nav i { height: 6px; border-radius: 3px; background: var(--line-2); width: 22px; }
.board__nav i:first-child { width: 34px; background: var(--fg-3); }
.board__nav i:last-child { margin-left: auto; width: 30px; height: 12px; background: var(--accent); }
.board__hero { position: relative; display: grid; gap: 6px; align-content: center; }
.board__hero i { height: 9px; border-radius: 3px; background: var(--fg-3); width: 70%; }
.board__hero i + i { width: 48%; height: 6px; background: var(--line-2); }
.board__hero b { width: 54px; height: 14px; border-radius: 3px; background: var(--accent); margin-top: 4px; }
.board__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.board__row i { height: 30px; border-radius: 3px; background: var(--line); border: 1px solid var(--line); }
.board__select {
  position: absolute;
  left: 8px;
  right: 30%;
  top: 34px;
  height: 56px;
  border: 1.5px solid var(--accent-text);
  pointer-events: none;
  animation: select-move 6s var(--ease-io) infinite;
}
.board__select i {
  position: absolute;
  width: 6px;
  height: 6px;
  background: var(--bg-raised);
  border: 1.5px solid var(--accent-text);
}
.board__select i:nth-child(1) { left: -4px; top: -4px; }
.board__select i:nth-child(2) { right: -4px; top: -4px; }
.board__select i:nth-child(3) { left: -4px; bottom: -4px; }
.board__select i:nth-child(4) { right: -4px; bottom: -4px; }
.board__select span {
  position: absolute;
  left: 50%;
  bottom: -20px;
  transform: translateX(-50%);
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-mono);
  font-size: 0.58rem;
  white-space: nowrap;
}
.board__cursor {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: flex-start;
  gap: 2px;
  pointer-events: none;
  animation: cursor-move 6s var(--ease-io) infinite;
}
.board__cursor svg { width: 16px; height: 16px; fill: var(--c-num); stroke: var(--bg-raised); stroke-width: 1; }
.board__cursor span {
  margin-top: 12px;
  padding: 2px 6px;
  border-radius: 3px;
  background: var(--c-num);
  color: #1A0A12;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 500;
}
@keyframes cursor-move {
  0%, 100% { transform: translate(62%, 120px); }
  30% { transform: translate(170px, 70px); }
  55% { transform: translate(40px, 140px); }
  80% { transform: translate(120px, 40px); }
}
@keyframes select-move {
  0%, 25%, 100% { left: 8px; right: 30%; top: 34px; height: 56px; }
  40%, 70% { left: 8px; right: 8px; top: calc(100% - 46px); height: 38px; }
}

/* Shop demo */
.shop {
  --hue: 105;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 16px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg-sunken);
}
.shop__img {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 5;
  max-width: 100%;
  border-radius: 6px;
  background:
    radial-gradient(80% 60% at 50% 30%, hsl(var(--hue) 30% 62%), hsl(var(--hue) 28% 32%));
  transition: background 0.6s ease;
  overflow: hidden;
}
.shop__img svg { width: 62%; fill: hsl(var(--hue) 30% 22% / 0.55); transition: fill 0.6s ease, transform 0.6s var(--ease); }
.shop:hover .shop__img svg { transform: scale(1.06) rotate(-2deg); }
.shop__badge {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 2px 7px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.9);
  color: #111;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.shop__body { display: flex; flex-direction: column; gap: 14px; justify-content: center; min-width: 0; }
.shop__info { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.shop__name { font-weight: 600; font-size: 1rem; }
.shop__meta { font-size: 0.78rem; color: var(--fg-2); }
.shop__price { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.shop__swatches { display: flex; gap: 8px; }
.shop__swatches button {
  width: 22px;
  height: 22px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid var(--bg-sunken);
  background: hsl(var(--hue) 30% 45%);
  box-shadow: 0 0 0 1px var(--line-2);
  cursor: pointer;
  transition: box-shadow 0.2s;
}
.shop__swatches button[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--fg); }
.shop__actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.shop__add {
  min-height: 38px;
  padding: 0 14px;
  border: 0;
  border-radius: 6px;
  background: var(--fg);
  color: var(--bg);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.25s, transform 0.2s;
}
.shop__add:active { transform: scale(0.97); }
.shop__add.is-added { background: var(--good); color: #04140B; }
.shop__cart { font-family: var(--font-mono); font-size: 0.75rem; color: var(--fg-2); display: inline-flex; gap: 6px; align-items: center; }
.shop__cart b {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 10px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 0.7rem;
}
.shop__cart.bump b { animation: bump 0.45s var(--ease); }
@keyframes bump { 40% { transform: scale(1.35); } }
@container (max-width: 380px) { .shop { grid-template-columns: 1fr; } .shop__img { aspect-ratio: 16 / 9; } }

/* ---------- Solutions by industry ---------- */
/* A selector, not a grid of cards: the industries on the left (a tab list built by main.js), one industry's
   problem → what we can build → link on the right. Without JavaScript the list stays hidden and all four
   industries are shown one after another. */
.ind {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 32px;
  margin-top: clamp(48px, 6vw, 80px);
}
.ind__tabs { grid-column: 1 / span 4; display: grid; align-content: start; border-top: 1px solid var(--line-2); }
.ind__tab {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 4px 12px;
  padding: 20px 12px 20px 18px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: none;
  color: var(--fg-2);
  text-align: left;
  cursor: pointer;
  transition: background-color 0.25s, color 0.25s;
}
.ind__tab::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 2px;
  background: var(--accent-text);
  transform: scaleY(0);
  transition: transform 0.35s var(--ease);
}
.ind__tab:hover { background: var(--line); color: var(--fg); }
.ind__tab[aria-selected="true"] { color: var(--fg); }
.ind__tab[aria-selected="true"]::before { transform: scaleY(1); }
.ind__num { grid-row: span 2; padding-top: 0.25em; font-family: var(--font-mono); font-size: var(--fs-label); color: var(--fg-3); }
.ind__tab[aria-selected="true"] .ind__num { color: var(--accent-text); }
.ind__name { font-family: var(--font-display); font-size: 1.15rem; font-weight: 560; letter-spacing: -0.015em; line-height: 1.25; }
.ind__who { font-size: 0.875rem; color: var(--fg-3); }

.ind__panels { grid-column: 6 / -1; min-width: 0; }
.ind__panel { display: grid; justify-items: start; gap: 18px; min-width: 0; }
.ind__tabs:not([hidden]) ~ .ind__panels .ind__panel { animation: ind-in 0.4s var(--ease) both; }
@keyframes ind-in { from { opacity: 0; transform: translateY(10px); } }
.ind__kicker {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.ind__panel h3 { max-width: 22ch; font-size: clamp(1.6rem, 1.2rem + 1.3vw, 2.5rem); letter-spacing: -0.035em; line-height: 1.08; }
.ind__problem { max-width: 60ch; color: var(--fg-2); }
.ind__build {
  display: grid;
  gap: 12px;
  width: 100%;
  padding: clamp(18px, 2.4vw, 26px);
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-raised);
}
.ind__label {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-2);
}
.ind__build > p:not(.ind__label):not(.ind__note) { max-width: 64ch; color: var(--fg); }
.ind__tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 0; padding: 0; list-style: none; }
.ind__tags li { padding: 4px 11px; border: 1px solid var(--line-2); border-radius: 999px; font-size: 0.875rem; color: var(--fg-2); }
.ind__note { font-size: var(--fs-label); color: var(--fg-3); }

/* Without JavaScript: no tab list, the four industries stacked at full width with a divider between them. */
.ind__tabs[hidden] + .ind__panels { grid-column: 1 / -1; }
.ind__tabs[hidden] + .ind__panels .ind__panel + .ind__panel { margin-top: 48px; padding-top: 48px; border-top: 1px solid var(--line); }

@media (max-width: 960px) {
  /* The industries become a 2 × 2 set of buttons above the selected industry. */
  .ind__tabs { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; border-top: 0; }
  .ind__tab { padding: 12px 14px; border: 1px solid var(--line-2); border-radius: 10px; }
  .ind__tab::before { display: none; }
  .ind__tab[aria-selected="true"] { border-color: var(--accent-text); background: var(--accent-soft); }
  .ind__name { font-size: 1rem; }
  .ind__who { display: none; }
  .ind__num { grid-row: auto; padding-top: 0.15em; }
  .ind__panels { grid-column: 1 / -1; }
}
@media (max-width: 400px) {
  .ind__tab { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

/* ---------- Measure this page (inside the Performance & SEO card) ---------- */
/* The live numbers stay in a closed disclosure for curious visitors, so a slow phone never shows a red
   number next to the promises. */
.measure {
  margin-top: clamp(40px, 5vw, 64px);
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-raised);
}
.measure summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  padding: 18px clamp(18px, 2.4vw, 26px);
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 560;
  letter-spacing: -0.015em;
  list-style: none;
  cursor: pointer;
}
.measure summary::-webkit-details-marker { display: none; }
.measure summary:hover { color: var(--accent-text); }
.measure summary span {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.measure summary i { margin-left: auto; }
.measure__body { display: grid; gap: 8px; padding: 0 clamp(18px, 2.4vw, 26px) clamp(14px, 2vw, 20px); }
.measure__intro { max-width: 64ch; font-size: 0.92rem; color: var(--fg-2); }
.measure__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 28px; margin: 0; }
.measure__item { min-width: 0; padding-block: 16px; border-top: 1px solid var(--line); }
.measure__item dt { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 0.9rem; color: var(--fg-2); }
.measure__item[data-rating-host] dt::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--rating, var(--fg-3));
  transition: background-color 0.4s;
}
.measure__item abbr { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.06em; text-decoration: none; color: var(--fg-3); }
.measure__item dd { display: grid; gap: 2px; margin: 6px 0 0; }
.measure__value {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 560;
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.measure__item small { font-size: var(--fs-label); color: var(--fg-3); }
[data-rating="good"] { --rating: var(--good); }
[data-rating="needs-improvement"] { --rating: var(--mid); }
[data-rating="poor"] { --rating: var(--poor); }
@media (max-width: 860px) { .measure__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .measure__grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Process ---------- */
.process {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 32px;
}
.process__aside {
  grid-column: 1 / span 5;
  position: sticky;
  top: calc(env(safe-area-inset-top, 0px) + var(--header-h) + 40px);
  align-self: start;
  display: grid;
  gap: 24px;
}
.process__counter {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 16px;
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
}
.process__counter span {
  font-size: clamp(4.5rem, 3rem + 5vw, 8.5rem);
  font-weight: 620;
  line-height: 0.85;
  letter-spacing: -0.045em;
  color: var(--accent-text);
}
.process__counter small { font-family: var(--font-mono); font-size: 0.85rem; color: var(--fg-3); }
.process__rail { position: relative; height: 2px; background: var(--line-2); overflow: hidden; }
.process__rail span { position: absolute; inset: 0; background: var(--accent-text); transform: scaleX(0); transform-origin: 0 50%; }

.process__steps { grid-column: 7 / -1; margin: 0; padding: 0; list-style: none; min-width: 0; }
.step {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 0 16px;
  padding-block: 36px;
  border-top: 1px solid var(--line);
}
.step:last-child { border-bottom: 1px solid var(--line); }
.step__num {
  padding-top: 0.7em;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  color: var(--fg-3);
  transition: color 0.4s;
}
.step__body { display: grid; gap: 14px; }
.step__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.step h3 {
  font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.7rem);
  letter-spacing: -0.04em;
  color: var(--fg-2);
  transition: color 0.4s;
}
.step p { color: var(--fg-2); max-width: 56ch; }
.step__out { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 0; padding: 0; list-style: none; }
.step__out li {
  padding: 5px 10px;
  border-radius: 4px;
  background: var(--line);
  font-size: 0.82rem;
  color: var(--fg-2);
}
.step.is-active h3 { color: var(--fg); }
.step.is-active .step__num { color: var(--accent-text); }

/* The tools we use: one compact row at the end of Process. */
.tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: clamp(40px, 5vw, 64px); }
.tools__title {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-2);
}
.tools__list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.tools__list li { padding: 5px 12px; border: 1px solid var(--line-2); border-radius: 999px; font-size: 0.875rem; color: var(--fg); }

@media (max-width: 960px) {
  .process__aside, .process__steps { grid-column: 1 / -1; }
  .process__aside { position: static; }
  .process__counter, .process__rail { display: none; }
}

/* ---------- Portfolio overview ---------- */
.portfolio-overview__note { color: var(--fg-2); font-size: 0.875rem; line-height: 1.5; }
.portfolio-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: clamp(32px, 4vw, 56px); }
.portfolio-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid var(--line-2); border-radius: 10px; background: var(--bg-raised); }
.portfolio-card__visual { height: clamp(140px, 13vw, 190px); overflow: hidden; container-type: inline-size; border-bottom: 1px solid var(--line); background: var(--bg-sunken); }
.portfolio-card__visual > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.portfolio-card__visual > .mock { height: 100%; width: 100%; aspect-ratio: auto; border-radius: 0; box-shadow: none; transform: none; }
.portfolio-card__body { display: flex; flex-direction: column; flex: 1; gap: 12px; padding: 20px; }
.portfolio-card__kind { font: 500 var(--fs-label)/1.4 var(--font-mono); color: var(--accent-text); }
.portfolio-card h3 { font-size: clamp(1.1rem, 0.98rem + 0.3vw, 1.3rem); line-height: 1.2; letter-spacing: -0.02em; }
.portfolio-card__summary { color: var(--fg-2); font-size: 0.9rem; line-height: 1.5; }
.portfolio-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: auto; padding-top: 6px; }
.portfolio-card__actions .btn { min-height: 44px; }
.portfolio-card__story { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--accent-text); font-size: 0.875rem; line-height: 1.4; font-weight: 600; text-decoration: none; }
.portfolio-card__story:hover { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 1199px) { .portfolio-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .portfolio-card__visual { height: clamp(150px, 22vw, 230px); } }
@media (max-width: 600px) { .portfolio-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; } .portfolio-card__visual { height: clamp(150px, 52vw, 220px); } }

/* ---------- Detailed project stories ---------- */
.work {
  --section-pad: clamp(88px, 12vw, 168px);
  position: relative;
  border-top: 1px solid var(--line);
  padding-block: var(--section-pad);
  scroll-margin-top: calc(12px - var(--section-pad));
}
/* Pinned, the section is a full-screen panel: line its top up with the top of the screen,
   so the heading and the cards are centred and nothing is cut off. */
.work.is-pinned { padding-block: 0; scroll-margin-top: calc(-1 * (var(--header-h) + 16px)); }
.work.is-pinned .work__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(24px, 4vh, 48px);
  padding-top: calc(env(safe-area-inset-top, 0px) + var(--header-h));
  /* A clip is not a scroll container: focusing an offscreen card must not pan
     this ancestor independently of the carousel's own transform. */
  overflow: clip;
}
.work__head {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 20px 32px;
  align-items: end;
}
.work__title { grid-column: 1 / span 7; display: grid; gap: 24px; }
.work__meta { grid-column: 9 / -1; display: grid; gap: 18px; color: var(--fg-2); }
.work__progress {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  color: var(--fg-2);
  font-variant-numeric: tabular-nums;
}
/* Arrows for the swipe carousel (hidden while pinned, where scrolling moves the cards). */
.work__controls { display: flex; align-items: center; gap: 16px; }
.work__controls .work__progress { flex: 1; }
.work__nav { display: flex; gap: 8px; }
.work.is-pinned .work__nav { display: none; }
.work__nav .icon-btn:disabled { opacity: 0.35; cursor: default; }
.work--stories { padding-block: 40px 64px; scroll-margin-top: 0; }
.work--stories .work__title { gap: 14px; }
.work--stories .work__meta { grid-column: 9 / -1; gap: 18px; }
.work__story-title { font-size: clamp(1.7rem, 1.1rem + 2vw, 2.7rem); line-height: 1.1; }
.work__back { display: inline-flex; align-items: center; justify-self: start; min-height: 44px; padding: 8px 0; border: 0; background: transparent; color: var(--accent-text); font-size: 0.9375rem; font-weight: 600; text-align: left; cursor: pointer; }
.work__back:hover { text-decoration: underline; text-underline-offset: 4px; }
.work--stories .work__viewport { margin-top: 28px; }
.work--stories .concept { width: min(1160px, 86vw); }
.work--stories .work__nav { display: flex; }
.work--stories .work__nav .icon-btn { width: 44px; height: 44px; }
.work__bar { flex: 1; height: 2px; background: var(--line-2); overflow: hidden; }
.work__bar i { display: block; height: 100%; background: var(--accent-text); transform: scaleX(0.25); transform-origin: 0 50%; transition: transform 0.2s linear; }
@media (max-width: 960px) {
  .work__title, .work__meta { grid-column: 1 / -1; }
  .work--stories .work__meta { grid-column: 1 / -1; }
}

.work__viewport {
  margin-top: 48px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.work__viewport::-webkit-scrollbar { display: none; }
.work.is-pinned .work__viewport { margin-top: 0; overflow: visible; }
/* Short laptop screens (e.g. 1366×768): a more compact heading and cards so the whole panel fits,
   and if anything is still too tall it overflows at the bottom, never under the header. */
.work.is-pinned .work__sticky { justify-content: safe center; }
@media (max-height: 960px) {
  .work.is-pinned .work__sticky { gap: 20px; }
  .work.is-pinned .work__meta { gap: 12px; font-size: 0.92rem; line-height: 1.55; }
  .work.is-pinned .work__title { gap: 12px; }
  .work.is-pinned .work__title .h2 { font-size: clamp(2.2rem, 6.6vh, 5rem); }
  .work.is-pinned .concept { padding: 22px 28px; }
  .work.is-pinned .concept h3 { font-size: clamp(2rem, 5.2vh, 3.4rem); }
  .work.is-pinned .concept__info { gap: 10px; }
}
.work__track {
  display: flex;
  gap: 20px;
  width: max-content;
  padding-inline: max(var(--gutter), calc((100vw - var(--maxw)) / 2));
  will-change: transform;
}
.concept {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr);
  gap: clamp(20px, 3vw, 44px);
  width: min(1080px, 84vw);
  padding: clamp(20px, 2.6vw, 36px);
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg-raised);
  scroll-snap-align: center;
}
.concept__info { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; min-width: 0; }
.concept__cat {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.concept h3 {
  font-size: clamp(2rem, 1.4rem + 2vw, 3.4rem);
  letter-spacing: -0.035em;
}
.concept__info > p:not(.concept__cat) { color: var(--fg-2); max-width: 40ch; }
.concept__tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 0; padding: 0; list-style: none; }
.concept__tags li {
  padding: 4px 9px;
  border: 1px solid var(--line-2);
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  color: var(--fg-2);
}
.concept .badge { margin-top: auto; }
.work.is-pinned .concept { width: min(1080px, 84vw, calc((100svh - 330px) * 2.2)); }
.concept__shot { perspective: 1400px; min-width: 0; container-type: inline-size; }
.concept__shot .mock {
  transform: rotateY(-6deg) rotateX(2deg);
  transform-origin: 0 50%;
  transition: transform 0.8s var(--ease);
}
.concept:hover .mock { transform: none; }

/* Live client project: a real screenshot in the browser frame, a "live" badge and a visit link */
.mock--photo { --m-bg: #FAF8F5; --m-line: rgba(42, 37, 33, 0.1); --m-muted: #6F665E; text-decoration: none; }
.mock--photo img { display: block; width: 100%; flex: 1; min-height: 0; object-fit: cover; object-position: top center; }
.badge--live { border-style: solid; border-color: color-mix(in srgb, #3DDC97 45%, transparent); color: var(--fg); }
.badge--live::before { background: #3DDC97; box-shadow: 0 0 0 3px color-mix(in srgb, #3DDC97 25%, transparent); }
.concept__link { font-weight: 600; color: var(--accent-text); text-decoration: none; }
.concept__link:hover { text-decoration: underline; text-underline-offset: 4px; }
.concept__link:focus-visible, .mock--photo:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 4px; }

/* Live projects read top to bottom: positioning, description, what it does for the business, then
   status and the two actions. A little more room for the text; the screenshot stays the larger column. */
:is(.concept--live, .concept--demo) {
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.35fr);
  grid-template-rows: auto 1fr;
  grid-template-areas: "info shot" "info foot";
  row-gap: 18px;
}
:is(.concept--live, .concept--demo) .concept__info { grid-area: info; gap: 12px; }
:is(.concept--live, .concept--demo) .concept__shot { grid-area: shot; align-self: start; }
:is(.concept--live, .concept--demo) .concept__foot { grid-area: foot; }
/* Pinned, a live card keeps its full width (so the text stays short) and on a short screen the browser
   frame gets shorter instead, showing the top of the real page like a smaller window would. */
.work.is-pinned :is(.concept--live, .concept--demo) { width: min(1160px, 86vw); }
.work.is-pinned :is(.concept--live, .concept--demo) .mock { max-height: calc(100svh - 340px); }
/* Where even that is too tight, the description is the one line too many. Its point is repeated in the
   business value line and told in full in the case study. */
@media (max-height: 759px) {
  .work.is-pinned .concept__desc { display: none; }
  /* Tighter spacing keeps the 13px category on one line in the narrow text column, and a wider intro
     column saves a line in the heading, so the whole card still fits on a short screen. */
  .work.is-pinned .concept__cat { letter-spacing: 0.03em; }
  .work.is-pinned .work__meta { grid-column: 8 / -1; }
}
.concept__info > .concept__lead {
  max-width: 34ch;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 0.95rem + 0.3vw, 1.2rem);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--fg);
}
.concept__info > .concept__desc { max-width: 48ch; font-size: 0.93rem; line-height: 1.6; }
.concept__tags--value li {
  padding: 4px 10px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: var(--fs-label);
  color: var(--fg);
}
.concept__info > .concept__value {
  max-width: 48ch;
  padding-left: 14px;
  border-left: 2px solid var(--accent-text);
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--fg);
}
.concept__value span {
  display: block;
  margin-bottom: 3px;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-text);
}
/* Concise case evidence replaces repeated promotional paragraphs. */
.project-story { display: grid; gap: 12px; margin: 0; }
.project-story > div { display: grid; gap: 3px; }
.project-story dt {
  color: var(--accent-text);
  font: 500 var(--fs-label)/1.4 var(--font-mono);
  letter-spacing: 0.04em;
}
.project-story dd { margin: 0; color: var(--fg-2); font-size: 0.9375rem; line-height: 1.5; }
.concept__info > .project-limit { color: var(--fg-2); font-size: var(--fs-label); line-height: 1.5; }
.concept__info > .project-proof { margin-top: 2px; }
.case__evidence { display: grid; gap: 20px; margin-block: 40px; padding-block: 28px; border-block: 1px solid var(--line-2); }
.case__evidence > h3 { font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); line-height: 1.2; }
.case__scope { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 0; }
.case__scope > div { display: grid; align-content: start; gap: 8px; }
.case__scope dt { font-weight: 600; color: var(--fg); line-height: 1.4; }
.case__scope dd { margin: 0; color: var(--fg-2); font-size: 0.9375rem; line-height: 1.5; }
.case__evidence-note { max-width: 78ch; color: var(--fg-2); font-size: 0.875rem; line-height: 1.6; }
@media (max-width: 640px) {
  .case__scope { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}
@media (max-height: 960px) {
  .work.is-pinned .project-story { gap: 9px; }
  .work.is-pinned .project-story dd { font-size: 0.875rem; line-height: 1.45; }
}
/* The two actions sit under the screenshot, level with the status badge at the end of the text. */
.concept__foot { display: flex; align-self: end; }
.concept__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; }
@media (max-height: 960px) {
  .work.is-pinned :is(.concept--live, .concept--demo) { row-gap: 14px; }
  .work.is-pinned .concept__info > .concept__lead { font-size: 1rem; }
  .work.is-pinned .concept__info > .concept__desc { font-size: 0.875rem; line-height: 1.5; }
  .work.is-pinned .concept__info > .concept__value { font-size: 0.86rem; line-height: 1.5; }
}

@media (max-width: 860px) {
  /* The swipe carousel makes every card as tall as the tallest (a live card). Keep a shorter card's text and
     screenshot together at the top instead of spreading them over that height. */
  .concept { grid-template-columns: minmax(0, 1fr); width: 86vw; align-content: start; }
  .concept .badge { margin-top: 4px; }
  .concept__shot .mock { transform: none; }
  /* One column: the real screenshot comes first, as the visual evidence, then the story. */
  :is(.concept--live, .concept--demo) { grid-template-areas: "shot" "info" "foot"; grid-template-rows: auto 1fr auto; }
}

/* Mock screens: each concept has its own fixed palette, like a screenshot */
.mock {
  --m-bg: #0F1B24;
  --m-panel: #152430;
  --m-fg: #E6F1F5;
  --m-muted: #84A0AE;
  --m-line: rgba(230, 241, 245, 0.08);
  --m-accent: #3DDC97;
  display: flex;
  flex-direction: column;
  aspect-ratio: 16 / 10.5;
  max-width: 100%;
  border-radius: 10px;
  background: var(--m-bg);
  color: var(--m-fg);
  box-shadow: var(--shadow), 0 0 0 1px var(--line);
  overflow: hidden;
  font-family: var(--font-body);
  font-size: clamp(0.4rem, 1.55cqi, 0.8rem);
  line-height: 1.35;
}
.mock__chrome {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0.8em 1em;
  border-bottom: 1px solid var(--m-line);
  flex: none;
}
.mock__chrome i { width: 0.75em; height: 0.75em; border-radius: 50%; background: var(--m-line); box-shadow: inset 0 0 0 1px var(--m-line); }
.mock__chrome span {
  margin-inline: auto;
  padding: 0.25em 1.2em;
  border-radius: 4px;
  background: var(--m-line);
  color: var(--m-muted);
  font-family: var(--font-mono);
  font-size: 0.9em;
}

/* Verdant */
.mock--shop {
  --m-bg: #EEF0E8;
  --m-panel: #E2E6DA;
  --m-fg: #1D2318;
  --m-muted: #66705E;
  --m-line: rgba(29, 35, 24, 0.1);
  --m-accent: #2F5D3A;
}
.vm { flex: 1; display: grid; grid-template-rows: auto 1fr auto; gap: 1em; padding: 1em 1.4em 1.4em; min-height: 0; }
.vm__nav { display: flex; align-items: center; gap: 1.6em; }
.vm__nav b { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.18em; font-size: 1.15em; margin-right: auto; }
.vm__nav span { color: var(--m-muted); }
.vm__nav em { font-style: normal; padding: 0.3em 0.8em; border-radius: 999px; background: var(--m-fg); color: var(--m-bg); }
.vm__hero {
  display: flex;
  align-items: flex-end;
  padding: 1.6em;
  border-radius: 8px;
  background:
    radial-gradient(60% 90% at 85% 40%, rgba(255, 255, 255, 0.35), transparent 60%),
    linear-gradient(120deg, #3B5B3F, #8AA27A);
  color: #F4F6EF;
  min-height: 0;
}
.vm__hero div { display: grid; gap: 0.5em; justify-items: start; }
.vm__hero small { text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.8em; opacity: 0.85; }
.vm__hero strong { font-family: var(--font-display); font-size: 2.2em; line-height: 1; font-weight: 600; letter-spacing: -0.03em; max-width: 12ch; }
.vm__btn { padding: 0.5em 1em; border-radius: 4px; background: #F4F6EF; color: #1D2318; font-weight: 500; }
.vm__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.9em; }
.vm__grid div { display: grid; grid-template-columns: 1fr auto; gap: 0.4em; }
.vm__grid i { grid-column: 1 / -1; aspect-ratio: 4 / 3; border-radius: 6px; background: radial-gradient(70% 70% at 50% 35%, hsl(var(--hue) 30% 70%), hsl(var(--hue) 25% 42%)); }
.vm__grid b { font-family: var(--font-mono); font-weight: 500; }

/* Halcyon */
.mock--care {
  --m-bg: #F7FAFC;
  --m-panel: #FFFFFF;
  --m-fg: #10242E;
  --m-muted: #5E7480;
  --m-line: rgba(16, 36, 46, 0.09);
  --m-accent: #0E9AA7;
}
.hc { flex: 1; display: grid; grid-template-columns: 1.1fr 1fr; grid-template-rows: auto 1fr; gap: 1em 1.2em; padding: 1.4em; min-height: 0; }
.hc__head { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; }
.hc__head small { display: block; color: var(--m-muted); }
.hc__head strong { font-size: 1.6em; letter-spacing: -0.02em; font-weight: 600; }
.hc__avatar { display: grid; place-items: center; width: 2.6em; height: 2.6em; border-radius: 50%; background: #D7F0F2; color: var(--m-accent); font-weight: 600; }
.hc__card {
  display: grid;
  align-content: start;
  gap: 0.5em;
  padding: 1.2em;
  border-radius: 10px;
  background: linear-gradient(150deg, #0E9AA7, #0B6E86);
  color: #F2FBFC;
}
.hc__card small { opacity: 0.8; }
.hc__card strong { font-size: 1.4em; line-height: 1.15; font-weight: 600; }
.hc__card span { opacity: 0.9; }
.hc__card em { justify-self: start; margin-top: auto; padding: 0.5em 1.1em; border-radius: 999px; background: #F2FBFC; color: #0B6E86; font-style: normal; font-weight: 600; }
.hc__cal {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.4em;
  align-content: start;
  padding: 1em;
  border-radius: 10px;
  background: var(--m-panel);
  box-shadow: 0 0 0 1px var(--m-line);
  text-align: center;
}
.hc__cal span { color: var(--m-muted); font-size: 0.85em; padding-bottom: 0.3em; }
.hc__cal b { position: relative; display: grid; place-items: center; aspect-ratio: 1; border-radius: 6px; font-weight: 500; font-variant-numeric: tabular-nums; }
.hc__cal .is-on { background: var(--m-accent); color: #fff; }
.hc__cal .is-off { color: var(--m-muted); opacity: 0.6; }
.hc__cal .has-dot::after { content: ""; position: absolute; bottom: 12%; width: 0.35em; height: 0.35em; border-radius: 50%; background: var(--m-accent); }

/* ---------- Engagement ---------- */
/* Four plans (Signature, Smart, Custom Business Platform, Care): one row on wide screens, two by two on
   laptops and tablets, one column on phones. */
.plans {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: clamp(48px, 6vw, 80px);
  border-top: 1px solid var(--line-2);
}
.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 36px 32px 8px;
  border-left: 1px solid var(--line);
  min-width: 0;
}
.plan:first-child { border-left: 0; padding-left: 0; }
.plan:last-child { padding-right: 0; }
.plan--featured::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 32px;
  right: 32px;
  height: 2px;
  background: var(--accent-text);
}
.plan__kind {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-2);
}
.plan h3 { font-size: clamp(1.6rem, 1.2rem + 1vw, 2.1rem); letter-spacing: -0.035em; }
.plan__desc { color: var(--fg-2); }
.plan__facts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0; padding-block: 16px; border-block: 1px solid var(--line); }
.plan__facts dt { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); }
.plan__facts dd { margin: 4px 0 0; font-weight: 500; }
.plan__list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; color: var(--fg-2); font-size: 0.95rem; }
.plan__list li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; }
.plan__list li::before {
  content: "";
  width: 10px;
  height: 6px;
  margin-top: 0.55em;
  border-left: 1.5px solid var(--accent-text);
  border-bottom: 1.5px solid var(--accent-text);
  transform: rotate(-45deg);
}
.plan .btn { margin-top: auto; align-self: flex-start; }
@media (min-width: 1201px) {
  .plan { padding-inline: 28px; }
  .plan h3 { font-size: clamp(1.5rem, 0.9rem + 0.8vw, 1.85rem); }
  .plan--featured::before { left: 28px; right: 28px; }
}
@media (max-width: 1200px) and (min-width: 961px) {
  .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plan:nth-child(odd) { border-left: 0; padding-left: 0; }
  .plan:nth-child(even) { padding-right: 0; }
  .plan:nth-child(n + 3) { margin-top: 28px; padding-top: 36px; border-top: 1px solid var(--line-2); }
  .plan--featured:nth-child(even)::before { right: 0; }
}
@media (max-width: 960px) {
  .plans { grid-template-columns: minmax(0, 1fr); }
  .plan, .plan:first-child, .plan:last-child { padding: 32px 0; border-left: 0; border-bottom: 1px solid var(--line); }
  .plan--featured::before { left: 0; right: 0; }
}

/* Package builder: the same chips as the contact form, in a raised panel under the plans. */
.builder {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 28px clamp(28px, 4vw, 56px);
  margin-top: clamp(40px, 5vw, 64px);
  padding: clamp(22px, 3vw, 40px);
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg-raised);
  scroll-margin-top: calc(var(--header-h) + 16px);
}
.builder__head { display: grid; gap: 12px; align-content: start; }
.builder__head h3 { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); letter-spacing: -0.03em; }
.builder__head > p:last-child { max-width: 40ch; font-size: 0.95rem; color: var(--fg-2); }
.builder__controls { display: grid; gap: 26px; min-width: 0; }
.chips legend small { font-size: inherit; color: var(--fg-3); text-transform: none; letter-spacing: 0; }
.builder__tools > label { transition: opacity 0.3s; }
.builder__tools.is-dim > label { opacity: 0.6; }
.builder__tools.is-dim > label:hover, .builder__tools.is-dim > label:focus-within { opacity: 1; }
.builder__hint { width: 100%; margin: -4px 0 4px; font-size: 0.85rem; color: var(--fg-3); }
.builder__summary {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.builder__result { display: grid; gap: 4px; flex: 1 1 320px; min-width: 0; }
.builder__result strong {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.25rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.35;
}
.builder__result span { font-size: 0.88rem; color: var(--fg-2); }
.builder__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.builder__reset { font-size: 0.9rem; color: var(--fg-2); }
.builder__reset:hover { color: var(--fg); }
.builder .btn:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }
@media (max-width: 860px) {
  .builder { grid-template-columns: minmax(0, 1fr); }
}

/* The selection, shown at the top of the contact form */
.form__package {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 18px;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--accent-text) 45%, transparent);
  border-radius: 10px;
  background: var(--accent-soft);
}
.form__package-label {
  width: 100%;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.form__package-text { flex: 1 1 260px; min-width: 0; font-weight: 500; color: var(--fg); }
.form__package-actions { display: flex; gap: 16px; }
.form__package-actions .linklike { font-size: 0.88rem; color: var(--accent-text); text-decoration: none; }
.form__package-actions .linklike:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- FAQ ---------- */
.faq {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 32px;
}
.faq__aside {
  grid-column: 1 / span 4;
  position: sticky;
  top: calc(env(safe-area-inset-top, 0px) + var(--header-h) + 40px);
  align-self: start;
  display: grid;
  gap: 24px;
  justify-items: start;
}
.faq__list { grid-column: 6 / -1; border-top: 1px solid var(--line-2); min-width: 0; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 24px;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1rem + 0.5vw, 1.45rem);
  font-weight: 540;
  letter-spacing: -0.02em;
  line-height: 1.25;
  list-style: none;
  cursor: pointer;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent-text); }
.faq summary i, .measure summary i {
  position: relative;
  width: 28px;
  height: 28px;
  flex: none;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  transition: transform 0.4s var(--ease), background-color 0.3s, border-color 0.3s;
}
.faq summary i::before, .faq summary i::after, .measure summary i::before, .measure summary i::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 1.5px;
  margin: -0.75px 0 0 -5px;
  background: currentColor;
}
.faq summary i::after, .measure summary i::after { transform: rotate(90deg); transition: transform 0.4s var(--ease); }
.faq details[open] summary i, .measure[open] summary i { background: var(--accent); border-color: var(--accent); color: var(--on-accent); transform: rotate(180deg); }
.faq details[open] summary i::after, .measure[open] summary i::after { transform: rotate(0deg); }
.faq__a p { padding-bottom: 26px; max-width: 62ch; color: var(--fg-2); }
.faq details::details-content, .measure::details-content {
  block-size: 0;
  overflow: hidden;
  transition: block-size 0.45s var(--ease), content-visibility 0.45s allow-discrete;
}
.faq details[open]::details-content, .measure[open]::details-content { block-size: auto; }
@media (max-width: 960px) {
  .faq__aside, .faq__list { grid-column: 1 / -1; }
  .faq__aside { position: static; }
}

/* ---------- Contact ---------- */
.contact { overflow: hidden; }
.contact__title {
  margin-top: 24px;
  font-size: clamp(3rem, 0.8rem + 8vw, 9rem);
  font-weight: 620;
  line-height: 0.88;
  letter-spacing: -0.055em;
}
.contact__title span { color: var(--accent-text); }
.contact__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 48px 32px;
  margin-top: clamp(48px, 6vw, 88px);
}
.contact__formwrap { grid-column: 1 / span 8; min-width: 0; }
.contact__side { grid-column: 10 / -1; display: grid; gap: 0; align-content: start; min-width: 0; }
@media (max-width: 960px) {
  .contact__formwrap, .contact__side { grid-column: 1 / -1; }
}

.form { display: grid; gap: 32px; }
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
@media (max-width: 640px) { .form__row { grid-template-columns: minmax(0, 1fr); } }
.field { display: grid; gap: 8px; min-width: 0; }
.field label, .chips legend {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-2);
}
.field label span { color: var(--fg-3); text-transform: none; letter-spacing: 0; }
/* Filled boxes on the raised surface, so each field reads as a place to type against the page background. */
.field input, .field select, .field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background-color: var(--bg-raised);
  box-shadow: inset 0 1px 2px rgba(12, 14, 20, 0.05);
  color: var(--fg);
  font: 400 1.1rem/1.4 var(--font-body);
  transition: border-color 0.25s, box-shadow 0.25s;
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--fg-3); }
.field select {
  appearance: none;
  padding-right: 40px;
  background-image: linear-gradient(45deg, transparent 50%, var(--fg-2) 50%), linear-gradient(135deg, var(--fg-2) 50%, transparent 50%);
  background-position: calc(100% - 22px) 52%, calc(100% - 17px) 52%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}
.field select option { background: var(--bg-raised); color: var(--fg); }
.field textarea { resize: vertical; min-height: 120px; }
.field input::placeholder, .field textarea::placeholder { color: var(--fg-3); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--accent-text);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-text) 22%, transparent);
}
.field [aria-invalid="true"] { border-color: var(--poor); }
.field__error { min-height: 1.2em; font-size: 0.82rem; color: var(--poor); }
.field__error:empty { min-height: 0; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.chips legend { width: 100%; margin-bottom: 12px; padding: 0; }
.chips label { position: relative; cursor: pointer; }
.chips input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.chips span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  font-size: 0.9rem;
  color: var(--fg-2);
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
  user-select: none;
}
.chips label:hover span { border-color: var(--fg-3); color: var(--fg); }
.chips input:checked + span { border-color: var(--accent-text); background: var(--accent-soft); color: var(--fg); }
.chips input:checked + span::before {
  content: "";
  width: 8px;
  height: 5px;
  margin-top: -2px;
  border-left: 1.5px solid var(--accent-text);
  border-bottom: 1.5px solid var(--accent-text);
  transform: rotate(-45deg);
}
.chips input:focus-visible + span { outline: 2px solid var(--accent-text); outline-offset: 2px; }

.form__submit { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.form__hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form__note { font-size: 0.88rem; color: var(--fg-2); }

.form-done {
  display: grid;
  gap: 16px;
  justify-items: start;
  padding: clamp(24px, 3vw, 40px);
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: var(--bg-raised);
}
.form-done:focus { outline: none; }
.form-done__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--good) 18%, transparent);
  color: var(--good);
}
.form-done__icon svg { width: 24px; height: 24px; }
.form-done h3 { font-size: 1.8rem; letter-spacing: -0.03em; }
.form-done p { color: var(--fg-2); max-width: 56ch; }
.form-done__brief {
  width: 100%;
  margin: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg-sunken);
  color: var(--fg-2);
  font: 0.84rem/1.6 var(--font-mono);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 280px;
  overflow: auto;
}
.form-done__actions { display: flex; gap: 10px; flex-wrap: wrap; }

.contact__item { padding-block: 20px; border-top: 1px solid var(--line); }
.contact__item:last-child { border-bottom: 1px solid var(--line); }
.contact__label {
  margin-bottom: 6px;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-2);
}
.contact__item p:not(.contact__label) { color: var(--fg); }
.contact__email {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 560;
  letter-spacing: -0.02em;
  user-select: all;
}
.copy-btn {
  padding: 5px 10px;
  border: 1px solid var(--line-2);
  border-radius: 4px;
  background: transparent;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-2);
  cursor: pointer;
  user-select: none;
  transition: background-color 0.2s, color 0.2s;
}
.copy-btn:hover { background: var(--line); color: var(--fg); }

/* ---------- Footer ---------- */
.site-footer {
  position: relative;
  padding-top: clamp(64px, 8vw, 112px);
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 28px);
  border-top: 1px solid var(--line);
  overflow: hidden;
}
.footer__top {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 40px 32px;
}
.footer__brand { grid-column: 1 / span 4; display: grid; gap: 18px; align-content: start; }
.footer__brand p { color: var(--fg-2); max-width: 36ch; }
.footer__cols { grid-column: 6 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.footer__h {
  margin-bottom: 14px;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.footer__cols ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.footer__cols a, .footer__cols .linklike { color: var(--fg-2); text-decoration: none; font-size: 0.95rem; transition: color 0.2s; }
.footer__cols a:hover, .footer__cols .linklike:hover { color: var(--fg); }
/* Touch screens: taller tap areas for the small text links. The padding grows the hit box and the
   negative margin cancels it, so nothing moves. */
@media (pointer: coarse) {
  .footer__cols a, .footer__cols .linklike, .footer__bottom .linklike, .concept__link {
    display: inline-block;
    padding-block: 6px;
    margin-block: -6px;
  }
  .shop__swatches button { position: relative; }
  .shop__swatches button::after { content: ""; position: absolute; inset: -4px; }
}
@media (max-width: 860px) {
  .footer__brand, .footer__cols { grid-column: 1 / -1; }
}
@media (max-width: 520px) { .footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 359px) { .footer__cols { grid-template-columns: minmax(0, 1fr); } }
/* On phones every child of the 12-column grids spans the full width, so their column gaps only add
   minimum width (11 x 32px) and made the page wider than a 360px screen. */
@media (max-width: 560px) {
  .hero__row, .section-head, .process, .work__head, .faq, .contact__grid, .footer__top { column-gap: 0; }
}

.footer__word {
  margin-top: clamp(48px, 8vw, 96px);
  font-family: var(--font-display);
  font-size: clamp(4.5rem, 1rem + 20vw, 21rem);
  font-weight: 700;
  line-height: 0.8;
  letter-spacing: -0.05em;
  white-space: nowrap;
  background: linear-gradient(180deg, var(--fg) 25%, color-mix(in srgb, var(--fg) 0%, transparent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  user-select: none;
}
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 24px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 0.85rem;
  color: var(--fg-3);
}
.footer__bottom .linklike { color: var(--fg-2); }
.footer__bottom .linklike:hover { color: var(--fg); }
.footer__bottom a { color: var(--fg-2); text-underline-offset: 3px; }
.footer__bottom a:hover { color: var(--fg); }

/* ---------- Legal pages (privacy notice) ---------- */
.site-header__inner--simple { grid-template-columns: 1fr auto; }
.legal { padding: calc(var(--header-h) + clamp(48px, 8vw, 96px)) 0 clamp(64px, 10vw, 120px); }
.legal__head { display: grid; gap: 18px; max-width: 760px; margin-bottom: clamp(28px, 4vw, 44px); }
.legal__head h1 { font-size: clamp(2.6rem, 1.6rem + 4vw, 4.6rem); letter-spacing: -0.035em; }
.legal__lead { max-width: 56ch; font-size: clamp(1.05rem, 0.98rem + 0.3vw, 1.2rem); color: var(--fg-2); }
.legal__meta { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); }
.legal__summary {
  max-width: 760px;
  margin-bottom: clamp(16px, 3vw, 28px);
  padding: clamp(20px, 3vw, 28px);
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg-raised);
}
.legal__summary h2 { margin-bottom: 14px; font-size: 1.25rem; letter-spacing: -0.015em; }
.legal__summary ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.legal__summary li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; color: var(--fg); }
.legal__summary li::before {
  content: "";
  width: 10px;
  height: 6px;
  margin-top: 0.55em;
  border-left: 1.5px solid var(--accent-text);
  border-bottom: 1.5px solid var(--accent-text);
  transform: rotate(-45deg);
}
.legal__body { max-width: 760px; }
.legal__body section { padding-block: clamp(22px, 3vw, 32px); border-top: 1px solid var(--line); }
.legal__body h2 { margin-bottom: 12px; font-size: clamp(1.3rem, 1.1rem + 0.7vw, 1.7rem); letter-spacing: -0.02em; }
.legal__body p { color: var(--fg-2); }
.legal__body p + p, .legal__body .legal__list + p { margin-top: 12px; }
.legal__body a, .legal__summary a { color: var(--accent-text); text-underline-offset: 3px; }
.legal__body code { font-family: var(--font-mono); font-size: 0.85em; color: var(--fg); }
.legal__list { display: grid; gap: 14px; margin: 14px 0 0; }
.legal__list div { padding-left: 14px; border-left: 2px solid var(--line-2); }
.legal__list dt { font-weight: 600; color: var(--fg); }
.legal__list dd { margin: 2px 0 0; color: var(--fg-2); }
.legal__footer { padding-top: 0; }
.legal__footer .footer__bottom { margin-top: 0; }
.legal__footer .footer__bottom a { color: var(--fg-2); }
.form__privacy { flex-basis: 100%; font-size: 0.85rem; color: var(--fg-3); }
.form__privacy a { color: var(--fg-2); text-underline-offset: 3px; }
.form__privacy a:hover { color: var(--fg); }

/* ---------- Command menu ---------- */
.cmdk {
  width: min(620px, calc(100vw - 32px));
  max-height: min(520px, calc(100vh - 120px));
  margin: max(12vh, calc(env(safe-area-inset-top, 0px) + 24px)) auto auto;
  padding: 0;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: var(--bg-raised);
  color: var(--fg);
  box-shadow: var(--shadow);
  overflow: hidden;
  opacity: 0;
  transform: translateY(-8px) scale(0.98);
  transition: opacity 0.2s, transform 0.25s var(--ease), overlay 0.25s allow-discrete, display 0.25s allow-discrete;
}
.cmdk[open] { display: flex; flex-direction: column; opacity: 1; transform: none; }
@starting-style {
  .cmdk[open] { opacity: 0; transform: translateY(-8px) scale(0.98); }
}
.cmdk::backdrop {
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.cmdk__search {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}
.cmdk__search svg { width: 18px; height: 18px; color: var(--fg-3); flex: none; }
.cmdk__search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--fg);
  font: 400 1.05rem/1.4 var(--font-body);
  outline: none;
}
.cmdk__search input::placeholder { color: var(--fg-3); }
.cmdk__list { flex: 1; margin: 0; padding: 8px; list-style: none; overflow-y: auto; }
.cmdk__group {
  padding: 10px 10px 6px;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.cmdk__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 6px;
  color: var(--fg-2);
  cursor: pointer;
}
.cmdk__item small { font-family: var(--font-mono); font-size: var(--fs-label); color: var(--fg-3); }
.cmdk__item[aria-selected="true"] { background: var(--accent-soft); color: var(--fg); }
.cmdk__item[aria-selected="true"] small { color: var(--accent-text); }
.cmdk__empty { padding: 24px 12px; text-align: center; color: var(--fg-3); }
.cmdk__foot {
  display: flex;
  gap: 18px;
  padding: 10px 16px;
  border-top: 1px solid var(--line);
  font-size: var(--fs-label);
  color: var(--fg-3);
}
.cmdk__foot span { display: inline-flex; align-items: center; gap: 4px; }

/* ---------- Case studies ---------- */
/* The dialog itself is the scroller, so the page behind keeps its place (and its carousel position). */
html { scrollbar-gutter: stable; }
html:has(dialog.case[open]) { overflow: hidden; }
.case {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0 var(--gutter);
  border: 0;
  background: transparent;
  color: var(--fg);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.case::backdrop {
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.case__panel {
  --pad: clamp(20px, 4.5vw, 56px);
  max-width: 1080px;
  margin: clamp(12px, 4vh, 48px) auto;
  padding: 0 var(--pad) var(--pad);
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg-raised);
  box-shadow: var(--shadow);
}
.case[open] .case__panel { animation: case-in 0.45s var(--ease) both; }
@keyframes case-in { from { opacity: 0; transform: translateY(18px); } }
.case__bar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-inline: calc(-1 * var(--pad));
  padding: 12px var(--pad);
  border-bottom: 1px solid var(--line);
  border-radius: 14px 14px 0 0;
  background: color-mix(in srgb, var(--bg-raised) 88%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.case__head { display: grid; justify-items: start; gap: 16px; padding-block: clamp(24px, 4vw, 44px); }
.case__head .h2 { font-size: clamp(2.4rem, 1.4rem + 4vw, 4.6rem); }
.case__lead {
  max-width: 38ch;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem);
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: var(--fg-2);
}
.case__shot { width: 100%; }
.case__shot:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 4px; }
.case__steps { margin: clamp(32px, 5vw, 56px) 0 0; padding: 0; list-style: none; }
.case__step {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 14px 40px;
  padding-block: clamp(22px, 3vw, 34px);
  border-top: 1px solid var(--line);
}
.case__label { display: grid; gap: 8px; align-content: start; }
.case__label span { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.08em; color: var(--accent-text); }
.case__label h3 { font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.8rem); letter-spacing: -0.02em; }
.case__body { display: grid; gap: 14px; max-width: 62ch; color: var(--fg-2); line-height: 1.6; }
.case__key { font-size: 1.08rem; line-height: 1.5; color: var(--fg); }
.case__list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.case__list li { position: relative; padding-left: 20px; }
.case__list li::before { content: ""; position: absolute; left: 0; top: 0.78em; width: 9px; height: 1.5px; background: var(--accent-text); }
.case__list b { font-weight: 600; color: var(--fg); }
.case__facts {
  margin-top: clamp(8px, 2vw, 20px);
  padding: clamp(20px, 3vw, 32px);
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
}
.case__facts h3 {
  margin-bottom: 18px;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-2);
}
.case__facts dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 18px 28px; margin: 0; }
.case__facts dt { margin-bottom: 4px; font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); }
.case__facts dd { margin: 0; font-size: 0.92rem; line-height: 1.5; color: var(--fg); }
.case__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 32px;
  margin-top: clamp(28px, 4vw, 44px);
  padding-top: clamp(24px, 3vw, 32px);
  border-top: 1px solid var(--line);
}
.case__cta p {
  max-width: 36ch;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1rem + 0.8vw, 1.6rem);
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--fg);
}
@media (max-width: 720px) {
  .case__step { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 24px);
  z-index: 80;
  padding: 10px 16px;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: var(--bg-raised);
  color: var(--fg);
  font-size: 0.9rem;
  box-shadow: var(--shadow);
  transform: translate(-50%, 140%);
  opacity: 0;
  transition: transform 0.4s var(--ease), opacity 0.3s;
  pointer-events: none;
}
.toast.is-on { transform: translate(-50%, 0); opacity: 1; }

/* ---------- Theme transition ---------- */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

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

/* Integrated interactive demos and service discovery. */
.demo-labels{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:auto}.demo-labels .badge{margin:0}.badge--demo{border-color:var(--accent-text);color:var(--accent-text)}.demo-data{font:500 .75rem var(--font-mono);color:var(--fg-2)}
.card__demo-links,.ind__links{display:flex;flex-wrap:wrap;gap:10px 20px;font-size:.875rem}.card__demo-links a,.ind__links a{color:var(--accent-text);text-underline-offset:4px}.card__demo-links{margin:4px 0 16px}.ind__links{margin-top:14px}
.demo-offer{padding:40px 0 64px;border-top:1px solid var(--line)}.demo-offer__inner{display:flex;align-items:center;justify-content:space-between;gap:32px}.demo-offer h2{font-size:clamp(1.7rem,3vw,2.7rem);letter-spacing:-.03em;margin:14px 0}.demo-offer p:not(.kicker){max-width:70ch;color:var(--fg-2)}.demo-offer .btn{flex-shrink:0;white-space:normal;max-width:100%}
@media(max-width:860px){.demo-offer__inner{align-items:flex-start;flex-direction:column}.concept--demo h3{font-size:clamp(1.7rem,5.4vw,2.8rem)}.concept--demo .concept__actions .btn{white-space:normal;text-align:left}.demo-offer .btn{font-size:.875rem}}

/* Keep the industry grid within the narrow viewport; twelve wide gaps exceeded 320px. */
@media(max-width:767px){.ind{grid-template-columns:minmax(0,1fr);gap:24px}.ind__tabs,.ind__panels{grid-column:1;min-width:0}.ind__tab{min-width:0}.ind__name{overflow-wrap:anywhere}}

/* Decorative theme-transition layers must not swallow rapid clicks. */
::view-transition,::view-transition-group(*),::view-transition-image-pair(*),::view-transition-old(*),::view-transition-new(*){pointer-events:none}

/* ---------- Merged from portfolio-cms.css ---------- */
/* Additions to the existing portfolio design; the established layout is retained. */
.portfolio-card--featured{border-color:var(--accent,#929efb)}
.portfolio-empty{padding:2rem;border:1px solid var(--line,#5555);border-radius:12px}
.project-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:16px}
.project-gallery figure{margin:0}.project-gallery img{display:block;width:100%;height:auto;border-radius:8px}
.case__additional{padding:20px 0}.case__additional figure img{max-width:100%;height:auto}
.nunitto-preview-notice{background:#e7f2d6;color:#18371b;border-bottom:1px solid #acc78e;padding:12px 20px;font:13px/1.5 Arial,sans-serif;position:relative;z-index:1000}
.nunitto-preview-notice a{color:inherit;font-weight:bold}.nunitto-preview-notice code{font-size:11px}
@media(max-width:600px){.project-gallery{grid-template-columns:1fr}}

/* ---------- Merged from landing.css (service and solution pages) ---------- */
/* Shared editorial service-page layout; existing design variables and themes. */
.landing{padding-top:calc(var(--header-h) + 32px)}.breadcrumbs{font:500 .75rem/1.6 var(--font-mono);color:var(--fg-2)}.breadcrumbs ol{display:flex;flex-wrap:wrap;gap:8px 12px;list-style:none;margin:0;padding:0}.breadcrumbs li+li:before{content:"/";margin-right:12px;color:var(--fg-3)}.breadcrumbs a{text-underline-offset:4px}
.landing-hero{padding:clamp(40px,7vw,100px) 0 clamp(56px,8vw,110px)}.landing-hero h1{font:500 clamp(2.4rem,5.5vw,5.5rem)/1.06 var(--font-display);letter-spacing:-.05em;max-width:17ch;margin:24px 0 28px;text-wrap:balance;overflow-wrap:break-word}.landing-lede{font-size:clamp(1.05rem,1.65vw,1.4rem);line-height:1.65;max-width:66ch;color:var(--fg-2)}.landing-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:28px}.landing-actions .btn{white-space:normal;text-align:left;max-width:100%}
.landing-section{border-top:1px solid var(--line);padding:clamp(40px,6vw,88px) 0}.landing h2{font:500 clamp(1.7rem,3vw,2.8rem)/1.15 var(--font-display);letter-spacing:-.03em;max-width:25ch;margin:0 0 24px}.landing h3{font-size:1.15rem;line-height:1.35;margin:0 0 12px}.landing p{line-height:1.8}.landing-section p,.landing-cta p{color:var(--fg-2);max-width:70ch}.landing-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:clamp(24px,6vw,100px)}.landing-split>div p+p{margin-top:20px}.landing-section-head{max-width:75ch;margin-bottom:40px}.landing-section-head .kicker{margin-bottom:20px}
.landing-modules{display:grid;grid-template-columns:1fr 1fr;gap:36px 64px}.landing-modules article{display:flex;gap:20px;min-width:0}.landing-index{font:500 .8rem var(--font-mono);color:var(--accent-text);padding-top:4px}.landing-process{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;list-style:none;padding:0;margin:0}.landing-process li>span{display:block;font:500 .8rem var(--font-mono);color:var(--accent-text);margin-bottom:24px}
.landing-example{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:40px;align-items:center}.landing-example:not(:has(img)){grid-template-columns:1fr}.landing-example img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:10px}.landing-faq details{border-bottom:1px solid var(--line);padding:22px 0}.landing-faq details:first-child{padding-top:0}.landing-faq summary{cursor:pointer;font-weight:600;line-height:1.5;list-style:none;padding-right:24px;position:relative}.landing-faq summary:after{content:"+";position:absolute;right:0;color:var(--accent-text)}.landing-faq details[open] summary:after{content:"−"}.landing-faq details p{margin-top:16px}.landing-related{display:flex;flex-wrap:wrap;gap:16px 32px}.landing-related a{display:flex;gap:14px;align-items:center;text-underline-offset:5px;color:var(--accent-text)}.landing-cta{padding:40px 0 100px}.landing-cta h2{margin-top:24px}.landing-cta .btn{margin-top:28px;white-space:normal}.landing [id]{scroll-margin-top:calc(var(--header-h) + 24px)}
@media(max-width:767px){.landing-split,.landing-example{grid-template-columns:1fr}.landing-process{grid-template-columns:1fr;gap:28px}.landing-modules{grid-template-columns:1fr;gap:28px}.landing-process li{border-top:1px solid var(--line);padding-top:24px}.landing-process li>span{margin-bottom:14px}.landing-hero h1{max-width:18ch;letter-spacing:-.04em}.landing-actions{align-items:stretch;flex-direction:column}.landing-actions .btn{justify-content:space-between}.breadcrumbs{font-size:.7rem}}
@media print{.landing{padding-top:0}.landing-hero{padding-top:24px}.landing-section{padding:24px 0}.landing-actions,.landing-cta,.mobile-menu{display:none}.landing h2,.landing h3{break-after:avoid}.landing-process li,.landing-modules article{break-inside:avoid}}

/* ---------- Merged from service-faq-cms.css ---------- */
/* Managed copy uses the existing service cards and native FAQ disclosures. */
.bento { position: relative; }
.service-anchor { position: absolute; top: 0; scroll-margin-top: 110px; }
.services-empty { grid-column: 1 / -1; }
.services-empty, .faq-empty { color: var(--fg-2); padding-block: 24px; }
.services-empty a, .faq-empty a, .faq__a a, .landing-faq details > div a {
  color: var(--accent-text); text-decoration: underline; text-underline-offset: .2em;
}
.faq__a ul, .faq__a ol, .landing-faq details > div ul, .landing-faq details > div ol {
  color: var(--fg-2); padding: 0 0 26px 1.3em; max-width: 62ch;
}
.faq__a li + li, .landing-faq details > div li + li { margin-top: .5em; }
.nunitto-preview-notice { background: #e7f2d6; color: #18371b; border-bottom: 1px solid #acc78e; padding: 12px 20px; font: 13px/1.5 Arial,sans-serif; position: relative; z-index: 1000; }
.nunitto-preview-notice a { color: inherit; font-weight: bold; }
.nunitto-preview-notice code { font-size: 11px; }

/* ---------- Merged from stage5-cms.css ---------- */
/* Additional CMS entries inherit the established cards, tabs and landing page design. */
.card--standard { grid-column: span 2; }
.cms-empty { grid-column: 1 / -1; color: var(--fg-2); padding-block: 20px; }
.cms-empty a { color: var(--accent-text); }
.cms-projects { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }
.cms-projects article { padding: 24px; border: 1px solid var(--line); border-radius: 10px; }
.landing-section figure { margin: 24px 0; }
.landing-section figure img { max-width: 100%; height: auto; border-radius: 10px; }
.landing-section figcaption { color: var(--fg-2); font-size: .875rem; margin-top: 12px; }
@media(max-width:1100px) { .card--standard { grid-column: span 1; } }
@media(max-width:767px) { .cms-projects { grid-template-columns: 1fr; } }