/* =========================================================================
   Peter — Professional Slovenian Voice Over Artist
   Stylesheet
   -------------------------------------------------------------------------
   Organization:
     1. Design tokens (edit these to reskin the whole site)
     2. Reset & base
     3. Layout helpers
     4. Typography
     5. Buttons & form controls
     6. Header / navigation
     7. Hero
     8. Why Me
     9. Services
    10. Samples (audio + video)
    11. Pricing
    12. Testimonials
    13. About
    14. FAQ
    15. Contact
    16. Footer
    17. Legal pages
    18. Floating WhatsApp button
    19. Door navigation (multi-page: hub + Localization + E-learning + AI Evaluation)
    20. Localization page — Translate & Voice calculator
    21. AI Evaluation page — package cards, steps explainer
    22. Hub — door cards
    23. Responsive breakpoints
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Design tokens
   ------------------------------------------------------------------------- */
:root {
  /* Color palette — warm near-black + champagne gold, inspired by the
     supplied reference screenshots. Change these six colors to reskin. */
  --color-bg: #121110;
  --color-bg-elevated: #181613;
  --color-bg-panel: #1c1a17;
  --color-border: rgba(232, 222, 200, 0.14);
  --color-border-strong: rgba(232, 222, 200, 0.3);
  --color-text: #f3ede0;
  --color-text-muted: #b6ac9c;
  --color-text-faint: #7c7364;
  --color-accent: #c9a768;
  --color-accent-strong: #e0bd80;
  --color-accent-contrast: #1a1611;
  --color-success: #7fb88a;
  --color-error: #e07a6b;

  /* Typography — high-quality system stacks only, no web-font requests. */
  --font-display: ui-serif, Georgia, "Iowan Old Style", "Times New Roman", serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Spacing scale (4/8px rhythm) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  /* Layout */
  --container-width: 1160px;
  --radius-sm: 2px;
  --radius-md: 4px;
  --border-width: 1px;
  --nav-height: 72px;

  /* Motion */
  --transition-fast: 150ms ease;
  --transition-base: 220ms ease;
}

/* -------------------------------------------------------------------------
   2. Reset & base
   ------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: inherit;
}

button {
  font: inherit;
  color: inherit;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1,
h2,
h3,
h4,
p,
figure {
  margin: 0;
}

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

html {
  scroll-behavior: smooth;
}

/* Visible, high-contrast focus state for keyboard users everywhere */
:focus-visible {
  outline: 2px solid var(--color-accent-strong);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Skip link */
.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  background: var(--color-accent);
  color: var(--color-accent-contrast);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-weight: 600;
  z-index: 200;
  transition: top var(--transition-fast);
}

.skip-link:focus {
  top: var(--space-4);
}

/* -------------------------------------------------------------------------
   3. Layout helpers
   ------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

section {
  padding-block: var(--space-9);
  border-bottom: var(--border-width) solid var(--color-border);
  scroll-margin-top: var(--nav-height);
}

.section-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-5);
  margin-bottom: var(--space-7);
}

.section-head__intro {
  max-width: 60ch;
  color: var(--color-text-muted);
}

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

/* -------------------------------------------------------------------------
   4. Typography
   ------------------------------------------------------------------------- */
.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-3);
}

h1,
h2,
h3,
.font-display {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  color: var(--color-text);
}

h1 {
  font-size: clamp(2.25rem, 1.6rem + 3vw, 3.75rem);
  letter-spacing: -0.01em;
}

h2 {
  font-size: clamp(1.9rem, 1.5rem + 1.8vw, 2.75rem);
}

h3 {
  font-size: 1.25rem;
  font-weight: 600;
}

p {
  max-width: 68ch;
}

.lede {
  font-size: 1.125rem;
  color: var(--color-text-muted);
}

.text-muted {
  color: var(--color-text-muted);
}

.text-small {
  font-size: 0.875rem;
}

/* -------------------------------------------------------------------------
   5. Buttons & form controls
   ------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;
  padding: 0 var(--space-6);
  border-radius: var(--radius-md);
  border: var(--border-width) solid transparent;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
  touch-action: manipulation;
}

.btn svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.btn:active {
  transform: translateY(1px);
}

.btn--primary {
  background: var(--color-accent);
  color: var(--color-accent-contrast);
  border-color: var(--color-accent);
}

.btn--primary:hover {
  background: var(--color-accent-strong);
  border-color: var(--color-accent-strong);
}

.btn--secondary {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-border-strong);
}

.btn--secondary:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.btn--block {
  width: 100%;
}

.btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}

.btn:disabled:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
}

/* Form fields */
.field {
  margin-bottom: var(--space-5);
}

.field label,
.field legend {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
  padding: 0;
}

.field .required {
  color: var(--color-accent);
}

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="number"],
.field select,
.field textarea {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: var(--border-width) solid var(--color-border-strong);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 1rem;
  padding: var(--space-3) 0;
  border-radius: 0;
}

.field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--color-text-muted) 50%), linear-gradient(135deg, var(--color-text-muted) 50%, transparent 50%);
  background-position: calc(100% - 4px) 55%, calc(100% + 2px) 55%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: var(--space-6);
}

.field select option {
  background: var(--color-bg-elevated);
  color: var(--color-text);
}

.field textarea {
  resize: vertical;
  min-height: 120px;
  line-height: 1.5;
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--color-text-faint);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-bottom-color: var(--color-accent);
}

.field-hint {
  margin-top: var(--space-2);
  font-size: 0.8125rem;
  color: var(--color-text-faint);
}

/* Contextual guidance (e.g. "already in Slovenian, no localization needed")
   toggled via the native `hidden` attribute, same idiom as #quote-fields. */
.field-hint--accent {
  color: var(--color-accent-strong);
}

.field-error {
  margin-top: var(--space-2);
  font-size: 0.8125rem;
  color: var(--color-error);
  display: none;
}

.field.has-error input,
.field.has-error select,
.field.has-error textarea {
  border-bottom-color: var(--color-error);
}

.field.has-error .field-error {
  display: block;
}

.checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: var(--border-width) solid var(--color-border);
}

.checkbox-row:last-child {
  border-bottom: none;
}

.checkbox-row input[type="checkbox"],
.checkbox-row input[type="radio"] {
  width: 20px;
  height: 20px;
  min-width: 20px;
  margin-top: 2px;
  accent-color: var(--color-accent);
}

.checkbox-row__body {
  flex: 1;
  min-width: 0;
}

.checkbox-row__label {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  font-weight: 500;
  cursor: pointer;
}

.checkbox-row__price {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--color-accent);
}

.checkbox-row__note {
  margin-top: var(--space-1);
  font-size: 0.8125rem;
  color: var(--color-text-faint);
}

/* Reusable info icon + tooltip: next to add-on names whose difference from
   a similar one isn't obvious at a glance (e.g. Extended Commercial Rights
   vs. Full Broadcast Rights), and next to the VAT notes in Pricing and
   Contact. The tooltip is positioned in JS (script.js) using position:fixed
   and the button's real on-screen position, so it always stays clear of
   the viewport edges — including on narrow phones — rather than risking an
   off-screen overflow from a fixed CSS offset. */
.info-tip {
  /* inline-block rather than inline-flex — this wrapper only ever has one
     visible child (the button; the tooltip itself is position:fixed and
     out of flow), and inline-flex + vertical-align is a known spot where
     Safari and Chrome disagree on the resulting baseline, which is why
     this looked fine in testing but sat slightly off on an actual Mac
     browser. Plain inline-block is unambiguous across browsers. */
  display: inline-block;
  margin-left: var(--space-2);
  vertical-align: middle;
}

.info-tip__btn {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: var(--border-width) solid var(--color-text-faint);
  color: var(--color-text-faint);
  background: transparent;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

.info-tip__btn:hover,
.info-tip__btn:focus-visible,
.info-tip__btn.is-active {
  border-color: var(--color-accent);
  color: var(--color-accent);
  outline: none;
}

.info-tip__tooltip {
  position: fixed;
  /* Explicit reset — a couple of call sites wrap the trigger button in a
     nowrap span (to keep it glued to short preceding text on one line),
     and white-space is inherited, which would otherwise stop this box's
     own text from wrapping and blow straight past max-width below. */
  white-space: normal;
  max-width: 260px;
  background: var(--color-bg-elevated);
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--color-text-muted);
  text-align: left;
  box-shadow: 0 8px 24px rgba(10, 9, 8, 0.45);
  z-index: 150;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--transition-fast);
}

.info-tip__tooltip.is-open {
  opacity: 1;
  visibility: visible;
}

.checkbox-row.is-disabled {
  opacity: 0.45;
}

.checkbox-row.is-disabled .checkbox-row__label {
  cursor: not-allowed;
}

.qty-stepper {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.qty-stepper button {
  width: 28px;
  height: 28px;
  border: var(--border-width) solid var(--color-border-strong);
  background: transparent;
  color: var(--color-text);
  border-radius: var(--radius-sm);
  cursor: pointer;
  line-height: 1;
}

.qty-stepper button:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.qty-stepper output {
  min-width: 2ch;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------------------
   6. Header / navigation
   ------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--nav-height);
  display: flex;
  align-items: center;
  /* Solid background rather than a blurred/translucent one — this also
     keeps this element from becoming a CSS containing block for its
     position:fixed mobile menu (a backdrop-filter/filter/transform on an
     ancestor would otherwise break that menu's full-screen positioning). */
  background: var(--color-bg);
  border-bottom: var(--border-width) solid var(--color-border);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}

.site-logo {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.site-logo span {
  color: var(--color-accent);
}

.nav-list {
  display: flex;
  gap: var(--space-6);
}

.nav-list a {
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--color-text-muted);
  padding: var(--space-2) 0;
  border-bottom: 2px solid transparent;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.nav-list a:hover,
.nav-list a:focus-visible {
  color: var(--color-text);
  border-bottom-color: var(--color-accent);
}

/* Contact is the one link we want to stand out from the rest of the nav. */
.nav-list a.nav-link--accent {
  color: var(--color-accent);
  font-weight: 600;
}

.nav-list a.nav-link--accent:hover,
.nav-list a.nav-link--accent:focus-visible {
  color: var(--color-accent-strong);
  border-bottom-color: var(--color-accent-strong);
}

.nav-toggle {
  display: none;
  background: transparent;
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-md);
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.nav-toggle__bars {
  position: relative;
  width: 18px;
  height: 12px;
}

.nav-toggle__bars span {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--color-text);
  transition: transform var(--transition-base), opacity var(--transition-base), top var(--transition-base);
}

.nav-toggle__bars span:nth-child(1) { top: 0; }
.nav-toggle__bars span:nth-child(2) { top: 5px; }
.nav-toggle__bars span:nth-child(3) { top: 10px; }

.site-header.is-open .nav-toggle__bars span:nth-child(1) {
  top: 5px;
  transform: rotate(45deg);
}
.site-header.is-open .nav-toggle__bars span:nth-child(2) {
  opacity: 0;
}
.site-header.is-open .nav-toggle__bars span:nth-child(3) {
  top: 5px;
  transform: rotate(-45deg);
}

/* -------------------------------------------------------------------------
   7. Hero
   ------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: calc(100dvh - var(--nav-height));
  display: flex;
  align-items: center;
  padding-block: var(--space-8);
  border-bottom: var(--border-width) solid var(--color-border);
  overflow: hidden;
  /* No real studio photo was supplied. This gradient + inline waveform SVG
     stands in for a photographic background; swap this one rule for
     background-image: url("images/hero.jpg") center/cover no-repeat; once a
     real photo of the studio/setup is available. */
  background:
    radial-gradient(ellipse 80% 60% at 80% 10%, rgba(201, 167, 104, 0.16), transparent 60%),
    radial-gradient(ellipse 60% 50% at 10% 90%, rgba(201, 167, 104, 0.08), transparent 55%),
    linear-gradient(180deg, #17140f 0%, #121110 55%, #0d0c0b 100%);
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="600" height="120" viewBox="0 0 600 120"><g fill="none" stroke="%23c9a768" stroke-width="2" stroke-linecap="round" opacity="0.14"><path d="M0 60 h20 M40 40 v40 M60 20 v80 M80 45 v30 M100 55 v10 M120 30 v60 M140 50 v20 M160 15 v90 M180 48 v24 M200 58 v4 M220 35 v50 M240 52 v16 M260 25 v70 M280 46 v28 M300 60 v0 M320 33 v54 M340 50 v20 M360 18 v84 M380 47 v26 M400 58 v4 M420 30 v60 M440 51 v18 M460 22 v76 M480 46 v28 M500 55 v10 M520 34 v52 M540 50 v20 M560 24 v72 M580 48 v24"/></g></svg>');
  background-repeat: repeat-x;
  background-position: left bottom;
  background-size: 600px 120px;
  opacity: 0.5;
  pointer-events: none;
}

.hero .container {
  position: relative;
  z-index: 1;
}

.hero-content {
  max-width: 640px;
}

.hero h1 {
  margin-bottom: var(--space-5);
}

.hero h1 em {
  font-style: italic;
  color: var(--color-accent);
}

.hero-lede {
  margin-bottom: var(--space-6);
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

/* Hub only (no hero-ctas there to hint at more content below) — a quiet cue
   that the three doors are one scroll away. */
.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: var(--space-6);
  transform: translateX(-50%);
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--transition-fast);
}
.scroll-cue:hover,
.scroll-cue:focus-visible {
  color: var(--color-accent);
}
.scroll-cue__label {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.scroll-cue svg {
  width: 18px;
  height: 18px;
  animation: scroll-cue-bounce 2s ease-in-out infinite;
}
@keyframes scroll-cue-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-cue svg { animation: none; }
}

/* -------------------------------------------------------------------------
   8. Why Me
   ------------------------------------------------------------------------- */
.benefits-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}

.benefit-card {
  padding: var(--space-6);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-panel);
}

.benefit-card h3 {
  margin-bottom: var(--space-3);
}

.benefit-card p {
  color: var(--color-text-muted);
  margin: 0;
}

/* -------------------------------------------------------------------------
   9. Services
   ------------------------------------------------------------------------- */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.service-card {
  padding: var(--space-6);
  border-right: var(--border-width) solid var(--color-border);
  border-bottom: var(--border-width) solid var(--color-border);
  background: var(--color-bg-panel);
}

.services-grid .service-card:nth-child(3n) {
  border-right: none;
}

.services-grid .service-card:nth-last-child(-n+3) {
  border-bottom: none;
}

.service-card h3 {
  margin-bottom: var(--space-3);
}

.service-card p {
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.tag {
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-3);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* -------------------------------------------------------------------------
   10. Samples
   ------------------------------------------------------------------------- */
.samples-tabs {
  display: inline-flex;
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: var(--space-7);
}

.samples-tab {
  background: transparent;
  border: none;
  padding: var(--space-3) var(--space-6);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  cursor: pointer;
}

.samples-tab[aria-selected="true"] {
  background: var(--color-accent);
  color: var(--color-accent-contrast);
}

.samples-panel[hidden] {
  display: none;
}

.audio-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}

.audio-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
}

.audio-card__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
}

.audio-card__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.0625rem;
}

.audio-card__category {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}

.audio-card audio {
  width: 100%;
  height: 40px;
  filter: invert(1) grayscale(1) contrast(0.9);
  border-radius: var(--radius-sm);
}

.video-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}

.video-card {
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--color-bg-elevated);
  cursor: pointer;
  border: none;
  padding: 0;
  width: 100%;
  display: block;
}

.video-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.video-frame__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 9, 8, 0.32);
  transition: background var(--transition-fast);
}

.video-frame:hover .video-frame__play,
.video-frame:focus-visible .video-frame__play {
  background: rgba(10, 9, 8, 0.5);
}

.video-frame__play svg {
  width: 56px;
  height: 56px;
}

.video-card__title {
  padding: var(--space-4);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
}

/* -------------------------------------------------------------------------
   11. Pricing
   ------------------------------------------------------------------------- */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  margin-bottom: var(--space-8);
}

.pricing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-6);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-panel);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--transition-fast), transform var(--transition-fast);
}

.pricing-card:hover {
  border-color: var(--color-border-strong);
}

.pricing-card.is-selected {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 1px var(--color-accent);
}

.pricing-card--popular {
  border-color: var(--color-accent-strong);
}

.pricing-card__badge {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  background: var(--color-accent);
  color: var(--color-accent-contrast);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
}

.pricing-card__name {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}

.pricing-card__price {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--space-4);
}

.pricing-card__features {
  margin-bottom: var(--space-6);
  flex: 1;
}

.pricing-card__features li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  font-size: 0.9375rem;
  color: var(--color-text-muted);
  border-bottom: var(--border-width) solid var(--color-border);
}

.pricing-card__features li:last-child {
  border-bottom: none;
}

.pricing-card__features li svg {
  flex-shrink: 0;
  margin-top: 3px;
  color: var(--color-accent);
}

.pricing-card__select {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  border-radius: var(--radius-md);
  border: var(--border-width) solid var(--color-border-strong);
  background: transparent;
  color: var(--color-text);
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  pointer-events: none;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.pricing-card:hover .pricing-card__select {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.pricing-card.is-selected .pricing-card__select {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-accent-contrast);
}

.pricing-card.is-selected:hover .pricing-card__select {
  background: var(--color-accent-strong);
  border-color: var(--color-accent-strong);
  color: var(--color-accent-contrast);
}

.addons-panel {
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
}

.addons-panel__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 var(--space-6);
}

.addons-panel h3 {
  margin-bottom: var(--space-2);
}

.word-count-field {
  display: flex;
  align-items: flex-end;
  gap: var(--space-5);
  flex-wrap: wrap;
  margin-top: var(--space-7);
  padding-top: var(--space-6);
  border-top: var(--border-width) solid var(--color-border);
}

.word-count-field .field {
  margin-bottom: 0;
  max-width: 280px;
  flex: 1;
}

.word-count-feedback {
  flex: 2;
  min-width: 240px;
  font-size: 0.9375rem;
  color: var(--color-text-muted);
}

.word-count-feedback strong {
  color: var(--color-accent);
}

.pricing-summary {
  position: sticky;
  bottom: var(--space-5);
  margin-top: var(--space-7);
  padding: var(--space-5) var(--space-6);
  background: var(--color-bg-elevated);
  border: var(--border-width) solid var(--color-accent);
  border-radius: var(--radius-md);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  /* Higher than .whatsapp-fab (z-index: 140) so its own "Continue to
     Contact" button stays clickable at the handful of viewport widths
     where this bar's corner and the floating WhatsApp button would
     otherwise visually overlap in the bottom-right of the screen. */
  z-index: 141;
}

.pricing-summary__info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-6);
  flex: 1;
  min-width: 0;
}

.pricing-summary__cta {
  flex-shrink: 0;
  min-height: 44px;
}

.pricing-summary__lines {
  font-size: 0.9375rem;
  color: var(--color-text-muted);
}

.pricing-summary__lines strong {
  color: var(--color-text);
}

.pricing-summary__total {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------------------
   12. Testimonials
   ------------------------------------------------------------------------- */
/* Testimonials get a wider container than the rest of the site so each
   card has noticeably more breathing room on large screens (still full
   width, same as every other section, below the container's max-width). */
#testimonials .container {
  max-width: 1320px;
}

.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}

/* Only 3 testimonials exist, so the third card would otherwise sit alone
   stretched across a full grid row — center it at the same width as the
   two cards above instead. */
.testimonial-grid > :nth-child(3) {
  grid-column: 1 / -1;
  max-width: calc(50% - var(--space-6) / 2);
  margin-inline: auto;
}

.testimonial-card {
  padding: var(--space-6);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.testimonial-card__quote {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-style: italic;
  color: var(--color-text);
  line-height: 1.4;
}

.testimonial-card__body {
  color: var(--color-text-muted);
  font-size: 0.9375rem;
  flex: 1;
}

.testimonial-card__author {
  text-align: center;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-accent);
  padding-top: var(--space-4);
  border-top: var(--border-width) solid var(--color-border);
}

/* -------------------------------------------------------------------------
   13. About
   ------------------------------------------------------------------------- */
.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 340px) 1fr;
  gap: var(--space-8);
  align-items: center;
}

.about-photo {
  border-radius: var(--radius-md);
  overflow: hidden;
  border: var(--border-width) solid var(--color-border-strong);
}

.about-photo img {
  width: 100%;
  height: auto;
}

.about-copy p {
  color: var(--color-text-muted);
  margin-bottom: var(--space-5);
  max-width: 60ch;
}

.about-copy p:last-child {
  margin-bottom: 0;
}

/* -------------------------------------------------------------------------
   14. FAQ
   ------------------------------------------------------------------------- */
.faq-list {
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.faq-item {
  border-bottom: var(--border-width) solid var(--color-border);
  background: var(--color-bg-panel);
}

.faq-item:last-child {
  border-bottom: none;
}

.faq-item summary {
  padding: var(--space-5) var(--space-6);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  font-family: var(--font-display);
  font-size: 1.0625rem;
  color: var(--color-text);
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  color: var(--color-accent);
  font-size: 1.5rem;
  line-height: 1;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.faq-item[open] summary::after {
  transform: rotate(45deg);
}

.faq-item p {
  padding: 0 var(--space-6) var(--space-5);
  color: var(--color-text-muted);
  margin: 0;
}

/* -------------------------------------------------------------------------
   15. Contact
   ------------------------------------------------------------------------- */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 340px) 1fr;
  gap: var(--space-8);
  align-items: start;
}

.contact-info dl {
  margin: var(--space-6) 0 0;
}

.contact-info dt {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin-top: var(--space-5);
}

.contact-info dd {
  margin: var(--space-1) 0 0;
  font-size: 1rem;
}

.contact-info a {
  text-decoration: none;
  color: var(--color-text);
}

.contact-info a:hover {
  color: var(--color-accent);
}

.enquiry-toggle {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.enquiry-toggle label {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-4);
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-weight: 600;
  font-size: 0.875rem;
  text-align: center;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.enquiry-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.enquiry-toggle input:checked + span,
.enquiry-toggle label:has(input:checked) {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.quote-summary {
  padding: var(--space-5);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-6);
  background: var(--color-bg-panel);
}

.quote-summary__empty {
  color: var(--color-text-muted);
  font-size: 0.9375rem;
}

.quote-summary__empty a {
  color: var(--color-accent);
  text-decoration: underline;
}

.quote-summary dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2) var(--space-4);
  font-size: 0.9375rem;
}

.quote-summary dt {
  color: var(--color-text-faint);
}

.quote-summary dd {
  margin: 0;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.quote-summary__total {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: var(--border-width) solid var(--color-border);
  display: flex;
  justify-content: space-between;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
}

.quote-summary__change {
  display: inline-block;
  margin-top: var(--space-4);
  font-size: 0.8125rem;
  color: var(--color-accent);
  text-decoration: underline;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 var(--space-5);
}

.file-upload {
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  text-align: center;
}

.file-upload input[type="file"] {
  display: none;
}

.file-upload__filename {
  /* Override the site-wide `p { max-width: 68ch }` readability rule — this
     is a short one-line status message, not body copy, and that cap was
     shrinking its box and leaving it flush-left, which threw off the
     centering below. */
  max-width: none;
  margin-top: var(--space-3);
  font-size: 0.875rem;
  color: var(--color-text-muted);
  word-break: break-all;
}

.form-status {
  margin-top: var(--space-5);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  font-size: 0.9375rem;
  display: none;
}

.form-status[data-state="success"] {
  display: block;
  background: rgba(127, 184, 138, 0.12);
  border: var(--border-width) solid var(--color-success);
  color: var(--color-success);
}

.form-status[data-state="error"] {
  display: block;
  background: rgba(224, 122, 107, 0.12);
  border: var(--border-width) solid var(--color-error);
  color: var(--color-error);
}

.error-summary {
  display: none;
  margin-bottom: var(--space-5);
  padding: var(--space-4) var(--space-5);
  border: var(--border-width) solid var(--color-error);
  border-radius: var(--radius-md);
  background: rgba(224, 122, 107, 0.08);
}

.error-summary[data-active="true"] {
  display: block;
}

.error-summary h3 {
  font-size: 1rem;
  color: var(--color-error);
  margin-bottom: var(--space-2);
}

.error-summary a {
  color: var(--color-error);
  text-decoration: underline;
}

/* -------------------------------------------------------------------------
   16. Footer
   ------------------------------------------------------------------------- */
.site-footer {
  padding-block: var(--space-7);
}

.site-footer .container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-5);
}

.footer-brand {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

.footer-legal a {
  text-decoration: none;
}

.footer-legal a:hover {
  color: var(--color-accent);
}

.footer-info {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(200px, auto));
  justify-content: start;
  gap: var(--space-4) var(--space-6);
  margin-top: var(--space-2);
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

.footer-info__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.footer-info a {
  color: inherit;
  text-decoration: none;
}

.footer-info a:hover {
  color: var(--color-accent);
}

.footer-copyright {
  width: 100%;
  font-size: 0.8125rem;
  color: var(--color-text-faint);
  padding-top: var(--space-5);
  margin-top: var(--space-5);
  border-top: var(--border-width) solid var(--color-border);
}

/* -------------------------------------------------------------------------
   17. Legal pages
   ------------------------------------------------------------------------- */
.legal-page {
  padding-block: var(--space-8);
  border-bottom: none;
}

.legal-page .container {
  max-width: 760px;
}

.legal-page h1 {
  margin-bottom: var(--space-3);
}

.legal-page .updated {
  color: var(--color-text-faint);
  font-size: 0.875rem;
  margin-bottom: var(--space-7);
}

.legal-page h2 {
  font-size: 1.375rem;
  margin-top: var(--space-8);
  margin-bottom: var(--space-4);
}

.legal-page h2:first-of-type {
  margin-top: 0;
}

.legal-page p,
.legal-page li {
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
  max-width: none;
}

.legal-page ul,
.legal-page ol {
  padding-left: var(--space-6);
  list-style: disc;
  margin-bottom: var(--space-4);
}

.legal-page ol {
  list-style: decimal;
}

.legal-page a {
  color: var(--color-accent);
}

.legal-page .back-link {
  display: inline-block;
  margin-bottom: var(--space-7);
  font-size: 0.875rem;
  color: var(--color-accent);
  text-decoration: none;
}

mark.placeholder {
  background: rgba(201, 167, 104, 0.18);
  color: var(--color-accent-strong);
  padding: 0 4px;
  border-radius: 2px;
  font-style: normal;
}

/* -------------------------------------------------------------------------
   18. Floating WhatsApp button
   ------------------------------------------------------------------------- */
.whatsapp-fab {
  position: fixed;
  right: var(--space-5);
  bottom: var(--space-5);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-accent-contrast);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(10, 9, 8, 0.4);
  z-index: 140;
  transition: background-color var(--transition-fast), transform var(--transition-fast);
}

.whatsapp-fab:hover,
.whatsapp-fab:focus-visible {
  background: var(--color-accent-strong);
}

/* Label shown on hover (desktop) and keyboard focus. Tapping on touch
   devices activates the link immediately (there's no hover state to hold
   it open first), but the button's aria-label already announces "Chat on
   WhatsApp" to screen reader users regardless. */
.whatsapp-fab__label {
  position: absolute;
  right: calc(100% + var(--space-3));
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  background: var(--color-bg-elevated);
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text);
  box-shadow: 0 6px 20px rgba(10, 9, 8, 0.4);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--transition-fast);
}

.whatsapp-fab:hover .whatsapp-fab__label,
.whatsapp-fab:focus-visible .whatsapp-fab__label {
  opacity: 1;
  visibility: visible;
}

.whatsapp-fab:active {
  transform: scale(0.96);
}

/* display:block removes the few pixels of baseline whitespace an inline
   SVG carries by default — without this the icon sits visibly off-center
   inside the circle. */
.whatsapp-fab svg {
  display: block;
}

/* -------------------------------------------------------------------------
   19. Door navigation
   -------------------------------------------------------------------------
   A small strip under the header on every door page (Localization now;
   E-learning and AI Evaluation once those phases land), so a visitor who
   arrives via search or a shared link isn't stuck on one line of business.
   The hub itself (index.html) doesn't need this — it *is* the switcher.
   ------------------------------------------------------------------------- */
.door-nav {
  background: var(--color-bg-elevated);
  border-bottom: 1px solid var(--color-border);
}

.door-nav__list {
  display: flex;
  gap: var(--space-5);
  padding-block: var(--space-3);
  list-style: none;
  margin: 0;
  overflow-x: auto;
}

.door-nav__list a {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-decoration: none;
  white-space: nowrap;
}

.door-nav__list a:hover,
.door-nav__list a:focus-visible {
  color: var(--color-accent);
}

.door-nav__list a[aria-current="page"] {
  color: var(--color-accent);
  border-bottom: 2px solid var(--color-accent);
  padding-bottom: 2px;
}

/* Non-link lead-in text on the hub's door-nav (e.g. "Also on this site") */
.door-nav__label {
  font-size: 0.875rem;
  color: var(--color-text-faint);
  white-space: nowrap;
}

/* -------------------------------------------------------------------------
   20. Localization page — Translate & Voice calculator
   -------------------------------------------------------------------------
   Mirrors the existing Pricing calculator's visual language, but estimates
   translation + voice-over work priced per source word rather than per the
   fixed Basic/Standard/Premium tiers above it on the same page.
   ------------------------------------------------------------------------- */
.translate-calc {
  margin-top: var(--space-6);
  padding: var(--space-6);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  display: flex;
  align-items: flex-end;
  gap: var(--space-6);
  flex-wrap: wrap;
}

.translate-calc .field label {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin-bottom: var(--space-2);
}

.translate-calc .field select,
.translate-calc .field input {
  background: var(--color-bg);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-size: 0.9375rem;
  padding: 9px 12px;
  font-family: var(--font-body);
  min-width: 200px;
}

.translate-calc__result {
  font-size: 0.9375rem;
  color: var(--color-text-muted);
}

.translate-calc__result strong {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--color-accent);
  display: block;
  line-height: 1.2;
}

.translate-calc__note {
  font-size: 0.8125rem;
  color: var(--color-text-faint);
  margin: var(--space-3) 0 0;
}

/* -------------------------------------------------------------------------
   21. AI Evaluation page — package cards, steps explainer
   ------------------------------------------------------------------------- */
.ai-pkg-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
  margin-bottom: var(--space-3);
}

.ai-pkg {
  position: relative;
  padding: var(--space-6) var(--space-5);
  background: var(--color-bg-panel);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
}

.ai-pkg.is-popular { border-color: var(--color-accent); }

.ai-pkg-badge {
  position: absolute;
  top: -11px;
  left: var(--space-5);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-contrast);
  background: var(--color-accent);
  border-radius: 100px;
  padding: 4px 10px;
}

.ai-pkg-name {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 4px;
}

.ai-pkg-price {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--color-accent-strong);
  margin: 0 0 6px;
}

.ai-pkg-for {
  font-size: 0.8438rem;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-5);
}

ul.ai-pkg-list {
  list-style: none;
  margin: 0 0 var(--space-5);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex-grow: 1;
}

ul.ai-pkg-list li {
  position: relative;
  padding-left: 20px;
  font-size: 0.8438rem;
  color: var(--color-text-muted);
}

ul.ai-pkg-list li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-accent);
  font-size: 0.75rem;
}

.ai-pkg-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px var(--space-5);
  border-radius: var(--radius-md);
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
  margin-top: auto;
}

.ai-pkg-cta.is-solid {
  background: var(--color-accent);
  color: var(--color-accent-contrast);
}

.ai-pkg-cta.is-outline {
  background: transparent;
  border: var(--border-width) solid var(--color-border-strong);
  color: var(--color-text);
}

.quote-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  flex-wrap: wrap;
  margin-top: var(--space-6);
  padding: var(--space-5) var(--space-6);
  background: var(--color-bg-elevated);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
}

.quote-note p {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--color-text-muted);
}

.quote-note strong { color: var(--color-text); }

/* How-it-works steps */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  margin: var(--space-7) 0 var(--space-6);
}

.step {
  display: flex;
  gap: var(--space-4);
}

.step-num {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1.5px solid var(--color-accent);
  color: var(--color-accent);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9375rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.step h4 {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-text);
  margin: 3px 0 4px;
}

.step p {
  font-size: 0.8438rem;
  color: var(--color-text-muted);
  margin: 0;
}

/* -------------------------------------------------------------------------
   22. Hub — door cards
   ------------------------------------------------------------------------- */
.doors {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}

.door {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-7) var(--space-6);
  background: var(--color-bg-panel);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: border-color var(--transition-fast), transform var(--transition-fast), background-color var(--transition-fast);
}

.door:hover,
.door:focus-visible {
  border-color: var(--color-accent);
  background: var(--color-bg-elevated);
  transform: translateY(-3px);
}
.door:focus-visible {
  outline: 2px solid var(--color-accent-strong);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .door { transition: none; }
  .door:hover { transform: none; }
}

.door .ring {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1.5px solid var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-accent);
}
.door .ring svg { width: 24px; height: 24px; }

.door-tag {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin: 0;
}

.door h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  margin: 0;
}

.door-line {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.9375rem;
  color: var(--color-accent-strong);
  margin: 0;
}

.door-desc {
  font-size: 0.9375rem;
  color: var(--color-text-muted);
  margin: 0;
}

.door-cta {
  margin-top: auto;
  padding-top: var(--space-2);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-accent);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.door-cta svg {
  width: 14px;
  height: 14px;
  transition: transform var(--transition-fast);
}
.door:hover .door-cta svg,
.door:focus-visible .door-cta svg {
  transform: translateX(3px);
}
@media (prefers-reduced-motion: reduce) {
  .door-cta svg { transition: none; }
}

/* -------------------------------------------------------------------------
   23. Responsive breakpoints
   ------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .benefits-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .services-grid .service-card:nth-child(3n) {
    border-right: var(--border-width) solid var(--color-border);
  }
  .services-grid .service-card:nth-child(2n) {
    border-right: none;
  }
  .services-grid .service-card:nth-last-child(-n+3) {
    border-bottom: var(--border-width) solid var(--color-border);
  }
  .services-grid .service-card:nth-last-child(-n+2) {
    border-bottom: none;
  }

  .video-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .pricing-grid {
    grid-template-columns: 1fr;
    max-width: 460px;
    margin-inline: auto;
  }

  .testimonial-grid {
    grid-template-columns: 1fr;
    max-width: 560px;
    margin-inline: auto;
  }

  .testimonial-grid > :nth-child(3) {
    grid-column: auto;
    max-width: none;
  }

  .about-grid,
  .contact-grid {
    grid-template-columns: 1fr;
  }

  .about-photo {
    max-width: 320px;
    margin-inline: auto;
  }

  .translate-calc {
    flex-direction: column;
    align-items: stretch;
  }

  .translate-calc .field select,
  .translate-calc .field input {
    min-width: 0;
    width: 100%;
  }
}

@media (max-width: 768px) {
  :root {
    --nav-height: 64px;
  }

  section {
    padding-block: var(--space-7);
  }

  .ai-pkg-grid,
  .steps,
  .doors {
    grid-template-columns: 1fr;
  }

  .nav-list {
    position: fixed;
    inset: var(--nav-height) 0 0 0;
    background: var(--color-bg);
    flex-direction: column;
    align-items: flex-start;
    padding: var(--space-6) var(--space-5);
    gap: var(--space-2);
    transform: translateX(100%);
    transition: transform var(--transition-base);
    overflow-y: auto;
  }

  .site-header.is-open .nav-list {
    transform: translateX(0);
  }

  .nav-list a {
    display: block;
    width: 100%;
    padding: var(--space-4) 0;
    font-size: 1.0625rem;
    border-bottom: var(--border-width) solid var(--color-border);
  }

  .nav-toggle {
    display: inline-flex;
  }

  .benefits-grid {
    grid-template-columns: 1fr;
  }

  .services-grid {
    grid-template-columns: 1fr;
  }
  .services-grid .service-card {
    border-right: none !important;
    border-bottom: var(--border-width) solid var(--color-border) !important;
  }
  .services-grid .service-card:last-child {
    border-bottom: none !important;
  }

  .audio-grid,
  .video-grid {
    grid-template-columns: 1fr;
  }

  .addons-panel__grid {
    grid-template-columns: 1fr;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .pricing-summary {
    position: static;
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }

  .pricing-summary__info {
    flex-direction: column;
  }

  .pricing-summary__cta {
    width: 100%;
  }

  .hero-ctas .btn {
    flex: 1;
    min-width: 0;
  }

  .footer-info {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
}

@media (max-width: 480px) {
  .container {
    padding-inline: var(--space-4);
  }

  .hero {
    min-height: auto;
    padding-block: var(--space-7);
  }

  .pricing-card__price {
    font-size: 2rem;
  }

  /* Longer hero CTA labels (e.g. "See Starting Points") wrap to three
     stacked single-word lines at this width otherwise — each line is
     technically centered, but three narrow lines reads as broken rather
     than as a normal button. Smaller text/padding/tracking gets it back
     to a clean one- or two-line wrap that actually looks centered. */
  .hero-ctas .btn {
    padding: 0 var(--space-4);
    font-size: 0.75rem;
    letter-spacing: 0.02em;
  }
}