/* =========================================================
   Schartner Outdoor Works - Modern Luxe Evergreen System Styles (Refined)
   File: /css/styles.css
   Notes:
   - Mobile-first
   - Animations: transform + opacity only
   - Accessible focus styles
   - Component-first (page-specific tweaks later)
   - Safe reveal: content visible unless html.js exists
========================================================= */

/* -----------------------------
   0) Design Tokens
----------------------------- */
:root {
  /* Colors (remapped to Modern Luxe Evergreen) */
  --bg: #F6F6F2;           /* paper */
  --surface: #FFFFFF;      /* crisp card surface */
  --surface-2: #F1F2ED;    /* warm tinted surface */
  --text: #0B0D0C;         /* ink */
  --muted: #4B524E;
  --muted-2: #707A74;

  /* Borders */
  --border: rgba(11, 13, 12, 0.12);
  --border-2: rgba(11, 13, 12, 0.18);

  /* Useful rgb helpers for translucent layers */
  --shadow-color: 11, 13, 12;
  --surface-rgb: 255, 255, 255;
  --accent-rgb: 15, 61, 46;

  /* Brand neutrals */
  --ink: #0B0D0C;
  --paper: #F6F6F2;

  /* Brand accents */
  --accent: #0F3D2E;       /* evergreen */
  --accent-dark: #0A2A20;  /* deep evergreen */
  --accent-2: #8FA79A;     /* sage */
  --accent-soft: #E7EFEA;  /* sage tint wash */

  /* Warm neutral + luxury detail */
  --sand: #E9E1D3;
  --gold: #B79A57;
  --gold-soft: #F3EBDD;

  /* Functional */
  --success: #0F6B45;
  --warning: #8A6A1F;
  --danger: #8A2E2E;
  --info: #1F3E77;

  /* Focus (evergreen ring) */
  --focus: rgba(15, 61, 46, 0.38);

  /* Sizing */
  --container: 1100px;

  /* Spacing (8px grid) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 40px;
  --s-9: 56px;
  --s-10: 72px;

  /* Radius */
  --r-1: 10px;
  --r-2: 14px;
  --r-3: 18px;

  /* Added radii (safe additions) */
  --radius-pill: 999px;
  --radius-card: var(--r-3);
  --radius-soft: var(--r-2);

  /* Added strokes (safe additions) */
  --stroke-soft: rgba(11, 13, 12, 0.10);
  --stroke-strong: rgba(11, 13, 12, 0.18);

  /* Added glass tokens */
  --glass-bg: rgba(246, 246, 242, 0.70);
  --glass-border: rgba(11, 13, 12, 0.10);

  /* Shadows (base + richer depth) */
  --sh-1: 0 10px 28px rgba(var(--shadow-color), 0.10);
  --sh-2: 0 18px 52px rgba(var(--shadow-color), 0.14);
  --sh-hover: 0 16px 42px rgba(var(--shadow-color), 0.12), 0 10px 26px rgba(var(--accent-rgb), 0.10);

  /* Added multi tier shadows */
  --shadow-soft: 0 10px 26px rgba(var(--shadow-color), 0.08);
  --shadow-mid: 0 16px 44px rgba(var(--shadow-color), 0.12);
  --shadow-high: 0 28px 80px rgba(var(--shadow-color), 0.16);
  --shadow-green-hover: 0 18px 52px rgba(var(--shadow-color), 0.10), 0 10px 24px rgba(var(--accent-rgb), 0.12);

  /* Added text helpers */
  --text-strong: var(--text);
  --text-soft: var(--muted);

  /* Added link tokens */
  --link: var(--accent);
  --link-hover: var(--accent-dark);

  /* Added ring tokens */
  --ring: rgba(15, 61, 46, 0.35);
  --ring-strong: rgba(15, 61, 46, 0.52);

  /* Added divider token */
  --divider: rgba(11, 13, 12, 0.10);

  /* Typography */
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  --fs-1: 0.875rem;  /* 14 */
  --fs-2: 1rem;      /* 16 */
  --fs-3: 1.125rem;  /* 18 */
  --fs-4: 1.25rem;   /* 20 */
  --fs-5: 1.5rem;    /* 24 */
  --fs-6: 2rem;      /* 32 */
  --fs-7: 2.5rem;    /* 40 */
  --fs-8: 3rem;      /* 48 */

  --lh-tight: 1.12;
  --lh: 1.55;

  /* Motion */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-1: 140ms;
  --dur-2: 220ms;
  --dur-3: 360ms;

  /* Interaction rhythm */
  --lift-1: -1px;
  --lift-2: -2px;
  --press-opacity: 0.94;

  /* Texture (CSS-only subtle "noise") */
  --noise: radial-gradient(circle at 20% 10%, rgba(11,13,12,0.035) 0 1px, transparent 2px),
           radial-gradient(circle at 70% 30%, rgba(11,13,12,0.03) 0 1px, transparent 2px),
           radial-gradient(circle at 40% 80%, rgba(11,13,12,0.028) 0 1px, transparent 2px);
}

/* Dark mode (improved contrast, mapped to new palette) */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0F0F10;
    --surface: #141416;
    --surface-2: #1A1A1D;
    --text: #F5F5F5;
    --muted: rgba(245,245,245,0.78);
    --muted-2: rgba(245,245,245,0.64);

    --border: rgba(245, 245, 245, 0.14);
    --border-2: rgba(245, 245, 245, 0.22);

    --stroke-soft: rgba(245, 245, 245, 0.12);
    --stroke-strong: rgba(245, 245, 245, 0.22);
    --divider: rgba(245, 245, 245, 0.12);

    --shadow-color: 0, 0, 0;
    --surface-rgb: 20, 20, 22;

    /* Glass tuned for dark */
    --glass-bg: rgba(20, 20, 22, 0.68);
    --glass-border: rgba(245, 245, 245, 0.12);

    /* Rings */
    --focus: rgba(143, 167, 154, 0.40);
    --ring: rgba(143, 167, 154, 0.36);
    --ring-strong: rgba(143, 167, 154, 0.54);

    /* Accents stay brand-consistent in dark */
    --accent: #0F3D2E;
    --accent-dark: #0A2A20;
    --accent-2: #8FA79A;
    --accent-soft: rgba(231, 239, 234, 0.10);

    --sand: rgba(233, 225, 211, 0.12);
    --gold: #B79A57;
    --gold-soft: rgba(243, 235, 221, 0.10);

    --sh-1: 0 14px 34px rgba(0,0,0,0.35);
    --sh-2: 0 24px 70px rgba(0,0,0,0.45);
    --sh-hover: 0 18px 54px rgba(0,0,0,0.42), 0 10px 22px rgba(var(--accent-rgb), 0.14);

    --shadow-soft: 0 16px 38px rgba(0,0,0,0.40);
    --shadow-mid: 0 22px 60px rgba(0,0,0,0.48);
    --shadow-high: 0 34px 96px rgba(0,0,0,0.55);
    --shadow-green-hover: 0 22px 64px rgba(0,0,0,0.50), 0 10px 26px rgba(var(--accent-rgb), 0.16);

    /* Links */
    --link: rgba(143, 167, 154, 0.95);
    --link-hover: rgba(231, 239, 234, 0.92);
  }
}

/* -----------------------------
   1) Base / Reset
----------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-2);
  line-height: var(--lh);
  color: var(--text);
  background: var(--bg);
  letter-spacing: -0.006em;
}

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

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

/* Global link polish (does not affect dedicated link components) */
a:focus-visible {
  outline: 3px solid var(--ring-strong);
  outline-offset: 3px;
}

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

button {
  border: 0;
  background: transparent;
  cursor: pointer;
}

ul, ol {
  padding-left: 1.2em;
}

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

/* Editorial rhythm for headings */
h1, h2, h3, h4 {
  line-height: var(--lh-tight);
  letter-spacing: -0.022em;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

::selection {
  background: rgba(15, 61, 46, 0.18);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}

/* -----------------------------
   2) Layout Utilities
----------------------------- */
.container {
  width: min(var(--container), calc(100% - (var(--s-6) * 2)));
  margin-inline: auto;
}

.section {
  padding: var(--s-9) 0;
  position: relative;
}

/* Premium alt wash */
.section--alt {
  background:
    linear-gradient(180deg, rgba(15,61,46,0.06), rgba(183,154,87,0.04)),
    var(--noise);
}

/* Signature underline system (Option A) */
.section-head {
  display: grid;
  gap: var(--s-3);
  margin-bottom: var(--s-7);
  position: relative;
}

/* Subtle divider without changing layout */
.section-head::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--s-7) * -0.5);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--divider), transparent);
  opacity: 0.9;
  pointer-events: none;
}

.section-title {
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.06;
  letter-spacing: -0.030em;
  position: relative;
  display: inline-block;
  padding-bottom: 10px;
}

/* Evergreen underline + tiny gold dot */
.section-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 2px;
  width: min(220px, 70%);
  height: 1px;
  background: linear-gradient(90deg, rgba(15,61,46,0.65), rgba(15,61,46,0.15));
  border-radius: 99px;
}

.section-title::before {
  content: "";
  position: absolute;
  left: min(220px, 70%);
  bottom: 0px;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(183,154,87,0.90);
  box-shadow: 0 6px 16px rgba(183,154,87,0.12);
}

.section-subtitle {
  color: var(--muted);
  max-width: 68ch;
}

.section-cta {
  margin-top: var(--s-7);
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
}

.split {
  display: grid;
  gap: var(--s-7);
}

@media (min-width: 900px) {
  .split {
    grid-template-columns: 1.1fr 0.9fr;
    align-items: start;
  }
}

.stack {
  display: grid;
  gap: var(--s-4);
}

.inline-list {
  list-style: none;
  padding: 0;
  margin: var(--s-4) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  color: var(--muted);
}

.inline-list > li {
  padding: 6px 10px;
  border: 1px solid rgba(15,61,46,0.14);
  border-radius: var(--radius-pill);
  background: rgba(231,239,234,0.55);
}

/* Hide visually but keep for screen readers */
.sr-only {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

/* Skip link */
.skip-link {
  position: absolute;
  top: var(--s-3);
  left: var(--s-3);
  padding: 10px 12px;
  border-radius: var(--r-1);
  background: rgba(var(--surface-rgb), 0.92);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
  transform: translateY(-140%);
  transition: transform var(--dur-2) var(--ease), opacity var(--dur-2) var(--ease);
  opacity: 0;
  z-index: 9999;
}

.skip-link:focus-visible {
  transform: translateY(0);
  opacity: 1;
}

/* Aspect ratio helpers (avoid layout shift) */
.media-card img,
.gallery-item img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-2);
}

/* -----------------------------
   3) Header + Nav
----------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  border-bottom: 1px solid var(--glass-border);
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.site-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(15,61,46,0.18), transparent);
  pointer-events: none;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4) 0;
  transition: transform var(--dur-2) var(--ease), opacity var(--dur-2) var(--ease);
}

/* Optional: JS can add .is-compact on scroll */
.site-header.is-compact .header-inner {
  padding: var(--s-3) 0;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  min-width: 0;
}

.brand-mark {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-pill);
  display: grid;
  place-items: center;
  background: radial-gradient(80% 80% at 30% 20%, rgba(255,255,255,0.18), transparent 60%),
              linear-gradient(180deg, rgba(15,61,46,0.98), rgba(10,42,32,0.98));
  color: var(--paper);
  font-weight: 800;
  letter-spacing: 0.10em;
  font-size: 0.82rem;
  box-shadow: 0 10px 26px rgba(11,13,12,0.18);
  border: 1px solid rgba(255,255,255,0.16);
}

.brand-name {
  font-weight: 750;
  letter-spacing: -0.014em;
}

.brand-tagline {
  display: block;
  color: var(--muted-2);
  font-size: var(--fs-1);
  margin-top: 2px;
}

.site-nav {
  display: none;
  align-items: center;
  gap: var(--s-2);
}

.nav-link {
  position: relative;
  padding: 10px 12px;
  border-radius: var(--radius-pill);
  color: var(--muted);
  transition: transform var(--dur-2) var(--ease), opacity var(--dur-2) var(--ease);
}

/* Premium hover: subtle sage tint */
.nav-link:hover {
  color: var(--text);
  transform: translateY(var(--lift-1));
  background: rgba(231,239,234,0.55);
  border: 1px solid rgba(15,61,46,0.14);
}

/* CTA nav uses evergreen now */
.nav-link--cta {
  background: linear-gradient(180deg, rgba(15,61,46,0.98), rgba(10,42,32,0.98));
  color: var(--paper);
  box-shadow: var(--shadow-soft);
  border: 1px solid rgba(255,255,255,0.18);
}

.nav-link--cta:hover {
  opacity: 0.96;
  transform: translateY(var(--lift-1));
}

/* Active link hook: JS should add .is-active */
.nav-link.is-active {
  color: var(--accent);
  border: 1px solid rgba(15,61,46,0.25);
  background: rgba(231,239,234,0.72);
}

/* Active underline accent + tiny gold dot */
.nav-link.is-active::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 7px;
  height: 1px;
  background: linear-gradient(90deg, rgba(15,61,46,0.65), rgba(15,61,46,0.12));
  border-radius: 99px;
}

.nav-link.is-active::before {
  content: "";
  position: absolute;
  right: 14px;
  bottom: 4px;
  width: 5px;
  height: 5px;
  border-radius: var(--radius-pill);
  background: rgba(183,154,87,0.92);
}

/* Mobile toggle */
.nav-toggle {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid var(--stroke-strong);
  background: rgba(255,255,255,0.70);
  box-shadow: var(--shadow-soft);
  display: grid;
  place-items: center;
  transition: transform var(--dur-2) var(--ease), opacity var(--dur-2) var(--ease);
}

.nav-toggle:hover {
  transform: translateY(var(--lift-1));
  border-color: rgba(15,61,46,0.22);
}

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

.nav-toggle-lines::before,
.nav-toggle-lines::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: 99px;
  background: var(--text);
  opacity: 0.9;
  transition: transform var(--dur-2) var(--ease), opacity var(--dur-2) var(--ease);
}

.nav-toggle-lines::before { top: 2px; }
.nav-toggle-lines::after { bottom: 2px; }

@media (min-width: 900px) {
  .site-nav { display: flex; }
  .nav-toggle { display: none; }
}

/* -----------------------------
   4) Mobile Drawer Menu
----------------------------- */
.nav-drawer {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  grid-template-columns: 1fr;
}

.nav-drawer[hidden] {
  display: none;
}

.nav-drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11, 13, 12, 0.45);
  opacity: 0;
  transition: opacity var(--dur-3) var(--ease);
}

.nav-drawer-inner {
  position: relative;
  width: min(420px, calc(100% - var(--s-6)));
  height: calc(100% - var(--s-6));
  margin: var(--s-3);
  margin-left: auto;
  border-radius: var(--radius-card);
  background: rgba(var(--surface-rgb), 0.92);
  border: 1px solid var(--stroke-strong);
  box-shadow: var(--shadow-high);
  transform: translateX(12px);
  opacity: 0;
  transition: transform var(--dur-3) var(--ease), opacity var(--dur-3) var(--ease);
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
}

/* Optional glass mode for drawer */
.nav-drawer-inner.is-glass {
  background: var(--glass-bg);
  border-color: var(--glass-border);
}

/* Evergreen top accent line */
.nav-drawer-inner::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: rgba(15,61,46,0.85);
}

/* Inner stroke + highlight */
.nav-drawer-inner::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18);
  opacity: 0.9;
}

.nav-drawer.is-open .nav-drawer-backdrop {
  opacity: 1;
}

.nav-drawer.is-open .nav-drawer-inner {
  transform: translateX(0);
  opacity: 1;
}

.nav-drawer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-5);
  border-bottom: 1px solid var(--divider);
  background:
    linear-gradient(180deg, rgba(231,239,234,0.40), transparent),
    var(--noise);
  position: relative;
}

/* Subtle top divider glow */
.nav-drawer-top::after {
  content: "";
  position: absolute;
  left: var(--s-5);
  right: var(--s-5);
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(15,61,46,0.14), transparent);
  pointer-events: none;
}

.nav-drawer-title {
  font-weight: 750;
  letter-spacing: -0.012em;
}

.nav-close {
  padding: 8px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--stroke-strong);
  background: rgba(231,239,234,0.42);
  transition: transform var(--dur-2) var(--ease), opacity var(--dur-2) var(--ease);
}

.nav-close:hover {
  transform: translateY(var(--lift-1));
  opacity: 0.96;
}

.nav-drawer-links {
  padding: var(--s-5);
  display: grid;
  gap: var(--s-2);
}

.nav-drawer-link {
  padding: 12px 12px;
  border-radius: var(--radius-soft);
  border: 1px solid var(--stroke-soft);
  background: rgba(255,255,255,0.68);
  transition: transform var(--dur-2) var(--ease), opacity var(--dur-2) var(--ease);
}

.nav-drawer-link:hover {
  transform: translateY(var(--lift-1));
  border-color: rgba(15,61,46,0.20);
  background: rgba(231,239,234,0.55);
}

.nav-drawer-link--cta {
  background: linear-gradient(180deg, rgba(15,61,46,0.98), rgba(10,42,32,0.98));
  color: var(--paper);
  border-color: rgba(255,255,255,0.18);
}

.nav-drawer-meta {
  padding: var(--s-5);
  border-top: 1px solid var(--divider);
  display: grid;
  gap: var(--s-2);
  background: rgba(241,242,237,0.55);
}

.meta-link {
  color: var(--muted);
}

.meta-link:hover {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(183,154,87,0.50);
}

/* -----------------------------
   5) Hero
----------------------------- */
.hero {
  padding: var(--s-10) 0 var(--s-8);
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(1200px 600px at 10% 10%, rgba(15,61,46,0.10), transparent 55%),
    linear-gradient(180deg, rgba(0,0,0,0.02), transparent 60%),
    var(--noise);
}

.hero::after {
  content: "";
  position: absolute;
  inset: -2px;
  pointer-events: none;
  background: radial-gradient(800px 420px at 70% 20%, rgba(233,225,211,0.16), transparent 60%);
  opacity: 0.9;
}

.hero-grid {
  display: grid;
  gap: var(--s-7);
  align-items: center;
  position: relative;
  z-index: 1;
}

@media (min-width: 900px) {
  .hero-grid {
    grid-template-columns: 1.1fr 0.9fr;
  }
}

.kicker {
  font-size: var(--fs-1);
  color: var(--muted-2);
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.hero-title {
  margin-top: var(--s-3);
  font-size: clamp(2.15rem, 5.4vw, 3.7rem);
  line-height: 1.02;
  letter-spacing: -0.038em;
  max-width: 20ch;
}

.hero-subtitle {
  margin-top: var(--s-4);
  color: var(--muted);
  max-width: 62ch;
}

.hero-actions {
  margin-top: var(--s-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}

.trust-bar {
  margin-top: var(--s-7);
  padding: var(--s-4);
  border-radius: var(--radius-card);
  border: 1px solid var(--stroke-soft);
  background: rgba(255,255,255,0.62);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
  box-shadow: var(--shadow-soft);
  position: relative;
  overflow: hidden;
}

.trust-bar::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0.65), transparent);
  opacity: 0.8;
}

.trust-label {
  font-size: var(--fs-1);
  color: var(--muted-2);
  position: relative;
  z-index: 1;
}

.trust-value {
  margin-top: 2px;
  font-weight: 750;
  letter-spacing: -0.012em;
  position: relative;
  z-index: 1;
}

@media (max-width: 520px) {
  .trust-bar {
    grid-template-columns: 1fr;
  }
}

.media-card {
  padding: var(--s-3);
  border-radius: var(--radius-card);
  border: 1px solid var(--stroke-soft);
  background: rgba(255,255,255,0.72);
  box-shadow: var(--shadow-soft);
  position: relative;
  overflow: hidden;
  transition: transform var(--dur-2) var(--ease), opacity var(--dur-2) var(--ease);
}

/* Edge highlight treatment */
.media-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0.78), rgba(255,255,255,0));
  opacity: 0.85;
}

/* Inner stroke */
.media-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.22);
  opacity: 0.85;
}

.media-card:hover {
  transform: translateY(var(--lift-2));
  opacity: 0.985;
  border-color: rgba(15,61,46,0.20);
  box-shadow: var(--shadow-green-hover);
}

.media-caption {
  margin-top: var(--s-3);
  color: var(--muted-2);
  font-size: var(--fs-1);
}

/* -----------------------------
   6) Buttons + Badges
----------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  transition: transform var(--dur-2) var(--ease), opacity var(--dur-2) var(--ease);
  will-change: transform, opacity;
  user-select: none;
}

.btn:hover {
  transform: translateY(var(--lift-1));
  opacity: 0.985;
}

.btn:active {
  transform: translateY(0);
  opacity: var(--press-opacity);
}

.btn[disabled],
.btn.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

/* Primary now evergreen */
.btn-primary {
  background: linear-gradient(180deg, rgba(15,61,46,0.98), rgba(10,42,32,0.98));
  color: var(--paper);
  border-color: rgba(255,255,255,0.18);
  box-shadow: var(--shadow-soft);
}

/* New: secondary (ink) */
.btn-secondary {
  background: linear-gradient(180deg, rgba(11,13,12,0.98), rgba(5,6,5,0.98));
  color: var(--paper);
  border-color: rgba(255,255,255,0.14);
  box-shadow: var(--shadow-soft);
}

/* Existing ghost refined */
.btn-ghost {
  background: rgba(255,255,255,0.62);
  color: var(--text);
  border-color: var(--stroke-strong);
}

.btn-ghost:hover {
  border-color: rgba(15,61,46,0.25);
  background: rgba(231,239,234,0.62);
}

/* New: accent button (sage wash) */
.btn-accent {
  background: rgba(231,239,234,0.78);
  color: var(--accent);
  border-color: rgba(15,61,46,0.20);
  box-shadow: 0 10px 24px rgba(11,13,12,0.06);
}

.btn-accent:hover {
  border-color: rgba(15,61,46,0.28);
  background: rgba(231,239,234,0.86);
}

/* Focus reinforcement for buttons */
.btn:focus-visible {
  outline: 3px solid var(--ring-strong);
  outline-offset: 3px;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(15,61,46,0.16);
  background: rgba(231,239,234,0.72);
  color: var(--accent);
  font-size: var(--fs-1);
}

/* -----------------------------
   7) Cards + Grids
----------------------------- */
.card-grid {
  display: grid;
  gap: var(--s-4);
}

@media (min-width: 800px) {
  .card-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Shared surface system */
.card,
.mini-card,
.review-card,
.mini-panel {
  border-radius: var(--radius-card);
  border: 1px solid var(--stroke-soft);
  background: rgba(255,255,255,0.78);
  box-shadow: var(--shadow-soft);
  position: relative;
  overflow: hidden;
  transition: transform var(--dur-2) var(--ease), opacity var(--dur-2) var(--ease);
}

/* Edge highlight */
.card::before,
.mini-card::before,
.review-card::before,
.mini-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0.78), rgba(255,255,255,0));
  opacity: 0.9;
}

/* Inner stroke */
.card::after,
.mini-card::after,
.review-card::after,
.mini-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.22);
  opacity: 0.85;
}

/* Premium hover edge */
.card:hover,
.mini-card:hover,
.review-card:hover,
.mini-panel:hover {
  transform: translateY(var(--lift-2));
  opacity: 0.99;
  box-shadow: var(--shadow-green-hover);
  border-color: rgba(15,61,46,0.20);
}

.card {
  padding: var(--s-5);
  display: grid;
  gap: var(--s-3);
  min-height: 260px;
}

.card-title {
  font-size: var(--fs-4);
  line-height: 1.16;
  letter-spacing: -0.016em;
  position: relative;
  z-index: 1;
}

/* Card title underline on hover (signature system) */
.card:hover .card-title {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
  text-decoration-color: rgba(15,61,46,0.35);
}

.card-text {
  color: var(--muted);
  position: relative;
  z-index: 1;
  max-width: 68ch;
}

.card-list {
  margin: 0;
  padding-left: 1.15em;
  color: var(--muted);
  display: grid;
  gap: 6px;
  position: relative;
  z-index: 1;
}

.card-link {
  margin-top: auto;
  color: var(--link);
  font-weight: 650;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  opacity: 0.95;
  transition: transform var(--dur-2) var(--ease), opacity var(--dur-2) var(--ease);
  position: relative;
  z-index: 1;
}

.card-link:hover {
  opacity: 1;
  transform: translateY(var(--lift-1));
  text-decoration-color: rgba(183,154,87,0.55);
}

/* Mini cards used in FAQ teaser */
.mini-card {
  padding: var(--s-5);
  display: grid;
  gap: var(--s-2);
}

.mini-card-title {
  font-size: var(--fs-3);
  letter-spacing: -0.012em;
  position: relative;
  z-index: 1;
  line-height: 1.18;
}

.mini-card-text {
  color: var(--muted);
  position: relative;
  z-index: 1;
  max-width: 68ch;
}

/* -----------------------------
   8) Steps / Process
----------------------------- */
.steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--s-3);
}

.step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-4);
  padding: var(--s-5);
  border-radius: var(--radius-card);
  border: 1px solid var(--stroke-soft);
  background: rgba(255,255,255,0.74);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  transition: transform var(--dur-2) var(--ease), opacity var(--dur-2) var(--ease);
}

/* Edge highlight */
.step::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0.78), rgba(255,255,255,0));
  opacity: 0.9;
}

/* Inner stroke */
.step::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.20);
  opacity: 0.85;
}

.step:hover {
  transform: translateY(var(--lift-2));
  opacity: 0.99;
  box-shadow: var(--shadow-green-hover);
  border-color: rgba(15,61,46,0.20);
}

.step-num {
  font-family: var(--mono);
  font-size: 0.95rem;
  padding: 6px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(15,61,46,0.18);
  height: fit-content;
  color: var(--accent);
  background: rgba(231,239,234,0.60);
  position: relative;
  z-index: 1;
}

.step-title {
  font-size: var(--fs-3);
  letter-spacing: -0.012em;
  position: relative;
  z-index: 1;
  line-height: 1.18;
}

.step-text {
  margin-top: 6px;
  color: var(--muted);
  position: relative;
  z-index: 1;
  max-width: 70ch;
}

/* -----------------------------
   9) Gallery Strip
----------------------------- */
.gallery-strip {
  display: grid;
  gap: var(--s-3);
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 900px) {
  .gallery-strip {
    grid-template-columns: repeat(4, 1fr);
  }
}

.gallery-item {
  padding: var(--s-2);
  border-radius: var(--radius-card);
  border: 1px solid var(--stroke-soft);
  background: rgba(255,255,255,0.76);
  box-shadow: var(--shadow-soft);
  position: relative;
  overflow: hidden;
  transition: transform var(--dur-2) var(--ease), opacity var(--dur-2) var(--ease);
}

.gallery-item::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0.78), rgba(255,255,255,0));
  opacity: 0.85;
}

.gallery-item::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.20);
  opacity: 0.85;
}

.gallery-item:hover {
  transform: translateY(var(--lift-2));
  opacity: 0.99;
  box-shadow: var(--shadow-green-hover);
  border-color: rgba(15,61,46,0.20);
}

/* -----------------------------
   10) Reviews UI (cards, votes, comments, pagination)
----------------------------- */
.review-preview-grid {
  display: grid;
  gap: var(--s-4);
}

@media (min-width: 900px) {
  .review-preview-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.review-card {
  padding: var(--s-5);
  display: grid;
  gap: var(--s-3);
}

.review-head {
  display: grid;
  gap: 4px;
  position: relative;
  z-index: 1;
}

.review-name {
  font-weight: 750;
  letter-spacing: -0.012em;
}

.review-meta {
  color: var(--muted-2);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-1);
}

.stars {
  letter-spacing: 0.07em;
  color: rgba(183,154,87,0.98);
  text-shadow: 0 10px 20px rgba(183,154,87,0.10);
}

.dot {
  opacity: 0.75;
  color: rgba(183,154,87,0.78);
}

.review-text {
  color: var(--text);
  opacity: 0.96;
  position: relative;
  z-index: 1;
  max-width: 72ch;
}

.review-link {
  margin-top: auto;
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: transform var(--dur-2) var(--ease), opacity var(--dur-2) var(--ease);
  position: relative;
  z-index: 1;
}

.review-link:hover {
  color: var(--link-hover);
  transform: translateY(var(--lift-1));
  text-decoration-color: rgba(183,154,87,0.55);
}

/* Vote controls */
.vote-row {
  display: inline-flex;
  gap: var(--s-2);
  align-items: center;
}

.vote-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--stroke-strong);
  background: rgba(255,255,255,0.62);
  color: var(--muted);
  transition: transform var(--dur-2) var(--ease), opacity var(--dur-2) var(--ease);
}

.vote-btn:hover {
  transform: translateY(var(--lift-1));
  opacity: 0.985;
  border-color: rgba(15,61,46,0.22);
  background: rgba(231,239,234,0.55);
}

/* Active: evergreen emphasis */
.vote-btn.is-active {
  color: var(--accent);
  border-color: rgba(15,61,46,0.28);
  background: rgba(231,239,234,0.72);
}

.vote-count {
  font-family: var(--mono);
  font-size: 0.9rem;
  color: var(--muted-2);
}

/* Comment thread */
.comment-thread {
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid var(--divider);
  display: grid;
  gap: var(--s-3);
}

.comment {
  padding: var(--s-3);
  border-radius: var(--radius-soft);
  border: 1px solid var(--stroke-soft);
  background: rgba(255,255,255,0.62);
}

.comment-meta {
  display: flex;
  gap: 8px;
  align-items: baseline;
  color: var(--muted-2);
  font-size: var(--fs-1);
}

.comment-author {
  color: var(--text);
  font-weight: 650;
}

.comment-body {
  margin-top: 6px;
  color: var(--muted);
}

/* Pagination */
.pagination {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  align-items: center;
}

.page-btn {
  padding: 10px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--stroke-strong);
  background: rgba(255,255,255,0.66);
  color: var(--muted);
  transition: transform var(--dur-2) var(--ease), opacity var(--dur-2) var(--ease);
}

.page-btn:hover {
  transform: translateY(var(--lift-1));
  opacity: 0.985;
  border-color: rgba(15,61,46,0.22);
  background: rgba(231,239,234,0.55);
}

.page-btn.is-active {
  color: var(--paper);
  background: linear-gradient(180deg, rgba(15,61,46,0.98), rgba(10,42,32,0.98));
  border-color: rgba(255,255,255,0.18);
}

/* Skeleton loaders */
.skeleton {
  border-radius: var(--radius-card);
  border: 1px solid var(--stroke-soft);
  background: rgba(255,255,255,0.70);
  overflow: hidden;
  position: relative;
}

.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-35%);
  opacity: 0.55;
  background: linear-gradient(
    90deg,
    rgba(0,0,0,0) 0%,
    rgba(15,61,46,0.08) 35%,
    rgba(0,0,0,0) 70%
  );
  animation: shimmer 1.2s linear infinite;
}

@keyframes shimmer {
  0% { transform: translateX(-35%); }
  100% { transform: translateX(35%); }
}

@media (prefers-reduced-motion: reduce) {
  .skeleton::after {
    animation: none;
    opacity: 0;
  }
}

/* -----------------------------
   11) Forms
----------------------------- */
.form {
  display: grid;
  gap: var(--s-3);
}

.field {
  display: grid;
  gap: 8px;
}

.label {
  font-weight: 650;
  font-size: var(--fs-1);
  color: var(--muted-2);
}

/* Inputs */
.input,
.textarea,
.select {
  width: 100%;
  padding: 12px 12px;
  border-radius: var(--radius-soft);
  border: 1px solid var(--stroke-strong);
  background: rgba(255,255,255,0.86);
  transition: transform var(--dur-2) var(--ease), opacity var(--dur-2) var(--ease);
}

.input:hover,
.textarea:hover,
.select:hover {
  border-color: rgba(15,61,46,0.18);
}

.input::placeholder,
.textarea::placeholder {
  color: rgba(75,82,78,0.72);
}

.input[disabled],
.textarea[disabled],
.select[disabled] {
  opacity: 0.65;
  cursor: not-allowed;
  background: rgba(241,242,237,0.70);
}

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

.input:focus-visible,
.textarea:focus-visible,
.select:focus-visible {
  outline: 3px solid var(--ring-strong);
  outline-offset: 2px;
  border-color: rgba(15,61,46,0.30);
  background: rgba(255,255,255,0.92);
}

/* WebKit autofill (tasteful) */
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
  box-shadow: 0 0 0 1000px rgba(231,239,234,0.35) inset;
  -webkit-text-fill-color: var(--text);
}

/* Additive hooks for states */
.field.is-error .label {
  color: rgba(138,46,46,0.95);
}

.field.is-error .input,
.field.is-error .textarea,
.field.is-error .select {
  border-color: rgba(138,46,46,0.45);
  background: rgba(243,235,221,0.18);
}

.field.is-success .label {
  color: rgba(15,107,69,0.95);
}

.field.is-success .input,
.field.is-success .textarea,
.field.is-success .select {
  border-color: rgba(15,107,69,0.30);
  background: rgba(231,239,234,0.42);
}

.help {
  color: var(--muted-2);
  font-size: var(--fs-1);
}

.form-row {
  display: grid;
  gap: var(--s-3);
}

@media (min-width: 700px) {
  .form-row {
    grid-template-columns: 1fr 1fr;
  }
}

/* Optional Netlify success block hook */
.form-success,
.netlify-success {
  border: 1px solid rgba(15,107,69,0.25);
  background: rgba(231,239,234,0.60);
  border-radius: var(--radius-card);
  padding: var(--s-4);
  color: var(--text);
}

/* -----------------------------
   12) Modal
----------------------------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: grid;
  place-items: center;
  padding: var(--s-6);
}

.modal[hidden] {
  display: none;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11, 13, 12, 0.45);
  opacity: 0;
  transition: opacity var(--dur-3) var(--ease);
}

.modal-panel {
  position: relative;
  width: min(920px, 100%);
  max-height: min(80vh, 900px);
  overflow: auto;
  border-radius: var(--radius-card);
  border: 1px solid var(--stroke-strong);
  background: rgba(var(--surface-rgb), 0.96);
  box-shadow: var(--shadow-high);
  transform: translateY(10px);
  opacity: 0;
  transition: transform var(--dur-3) var(--ease), opacity var(--dur-3) var(--ease);
}

/* Optional glass mode */
.modal-panel.is-glass {
  background: var(--glass-bg);
  border-color: var(--glass-border);
}

/* Evergreen top accent line */
.modal-panel::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: rgba(15,61,46,0.85);
}

/* Inner stroke */
.modal-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18);
  opacity: 0.85;
}

.modal.is-open .modal-backdrop {
  opacity: 1;
}

.modal.is-open .modal-panel {
  transform: translateY(0);
  opacity: 1;
}

.modal-head {
  padding: var(--s-5);
  border-bottom: 1px solid var(--divider);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  background:
    linear-gradient(180deg, rgba(231,239,234,0.35), transparent),
    var(--noise);
  position: relative;
}

.modal-head::after {
  content: "";
  position: absolute;
  left: var(--s-5);
  right: var(--s-5);
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(15,61,46,0.14), transparent);
  pointer-events: none;
}

.modal-title {
  font-size: var(--fs-4);
  font-weight: 750;
  letter-spacing: -0.012em;
}

.modal-close {
  padding: 8px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--stroke-strong);
  background: rgba(231,239,234,0.42);
  transition: transform var(--dur-2) var(--ease), opacity var(--dur-2) var(--ease);
}

.modal-close:hover {
  transform: translateY(var(--lift-1));
  opacity: 0.96;
}

.modal-body {
  padding: var(--s-5);
}

/* -----------------------------
   13) Accordion (FAQ)
----------------------------- */
.accordion {
  border: 1px solid var(--stroke-soft);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: rgba(255,255,255,0.74);
  box-shadow: var(--shadow-soft);
  position: relative;
}

.accordion::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0.75), rgba(255,255,255,0));
  opacity: 0.9;
}

.accordion-item + .accordion-item {
  border-top: 1px solid var(--divider);
}

.accordion-btn {
  width: 100%;
  text-align: left;
  padding: var(--s-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  font-weight: 750;
  letter-spacing: -0.012em;
  position: relative;
  z-index: 1;
}

.accordion-btn:hover {
  background: rgba(231,239,234,0.45);
}

.accordion-icon {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(15,61,46,0.16);
  background: rgba(231,239,234,0.55);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  transition: transform var(--dur-2) var(--ease), opacity var(--dur-2) var(--ease);
  color: var(--accent);
}

.accordion-panel {
  padding: 0 var(--s-5) var(--s-5);
  color: var(--muted);
  position: relative;
  z-index: 1;
  max-width: 72ch;
}

.accordion-item.is-open .accordion-icon {
  transform: rotate(45deg);
}

/* -----------------------------
   14) Toast Notifications
----------------------------- */
.toast-region {
  position: fixed;
  right: var(--s-4);
  bottom: var(--s-4);
  z-index: 4000;
  display: grid;
  gap: var(--s-2);
}

.toast {
  width: min(360px, calc(100vw - (var(--s-4) * 2)));
  padding: 12px 14px;
  border-radius: var(--radius-soft);
  border: 1px solid var(--stroke-strong);
  background: rgba(var(--surface-rgb), 0.92);
  box-shadow: var(--shadow-high);
  transform: translateY(10px);
  opacity: 0;
  transition: transform var(--dur-3) var(--ease), opacity var(--dur-3) var(--ease);
  position: relative;
  overflow: hidden;
}

/* Evergreen micro top line */
.toast::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: rgba(15,61,46,0.70);
}

.toast.is-show {
  transform: translateY(0);
  opacity: 1;
}

.toast-title {
  font-weight: 750;
  letter-spacing: -0.012em;
}

.toast-text {
  margin-top: 4px;
  color: var(--muted-2);
  font-size: var(--fs-1);
}

/* -----------------------------
   15) Footer
----------------------------- */
.site-footer {
  border-top: 1px solid var(--divider);
  padding: var(--s-8) 0 var(--s-6);
  background:
    linear-gradient(180deg, rgba(241,242,237,0.70), rgba(255,255,255,0.35)),
    var(--noise);
}

.footer-grid {
  display: grid;
  gap: var(--s-6);
  position: relative;
}

/* Subtle column separators for desktop, no layout change */
@media (min-width: 900px) {
  .footer-grid {
    grid-template-columns: 1.1fr 0.8fr 0.8fr;
    align-items: start;
  }
  .footer-grid > * {
    position: relative;
  }
  .footer-grid > * + *::before {
    content: "";
    position: absolute;
    left: calc(var(--s-6) * -0.5);
    top: 0;
    bottom: 0;
    width: 1px;
    background: linear-gradient(180deg, transparent, var(--divider), transparent);
    opacity: 0.9;
    pointer-events: none;
  }
}

.footer-brand {
  font-weight: 850;
  letter-spacing: -0.014em;
}

.footer-title {
  font-weight: 750;
  color: var(--text);
  margin-bottom: var(--s-2);
}

.footer-muted {
  color: var(--muted);
  margin-top: var(--s-2);
  max-width: 68ch;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
  color: var(--muted);
}

.footer-links a:hover {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(183,154,87,0.55);
}

.footer-bottom {
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid var(--divider);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: center;
  justify-content: space-between;
}

.footer-small {
  color: var(--muted-2);
  font-size: var(--fs-1);
}

/* -----------------------------
   16) CTA Section (homepage)
----------------------------- */
.cta {
  padding: var(--s-9) 0;
}

.cta-inner {
  border-radius: var(--radius-card);
  border: 1px solid var(--stroke-soft);
  background: rgba(255,255,255,0.80);
  box-shadow: var(--shadow-soft);
  padding: var(--s-7);
  display: grid;
  gap: var(--s-3);
  text-align: left;
  position: relative;
  overflow: hidden;
  transition: transform var(--dur-2) var(--ease), opacity var(--dur-2) var(--ease);
}

/* Edge highlight + warm sand glow */
.cta-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(900px 420px at 20% 10%, rgba(233,225,211,0.22), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,0.78), rgba(255,255,255,0));
  opacity: 0.95;
}

/* Inner stroke */
.cta-inner::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.20);
  opacity: 0.85;
}

.cta-inner:hover {
  transform: translateY(var(--lift-2));
  opacity: 0.99;
  box-shadow: var(--shadow-green-hover);
  border-color: rgba(15,61,46,0.20);
}

.cta-title {
  font-size: clamp(2rem, 3.2vw, 2.5rem);
  line-height: 1.06;
  letter-spacing: -0.030em;
  position: relative;
  z-index: 1;
  max-width: 26ch;
}

.cta-text {
  color: var(--muted);
  max-width: 60ch;
  position: relative;
  z-index: 1;
}

.cta-actions {
  margin-top: var(--s-3);
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}

/* -----------------------------
   17) Reveal Animations (safe: never hides content unless JS is working)
----------------------------- */

/* Default: content is visible */
.reveal,
[data-reveal] {
  opacity: 1;
  transform: none;
}

/* Only hide when JS explicitly opts in by adding class "js" to <html> */
html.js .reveal,
html.js [data-reveal] {
  opacity: 0;
  transform: translateY(10px);
  transition: transform var(--dur-3) var(--ease), opacity var(--dur-3) var(--ease);
  will-change: transform, opacity;
}

/* Shown state (JS adds this) */
html.js .reveal.is-visible,
html.js [data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Reduced motion: always show */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  html.js .reveal,
  html.js [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* -----------------------------
   18) Safe content-link underline (additive, does not affect dedicated link styles)
----------------------------- */
.section-subtitle a,
.card-text a,
.mini-card-text a,
.review-text a,
.comment-body a,
.footer-muted a {
  color: var(--link);
  text-decoration: none;
}

.section-subtitle a:hover,
.card-text a:hover,
.mini-card-text a:hover,
.review-text a:hover,
.comment-body a:hover,
.footer-muted a:hover {
  color: var(--link-hover);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(15,61,46,0.35);
}