/* Twigs&Ink | css/styles.css | v2.0 | Updated 2026-08-18 | See CHANGELOG.md */
/* ============================================================================
   TWIGS&INK — STYLES (REBUILD)
   /css/styles.css

   Architecture
   01  Tokens (brand + fluid type + dark mode)
   02  Reset & base
   03  Accessibility
   04  Layout primitives
   05  Typography utilities + .prose
   06  Buttons
   07  Forms
   08  Cards (generic)
   09  Pills / dividers
   10  Navbar
   11  Footer
   12  Hero (homepage)
   13  Social proof bar
   14  About section
   15  Services preview (asymmetric)
   16  Why Us (numbered editorial list)
   17  Blog cards / blog index
   18  Contact (strip + page)
   19  Services page detail blocks
   20  Blog article page
   21  Scroll reveal animations
   22  Responsive (768 tablet, 1024 desktop, plus mobile-only overrides)

   Breakpoints
   - Base mobile-first         : 375px and up (no media query)
   - Tablet                    : @media (min-width: 768px)
   - Desktop                   : @media (min-width: 1024px)
   - Mobile-only overrides     : @media (max-width: 767px)
   ============================================================================ */


/* ============================================================================
   01 — TOKENS
   ============================================================================ */
:root {
  /* Brand palette — locked from playbook */
  --color-navy:        #152E3A;
  --color-coral:       #F5907C;
  --color-teal:        #7BCAD1;
  --color-white:       #FFFFFF;

  /* Light mode (default) — locked from playbook */
  --color-bg:            #FFFFFF;
  --color-surface:       #F8F9FA;
  --color-surface-2:     #EFF3F5;
  --color-text:          #152E3A;
  --color-text-muted:    #4a6572;
  --color-text-faint:    #8ca8b3; /* DECORATIVE / DISPLAY ONLY — fails AA on body */
  --color-accent:        #F5907C;
  --color-accent-2:      #7BCAD1;
  --color-border:        oklch(from var(--color-text) l c h / 0.12);
  --color-border-strong: oklch(from var(--color-text) l c h / 0.22);

  /* Logo variant visibility — flipped by theme + navbar state */
  --logo-light-display: none;
  --logo-dark-display:  block;

  /* Type — Poppins (locked) */
  --font-display: 'Poppins', sans-serif;
  --font-body:    'Poppins', sans-serif;

  /* Fluid type scale — clamp(min, preferred, max) */
  --text-xs:      0.75rem;
  --text-sm:      0.875rem;
  --text-base:    1rem;
  --text-lg:      clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-xl:      clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --text-2xl:     clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --text-3xl:     clamp(2rem, 1.6rem + 2vw, 2.75rem);
  --text-display: clamp(2.5rem, 1.8rem + 3.5vw, 4.25rem);

  --leading-tight: 1.1;
  --leading-snug:  1.25;
  --leading-base:  1.6;

  --tracking-tight: -0.02em;
  --tracking-base:  0;
  --tracking-wide:  0.08em;

  /* Spacing — fluid where useful, 8px base */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-8:  3rem;
  --space-10: clamp(3rem, 2.5rem + 2vw, 4rem);
  --space-12: clamp(4rem, 3rem + 4vw, 6rem);
  --space-16: clamp(5rem, 3.5rem + 6vw, 8rem);

  /* Radius */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-pill: 999px;

  /* Shadows — tinted with navy */
  --shadow-sm: 0 1px 2px oklch(from var(--color-navy) l c h / 0.06);
  --shadow-md: 0 6px 18px oklch(from var(--color-navy) l c h / 0.08);
  --shadow-lg: 0 18px 44px oklch(from var(--color-navy) l c h / 0.12);

  /* Layout primitives */
  --container-max: 1200px;
  --container-pad: clamp(1.25rem, 4vw, 3rem);
  --section-py:    clamp(3.5rem, 4rem + 4vw, 7rem);
  --navbar-height: 64px;

  /* Transitions */
  --t-fast: 0.18s ease;
  --t-base: 0.28s ease;
  --t-slow: 0.45s ease;
}

/* Manual override — applied by JS when user toggles theme */
[data-theme="dark"] {
  --color-bg:            #0d1f27;
  --color-surface:       #152E3A;
  --color-surface-2:     #1d3a47;
  --color-text:          #f0eeeb;
  --color-text-muted:    #9ebbc6;
  --color-text-faint:    #4a6572;
  --color-accent:        #F5907C;
  --color-accent-2:      #7BCAD1;
  --color-border:        oklch(from var(--color-text) l c h / 0.12);
  --color-border-strong: oklch(from var(--color-text) l c h / 0.22);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 18px 44px rgba(0, 0, 0, 0.55);

  --logo-light-display: block;
  --logo-dark-display:  none;
}

/* System preference fallback — applied when no manual override is set */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg:            #0d1f27;
    --color-surface:       #152E3A;
    --color-surface-2:     #1d3a47;
    --color-text:          #f0eeeb;
    --color-text-muted:    #9ebbc6;
    --color-text-faint:    #4a6572;
    --color-accent:        #F5907C;
    --color-accent-2:      #7BCAD1;
    --color-border:        oklch(from var(--color-text) l c h / 0.12);
    --color-border-strong: oklch(from var(--color-text) l c h / 0.22);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 18px 44px rgba(0, 0, 0, 0.55);

    --logo-light-display: block;
    --logo-dark-display:  none;
  }
}


/* ============================================================================
   02 — RESET & BASE
   ============================================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: var(--navbar-height);
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: var(--leading-base);
  background: var(--color-bg);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color var(--t-base), color var(--t-base);
  overflow-x: hidden;
}

img, svg, video {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

input, select, textarea {
  font: inherit;
  color: inherit;
}

ul, ol {
  list-style: none;
}

::selection {
  background: var(--color-coral);
  color: var(--color-navy);
}


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

:focus {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--color-coral);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--space-4);
  z-index: 200;
  padding: var(--space-3) var(--space-4);
  background: var(--color-navy);
  color: var(--color-white);
  font-size: var(--text-sm);
  font-weight: 500;
  border-radius: var(--radius-sm);
  transition: top var(--t-fast);
}

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

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


/* ============================================================================
   04 — LAYOUT PRIMITIVES
   ============================================================================ */
.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.section {
  padding-block: var(--section-py);
}

.section--tight {
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
}

.section--alt {
  background: var(--color-surface);
}

.section + .section {
  border-top: 1px solid var(--color-border);
}

.section--alt + .section--alt {
  border-top: 0;
}


/* ============================================================================
   05 — TYPOGRAPHY UTILITIES
   ============================================================================ */
.eyebrow {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}

.eyebrow::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 1px;
  background: var(--color-coral);
  vertical-align: middle;
  margin-right: var(--space-3);
  transform: translateY(-2px);
}

.eyebrow--teal::before {
  background: var(--color-teal);
}

.section-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  max-width: 36ch;
  margin-bottom: var(--space-3);
}

.section-title em {
  font-style: normal;
  color: var(--color-coral);
}

.section-lede {
  max-width: 62ch;
  color: var(--color-text-muted);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-8);
}

.display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-display);
  line-height: 1.04;
  letter-spacing: var(--tracking-tight);
}

.prose {
  max-width: 68ch;
  margin-inline: auto;
  font-size: var(--text-lg);
  line-height: 1.7;
  color: var(--color-text);
}

.prose > * + * {
  margin-top: var(--space-5);
}

.prose h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin-top: var(--space-10);
  margin-bottom: var(--space-3);
}

.prose h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  margin-top: var(--space-8);
  margin-bottom: var(--space-3);
}

.prose ul, .prose ol {
  padding-left: var(--space-5);
}

.prose ul {
  list-style: disc;
}

.prose ol {
  list-style: decimal;
}

.prose ul li, .prose ol li {
  margin-top: var(--space-3);
  padding-left: var(--space-2);
}

.prose strong {
  font-weight: 600;
  color: var(--color-text);
}

.prose a {
  color: var(--color-coral);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.prose a:hover {
  text-decoration-thickness: 2px;
}

.prose blockquote {
  border-left: 2px solid var(--color-coral);
  padding-left: var(--space-5);
  font-size: var(--text-xl);
  font-style: italic;
  color: var(--color-text-muted);
}


/* ============================================================================
   06 — BUTTONS
   ============================================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-sm);
  letter-spacing: 0.01em;
  line-height: 1;
  padding: 0.85rem 1.4rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform var(--t-fast), background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}

.btn .arrow {
  display: inline-block;
  transition: transform var(--t-fast);
}

.btn:hover .arrow {
  transform: translateX(3px);
}

.btn--primary {
  background: var(--color-coral);
  color: var(--color-navy);
}

.btn--primary:hover {
  transform: translateY(-1px);
  background: oklch(from var(--color-coral) calc(l + 0.04) c h);
}

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

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

.btn--ghost {
  background: transparent;
  color: var(--color-text);
  padding-inline: 0.5rem;
}

.btn--ghost:hover {
  color: var(--color-coral);
}

.btn--on-dark {
  color: var(--color-white);
}

.btn--on-dark.btn--secondary {
  border-color: oklch(from var(--color-white) l c h / 0.32);
}

.btn--on-dark.btn--secondary:hover {
  border-color: var(--color-white);
}

.btn--block {
  width: 100%;
  justify-content: center;
}


/* ============================================================================
   07 — FORMS
   ============================================================================ */
.form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.field__label {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--color-text-muted);
}

.field__label .req {
  color: var(--color-coral);
  margin-left: 2px;
}

.field__input,
.field__select,
.field__textarea {
  font-family: var(--font-body);
  font-size: var(--text-base);
  width: 100%;
  padding: 0.85rem 1rem;
  background: var(--color-bg);
  color: var(--color-text);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

.field__input::placeholder,
.field__textarea::placeholder {
  color: var(--color-text-faint);
}

.field__textarea {
  min-height: 140px;
  resize: vertical;
  line-height: 1.55;
}

.field__select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%234a6572' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}

[data-theme="dark"] .field__select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%239ebbc6' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}

.field__input:focus,
.field__select:focus,
.field__textarea:focus {
  outline: none;
  border-color: var(--color-coral);
  box-shadow: 0 0 0 3px oklch(from var(--color-coral) l c h / 0.18);
}

.field__help {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

.field--error .field__input,
.field--error .field__select,
.field--error .field__textarea {
  border-color: var(--color-coral);
}

.field__error {
  font-size: var(--text-xs);
  color: var(--color-coral);
  margin-top: var(--space-1);
}

.form__privacy {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-2);
}

.form__status {
  font-size: var(--text-sm);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  display: none;
}

.form__status--success {
  display: block;
  background: oklch(from var(--color-teal) l c h / 0.18);
  color: var(--color-text);
}

.form__status--error {
  display: block;
  background: oklch(from var(--color-coral) l c h / 0.18);
  color: var(--color-text);
}


/* ============================================================================
   08 — CARDS (generic)
   ============================================================================ */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-border-strong);
}

.card__tag {
  display: inline-block;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--color-teal);
  margin-bottom: var(--space-3);
}

.card__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-3);
}

.card__excerpt {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: 1.55;
  margin-bottom: var(--space-4);
  flex: 1;
}

.card__meta {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-faint);
}

.card__link {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}

.card__link:focus-visible {
  outline-offset: -4px;
}


/* ============================================================================
   09 — PILLS / DIVIDERS
   ============================================================================ */
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  font-weight: 500;
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border-strong);
  color: var(--color-text);
}

.pill--accent {
  background: var(--color-coral);
  color: var(--color-navy);
  border-color: transparent;
}

.pill--teal {
  background: oklch(from var(--color-teal) l c h / 0.18);
  color: var(--color-text);
  border-color: transparent;
}

.divider {
  width: 100%;
  height: 1px;
  background: var(--color-border);
  border: 0;
  margin-block: var(--space-6);
}

.divider--strong {
  background: var(--color-border-strong);
}


/* ============================================================================
   10 — NAVBAR
   ============================================================================ */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--navbar-height);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color var(--t-base), backdrop-filter var(--t-base), border-color var(--t-base);
}

.navbar__inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}

.navbar[data-scrolled="true"] {
  background: oklch(from var(--color-bg) l c h / 0.85);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom-color: var(--color-border);
}

.navbar--over-dark:not([data-scrolled="true"]) {
  --logo-light-display: block;
  --logo-dark-display:  none;
  color: var(--color-white);
}

.navbar--over-dark:not([data-scrolled="true"]) .navbar__link {
  color: var(--color-white);
}

.navbar--over-dark:not([data-scrolled="true"]) .btn--secondary {
  color: var(--color-white);
  border-color: oklch(from var(--color-white) l c h / 0.32);
}

.navbar--over-dark:not([data-scrolled="true"]) .btn--secondary:hover {
  border-color: var(--color-white);
}

.navbar--over-dark:not([data-scrolled="true"]) .theme-toggle {
  color: var(--color-white);
}

.navbar__logo {
  display: inline-flex;
  align-items: center;
}

.navbar__logo svg {
  height: 28px;
  width: auto;
}

.logo--light {
  display: var(--logo-light-display);
}

.logo--dark {
  display: var(--logo-dark-display);
}

.navbar__nav {
  display: flex;
  gap: var(--space-6);
  align-items: center;
}

.navbar__link {
  position: relative;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
  padding: var(--space-2) 0;
  transition: color var(--t-fast);
}

.navbar__link:hover {
  color: var(--color-coral);
}

.navbar__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--color-coral);
  border-radius: 2px;
}

.navbar__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.theme-toggle {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  color: var(--color-text);
  transition: background-color var(--t-fast), color var(--t-fast);
}

.theme-toggle:hover {
  background: oklch(from var(--color-text) l c h / 0.08);
}

.theme-toggle svg {
  width: 20px;
  height: 20px;
}

.theme-toggle__sun {
  display: none;
}

.theme-toggle__moon {
  display: block;
}

[data-theme="dark"] .theme-toggle__sun {
  display: block;
}

[data-theme="dark"] .theme-toggle__moon {
  display: none;
}

.navbar__menu-toggle {
  display: none;
  width: 40px;
  height: 40px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-radius: var(--radius-pill);
}

.navbar__menu-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
  transition: transform var(--t-fast), opacity var(--t-fast);
}

.navbar[data-menu-open="true"] .navbar__menu-toggle span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.navbar[data-menu-open="true"] .navbar__menu-toggle span:nth-child(2) {
  opacity: 0;
}

.navbar[data-menu-open="true"] .navbar__menu-toggle span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}


/* ============================================================================
   11 — FOOTER
   ============================================================================ */
.footer {
  background: var(--color-navy);
  color: var(--color-white);
  padding-block: clamp(3rem, 6vw, 5rem);
  margin-top: var(--space-16);
}

.footer__top {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  margin-bottom: var(--space-10);
}

.footer__brand .footer__logo svg {
  height: 32px;
  width: auto;
}

.footer__tagline {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 500;
  margin-top: var(--space-4);
  max-width: 28ch;
}

.footer__sub-tagline {
  font-size: var(--text-sm);
  color: oklch(from var(--color-white) l c h / 0.6);
  margin-top: var(--space-2);
  max-width: 32ch;
}

.footer__heading {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: oklch(from var(--color-white) l c h / 0.55);
  margin-bottom: var(--space-4);
  font-weight: 500;
}

.footer__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer__link {
  font-size: var(--text-sm);
  color: oklch(from var(--color-white) l c h / 0.85);
  transition: color var(--t-fast);
}

.footer__link:hover {
  color: var(--color-coral);
}

.footer__socials {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.footer__social-link {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  border: 1px solid oklch(from var(--color-white) l c h / 0.22);
  color: oklch(from var(--color-white) l c h / 0.85);
  transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}

.footer__social-link:hover {
  background: var(--color-coral);
  color: var(--color-navy);
  border-color: transparent;
}

.footer__social-link svg {
  width: 16px;
  height: 16px;
}

.footer__bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding-top: var(--space-5);
  border-top: 1px solid oklch(from var(--color-white) l c h / 0.12);
  font-size: var(--text-xs);
  color: oklch(from var(--color-white) l c h / 0.55);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}


/* ============================================================================
   12 — HERO
   ============================================================================ */
.hero {
  position: relative;
  min-height: clamp(560px, 92vh, 880px);
  background: var(--color-navy);
  color: var(--color-white);
  display: flex;
  align-items: center;
  padding-top: var(--navbar-height);
  overflow: hidden;
}

.hero__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 80% 20%, oklch(from var(--color-coral) l c h / 0.18), transparent 55%),
    radial-gradient(ellipse at 10% 80%, oklch(from var(--color-teal) l c h / 0.14), transparent 50%);
  opacity: 0.9;
}

.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(oklch(from var(--color-white) l c h / 0.04) 1px, transparent 1px),
    linear-gradient(90deg, oklch(from var(--color-white) l c h / 0.04) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse at center, black, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, black, transparent 75%);
}

.hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
  align-items: center;
  padding-block: clamp(3rem, 8vw, 6rem);
}

.hero__eyebrow {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-coral);
  margin-bottom: var(--space-5);
}

.hero__eyebrow::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 1px;
  background: var(--color-coral);
  vertical-align: middle;
  margin-right: var(--space-3);
  transform: translateY(-2px);
}

.hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-display);
  line-height: 1.04;
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-5);
  max-width: 18ch;
}

.hero__title em {
  font-style: normal;
  color: var(--color-coral);
}

.hero__lede {
  max-width: 56ch;
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: oklch(from var(--color-white) l c h / 0.78);
  margin-bottom: var(--space-8);
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.hero__stat-card {
  position: relative;
  margin-top: var(--space-8);
  background: oklch(from var(--color-white) l c h / 0.06);
  backdrop-filter: saturate(160%) blur(20px);
  -webkit-backdrop-filter: saturate(160%) blur(20px);
  border: 1px solid oklch(from var(--color-white) l c h / 0.18);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  max-width: 320px;
  box-shadow: var(--shadow-lg);
  z-index: 3;
}

.hero__stat-number {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-3xl);
  line-height: 1;
  color: var(--color-coral);
  margin-bottom: var(--space-2);
}

.hero__stat-label {
  font-size: var(--text-sm);
  color: oklch(from var(--color-white) l c h / 0.78);
  line-height: 1.45;
}


/* ============================================================================
   13 — SOCIAL PROOF BAR
   ============================================================================ */
.proof-bar {
  background: var(--color-surface);
  padding-block: clamp(1.75rem, 3vw, 2.5rem);
  border-bottom: 1px solid var(--color-border);
}

.proof-bar__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  align-items: center;
}

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

.proof-bar__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-2xl);
  line-height: 1;
  color: var(--color-text);
  letter-spacing: var(--tracking-tight);
}

.proof-bar__label {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}


/* ============================================================================
   14 — ABOUT SECTION
   ============================================================================ */
.about {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
  align-items: start;
}

.about__copy {
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--color-text);
}

.about__copy p + p {
  margin-top: var(--space-5);
}

.about__copy p:first-of-type {
  font-size: var(--text-xl);
  font-weight: 500;
  color: var(--color-text);
}

.about__copy p:not(:first-of-type) {
  color: var(--color-text-muted);
}

.about__visual {
  position: relative;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  padding: var(--space-8);
  border: 1px solid var(--color-border);
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.about__visual::before {
  content: "";
  position: absolute;
  inset: var(--space-3);
  border: 1px dashed oklch(from var(--color-coral) l c h / 0.35);
  border-radius: var(--radius-md);
  pointer-events: none;
}


/* ============================================================================
   15 — SERVICES PREVIEW (asymmetric)
   ============================================================================ */
.services-preview {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  min-height: 240px;
  transition: transform var(--t-base), border-color var(--t-base), box-shadow var(--t-base);
}

.service-card:hover {
  transform: translateY(-3px);
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-md);
}

.service-card__tag {
  display: inline-block;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--color-teal);
  margin-bottom: var(--space-3);
}

.service-card--feature .service-card__tag {
  color: var(--color-coral);
}

.service-card__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-3);
  color: var(--color-text);
}

.service-card--feature .service-card__title {
  font-size: var(--text-2xl);
  max-width: 18ch;
}

.service-card__body {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: 1.55;
  margin-bottom: var(--space-5);
  flex: 1;
}

.service-card__link {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-coral);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  transition: gap var(--t-fast);
}

.service-card__link:hover {
  gap: var(--space-3);
}

.service-card__cta-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}

.services-preview__cta {
  margin-top: var(--space-6);
  display: flex;
  justify-content: flex-start;
}

/* ---------- 8-service bento grid (replaces the uniform grid) ----------
   A true bento: the signature service (SEO/GEO/AEO) gets a genuinely larger
   featured cell, one service gets a wider cell to keep the grid edges clean,
   and the rest are standard. Every card shows an icon, tag, title, and a
   full (untruncated) description, so the grid has real weight at rest.
   Hover is pure lighting — border + ambient glow + arrow slide — so nothing
   ever appears/disappears and the grid can't reflow on interaction. */
.services-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}
@media (min-width: 560px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
  .svc-cell--featured { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .services-grid {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(188px, auto);
    grid-auto-flow: row dense;
  }
  /* Featured: 2 columns x 2 rows, top-left. The remaining cells auto-flow
     into the gaps around it (dense packing). */
  .svc-cell--featured { grid-column: 1 / 3; grid-row: 1 / 3; }
  /* Wide: spans 2 columns to close the bottom row cleanly. */
  .svc-cell--wide { grid-column: span 2; }
}

.svc-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-5);
  border-radius: var(--radius-md);
  border: 1px solid oklch(from var(--color-border) l c h / 0.7);
  background: oklch(from var(--color-surface) l c h / 0.45);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition:
    border-color var(--t-base),
    background var(--t-base),
    box-shadow var(--t-base),
    transform var(--t-base);
}
.svc-cell:hover,
.svc-cell:focus-visible {
  border-color: oklch(from var(--color-coral) l c h / 0.55);
  background: oklch(from var(--color-surface) l c h / 0.75);
  box-shadow: 0 0 0 1px oklch(from var(--color-coral) l c h / 0.12),
              0 18px 44px -18px oklch(from var(--color-coral) l c h / 0.35);
  transform: translateY(-2px);
}
.svc-cell:focus-visible {
  outline: 2px solid var(--color-coral);
  outline-offset: 2px;
}

/* Thin monochrome line icon per service */
.svc-cell__icon {
  display: inline-flex;
  color: var(--color-text-muted);
  transition: color var(--t-base);
  margin-bottom: var(--space-1);
}
.svc-cell__icon svg { width: 26px; height: 26px; }
.svc-cell:hover .svc-cell__icon,
.svc-cell:focus-visible .svc-cell__icon { color: var(--color-coral); }

.svc-cell__tag {
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--color-teal);
}
.svc-cell__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-lg);
  line-height: 1.2;
  color: var(--color-text);
  margin: 0;
}
.svc-cell__desc {
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--color-text-muted);
  margin: 0;
  /* Full description, wraps naturally — never truncated. */
  max-width: 42ch;
}
.svc-cell__arrow {
  margin-top: auto;
  padding-top: var(--space-3);
  color: var(--color-coral);
  font-size: 1.1rem;
  transition: transform var(--t-fast);
}
.svc-cell:hover .svc-cell__arrow,
.svc-cell:focus-visible .svc-cell__arrow {
  transform: translateX(6px);
}

/* Featured cell — the signature offering, visually elevated */
.svc-cell--featured {
  background:
    radial-gradient(120% 80% at 100% 0%, oklch(from var(--color-coral) l c h / 0.12), transparent 60%),
    oklch(from var(--color-surface) l c h / 0.6);
  border-color: oklch(from var(--color-coral) l c h / 0.28);
}
.svc-cell--featured .svc-cell__icon { color: var(--color-coral); }
.svc-cell--featured .svc-cell__icon svg { width: 34px; height: 34px; }
.svc-cell--featured .svc-cell__title { font-size: var(--text-2xl); }
.svc-cell--featured .svc-cell__desc { font-size: var(--text-base); max-width: 46ch; }

/* Citation pills — echo the hero Answer Engine panel motif */
.svc-cell__cites {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}
.svc-cell__cite {
  font-size: 0.6875rem;
  letter-spacing: 0.02em;
  color: var(--color-text-muted);
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid oklch(from var(--color-teal) l c h / 0.35);
  background: oklch(from var(--color-teal) l c h / 0.06);
}

@media (prefers-reduced-motion: reduce) {
  .svc-cell { transition: border-color var(--t-base), background var(--t-base); }
  .svc-cell:hover, .svc-cell:focus-visible { transform: none; }
}


/* ============================================================================
   16 — WHY US (numbered editorial list)
   ============================================================================ */
.why-us {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.pillar {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-border);
}

.pillar:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.pillar__num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  color: var(--color-coral);
}

.pillar__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
}

.pillar__body {
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--color-text-muted);
  max-width: 60ch;
}


/* ============================================================================
   17 — BLOG CARDS / BLOG INDEX
   ============================================================================ */
.blog-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

.blog-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: transform var(--t-base), border-color var(--t-base), box-shadow var(--t-base);
}

.blog-card:hover {
  transform: translateY(-3px);
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-md);
}

.blog-card__tag {
  display: inline-block;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--color-teal);
  margin-bottom: var(--space-4);
}

.blog-card__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-3);
  color: var(--color-text);
}

.blog-card__excerpt {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: 1.55;
  margin-bottom: var(--space-5);
  flex: 1;
}

.blog-card__meta {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-faint);
}

.blog-card__link {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}


/* ============================================================================
   18 — CONTACT (strip + page)
   ============================================================================ */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
  align-items: start;
}

.contact-form-wrap {
  background: var(--color-surface);
  padding: clamp(1.75rem, 4vw, 2.5rem);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.contact-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.contact-sidebar__block {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.contact-sidebar__heading {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: 500;
}

.contact-sidebar__email {
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--color-text);
  transition: color var(--t-fast);
}

.contact-sidebar__email:hover {
  color: var(--color-coral);
}

.contact-sidebar__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.contact-sidebar__list li {
  position: relative;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  padding-left: var(--space-4);
}

.contact-sidebar__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 8px;
  height: 1px;
  background: var(--color-coral);
}

.contact-sidebar__socials {
  display: flex;
  gap: var(--space-2);
}

.contact-sidebar__social {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border-strong);
  color: var(--color-text);
  transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}

.contact-sidebar__social:hover {
  background: var(--color-coral);
  color: var(--color-navy);
  border-color: transparent;
}

.contact-sidebar__social svg {
  width: 16px;
  height: 16px;
}


/* ============================================================================
   19 — SERVICES PAGE DETAIL BLOCKS
   ============================================================================ */
.service-detail {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  padding-block: var(--space-10);
  border-bottom: 1px solid var(--color-border);
}

.service-detail:last-of-type {
  border-bottom: 0;
}

.service-detail__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.service-detail__num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  color: var(--color-coral);
}

.service-detail__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.service-detail__one-liner {
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--color-coral);
  line-height: var(--leading-snug);
  max-width: 56ch;
}

.service-detail__body {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: 1.65;
  max-width: 62ch;
}

.service-detail__list-heading {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: 500;
  margin-bottom: var(--space-3);
}

.service-detail__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.service-detail__list li {
  position: relative;
  font-size: var(--text-base);
  color: var(--color-text);
  padding-left: var(--space-5);
  line-height: 1.55;
}

.service-detail__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 12px;
  height: 1px;
  background: var(--color-coral);
}

.service-detail__best-for {
  display: block;
  width: 100%;
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--color-text-muted);
}
.service-detail__best-for strong,
.service-detail__best-for b {
  color: var(--color-text);
}

/* ---------- Service FAQ accordion (native <details>, zero-JS) ---------- */
.service-detail__list-heading--faq {
  margin-top: var(--space-6);
}
.service-detail__faqs {
  margin-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}
.faq {
  border-bottom: 1px solid var(--color-border);
}
.faq__q {
  cursor: pointer;
  list-style: none;
  position: relative;
  padding: var(--space-4) var(--space-6) var(--space-4) 0;
  font-weight: 500;
  font-size: var(--text-base);
  color: var(--color-text);
  transition: color var(--t-fast);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.35em;
  line-height: 1;
  color: var(--color-coral);
}
.faq[open] .faq__q::after { content: "\2212"; }
.faq__q:hover { color: var(--color-coral); }
.faq__a {
  padding: 0 0 var(--space-4) 0;
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--color-text-muted);
}
.faq__a p { margin: 0; }


/* ============================================================================
   20 — BLOG ARTICLE PAGE
   ============================================================================ */
.article-header {
  padding-top: calc(var(--navbar-height) + var(--space-10));
  padding-bottom: var(--space-10);
  text-align: center;
}

.article-header__tag {
  display: inline-block;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--color-teal);
  margin-bottom: var(--space-4);
}

.article-header__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  max-width: 22ch;
  margin: 0 auto var(--space-5);
}

.article-header__meta {
  display: inline-flex;
  gap: var(--space-3);
  align-items: center;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.article-body {
  padding-bottom: var(--space-16);
}

.article-cta {
  max-width: 68ch;
  margin: var(--space-12) auto 0;
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-align: center;
}

.article-cta__text {
  font-size: var(--text-lg);
  font-style: italic;
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}


/* ============================================================================
   21 — SCROLL REVEAL ANIMATIONS
   ============================================================================ */
[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--t-slow), transform var(--t-slow);
  will-change: opacity, transform;
}

[data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

[data-reveal][data-reveal-delay="1"].is-revealed { transition-delay: 0.08s; }
[data-reveal][data-reveal-delay="2"].is-revealed { transition-delay: 0.16s; }
[data-reveal][data-reveal-delay="3"].is-revealed { transition-delay: 0.24s; }
[data-reveal][data-reveal-delay="4"].is-revealed { transition-delay: 0.32s; }


/* ============================================================================
   22 — RESPONSIVE
   ============================================================================ */

/* Tablet (768px and up) */
@media (min-width: 768px) {
  :root {
    --navbar-height: 72px;
  }

  .proof-bar__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
  }

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

  .about {
    grid-template-columns: 1.3fr 1fr;
    gap: var(--space-12);
  }

  .contact-layout {
    grid-template-columns: 1.4fr 1fr;
    gap: var(--space-10);
  }

  .service-detail {
    grid-template-columns: 1fr 1.4fr;
    gap: var(--space-8);
  }

  .service-detail__head {
    position: sticky;
    top: calc(var(--navbar-height) + var(--space-5));
    align-self: start;
  }

  .pillar {
    grid-template-columns: 80px 1fr 1.2fr;
    gap: var(--space-6);
    align-items: start;
  }

  .pillar__num {
    font-size: var(--text-xl);
  }

  .footer__top {
    grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  }

  .services-preview {
    grid-template-columns: 1.6fr 1fr;
    grid-template-areas:
      "feature small-1"
      "tall    small-2";
    gap: var(--space-5);
  }

  .service-card--feature {
    grid-area: feature;
  }

  .service-card--small-1 {
    grid-area: small-1;
  }

  .service-card--small-2 {
    grid-area: small-2;
  }

  .service-card--tall {
    grid-area: tall;
  }
}

/* Desktop (1024px and up) */
@media (min-width: 1024px) {
  .blog-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .hero__inner {
    grid-template-columns: 1.1fr 0.9fr;
    gap: var(--space-9);
    align-items: center;
  }

  .hero__stat-card {
    margin-top: 0;
    justify-self: end;
    align-self: end;
    margin-bottom: var(--space-6);
  }
}

/* Mobile-only overrides (below 768px) */
@media (max-width: 767px) {
  .navbar__nav {
    position: fixed;
    top: var(--navbar-height);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-5) var(--container-pad);
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    transform: translateY(-110%);
    visibility: hidden;
    transition: transform var(--t-base), visibility 0s linear var(--t-base);
    z-index: -1;
  }

  .navbar[data-menu-open="true"] .navbar__nav {
    transform: translateY(0);
    visibility: visible;
    transition: transform var(--t-base);
  }

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

  .navbar__actions .btn--primary {
    display: none;
  }

  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }

  .pillar {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }
}


/* ============================================================================
   23 — RECEIPTS REDESIGN — homepage-specific components
   Mesh background, typewriter cursor, AI citation cards, sparklines,
   editorial chrome (section markers + marginalia)
   ============================================================================ */

/* Force the homepage to render in dark mode regardless of system preference,
   unless the user explicitly toggles to light. The body class is set in HTML. */
.page--cinematic-dark {
  --color-bg:            #0a1820;
  --color-surface:       #152E3A;
  --color-surface-2:     #1d3a47;
  --color-text:          #f0eeeb;
  --color-text-muted:    #9ebbc6;
  --color-text-faint:    #5a7a87;
  --color-border:        oklch(from var(--color-text) l c h / 0.10);
  --color-border-strong: oklch(from var(--color-text) l c h / 0.20);
  --logo-light-display:  block;
  --logo-dark-display:   none;
}

/* User-toggled light mode on a cinematic-dark page — restore light tokens */
[data-theme="light"].page--cinematic-dark,
.page--cinematic-dark[data-theme="light"] {
  --color-bg:            #FFFFFF;
  --color-surface:       #F8F9FA;
  --color-surface-2:     #EFF3F5;
  --color-text:          #152E3A;
  --color-text-muted:    #4a6572;
  --color-text-faint:    #8ca8b3;
  --color-border:        oklch(from var(--color-text) l c h / 0.12);
  --color-border-strong: oklch(from var(--color-text) l c h / 0.22);
  --logo-light-display:  none;
  --logo-dark-display:   block;
}

/* ---------- Animated mesh gradient (hero only) ---------- */
.mesh-bg {
  position: absolute;
  inset: -10%;
  z-index: 0;
  pointer-events: none;
  filter: blur(60px) saturate(140%);
  opacity: 0.55;
  background:
    radial-gradient(ellipse 60% 50% at 20% 30%, #F5907C 0%, transparent 60%),
    radial-gradient(ellipse 55% 45% at 80% 20%, #7BCAD1 0%, transparent 55%),
    radial-gradient(ellipse 50% 55% at 70% 80%, #152E3A 0%, transparent 50%),
    radial-gradient(ellipse 65% 50% at 30% 75%, #F5907C 0%, transparent 55%),
    radial-gradient(ellipse 45% 45% at 55% 55%, #7BCAD1 0%, transparent 45%);
  background-size: 200% 200%;
  animation: mesh-drift 38s ease-in-out infinite;
}
@keyframes mesh-drift {
  0%   { background-position: 0% 0%, 100% 0%, 100% 100%, 0% 100%, 50% 50%; }
  25%  { background-position: 30% 20%, 70% 30%, 80% 70%, 20% 80%, 40% 60%; }
  50%  { background-position: 60% 40%, 40% 60%, 60% 40%, 40% 60%, 55% 45%; }
  75%  { background-position: 30% 70%, 70% 80%, 30% 20%, 70% 30%, 45% 55%; }
  100% { background-position: 0% 0%, 100% 0%, 100% 100%, 0% 100%, 50% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .mesh-bg { animation: none; }
}

/* Subtle baseline grid in hero — sits on top of mesh, very faint, slow pan for life */
.hero-grid {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    linear-gradient(oklch(from var(--color-text) l c h / 0.04) 1px, transparent 1px),
    linear-gradient(90deg, oklch(from var(--color-text) l c h / 0.04) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
  animation: hero-grid-pan 60s linear infinite;
}
@keyframes hero-grid-pan {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 80px 80px, 80px 80px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-grid { animation: none; }
}

/* ---------- Editorial section markers (e.g. "01 / 07 — HERO") ---------- */
.section-marker {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin-bottom: var(--space-6);
}
.section-marker__num {
  color: var(--color-coral);
  font-feature-settings: "tnum";
}
.section-marker__rule {
  flex: 1;
  height: 1px;
  background: var(--color-border);
  max-width: 80px;
}
.section-marker__label { color: var(--color-text-muted); }

/* ---------- Editorial marginalia (italic, small, hangs in margin) ---------- */
.marginalia {
  position: relative;
  display: inline-block;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-xs);
  font-weight: 400;
  color: var(--color-coral);
  letter-spacing: 0;
  line-height: 1.4;
  max-width: 22ch;
}
.marginalia::before {
  content: "↳";
  margin-right: 0.4em;
  font-style: normal;
  opacity: 0.7;
}

/* ---------- Typewriter cursor (hero headline) ---------- */
.typewriter-cursor {
  display: inline-block;
  width: 0.08em;
  height: 0.85em;
  background: var(--color-coral);
  margin-left: 0.04em;
  vertical-align: -0.08em;
  animation: cursor-blink 1.05s steps(2) infinite;
}
@keyframes cursor-blink {
  to { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .typewriter-cursor { animation: none; opacity: 0; }
}
/* Hide cursor once typewriter finishes */
.typewriter--done .typewriter-cursor { display: none; }

/* ---------- AI citation card (signature recurring motif) ---------- */
.citation-card {
  position: relative;
  background: oklch(from var(--color-surface) l c h / 0.55);
  backdrop-filter: saturate(160%) blur(24px);
  -webkit-backdrop-filter: saturate(160%) blur(24px);
  border: 1px solid oklch(from var(--color-text) l c h / 0.10);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  box-shadow: var(--shadow-md);
  font-family: var(--font-body);
}
/* Gentle floating breath — hero card only, subtle, respects reduced motion */
@media (prefers-reduced-motion: no-preference) {
  .hero .citation-card {
    animation: card-float 7s ease-in-out infinite;
  }
  .hero .citation-card__dot {
    animation: dot-pulse 2.6s ease-in-out infinite;
  }
}
@keyframes card-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
@keyframes dot-pulse {
  0%, 100% { box-shadow: 0 0 8px var(--color-coral); opacity: 0.9; }
  50%      { box-shadow: 0 0 16px var(--color-coral); opacity: 1; }
}
.citation-card__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}
.citation-card__dot {
  width: 7px; height: 7px;
  border-radius: var(--radius-pill);
  background: var(--color-coral);
  box-shadow: 0 0 12px var(--color-coral);
  flex-shrink: 0;
}
.citation-card__body {
  font-size: var(--text-base);
  line-height: 1.55;
  color: var(--color-text);
  margin-bottom: var(--space-4);
}
.citation-card__body strong {
  color: var(--color-coral);
  font-weight: 600;
}
.citation-card__sources {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px dashed oklch(from var(--color-text) l c h / 0.12);
}
.citation-source {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 8px;
  background: oklch(from var(--color-text) l c h / 0.06);
  border: 1px solid oklch(from var(--color-text) l c h / 0.08);
  border-radius: var(--radius-pill);
  font-size: 0.6875rem;
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
  transition: background-color var(--t-fast), color var(--t-fast);
}
.citation-source:hover {
  background: oklch(from var(--color-coral) l c h / 0.12);
  color: var(--color-text);
}
.citation-source__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px; height: 16px;
  border-radius: var(--radius-pill);
  background: var(--color-coral);
  color: var(--color-navy);
  font-size: 0.625rem;
  font-weight: 600;
}

/* ---------- Sparkline (proof bar) ---------- */
.sparkline {
  width: 100%;
  height: 32px;
  margin-top: var(--space-3);
  opacity: 0.85;
}
.sparkline path { stroke: var(--color-coral); stroke-width: 1.5; fill: none; }
.sparkline circle { fill: var(--color-coral); }

/* ---------- Hero-specific overrides for the new design ---------- */
.hero--cinematic {
  background: var(--color-bg);
  min-height: clamp(640px, 96vh, 920px);
}
.hero--cinematic .hero__inner {
  position: relative;
  z-index: 2;
}
.hero--cinematic .hero__title {
  font-size: clamp(2.1rem, 4.6vw, 4.1rem);
  letter-spacing: -0.03em;
  line-height: 1.08;
  font-weight: 700;
  max-width: 21ch;
  color: var(--color-text);
  margin-bottom: var(--space-6);
  /* Option B, done properly: min-height is built from the EXACT SAME
     clamp() expression that drives font-size, multiplied by line-height and
     the true line count needed at that width — so the reserved space
     tracks the font continuously (every intermediate pixel, not just at a
     few sampled breakpoints) and can never fall out of sync with it. This
     also means the clamp()'s own floor (below ~730px, font pinned at
     2.1rem) and ceiling (above ~1426px, font pinned at 4.1rem) are handled
     automatically — no special-casing needed, since min-height clamps in
     lockstep with the font.
     The only thing that still needs consideration is the LINE COUNT
     itself. Dense testing (every 10px, all four phrases checked
     individually, not just the tallest) found that the longest phrase
     ("pipeline, not promises.") needs 3 lines across the entire viewport
     range — on mobile it's an intermittent flicker (whether "not" fits on
     the same line as "pipeline," at that exact width, a genuine CSS
     text-wrapping phenomenon, not a formula error), and from 1024px the
     hero switches to a two-column grid (narrowing the text column) which
     needs 3 lines outright. Since both regions land on the same line
     count, no breakpoint is needed at all — one formula covers the full
     range. Verified with zero failures across 225 sample points, every
     10px from 320–2560px, checked per-phrase. */
  min-height: calc(clamp(2.1rem, 4.6vw, 4.1rem) * 1.08 * 3 + 4px);
}
.hero--cinematic .hero__title em {
  font-style: italic;
  color: var(--color-coral);
  font-weight: 700;
}
/* Rotating headline ending — hidden until the prefix finishes typing
   (JS reveals it at the right moment), always visible if the visitor
   has reduced motion turned on (noscript fallback covers no-JS too). */
.hero__title-rotator {
  visibility: hidden;
  /* The typewriter JS trims trailing whitespace from the prefix text before
     typing, which would otherwise collapse "the" and the rotating word
     together with no gap. Guarantee the space here instead. */
  margin-left: 0.28em;
}
@media (prefers-reduced-motion: reduce) {
  .hero__title-rotator { visibility: visible; }
}
.hero--cinematic .hero__lede {
  color: oklch(from var(--color-text) l c h / 0.72);
  font-size: clamp(var(--text-base), 1.5vw, 1.25rem);
  max-width: 52ch;
}

/* Magnetic-feeling primary CTA on the hero */
.btn--magnetic {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.btn--magnetic::after {
  content: "";
  position: absolute;
  inset: 0;
  background: oklch(from var(--color-coral) calc(l + 0.06) c h);
  z-index: -1;
  transform: translateY(101%);
  transition: transform var(--t-base);
}
.btn--magnetic:hover::after { transform: translateY(0); }

/* ---------- About visual — CSS "Operating System" diagram (vertical layered stack) ---------- */
.os-stack {
  width: 100%;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}
.os-stack__eyebrow {
  font-size: 0.625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  font-weight: 500;
  text-align: center;
  margin-bottom: var(--space-4);
}
.os-stack__caption {
  font-size: 0.75rem;
  font-style: italic;
  color: var(--color-text-faint);
  text-align: center;
  margin-top: var(--space-4);
}

/* A layer in the stack */
.os-layer {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: oklch(from var(--color-surface-2) l c h / 0.6);
  overflow: hidden;
}
.os-layer__tier {
  font-size: 0.5625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  font-weight: 500;
}
.os-layer__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-lg);
  color: var(--color-text);
  line-height: 1.15;
}
.os-layer__note {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

/* Substrate — quietest, raw compute at the bottom */
.os-layer--substrate {
  opacity: 0.72;
}

/* Kernel — the human decision layer, mid emphasis with a teal accent edge */
.os-layer--kernel {
  border-color: oklch(from var(--color-teal) l c h / 0.4);
  background: oklch(from var(--color-teal) l c h / 0.07);
}
.os-layer--kernel .os-layer__tier { color: var(--color-teal); }

/* Surface — the payoff, coral-emphasized and visually dominant */
.os-layer--surface {
  border-color: oklch(from var(--color-coral) l c h / 0.55);
  background: oklch(from var(--color-coral) l c h / 0.12);
  box-shadow:
    0 0 0 1px oklch(from var(--color-coral) l c h / 0.15),
    0 8px 28px -12px oklch(from var(--color-coral) l c h / 0.5);
  padding-block: var(--space-5);
}
.os-layer--surface .os-layer__tier { color: var(--color-coral); }
.os-layer--surface .os-layer__name {
  font-size: var(--text-xl);
  color: var(--color-coral);
}

/* Flow connector between layers — a visible channel that carries the pulse
   upward. The rail itself is always shown (structural); the travelling pulse
   is motion, gated behind prefers-reduced-motion below. */
.os-flow {
  position: relative;
  align-self: center;
  width: 3px;
  height: 34px;
  border-radius: 2px;
  background: linear-gradient(
    to top,
    oklch(from var(--color-teal) l c h / 0.3),
    oklch(from var(--color-coral) l c h / 0.35)
  );
}

/* Ambient upward data-flow — a bright comet rises through each connector and
   each layer flashes as the signal arrives, so the stack reads as live
   processing rather than a static diagram. Disabled under reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .os-flow::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 5px;
    height: 18px;
    transform: translate(-50%, 6px);
    border-radius: 3px;
    /* comet: bright hot tip at the top, fading tail at the bottom */
    background: linear-gradient(
      to top,
      transparent,
      oklch(from var(--color-coral) l c h / 0.6) 55%,
      #ffffff
    );
    box-shadow:
      0 0 10px 2px oklch(from var(--color-coral) l c h / 0.9),
      0 0 22px 5px oklch(from var(--color-coral) l c h / 0.45);
    opacity: 0;
  }
  /* Both rails run the same rise; the lower connector (nth-of-type 3, between
     substrate and kernel) fires first, the upper (nth-of-type 2, between
     kernel and surface) is delayed half a cycle so the signal reads as one
     continuous rise from the bottom of the stack to the top. */
  .about__visual.is-revealed .os-flow::after {
    animation: os-rise 2.6s linear infinite;
  }
  .about__visual.is-revealed .os-flow:nth-of-type(2)::after {
    animation-delay: 1.3s;
  }
  /* Layers flash as the signal reaches them: kernel (teal) at ~40% of the
     cycle, surface (coral) near the end, matching each pulse's arrival. */
  .about__visual.is-revealed .os-layer--kernel {
    animation: os-kernel-glow 2.6s ease-in-out infinite;
  }
  .about__visual.is-revealed .os-layer--surface {
    animation: os-surface-glow 2.6s ease-in-out infinite;
  }
}
@keyframes os-rise {
  0%   { opacity: 0; transform: translate(-50%, 6px); }
  10%  { opacity: 1; }
  40%  { opacity: 1; transform: translate(-50%, -34px); }
  48%  { opacity: 0; transform: translate(-50%, -36px); }
  100% { opacity: 0; transform: translate(-50%, -36px); }
}
@keyframes os-kernel-glow {
  0%, 28%, 56%, 100% {
    border-color: oklch(from var(--color-teal) l c h / 0.4);
    box-shadow: 0 0 0 0 transparent;
  }
  42% {
    border-color: oklch(from var(--color-teal) l c h / 0.9);
    box-shadow: 0 0 22px -2px oklch(from var(--color-teal) l c h / 0.6);
  }
}
@keyframes os-surface-glow {
  0%, 76%, 100% {
    border-color: oklch(from var(--color-coral) l c h / 0.55);
    box-shadow:
      0 0 0 1px oklch(from var(--color-coral) l c h / 0.15),
      0 8px 28px -12px oklch(from var(--color-coral) l c h / 0.5);
  }
  90% {
    border-color: oklch(from var(--color-coral) l c h / 1);
    box-shadow:
      0 0 0 1px oklch(from var(--color-coral) l c h / 0.45),
      0 0 32px -2px oklch(from var(--color-coral) l c h / 0.85),
      0 8px 34px -8px oklch(from var(--color-coral) l c h / 0.9);
  }
}

/* ---------- Service feature card — signature glass treatment (badge removed) ---------- */
.service-card--as-citation {
  background: oklch(from var(--color-surface) l c h / 0.6);
  backdrop-filter: saturate(140%) blur(18px);
  -webkit-backdrop-filter: saturate(140%) blur(18px);
  border-color: oklch(from var(--color-coral) l c h / 0.25);
}

/* ---------- Pillar marginalia override (for the "this is the unusual one" note) ---------- */
.pillar__marginalia {
  display: block;
  margin-top: var(--space-3);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-sm);
  color: var(--color-coral);
  letter-spacing: 0;
}
.pillar__marginalia::before {
  content: "↳ ";
  font-style: normal;
}

/* ---------- Blog cards as essays (essay metadata: word count, last edited) ---------- */
.blog-card__meta--essay {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-size: 0.6875rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}
.blog-card__meta--essay span + span { position: relative; padding-left: var(--space-3); }
.blog-card__meta--essay span + span::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 2px; height: 2px; border-radius: 50%;
  background: var(--color-text-faint); transform: translateY(-50%);
}

/* ---------- Contact form re-framed as "send a brief" ---------- */
.brief-frame {
  position: relative;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: oklch(from var(--color-surface) l c h / 0.5);
  padding: clamp(1.75rem, 4vw, 2.5rem);
}
.brief-frame::before {
  content: "Start Your Project";
  position: absolute;
  top: -10px;
  left: var(--space-5);
  background: var(--color-bg);
  padding: 2px 10px;
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  font-weight: 500;
  color: var(--color-coral);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
}


/* ============================================================================
   24 — SUPPORTING CLASSES for inner pages (footer cols, article, contact)
   ============================================================================ */

/* Footer link columns — grid children of .footer__top (present on every page) */
.footer__col {
  display: flex;
  flex-direction: column;
}

/* Narrow container for long-form reading (blog posts) */
.container--narrow {
  max-width: 720px;
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* Article wrapper */
.article {
  padding-bottom: var(--space-12);
}
.article-header__back {
  display: inline-block;
  margin-bottom: var(--space-6);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  transition: color var(--t-fast);
}
.article-header__back:hover { color: var(--color-coral); }

/* Optional-field marker in forms */
.field__optional {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--color-text-faint);
  letter-spacing: 0.02em;
}

/* Service-detail content column (grid child; base wrapper only) */
.service-detail__content {
  display: block;
}


/* ============================================================================
   25 — ANSWER-ENGINE HERO PANEL (signature element)
   The site behaves like the AI answers Twigs&Ink helps clients get cited in.
   ============================================================================ */
.answer-engine {
  position: relative;
  width: 100%;
  max-width: 440px;
  justify-self: end;
  background: oklch(from var(--color-surface) l c h / 0.55);
  backdrop-filter: saturate(160%) blur(24px);
  -webkit-backdrop-filter: saturate(160%) blur(24px);
  border: 1px solid oklch(from var(--color-text) l c h / 0.12);
  border-radius: var(--radius-lg);
  box-shadow:
    var(--shadow-lg),
    0 0 40px -12px oklch(from var(--color-coral) l c h / 0.28),
    0 0 60px -20px oklch(from var(--color-teal) l c h / 0.22);
  overflow: hidden;
}
/* Premium gradient glow border — coral -> teal (brand colours only) */
.answer-engine::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg,
    oklch(from var(--color-coral) l c h / 0.55) 0%,
    transparent 40%,
    transparent 60%,
    oklch(from var(--color-teal) l c h / 0.55) 100%);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}
@media (prefers-reduced-motion: no-preference) {
  .hero .answer-engine { animation: card-float 7s ease-in-out infinite; }
}

/* Top bar — browser/app chrome feel */
.answer-engine__bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid oklch(from var(--color-text) l c h / 0.08);
  background: oklch(from var(--color-text) l c h / 0.03);
}
.answer-engine__dot {
  width: 10px; height: 10px; border-radius: 50%;
  flex-shrink: 0;
}
.answer-engine__dot--r { background: #F5907C; }
.answer-engine__dot--y { background: #E7C86B; }
.answer-engine__dot--g { background: #7BCAD1; }
.answer-engine__label {
  margin-left: auto;
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  font-weight: 500;
}

.answer-engine__body { padding: var(--space-5); }

/* Query row */
.answer-engine__query {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding-bottom: var(--space-4);
}
.answer-engine__query-icon {
  flex-shrink: 0;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: oklch(from var(--color-coral) l c h / 0.14);
  color: var(--color-coral);
}
.answer-engine__query-icon svg { width: 15px; height: 15px; }
.answer-engine__query-text {
  font-size: 1rem;
  line-height: 1.45;
  color: var(--color-text);
  font-weight: 500;
  min-height: 1.45em;
}
/* Blinking caret used while the query "types" (added via JS) */
.answer-engine__query-text.is-typing::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1.05em;
  margin-left: 1px;
  vertical-align: -0.15em;
  background: var(--color-coral);
  animation: cursor-blink 1.05s steps(2) infinite;
}

/* Answer block */
.answer-engine__answer {
  border-top: 1px dashed oklch(from var(--color-text) l c h / 0.12);
  padding-top: var(--space-4);
}
.answer-engine__answer[hidden] { display: none; }

/* Thinking dots */
.answer-engine__thinking {
  display: flex;
  gap: 5px;
  padding: var(--space-2) 0;
}
.answer-engine__thinking span {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--color-coral);
  opacity: 0.4;
}
@media (prefers-reduced-motion: no-preference) {
  .answer-engine__thinking span {
    animation: ae-think 1.2s ease-in-out infinite;
  }
  .answer-engine__thinking span:nth-child(2) { animation-delay: 0.2s; }
  .answer-engine__thinking span:nth-child(3) { animation-delay: 0.4s; }
}
@keyframes ae-think {
  0%, 100% { opacity: 0.3; transform: translateY(0); }
  50%      { opacity: 1;   transform: translateY(-3px); }
}
.answer-engine__thinking[hidden] { display: none; }

.answer-engine__answer-text {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-text);
  margin: 0 0 var(--space-4);
}
.answer-engine__answer-text strong { color: var(--color-coral); font-weight: 600; }

/* Reveal transition for answer text + sources */
.answer-engine__answer-text,
.answer-engine__sources {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.answer-engine.is-answered .answer-engine__answer-text,
.answer-engine.is-answered .answer-engine__sources {
  opacity: 1;
  transform: translateY(0);
}
.answer-engine.is-answered .answer-engine__sources { transition-delay: 0.15s; }

/* Source chips */
.answer-engine__sources {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.answer-engine__source {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 6px;
  background: oklch(from var(--color-text) l c h / 0.06);
  border: 1px solid oklch(from var(--color-text) l c h / 0.08);
  border-radius: var(--radius-pill);
  font-size: 0.6875rem;
  color: var(--color-text-muted);
  transition: background-color var(--t-fast), color var(--t-fast);
}
.answer-engine__source:hover {
  background: oklch(from var(--color-coral) l c h / 0.12);
  color: var(--color-text);
}
.answer-engine__source-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--color-coral);
  color: var(--color-navy);
  font-size: 0.625rem;
  font-weight: 600;
}

.answer-engine__caption {
  padding: 0 var(--space-5) var(--space-4);
  font-size: 0.6875rem;
  font-style: italic;
  color: var(--color-text-faint);
  line-height: 1.4;
}


/* ============================================================================
   27 — COOKIE CONSENT BAR
   ============================================================================ */
.cookie-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 250;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--container-pad);
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -8px 24px -8px oklch(0% 0 0 / 0.3);
  transform: translateY(100%);
  transition: transform var(--t-base);
}
.cookie-bar--visible { transform: translateY(0); }
.cookie-bar__text {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  max-width: 60ch;
}
.cookie-bar__text a { color: var(--color-coral); }
.cookie-bar__btn { flex-shrink: 0; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
  .cookie-bar { transition: none; }
}


/* ============================================================================
   28 — LANDING PAGE (paid ads) — scoped, reuses theme tokens
   ============================================================================ */
.lp-header {
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--color-border);
}
.lp-header__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}
.lp-logo { display: inline-flex; }
.lp-logo svg { height: 30px; width: auto; }

/* Hero: pitch + form side by side */
.lp-hero { padding: clamp(2.5rem, 6vw, 5rem) 0; }
.lp-hero__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-9);
  align-items: center;
}
@media (min-width: 940px) {
  .lp-hero__inner { grid-template-columns: 1.05fr 0.95fr; }
}
.lp-eyebrow {
  display: inline-block;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-teal);
  font-weight: 500;
  margin-bottom: var(--space-4);
}
.lp-hero__title {
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--space-5);
}
.lp-hero__title-accent { color: var(--color-coral); display: block; }
.lp-hero__lede {
  font-size: clamp(var(--text-base), 1.4vw, 1.15rem);
  color: oklch(from var(--color-text) l c h / 0.72);
  max-width: 52ch;
  margin-bottom: var(--space-6);
}
.lp-points {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.lp-points li {
  position: relative;
  padding-left: var(--space-6);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}
.lp-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 14px;
  height: 8px;
  border-left: 2px solid var(--color-coral);
  border-bottom: 2px solid var(--color-coral);
  transform: rotate(-45deg);
}

/* Form card */
.lp-form-card {
  background: oklch(from var(--color-surface) l c h / 0.6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  box-shadow: var(--shadow-lg);
}
.lp-form-card__title {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--space-2);
}
.lp-form-card__sub {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-5);
}
.lp-form-card__privacy {
  font-size: 0.75rem;
  color: var(--color-text-faint);
  margin-top: var(--space-4);
  text-align: center;
}
.lp-form-card__privacy a { color: var(--color-coral); }

/* Value strip */
.lp-value {
  padding: clamp(2.5rem, 5vw, 4rem) 0;
  border-top: 1px solid var(--color-border);
  background: oklch(from var(--color-surface) l c h / 0.35);
}
.lp-value__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
@media (min-width: 768px) {
  .lp-value__inner { grid-template-columns: repeat(3, 1fr); }
}
.lp-value__title {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-coral);
  margin-bottom: var(--space-3);
}
.lp-value__text { color: var(--color-text-muted); font-size: var(--text-sm); line-height: 1.7; }

/* Repeat CTA */
.lp-cta {
  padding: clamp(3rem, 6vw, 5rem) 0;
  text-align: center;
  border-top: 1px solid var(--color-border);
}
.lp-cta__inner {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 var(--container-pad);
}
.lp-cta__title {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-text);
  margin-bottom: var(--space-4);
}
.lp-cta__text { color: var(--color-text-muted); margin-bottom: var(--space-6); }

/* Footer */
.lp-footer {
  padding: var(--space-6) 0;
  border-top: 1px solid var(--color-border);
}
.lp-footer__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.lp-footer__brand { font-family: var(--font-display); font-weight: 700; color: var(--color-text); }
.lp-footer__legal { font-size: var(--text-sm); color: var(--color-text-faint); }
.lp-footer__legal a { color: var(--color-coral); }


/* ============================================================================
   END OF FILE
   ============================================================================ */