/* === Tokens === */
:root {
  /* Surfaces — dark base */
  --bg: #08090A;
  --surface: #0F1011;
  --surface-2: #16181A;
  --surface-3: #1C1E21;

  /* Borders */
  --border: #1F2123;
  --border-strong: #2A2D30;

  /* Text */
  --text: #F7F8F8;
  --text-muted: #8A8F98;
  --text-subtle: #62666D;

  /* Interactive */
  --cta-bg: #F7F8F8;
  --cta-text: #08090A;
  --cta-hover: #E0E1E3;
  --link: #F7F8F8;
  --link-hover: #8A8F98;

  /* Layout */
  --container-max: 1200px;
  --reading-width: 680px;

  /* Spacing (8px grid) */
  --s-1: 8px;
  --s-2: 16px;
  --s-3: 24px;
  --s-4: 32px;
  --s-5: 48px;
  --s-6: 64px;
  --s-7: 96px;
  --s-8: 128px;
  --s-9: 160px;

  /* Type scale */
  --h1: 72px;
  --h2: 48px;
  --h3: 28px;
  --h4: 20px;
  --body-lg: 18px;
  --body: 16px;
  --small: 14px;
  --mono: 13px;

  /* Motion */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Fonts */
  --font-sans: "Geist", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-display: "Geist", "Inter Tight", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Component tokens that differ between themes */
  --nav-bg-scrolled: rgba(8, 9, 10, 0.72);
}

/* === Light mode override === */
[data-theme="light"] {
  --bg: #FFFFFF;
  --surface: #F4F5F6;
  --surface-2: #E9EBED;
  --surface-3: #DDDFE2;
  --border: #E1E2E5;
  --border-strong: #C4C7CB;
  --text: #08090A;
  --text-muted: #545861;
  --text-subtle: #888B92;
  --cta-bg: #08090A;
  --cta-text: #FFFFFF;
  --cta-hover: #1C1E21;
  --link: #08090A;
  --link-hover: #545861;
  --nav-bg-scrolled: rgba(255, 255, 255, 0.85);
}
[data-theme="light"] .field select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%23545861' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}

/* === Base === */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

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

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

/* === Typography === */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  margin: 0;
  color: var(--text);
  font-weight: 500;
  text-wrap: balance;
}
h1 { font-size: var(--h1); line-height: 1.05; letter-spacing: -0.03em; }
h2 { font-size: var(--h2); line-height: 1.10; letter-spacing: -0.02em; }
h3 { font-size: var(--h3); line-height: 1.20; letter-spacing: -0.01em; }
h4 { font-size: var(--h4); line-height: 1.30; }

p { margin: 0; }

a {
  color: var(--link);
  text-decoration: none;
  transition: color var(--transition-base);
}
a:hover { color: var(--link-hover); }

.mono {
  font-family: var(--font-mono);
  font-size: var(--mono);
  line-height: 1.4;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 400;
}

.body-lg { font-size: var(--body-lg); line-height: 1.6; }
.small   { font-size: var(--small); line-height: 1.5; }
.muted   { color: var(--text-muted); }

/* === Layout === */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: 32px;
  padding-right: 32px;
}

section { padding-top: var(--s-9); padding-bottom: var(--s-9); }

.section-head {
  max-width: 720px;
  margin-bottom: var(--s-7);
}
.section-head .mono { display: block; margin-bottom: var(--s-3); }
.section-head h2    { margin-bottom: var(--s-3); }
.section-head .sub  {
  color: var(--text-muted);
  font-size: var(--body-lg);
  max-width: 600px;
}

/* === Buttons === */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  border-radius: 6px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--transition-base), color var(--transition-base), border-color var(--transition-base);
  white-space: nowrap;
  text-decoration: none;
}
.btn-primary {
  background: var(--cta-bg);
  color: var(--cta-text);
  padding: 12px 24px;
}
.btn-primary:hover { background: var(--cta-hover); color: var(--cta-text); }

.btn-secondary {
  color: var(--text);
  padding: 12px 4px;
  background: transparent;
}
.btn-secondary .arrow { transition: transform var(--transition-base); display: inline-block; }
.btn-secondary:hover { color: var(--text); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.btn-secondary:hover .arrow { transform: translateX(4px); }

.btn-nav {
  background: var(--cta-bg);
  color: var(--cta-text);
  padding: 10px 18px;
  font-size: 14px;
  border-radius: 6px;
}
.btn-nav:hover { background: var(--cta-hover); color: var(--cta-text); }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text);
  font-weight: 500;
  font-size: 15px;
}
.text-link .arrow { transition: transform var(--transition-base); display: inline-block; }
.text-link:hover { color: var(--text); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.text-link:hover .arrow { transform: translateX(4px); }

/* === Navigation === */
.nav {
  position: sticky;
  top: 0;
  height: 64px;
  z-index: 50;
  background: rgba(255, 255, 255, 0);
  border-bottom: 1px solid transparent;
  transition: background var(--transition-base), border-color var(--transition-base), backdrop-filter var(--transition-base);
}
.nav.scrolled {
  background: var(--nav-bg-scrolled);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  height: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}
.nav-logo {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.logo-svg {
  display: block;
  height: 22px;
  width: auto;
}
.footer-brand .logo-svg { height: 24px; }
[data-theme="light"] .logo-svg { filter: invert(1); }
.nav-links {
  display: flex;
  gap: 32px;
  justify-content: center;
}
.nav-links a {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 400;
}
.nav-links a:hover { color: var(--text); }
.nav-cta-wrap { display: flex; justify-content: flex-end; align-items: center; gap: 12px; }

.nav-burger {
  display: none;
  width: 40px; height: 40px;
  border: 1px solid var(--border);
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  padding: 0;
}

/* === Language switcher (HR / EN) === */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}
.lang-switch [aria-current="true"] { color: var(--text); }
.lang-switch .sep { color: var(--text-subtle); }
.lang-switch a {
  color: var(--text-muted);
  transition: color var(--transition-base);
}
.lang-switch a:hover { color: var(--text); }

/* === Theme toggle === */
.theme-toggle {
  width: 36px;
  height: 36px;
  border: 1px solid var(--border);
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  padding: 0;
  transition: border-color var(--transition-base), color var(--transition-base);
}
.theme-toggle:hover { border-color: var(--border-strong); }
.theme-toggle svg { width: 16px; height: 16px; display: block; }
.theme-toggle .icon-sun { display: none; }
[data-theme="light"] .theme-toggle .icon-sun { display: block; }
[data-theme="light"] .theme-toggle .icon-moon { display: none; }
.nav-burger span {
  display: block;
  width: 16px; height: 1px;
  background: var(--text);
  position: relative;
}
.nav-burger span::before, .nav-burger span::after {
  content: ""; position: absolute; left: 0; width: 16px; height: 1px; background: var(--text);
}
.nav-burger span::before { top: -5px; }
.nav-burger span::after  { top:  5px; }

/* === Mobile menu overlay === */
.mobile-menu {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 100;
  display: none;
  flex-direction: column;
  padding: 0 20px 24px;
}
.mobile-menu.open { display: flex; }
.mobile-menu > .container {
  width: 100%;
  margin: 0;
  max-width: none;
}
.mobile-menu-head {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32px;
  width: 100%;
}
.mobile-menu-close {
  width: 36px; height: 36px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mobile-menu-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
.mobile-menu-links {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--border);
}
.mobile-menu-links a {
  display: grid;
  grid-template-columns: 40px 1fr;
  align-items: center;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
  transition: color var(--transition-base);
}
.mobile-menu-links a .num {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--text-subtle);
  text-transform: uppercase;
}
.mobile-menu-links a .label {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--text);
}
.mobile-menu-links a:hover { color: var(--text); }
.mobile-menu-links a:hover .num { color: var(--text); }
.mobile-menu-links a[aria-current="page"] .num { color: var(--text); }
.mobile-menu-links a[aria-current="page"] .label { color: var(--text); }
.mobile-menu-links a[aria-current="page"]::after {
  content: "·";
  position: absolute;
  right: 0;
  color: var(--text);
  font-family: var(--font-mono);
}
.mobile-menu-links a[aria-current="page"] { position: relative; }

.mobile-menu-cta {
  margin-top: 40px;
  width: 100%;
  justify-content: center;
}
.mobile-menu-info {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.02em;
}
.mobile-menu-info a {
  color: var(--text-muted);
  transition: color var(--transition-base);
}
.mobile-menu-info a:hover { color: var(--text); }

/* === Hero === */
.hero {
  min-height: 80vh;
  display: flex;
  align-items: center;
  padding-top: var(--s-7);
  padding-bottom: var(--s-7);
}
.hero > .container { width: 100%; }
@media (min-width: 1024px) { .hero { min-height: 720px; } }

.hero-inner { max-width: none; }
.hero .mono { display: block; margin-bottom: var(--s-4); }
.hero h1 { margin-bottom: var(--s-4); max-width: 30ch; }
.hero-sub {
  color: var(--text-muted);
  font-size: var(--body-lg);
  max-width: 640px;
  margin-bottom: var(--s-5);
}
.hero-ctas { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }

.hero-meta {
  margin-top: var(--s-7);
  padding-top: var(--s-3);
  border-top: 1px solid var(--border);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  max-width: 880px;
}
.hero-meta .item .mono { display: block; margin-bottom: 8px; color: var(--text-subtle); }
.hero-meta .item .val  { font-size: 15px; color: var(--text); font-weight: 500; }

/* === Services grid === */
.services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.service-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  min-height: 280px;
  background: transparent;
  transition: border-color var(--transition-base);
}
.service-card:hover { border-color: var(--border-strong); }
.service-card .mono { margin-bottom: var(--s-5); }
.service-card h4    { margin-bottom: 12px; }
.service-card p     { color: var(--text-muted); font-size: 15px; line-height: 1.55; margin-bottom: var(--s-4); flex: 1; }
.service-card .text-link { font-size: 14px; }

/* === Products / Showcase blocks === */
.product-blocks { display: flex; flex-direction: column; gap: 96px; }

.product-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.product-block.reverse .product-text { order: 2; }
.product-block.reverse .product-visual { order: 1; }

.product-text .mono { display: block; margin-bottom: var(--s-3); }
.product-text h3    { margin-bottom: var(--s-3); }
.product-text > p   { color: var(--text-muted); font-size: var(--body-lg); line-height: 1.55; margin-bottom: var(--s-4); }
.product-features { display: flex; flex-direction: column; gap: 8px; margin-bottom: var(--s-4); }
.product-features .feat {
  color: var(--text);
  font-size: 15px;
  line-height: 1.5;
}
.product-features .feat .em { color: var(--text-subtle); margin-right: 12px; }

/* === Browser frame mocks === */
.browser-frame {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface);
}
.browser-bar {
  height: 36px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 12px;
  gap: 12px;
  background: var(--surface-2);
}
.browser-url {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-subtle);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 10px;
  flex: 1;
  text-align: left;
  letter-spacing: 0.02em;
}
.browser-controls { display: flex; gap: 6px; }
.browser-controls span {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--border-strong);
  display: inline-block;
}
.browser-body {
  aspect-ratio: 16 / 10;
  background: linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%);
  position: relative;
  overflow: hidden;
}

.mock { position: absolute; inset: 0; padding: 20px 24px; display: flex; flex-direction: column; gap: 12px; }
.mock .row { display: flex; align-items: center; justify-content: space-between; }
.mock-side {
  position: absolute;
  left: 0; top: 0; bottom: 0; width: 56px;
  border-right: 1px solid var(--border);
  background: var(--surface);
  display: flex; flex-direction: column; align-items: center; padding-top: 16px; gap: 14px;
}
.mock-side .dot { width: 22px; height: 22px; border-radius: 5px; border: 1px solid var(--border); }
.mock-side .dot.active { border-color: var(--text); background: var(--text); }
.mock-main { position: absolute; left: 56px; right: 0; top: 0; bottom: 0; padding: 18px 22px; display: flex; flex-direction: column; gap: 12px; }
.mock-title { font-family: var(--font-display); font-size: 14px; font-weight: 500; color: var(--text); }
.mock-mono  { font-family: var(--font-mono); font-size: 10px; color: var(--text-subtle); letter-spacing: 0.05em; text-transform: uppercase; }
.mock-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mock-stat { border: 1px solid var(--border); border-radius: 6px; padding: 10px 12px; }
.mock-stat .v { font-family: var(--font-display); font-size: 18px; font-weight: 500; color: var(--text); }
.mock-stat .l { font-family: var(--font-mono); font-size: 9px; color: var(--text-subtle); letter-spacing: 0.05em; text-transform: uppercase; margin-top: 2px; }
.mock-table { border: 1px solid var(--border); border-radius: 6px; flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.mock-table .tr { display: grid; grid-template-columns: 1fr 70px 60px 50px; padding: 8px 12px; border-bottom: 1px solid var(--border); font-size: 11px; align-items: center; }
.mock-table .tr:last-child { border-bottom: none; }
.mock-table .tr.head { background: var(--surface-2); font-family: var(--font-mono); font-size: 9px; color: var(--text-subtle); letter-spacing: 0.05em; text-transform: uppercase; }
.mock-table .pill { display: inline-block; border: 1px solid var(--border-strong); border-radius: 99px; padding: 2px 8px; font-size: 10px; color: var(--text); justify-self: start; }
.mock-bars { display: flex; align-items: flex-end; gap: 6px; height: 64px; padding: 0 4px; }
.mock-bars span { flex: 1; background: var(--text); border-radius: 2px; opacity: 0.85; }
.mock-bars span.muted { background: var(--border-strong); opacity: 1; }

/* Parking mock */
.mock-parking-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; }
.mock-parking-grid .cell {
  aspect-ratio: 1;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg);
}
.mock-parking-grid .cell.busy { background: var(--text); border-color: var(--text); }
.mock-parking-grid .cell.muted { background: var(--surface-2); }

/* PDF doc mock */
.mock-pdf-row { display: grid; grid-template-columns: 28px 1fr 90px 70px; gap: 12px; padding: 8px 12px; border-bottom: 1px solid var(--border); align-items: center; font-size: 11px; }
.mock-pdf-row.head { background: var(--surface-2); }
.mock-pdf-row:last-child { border-bottom: 0; }
.mock-pdf-row .icn { width: 22px; height: 26px; border: 1px solid var(--border-strong); border-radius: 2px; position: relative; background: var(--bg); }
.mock-pdf-row .icn::after { content: "PDF"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-family: var(--font-mono); font-size: 7px; color: var(--text-muted); }
.mock-pdf-row .file { color: var(--text); font-weight: 500; }
.mock-pdf-row .meta { color: var(--text-subtle); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase; }
.mock-pdf-row .status { color: var(--text); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase; }

/* Mobile: collapse mock-stats to single column so 3 wide numbers don't overlap */
@media (max-width: 767px) {
  .mock-stats { grid-template-columns: 1fr; gap: 6px; }
  .mock-stat { padding: 8px 10px; }
  .mock-stat .v { font-size: 15px; }
}

/* === Section dividers (home page numbered sections, container-width) === */
#services > .container,
#products > .container,
#approach > .container {
  border-top: 1px solid var(--border);
  padding-top: var(--s-7);
  padding-bottom: var(--s-7);
}
@media (max-width: 767px) {
  #services > .container,
  #products > .container,
  #approach > .container {
    padding-top: var(--s-6);
    padding-bottom: var(--s-6);
  }
}

/* === Work page: bordered section frames matching home numbered-section pattern === */
#cases {
  padding-top: 0;
  padding-bottom: 0;
}
#cases > .container {
  border-top: 1px solid var(--border);
  padding-top: var(--s-7);
  padding-bottom: var(--s-7);
}

/* Border above closing CTA when it follows #cases (work.html only) */
#cases + #contact {
  padding-top: 0;
}
#cases + #contact > .container {
  border-top: 1px solid var(--border);
  padding-top: var(--s-7);
}

@media (max-width: 767px) {
  #cases > .container {
    padding-top: var(--s-6);
    padding-bottom: var(--s-6);
  }
  #cases + #contact > .container {
    padding-top: var(--s-6);
  }
}

/* Hide "Read case study →" CTAs in Custom Systems until detail pages exist */
#custom-systems .case-card .case-link { display: none; }

/* === Products page: bordered section frames matching home pattern === */
#our-products,
#custom-systems {
  padding-top: 0;
  padding-bottom: 0;
}
#our-products > .container,
#custom-systems > .container {
  border-top: 1px solid var(--border);
  padding-top: var(--s-7);
  padding-bottom: var(--s-7);
}

/* Border above closing CTA when it follows #custom-systems (products.html only) */
#custom-systems + #contact {
  padding-top: 0;
}
#custom-systems + #contact > .container {
  border-top: 1px solid var(--border);
  padding-top: var(--s-7);
}

@media (max-width: 767px) {
  #our-products > .container,
  #custom-systems > .container {
    padding-top: var(--s-6);
    padding-bottom: var(--s-6);
  }
  #custom-systems + #contact > .container {
    padding-top: var(--s-6);
  }
}

/* === About page: bordered section frames matching home pattern === */
#story,
#the-shift,
#principles,
#numbers,
#where {
  padding-top: 0;
  padding-bottom: 0;
}
#story > .container,
#the-shift > .container,
#principles > .container,
#numbers > .container,
#where > .container {
  border-top: 1px solid var(--border);
  padding-top: var(--s-7);
  padding-bottom: var(--s-7);
}

/* Border above closing CTA when it follows #where (about.html only) */
#where + #contact {
  padding-top: 0;
}
#where + #contact > .container {
  border-top: 1px solid var(--border);
  padding-top: var(--s-7);
}

@media (max-width: 767px) {
  #story > .container,
  #the-shift > .container,
  #principles > .container,
  #numbers > .container,
  #where > .container {
    padding-top: var(--s-6);
    padding-bottom: var(--s-6);
  }
  #where + #contact > .container {
    padding-top: var(--s-6);
  }
}

/* === Services page: bordered section frames matching home pattern === */
#service-blocks,
#how-we-work,
#tech-stack {
  padding-top: 0;
  padding-bottom: 0;
}
#service-blocks > .container,
#how-we-work > .container,
#tech-stack > .container {
  border-top: 1px solid var(--border);
  padding-top: var(--s-7);
  padding-bottom: var(--s-7);
}

/* First service-block has no border-top so it doesn't double up with the container border */
.service-blocks > .service-block:first-child {
  border-top: none;
  padding-top: 0;
}

/* Border above closing CTA when it follows #tech-stack (services.html only) */
#tech-stack + #contact {
  padding-top: 0;
}
#tech-stack + #contact > .container {
  border-top: 1px solid var(--border);
  padding-top: var(--s-7);
}

@media (max-width: 767px) {
  #service-blocks > .container,
  #how-we-work > .container,
  #tech-stack > .container {
    padding-top: var(--s-6);
    padding-bottom: var(--s-6);
  }
  #tech-stack + #contact > .container {
    padding-top: var(--s-6);
  }
}

/* === Generic section-frame (used by new service sub-pages) === */
.section-frame { padding-top: 0; padding-bottom: 0; }
.section-frame > .container {
  border-top: 1px solid var(--border);
  padding-top: var(--s-7);
  padding-bottom: var(--s-7);
}
/* When closing CTA #contact follows a .section-frame, mirror the frame look */
.section-frame + #contact { padding-top: 0; }
.section-frame + #contact > .container {
  border-top: 1px solid var(--border);
  padding-top: var(--s-7);
}
@media (max-width: 767px) {
  .section-frame > .container {
    padding-top: var(--s-6);
    padding-bottom: var(--s-6);
  }
  .section-frame + #contact > .container { padding-top: var(--s-6); }
}

/* === 3-column pricing grid (service sub-pages) === */
.pricing-grid.three-col { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1023px) { .pricing-grid.three-col { grid-template-columns: 1fr; } }
.pricing-grid.five-col { grid-template-columns: repeat(5, 1fr); gap: 12px; }
.pricing-grid.five-col .pricing-card { padding: 24px; }
@media (max-width: 1199px) { .pricing-grid.five-col { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) { .pricing-grid.five-col { grid-template-columns: 1fr; } }

/* === 2-column case grid (web-dev selected work, 2x2) === */
.case-grid.two-col { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 767px) { .case-grid.two-col { grid-template-columns: 1fr; } }

/* === Service pricing card meta layout (key-value pairs instead of single price) === */
.pricing-card h4 {
  margin: 0 0 8px;
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  font-weight: 500;
}
.pricing-card .pricing-meta {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: var(--s-4);
  border-top: 1px solid var(--border);
  margin: 0 0 var(--s-4);
}
.pricing-card .meta-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pricing-card .meta-label {
  font-family: var(--font-mono);
  font-size: var(--mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-subtle);
}
.pricing-card .meta-value {
  color: var(--text);
  font-size: 15px;
  line-height: 1.4;
}
.pricing-card .features-label {
  display: block;
  margin-bottom: var(--s-3);
  color: var(--text-subtle);
}
.pricing-card .pricing-meta ~ .features {
  padding-top: 0;
  border-top: none;
}

/* === Hosting page: bordered section frames matching home pattern === */
#trust-bar,
#why-us,
#packages,
#standard,
#ee-specialists,
#migration,
#who-we-host,
#faq {
  padding-top: 0;
  padding-bottom: 0;
}
#trust-bar > .container,
#why-us > .container,
#packages > .container,
#standard > .container,
#ee-specialists > .container,
#migration > .container,
#who-we-host > .container,
#faq > .container {
  border-top: 1px solid var(--border);
  padding-top: var(--s-7);
  padding-bottom: var(--s-7);
}

/* Border above closing CTA when it follows #faq (hosting.html only) */
#faq + #contact {
  padding-top: 0;
}
#faq + #contact > .container {
  border-top: 1px solid var(--border);
  padding-top: var(--s-7);
}

@media (max-width: 767px) {
  #trust-bar > .container,
  #why-us > .container,
  #packages > .container,
  #standard > .container,
  #ee-specialists > .container,
  #migration > .container,
  #who-we-host > .container,
  #faq > .container {
    padding-top: var(--s-6);
    padding-bottom: var(--s-6);
  }
  #faq + #contact > .container {
    padding-top: var(--s-6);
  }
}

/* === Approach === */
.approach { max-width: var(--reading-width); margin: 0 auto; }
.approach .mono { display: block; margin-bottom: var(--s-3); }
.approach h2 { margin-bottom: var(--s-5); }
.approach p {
  font-size: var(--body-lg);
  line-height: 1.6;
  color: var(--text-muted);
  margin-bottom: var(--s-3);
}
.approach p strong { color: var(--text); font-weight: 500; }

/* === Trusted by === */
.trusted { text-align: center; padding-top: var(--s-7); padding-bottom: var(--s-7); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.trusted .mono { display: block; margin-bottom: var(--s-5); color: var(--text-subtle); }
.trusted-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  max-width: 980px;
  margin: 0 auto;
}
.trusted-row .logo {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--text);
  opacity: 0.6;
  transition: opacity var(--transition-base);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.trusted-row .logo:hover { opacity: 1; }
.trusted-row .logo .glyph {
  width: 18px; height: 18px; border: 1px solid currentColor; border-radius: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
}
.trusted-row .logo img {
  height: 28px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
  display: block;
}
/* SVG logos are white-on-dark by default; invert for light theme */
[data-theme="light"] .trusted-row .logo img {
  filter: invert(1);
}
@media (max-width: 767px) {
  /* Force a clean 2-column grid for the client logos on mobile */
  .trusted-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px 24px;
    justify-items: center;
    align-items: center;
  }
  .trusted-row .logo img { height: 22px; max-width: 130px; }
}

/* === Product status line (sub-page) === */
.product-text .status {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-subtle);
  margin-top: var(--s-3);
}

/* === Divider strip (centered mono label between sections) === */
.divider-strip {
  border-top: 1px solid var(--border);
  padding: var(--s-5) 0;
  text-align: center;
}
.divider-strip .mono { display: inline-block; }

/* === Case-card h4 variant (used for compact system cards) === */
.case-card h4 {
  margin: 0 0 12px;
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  font-weight: 500;
}
.case-card .tech {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--text-subtle);
  margin-bottom: var(--s-3);
}

/* === Service blocks (text-only, alternating) === */
.service-blocks { display: flex; flex-direction: column; gap: 96px; }
.service-block {
  scroll-margin-top: 80px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
  padding-top: 48px;
  border-top: 1px solid var(--border);
}
.service-block.reverse .service-head { order: 2; }
.service-block.reverse .service-body { order: 1; }
.service-block .service-head .mono { display: block; margin-bottom: var(--s-3); }
.service-block .service-head h2 { max-width: 14ch; }
.service-block .service-body > p { color: var(--text-muted); font-size: var(--body-lg); line-height: 1.55; margin-bottom: var(--s-4); }
.service-block .capabilities-label,
.service-block .selected-label { display: block; margin-bottom: var(--s-2); color: var(--text-subtle); }
.service-block .capabilities { display: flex; flex-direction: column; gap: 8px; margin-bottom: var(--s-4); }
.service-block .capabilities .feat { color: var(--text); font-size: 15px; line-height: 1.5; }
.service-block .capabilities .feat .em { color: var(--text-subtle); margin-right: 12px; }
.service-block .selected { color: var(--text-muted); font-size: 15px; line-height: 1.55; margin-bottom: var(--s-4); }

/* === Principles grid === */
.principles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 48px 64px;
}
.principle { max-width: 580px; }
.principle .mono { display: block; margin-bottom: var(--s-3); }
.principle h3 { margin-bottom: var(--s-2); font-size: 22px; line-height: 1.25; letter-spacing: -0.01em; }
.principle p { color: var(--text-muted); font-size: 15px; line-height: 1.6; }

/* === Tech stack === */
.tech-stack {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  border-top: 1px solid var(--border);
  padding-top: 32px;
}
.tech-row {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 24px;
}
.tech-row .label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-subtle);
  margin-bottom: var(--s-2);
}
.tech-row .items {
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
}
.tech-note {
  color: var(--text-muted);
  font-size: var(--body-lg);
  max-width: 600px;
  margin-bottom: var(--s-5);
}

@media (max-width: 1023px) {
  .principles { grid-template-columns: 1fr; gap: 40px; }
  .tech-stack { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .service-blocks { gap: 48px; }
  .service-block { grid-template-columns: 1fr; gap: 24px; padding-top: 32px; }
  .service-block.reverse .service-head { order: 1; }
  .service-block.reverse .service-body { order: 2; }
  .tech-stack { grid-template-columns: 1fr; }
}

/* === Figure-split (illustration left, narrative right) === */
.figure-split {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: 64px;
  align-items: start;
}
.figure-split.reverse { grid-template-columns: 3fr 2fr; }
.figure-split .fig-illustration { margin: 0; }
.figure-split .approach { margin: 0; max-width: none; }
@media (max-width: 1023px) {
  .figure-split,
  .figure-split.reverse { grid-template-columns: 1fr; gap: 48px; }
  /* Non-reverse layouts have figure-first in source, but mobile should lead with heading */
  .figure-split:not(.reverse) .approach { order: 1; }
  .figure-split:not(.reverse) .fig-illustration { order: 2; }
}

/* Service-block figure (sits inside .service-head below the h2) */
.service-block .fig-illustration { margin: var(--s-4) 0 0; align-items: flex-start; }
.service-block .fig-illustration .fig-label { margin-bottom: var(--s-3); }
.service-block .fig-illustration svg { max-width: 360px; }

/* === Patent-diagram figure illustrations (FIG 0.x) === */
.fig-illustration {
  margin: 64px 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.fig-illustration .fig-label {
  font-family: var(--font-mono);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  align-self: flex-start;
  margin-bottom: 32px;
}
.fig-illustration svg {
  width: 100%;
  max-width: 600px;
  height: auto;
  color: var(--text);
}
.fig-illustration .fig-caption {
  align-self: flex-start;
  margin-top: 32px;
  max-width: 60ch;
}
.fig-illustration .fig-name {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text);
  margin: 0 0 8px;
}
.fig-illustration .fig-caption p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0;
}
@media (max-width: 767px) {
  .fig-illustration { margin: 48px 0; }
  .fig-illustration svg { max-width: 100%; }
}

/* === FIG 0.6 animation (about.html Story) — DELETE THIS BLOCK TO REVERT === */
/* Pass 1: scroll-in draw — each solid group draws via stroke-dashoffset, staggered;
   the dotted radial group fades in at the end. */
#story .fig-illustration svg > g:not([stroke-dasharray]) path {
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
  transition: stroke-dashoffset 1000ms cubic-bezier(0.4, 0, 0.2, 1);
}
#story .fig-illustration svg > g:nth-of-type(1) path { transition-delay: 0ms; }
#story .fig-illustration svg > g:nth-of-type(2) path { transition-delay: 150ms; }
#story .fig-illustration svg > g:nth-of-type(3) path { transition-delay: 350ms; }
#story .fig-illustration svg > g:nth-of-type(4) path { transition-delay: 550ms; }
#story .fig-illustration svg > g[stroke-dasharray] {
  opacity: 0;
  transition: opacity 500ms ease-out 1300ms;
}
/* Triggered when the IntersectionObserver adds .in to the parent .figure-split */
#story .figure-split.in .fig-illustration svg > g:not([stroke-dasharray]) path {
  stroke-dashoffset: 0;
}
#story .figure-split.in .fig-illustration svg > g[stroke-dasharray] {
  opacity: 1;
}

/* Pass 2: hover spotlight — central cube brightens, radial dotted lines pulse */
#story .fig-illustration svg > g:nth-of-type(3) path {
  transition: stroke-opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
}
#story .fig-illustration:hover svg > g:nth-of-type(3) path {
  stroke-opacity: 1;
}
#story .figure-split.in .fig-illustration:hover svg > g[stroke-dasharray] {
  animation: figRadialPulse 900ms cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes figRadialPulse {
  0%   { opacity: 1; }
  40%  { opacity: 0.45; }
  100% { opacity: 1; }
}

/* Honor user motion preferences */
@media (prefers-reduced-motion: reduce) {
  #story .fig-illustration svg > g:not([stroke-dasharray]) path {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
    transition: none;
  }
  #story .fig-illustration svg > g[stroke-dasharray] {
    opacity: 1;
    transition: none;
  }
  #story .figure-split.in .fig-illustration:hover svg > g[stroke-dasharray] {
    animation: none;
  }
}
/* === END FIG 0.6 animation === */

/* === FIG 0.7 animation (about.html The Shift) — DELETE THIS BLOCK TO REVERT === */
/*
   Narrative: flat plane → dotted measurement lines extend left→right →
   directional arrow → 4-tier stack builds from bottom up.
   Total duration ~2.0s.
   Groups in DOM order:
     1 = left flat plane (1 path)
     2 = right 4-tier stack (4 paths, ordered largest→smallest)
     3 = dotted measurement lines (stroke-dasharray="2 4", 2 paths)
     4 = directional arrow (1 path)
*/

/* Solid stroke paths (groups 1, 2, 4): drawn via stroke-dashoffset */
#the-shift .fig-illustration svg > g:not([stroke-dasharray]) path {
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
  transition: stroke-dashoffset 700ms cubic-bezier(0.4, 0, 0.2, 1);
}
/* Stagger: plane (0ms), then arrow (900ms), then each stack tier */
#the-shift .fig-illustration svg > g:nth-of-type(1) path { transition-delay: 0ms; }
#the-shift .fig-illustration svg > g:nth-of-type(4) path { transition-delay: 900ms; transition-duration: 350ms; }
#the-shift .fig-illustration svg > g:nth-of-type(2) > path { transition-duration: 550ms; }
#the-shift .fig-illustration svg > g:nth-of-type(2) > path:nth-child(1) { transition-delay: 1000ms; }
#the-shift .fig-illustration svg > g:nth-of-type(2) > path:nth-child(2) { transition-delay: 1150ms; }
#the-shift .fig-illustration svg > g:nth-of-type(2) > path:nth-child(3) { transition-delay: 1300ms; }
#the-shift .fig-illustration svg > g:nth-of-type(2) > path:nth-child(4) { transition-delay: 1450ms; }

/* Dotted measurement group: extend left → right via scaleX
   (preserves the SVG dot pattern, unlike stroke-dashoffset which would overwrite it) */
#the-shift .fig-illustration svg > g[stroke-dasharray] {
  transform: scaleX(0);
  transform-origin: 0 50%;
  transform-box: fill-box;
  transition: transform 700ms cubic-bezier(0.4, 0, 0.2, 1) 400ms;
}

/* Trigger states (when IntersectionObserver adds .in to the parent) */
#the-shift .figure-split.in .fig-illustration svg > g:not([stroke-dasharray]) path {
  stroke-dashoffset: 0;
}
#the-shift .figure-split.in .fig-illustration svg > g[stroke-dasharray] {
  transform: scaleX(1);
}

/* Hover: dotted lines march left → right; arrow brightens */
@keyframes figDottedMarch {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -6; }
}
#the-shift .figure-split.in .fig-illustration:hover svg > g[stroke-dasharray] path {
  animation: figDottedMarch 900ms linear infinite;
}
#the-shift .fig-illustration svg > g:nth-of-type(4) path {
  transition: stroke-dashoffset 350ms cubic-bezier(0.4, 0, 0.2, 1) 900ms,
              stroke-opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
}
#the-shift .fig-illustration:hover svg > g:nth-of-type(4) path {
  stroke-opacity: 1;
}

/* Honor user motion preferences */
@media (prefers-reduced-motion: reduce) {
  #the-shift .fig-illustration svg > g:not([stroke-dasharray]) path {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
    transition: none;
  }
  #the-shift .fig-illustration svg > g[stroke-dasharray] {
    transform: none;
    transition: none;
  }
  #the-shift .figure-split.in .fig-illustration:hover svg > g[stroke-dasharray] path {
    animation: none;
  }
}
/* === END FIG 0.7 animation === */

/* === FIG 0.2 animation (services.html Block 1 — Web & App Dev) — DELETE THIS BLOCK TO REVERT === */
/*
   Narrative: building a layered system bottom-up, then bridging with connectors,
   then activating modules on top.
   Total duration ~1.5s.
   Groups in DOM order:
     1 = 4 stacked layers (path 1 = bottom, path 4 = top)
     2 = dotted vertical connectors (stroke-dasharray="2 3")
     3 = 6 module diamond marks (on top of stack)
*/
.service-block:nth-of-type(1) .fig-illustration svg > g:nth-of-type(1) > path,
.service-block:nth-of-type(1) .fig-illustration svg > g:nth-of-type(3) > path {
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
}
/* Layers (group 1): bottom-up, 200ms stagger */
.service-block:nth-of-type(1) .fig-illustration svg > g:nth-of-type(1) > path {
  transition: stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
}
.service-block:nth-of-type(1) .fig-illustration svg > g:nth-of-type(1) > path:nth-child(1) { transition-delay: 0ms; }
.service-block:nth-of-type(1) .fig-illustration svg > g:nth-of-type(1) > path:nth-child(2) { transition-delay: 200ms; }
.service-block:nth-of-type(1) .fig-illustration svg > g:nth-of-type(1) > path:nth-child(3) { transition-delay: 400ms; }
.service-block:nth-of-type(1) .fig-illustration svg > g:nth-of-type(1) > path:nth-child(4) { transition-delay: 600ms; }

/* Dotted connectors (group 2): opacity fade in to preserve dot pattern */
.service-block:nth-of-type(1) .fig-illustration svg > g:nth-of-type(2) {
  opacity: 0;
  transition: opacity 500ms ease-out 900ms;
}

/* Module marks (group 3): draw last, 60ms stagger */
.service-block:nth-of-type(1) .fig-illustration svg > g:nth-of-type(3) > path {
  transition: stroke-dashoffset 350ms cubic-bezier(0.4, 0, 0.2, 1);
}
.service-block:nth-of-type(1) .fig-illustration svg > g:nth-of-type(3) > path:nth-child(1) { transition-delay: 1150ms; }
.service-block:nth-of-type(1) .fig-illustration svg > g:nth-of-type(3) > path:nth-child(2) { transition-delay: 1210ms; }
.service-block:nth-of-type(1) .fig-illustration svg > g:nth-of-type(3) > path:nth-child(3) { transition-delay: 1270ms; }
.service-block:nth-of-type(1) .fig-illustration svg > g:nth-of-type(3) > path:nth-child(4) { transition-delay: 1330ms; }
.service-block:nth-of-type(1) .fig-illustration svg > g:nth-of-type(3) > path:nth-child(5) { transition-delay: 1390ms; }
.service-block:nth-of-type(1) .fig-illustration svg > g:nth-of-type(3) > path:nth-child(6) { transition-delay: 1450ms; }

/* Trigger states (IntersectionObserver adds .in to .service-block) */
.service-block:nth-of-type(1).in .fig-illustration svg > g:nth-of-type(1) > path,
.service-block:nth-of-type(1).in .fig-illustration svg > g:nth-of-type(3) > path {
  stroke-dashoffset: 0;
}
.service-block:nth-of-type(1).in .fig-illustration svg > g:nth-of-type(2) {
  opacity: 1;
}

/* Hover: module marks gently pulse (modules running on top of the stack) */
@keyframes figModulePulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.6; }
}
.service-block:nth-of-type(1).in .fig-illustration:hover svg > g:nth-of-type(3) {
  animation: figModulePulse 1800ms ease-in-out infinite;
}

/* Honor user motion preferences */
@media (prefers-reduced-motion: reduce) {
  .service-block:nth-of-type(1) .fig-illustration svg > g > path {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
    transition: none;
  }
  .service-block:nth-of-type(1) .fig-illustration svg > g:nth-of-type(2) {
    opacity: 1;
    transition: none;
  }
  .service-block:nth-of-type(1).in .fig-illustration:hover svg > g:nth-of-type(3) {
    animation: none;
  }
}
/* === END FIG 0.2 animation === */

/* === FIG 0.5 animation (services.html Block 2 — AI & Automation) — DELETE THIS BLOCK TO REVERT === */
/*
   Narrative: a hub establishes itself, then connection lines extend outward,
   then satellite nodes light up at each endpoint, then flow ticks reveal
   the data direction.
   Total duration ~1.7s.
   Groups in DOM order:
     1 = 6 cubes (path:nth-child(3) is the HUB at M300 190; others are satellites)
     2 = 7 connection lines
     3 = 7 flow ticks (small perpendicular marks at line midpoints)
*/
.service-block:nth-of-type(4) .fig-illustration svg > g:nth-of-type(1) > path,
.service-block:nth-of-type(4) .fig-illustration svg > g:nth-of-type(4) > path {
  stroke-dasharray: 800;
  stroke-dashoffset: 800;
  transition: stroke-dashoffset 500ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hub first */
.service-block:nth-of-type(4) .fig-illustration svg > g:nth-of-type(1) > path:nth-child(3) {
  transition-duration: 400ms;
  transition-delay: 0ms;
}

/* Connection lines — start 350ms, light stagger */
.service-block:nth-of-type(4) .fig-illustration svg > g:nth-of-type(4) > path { transition-duration: 500ms; }
.service-block:nth-of-type(4) .fig-illustration svg > g:nth-of-type(4) > path:nth-child(1) { transition-delay: 350ms; }
.service-block:nth-of-type(4) .fig-illustration svg > g:nth-of-type(4) > path:nth-child(2) { transition-delay: 390ms; }
.service-block:nth-of-type(4) .fig-illustration svg > g:nth-of-type(4) > path:nth-child(3) { transition-delay: 430ms; }
.service-block:nth-of-type(4) .fig-illustration svg > g:nth-of-type(4) > path:nth-child(4) { transition-delay: 470ms; }
.service-block:nth-of-type(4) .fig-illustration svg > g:nth-of-type(4) > path:nth-child(5) { transition-delay: 510ms; }
.service-block:nth-of-type(4) .fig-illustration svg > g:nth-of-type(4) > path:nth-child(6) { transition-delay: 550ms; }
.service-block:nth-of-type(4) .fig-illustration svg > g:nth-of-type(4) > path:nth-child(7) { transition-delay: 590ms; }

/* Satellite nodes — paths 1, 2, 4, 5, 6 of group 1 (3 is the hub) */
.service-block:nth-of-type(4) .fig-illustration svg > g:nth-of-type(1) > path:nth-child(1) { transition-delay: 750ms; }
.service-block:nth-of-type(4) .fig-illustration svg > g:nth-of-type(1) > path:nth-child(2) { transition-delay: 830ms; }
.service-block:nth-of-type(4) .fig-illustration svg > g:nth-of-type(1) > path:nth-child(4) { transition-delay: 910ms; }
.service-block:nth-of-type(4) .fig-illustration svg > g:nth-of-type(1) > path:nth-child(5) { transition-delay: 990ms; }
.service-block:nth-of-type(4) .fig-illustration svg > g:nth-of-type(1) > path:nth-child(6) { transition-delay: 1070ms; }

/* Flow ticks: fade in last */
.service-block:nth-of-type(4) .fig-illustration svg > g:nth-of-type(3) {
  opacity: 0;
  transition: opacity 400ms ease-out 1300ms;
}

/* Trigger states */
.service-block:nth-of-type(4).in .fig-illustration svg > g:nth-of-type(1) > path,
.service-block:nth-of-type(4).in .fig-illustration svg > g:nth-of-type(4) > path {
  stroke-dashoffset: 0;
}
.service-block:nth-of-type(4).in .fig-illustration svg > g:nth-of-type(3) {
  opacity: 1;
}

/* Hover: flow ticks pulse (data flowing along connections) */
@keyframes figFlowPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}
.service-block:nth-of-type(4).in .fig-illustration:hover svg > g:nth-of-type(3) {
  animation: figFlowPulse 1400ms ease-in-out infinite;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .service-block:nth-of-type(4) .fig-illustration svg > g > path {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
    transition: none;
  }
  .service-block:nth-of-type(4) .fig-illustration svg > g:nth-of-type(3) {
    opacity: 1;
    transition: none;
  }
  .service-block:nth-of-type(4).in .fig-illustration:hover svg > g:nth-of-type(3) {
    animation: none;
  }
}
/* === END FIG 0.5 animation === */

/* === FIG 0.3 animation (services.html Block 3 — Hosting) — DELETE THIS BLOCK TO REVERT === */
/*
   Narrative: floor plate is laid down, then the primary 9-module rack builds
   bottom-up, then the secondary 6-module rack builds bottom-up.
   Total duration ~1.8s.
   Groups in DOM order:
     1 = primary rack (9 modules × 3 paths each = 27 paths: cube + connector + tick per module)
     2 = secondary rack (6 modules × 2 paths each = 12 paths: cube + tick per module)
     3 = floor plate (1 path) — drawn first via early delay
*/
.service-block:nth-of-type(2) .fig-illustration svg > g > path {
  stroke-dasharray: 1500;
  stroke-dashoffset: 1500;
  transition: stroke-dashoffset 350ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Floor plate first */
.service-block:nth-of-type(2) .fig-illustration svg > g:nth-of-type(2) > path {
  transition: stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}

/* Primary rack — 9 modules, 80ms stagger per module (each module has 3 paths) */
.service-block:nth-of-type(2) .fig-illustration svg > g:nth-of-type(1) > path:nth-child(-n+3)                       { transition-delay: 350ms; }
.service-block:nth-of-type(2) .fig-illustration svg > g:nth-of-type(1) > path:nth-child(n+4):nth-child(-n+6)        { transition-delay: 430ms; }
.service-block:nth-of-type(2) .fig-illustration svg > g:nth-of-type(1) > path:nth-child(n+7):nth-child(-n+9)        { transition-delay: 510ms; }
.service-block:nth-of-type(2) .fig-illustration svg > g:nth-of-type(1) > path:nth-child(n+10):nth-child(-n+12)      { transition-delay: 590ms; }
.service-block:nth-of-type(2) .fig-illustration svg > g:nth-of-type(1) > path:nth-child(n+13):nth-child(-n+15)      { transition-delay: 670ms; }
.service-block:nth-of-type(2) .fig-illustration svg > g:nth-of-type(1) > path:nth-child(n+16):nth-child(-n+18)      { transition-delay: 750ms; }
.service-block:nth-of-type(2) .fig-illustration svg > g:nth-of-type(1) > path:nth-child(n+19):nth-child(-n+21)      { transition-delay: 830ms; }
.service-block:nth-of-type(2) .fig-illustration svg > g:nth-of-type(1) > path:nth-child(n+22):nth-child(-n+24)      { transition-delay: 910ms; }
.service-block:nth-of-type(2) .fig-illustration svg > g:nth-of-type(1) > path:nth-child(n+25):nth-child(-n+27)      { transition-delay: 990ms; }

/* Secondary rack — 6 modules, 80ms stagger per module (each module has 2 paths) */
.service-block:nth-of-type(2) .fig-illustration svg > g:nth-of-type(2) > path:nth-child(-n+2)                       { transition-delay: 1050ms; }
.service-block:nth-of-type(2) .fig-illustration svg > g:nth-of-type(2) > path:nth-child(n+3):nth-child(-n+4)        { transition-delay: 1130ms; }
.service-block:nth-of-type(2) .fig-illustration svg > g:nth-of-type(2) > path:nth-child(n+5):nth-child(-n+6)        { transition-delay: 1210ms; }
.service-block:nth-of-type(2) .fig-illustration svg > g:nth-of-type(2) > path:nth-child(n+7):nth-child(-n+8)        { transition-delay: 1290ms; }
.service-block:nth-of-type(2) .fig-illustration svg > g:nth-of-type(2) > path:nth-child(n+9):nth-child(-n+10)       { transition-delay: 1370ms; }
.service-block:nth-of-type(2) .fig-illustration svg > g:nth-of-type(2) > path:nth-child(n+11):nth-child(-n+12)      { transition-delay: 1450ms; }

/* Trigger state */
.service-block:nth-of-type(2).in .fig-illustration svg > g > path {
  stroke-dashoffset: 0;
}

/* Hover: status ticks pulse (servers running) — every 3rd path of group 1, every 2nd of group 2 */
@keyframes figRackTickPulse {
  0%, 100% { opacity: 1; stroke-width: 1.5; }
  50%      { opacity: 0.1; stroke-width: 2.4; }
}
.service-block:nth-of-type(2).in .fig-illustration:hover svg > g:nth-of-type(1) > path:nth-child(3n),
.service-block:nth-of-type(2).in .fig-illustration:hover svg > g:nth-of-type(2) > path:nth-child(2n) {
  animation: figRackTickPulse 1100ms ease-in-out infinite;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .service-block:nth-of-type(2) .fig-illustration svg > g > path {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
    transition: none;
  }
  .service-block:nth-of-type(2).in .fig-illustration:hover svg > g > path {
    animation: none;
  }
}
/* === END FIG 0.3 animation === */

/* === FIG 0.4 animation (services.html Block 4 — Consulting) — DELETE THIS BLOCK TO REVERT === */
/*
   Narrative: instrument assembles foundation → calibration rings → pivot →
   directional arm extends → pointer tip resolves the vector.
   Total duration ~2.0s.
   Groups in DOM order:
     1 = base plinth
     2 = inner stage plate
     3 = 3 concentric calibration rings (path 1 outer → path 3 inner)
     4 = vertical pivot column
     5 = square cap on pivot
     6 = directional arm
     7 = pointer tip (climax)
     8 = counterweight (small cube on opposite end)
     9 = dotted registration marks at base corners (stroke-dasharray="2 4")
     10 = small connector mark
*/
.service-block:nth-of-type(3) .fig-illustration svg > g:not(:nth-of-type(9)) > path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  transition: stroke-dashoffset 350ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Foundation (base + inner stage): draw together first */
.service-block:nth-of-type(3) .fig-illustration svg > g:nth-of-type(1) > path,
.service-block:nth-of-type(3) .fig-illustration svg > g:nth-of-type(2) > path {
  transition-duration: 450ms;
  transition-delay: 0ms;
}

/* Concentric rings (group 3): outer → inner stagger */
.service-block:nth-of-type(3) .fig-illustration svg > g:nth-of-type(3) > path:nth-child(1) { transition-delay: 400ms; }
.service-block:nth-of-type(3) .fig-illustration svg > g:nth-of-type(3) > path:nth-child(2) { transition-delay: 530ms; }
.service-block:nth-of-type(3) .fig-illustration svg > g:nth-of-type(3) > path:nth-child(3) { transition-delay: 660ms; }

/* Pivot column + square cap */
.service-block:nth-of-type(3) .fig-illustration svg > g:nth-of-type(3) > path { transition-delay: 850ms; }
.service-block:nth-of-type(3) .fig-illustration svg > g:nth-of-type(5) > path { transition-delay: 1000ms; }

/* Directional arm */
.service-block:nth-of-type(3) .fig-illustration svg > g:nth-of-type(6) > path { transition-delay: 1200ms; transition-duration: 400ms; }

/* Counterweight, then pointer tip resolves last */
.service-block:nth-of-type(3) .fig-illustration svg > g:nth-of-type(8) > path { transition-delay: 1450ms; }
.service-block:nth-of-type(3) .fig-illustration svg > g:nth-of-type(7) > path { transition-delay: 1600ms; transition-duration: 450ms; }

/* Small connector mark */
.service-block:nth-of-type(3) .fig-illustration svg > g:nth-of-type(10) > path { transition-delay: 1750ms; }

/* Dotted registration marks: fade in (preserves dot pattern) */
.service-block:nth-of-type(3) .fig-illustration svg > g:nth-of-type(9) {
  opacity: 0;
  transition: opacity 400ms ease-out 1700ms;
}

/* Trigger state */
.service-block:nth-of-type(3).in .fig-illustration svg > g:not(:nth-of-type(9)) > path {
  stroke-dashoffset: 0;
}
.service-block:nth-of-type(3).in .fig-illustration svg > g:nth-of-type(9) {
  opacity: 1;
}

/* Hover: pointer tip pings (the resolved vector) */
@keyframes figPointerPing {
  0%, 100% { stroke-width: 1.5; stroke-opacity: 0.85; }
  50%      { stroke-width: 2.6; stroke-opacity: 1; }
}
.service-block:nth-of-type(3).in .fig-illustration:hover svg > g:nth-of-type(7) > path {
  animation: figPointerPing 1100ms ease-in-out infinite;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .service-block:nth-of-type(3) .fig-illustration svg > g > path {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
    transition: none;
  }
  .service-block:nth-of-type(3) .fig-illustration svg > g:nth-of-type(9) {
    opacity: 1;
    transition: none;
  }
  .service-block:nth-of-type(3).in .fig-illustration:hover svg > g:nth-of-type(7) > path {
    animation: none;
  }
}
/* === END FIG 0.4 animation === */

/* === FIG 0.1 animation (index.html Approach) — DELETE THIS BLOCK TO REVERT === */
/*
   Narrative: foundation resolves into a single axial focus point.
   Stepped plinth → inner step → vertical prism rises → faceted apex
   emerges at the top → crosshair locks the base.
   Total duration ~1.4s.
   Groups in DOM order:
     1 = stepped plinth (outer/larger)
     2 = inner step (smaller plinth tier)
     3 = vertical prism (tall column)
     4 = faceted apex (4 lines converging above)
     5 = crosshair on base
*/
#approach .fig-illustration svg > g > path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  transition: stroke-dashoffset 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Foundation first */
#approach .fig-illustration svg > g:nth-of-type(1) > path { transition-delay: 0ms; }
#approach .fig-illustration svg > g:nth-of-type(2) > path { transition-delay: 250ms; }

/* Prism rises */
#approach .fig-illustration svg > g:nth-of-type(3) > path { transition-delay: 500ms; transition-duration: 500ms; }

/* Apex resolves (climax) */
#approach .fig-illustration svg > g:nth-of-type(4) > path { transition-delay: 950ms; transition-duration: 350ms; }

/* Crosshair locks last (precision detail) */
#approach .fig-illustration svg > g:nth-of-type(5) > path { transition-delay: 1200ms; transition-duration: 300ms; }

/* Trigger state */
#approach .figure-split.in .fig-illustration svg > g > path {
  stroke-dashoffset: 0;
}

/* Hover: apex pings (the focus point — "this is what we are") */
@keyframes figFocusPing {
  0%, 100% { stroke-width: 1.5; stroke-opacity: 0.85; }
  50%      { stroke-width: 2.6; stroke-opacity: 1; }
}
#approach .figure-split.in .fig-illustration:hover svg > g:nth-of-type(4) > path {
  animation: figFocusPing 1200ms ease-in-out infinite;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  #approach .fig-illustration svg > g > path {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
    transition: none;
  }
  #approach .figure-split.in .fig-illustration:hover svg > g:nth-of-type(4) > path {
    animation: none;
  }
}
/* === END FIG 0.1 animation === */

/* === Stats grid (About) === */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  border-top: 1px solid var(--border);
  padding-top: var(--s-5);
}
#trust-bar .stats-grid,
#numbers .stats-grid {
  border-top: none;
  padding-top: 0;
}
#trust-bar .section-head { margin-bottom: var(--s-3); }
.stat-cell { display: flex; flex-direction: column; gap: 8px; }
.stat-cell .num {
  font-family: var(--font-display);
  font-size: 64px;
  line-height: 1;
  letter-spacing: -0.03em;
  font-weight: 500;
  color: var(--text);
}
.stat-cell .label {
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.5;
  max-width: 22ch;
}

/* === Where-we-work meta === */
.where-meta {
  margin-top: var(--s-5);
  padding-top: var(--s-3);
  border-top: 1px solid var(--border);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  max-width: 880px;
}
.where-meta .item .mono { display: block; margin-bottom: 8px; color: var(--text-subtle); }
.where-meta .item .val { font-size: 15px; color: var(--text); font-weight: 500; }

/* === Editorial column extension (multi-paragraph story) === */
.approach p + p { margin-bottom: var(--s-3); }

@media (max-width: 1023px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 32px 48px; }
  .where-meta { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .stat-cell .num { font-size: 48px; }
  .where-meta { grid-template-columns: 1fr; gap: 20px; }
}

/* === Contact split === */
.contact-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 96px;
  align-items: start;
}

/* === Contact form === */
.contact-form { display: flex; flex-direction: column; gap: var(--s-3); }
.contact-form h2 { margin-bottom: var(--s-2); }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label {
  font-family: var(--font-mono);
  font-size: var(--mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-subtle);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 14px 16px;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
  transition: border-color var(--transition-base);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
.field textarea { resize: vertical; min-height: 140px; font-family: var(--font-sans); }
.field input::placeholder,
.field textarea::placeholder { color: var(--text-subtle); }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--text);
}
.field select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%238A8F98' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
  cursor: pointer;
}
.form-actions { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: var(--s-2); }
.form-actions .btn { border: none; cursor: pointer; }
.form-note {
  color: var(--text-subtle);
  font-family: var(--font-mono);
  font-size: var(--mono);
  letter-spacing: 0.04em;
}

/* Honeypot: visually + accessibly hidden, but still submittable by bots */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Inline error message (shown when send fails) */
.form-error {
  color: #E74C3C;
  font-size: 14px;
  margin: 0;
  padding: 12px 16px;
  border: 1px solid rgba(231, 76, 60, 0.4);
  border-radius: 8px;
  background: rgba(231, 76, 60, 0.08);
}

/* === Contact form: AJAX submit slide-up success === */
.form-wrap { position: relative; }

.contact-form {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 380ms ease, transform 480ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
/* Higher specificity than .reveal.in so the form actually hides after submit.
   Also visibility:hidden so it stops taking layout space even before .form-wrap
   collapses to the success card's size. */
.form-wrap .contact-form.hidden,
.contact-form.hidden {
  opacity: 0 !important;
  transform: translateY(-12px) !important;
  pointer-events: none;
  position: absolute;
  inset: 0;
  visibility: hidden;
}

.form-success {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 520ms ease 80ms, transform 620ms cubic-bezier(0.2, 0.7, 0.2, 1) 80ms;
  padding: 40px 32px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  text-align: left;
}
.form-success.show {
  opacity: 1;
  transform: translateY(0);
}
.form-success .mono {
  display: block;
  margin-bottom: var(--s-3);
  color: var(--text-subtle);
  font-family: var(--font-mono);
  font-size: var(--mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.form-success h2 {
  margin: 0 0 var(--s-3);
}
.form-success p {
  color: var(--text-muted);
  font-size: var(--body-lg);
  line-height: 1.6;
  margin: 0;
}

/* === Contact directory (right column) === */
.contact-directory { display: flex; flex-direction: column; }
@media (min-width: 1024px) {
  .contact-directory {
    position: sticky;
    top: 96px;
    align-self: start;
  }
}
.directory-block {
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--border);
}
.directory-block:first-child { padding-top: 0; }
.directory-block:last-child { border-bottom: none; padding-bottom: 0; }
.directory-block .mono { display: block; margin-bottom: var(--s-3); color: var(--text-subtle); }
.directory-block .item { margin-bottom: var(--s-2); }
.directory-block .item:last-child { margin-bottom: 0; }
.directory-block h4 {
  font-family: var(--font-mono);
  font-size: var(--mono);
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-subtle);
  margin-bottom: 6px;
}
.directory-block .item .val,
.directory-block .item a { color: var(--text); font-size: 16px; line-height: 1.5; }
.directory-block .item p { margin: 0; color: var(--text-muted); font-size: 14px; line-height: 1.5; }
.directory-block .text-link { margin-top: var(--s-2); }

/* === Specific inquiries === */
.inquiries-list { display: flex; flex-direction: column; gap: var(--s-2); max-width: 600px; }
.inquiries-list .row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--border);
  align-items: center;
}
.inquiries-list .row:last-child { border-bottom: none; }
.inquiries-list .label { color: var(--text-muted); font-size: 15px; }
.inquiries-list .row a { color: var(--text); font-size: 15px; font-weight: 500; }

@media (max-width: 1023px) {
  .contact-grid { grid-template-columns: 1fr; gap: 64px; }
}
@media (max-width: 767px) {
  .inquiries-list .row { grid-template-columns: 1fr; gap: 4px; }
}

/* === Pricing cards (Hosting page) === */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.pricing-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  transition: border-color var(--transition-base), background var(--transition-base);
}
.pricing-card:hover { border-color: var(--border-strong); }
.pricing-card.recommended {
  border-color: var(--border-strong);
  background: var(--surface-2);
}
.pricing-card .mono { display: block; margin-bottom: var(--s-2); }
.pricing-card.recommended .mono { color: var(--text); }

/* Header block: tier name + descriptor */
.pricing-card h3 {
  margin: 0 0 8px;
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  font-weight: 500;
}
.pricing-card .for {
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.55;
  margin: 0 0 var(--s-4);
  min-height: 44px;
}

/* Price block */
.pricing-card .price {
  font-family: var(--font-display);
  font-size: 44px;
  line-height: 1;
  letter-spacing: -0.03em;
  font-weight: 500;
  color: var(--text);
  margin: 0 0 6px;
}
.pricing-card .price .per {
  font-size: 16px;
  font-weight: 400;
  color: var(--text-muted);
  letter-spacing: 0;
  margin-left: 3px;
}
.pricing-card .billed {
  font-size: 13px;
  color: var(--text-subtle);
  margin: 0 0 var(--s-4);
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}

/* Features list — separated with a hairline so the card has clear sections */
.pricing-card .features {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--border);
  flex: 1;
}
.pricing-card .features .feat {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-muted);
}
.pricing-card .features .feat .em {
  color: var(--text-subtle);
  flex-shrink: 0;
  margin-right: 0;
}
.pricing-card .pricing-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 16px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid var(--border);
  color: var(--text);
  transition: border-color var(--transition-base), background var(--transition-base);
}
.pricing-card .pricing-cta:hover { border-color: var(--border-strong); color: var(--text); }
.pricing-card.recommended .pricing-cta {
  background: var(--cta-bg);
  color: var(--cta-text);
  border-color: var(--cta-bg);
}
.pricing-card.recommended .pricing-cta:hover {
  background: var(--cta-hover);
  border-color: var(--cta-hover);
  color: var(--cta-text);
}

.pricing-note {
  margin-top: var(--s-5);
  color: var(--text-subtle);
  font-size: 13px;
  line-height: 1.55;
  max-width: 720px;
}

@media (max-width: 1023px) { .pricing-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) { .pricing-grid { grid-template-columns: 1fr; } }

/* === Migration steps === */
.migration-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.migration-step .step-num {
  font-family: var(--font-mono);
  font-size: var(--mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-subtle);
  margin-bottom: var(--s-2);
  display: block;
}
.migration-step h4 { margin-bottom: 12px; font-size: 18px; line-height: 1.3; }
.migration-step p { color: var(--text-muted); font-size: 15px; line-height: 1.6; }

@media (max-width: 767px) { .migration-steps { grid-template-columns: 1fr; gap: 24px; } }

/* === Standard inclusions list === */
.standard-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px 32px;
}
.standard-list .item {
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1.5;
}
.standard-list .item .em { color: var(--text-subtle); margin-right: 12px; }

@media (max-width: 1023px) { .standard-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) { .standard-list { grid-template-columns: 1fr; } }

/* === FAQ accordion (native <details> / <summary>) === */
.faq-list {
  max-width: 1200px;
  column-count: 2;
  column-gap: 64px;
}
@media (max-width: 1023px) {
  .faq-list { column-count: 1; }
}
.faq-item {
  border-bottom: 1px solid var(--border);
  padding: 24px 0;
  break-inside: avoid;
  display: inline-block;
  width: 100%;
}

/* Suppress native disclosure marker so we control the icon ourselves */
.faq-item summary { list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::marker { display: none; content: ""; }

.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  font-size: 18px;
  font-weight: 500;
  color: var(--text);
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
  padding: 0;
  min-height: 44px;
  line-height: 1.4;
  transition: color var(--transition-base);
}
.faq-question:hover { color: var(--text-muted); }
.faq-question:focus-visible { outline: 2px solid var(--text); outline-offset: 4px; border-radius: 4px; }

.faq-icon {
  display: inline-block;
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  color: var(--text-muted);
  flex-shrink: 0;
  transition: transform var(--transition-base);
}
.faq-item[open] .faq-icon { transform: rotate(45deg); }

.faq-answer {
  margin: 16px 0 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 720px;
}

@media (max-width: 767px) {
  .faq-item { padding: 16px 0; }
}

/* === Footer link badge === */
.footer-col a .badge {
  color: var(--text-subtle);
  font-size: 12px;
  margin-left: 4px;
}

/* === Sub-page hero === */
.subpage-hero {
  min-height: 440px;
  display: flex;
  align-items: flex-start;
  padding-top: var(--s-7);
  padding-bottom: var(--s-6);
}
.subpage-hero > .container { width: 100%; }
.subpage-hero .mono { display: block; margin-bottom: var(--s-4); }
.subpage-hero h1 { margin-bottom: var(--s-4); max-width: 24ch; }
.subpage-hero .hero-sub { color: var(--text-muted); font-size: var(--body-lg); max-width: 640px; }

/* === Case study grid === */
.case-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.case-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  min-height: 260px;
  background: transparent;
  transition: border-color var(--transition-base);
  text-decoration: none;
  color: inherit;
}
.case-card:hover { border-color: var(--border-strong); color: inherit; }
.case-card .mono { display: block; margin-bottom: var(--s-4); }
.case-card h3 { margin-bottom: 12px; font-size: 22px; line-height: 1.25; letter-spacing: -0.01em; }
.case-card .outcome { color: var(--text-muted); font-size: 15px; line-height: 1.55; margin-bottom: var(--s-3); flex: 1; }
.case-card .tag-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--s-3); }
.case-card .case-link { font-size: 14px; color: var(--text); font-weight: 500; display: inline-flex; align-items: center; gap: 6px; }
.case-card .case-link .arrow { transition: transform var(--transition-base); display: inline-block; }
.case-card:hover .case-link .arrow { transform: translateX(4px); }

.tag-pill {
  display: inline-block;
  border: 1px solid var(--border);
  border-radius: 99px;
  padding: 3px 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  white-space: nowrap;
}

@media (max-width: 1023px) {
  .case-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .case-grid { grid-template-columns: 1fr; gap: 12px; }
  .case-card { min-height: 0; padding: 24px; }
}

/* === Final CTA === */
.final-cta { text-align: center; }
.final-cta h2 { margin-bottom: var(--s-3); max-width: 14ch; margin-left: auto; margin-right: auto; }
.final-cta .sub { color: var(--text-muted); font-size: var(--body-lg); max-width: 520px; margin: 0 auto var(--s-5); }

/* Numbered home sections: container handles all vertical spacing inside the border frame */
#services, #products, #approach {
  padding-top: 0;
  padding-bottom: 0;
}

/* Closing CTAs (home + sub-pages) keep their own section padding */
#contact {
  padding-top: var(--s-7);
  padding-bottom: var(--s-7);
}
@media (max-width: 767px) {
  #contact {
    padding-top: var(--s-6);
    padding-bottom: var(--s-6);
  }
}

/* === Footer === */
footer {
  border-top: 1px solid var(--border);
  padding-top: 96px;
  padding-bottom: 48px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: var(--s-7);
}
.footer-col h5 {
  font-family: var(--font-mono);
  font-size: var(--mono);
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-subtle);
  margin: 0 0 var(--s-3);
  white-space: nowrap;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.footer-col a, .footer-col li { font-size: 14px; color: var(--text-muted); }
.footer-col a:hover { color: var(--text); }
.footer-brand p { color: var(--text-muted); font-size: 14px; line-height: 1.6; max-width: 320px; }
.footer-brand .logo {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-weight: 600; font-size: 16px; color: var(--text);
  margin-bottom: var(--s-3);
}
.footer-bottom {
  border-top: 1px solid var(--border);
  padding-top: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: var(--mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-subtle);
}
.footer-bottom .right { display: flex; align-items: center; gap: 24px; }
.footer-bottom a { color: var(--text-subtle); }
.footer-bottom a:hover { color: var(--text); }
.lang-toggle { display: inline-flex; gap: 4px; align-items: center; }
.lang-toggle .active { color: var(--text); }

/* === Cookie consent banner (lwcnCookieNotice library overrides) ===
   The library injects inline colors per init.js; this just normalizes
   typography, corner radius, and padding to match the site. */
#lwcn-cookie-notice-container,
#lwcn-cookie-settings-container,
#lwcn-revisit-consent-container {
  font-family: var(--font-sans) !important;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.005em;
}
#lwcn-cookie-notice-container {
  border-radius: 12px !important;
  padding: 24px 28px !important;
}
#lwcn-cookie-notice-container .lwcn-cookie-notice-message p {
  font-size: 14px !important;
  line-height: 1.55 !important;
  margin: 0 0 16px !important;
}
#lwcn-cookie-notice-container [id^="lwcn-cookie-notice-button-"],
#lwcn-cookie-settings-container [id^="lwcn-cookie-settings-button-"] {
  border-radius: 8px !important;
  font-family: var(--font-sans) !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  letter-spacing: 0 !important;
  padding: 10px 18px !important;
  transition: background 180ms ease, border-color 180ms ease;
}
/* Settings modal buttons (Close / Confirm choices) — smaller than main banner */
#lwcn-cookie-settings-container [id^="lwcn-cookie-settings-button-"] {
  font-size: 13px !important;
  padding: 7px 14px !important;
  line-height: 1.4 !important;
  height: auto !important;
  min-height: 0 !important;
}

/* Cookie settings toggle — gray track in both states, white handle slides */
#lwcn-cookie-settings-container .lwcn-checkbox + .lwcn-slider,
#lwcn-cookie-settings-container .lwcn-checkbox:checked + .lwcn-slider {
  background-color: #3A3B3D !important;
  border: 1px solid #4A4B4D !important;
  border-radius: 999px !important;
  width: 40px !important;
  height: 22px !important;
  transition: background-color 200ms ease !important;
  box-shadow: none !important;
}
#lwcn-cookie-settings-container .lwcn-checkbox:checked + .lwcn-slider {
  background-color: #4A4B4D !important;  /* subtly lighter when on */
}
#lwcn-cookie-settings-container .lwcn-checkbox + .lwcn-slider:before {
  background-color: #A0A0A0 !important;
  width: 16px !important;
  height: 16px !important;
  border-radius: 50% !important;
  top: 2px !important;
  left: 2px !important;
  transition: transform 200ms ease, background-color 200ms ease !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}
#lwcn-cookie-settings-container .lwcn-checkbox:checked + .lwcn-slider:before {
  background-color: #F7F8F8 !important;
  transform: translateX(18px) !important;
}
/* Disabled toggle (Strictly necessary — can't be turned off) */
#lwcn-cookie-settings-container .lwcn-checkbox:disabled + .lwcn-slider {
  background-color: #1F2123 !important;
  border-color: #1F2123 !important;
  opacity: 0.5;
  cursor: not-allowed;
}
#lwcn-cookie-settings-container .lwcn-checkbox:disabled + .lwcn-slider:before {
  background-color: #737373 !important;
}
#lwcn-cookie-settings-container {
  border-radius: 12px !important;
}
#lwcn-cookie-settings-container .lwcn-cookie-settings-title {
  font-family: var(--font-display) !important;
  letter-spacing: -0.01em;
  font-weight: 500 !important;
}
#lwcn-cookie-settings-container .lwcn-cookie-settings-section-name,
#lwcn-cookie-settings-container .lwcn-cookie-settings-category-name {
  font-family: var(--font-sans) !important;
  font-weight: 500 !important;
}
#lwcn-revisit-consent-container {
  border-radius: 50% !important;
}

/* === Legal/document page (cookie notice, privacy, terms) === */
.legal-content {
  max-width: none;
  width: 100%;
  margin: 0;
}
.legal-section + .legal-section {
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid var(--border);
}
.legal-section .mono {
  display: block;
  margin-bottom: 12px;
  font-family: var(--font-mono);
  font-size: var(--mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-subtle);
}
.legal-section h2 {
  margin: 0 0 20px;
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.legal-section h3 {
  margin: 32px 0 12px;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.legal-section p {
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1.65;
  margin: 0 0 16px;
}
.legal-section p:last-child { margin-bottom: 0; }
.legal-section a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--border-strong);
  text-underline-offset: 3px;
}
.legal-section a:hover { text-decoration-color: var(--text); }
.legal-section code {
  font-family: var(--font-mono);
  font-size: 13px;
  background: var(--surface-2);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--text);
}

/* Cookie table inside legal-section */
.cookie-table {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface);
  margin: 16px 0;
}
.ck-row {
  display: grid;
  grid-template-columns: 180px 1fr 110px;
  gap: 16px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-muted);
}
.ck-row:last-child { border-bottom: none; }
.ck-row.ck-head {
  background: var(--surface-2);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-subtle);
}
.ck-row .ck-name {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text);
}
.cookie-note {
  font-family: var(--font-mono);
  font-size: var(--mono);
  letter-spacing: 0.04em;
  color: var(--text-subtle);
  margin-top: 12px;
}
@media (max-width: 767px) {
  .ck-row { grid-template-columns: 1fr; gap: 6px; padding: 16px; }
  .ck-row.ck-head { display: none; }
  .ck-row .ck-name { font-size: 14px; margin-bottom: 2px; color: var(--text); }
  .legal-section + .legal-section { margin-top: 40px; padding-top: 32px; }
  .legal-section h2 { font-size: 22px; }
}

/* === Reveal animation === */
.reveal {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 400ms cubic-bezier(0.4, 0, 0.2, 1), transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity, transform;
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

/* Hero reveal on page load — same 8px / 400ms fade-from-bottom as .reveal,
   but fires via CSS animation since hero is always in viewport on initial render */
.hero .hero-inner,
.subpage-hero > .container {
  animation: heroReveal 400ms cubic-bezier(0.4, 0, 0.2, 1) both;
}
@keyframes heroReveal {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero .hero-inner,
  .subpage-hero > .container { animation: none; }
  html { scroll-behavior: auto; }
}

/* === Responsive === */
@media (max-width: 1023px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 767px) {
  :root {
    --h1: 44px;
    --h2: 32px;
    --h3: 22px;
    --body-lg: 16px;
  }
  section { padding-top: 80px; padding-bottom: 80px; }
  .container { padding-left: 20px; padding-right: 20px; }
  .nav-links, .nav-cta-wrap .btn-nav { display: none; }
  .nav-burger { display: inline-flex; }
  .nav-inner { grid-template-columns: 1fr auto; }
  .nav-cta-wrap { justify-self: end; }

  .hero { min-height: 0; padding-top: 64px; padding-bottom: 64px; }
  .hero-meta { grid-template-columns: 1fr 1fr; gap: 24px; }

  .services-grid { grid-template-columns: 1fr; }
  .service-card  { min-height: 0; padding: 24px; }
  .service-card .mono { margin-bottom: 32px; }

  .product-blocks { gap: 64px; }
  .product-block { grid-template-columns: 1fr; gap: 32px; }
  .product-block.reverse .product-text { order: 1; }
  .product-block.reverse .product-visual { order: 2; }

  .footer-grid { grid-template-columns: 1fr; gap: 32px; text-align: center; }
  .footer-brand { grid-column: 1 / -1; }
  footer { padding-top: 64px; }
  .footer-col h5 { margin-bottom: var(--s-2); }
  .footer-col ul { gap: 8px; align-items: center; }
  .footer-brand p { margin-left: auto; margin-right: auto; }
  .footer-brand .logo { justify-content: center; display: flex; }
  .footer-bottom { flex-direction: column; align-items: center; text-align: center; gap: 16px; padding-top: 24px; }
  .footer-bottom .right { justify-content: center; flex-wrap: wrap; gap: 16px; }
}