/* =====================================================================
   LEMMA POWER — STYLESHEET
   ---------------------------------------------------------------------
   Sections in this file (search for the ==== headings):
     1. Colors and design tokens   <- change brand colors here
     2. Base page styles
     3. Typography
     4. Layout helpers
     5. Buttons
     6. Header and navigation
     7. Hero (top of each page) and waveform canvas
     8. Panels and cards
     9. Home page sections
    10. Services page
    11. About page
    12. Contact page and form
    13. Footer
    14. Scroll-reveal and motion
    15. Reduced motion (calm, static version)
    16. Small spacing helpers
   ===================================================================== */


/* =====================================================================
   FONTS
   Stored on this site in assets/fonts (no outside font service).
   Licenses: the OFL-*.txt files in the same folder.
   ===================================================================== */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../assets/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../assets/fonts/inter-greek.woff2") format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url("../assets/fonts/ibm-plex-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../assets/fonts/sora-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* =====================================================================
   1. COLORS AND DESIGN TOKENS
   All text/background pairs below meet WCAG AA contrast. If you change a
   color, check it at webaim.org/resources/contrastchecker
   ===================================================================== */
:root {
  /* Light backgrounds */
  --bg-0: #f6f9fc;          /* page background */
  --bg-1: #eaf1f8;          /* footer */
  --bg-2: #ffffff;          /* panels, cards, menus and inputs */
  --bg-3: #e3f1fb;          /* selected / raised */
  --tile: #f1f6fb;          /* small tiles inside cards */
  --line: #d5e0ec;          /* borders */
  --line-strong: #b3c3d5;   /* stronger borders */
  --line-input: #75899f;    /* borders of inputs and controls */

  /* Navy text */
  --text: #142540;          /* main text and headings */
  --text-muted: #44566f;    /* secondary text */
  --text-dim: #56677e;      /* small labels */

  /* Sky blue (primary accent) */
  --blue-100: #e0f2fe;      /* highlight / shine */
  --blue-text: #03649c;     /* blue text on light backgrounds */
  --blue-400: #036aa5;      /* links, icons */
  --blue-500: #0ea5e9;      /* borders, lines */
  --blue-600: #0477b8;      /* buttons */
  --blue-700: #03649c;      /* button hover */

  /* Crimson (secondary accent: used sparingly) */
  --red-text: #a81f36;      /* red text on light backgrounds */
  --red-400: #e05a6c;
  --red-500: #b3263b;       /* main call-to-action buttons */
  --red-600: #981f32;       /* button hover */

  /* Placeholder / to-do highlight (temporary content only) */
  --todo: #7a5200;

  /* Type */
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-display: "IBM Plex Sans", "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-logo: "Sora", "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  /* Shape and motion */
  --radius: 10px;
  --radius-sm: 8px;
  --ease: cubic-bezier(0.25, 0.6, 0.25, 1);
  --header-h: 76px;
  --gutter: 20px;
  --max: 1180px;
  --shadow: 0 1px 2px rgba(20, 37, 64, 0.08), 0 10px 28px -16px rgba(20, 37, 64, 0.22);

  color-scheme: light;
}

@media (min-width: 720px) {
  :root { --gutter: 32px; }
}


/* =====================================================================
   2. BASE PAGE STYLES
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--bg-0);
  background-image:
    radial-gradient(1100px 520px at 85% -5%, rgba(14, 165, 233, 0.08), transparent 65%),
    linear-gradient(180deg, #eaf3fb 0%, var(--bg-0) 700px);
  background-repeat: no-repeat;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, canvas { display: block; max-width: 100%; }

a { color: var(--blue-400); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--blue-text); }

/* Visible keyboard focus everywhere */
:focus-visible {
  outline: 2px solid var(--blue-text);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: rgba(14, 165, 233, 0.3); color: var(--text); }

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

.skip-link {
  position: absolute;
  left: 16px; top: -100px;
  z-index: 1000;
  padding: 12px 18px;
  background: var(--blue-600);
  color: #fff;
  border-radius: var(--radius-sm);
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { top: 12px; color: #fff; }

main { display: block; padding-top: var(--header-h); }


/* =====================================================================
   3. TYPOGRAPHY
   ===================================================================== */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0 0 0.5em;
  color: var(--text);
  font-weight: 600;
  text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 1.35rem + 3.4vw, 3.6rem); line-height: 1.1; }
h2 { font-size: clamp(1.7rem, 1.25rem + 1.9vw, 2.5rem); }
h3 { font-size: clamp(1.18rem, 1.06rem + 0.5vw, 1.38rem); letter-spacing: -0.01em; }
h4 { font-size: 1rem; letter-spacing: 0; }

p { margin: 0 0 1em; text-wrap: pretty; }

.lede { font-size: clamp(1.08rem, 1rem + 0.4vw, 1.25rem); color: var(--text-muted); line-height: 1.6; }
.muted { color: var(--text-muted); }
.small { font-size: 0.9rem; }

/* Heading color helpers (solid colors, no gradients) */
.metal-text { color: var(--text); }
.blue-text {
  color: var(--blue-text);
  background: linear-gradient(100deg, #03649c 0%, #0477b8 38%, #0284c7 50%, #0477b8 62%, #03649c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
@media (forced-colors: active) { .blue-text { background: none; -webkit-text-fill-color: currentColor; } }
.red-text { color: var(--red-text); }

/* Small label above headings */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 1rem;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue-text);
}
.eyebrow::before {
  content: "";
  width: 18px; height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--blue-400), var(--blue-500));
}
.eyebrow.red::before { background: currentColor; }
.eyebrow.red { color: var(--red-text); }

/* Bulleted lists with check marks */
.ticks { list-style: none; padding: 0; margin: 0 0 1rem; }
.ticks li { position: relative; padding-left: 1.7em; margin-bottom: 0.55em; }
.ticks li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.3em;
  width: 1.05em; height: 1.05em;
  background-color: var(--blue-400);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ticks.red li::before { background-color: var(--red-400); }

/* Temporary placeholders: clearly marked so you can find and replace them */
.todo {
  display: inline;
  padding: 0.05em 0.35em;
  border: 1px dashed var(--todo);
  border-radius: 4px;
  color: var(--todo);
  font-size: 0.92em;
  background: rgba(242, 193, 78, 0.18);
}


/* =====================================================================
   4. LAYOUT HELPERS
   ===================================================================== */
.container {
  width: 100%;
  max-width: calc(var(--max) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { position: relative; padding-block: clamp(64px, 9vw, 112px); }
.section.tight { padding-block: clamp(48px, 6vw, 80px); }
.section-head { max-width: 760px; margin-bottom: clamp(32px, 4vw, 52px); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center .eyebrow { justify-content: center; }

.grid { display: grid; gap: 20px; }
@media (min-width: 720px) {
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Three cards on a tablet: the third fills the second row. */
@media (min-width: 720px) and (max-width: 959px) {
  .grid-2.grid-3 > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 960px) {
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid { gap: 24px; }
}

/* Thin divider between sections */
.divider {
  height: 1px;
  border: 0;
  margin: 0;
  background: var(--line);
  opacity: 0.7;
}


/* =====================================================================
   5. BUTTONS
   .btn-red  = main call to action ("Request a proposal")
   .btn-blue = package buttons
   .btn-ghost = secondary links
   ===================================================================== */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0.8rem 1.3rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  color: #fff;
  cursor: pointer;
  transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.btn:hover { color: #fff; transform: translateY(-1px); }
.btn:active { transform: none; }
.btn svg { width: 18px; height: 18px; flex: none; transition: transform 0.25s var(--ease); }
.btn:hover svg { transform: translateX(3px); }

.btn-red {
  background-color: var(--red-500);
  border-color: #c23a4f;
  box-shadow: 0 1px 2px rgba(20, 37, 64, 0.15);
}
.btn-red:hover { background-color: var(--red-600); box-shadow: 0 6px 16px -8px rgba(20, 37, 64, 0.22); }

.btn-blue {
  background-color: var(--blue-600);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 42%), linear-gradient(180deg, var(--blue-600) 0%, #035d8f 100%);
  border-color: #1a9ad8;
  box-shadow: inset 0 1px 0 rgba(224, 242, 254, 0.35), 0 1px 2px rgba(20, 37, 64, 0.15);
}
.btn-blue:hover { background-color: var(--blue-700); background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 42%), linear-gradient(180deg, var(--blue-700) 0%, #024f7a 100%); box-shadow: inset 0 1px 0 rgba(224, 242, 254, 0.3), 0 6px 16px -8px rgba(20, 37, 64, 0.22); }

.btn-ghost {
  background-color: transparent;
  border-color: var(--line-input);
  color: var(--text);
}
.btn-ghost:hover { background-color: rgba(14, 165, 233, 0.08); border-color: var(--blue-500); color: var(--text); }

.btn-sm { min-height: 44px; padding: 0.6rem 1rem; font-size: 0.95rem; }
.btn-block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  font-weight: 600;
  color: var(--blue-400);
  text-decoration: none;
}
.text-link:hover { color: var(--blue-text); text-decoration: underline; }


/* =====================================================================
   6. HEADER AND NAVIGATION
   The header stays at the top and condenses as you scroll.
   ===================================================================== */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  view-transition-name: site-header;
  transition: background-color 0.35s var(--ease), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
  background: rgba(255, 255, 255, 0.75);
  border-bottom: 1px solid transparent;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.site-header.is-condensed {
  background: rgba(255, 255, 255, 0.97);
  border-bottom-color: var(--line);
  box-shadow: 0 8px 24px -16px rgba(20, 37, 64, 0.2);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: var(--header-h);
  transition: height 0.35s var(--ease);
}
.site-header.is-condensed .header-inner { height: 62px; }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  text-decoration: none;
  white-space: nowrap;
  transform-origin: left center;
  transition: transform 0.35s var(--ease);
}
.brand-mark { width: 40px; height: 40px; flex: none; }
.site-header.is-condensed .brand { transform: scale(0.85); }

/* Wordmark: real text. Light backgrounds use these solid colors; the footer
   uses the chrome gradients further down. */
.wordmark {
  display: inline-flex;
  gap: 0.38em;
  font-family: var(--font-logo);
  font-size: 1.16rem;
  line-height: 1;
  letter-spacing: 0.03em;
}
.wm-lemma { font-weight: 700; color: #1A202B; }
.wm-power { font-weight: 400; color: #1D46B8; }

/* Only on very narrow screens, where the header would be crowded. */
@media (max-width: 299px) { .site-header .wordmark { display: none; } }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  padding: 0;
  border: 1px solid var(--line-input);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  cursor: pointer;
}
.nav-toggle-bars { position: relative; width: 20px; height: 14px; }
.nav-toggle-bars span {
  position: absolute; left: 0;
  width: 100%; height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.3s var(--ease), opacity 0.2s var(--ease), top 0.3s var(--ease);
}
.nav-toggle-bars span:nth-child(1) { top: 0; }
.nav-toggle-bars span:nth-child(2) { top: 6px; }
.nav-toggle-bars span:nth-child(3) { top: 12px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1) { top: 6px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3) { top: 6px; transform: rotate(-45deg); }

.site-nav {
  position: absolute;
  top: 100%; left: 0; right: 0;
  padding: 12px var(--gutter) 24px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 20px 40px -20px rgba(20, 37, 64, 0.2);
}
.js .site-nav { display: none; }
.js .site-nav.is-open { display: block; animation: navIn 0.3s var(--ease); }
@keyframes navIn { from { opacity: 0; transform: translateY(-6px); } }

.nav-list { list-style: none; margin: 0 0 16px; padding: 0; }
.nav-list a {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0 4px;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  text-decoration: none;
  font-weight: 500;
  font-size: 1.05rem;
}
.nav-list a[aria-current="page"] { color: var(--blue-text); }

@media (min-width: 880px) {
  .nav-toggle { display: none; }
  .site-nav, .js .site-nav {
    position: static;
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
  }
  .nav-list { display: flex; gap: 4px; margin: 0; }
  .nav-list a {
    position: relative;
    min-height: 44px;
    padding: 0 14px;
    border: 0;
    font-size: 0.97rem;
    color: var(--text-muted);
    transition: color 0.25s var(--ease);
  }
  .nav-list a:hover { color: var(--text); }
  .nav-list a::after {
    content: "";
    position: absolute;
    left: 14px; right: 14px; bottom: 7px;
    height: 2px;
    background: var(--blue-500);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s var(--ease);
  }
  .nav-list a:hover::after, .nav-list a[aria-current="page"]::after { transform: scaleX(1); }
  .nav-list a[aria-current="page"] { color: var(--text); }
}


/* =====================================================================
   7. HERO (top of each page) AND WAVEFORM CANVAS
   ===================================================================== */
.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  margin-top: calc(var(--header-h) * -1);
  padding-top: calc(var(--header-h) + clamp(48px, 9vw, 110px));
  padding-bottom: clamp(64px, 9vw, 120px);
  min-height: min(100svh, 840px);
  display: flex;
  align-items: center;
}
.hero.page-hero {
  min-height: 0;
  padding-top: calc(var(--header-h) + clamp(48px, 7vw, 96px));
  padding-bottom: clamp(48px, 6vw, 80px);
}

/* The canvas sits behind the text. On wide screens it fades out toward
   the left so the headline always has a clean background. */
.wave-canvas {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.4s var(--ease);
}
.wave-canvas.is-ready { opacity: 0.7; }
@media (min-width: 960px) {
  .wave-canvas {
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 42%, rgba(0,0,0,0.5) 57%, #000 76%);
    mask-image: linear-gradient(90deg, transparent 0%, transparent 42%, rgba(0,0,0,0.5) 57%, #000 76%);
  }
  .wave-canvas.is-ready { opacity: 1; }
}
.page-hero .wave-canvas.is-ready { opacity: 0.8; }

/* Services page: the phasor diagram sits clear of the text, so no fade. */
.wave-canvas[data-mode="polar"] { -webkit-mask-image: none; mask-image: none; }
.page-hero .wave-canvas[data-mode="polar"].is-ready { opacity: 1; }

/* Phones and tablets: leave room under the hero text for the wave band. */
@media (max-width: 959px) {
  .hero { padding-bottom: 170px; }
  .hero.page-hero { padding-bottom: 104px; }
  .hero.polar-hero { padding-bottom: 275px; }
  .hero.polar-hero::after { height: 28px; }
  .hero::after { height: 28px; }
  .wave-canvas.is-ready, .page-hero .wave-canvas.is-ready { opacity: 0.9; }
}

/* Fade the bottom of the hero into the page */
.hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0; right: 0; bottom: 0;
  height: 120px;
  background: linear-gradient(180deg, transparent, var(--bg-0));
  pointer-events: none;
}

.hero-content { max-width: 760px; }
.hero h1 { margin-bottom: 0.45em; }
.hero h1 .line { display: block; }
.hero .lede { max-width: 640px; margin-bottom: 1.1rem; }
.hero-secondary {
  max-width: 600px;
  margin-bottom: 2rem;
  padding-left: 14px;
  border-left: 2px solid var(--red-400);
  color: var(--text);
  font-weight: 500;
}
.hero .btn-row { margin-bottom: 2.25rem; }

.hero-chips { display: flex; flex-wrap: wrap; gap: 8px 10px; list-style: none; margin: 0; padding: 0; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 13px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--tile);
  color: var(--text-muted);
  font-size: 0.88rem;
  font-weight: 500;
}
a.chip { text-decoration: none; min-height: 44px; transition: border-color 0.25s var(--ease), color 0.25s var(--ease); }
a.chip:hover { border-color: var(--blue-500); color: var(--text); }

/* Hero text enters gently on page load (transform only, so it paints instantly). */
.hero-content > * { animation: heroIn 0.8s var(--ease) both; }
.hero-content > *:nth-child(2) { animation-delay: 0.05s; }
.hero-content > *:nth-child(3) { animation-delay: 0.1s; }
.hero-content > *:nth-child(4) { animation-delay: 0.15s; }
.hero-content > *:nth-child(5) { animation-delay: 0.2s; }
.hero-content > *:nth-child(6) { animation-delay: 0.25s; }
@keyframes heroIn { from { transform: translateY(10px); } }


/* =====================================================================
   8. PANELS AND CARDS
   .metal      = white panel
   .edge-blue / .edge-red = thin accent line along the top of a panel
   .hover-lift = card lifts slightly on hover (desktop)
   ===================================================================== */
.metal {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-2);
  box-shadow: var(--shadow);
}

.metal.edge-blue::before,
.metal.edge-red::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: linear-gradient(90deg, #0284c7 0%, var(--blue-500) 25%, #7dd3fc 50%, var(--blue-500) 75%, #0284c7 100%);
}
.metal.edge-red::before { background: var(--red-400); }

.hover-lift { transition: border-color 0.3s var(--ease), transform 0.3s var(--ease), box-shadow 0.3s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .hover-lift:hover { border-color: var(--line-strong); transform: translateY(-2px); box-shadow: 0 2px 4px rgba(20, 37, 64, 0.1), 0 18px 36px -18px rgba(20, 37, 64, 0.28); }
}

.card { padding: clamp(22px, 3vw, 32px); }
.card h3 { margin-bottom: 0.45em; }
.card p:last-child { margin-bottom: 0; }

/* Small square icon tile on cards */
.icon-tile {
  display: inline-grid;
  place-items: center;
  width: 44px; height: 44px;
  margin-bottom: 18px;
  border-radius: 8px;
  border: 1px solid rgba(14, 165, 233, 0.4);
  background: linear-gradient(160deg, rgba(56, 189, 248, 0.2) 0%, rgba(14, 165, 233, 0.05) 100%);
  color: var(--blue-text);
}
.icon-tile svg { width: 22px; height: 22px; }
.icon-tile.red { border-color: rgba(224, 90, 108, 0.45); background: linear-gradient(160deg, rgba(224, 90, 108, 0.22) 0%, rgba(224, 90, 108, 0.05) 100%); color: var(--red-text); }


/* =====================================================================
   9. HOME PAGE SECTIONS
   ===================================================================== */

/* ---- "Built from inside the industry" ---- */
.inside-grid { display: grid; gap: 40px; }
@media (min-width: 960px) {
  .inside-grid { grid-template-columns: 1fr 1.25fr; gap: 64px; align-items: start; }
  .inside-grid .section-head { position: sticky; top: calc(var(--header-h) + 32px); margin-bottom: 0; }
}
.doc-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 1.25rem 0 0; padding: 0; list-style: none; }
.doc-list li {
  padding: 5px 11px;
  border-radius: 6px;
  border: 1px solid var(--line-strong);
  background: var(--tile);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-muted);
}

/* ---- "Where are you with AI?" buyer cards ---- */
.stage-picker { border: 0; margin: 0; padding: 0; min-width: 0; }
.stage-picker legend { padding: 0; }
.stage-cards { display: grid; gap: 16px; }
@media (min-width: 880px) { .stage-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }

.stage-card {
  display: block;
  height: 100%;
  padding: 24px 24px 26px;
  cursor: pointer;
}
.stage-card input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.stage-card .stage-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.stage-num { font-family: var(--font-display); font-size: 0.85rem; font-weight: 600; letter-spacing: 0.1em; color: var(--text-dim); }
.stage-radio {
  position: relative;
  width: 22px; height: 22px;
  flex: none;
  border-radius: 50%;
  border: 2px solid var(--line-input);
  transition: border-color 0.3s var(--ease);
}
.stage-radio::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--blue-100), var(--blue-400) 55%, var(--blue-500));
  transform: scale(0);
  transition: transform 0.3s var(--ease);
}
.stage-title { display: block; margin-bottom: 0.35em; font-family: var(--font-display); font-size: clamp(1.18rem, 1.06rem + 0.5vw, 1.38rem); font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; }
.stage-desc { display: block; color: var(--text-muted); }
.stage-card:has(input:checked) {
  border-color: var(--blue-500);
  box-shadow: var(--shadow);
  background: var(--bg-3);
}
.stage-card:has(input:checked) .stage-radio { border-color: var(--blue-500); }
.stage-card:has(input:checked) .stage-radio::after { transform: scale(1); }
.stage-card:has(input:checked) .stage-num { color: var(--blue-text); }
.stage-card:has(input:focus-visible) { outline: 2px solid var(--blue-text); outline-offset: 3px; }

/* Recommended path panel */
.stage-results { margin-top: 24px; }
.stage-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 84px;
  padding: 20px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  color: var(--text-muted);
  text-align: center;
}
.stage-result { padding: clamp(24px, 3.5vw, 40px); }
.stage-result[hidden], .stage-hint[hidden] { display: none; }
.stage-result + .stage-result { margin-top: 16px; }
.js .stage-result + .stage-result { margin-top: 0; }
.stage-result .result-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin-bottom: 24px; }
.stage-result h3 { margin: 0; font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem); }

.path { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 14px; }
@media (min-width: 760px) {
  .path { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 56px; }
}
.path-step {
  position: relative;
  padding: 20px 22px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--tile);
}
.path-step .step-label { display: block; margin-bottom: 4px; font-size: 0.76rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue-text); }
.path-step h4 { margin: 0 0 4px; font-family: var(--font-display); font-size: 1.12rem; }
.path-step .path-price { font-family: var(--font-display); font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.path-step p { margin: 6px 0 0; font-size: 0.95rem; color: var(--text-muted); }
/* Connector between path steps */
.path-step + .path-step::before {
  content: "";
  position: absolute;
  background: var(--blue-500);
  left: 30px; top: -15px; width: 2px; height: 14px;
}
@media (min-width: 760px) {
  .path-step + .path-step::before {
    left: -57px; top: 50%;
    width: 56px; height: 2px;
  }
  .path-step + .path-step::after {
    content: "";
    position: absolute;
    left: -10px; top: calc(50% - 5px);
    width: 10px; height: 10px;
    border-top: 2px solid var(--blue-500);
    border-right: 2px solid var(--blue-500);
    transform: rotate(45deg) translate(-2px, 2px);
  }
}
.path-step.is-start { border-color: var(--blue-500); background: rgba(14, 165, 233, 0.08); }

/* ---- Package overview cards ---- */
.pkg-group + .pkg-group { margin-top: clamp(40px, 5vw, 64px); }
.pkg-group-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin-bottom: 20px; }
.pkg-group-head h3 { margin: 0; }
.pkg-group-head p { margin: 0; color: var(--text-muted); }

.pkg-card { display: flex; flex-direction: column; height: 100%; padding: clamp(24px, 3vw, 34px); }
.pkg-tag { display: inline-block; margin-bottom: 12px; font-size: 0.76rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue-text); }
.pkg-card h3 { margin-bottom: 14px; }
.price-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-bottom: 16px; }
.price {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.6rem + 1.3vw, 2.5rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.price-meta { color: var(--text-muted); font-size: 0.95rem; }
.pkg-card .ticks { margin-bottom: 24px; }
.pkg-card .pkg-actions { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }

.pricing-note { margin-top: 28px; color: var(--text-muted); font-size: 0.95rem; }

/* ---- How it works: animated step sequence ---- */
.steps { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; }
.steps::before, .steps::after {
  content: "";
  position: absolute;
  left: 27px; top: 28px; bottom: 28px;
  width: 2px;
}
.steps::before { background: var(--line-strong); }
.steps::after {
  background: linear-gradient(180deg, var(--blue-500), var(--blue-400) 55%, var(--red-400));
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 1.4s var(--ease) 0.2s;
}
.steps.is-visible::after { transform: scaleY(1); }
@media (min-width: 900px) {
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
  .steps::before, .steps::after { left: 56px; right: calc(33.33% - 56px + 10px); top: 27px; bottom: auto; width: auto; height: 2px; }
  .steps::after { background: linear-gradient(90deg, var(--blue-500), var(--blue-400) 55%, var(--red-400)); transform: scaleX(0); transform-origin: left; }
  .steps.is-visible::after { transform: scaleX(1); }
}
.step { position: relative; display: grid; grid-template-columns: 56px 1fr; gap: 18px; align-items: start; align-content: start; }
@media (min-width: 900px) { .step { grid-template-columns: 1fr; gap: 22px; } }
.step-num {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  border: 2px solid var(--line-strong);
  background: var(--bg-2);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--text-dim);
  transition: color 0.5s var(--ease), border-color 0.5s var(--ease), background-color 0.5s var(--ease);
}
.steps.is-visible .step-num { color: #fff; border-color: var(--blue-400); background: linear-gradient(180deg, #24507a 0%, #1a2f4d 100%); box-shadow: inset 0 1px 0 rgba(224, 242, 254, 0.3); }
.steps.is-visible .step:nth-child(1) .step-num { transition-delay: 0.2s; }
.steps.is-visible .step:nth-child(2) .step-num { transition-delay: 0.75s; }
.steps.is-visible .step:nth-child(3) .step-num { transition-delay: 1.3s; border-color: var(--red-400); }
.step-body .step-kicker { display: block; margin-bottom: 4px; font-size: 0.76rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue-text); }
.step:nth-child(3) .step-kicker { color: var(--red-text); }
.step-body h3 { margin-bottom: 0.35em; }
.step-body p { margin: 0; color: var(--text-muted); }

/* ---- "Where AI fits in technical work" ---- */
.fit-grid { display: grid; gap: 20px; }
@media (min-width: 720px) {
  .fit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fit-grid > :last-child { grid-column: 1 / -1; }
}
/* Desktop: three cards, then two wider ones, so no gap is left. */
@media (min-width: 960px) {
  .fit-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 24px; }
  .fit-grid > * { grid-column: span 2; }
  .fit-grid > :nth-child(n+4) { grid-column: span 3; }
}
.fit-note { margin: 28px 0 0; font-weight: 500; color: var(--text); }

/* ---- "Your engineers stay in control" ---- */
.control-grid { display: grid; gap: 32px; }
@media (min-width: 960px) { .control-grid { grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; } }
.control-points { display: grid; gap: 22px; margin: 0; padding: 0; list-style: none; }
.control-points h3 { margin-bottom: 0.3em; }
.control-points p { margin: 0; color: var(--text-muted); }

/* Review loop. The plain styles show all three steps finished, which is what
   visitors see with reduced motion. The animation runs while .is-running is
   set (js/main.js). Change 9s in the three places below for a different pace. */
.loop-panel { padding: clamp(28px, 4vw, 44px) clamp(12px, 3vw, 32px); }
.loop { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.loop-step { position: relative; display: grid; justify-items: center; align-content: start; gap: 12px; text-align: center; }
.loop-step + .loop-step::before,
.loop-step + .loop-step::after {
  content: "";
  position: absolute;
  top: 27px;
  left: calc(-50% + 36px);
  right: calc(50% + 36px);
  height: 2px;
}
.loop-step + .loop-step::before { background: var(--line-strong); }
.loop-step + .loop-step::after { background: var(--blue-500); transform-origin: left; }
.loop-node {
  --lit: var(--blue-400);
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  border: 2px solid var(--lit);
  border-radius: 50%;
  background-color: #1a2f4d;
  color: #fff;
}
.loop-step:last-child .loop-node { --lit: var(--red-400); }
.loop-node svg { width: 24px; height: 24px; }
.loop-label { font-family: var(--font-display); font-size: 0.98rem; font-weight: 600; line-height: 1.25; color: var(--text); }

.loop.is-running .loop-node { animation: loopOne 9s linear infinite; }
.loop.is-running .loop-step:nth-child(2) .loop-node { animation-name: loopTwo; }
.loop.is-running .loop-step:nth-child(3) .loop-node { animation-name: loopThree; }
.loop.is-running .loop-step:nth-child(2)::after { animation: loopLinkTwo 9s var(--ease) infinite; }
.loop.is-running .loop-step:nth-child(3)::after { animation: loopLinkThree 9s var(--ease) infinite; }
@keyframes loopOne {
  0%, 90% { background-color: #1a2f4d; border-color: var(--lit); color: #fff; }
  96%, 100% { background-color: var(--bg-2); border-color: var(--line-strong); color: var(--text-dim); }
}
@keyframes loopTwo {
  0%, 28% { background-color: var(--bg-2); border-color: var(--line-strong); color: var(--text-dim); }
  34%, 90% { background-color: #1a2f4d; border-color: var(--lit); color: #fff; }
  96%, 100% { background-color: var(--bg-2); border-color: var(--line-strong); color: var(--text-dim); }
}
@keyframes loopThree {
  0%, 60% { background-color: var(--bg-2); border-color: var(--line-strong); color: var(--text-dim); }
  66%, 90% { background-color: #1a2f4d; border-color: var(--lit); color: #fff; }
  96%, 100% { background-color: var(--bg-2); border-color: var(--line-strong); color: var(--text-dim); }
}
@keyframes loopLinkTwo {
  0%, 20% { transform: scaleX(0); }
  32%, 90% { transform: scaleX(1); }
  96%, 100% { transform: scaleX(0); }
}
@keyframes loopLinkThree {
  0%, 52% { transform: scaleX(0); }
  64%, 90% { transform: scaleX(1); }
  96%, 100% { transform: scaleX(0); }
}

/* ---- No-code promise ---- */
.promise { padding: clamp(32px, 6vw, 72px); text-align: center; }
.promise blockquote { margin: 0 auto 1.25rem; max-width: 880px; }
.promise blockquote p {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 1.1rem + 1.8vw, 2.25rem);
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -0.015em;
}
.promise .lede { max-width: 680px; margin-inline: auto; }
.promise-points { display: grid; gap: 12px; max-width: 900px; margin: 32px auto 0; padding: 0; list-style: none; text-align: left; }
@media (min-width: 760px) { .promise-points { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.promise-points li { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--tile); font-size: 0.95rem; color: var(--text-muted); }
.promise-points svg { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--blue-400); }

/* ---- Closing call to action ---- */
.cta-band { padding: clamp(32px, 5vw, 60px); display: grid; gap: 24px; align-items: center; }
@media (min-width: 880px) { .cta-band { grid-template-columns: 1.4fr auto; gap: 48px; } }
.cta-band h2 { margin-bottom: 0.3em; }
.cta-band p { margin: 0; color: var(--text-muted); }


/* =====================================================================
   10. SERVICES PAGE
   ===================================================================== */
.jump-links { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }

.detail-card { padding: clamp(24px, 4vw, 48px); }
.detail-card + .detail-card { margin-top: 24px; }
.detail-grid { display: grid; gap: 28px; }
@media (min-width: 900px) { .detail-grid { grid-template-columns: 0.9fr 1.1fr; gap: 56px; } }
.detail-card .for-line { color: var(--text); font-weight: 500; }
.detail-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0 0 24px; }
.detail-meta div { padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--tile); }
/* With an odd number of tiles, the last one fills the row. */
.detail-meta div:last-child:nth-child(odd) { grid-column: 1 / -1; }
/* A card with no bullet lists shows its tiles in one row. */
@media (min-width: 720px) {
  .detail-meta-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .detail-meta-row div:last-child:nth-child(odd) { grid-column: auto; }
}
.detail-meta dt { font-size: 0.76rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); }
.detail-meta dd { margin: 2px 0 0; font-weight: 600; color: var(--text); }
.detail-lists h4 { margin-bottom: 0.6em; font-family: var(--font-display); color: var(--blue-text); }
.detail-lists .ticks + h4 { margin-top: 1.5rem; }

.note-panel { padding: 18px 20px; border: 1px solid var(--line-strong); border-left: 3px solid var(--blue-500); border-radius: var(--radius-sm); background: rgba(14, 165, 233, 0.07); }
.note-panel p:last-child { margin-bottom: 0; }

.editions { display: grid; gap: 16px; margin-top: 24px; }
@media (min-width: 720px) { .editions { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.edition { padding: 22px 24px; }
.edition h3 { font-size: 1.15rem; }
.edition p { margin: 0; color: var(--text-muted); }

/* ---- Unused-seat calculator ---- */
.calc { padding: clamp(24px, 4vw, 48px); margin-top: 24px; }
.calc-head { margin-bottom: 28px; max-width: 720px; }
.calc-head h3 { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem); }
.calc-grid { display: grid; gap: 28px; }
@media (min-width: 900px) { .calc-grid { grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; } }

.calc-field + .calc-field { margin-top: 22px; }
.calc-field-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.calc-field label { font-weight: 600; }
.calc-num { display: flex; align-items: center; gap: 6px; }
.calc-num span { color: var(--text-muted); font-weight: 500; }
.calc-num input {
  width: 92px;
  min-height: 44px;
  padding: 6px 10px;
  border: 1px solid var(--line-input);
  border-radius: 6px;
  background: var(--bg-2);
  color: var(--text);
  font: 600 1rem/1 var(--font-body);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.calc-num input:focus-visible { border-color: var(--blue-500); }

/* Range slider (styled track with blue fill; JavaScript sets --fill) */
input[type="range"] {
  --fill: 50%;
  width: 100%;
  height: 28px;
  margin: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--blue-500), var(--blue-400)) 0 / var(--fill) 100% no-repeat, var(--line-input);
}
input[type="range"]::-moz-range-track { height: 4px; border-radius: 4px; background: var(--line-input); }
input[type="range"]::-moz-range-progress { height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--blue-500), var(--blue-400)); }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px; height: 20px;
  margin-top: -8px;
  border-radius: 50%;
  border: 2px solid var(--blue-500);
  background: radial-gradient(circle at 35% 30%, #fff, var(--blue-100) 60%, #bae6fd);
  box-shadow: 0 1px 3px rgba(20, 37, 64, 0.25);
}
input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 2px solid var(--blue-500);
  background: radial-gradient(circle at 35% 30%, #fff, var(--blue-100) 60%, #bae6fd);
  box-shadow: 0 1px 3px rgba(20, 37, 64, 0.25);
}
input[type="range"]:focus-visible { outline-offset: 6px; }

.calc-result {
  position: relative;
  padding: 28px;
  border: 1px solid var(--line-strong);
  border-top: 3px solid var(--red-400);
  border-radius: var(--radius);
  background: var(--tile);
  text-align: center;
}
.calc-result-label { margin-bottom: 8px; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--red-text); }
.calc-total {
  display: block;
  margin-bottom: 10px;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 1.8rem + 2.8vw, 3.4rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.calc-breakdown { margin: 0 0 18px; color: var(--text-muted); font-size: 0.95rem; font-variant-numeric: tabular-nums; }
.calc-note { margin: 18px 0 0; font-size: 0.88rem; color: var(--text-dim); }

/* ---- Comparison table ---- */
.compare-wrap { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--bg-2); box-shadow: var(--shadow); }
.compare { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.compare th, .compare td { padding: 14px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.compare thead th { font-family: var(--font-display); font-size: 1rem; font-weight: 600; color: var(--text); background: var(--bg-3); border-bottom: 1px solid var(--line-strong); }
.compare thead th .th-tag { display: block; margin-bottom: 2px; font-family: var(--font-body); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue-text); }
.compare tbody th { width: 17%; color: var(--text-dim); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.compare td { color: var(--text-muted); }
.compare td.price-cell { font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.compare .price-cell-note { display: block; font-family: var(--font-body); font-size: 0.82rem; font-weight: 400; color: var(--text-muted); }
.compare tbody tr:last-child th, .compare tbody tr:last-child td { border-bottom: 0; }
.compare tbody tr:nth-child(even) { background: rgba(20, 37, 64, 0.02); }

/* On phones the table scrolls sideways inside its own box (the page itself
   never scrolls sideways) and the row labels stay pinned on the left. */
.compare-scroll-hint { display: none; margin: 0 0 10px; font-size: 0.88rem; color: var(--text-dim); }
@media (max-width: 899px) {
  .compare-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
  .compare { min-width: 760px; }
  .compare tbody th, .compare thead th:first-child { position: sticky; left: 0; z-index: 1; background: var(--bg-2); box-shadow: 1px 0 0 var(--line); }
  .compare thead th:first-child { background: var(--bg-3); }
  .compare-scroll-hint { display: block; }
}

/* ---- FAQ accordions ---- */
.faq { max-width: 880px; }
.faq-item { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-2); transition: border-color 0.3s var(--ease); }
.faq-item + .faq-item { margin-top: 10px; }
.faq-item[open] { border-color: var(--line-strong); }
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 60px;
  padding: 16px 20px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: 1.06rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-icon { position: relative; width: 26px; height: 26px; flex: none; border-radius: 50%; border: 1px solid var(--line-strong); transition: border-color 0.3s var(--ease), transform 0.3s var(--ease); }
.faq-icon::before, .faq-icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 2px; margin: -1px 0 0 -5.5px; border-radius: 2px; background: var(--blue-400); transition: transform 0.3s var(--ease); }
.faq-icon::after { transform: rotate(90deg); }
.faq-item[open] .faq-icon { border-color: var(--blue-500); transform: rotate(180deg); }
.faq-item[open] .faq-icon::after { transform: rotate(0deg); }
.faq-answer { overflow: hidden; }
.faq-answer-inner { padding: 0 20px 20px; color: var(--text-muted); }
.faq-answer-inner p:last-child { margin-bottom: 0; }


/* =====================================================================
   11. ABOUT PAGE
   ===================================================================== */
.about-grid { display: grid; gap: 32px; }
@media (min-width: 900px) { .about-grid { grid-template-columns: 340px 1fr; gap: 64px; align-items: start; } }
.portrait {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 5;
  max-width: 340px;
  padding: 24px;
  text-align: center;
}
.portrait-mark { width: min(200px, 70%); height: auto; }
.prose { max-width: 720px; }
.prose h2 { margin-top: 1.6em; font-size: clamp(1.45rem, 1.15rem + 1.1vw, 1.9rem); }
.prose h2:first-child { margin-top: 0; }
.prose p { color: var(--text-muted); }
.prose p strong { color: var(--text); }
.pf-callout { margin: 2rem 0; padding: 24px 26px; }
.pf-callout h3 { font-size: 1.15rem; }
.pf-callout p { margin: 0; color: var(--text-muted); }


/* =====================================================================
   12. CONTACT PAGE AND FORM
   ===================================================================== */
.contact-grid { display: grid; gap: 32px; }
@media (min-width: 980px) { .contact-grid { grid-template-columns: 1fr 340px; gap: 48px; align-items: start; } }
.contact-aside { display: grid; gap: 16px; }
@media (min-width: 980px) { .contact-aside { position: sticky; top: calc(var(--header-h) + 24px); } }
.contact-aside .card h2 { font-size: 1.1rem; letter-spacing: -0.01em; }
.next-steps { list-style: none; margin: 0; padding: 0; counter-reset: ns; }
.next-steps li { position: relative; padding-left: 40px; margin-bottom: 14px; color: var(--text-muted); font-size: 0.95rem; counter-increment: ns; }
.next-steps li::before {
  content: counter(ns);
  position: absolute; left: 0; top: 0;
  display: grid; place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1px solid var(--blue-500);
  color: var(--blue-text);
  font-size: 0.82rem; font-weight: 600;
}
.next-steps li:last-child { margin-bottom: 0; }

.form-card { padding: clamp(22px, 4vw, 44px); }
.form-grid { display: grid; gap: 22px; }
@media (min-width: 720px) { .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 20px; } .field-full { grid-column: 1 / -1; } }

.field { min-width: 0; }
.field > label, .field legend { display: block; margin-bottom: 8px; padding: 0; font-weight: 600; color: var(--text); }
.field fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.req { color: var(--red-text); font-weight: 600; }
.opt { color: var(--text-dim); font-weight: 400; font-size: 0.9rem; }
.hint { margin: -4px 0 10px; font-size: 0.88rem; color: var(--text-dim); }

.input, .select, .textarea {
  width: 100%;
  min-height: 50px;
  padding: 12px 14px;
  border: 1px solid var(--line-input);
  border-radius: var(--radius-sm);
  background: var(--bg-2);
  color: var(--text);
  font: 400 1rem/1.4 var(--font-body);
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.input::placeholder, .textarea::placeholder { color: #566880; }
.input:hover, .select:hover, .textarea:hover { border-color: #4d6789; }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible {
  outline: none;
  border-color: var(--blue-500);
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.3);
}
.textarea { min-height: 150px; resize: vertical; }
.select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230477b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}
.select option { background: var(--bg-2); color: var(--text); }

/* Checkbox and radio options */
.options { display: grid; gap: 10px; }
.options.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.option {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 50px;
  padding: 13px 14px;
  border: 1px solid var(--line-input);
  border-radius: var(--radius-sm);
  background: var(--tile);
  cursor: pointer;
  transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease);
}
.option:hover { border-color: #4d6789; }
.option input { width: 20px; height: 20px; margin: 1px 0 0; flex: none; accent-color: var(--blue-500); cursor: pointer; }
.option input:focus-visible { outline: 2px solid var(--blue-text); outline-offset: 2px; }
.option:has(input:checked) { border-color: var(--blue-500); background: rgba(14, 165, 233, 0.1); }
.option-text { line-height: 1.35; }
.option-text strong { display: block; font-weight: 600; color: var(--text); }
.option-text span { display: block; margin-top: 2px; font-size: 0.88rem; color: var(--text-muted); }

/* Error messages */
.field-error { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; color: var(--red-text); font-size: 0.9rem; font-weight: 500; }
.field-error[hidden] { display: none; }
.field-error::before { content: "!"; display: grid; place-items: center; width: 18px; height: 18px; flex: none; border-radius: 50%; background: var(--red-500); color: #fff; font-size: 0.75rem; font-weight: 700; }
.is-invalid .input, .is-invalid .select, .is-invalid .textarea, .is-invalid .option { border-color: var(--red-400); }
.form-summary-error { margin: 0 0 20px; padding: 14px 16px; border: 1px solid var(--red-400); border-radius: var(--radius-sm); background: rgba(179, 38, 59, 0.14); color: var(--text); }
.form-summary-error[hidden] { display: none; }

.honeypot { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.form-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 28px; }
.form-footer p { margin: 0; font-size: 0.88rem; color: var(--text-dim); }
.btn[aria-busy="true"] { pointer-events: none; opacity: 0.75; }

/* Success state shown after submitting */
.form-success { padding: clamp(32px, 6vw, 64px) clamp(22px, 4vw, 44px); text-align: center; }
.form-success[hidden] { display: none; }
.form-success h2 { margin-bottom: 0.4em; }
.form-success p { max-width: 520px; margin-inline: auto; color: var(--text-muted); }
.success-mark { width: 80px; height: 80px; margin: 0 auto 24px; }
.success-mark circle { stroke: var(--blue-500); stroke-dasharray: 220; stroke-dashoffset: 220; animation: drawStroke 0.8s var(--ease) 0.1s forwards; }
.success-mark path { stroke: var(--blue-text); stroke-dasharray: 60; stroke-dashoffset: 60; animation: drawStroke 0.5s var(--ease) 0.7s forwards; }
@keyframes drawStroke { to { stroke-dashoffset: 0; } }


/* =====================================================================
   13. FOOTER
   ===================================================================== */
/* The footer is the one dark area of the site: the logo's dark version and
   the chrome wordmark need it. Colors are reset here for everything inside. */
.site-footer {
  --text: #E8EDF4;
  --text-muted: #A9B4C4;
  --text-dim: #A9B4C4;
  --line: #2A3442;
  --blue-text: #7dd3fc;
  --todo: #f2c14e;
  position: relative;
  margin-top: clamp(40px, 6vw, 80px);
  padding: 56px 0 32px;
  background: #0E1218;
  color: var(--text);
}
.site-footer .brand-mark { width: 32px; height: 32px; }
.site-footer .wm-lemma { color: #E8EDF4; }
.site-footer .wm-power { color: #6FA2FF; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .site-footer .wm-lemma, .site-footer .wm-power {
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .site-footer .wm-lemma { background-image: linear-gradient(180deg, #FFFFFF, #D3DAE5, #8D99AB, #E8EDF4); }
  .site-footer .wm-power { background-image: linear-gradient(180deg, #CFE0FF, #6FA2FF, #3E7BF2, #9CC3FF); }
}
@media (forced-colors: active) {
  .site-footer .wm-lemma, .site-footer .wm-power { background-image: none; -webkit-text-fill-color: currentColor; }
}
.footer-descriptor {
  margin: 12px 0 0;
  max-width: 360px;
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #A9B4C4;
}
.footer-grid { display: grid; gap: 32px; }
@media (min-width: 820px) { .footer-grid { grid-template-columns: 1.5fr 1fr 1fr; gap: 48px; } }
.footer-tagline { margin: 12px 0 0; max-width: 360px; color: var(--text-muted); font-size: 0.95rem; }
.footer-title { margin: 0 0 10px; font-family: var(--font-body); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); }
.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links a { display: inline-flex; align-items: center; min-height: 40px; color: var(--text-muted); text-decoration: none; }
.footer-links a:hover { color: var(--text); text-decoration: underline; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 0.88rem; color: var(--text-dim); }
.footer-bottom p { margin: 0; }


/* =====================================================================
   14. SCROLL-REVEAL AND MOTION
   Sections fade and rise into place as you scroll. If JavaScript is off,
   everything is simply visible.
   ===================================================================== */
.js .reveal {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
  transition-delay: calc(var(--i, 0) * 80ms);
}
.js .reveal.is-visible { opacity: 1; transform: none; }
.js.reveal-all .reveal { opacity: 1; transform: none; }

/* Smooth page-to-page cross-fade (browsers that support it) */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.3s; animation-timing-function: var(--ease); }
::view-transition-group(site-header) { animation-duration: 0s; }


/* =====================================================================
   15. REDUCED MOTION
   Visitors who ask their device for less motion get a calm, static
   version. Nothing is hidden; animations are simply switched off.
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0s !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  .btn:hover, .hover-lift:hover { transform: none; }
  .steps::after { transform: none !important; }
  .success-mark circle, .success-mark path { stroke-dashoffset: 0; }
  @view-transition { navigation: none; }
}


/* =====================================================================
   16. SMALL SPACING HELPERS
   These replace small style="..." tweaks that used to sit in the HTML.
   The site's security policy blocks styles written inside the HTML, so
   they live here instead. !important keeps them winning, as before.
   ===================================================================== */
.sprite { position: absolute !important; }
.m-0 { margin: 0 !important; }
.mt-6 { margin-top: 6px !important; }
.mt-28 { margin-top: 28px !important; }
.pt-0 { padding-top: 0 !important; }
.pt-about { padding-top: clamp(24px, 4vw, 48px) !important; }
.pt-contact { padding-top: clamp(16px, 3vw, 32px) !important; }
.justify-center { justify-content: center !important; }