/* AI420 — Shared site CSS · Foundation v1.0 FINAL
   Color tokens: colors_and_type.css
   Strategy B typography, cream-first surfaces, light-mode-only.
   Used by all marketing pages.
*/
@import url('colors_and_type.css');

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--surface-base);
  color: var(--text-on-cream);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: transparent; color: inherit; }

/* ─── Type primitives ─── */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.8px;
  color: var(--brand-green-deep);
  font-weight: 500;
}
/* Eyebrow semantic variants — pain=clay / system=green / neutral=muted */
.eyebrow-clay   { color: var(--brand-clay); }
.eyebrow-green  { color: var(--brand-green-deep); }
.eyebrow-muted  { color: var(--text-on-cream-muted); }
/* Legacy alias */
.eyebrow-ochre  { color: var(--brand-gold-deep); }

.h-display {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(40px, 6vw, 76px);
  line-height: 0.98;
  letter-spacing: -0.025em;
  font-variation-settings: 'opsz' 96;
  margin: 0;
  color: var(--text-on-cream);
}
/* Italic accent — clay (60%) or green-deep (40%). Underline ALWAYS clay. */
.h-display em, .h-display .it {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--brand-clay);
}
.h-display .em-green {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 400;
  color: var(--brand-green-deep);
}
/* Legacy alias */
.h-display .em-emerald { color: var(--brand-green-deep); font-family: var(--font-italic); font-style: italic; font-weight: 400; }

.h-1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-variation-settings: 'opsz' 60;
  margin: 0;
}
.h-2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  font-variation-settings: 'opsz' 36;
  margin: 0;
}
.h-3 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.3;
  margin: 0;
}
.lede {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.55;
  color: var(--text-on-cream-muted);
  max-width: 60ch;
  margin: 0;
}
.body-md { font-size: 16px; line-height: 1.6; color: var(--text-on-cream); }
.body-sm { font-size: 14px; line-height: 1.55; color: var(--text-on-cream-muted); }
.mono { font-family: var(--font-mono); }

/* ─── Layout ─── */
.container       { max-width: var(--grid-max-default); margin: 0 auto; padding: 0 24px; }
.container-tight { max-width: var(--grid-max-tight);   margin: 0 auto; padding: 0 24px; }
.container-wide  { max-width: var(--grid-max-wide);    margin: 0 auto; padding: 0 24px; }
.section       { padding: 96px 0; }
.section-tight { padding: 64px 0; }
@media (max-width: 720px) {
  .section       { padding: 64px 0; }
  .section-tight { padding: 48px 0; }
}

/* ─── Nav ─── */
.nav {
  position: sticky; top: 0; z-index: var(--z-sticky);
  background: rgba(242, 244, 238, 0.82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border-subtle);
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 24px; max-width: var(--grid-max-wide); margin: 0 auto;
}
.nav-logo {
  font-family: var(--font-display); font-weight: 700; font-size: 22px;
  letter-spacing: -0.02em; color: var(--text-on-cream);
  display: flex; align-items: center; gap: 6px;
}
.nav-logo .dot {
  width: 8px; height: 8px;
  background: var(--brand-green-deep);
  border-radius: 9999px; display: inline-block;
}
.nav-links { display: flex; gap: 28px; align-items: center; font-size: 14px; font-weight: 500; }
.nav-links a { color: var(--text-on-cream-muted); transition: color var(--motion-sm); }
.nav-links a:hover, .nav-links a.active { color: var(--text-on-cream); }
.nav-cta { display: flex; gap: 10px; align-items: center; }
@media (max-width: 880px) { .nav-links { display: none; } }

/* ─── Buttons ─── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 20px;
  min-height: var(--touch-target);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  border-radius: var(--radius-pill);
  transition: all var(--motion-sm) var(--ease-premium);
  white-space: nowrap;
}
.btn-primary { background: var(--brand-green-deep); color: var(--on-primary); }
.btn-primary:hover {
  background: var(--green-700);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.btn-primary:active { background: var(--green-800); transform: scale(0.98); }

.btn-secondary {
  background: var(--surface-paper);
  color: var(--text-on-cream);
  border: 1px solid var(--border-default);
}
.btn-secondary:hover { border-color: var(--border-strong); transform: translateY(-1px); }

.btn-ghost { color: var(--text-on-cream); padding-left: 8px; padding-right: 8px; }
.btn-ghost:hover { color: var(--brand-green-deep); }

/* Dark island button — solid ink fill */
.btn-dark { background: var(--island-ink); color: var(--text-on-dark); }
.btn-dark:hover { background: var(--island-emerald); }

/* Clay button — warmth/urgency — cream context only */
.btn-clay { background: var(--brand-clay); color: var(--on-primary); }
.btn-clay:hover { background: var(--clay-500); transform: translateY(-1px); }

/* Gold CTA — ONLY on dark island surfaces (final CTA, premium tiers) */
.btn-gold { background: var(--brand-gold); color: var(--island-ink); }
.btn-gold:hover { background: var(--gold-300); transform: translateY(-1px); }

.btn-sm { padding: 9px 16px; font-size: 13px; min-height: 38px; }

/* ─── Cards / Surfaces ─── */
.card {
  background: var(--surface-paper);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 28px;
  transition: all var(--motion-md) var(--ease-premium);
}
.card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--border-default);
  transform: translateY(-2px);
}

/* Three-mist variants — rotate green → gold → clay in grids */
.card-soft  { background: var(--surface-soft);  border-color: transparent; }
.card-warm  { background: var(--surface-warm);  border-color: transparent; }

/* Mist cards — semantic tinted surfaces */
.card-green-mist { background: var(--brand-green-mist); border-color: transparent; }
.card-gold-mist  { background: var(--brand-gold-mist);  border-color: transparent; }
.card-clay-mist  { background: var(--brand-clay-mist);  border-color: transparent; }

/* Legacy gradient aliases — still valid, map to new mist logic */
.card-sage { background: linear-gradient(180deg, #E8F1EB 0%, var(--brand-green-mist) 100%); border-color: transparent; }
.card-gold { background: linear-gradient(180deg, var(--gold-50) 0%, var(--gold-100) 100%);  border-color: transparent; }
.card-clay { background: linear-gradient(180deg, var(--clay-50) 0%, var(--clay-100) 100%);  border-color: transparent; }

/* Dark island card */
.card-dark {
  background: var(--island-emerald);
  color: var(--text-on-dark);
  border: 1px solid var(--border-on-dark-subtle);
}

/* Featured card — glow accent, ONE per list max */
.card-featured {
  box-shadow: var(--shadow-glow-emerald);
  border-color: rgba(45, 128, 73, 0.20);
}

/* ─── Glass — ALWAYS over a photo, never on flat color ─── */
.glass-light {
  background: var(--glass-cream);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--radius-xl);
}
.glass-dark {
  background: var(--glass-emerald);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--radius-xl);
  color: var(--text-on-dark);
}

/* ─── Photo treatments ─── */
.photo-frame { position: relative; overflow: hidden; border-radius: var(--radius-xl); }
.photo-frame::after {
  content: ""; position: absolute; inset: 0;
  background: url('assets/grain.svg');
  opacity: var(--media-grain-opacity);
  mix-blend-mode: overlay;
  pointer-events: none;
}
.photo-frame img { width: 100%; height: 100%; object-fit: cover; }

/* Three-tint photo overlays — rotate per grid position */
.photo-tint-green::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, var(--photo-tint-green) 100%);
  pointer-events: none; z-index: 1; border-radius: inherit;
}
.photo-tint-gold::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, var(--photo-tint-gold) 100%);
  pointer-events: none; z-index: 1; border-radius: inherit;
}
.photo-tint-clay::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, var(--photo-tint-clay) 100%);
  pointer-events: none; z-index: 1; border-radius: inherit;
}

/* ─── Pills ─── */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: var(--surface-paper);
  border: 1px solid var(--border-default);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-on-cream-muted);
}
.pill-emerald { background: var(--green-50);       border-color: rgba(45, 128, 73, 0.20);  color: var(--brand-green-deep); }
.pill-gold    { background: var(--brand-gold-mist); border-color: rgba(176, 133, 46, 0.25); color: var(--brand-gold-deep); }
.pill-clay    { background: var(--brand-clay-mist); border-color: rgba(139, 58, 42, 0.20);  color: var(--brand-clay); }
.pill-dot::before { content: ""; width: 6px; height: 6px; border-radius: 9999px; background: currentColor; }

/* ─── Stats ─── */
.stat-num {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1;
  letter-spacing: -0.04em;
  font-variation-settings: 'opsz' 96;
  font-variant-numeric: tabular-nums;
  color: var(--text-on-cream-strong);  /* default: strong ink, not clay */
}
/* Accent variants for stat numbers */
.stat-num-clay    { color: var(--brand-clay); }
.stat-num-emerald { color: var(--brand-green-deep); }
.stat-num-gold    { color: var(--brand-gold-deep); }
.stat-label { font-size: 13px; color: var(--text-on-cream-muted); margin-top: 8px; }

/* ─── Tricolor stripe — signature brand element, max 3/page ─── */
.tricolor-stripe {
  height: 6px;
  background: linear-gradient(90deg,
    var(--brand-green)  0%, var(--brand-green)  33.33%,
    var(--brand-gold)   33.33%, var(--brand-gold)  66.66%,
    var(--brand-clay)   66.66%, var(--brand-clay)  100%
  );
  border-radius: var(--radius-pill);
}
.tricolor-stripe.thick { height: 24px; border-radius: var(--radius-md); }

/* ─── Footer — island-forest ─── */
.footer {
  background: var(--island-forest);
  color: var(--text-on-dark);
  padding: 80px 0 32px;
}
.footer .footer-grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: 48px;
}
.footer .footer-col h4 {
  font-family: var(--font-body); font-weight: 600; font-size: 13px;
  text-transform: uppercase; letter-spacing: 1.4px;
  color: var(--text-on-dark-soft);
  margin: 0 0 16px;
}
.footer .footer-col a {
  display: block; padding: 6px 0; font-size: 14px;
  color: var(--text-on-dark-muted);
  transition: color var(--motion-sm);
}
.footer .footer-col a:hover { color: var(--text-on-dark); }
.footer-bottom {
  margin-top: 56px; padding-top: 24px;
  border-top: 1px solid var(--border-on-dark-subtle);
  display: flex; justify-content: space-between;
  font-size: 12px; color: var(--text-on-dark-soft);
}
@media (max-width: 720px) {
  .footer .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}

/* ─── Reveal animation ─── */
.reveal {
  opacity: 0; transform: translateY(24px);
  transition: opacity var(--motion-xl) var(--ease-premium),
              transform var(--motion-xl) var(--ease-premium);
}
.reveal.in { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* ─── Marquee ─── */
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
  display: inline-flex; gap: 48px;
  animation: marquee 40s linear infinite;
  white-space: nowrap;
}

/* ─── Page-tag ─── */
.page-tag {
  position: fixed; top: 14px; right: 14px; z-index: var(--z-toast);
  background: rgba(28,36,24,0.85); color: var(--text-on-dark);
  font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 1.5px;
  padding: 6px 12px; border-radius: 9999px;
  backdrop-filter: blur(8px);
}

/* ─── Bud-SVG placeholder ─── */
.bud-svg {
  width: 100%; aspect-ratio: 4/3; border-radius: var(--radius-lg);
  background:
    radial-gradient(ellipse at 30% 30%, var(--green-300) 0%, transparent 40%),
    radial-gradient(ellipse at 70% 50%, var(--brand-green) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 80%, var(--island-emerald) 0%, transparent 60%),
    linear-gradient(135deg, var(--island-forest) 0%, var(--island-emerald) 100%);
  position: relative; overflow: hidden;
}
.bud-svg::after {
  content: ""; position: absolute; inset: 0;
  background: url('assets/grain.svg'); opacity: 0.12; mix-blend-mode: overlay;
}

/* ─── Accent Electric — dark-surface only ─── */
/* Use exclusively on island-* backgrounds for live/tech signals */
.electric { color: var(--accent-electric); }
.electric-pip {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 9999px;
  background: var(--accent-electric);
  box-shadow: 0 0 6px rgba(0, 217, 126, 0.6);
}

/* ════════════════════════════════════════════════════════════════════════
   COMPONENTS v2.1 — marketing-site + form library
   All semantic-token-driven. Light-mode-only. ICP-40+ touch targets.
   ════════════════════════════════════════════════════════════════════════ */

/* ─── Universal focus ring — brand-clay glow ─── */
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-style), var(--focus-ring-glow);
  border-radius: var(--radius-sm);
}

/* ─── Form: input (full anatomy) ─── */
.field { display: block; margin-bottom: var(--space-5); }
.field-label {
  display: block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  color: var(--on-surface);
  margin-bottom: var(--space-2);
}
.field-label .req { color: var(--error); margin-left: 2px; }

.input, .textarea, .select-native {
  width: 100%;
  min-height: var(--touch-target);
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: 16px;            /* never <16px — prevents iOS zoom */
  line-height: 1.5;
  color: var(--on-surface);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: border-color var(--motion-sm) var(--ease-standard),
              box-shadow var(--motion-sm) var(--ease-standard);
}
.input:hover, .textarea:hover, .select-native:hover { border-color: var(--border-emphasis); }
.input:focus, .textarea:focus, .select-native:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(31, 102, 56, 0.16);  /* brand-green-deep ring */
}
.input::placeholder, .textarea::placeholder { color: var(--on-surface-disabled); }
.textarea { resize: vertical; min-height: 96px; }
.input[disabled], .textarea[disabled], .select-native[disabled] {
  background: var(--surface-sunken);
  cursor: not-allowed;
  opacity: var(--disabled-opacity);
}
.field-helper { font-size: 13px; color: var(--on-surface-muted); margin-top: var(--space-2); }
.field-error  { font-size: 13px; color: var(--error); margin-top: var(--space-2); display: flex; gap: 6px; }
.field--has-error .input,
.field--has-error .textarea,
.field--has-error .select-native {
  border-color: var(--error);
  box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.12);
}
.field--has-success .input { border-color: var(--success); }

/* ─── Custom select (chevron icon) ─── */
.select { position: relative; }
.select .select-native {
  padding-right: 44px;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none' stroke='%231C2418' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='5 8 10 13 15 8'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

/* ─── Checkbox & Radio ─── */
.check, .radio {
  display: inline-flex; align-items: flex-start; gap: 10px;
  cursor: pointer; min-height: var(--touch-target); padding: 10px 0;
  font-size: 15px; color: var(--on-surface); user-select: none;
}
.check input, .radio input { position: absolute; opacity: 0; pointer-events: none; }
.check .box, .radio .box {
  flex: 0 0 20px; width: 20px; height: 20px;
  border: 1.5px solid var(--border-emphasis);
  background: var(--surface-raised);
  transition: all var(--motion-sm) var(--ease-standard);
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: 2px;
}
.check .box { border-radius: var(--radius-xs); }
.radio .box { border-radius: 9999px; }
.check input:checked + .box { background: var(--primary); border-color: var(--primary); }
.check input:checked + .box::after {
  content: "";
  width: 11px; height: 6px;
  border-left: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translate(1px, -1px);
}
.radio input:checked + .box { border-color: var(--primary); border-width: 2px; }
.radio input:checked + .box::after {
  content: "";
  width: 10px; height: 10px;
  border-radius: 9999px;
  background: var(--primary);
}
.check input:focus-visible + .box,
.radio input:focus-visible + .box { box-shadow: 0 0 0 3px rgba(31, 102, 56, 0.22); }
.check input:disabled + .box,
.radio input:disabled + .box { opacity: var(--disabled-opacity); cursor: not-allowed; }

/* ─── Chips ─── */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; min-height: 36px;
  font-family: var(--font-body); font-weight: 500; font-size: 13px;
  color: var(--on-surface-muted);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: all var(--motion-sm) var(--ease-standard);
}
.chip:hover { border-color: var(--border-emphasis); color: var(--on-surface); }
.chip--selected, .chip--filter.is-active {
  background: var(--primary-tint);
  border-color: var(--primary);
  color: var(--primary-hover);
}
.chip--action { color: var(--on-surface); }
.chip .x { font-size: 14px; line-height: 1; opacity: 0.7; }
.chip .x:hover { opacity: 1; }

/* ─── Badges ─── */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px;
  font-family: var(--font-body); font-weight: 600; font-size: 11px;
  letter-spacing: 0.4px; text-transform: uppercase;
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  color: var(--on-surface-muted);
}
.badge--success { background: var(--success-subtle); color: var(--success); }
.badge--warning { background: var(--warning-subtle); color: var(--warning); }
.badge--error   { background: var(--error-subtle);   color: var(--error); }
.badge--info    { background: var(--info-subtle);     color: var(--info); }
.badge--popular { background: var(--brand-gold-mist); color: var(--brand-gold-deep); }
.badge--new     { background: var(--green-50);        color: var(--brand-green-deep); }
.badge--count {
  min-width: 18px; height: 18px; padding: 0 5px;
  background: var(--error); color: #fff; font-size: 10px;
}

/* ─── Avatars ─── */
.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9999px;
  background: var(--green-50); color: var(--brand-green-deep);
  font-family: var(--font-body); font-weight: 600;
  overflow: hidden; flex-shrink: 0;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar--sm { width: 32px;  height: 32px;  font-size: 12px; }
.avatar--md { width: 48px;  height: 48px;  font-size: 16px; }
.avatar--lg { width: 72px;  height: 72px;  font-size: 22px; }
.avatar--xl { width: 112px; height: 112px; font-size: 32px; }
.avatar-group { display: inline-flex; }
.avatar-group .avatar { margin-left: -10px; box-shadow: 0 0 0 2px var(--surface-base); }
.avatar-group .avatar:first-child { margin-left: 0; }

/* ─── Tooltip ─── */
.tip { position: relative; display: inline-flex; }
.tip[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px); left: 50%; transform: translate(-50%, 4px);
  background: var(--island-emerald); color: var(--text-on-dark);
  font-family: var(--font-body); font-size: 12px; font-weight: 500;
  padding: 6px 10px; border-radius: var(--radius-sm);
  white-space: nowrap; opacity: 0; pointer-events: none;
  transition: opacity var(--motion-sm), transform var(--motion-sm);
  z-index: var(--z-tooltip);
  max-width: 240px; white-space: normal; text-align: center; line-height: 1.4;
}
.tip:hover::after, .tip:focus-within::after { opacity: 1; transform: translate(-50%, 0); }

/* ─── Tabs ─── */
.tabs {
  display: flex; gap: 4px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto; scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  position: relative;
  padding: 14px 18px; min-height: var(--touch-target);
  font-family: var(--font-body); font-weight: 500; font-size: 15px;
  color: var(--on-surface-muted);
  background: transparent; white-space: nowrap; cursor: pointer;
  transition: color var(--motion-sm) var(--ease-standard);
}
.tab:hover { color: var(--on-surface); }
.tab.is-active { color: var(--primary); }
.tab.is-active::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px;
  height: 2px; background: var(--primary);
  transition: all var(--motion-md) var(--ease-productive);
}
.tab-panel { padding: var(--space-6) 0; }
.tab-panel[hidden] { display: none; }

/* ─── Alerts / Banners ─── */
.alert {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px; border-radius: var(--radius-md);
  font-size: 14px; line-height: 1.55;
  border: 1px solid transparent;
}
.alert .alert-icon { flex: 0 0 var(--icon-md); margin-top: 2px; }
.alert .alert-body { flex: 1 1 auto; }
.alert .alert-title { font-weight: 600; margin-bottom: 2px; }
.alert .alert-close {
  background: transparent; border: 0; color: inherit; cursor: pointer;
  width: 32px; height: 32px; border-radius: var(--radius-sm);
  display: inline-flex; align-items: center; justify-content: center;
  opacity: 0.6;
}
.alert .alert-close:hover { opacity: 1; }
.alert--success { background: var(--success-subtle); color: var(--success); border-color: rgba(45,128,73,0.2); }
.alert--warning { background: var(--warning-subtle); color: var(--warning); border-color: rgba(180,83,9,0.18); }
.alert--error   { background: var(--error-subtle);   color: var(--error);   border-color: rgba(185,28,28,0.18); }
.alert--info    { background: var(--info-subtle);     color: var(--info);    border-color: rgba(30,92,122,0.18); }

/* ─── Toasts ─── */
.toast-region {
  position: fixed; bottom: 24px; right: 24px;
  display: flex; flex-direction: column; gap: 10px;
  z-index: var(--z-toast); max-width: 380px; pointer-events: none;
}
.toast {
  display: flex; gap: 10px; align-items: center;
  padding: 12px 16px;
  background: var(--island-emerald); color: var(--text-on-dark);
  border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
  font-size: 14px; pointer-events: auto;
  transform: translateY(8px); opacity: 0;
  transition: transform var(--motion-md) var(--ease-enter), opacity var(--motion-md);
}
.toast.in { transform: translateY(0); opacity: 1; }
.toast--success::before {
  content: ""; width: 8px; height: 8px; border-radius: 9999px;
  background: var(--green-200);
}
.toast--error { background: var(--brand-madder); }
@media (max-width: 720px) {
  .toast-region { left: 16px; right: 16px; bottom: 16px; max-width: none; }
}

/* ─── Modal ─── */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(10,11,9,0.55);
  z-index: var(--z-overlay);
  opacity: 0; pointer-events: none;
  transition: opacity var(--motion-md) var(--ease-standard);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  backdrop-filter: blur(4px);
}
.modal-overlay.open { opacity: 1; pointer-events: auto; }
.modal {
  position: relative;
  background: var(--surface-raised); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  max-width: 520px; width: 100%;
  max-height: calc(100vh - 32px); overflow: auto;
  z-index: var(--z-modal);
  transform: scale(0.96);
  transition: transform var(--motion-xl) var(--ease-expressive);
}
.modal-overlay.open .modal { transform: scale(1); }
.modal-header { padding: 24px 24px 8px; }
.modal-title { font-family: var(--font-display); font-size: 22px; font-weight: 600; margin: 0; }
.modal-close {
  position: absolute; top: 12px; right: 12px;
  width: 36px; height: 36px;
  background: transparent; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--on-surface-muted); border-radius: var(--radius-pill);
}
.modal-close:hover { background: var(--surface-sunken); color: var(--on-surface); }
.modal-body { padding: 16px 24px; font-size: 15px; line-height: 1.6; color: var(--on-surface); }
.modal-footer {
  display: flex; gap: 10px; justify-content: flex-end;
  padding: 16px 24px 24px;
  border-top: 1px solid var(--border-subtle); margin-top: 8px;
}
.modal--lg { max-width: 720px; }
.modal--sm { max-width: 400px; }

/* ─── Skeleton ─── */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--green-50) 0%,
    var(--surface-sunken) 50%,
    var(--green-50) 100%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1400ms linear infinite;
  border-radius: var(--radius-sm);
  display: block;
}
.skeleton--text   { height: 14px; margin: 6px 0; }
.skeleton--title  { height: 24px; margin: 8px 0 14px; width: 70%; }
.skeleton--avatar { width: 48px; height: 48px; border-radius: 9999px; }
.skeleton--media  { aspect-ratio: var(--aspect-16-9); width: 100%; border-radius: var(--media-radius-md); }
@keyframes skeleton-shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; background: var(--surface-sunken); }
}

/* ─── Empty state ─── */
.empty {
  text-align: center;
  padding: var(--space-8) var(--space-5);
  max-width: 480px; margin: 0 auto;
  color: var(--on-surface-muted);
}
.empty .empty-icon {
  width: var(--icon-xl); height: var(--icon-xl);
  margin: 0 auto var(--space-4);
  color: var(--on-surface-muted); opacity: 0.65;
}
.empty .empty-title {
  font-family: var(--font-display); font-size: 22px; font-weight: 600;
  color: var(--on-surface); margin: 0 0 var(--space-2);
}
.empty .empty-body { font-size: 15px; margin: 0 0 var(--space-5); }

/* ─── Progress bar ─── */
.progress {
  width: 100%; height: 6px;
  background: var(--surface-sunken);
  border-radius: 9999px; overflow: hidden;
}
.progress-fill {
  display: block; height: 100%;
  background: var(--primary); border-radius: inherit;
  transition: width var(--motion-lg) var(--ease-productive);
}
.progress--tricolor .progress-fill {
  background: linear-gradient(90deg,
    var(--brand-green) 0%,
    var(--brand-gold)  50%,
    var(--brand-clay)  100%
  );
}
.progress-steps {
  display: flex; gap: 8px; align-items: center;
  font-size: 13px; color: var(--on-surface-muted); margin-top: 8px;
}
.progress-steps strong { color: var(--on-surface); }

/* ─── Breadcrumb ─── */
.breadcrumb {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-family: var(--font-body); font-size: 13px; color: var(--on-surface-muted);
}
.breadcrumb a { color: var(--on-surface-muted); transition: color var(--motion-sm); }
.breadcrumb a:hover { color: var(--on-surface); }
.breadcrumb .sep { opacity: 0.4; }
.breadcrumb [aria-current="page"] { color: var(--on-surface); font-weight: 500; }

/* ─── Pagination ─── */
.pagination { display: inline-flex; gap: 4px; align-items: center; }
.pagination a, .pagination button {
  min-width: var(--touch-target); height: var(--touch-target); padding: 0 12px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-body); font-weight: 500; font-size: 14px;
  color: var(--on-surface-muted);
  background: transparent; border: 1px solid transparent;
  border-radius: var(--radius-md);
  transition: all var(--motion-sm) var(--ease-standard);
}
.pagination a:hover, .pagination button:hover {
  background: var(--surface-raised); color: var(--on-surface);
  border-color: var(--border);
}
.pagination .is-active {
  background: var(--primary); color: var(--on-primary); border-color: var(--primary);
}
.pagination .is-disabled { opacity: var(--disabled-opacity); pointer-events: none; }

/* ─── Lead form (multi-step) ─── */
.leadform {
  background: var(--surface-raised); border: 1px solid var(--border);
  border-radius: var(--radius-xl); padding: var(--space-6); box-shadow: var(--shadow-sm);
}
.leadform-step { display: none; }
.leadform-step.is-active { display: block; }
.leadform-actions {
  display: flex; gap: 10px; justify-content: space-between;
  margin-top: var(--space-6);
}
.leadform-meta {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; color: var(--on-surface-muted); margin-bottom: var(--space-4);
  font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 1.4px;
}

/* ════════════════════════════════════════════════════════════════════════
   MEDIA WRAPPERS
   ════════════════════════════════════════════════════════════════════════ */

.media {
  position: relative; overflow: hidden;
  border-radius: var(--media-radius-md);
  background: var(--surface-sunken);
}
.media > img,
.media > video,
.media > iframe { width: 100%; height: 100%; object-fit: cover; display: block; }
.media::after {
  content: ""; position: absolute; inset: 0;
  background: url('assets/grain.svg');
  opacity: var(--media-grain-opacity);
  mix-blend-mode: overlay; pointer-events: none;
}
.media--no-grain::after { display: none; }
.media--lg { border-radius: var(--media-radius-lg); }
.media--xl { border-radius: var(--media-radius-xl); }
.media--sm { border-radius: var(--media-radius-sm); }

.aspect-square { aspect-ratio: var(--aspect-square); }
.aspect-4-3    { aspect-ratio: var(--aspect-4-3); }
.aspect-16-9   { aspect-ratio: var(--aspect-16-9); }
.aspect-21-9   { aspect-ratio: var(--aspect-21-9); }
.aspect-9-16   { aspect-ratio: var(--aspect-9-16); }

.video {
  position: relative; width: 100%;
  border-radius: var(--media-radius-md);
  overflow: hidden; background: var(--island-ink);
}
.video video { width: 100%; height: 100%; object-fit: cover; display: block; }
.video--cinema    { aspect-ratio: var(--aspect-21-9); }
.video--landscape { aspect-ratio: var(--aspect-16-9); }
.video--portrait  { aspect-ratio: var(--aspect-9-16); max-width: 360px; margin: 0 auto; }

.video--captioned::before,
.media--captioned::before {
  content: ""; position: absolute; inset: 0;
  background: var(--media-overlay-shadow);
  pointer-events: none; z-index: 1;
}
.media-caption, .video-caption {
  position: absolute; left: 16px; right: 16px; bottom: 14px;
  color: var(--text-on-dark);
  font-family: var(--font-body); font-size: 14px; font-weight: 500;
  z-index: 2; text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
.media-credit {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.2px;
  text-transform: uppercase; opacity: 0.8; display: block; margin-top: 4px;
}

/* YouTube facade */
.yt {
  position: relative; width: 100%;
  aspect-ratio: var(--aspect-16-9);
  border-radius: var(--media-radius-md);
  overflow: hidden; background: var(--island-ink); cursor: pointer;
}
.yt-poster { width: 100%; height: 100%; object-fit: cover; display: block; }
.yt-play {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 72px; height: 72px; border-radius: 9999px;
  background: rgba(0,0,0,0.75);
  display: inline-flex; align-items: center; justify-content: center;
  border: none; cursor: pointer;
  transition: transform var(--motion-md) var(--ease-expressive),
              background var(--motion-md);
  pointer-events: none;
}
.yt:hover .yt-play {
  transform: translate(-50%, -50%) scale(1.08);
  background: var(--primary);
}
.yt-play::after {
  content: ""; width: 0; height: 0;
  border-left: 22px solid #fff;
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
  margin-left: 6px;
}
.yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yt[data-loaded="true"] .yt-poster,
.yt[data-loaded="true"] .yt-play { display: none; }

/* Photo grid */
.photo-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
@media (min-width: 720px)  { .photo-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .photo-grid { grid-template-columns: repeat(4, 1fr); } }
.photo-grid--3 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 720px) { .photo-grid--3 { grid-template-columns: repeat(3, 1fr); } }

/* Lightbox */
.lightbox {
  position: fixed; inset: 0;
  background: rgba(10,11,9,0.92);
  z-index: var(--z-overlay);
  display: none; align-items: center; justify-content: center; padding: 24px;
}
.lightbox.open { display: flex; }
.lightbox img, .lightbox video {
  max-width: 100%; max-height: 100%;
  border-radius: var(--radius-lg); box-shadow: var(--shadow-xl);
}
.lightbox-close {
  position: absolute; top: 16px; right: 16px;
  width: 44px; height: 44px;
  background: rgba(255,255,255,0.1); border: 0; cursor: pointer;
  color: #fff; border-radius: 9999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 20px;
}
.lightbox-close:hover { background: rgba(255,255,255,0.2); }

/* Lazy media */
img, video, iframe { content-visibility: auto; }
img[loading="lazy"] { background: var(--surface-sunken); }