/* Twigs&Ink | css/styles.css | v1.6 | Updated 2026-08-14 | 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;
}


/* ============================================================================
   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);
}


/* ============================================================================
   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);
  /* Reserve space for the tallest rotating phrase so shorter phrases leave
     quiet space below instead of collapsing the box and shoving the content
     under it up and down. Recalculated after widening the column + shrinking
     the font — measured live in-browser against the tallest phrase
     ("leader who wants receipts, not reports."), plus buffer. */
  min-height: 156px;
}
.hero--cinematic .hero__title em {
  font-style: italic;
  color: var(--color-coral);
  font-weight: 700;
}
/* CLS fix — reserve the tallest-phrase height at each breakpoint. */
@media (min-width: 768px) {
  .hero--cinematic .hero__title { min-height: 190px; }
}
@media (min-width: 1024px) {
  .hero--cinematic .hero__title { min-height: 300px; }
}
/* 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 vertical seam that carries the pulse upward */
.os-flow {
  position: relative;
  align-self: center;
  width: 2px;
  height: var(--space-5);
  background: linear-gradient(
    to top,
    oklch(from var(--color-teal) l c h / 0.5),
    oklch(from var(--color-coral) l c h / 0.5)
  );
  opacity: 0.6;
}

/* Ambient upward pulse — a bright node that rises through each connector.
   Slow, calm, on a long loop. Disabled entirely under reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .os-flow::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    transform: translateX(-50%);
    background: var(--color-coral);
    box-shadow: 0 0 8px 1px oklch(from var(--color-coral) l c h / 0.7);
    opacity: 0;
  }
  .about__visual.is-revealed .os-flow::after {
    animation: os-rise 4.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  }
  /* Stagger the two connectors so the pulse reads as one signal travelling up.
     Spans in .os-stack by type order: eyebrow(1), flow(2), flow(3), caption(4).
     The upper connector is the 3rd span; delay it after the lower one. */
  .about__visual.is-revealed .os-flow:nth-of-type(3)::after {
    animation-delay: 0.6s;
  }
  .about__visual.is-revealed .os-layer--surface {
    animation: os-surface-glow 4.5s ease-in-out infinite;
  }
}
@keyframes os-rise {
  0%   { opacity: 0; transform: translate(-50%, 4px); }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -22px); }
}
@keyframes os-surface-glow {
  0%, 100% {
    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);
  }
  50% {
    box-shadow:
      0 0 0 1px oklch(from var(--color-coral) l c h / 0.3),
      0 10px 34px -10px oklch(from var(--color-coral) l c h / 0.75);
  }
}

/* ---------- 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
   ============================================================================ */