/* ── ruxox Shared Design System ───────────────────────────
   Clearscope-style · Spline Sans Mono · Manrope logo
   ──────────────────────────────────────────────────────── */

@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@800&family=Spline+Sans+Mono:wght@400;500;600&display=swap");

/* ── DESIGN TOKENS ─────────────────────────────────────── */
:root {
  --font-logo: "Manrope", sans-serif;
  --font-mono: "Spline Sans Mono", monospace;

  /* Stone palette */
  --stone-50:  oklch(98.5%  0.001  106.423);
  --stone-150: oklch(95.23% 0.0029  84.56);
  --stone-600: oklch(44%    0.005   60);
  --stone-950: oklch(14.7%  0.004   49.25);

  /* Semantic — light mode */
  --bg:         var(--stone-50);
  --panel:      var(--stone-150);
  --fg:         var(--stone-950);
  --fg-muted:   var(--stone-600);
  --border-col: var(--stone-950);
  --border:     1px solid var(--border-col);

  /* Fluid type — scaled down ~25 % from the original spec */
  --text-f-sm:   clamp(0.72rem,  0.69rem + 0.14vw, 0.8125rem);
  --text-f-base: clamp(0.8125rem,0.77rem  + 0.2vw,  0.9375rem);
  --text-f-lg:   clamp(0.9375rem,0.875rem + 0.28vw, 1.0625rem);
  --text-f-3xl:  clamp(1.125rem, 0.9rem   + 0.98vw, 1.75rem);
  --text-f-4xl:  clamp(1.25rem,  0.94rem  + 1.3vw,  2.125rem);
  --text-f-7xl:  clamp(1.625rem, 1.05rem  + 2.4vw,  2.875rem);

  /* Fluid spacing */
  --spacing-f-3:   clamp(0.875rem, 0.82rem + 0.22vw, 1.125rem);
  --spacing-f-3-4: clamp(0.875rem, 0.54rem + 1.4vw,  1.625rem);
  --spacing-f-5-6: clamp(1.75rem,  1.5rem  + 1.1vw,  2.5rem);
  --spacing-f-6-7: clamp(2rem,     1.6rem  + 1.7vw,  3.25rem);

  --leading-heading: 1.2;
  --tracking-wider: 0.05em;

  /* Syntax highlight — light mode */
  --syn-prompt: oklch(52% 0.14 145);
  --syn-cmd:    oklch(42% 0.20 250);
  --syn-flag:   oklch(48% 0.16 290);
  --syn-str:    oklch(55% 0.17 55);
  --syn-key:    oklch(45% 0.18 240);
  --syn-hi:     oklch(48% 0.18 145);
  --syn-method: oklch(55% 0.20 35);
}

/* ── DARK MODE ─────────────────────────────────────────── */
[data-theme="dark"] {
  --bg:         oklch(11%  0.004 49.25);
  --panel:      oklch(18%  0.004 49.25);
  --fg:         var(--stone-50);
  --fg-muted:   oklch(72%  0.004 84);
  --border-col: oklch(28%  0.004 49.25);

  /* Syntax highlight — dark mode (brighter) */
  --syn-prompt: oklch(70% 0.14 145);
  --syn-cmd:    oklch(73% 0.20 250);
  --syn-flag:   oklch(74% 0.15 290);
  --syn-str:    oklch(80% 0.16 55);
  --syn-key:    oklch(72% 0.18 240);
  --syn-hi:     oklch(72% 0.18 145);
  --syn-method: oklch(78% 0.19 35);
}

/* ── RESET ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-f-base);
  font-weight: 400;
  line-height: 1.6;
  background: var(--bg);
  color: var(--fg);
  overflow-x: hidden;
  transition: background 0.18s, color 0.18s;
}
a    { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
::selection { background: var(--fg); color: var(--bg); }

/* ── SCROLL PROGRESS ───────────────────────────────────── */
.scroll-progress {
  position: fixed; top: 0; left: 0;
  width: 0%; height: 2px;
  background: var(--fg);
  z-index: 300;
  transition: background 0.18s;
}

/* ── LOGO ──────────────────────────────────────────────── */
.logo-text {
  display: inline-block;
  font-family: var(--font-logo);
  font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.75rem);
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.05em;
  color: var(--fg);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color 0.18s;
}

/* ── BUTTONS ───────────────────────────────────────────── */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: var(--border);
  border-radius: 0;
  padding: 0.7em 1.25em;
  font-family: var(--font-mono);
  font-size: var(--text-f-base);
  line-height: 1;
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  color: var(--fg);
  background: transparent;
  transition: opacity 0.15s, background 0.18s, color 0.18s, border-color 0.18s;
}
/* Solid: stone-950 bg + white text in light mode */
.button.button-solid {
  background: var(--stone-950);
  color:      var(--stone-50);
  border-color: var(--stone-950);
}
.button.button-solid:hover  { opacity: 0.82; }
/* Dark mode: flip to white bg + dark text so it pops against dark backgrounds */
[data-theme="dark"] .button.button-solid {
  background:   var(--stone-50);
  color:        var(--stone-950);
  border-color: var(--stone-50);
}
/* Border: uses semantic vars so it adapts to dark mode */
.button.button-border {
  background: var(--bg);
  color: var(--fg);
  border-color: var(--border-col);
}
.button.button-border:hover { background: var(--panel); }
.button-sm { font-size: var(--text-f-sm); padding: 0.5em 0.85em; }

/* ── HEADER ────────────────────────────────────────────── */
.header {
  display: flex;
  align-items: center;
  padding-block: clamp(0.6rem, 0.55rem + 0.22vw, 0.875rem);
  /* Align logo/nav with the page container on all screen widths.
     On narrow screens: clamp(1rem,4vw,3rem) — same as .container.
     On screens wider than 1280px: grows so content stays within the 1280px column. */
  padding-inline: max(clamp(1rem, 4vw, 3rem), calc((100% - 1280px) / 2 + clamp(1rem, 4vw, 3rem)));
  border-bottom: var(--border);
  font-family: var(--font-mono);
  font-size: var(--text-f-base);
  line-height: 1;
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 100;
  gap: 0;
  transition: background 0.18s, border-color 0.18s;
}

/* Desktop nav — centered between logo and header-actions */
.desktop-nav {
  display: flex;
  align-items: center;
  gap: var(--spacing-f-3);
  flex: 1;
  justify-content: center;
  padding-inline: var(--spacing-f-3);
}

/* Header CTA + theme toggle group */
.header-actions {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  flex-shrink: 0;
}
.desktop-nav > a {
  font-family: var(--font-mono);
  font-size: var(--text-f-base);
  font-weight: 500;
  color: var(--fg);
  opacity: 1;
  transition: opacity 0.15s;
}
.desktop-nav > a:hover { opacity: 0.6; }
.desktop-nav > a.active { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* Products dropdown */
.nav-products { position: relative; }
.nav-products-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
  font-family: var(--font-mono);
  font-size: var(--text-f-base);
  font-weight: 500;
  color: var(--fg);
  opacity: 1;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: opacity 0.15s;
}
.nav-products-trigger:hover { opacity: 0.6; }
.nav-products.open .nav-products-trigger { opacity: 1; }
.nav-products-trigger svg {
  width: 0.65em; height: 0.65em;
  transition: transform 0.18s;
  flex-shrink: 0;
}
.nav-products.open .nav-products-trigger svg { transform: rotate(180deg); }

.products-dropdown {
  position: absolute;
  top: calc(100% + 0.875rem);
  left: 0;
  min-width: 220px;
  border: var(--border);
  background: var(--bg);
  z-index: 200;
  display: none;
  transition: background 0.18s;
}
.nav-products.open .products-dropdown { display: block; }
.products-dropdown a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  font-family: var(--font-mono);
  font-size: var(--text-f-sm);
  font-weight: 500;
  color: var(--fg);
  border-bottom: var(--border);
  transition: background 0.12s;
}
.products-dropdown a:last-child { border-bottom: 0; }
.products-dropdown a:hover { background: var(--panel); }

/* Theme toggle */
.theme-toggle {
  border: var(--border);
  border-radius: 0;
  background: transparent;
  color: var(--fg);
  width: 2rem; height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: opacity 0.15s, border-color 0.18s, color 0.18s;
}
.theme-toggle:hover { opacity: 0.65; }
.theme-toggle svg { width: 0.9rem; height: 0.9rem; }
.icon-moon { display: block; }
.icon-sun  { display: none; }
[data-theme="dark"] .icon-moon { display: none; }
[data-theme="dark"] .icon-sun  { display: block; }

/* Mobile nav */
.mobile-nav {
  display: none;
  align-items: center;
  gap: 0.5rem;
  margin-inline-start: auto;
}
.mobile-menu-toggle {
  border: var(--border);
  border-radius: 0;
  background: transparent;
  color: var(--fg);
  width: 2rem; height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 0.18s, color 0.18s;
}
.mobile-menu-toggle svg { width: 1rem; height: 1rem; }

.mobile-menu {
  border-bottom: var(--border);
  background: var(--bg);
  transition: background 0.18s, border-color 0.18s;
}
.mobile-menu[hidden] { display: none; }
.mobile-menu nav { display: grid; padding: 0.5rem clamp(1rem, 4vw, 3rem) 0.875rem; }
.mobile-menu nav a {
  font-family: var(--font-mono);
  font-size: var(--text-f-base);
  font-weight: 500;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--panel);
  color: var(--fg);
}
.mobile-menu nav a:last-child { border-bottom: 0; }
.mobile-menu-products { border-bottom: 1px solid var(--panel); }
.mobile-menu-products-label {
  font-family: var(--font-mono);
  font-size: var(--text-f-base);
  font-weight: 500;
  padding: 0.7rem 0;
  color: var(--fg);
  display: block;
}
.mobile-products-list { padding-left: 1rem; display: grid; padding-bottom: 0.5rem; }
.mobile-products-list a {
  font-family: var(--font-mono);
  font-size: var(--text-f-sm);
  font-weight: 500;
  padding: 0.45rem 0;
  border-bottom: 0;
  color: var(--fg-muted);
}
.mobile-products-list a:hover { color: var(--fg); }

@media not all and (min-width: 1120px) {
  .desktop-nav    { display: none; }
  .header-actions { display: none; }
  .mobile-nav     { display: flex; }
}

/* ── CONTAINER ─────────────────────────────────────────── */
.container {
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 3rem);
}

/* ── SECTION BASE ──────────────────────────────────────── */
section {
  border-bottom: var(--border);
  padding-block: var(--spacing-f-6-7);
  transition: border-color 0.18s;
}

/* ── LABEL ─────────────────────────────────────────────── */
.label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-f-sm);
  font-weight: 500;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: 0.75rem;
  transition: color 0.18s;
}

/* ── PAGE TYPOGRAPHY ───────────────────────────────────── */
.hero-title {
  font-family: var(--font-mono);
  font-size: var(--text-f-7xl);
  line-height: var(--leading-heading);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin: 0 0 var(--spacing-f-3);
  color: var(--fg);
  transition: color 0.18s;
}
.lead {
  max-width: 72ch;
  font-size: var(--text-f-lg);
  line-height: 1.55;
  font-weight: 400;
  margin: 0 0 var(--spacing-f-3-4);
  color: var(--fg-muted);
  transition: color 0.18s;
}
.section-title {
  font-family: var(--font-mono);
  font-size: var(--text-f-4xl);
  line-height: 1.25;
  font-weight: 600;
  margin: 0;
  color: var(--fg);
  transition: color 0.18s;
}
.feature-title {
  font-family: var(--font-mono);
  font-size: var(--text-f-3xl);
  line-height: var(--leading-heading);
  font-weight: 600;
  margin: 0 0 0.75rem;
  color: var(--fg);
  transition: color 0.18s;
}
.card-title {
  font-family: var(--font-mono);
  font-size: var(--text-f-base);
  font-weight: 600;
  margin: 0 0 0.4rem;
  color: var(--fg);
  transition: color 0.18s;
}

/* ── SECTION HEAD ──────────────────────────────────────── */
.section-head { margin-bottom: var(--spacing-f-3-4); }
.section-head-main {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
}
.section-lead {
  max-width: 480px;
  font-size: var(--text-f-lg);
  line-height: 1.5;
  font-weight: 400;
  color: var(--fg-muted);
  margin: 0;
  flex-shrink: 0;
  transition: color 0.18s;
}

/* ── TERMINAL ──────────────────────────────────────────── */
.terminal { background: var(--bg); overflow: hidden; transition: background 0.18s; }
.terminal-bar {
  height: 2.4rem;
  border-bottom: var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.875rem;
  font-family: var(--font-mono);
  font-size: var(--text-f-sm);
  font-weight: 500;
  background: var(--panel);
  color: var(--fg);
  transition: background 0.18s, border-color 0.18s, color 0.18s;
}
.dots { display: flex; gap: 0.35rem; }
.dots i { width: 0.45rem; height: 0.45rem; border-radius: 50%; display: block; }
.dots i:nth-child(1) { background: #FF5F57; } /* close */
.dots i:nth-child(2) { background: #FFBD2E; } /* minimise */
.dots i:nth-child(3) { background: #28CA41; } /* maximise */
.terminal-body {
  padding: 1rem;
  font-family: var(--font-mono);
  font-size: var(--text-f-sm);
  line-height: 1.85;
  color: var(--fg);
  transition: color 0.18s;
}
.terminal-body .muted { color: var(--fg-muted); }
/* backward-compat aliases */
.terminal-body .cmd { color: var(--syn-cmd); font-weight: 600; }
.terminal-body .hi  { color: var(--syn-hi);  font-weight: 600; }

/* ── SYNTAX HIGHLIGHT — shared across terminals and code panels ── */
.syn-prompt { color: var(--syn-prompt); }
.syn-cmd    { color: var(--syn-cmd);    font-weight: 600; }
.syn-flag   { color: var(--syn-flag); }
.syn-str    { color: var(--syn-str); }
.syn-key    { color: var(--syn-key); }
.syn-hi     { color: var(--syn-hi);    font-weight: 600; }
.syn-method { color: var(--syn-method); font-weight: 700; letter-spacing: 0.02em; }
.syn-path   { color: var(--fg-muted); }

.type-cursor { animation: blink 1s steps(2, start) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ── CHIPS ─────────────────────────────────────────────── */
.chip {
  border: var(--border);
  padding: 0.2rem 0.55rem;
  font-family: var(--font-mono);
  font-size: var(--text-f-sm);
  font-weight: 500;
  color: var(--fg-muted);
  transition: border-color 0.18s, color 0.18s;
}

/* ── FOOTER ────────────────────────────────────────────── */
/* Full-width dark background lives on <footer> itself */
footer {
  font-family: var(--font-mono);
  font-size: var(--text-f-sm);
  background: var(--stone-950);
  color: var(--stone-50);
}
/* Dark mode: slightly lighter so footer distinguishes from page bg */
[data-theme="dark"] footer {
  background: oklch(18% 0.004 49.25);
}

/* Logo inside footer — always white, larger than header */
footer .logo-text {
  color: var(--stone-50);
  font-size: clamp(1.625rem, 1.35rem + 1.1vw, 2.5rem);
}

/* Tagline hidden site-wide (clean footer) */
.footer-tagline { display: none; }

/* Inner content row — respects max-width and padding, no bg needed */
.footer-body {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--spacing-f-5-6);
  padding-block: var(--spacing-f-5-6);
  padding-inline: clamp(1rem, 4vw, 3rem);
  max-width: 1280px;
  margin-inline: auto;
}

.footer-tagline {
  font-size: var(--text-f-sm);
  color: oklch(65% 0.004 84);
  margin: 0.625rem 0 0;
  max-width: 28ch;
  line-height: 1.6;
}

.footer-nav {
  display: flex;
  gap: var(--spacing-f-5-6);
  flex-shrink: 0;
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.footer-col-heading {
  font-size: var(--text-f-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: oklch(65% 0.004 84);
  margin-bottom: 0.25rem;
}

.footer-col a {
  font-size: var(--text-f-sm);
  font-weight: 400;
  color: var(--stone-50);
  transition: opacity 0.15s;
}
.footer-col a:hover { opacity: 0.6; }

/* Copyright strip — full-width darkest row */
.footer-bottom {
  background: oklch(10% 0.003 49.25);
  border-top: 1px solid oklch(22% 0.004 49.25);
  font-size: var(--text-f-sm);
  font-weight: 500;
  color: oklch(55% 0.003 84);
}
[data-theme="dark"] .footer-bottom {
  background: oklch(8% 0.003 49.25);
  border-top-color: oklch(20% 0.004 49.25);
}
/* Inner layout row — max-width constrained */
.footer-bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.875rem;
  padding-inline: clamp(1rem, 4vw, 3rem);
  max-width: 1280px;
  margin-inline: auto;
}
.footer-bottom a {
  color: oklch(55% 0.003 84);
  transition: opacity 0.15s;
}
.footer-bottom a:hover { opacity: 0.7; }

@media (max-width: 640px) {
  .footer-body { flex-direction: column; gap: var(--spacing-f-3-4); }
  .footer-nav  { gap: var(--spacing-f-3-4); }
}

/* ── TYPED ANIMATION ───────────────────────────────────── */
.typed-cycle  { display: inline-block; }
.typed-caret  { animation: typed-blink .75s steps(1) infinite; }
@keyframes typed-blink { 50% { opacity: 0; } }

/* ── SECTION HEAD RESPONSIVE ───────────────────────────── */
@media (max-width: 1120px) {
  .section-head-main { flex-direction: column; align-items: flex-start; }
  .section-lead { max-width: 100%; }
}

/* ── REVEAL ────────────────────────────────────────────── */
[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }
[data-reveal="left"]  { transform: translateX(-14px); }
[data-reveal="right"] { transform: translateX(14px); }
[data-reveal="left"].is-visible,
[data-reveal="right"].is-visible { transform: translateX(0); }

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

/* ── SERVICES DROPDOWN (mirrors nav-products) ──────────── */
.nav-services { position: relative; }
.nav-services-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
  font-family: var(--font-mono);
  font-size: var(--text-f-base);
  font-weight: 500;
  color: var(--fg);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: opacity 0.15s;
}
.nav-services-trigger:hover { opacity: 0.6; }
.nav-services.open .nav-services-trigger { opacity: 1; }
.nav-services-trigger svg { width: 0.65em; height: 0.65em; transition: transform 0.18s; flex-shrink: 0; }
.nav-services.open .nav-services-trigger svg { transform: rotate(180deg); }
.services-dropdown {
  position: absolute;
  top: calc(100% + 0.875rem);
  left: 0;
  min-width: 260px;
  border: var(--border);
  background: var(--bg);
  z-index: 200;
  display: none;
  transition: background 0.18s;
}
.nav-services.open .services-dropdown { display: block; }
.services-dropdown a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  font-family: var(--font-mono);
  font-size: var(--text-f-sm);
  font-weight: 500;
  color: var(--fg);
  border-bottom: var(--border);
  transition: background 0.12s;
}
.services-dropdown a:last-child { border-bottom: 0; }
.services-dropdown a:hover { background: var(--panel); }

/* ── BLOG / CONTENT PAGES ──────────────────────────────── */
.prose {
  max-width: 72ch;
  font-size: var(--text-f-base);
  line-height: 1.75;
  color: var(--fg-muted);
}
.prose h2 {
  font-family: var(--font-mono);
  font-size: var(--text-f-3xl);
  font-weight: 600;
  color: var(--fg);
  margin: 2.5rem 0 0.875rem;
  line-height: 1.25;
}
.prose h3 {
  font-family: var(--font-mono);
  font-size: var(--text-f-lg);
  font-weight: 600;
  color: var(--fg);
  margin: 1.75rem 0 0.5rem;
  line-height: 1.3;
}
.prose p { margin: 0 0 1.25rem; }
.prose ul, .prose ol { margin: 0 0 1.25rem; padding-left: 1.5rem; }
.prose li { margin-bottom: 0.5rem; }
.prose strong { color: var(--fg); font-weight: 600; }
.prose a { text-decoration: underline; text-underline-offset: 3px; color: var(--fg); }
.prose a:hover { opacity: 0.65; }
.prose blockquote {
  border-left: 3px solid var(--fg-muted);
  margin: 1.5rem 0;
  padding: 0.75rem 1.25rem;
  color: var(--fg-muted);
}

/* ── ESTIMATE FORM / SERVICE PAGES ─────────────────────── */
.estimate-form { display: grid; gap: 0.75rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.form-group { display: grid; gap: 0.375rem; }
.form-group label {
  font-family: var(--font-mono);
  font-size: var(--text-f-sm);
  font-weight: 500;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
}
select {
  width: 100%;
  background: transparent;
  border: var(--border);
  border-radius: 0;
  color: var(--fg);
  padding: 0.75rem 0.875rem;
  font-family: var(--font-mono);
  font-size: var(--text-f-base);
  outline: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.875rem center;
  background-size: 1rem;
  transition: background-color 0.15s, border-color 0.18s, color 0.18s;
}
select:focus { background-color: var(--panel); }
[data-theme="dark"] select { color-scheme: dark; }
@media (max-width: 640px) {
  .form-row { grid-template-columns: 1fr; }
}

/* ── iOS VIEWPORT AUTO-ZOOM FIX ────────────────────────────────── */
/* iOS Safari zooms the viewport when a focused input has           */
/* font-size < 16px, then fails to restore zoom on blur.           */
/* The ONLY reliable fix (iOS 10+) is ensuring font-size >= 16px.  */
/* Flat 16px beats any CSS variable that resolves below threshold. */
/*                                                                  */
/* Two selectors for belt-and-suspenders coverage:                  */
/*   1. max-width catches most phones and small tablets             */
/*   2. (hover:none) catches touch-primary devices at any size      */

@media screen and (max-width: 1024px) {
  input, input[type], textarea, select {
    font-size: 16px !important;
  }
}
@media (hover: none) and (pointer: coarse) {
  input, input[type], textarea, select {
    font-size: 16px !important;
  }
}

/* ── TOUCH — faster taps, no 300ms delay, no double-tap zoom ────── */
button, a, .button, input, textarea, select {
  touch-action: manipulation;
}
.mobile-menu-toggle,
.theme-toggle,
.nav-services-trigger,
.nav-products-trigger {
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}