/* ==========================================================================
   Good Neighbors For Seniors — design system
   Premium concierge-care. Light, quiet canvas; brand colour deployed as
   structure and accent rather than alternating slabs.
   olive #596b2f · lime #e1ffa9 · purple #482152 · cream #ffefe0 · berry #c2255c
   ========================================================================== */

:root {
  /* ---- brand ---- */
  --olive:        #596b2f;
  --olive-deep:   #3c4a1e;
  --olive-mid:    #6f8340;
  --lime:         #e1ffa9;
  --lime-deep:    #c7ef83;
  --purple:       #482152;
  --purple-deep:  #2e1236;
  --cream:        #ffefe0;
  --berry:        #c2255c;

  /* ---- surfaces: a light, airy canvas is what reads as premium ---- */
  --canvas:       #fcfaf6;
  --canvas-warm:  #f7f1e8;
  --paper:        #ffffff;
  --ink:          #211b16;
  --ink-2:        #5d5348;
  --ink-3:        #6f665a;

  /* ---- hairlines & shadow: fine borders, barely-there elevation ---- */
  --line:         rgba(89, 107, 47, .16);
  --line-soft:    rgba(89, 107, 47, .09);
  --line-strong:  rgba(89, 107, 47, .28);
  --shadow-xs:    0 1px 2px rgba(46, 18, 54, .04);
  --shadow-sm:    0 1px 2px rgba(46, 18, 54, .04), 0 8px 20px -14px rgba(46, 18, 54, .18);
  --shadow-md:    0 1px 3px rgba(46, 18, 54, .05), 0 24px 48px -28px rgba(46, 18, 54, .26);
  --shadow-lg:    0 2px 6px rgba(46, 18, 54, .06), 0 60px 90px -50px rgba(46, 18, 54, .38);

  /* ---- type ---- */
  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --font-body:    'Figtree', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* WONK 0 keeps the serif refined; the logo already carries the brand's playfulness */
  --vf-display:   'SOFT' 18, 'WONK' 0;
  --vf-soft:      'SOFT' 42, 'WONK' 0;

  --t-hero:    clamp(2.9rem, 1.85rem + 3.9vw, 5rem);
  --t-h1:      clamp(2.5rem, 1.75rem + 2.9vw, 4rem);
  --t-h2:      clamp(2rem, 1.55rem + 1.9vw, 3.05rem);
  --t-h3:      clamp(1.3rem, 1.16rem + 0.62vw, 1.7rem);
  --t-h4:      clamp(1.06rem, 1.01rem + 0.24vw, 1.2rem);
  --t-lead:    clamp(1.1rem, 1.03rem + 0.34vw, 1.32rem);
  --t-body:    clamp(1.03rem, 1.01rem + 0.14vw, 1.115rem);
  --t-sm:      0.945rem;
  --t-xs:      0.8rem;
  --t-label:   0.735rem;

  /* ---- geometry: generous, quiet rhythm ---- */
  --shell:     80rem;
  --pad:       clamp(1.25rem, 4.5vw, 4rem);
  --band:      clamp(4.75rem, 3.4rem + 6.2vw, 9.5rem);
  --band-tight:clamp(3.25rem, 2.6rem + 3vw, 5.5rem);

  --r-xs: .375rem;
  --r-sm: .625rem;
  --r-md: 1rem;
  --r-lg: 1.375rem;
  --r-xl: 2rem;
  --r-arch: 999px 999px var(--r-lg) var(--r-lg);
  --r-pill: 999px;

  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  /* ---- per-section tone (default: light canvas) ---- */
  --bg:      var(--canvas);
  --fg:      var(--ink-2);
  --head:    var(--purple);
  --muted:   var(--ink-3);
  --accent:  var(--olive);
  --hair:    var(--line);
  --card:    var(--paper);
  --ring:    0 0 0 3px var(--bg), 0 0 0 5px var(--olive);
}

/* ------------------------------------------------------------------ reset */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--canvas);
  color: var(--ink-2);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.62;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'kern' 1, 'liga' 1;
}
img, svg, video, iframe { display: block; max-width: 100%; }
img, video { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
ul, ol { list-style: none; padding: 0; }
a { color: inherit; text-decoration: none; }

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: none; box-shadow: var(--ring); border-radius: var(--r-sm);
}

/* ------------------------------------------------------------- typography */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-variation-settings: var(--vf-display);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.028em;
  color: var(--head);
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); line-height: 1.18; letter-spacing: -0.018em; font-weight: 600; }
h4 { font-size: var(--t-h4); line-height: 1.3; letter-spacing: -0.01em; font-weight: 600; }
p  { text-wrap: pretty; }

.t-hero {
  font-size: var(--t-hero); line-height: 1.02; letter-spacing: -0.036em; font-weight: 500;
}
.lead  { font-size: var(--t-lead); line-height: 1.56; color: var(--fg); }
.small { font-size: var(--t-sm); }
em, .em { font-style: normal; color: var(--accent); }

/* small-caps label with a hairline lead-in — the premium editorial signal */
.label {
  display: flex; align-items: center; gap: .75rem;
  font-family: var(--font-body);
  font-size: var(--t-label); font-weight: 700;
  letter-spacing: .17em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.5rem;
}
.label::before {
  content: ""; width: 1.75rem; height: 1px; background: currentColor; opacity: .6; flex: none;
}
.label--center { justify-content: center; }
.label--bare::before { display: none; }

/* editorial index number */
.index {
  font-family: var(--font-display); font-variation-settings: var(--vf-display);
  font-size: .85rem; font-weight: 600; letter-spacing: .05em;
  color: var(--accent); opacity: .75;
}

.hair { height: 1px; background: var(--hair); border: 0; }

/* -------------------------------------------------------------- utilities */
.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--pad); }
.shell--tight  { max-width: 62rem; }
.shell--narrow { max-width: 48rem; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; top: .75rem; left: .75rem; z-index: 300;
  padding: .8rem 1.35rem; border-radius: var(--r-pill);
  background: var(--purple); color: var(--lime); font-weight: 700;
  transform: translateY(-160%); transition: transform .25s var(--ease);
}
.skip-link:focus { transform: translateY(0); }

/* --------------------------------------------------------------- sections */
.section {
  position: relative;
  padding-block: var(--band);
  background: var(--bg);
  color: var(--fg);
}
.section--tight { padding-block: var(--band-tight); }
.section--flush-top { padding-top: 0; }

.section[data-tone="warm"]  { --bg: var(--canvas-warm); }
.section[data-tone="cream"] { --bg: var(--cream); --hair: rgba(89,107,47,.2); --card: rgba(255,255,255,.72); }
.section[data-tone="paper"] { --bg: var(--paper); }

.section[data-tone="olive"] {
  --bg: #4a5a27; --fg: rgba(255,255,255,.84); --head: #fff; --muted: rgba(255,255,255,.74);
  --accent: var(--lime); --hair: rgba(255,255,255,.2); --card: rgba(255,255,255,.07);
  --ring: 0 0 0 3px var(--bg), 0 0 0 5px var(--lime);
}
.section[data-tone="purple"] {
  --bg: var(--purple); --fg: rgba(255,255,255,.75); --head: #fff; --muted: rgba(255,255,255,.58);
  --accent: var(--lime); --hair: rgba(255,255,255,.18); --card: rgba(255,255,255,.06);
  --ring: 0 0 0 3px var(--bg), 0 0 0 5px var(--lime);
}
.section[data-tone="lime"] {
  --bg: var(--lime); --fg: rgba(46,18,54,.78); --head: var(--purple-deep); --muted: rgba(46,18,54,.6);
  --accent: var(--purple); --hair: rgba(46,18,54,.16); --card: rgba(255,255,255,.55);
  --ring: 0 0 0 3px var(--bg), 0 0 0 5px var(--purple);
}
.section[data-tone="olive"] h1, .section[data-tone="olive"] h2,
.section[data-tone="purple"] h1, .section[data-tone="purple"] h2 { color: #fff; }

/* fine grain on dark bands — keeps large flat colour from looking cheap */
.section[data-tone="olive"]::after,
.section[data-tone="purple"]::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");
}
.section > .shell { position: relative; z-index: 1; }

.head { max-width: 46rem; margin-bottom: clamp(2.75rem, 1.8rem + 3.4vw, 4.5rem); }
.head--center { margin-inline: auto; text-align: center; }
.head--center .label { justify-content: center; }
.head .lead { margin-top: 1.35rem; color: var(--muted); }
.head--wide { max-width: 54rem; }

/* ---------------------------------------------------------------- buttons */
.btn {
  --b-bg: var(--olive); --b-fg: #fff; --b-bd: var(--olive);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .65rem;
  min-height: 3.4rem; padding: .9rem 1.9rem;
  background: var(--b-bg); color: var(--b-fg);
  border: 1px solid var(--b-bd); border-radius: var(--r-pill);
  font-size: 1rem; font-weight: 600; letter-spacing: -.005em; cursor: pointer;
  transition: background-color .25s var(--ease), color .25s var(--ease),
              border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
  box-shadow: var(--shadow-xs);
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn:active { transform: translateY(0); }
.btn .icon { width: 1.05em; height: 1.05em; transition: transform .3s var(--ease); }
.btn:hover .icon { transform: translateX(3px); }

.btn--dark   { --b-bg: var(--purple); --b-fg: #fff; --b-bd: var(--purple); }
.btn--lime   { --b-bg: var(--lime); --b-fg: var(--purple-deep); --b-bd: var(--lime); }
.btn--line   { --b-bg: transparent; --b-fg: var(--head); --b-bd: var(--line-strong); box-shadow: none; }
.btn--line:hover { --b-bg: transparent; --b-bd: var(--accent); --b-fg: var(--accent); }
/* On dark bands the default button goes lime — declared BEFORE the outline
   variants so an equal-specificity `--line` rule still wins. */
.section[data-tone="olive"] .btn,
.section[data-tone="purple"] .btn { --b-bg: var(--lime); --b-fg: var(--purple-deep); --b-bd: var(--lime); }
.section[data-tone="olive"] .btn--line,
.section[data-tone="purple"] .btn--line { --b-bg: transparent; --b-fg: #fff; --b-bd: rgba(255,255,255,.38); }
.section[data-tone="olive"] .btn--line:hover,
.section[data-tone="purple"] .btn--line:hover { --b-bg: #fff; --b-fg: var(--purple); --b-bd: #fff; }
.btn--sm { min-height: 2.9rem; padding: .6rem 1.35rem; font-size: .94rem; }
@media (max-width: 63.99rem) { .site-header__cta { padding-inline: 1.05rem; font-size: .9rem; } }
/* very small phones (<=344px): the centred logo and the pill would just touch */
@media (max-width: 21.5rem) {
  .site-header__cta { padding-inline: .85rem; font-size: .84rem; }
  .site-header .logo--wordmark { width: 5.75rem; }
}
.btn--lg { min-height: 3.85rem; padding: 1.1rem 2.5rem; font-size: 1.06rem; }
.btn--block { width: 100%; }

.actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2.5rem; }
.actions--center { justify-content: center; }

/* quiet text link with a hairline that draws in on hover */
.tlink {
  position: relative; display: inline-flex; align-items: center; gap: .5rem;
  justify-self: start; width: fit-content;
  padding-block: .5rem;
  font-size: var(--t-sm); font-weight: 600; letter-spacing: .01em; color: var(--head);
  transition: color .22s var(--ease);
}
.tlink::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .2rem; height: 1px;
  background: currentColor; opacity: .3; transform-origin: left;
  transition: opacity .22s, transform .3s var(--ease);
}
.tlink:hover { color: var(--accent); }
.tlink:hover::after { opacity: 1; transform: scaleX(.35); }
.tlink .icon { width: 1rem; height: 1rem; transition: transform .3s var(--ease); }
.tlink:hover .icon { transform: translateX(3px); }

/* ------------------------------------------------------------------- logo */
/* One traced SVG per mark, recoloured via CSS mask + currentColor. */
.logo {
  display: block; background-color: currentColor;
  -webkit-mask: var(--logo-src) no-repeat center / contain;
          mask: var(--logo-src) no-repeat center / contain;
}
.logo--wordmark  { width: clamp(7.25rem, 27vw, 11rem); aspect-ratio: 1107 / 557; }
.logo--mark      { width: 2.5rem; aspect-ratio: 283 / 361; }
.logo--good      { width: 10rem; aspect-ratio: 809 / 319; }
.logo--neighbors { width: 2.5rem; aspect-ratio: 261 / 360; }
.logo--footer    { width: clamp(8.5rem, 16vw, 10rem); }

/* ----------------------------------------------------------- site header */
.site-header {
  position: sticky; top: 0; z-index: 100;
  transition: box-shadow .35s var(--ease);
}
/* the blur lives on a pseudo-element: `backdrop-filter` on the header itself would
   make it the containing block for its fixed children and trap the nav drawer */
.site-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(252, 250, 246, .78);
  -webkit-backdrop-filter: saturate(160%) blur(20px);
          backdrop-filter: saturate(160%) blur(20px);
  border-bottom: 1px solid transparent;
  transition: border-color .35s var(--ease);
}
.site-header.is-stuck::before { border-bottom-color: var(--line-soft); }

/* Mobile: burger left, contact right, logo absolutely centred. Centring it in
   flow would depend on the burger and the button being the same width — they
   are not — so the logo is taken out of flow and pinned to the true centre. */
.site-header__inner {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  min-height: 4.5rem; padding-block: .75rem;
}
.site-header__logo {
  position: absolute; left: 50%; transform: translateX(-50%);
  display: block; color: var(--olive); transition: opacity .2s;
}
.site-header__logo:hover { opacity: .78; }
.site-header__cta { flex: none; }
.site-header__cta-long { display: none; }
@media (min-width: 64rem) {
  .site-header__cta-long  { display: inline; }
  .site-header__cta-short { display: none; }
}

.nav-toggle {
  justify-self: start; display: grid; place-items: center;
  width: 2.9rem; height: 2.9rem; margin-left: -.55rem;
  background: none; border: 0; border-radius: var(--r-pill); cursor: pointer; color: var(--purple);
}
.nav-toggle__bars { display: grid; gap: 5px; width: 1.35rem; }
.nav-toggle__bars i { display: block; height: 1.5px; border-radius: 2px; background: currentColor; transition: transform .32s var(--ease), opacity .2s; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.site-nav {
  position: fixed; inset: 0 auto 0 0; z-index: 120; width: min(21rem, 86vw);
  transform: translateX(-102%); transition: transform .42s var(--ease-out);
}
.site-nav.is-open { transform: translateX(0); }
.site-nav__panel {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column; height: 100%;
  padding: 1.15rem var(--pad) 2rem;
  background:
    radial-gradient(120% 55% at 0% 0%, rgba(225, 255, 169, .10), transparent 62%),
    linear-gradient(168deg, var(--purple) 0%, var(--purple-deep) 78%);
  color: rgba(255, 255, 255, .82);
  box-shadow: 40px 0 100px -50px rgba(46, 18, 54, .95);
  overflow-y: auto;
}
/* same fine grain as the dark bands, so large flat colour keeps its depth */
.site-nav__panel::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.06'/%3E%3C/svg%3E");
}

.site-nav__top {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding-bottom: 1.6rem; margin-bottom: 1.4rem;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.site-nav__mark {
  width: 2rem; aspect-ratio: 283 / 361; background-color: var(--lime);
  -webkit-mask: var(--logo-src) no-repeat center / contain;
          mask: var(--logo-src) no-repeat center / contain;
}
.site-nav__close {
  display: grid; place-items: center; width: 2.5rem; height: 2.5rem;
  background: rgba(255, 255, 255, .07); color: #fff;
  border: 1px solid rgba(255, 255, 255, .2); border-radius: var(--r-pill); cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s;
}
.site-nav__close:hover { background: var(--lime); border-color: var(--lime); color: var(--purple-deep); }

.site-nav__list { display: grid; }
.site-nav__link {
  display: flex; align-items: baseline; gap: .85rem;
  padding: .95rem 0; border-bottom: 1px solid rgba(255, 255, 255, .1);
  font-family: var(--font-display); font-variation-settings: var(--vf-display);
  font-size: 1.5rem; font-weight: 500; letter-spacing: -.022em; color: #fff;
  transition: color .2s var(--ease), padding-left .3s var(--ease);
}
.site-nav__link .index { color: rgba(255, 255, 255, .55); font-size: .68rem; }
.site-nav__link:hover, .site-nav__link.is-current { color: var(--lime); padding-left: .35rem; }
.site-nav__link.is-current .index { color: var(--lime); }

.site-nav__area {
  margin-top: auto; padding-top: 2rem;
  font-size: var(--t-xs); line-height: 1.55; color: rgba(255, 255, 255, .62); max-width: 16rem;
}
.site-nav__wm {
  position: absolute; right: -2.25rem; bottom: -2.5rem; z-index: -1;
  width: 11rem; aspect-ratio: 283 / 361; pointer-events: none;
  background-color: #fff; opacity: .05;
  -webkit-mask: var(--logo-src) no-repeat center / contain;
          mask: var(--logo-src) no-repeat center / contain;
}

.nav-scrim {
  position: fixed; inset: 0; z-index: 110; background: rgba(46, 18, 54, .5);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  opacity: 0; transition: opacity .35s;
}
.nav-scrim.is-open { opacity: 1; }
body.nav-open { overflow: hidden; }

@media (min-width: 64rem) {
  .site-header__inner { min-height: 5.5rem; gap: 2.5rem; justify-content: flex-start; }
  .nav-toggle, .site-nav__top, .site-nav__area, .site-nav__wm { display: none; }
  .site-header__logo { position: static; transform: none; flex: none; }
  .site-nav { position: static; width: auto; transform: none; margin-left: auto; }
  .site-nav__panel {
    flex-direction: row; align-items: center; height: auto; padding: 0;
    background: none; box-shadow: none; overflow: visible; color: inherit;
  }
  .site-nav__panel::before { display: none; }
  .site-nav__list { grid-auto-flow: column; gap: .15rem; }
  .site-nav__link {
    font-family: var(--font-body); font-size: .96rem; font-weight: 600; letter-spacing: 0;
    padding: .7rem .95rem; border-bottom: 0; border-radius: var(--r-pill); color: var(--ink-2);
  }
  .site-nav__link .index { display: none; }
  .site-nav__link:hover { color: var(--olive); padding-left: .95rem; background: rgba(89,107,47,.06); }
  .site-nav__link.is-current { color: var(--olive); background: rgba(89,107,47,.09); padding-left: .95rem; }
  .nav-scrim { display: none; }
}

/* ---------------------------------------------------------------- footer */
.site-footer {
  background: var(--purple-deep);
  color: rgba(255, 255, 255, .68);
  padding-block: clamp(3.25rem, 2.6rem + 2.6vw, 4.75rem) 1.75rem;
  font-size: var(--t-sm);
}
.site-footer__grid { display: grid; gap: 2.75rem 3rem; grid-template-columns: 1fr; }

/* --- brand --- */
.fbrand { display: grid; gap: 1.25rem; justify-items: start; }
.fbrand a { color: var(--lime); display: block; }
.fbrand__line { max-width: 24rem; color: rgba(255, 255, 255, .6); line-height: 1.6; }
.social { display: flex; gap: .5rem; }
.social a {
  display: grid; place-items: center; width: 2.4rem; height: 2.4rem;
  border: 1px solid rgba(255, 255, 255, .18); border-radius: var(--r-pill); color: rgba(255, 255, 255, .8);
  transition: background-color .22s, color .22s, border-color .22s;
}
.social a:hover { background: var(--lime); border-color: var(--lime); color: var(--purple-deep); }
.social .icon { width: 1.05rem; height: 1.05rem; }

/* --- column headings --- */
.fcol__h {
  font-family: var(--font-body); font-size: var(--t-label); font-weight: 700;
  letter-spacing: .17em; text-transform: uppercase; color: rgba(255, 255, 255, .58);
  margin-bottom: 1.1rem;
}

/* --- link list --- */
.flinks { display: grid; gap: .1rem; }
.flinks a {
  display: inline-block; padding-block: .52rem; color: rgba(255, 255, 255, .82);
  transition: color .2s;
}
.flinks a:hover, .flinks a[aria-current="page"] { color: var(--lime); }

/* --- contact: labelled rows, separated by hairlines --- */
.fcontact { display: grid; }
.fcontact > div { padding-block: .55rem; border-top: 1px solid rgba(255, 255, 255, .12); }
.fcontact > div:first-child { border-top: 0; padding-top: 0; }
.fcontact dt {
  font-size: var(--t-xs); font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
  color: rgba(255, 255, 255, .5); margin-bottom: .25rem;
}
.fcontact dd { margin: 0; color: rgba(255, 255, 255, .9); overflow-wrap: break-word; }
.fcontact dd a { display: inline-block; padding-block: .45rem; transition: color .2s; }
.fcontact dd a:hover { color: var(--lime); }

/* --- signup --- */
.fsignup__note { margin-bottom: 1rem; color: rgba(255, 255, 255, .6); line-height: 1.55; max-width: 22rem; }
.field-inline {
  display: flex; gap: .5rem; padding: .3rem .3rem .3rem 1.1rem;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--r-pill); transition: border-color .2s, background-color .2s;
}
.field-inline:focus-within { border-color: rgba(225, 255, 169, .55); background: rgba(255, 255, 255, .09); }
.field-inline input { flex: 1; min-width: 0; background: none; border: 0; outline: none; color: #fff; padding: .6rem 0; font-size: var(--t-sm); }
.field-inline input::placeholder { color: rgba(255, 255, 255, .55); }
.field-inline button {
  flex: none; display: grid; place-items: center; width: 2.5rem; height: 2.5rem;
  background: var(--lime); color: var(--purple-deep); border: 0; border-radius: var(--r-pill); cursor: pointer;
  transition: transform .25s var(--ease);
}
.field-inline button:hover { transform: translateX(2px); }

/* --- bottom bar --- */
.site-footer__bar {
  display: flex; flex-wrap: wrap; gap: .5rem 2rem; justify-content: space-between;
  margin-top: clamp(2.5rem, 2rem + 1.6vw, 3.25rem); padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: var(--t-xs); color: rgba(255, 255, 255, .58);
}

@media (min-width: 46rem) {
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
  .fbrand { grid-column: 1 / -1; }
}
@media (min-width: 68rem) {
  .site-footer__grid { grid-template-columns: 1.45fr .65fr 1.15fr 1.1fr; gap: 3rem; }
  .fbrand { grid-column: auto; }
}

/* ======================================================================
   MEDIA WELLS
   Real asset when supplied. Until then a composed, on-brand well —
   deliberately designed, never a dashed "missing image" box.
   ====================================================================== */
.media { position: relative; margin: 0; }
.media__frame, .media__well {
  width: 100%; aspect-ratio: var(--ratio, 4 / 3);
  border-radius: var(--r-lg); overflow: hidden;
}
.media__frame { object-fit: cover; border: 0; background: var(--canvas-warm); box-shadow: var(--shadow-md); }
.media--arch   .media__frame, .media--arch   .media__well { border-radius: var(--r-arch); }
.media--circle .media__frame, .media--circle .media__well { border-radius: 50%; aspect-ratio: 1; }

.media__well {
  position: relative; isolation: isolate;
  display: grid; place-content: center; justify-items: center; gap: 1rem;
  padding: 2.25rem 1.75rem; text-align: center;
  --w-ink: var(--olive);
  --w-a: rgba(89,107,47,.10);
  --w-b: rgba(89,107,47,.03);
  background:
    linear-gradient(180deg, rgba(255,255,255,.5), transparent 45%),
    radial-gradient(115% 80% at 22% 12%, var(--w-a), transparent 62%),
    linear-gradient(152deg, var(--w-b), rgba(255,255,255,.55));
  border: 1px solid var(--line-soft);
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.7);
  color: var(--w-ink);
}
.media--olive .media__well, .media--purple .media__well {
  --w-ink: var(--lime);
  --w-a: rgba(255,255,255,.13); --w-b: rgba(255,255,255,.04);
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), transparent 45%),
    radial-gradient(115% 80% at 22% 12%, var(--w-a), transparent 62%),
    linear-gradient(152deg, var(--w-b), rgba(255,255,255,.02));
  border-color: rgba(255,255,255,.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}
.media--lime .media__well { --w-ink: var(--purple); --w-a: rgba(72,33,82,.09); --w-b: rgba(72,33,82,.03); border-color: rgba(46,18,54,.14); }

/* the monogram, set large and quiet */
.media__mark {
  width: clamp(3.5rem, 22%, 6.5rem); aspect-ratio: 283 / 361;
  background-color: currentColor; opacity: .16;
  -webkit-mask: var(--logo-src) no-repeat center / contain;
          mask: var(--logo-src) no-repeat center / contain;
}
.media__cap {
  position: absolute; left: 1.15rem; bottom: 1.15rem;
  display: flex; align-items: center; gap: .55rem;
  font-size: var(--t-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: currentColor; opacity: .72;
}
.media__cap::before {
  content: ""; width: .4rem; height: .4rem; border-radius: 50%;
  background: currentColor; flex: none; opacity: .8;
}
.media__note {
  font-size: var(--t-xs); line-height: 1.5; letter-spacing: .01em;
  color: currentColor; opacity: .62; max-width: 24ch;
}
.media__caption { margin-top: .9rem; font-size: var(--t-sm); color: var(--muted); }

/* a small card that overlaps the media — the signature premium composition */
.media-card {
  position: absolute; z-index: 2; display: grid; gap: .25rem;
  padding: 1.1rem 1.35rem; min-width: 12.5rem;
  background: var(--paper); border: 1px solid var(--line-soft); border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
}
.media-card__k { font-size: var(--t-label); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--olive); }
.media-card__v { font-family: var(--font-display); font-variation-settings: var(--vf-display); font-size: 1.28rem; font-weight: 600; color: var(--purple); line-height: 1.15; letter-spacing: -.02em; }
.media-card--br { right: clamp(-1.5rem, -2vw, -.75rem); bottom: 1.75rem; }
.media-card--bl { left: clamp(-1.5rem, -2vw, -.75rem);  bottom: 1.75rem; }
@media (max-width: 47.99rem) {
  /* keep the overlap, but tuck it into the corner the caption does not use */
  .media-card { right: 1rem; left: auto; bottom: 1rem; min-width: 0; padding: .8rem 1.05rem; box-shadow: var(--shadow-sm); }
  .media-card__v { font-size: 1.05rem; }
  /* the offset frame needs room to read as deliberate */
  .feat__media::before { display: none; }
}

/* ----------------------------------------------------------------- cards */
.card {
  display: flex; flex-direction: column; gap: .7rem;
  padding: clamp(1.5rem, 1.1rem + 1.1vw, 2.15rem);
  background: var(--card); border: 1px solid var(--hair); border-radius: var(--r-lg);
  transition: border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.card h3 { color: var(--head); }
.card p { color: var(--muted); font-size: var(--t-sm); line-height: 1.6; }
.card:hover { transform: translateY(-3px); border-color: var(--line-strong); box-shadow: var(--shadow-sm); }
.icon-chip {
  display: grid; place-items: center; width: 2.9rem; height: 2.9rem; margin-bottom: .6rem;
  border: 1px solid var(--hair); border-radius: var(--r-md); color: var(--accent);
}
.icon-chip .icon { width: 1.4rem; height: 1.4rem; }

.grid { display: grid; gap: clamp(1.25rem, .9rem + 1.4vw, 2rem); grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 44rem) { .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 52rem) { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* ======================================================================
   BLOCKS
   ====================================================================== */

/* ---- hero: asymmetric, with an overlapping credential card ---------- */
.hero { padding-block: clamp(3rem, 2rem + 4.5vw, 6.5rem) clamp(3.5rem, 2.4rem + 5vw, 7rem); }
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(58% 62% at 78% 12%, rgba(89,107,47,.09), transparent 70%),
              radial-gradient(46% 50% at 6% 88%, rgba(72,33,82,.055), transparent 72%);
}
.hero__grid { display: grid; gap: clamp(2.75rem, 2rem + 4vw, 5rem); align-items: center; }
.hero__copy { max-width: 36rem; }
.hero__title { margin-bottom: 1.5rem; }
.hero__lead { max-width: 32rem; color: var(--ink-2); }
.hero__media { position: relative; }
.hero__proof {
  display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; align-items: center;
  margin-top: 2.75rem; padding-top: 1.6rem; border-top: 1px solid var(--hair);
}
.hero__proof li { display: flex; align-items: center; gap: .5rem; font-size: var(--t-sm); font-weight: 600; color: var(--ink-2); }
.hero__proof .icon { width: 1.05rem; height: 1.05rem; color: var(--olive); flex: none; stroke-width: 2.2; }
@media (min-width: 62rem) {
  .hero__grid { grid-template-columns: 1.02fr .98fr; }
  .hero--media-left .hero__copy { order: 2; }
  .hero--media-left .hero__media { order: 1; }
}

/* ---- trust strip ---------------------------------------------------- */
.trust { padding-block: 0; }
.trust__row {
  display: grid; grid-template-columns: 1fr; gap: 0;
  border-block: 1px solid var(--hair);
}
.trust__item {
  display: flex; align-items: center; gap: .8rem;
  padding: 1.15rem .25rem;
  font-size: var(--t-sm); font-weight: 600; color: var(--ink-2);
}
.trust__item + .trust__item { border-top: 1px solid var(--hair); }
.trust__item .icon { width: 1.2rem; height: 1.2rem; color: var(--olive); flex: none; }
@media (min-width: 52rem) {
  .trust__row { grid-auto-flow: column; grid-auto-columns: 1fr; }
  .trust__item { justify-content: center; padding-inline: 1rem; }
  .trust__item + .trust__item { border-top: 0; border-left: 1px solid var(--hair); }
}

/* ---- editorial services grid ---------------------------------------- */
.svc { display: grid; gap: 1.35rem; padding-top: 1.5rem; border-top: 1px solid var(--hair); }
.svc__top { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.svc__body { display: grid; gap: .6rem; }
.svc h3 { color: var(--head); }
.svc p { color: var(--muted); font-size: var(--t-sm); line-height: 1.62; }
.svc .media { order: -1; }
.svc__media-wrap { overflow: hidden; border-radius: var(--r-lg); }
.svc .media__frame, .svc .media__well { transition: transform .6s var(--ease); }
.svc:hover .media__frame, .svc:hover .media__well { transform: scale(1.025); }

/* ---- feature split with an offset accent panel ---------------------- */
.feat__grid { display: grid; gap: clamp(2.5rem, 1.8rem + 3.6vw, 5rem); align-items: center; }
.feat__copy { max-width: 34rem; }
.feat__media { position: relative; }
.feat__media::before {
  content: ""; position: absolute; z-index: 0; inset: 2.5rem -1.5rem -1.5rem 2.5rem;
  border: 1px solid var(--accent); border-radius: var(--r-lg); opacity: .35;
}
.feat__media .media { position: relative; z-index: 1; }
@media (min-width: 62rem) {
  .feat__grid { grid-template-columns: 1fr 1fr; }
  .feat--reverse .feat__copy { order: 2; }
  .feat--reverse .feat__media { order: 1; }
  .feat--reverse .feat__media::before { inset: 2.5rem 2.5rem -1.5rem -1.5rem; }
  .feat--wide .feat__grid { grid-template-columns: 1.1fr .9fr; }
}
.checks { display: grid; gap: 1rem; margin-top: 2rem; }
.checks li { display: grid; grid-template-columns: auto 1fr; gap: .85rem; align-items: start; }
.checks .icon { width: 1.15rem; height: 1.15rem; margin-top: .32rem; color: var(--accent); stroke-width: 2.6; flex: none; }
.checks strong { color: var(--head); font-weight: 650; }
.checks span { font-size: var(--t-sm); line-height: 1.6; color: var(--muted); }
.checks strong + span, .checks strong { display: inline; }

/* ---- statement: the one dark, quiet moment -------------------------- */
.stmt__grid { display: grid; gap: clamp(2.5rem, 4vw, 4.5rem); align-items: start; }
.stmt__text {
  font-family: var(--font-display); font-variation-settings: var(--vf-soft);
  font-size: clamp(1.7rem, 1.2rem + 2.1vw, 2.9rem); line-height: 1.22; letter-spacing: -.026em;
  color: #fff; font-weight: 500; text-wrap: balance;
}
.stmt__body { display: grid; gap: 1.15rem; max-width: 34rem; }
.stmt__body p { color: rgba(255,255,255,.72); }
@media (min-width: 62rem) { .stmt__grid { grid-template-columns: 1.1fr .9fr; } }

.stats { display: grid; grid-template-columns: repeat(2, 1fr); margin-top: clamp(3rem, 5vw, 4.5rem); border-top: 1px solid var(--hair); }
.stat { padding: 1.75rem .5rem; }
.stat + .stat { border-left: 1px solid var(--hair); }
.stat:nth-child(3) { border-left: 0; border-top: 1px solid var(--hair); }
.stat:nth-child(4) { border-top: 1px solid var(--hair); }
.stat__v {
  font-family: var(--font-display); font-variation-settings: var(--vf-display);
  font-size: clamp(2rem, 1.5rem + 1.9vw, 3rem); line-height: 1; font-weight: 500;
  color: var(--head); letter-spacing: -.03em;
}
.stat__l { margin-top: .5rem; font-size: var(--t-sm); color: var(--muted); }
@media (min-width: 52rem) {
  .stats { grid-template-columns: repeat(4, 1fr); }
  .stat:nth-child(3), .stat:nth-child(4) { border-top: 0; border-left: 1px solid var(--hair); }
  .stat { padding-inline: 1.75rem; }
  .stat:first-child { padding-left: 0; }
}

/* ---- process -------------------------------------------------------- */
.proc { display: grid; gap: 2.25rem; }
.proc__item { display: grid; gap: .75rem; padding-top: 1.4rem; border-top: 1px solid var(--hair); }
.proc__n {
  font-family: var(--font-display); font-variation-settings: var(--vf-display);
  font-size: 1rem; font-weight: 600; color: var(--accent); letter-spacing: .04em;
}
.proc__item h3 { font-size: var(--t-h3); }
.proc__item p { color: var(--muted); font-size: var(--t-sm); line-height: 1.62; }
@media (min-width: 52rem) { .proc { grid-auto-flow: column; grid-auto-columns: 1fr; gap: clamp(1.5rem, 3vw, 3rem); } }

/* ---- testimonial ---------------------------------------------------- */
.quote { max-width: 46rem; margin-inline: auto; text-align: center; }
.quote__mark { display: block; width: 2rem; height: 2rem; margin-inline: auto; color: var(--accent); opacity: .55; }
.quote blockquote {
  font-family: var(--font-display); font-variation-settings: var(--vf-soft);
  font-size: clamp(1.45rem, 1.05rem + 1.75vw, 2.35rem); line-height: 1.3; letter-spacing: -.024em;
  color: var(--head); font-weight: 500; margin: 1.5rem 0 1.85rem; text-wrap: balance;
}
.quote figcaption { font-size: var(--t-label); font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--muted); }

/* ---- plan / tier cards ---------------------------------------------- */
.plan { position: relative; display: flex; flex-direction: column; padding: clamp(1.6rem, 1.2rem + 1.3vw, 2.4rem); background: var(--card); border: 1px solid var(--hair); border-radius: var(--r-lg); transition: border-color .3s var(--ease), box-shadow .3s var(--ease); }
.plan:hover { border-color: var(--line-strong); box-shadow: var(--shadow-sm); }
.plan__k { font-size: var(--t-label); font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--accent); }
.plan__name { margin-top: .8rem; font-size: var(--t-h3); color: var(--head); }
.plan__price { display: flex; align-items: baseline; gap: .35rem; margin-top: .75rem; font-family: var(--font-display); font-variation-settings: var(--vf-display); font-size: 2rem; font-weight: 500; color: var(--head); letter-spacing: -.03em; }
.plan__price small { font-family: var(--font-body); font-size: var(--t-sm); font-weight: 500; color: var(--muted); letter-spacing: 0; }
.plan__blurb { margin-top: .7rem; font-size: var(--t-sm); line-height: 1.6; color: var(--muted); }
.plan__list { display: grid; gap: .8rem; margin: 1.6rem 0 2rem; padding-top: 1.6rem; border-top: 1px solid var(--hair); }
.plan__list li { display: grid; grid-template-columns: auto 1fr; gap: .75rem; align-items: start; font-size: var(--t-sm); line-height: 1.55; }
.plan__list .icon { width: 1.05rem; height: 1.05rem; margin-top: .3rem; color: var(--accent); stroke-width: 2.6; flex: none; }
.plan .btn { margin-top: auto; }
/* the recommended plan inverts rather than merely scaling */
.plan--feature {
  background: var(--purple); border-color: var(--purple); color: rgba(255,255,255,.76);
  box-shadow: var(--shadow-lg);
}
.plan--feature .plan__name, .plan--feature .plan__price { color: #fff; }
.plan--feature .plan__k, .plan--feature .plan__list .icon { color: var(--lime); }
.plan--feature .plan__blurb, .plan--feature .plan__list li { color: rgba(255,255,255,.75); }
.plan--feature .plan__list { border-top-color: rgba(255,255,255,.16); }
.plan--feature .btn { --b-bg: var(--lime); --b-fg: var(--purple-deep); --b-bd: var(--lime); }
.plan__flag {
  position: absolute; top: 1.4rem; right: 1.4rem;
  padding: .3rem .7rem; border-radius: var(--r-pill);
  background: var(--lime); color: var(--purple-deep);
  font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}

/* ---- FAQ ------------------------------------------------------------ */
.faq { max-width: 52rem; border-top: 1px solid var(--hair); }
.faq__item { border-bottom: 1px solid var(--hair); }
.faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.5rem 0; cursor: pointer; list-style: none;
  font-family: var(--font-display); font-variation-settings: var(--vf-display);
  font-size: var(--t-h3); font-weight: 500; color: var(--head); line-height: 1.3; letter-spacing: -.018em;
  transition: color .22s;
}
.faq__q:hover { color: var(--accent); }
.faq__q::-webkit-details-marker { display: none; }
.faq__sign { position: relative; width: 1rem; height: 1rem; flex: none; }
.faq__sign::before, .faq__sign::after {
  content: ""; position: absolute; left: 50%; top: 50%; background: var(--accent);
  transform: translate(-50%, -50%); transition: transform .3s var(--ease), opacity .25s;
}
.faq__sign::before { width: 1rem; height: 1.5px; }
.faq__sign::after  { width: 1.5px; height: 1rem; }
.faq__item[open] .faq__sign::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.faq__a { padding-bottom: 1.6rem; max-width: 58ch; color: var(--muted); font-size: var(--t-sm); line-height: 1.68; }
.faq__a > * + * { margin-top: .85rem; }

/* ---- long-form document -------------------------------------------- */
.doc { display: grid; gap: clamp(2.5rem, 4vw, 4rem); }
@media (min-width: 64rem) { .doc { grid-template-columns: 14rem 1fr; gap: clamp(3rem, 6vw, 6rem); } }
.doc-nav { position: sticky; top: 7rem; align-self: start; display: grid; gap: .1rem; }
.doc-nav__h { font-size: var(--t-label); font-weight: 700; letter-spacing: .17em; text-transform: uppercase; color: var(--muted); margin-bottom: 1rem; }
.doc-nav a {
  display: block; padding: .5rem 0 .5rem .9rem; font-size: var(--t-sm); font-weight: 500; color: var(--muted);
  border-left: 1px solid var(--hair); transition: color .2s, border-color .2s;
}
.doc-nav a:hover, .doc-nav a.is-active { color: var(--head); border-left-color: var(--accent); font-weight: 600; }
@media (max-width: 63.99rem) { .doc-nav { display: none; } }

.prose { max-width: 44rem; }
.prose > * + * { margin-top: 1.1rem; }
.prose section + section { margin-top: clamp(2.75rem, 4vw, 4rem); padding-top: clamp(2.75rem, 4vw, 4rem); border-top: 1px solid var(--hair); }
.prose section > * + * { margin-top: 1.1rem; }
.prose h2 { font-size: var(--t-h3); }
.prose h3 { font-size: var(--t-h4); }
.prose p, .prose li { color: var(--fg); }
.prose strong { color: var(--head); font-weight: 650; }
.prose ul { display: grid; gap: .8rem; }
.prose ul li { display: grid; grid-template-columns: auto 1fr; gap: .9rem; align-items: start; }
.prose ul li::before { content: ""; width: .3rem; height: .3rem; margin-top: .68rem; border-radius: 50%; background: var(--accent); flex: none; }
/* buttons and text-links carry their own colour — the prose link rule outranks
   `.btn` on specificity and would repaint the label in the fill colour */
.prose a:not(.btn):not(.tlink) { color: var(--accent); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose__aside {
  padding: clamp(1.35rem, 2.5vw, 1.9rem); margin-top: 1.75rem;
  background: var(--canvas-warm); border: 1px solid var(--hair); border-radius: var(--r-md);
}
.prose__aside h3 { margin-top: 0; margin-bottom: .5rem; }
.prose__aside p { font-size: var(--t-sm); }
.prose__meta { font-size: var(--t-label); font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--muted); }

/* ---- forms ---------------------------------------------------------- */
.form { display: grid; gap: 1.4rem; }
.form__row { display: grid; gap: 1.4rem; }
@media (min-width: 40rem) { .form__row--2 { grid-template-columns: 1fr 1fr; } }
.form__card {
  padding: clamp(1.5rem, 1rem + 2.4vw, 3.25rem);
  background: var(--paper); border: 1px solid var(--hair); border-radius: var(--r-xl);
  box-shadow: var(--shadow-md);
}
.field { display: grid; gap: .5rem; align-content: start; }
.field > label { font-size: var(--t-sm); font-weight: 650; color: var(--head); }
.field__hint { font-size: var(--t-xs); color: var(--muted); }
.field input, .field select, .field textarea {
  width: 100%; padding: .95rem 1.1rem;
  background: var(--canvas); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-md);
  outline: none; transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-3); }
.field textarea { min-height: 8.5rem; resize: vertical; }
.field select {
  appearance: none; cursor: pointer; padding-right: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b8175' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center; background-size: 1.1rem;
}
.field input:focus, .field select:focus, .field textarea:focus {
  background: var(--paper); border-color: var(--olive);
  box-shadow: 0 0 0 3px rgba(89,107,47,.12);
}
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--berry); }
.field__err { font-size: var(--t-xs); font-weight: 600; color: var(--berry); }
.field--hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__legal { font-size: var(--t-xs); line-height: 1.6; color: var(--muted); }
.form__foot { display: grid; gap: .8rem; }
.form__foot .actions { margin-top: 0; }
.form__legal a { color: var(--accent); font-weight: 600; }

.alert {
  display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; align-items: start;
  padding: 1.6rem 1.75rem; border-radius: var(--r-lg);
  background: var(--paper); border: 1px solid var(--line);
  border-left: 3px solid var(--olive); box-shadow: var(--shadow-sm);
}
.alert .icon { width: 1.4rem; height: 1.4rem; color: var(--olive); margin-top: .15rem; }
.alert h3 { font-size: var(--t-h3); margin-bottom: .4rem; }
.alert p { font-size: var(--t-sm); color: var(--muted); }
.alert--error { border-left-color: var(--berry); }
.alert--error .icon { color: var(--berry); }

/* ---- invitation panel ----------------------------------------------- */
.invite {
  display: grid; grid-template-columns: 1fr; overflow: hidden;
  background: var(--paper); border: 1px solid var(--hair);
  border-radius: var(--r-xl); box-shadow: var(--shadow-md);
}
.invite__media { position: relative; }
/* the media fills its half of the card edge-to-edge */
.invite__media .media,
.invite__media .media__well,
.invite__media .media__frame { height: 100%; border-radius: 0; border-left: 0; border-top: 0; }
.invite__media .media__well  { border-right: 0; }
@media (max-width: 61.99rem) {
  .invite__media .media__well, .invite__media .media__frame { aspect-ratio: 16 / 9; height: auto; }
}
.invite__body {
  display: grid; align-content: center; gap: 1.15rem;
  padding: clamp(1.75rem, 1.2rem + 2.6vw, 3.5rem);
}
.invite__body h2 { font-size: var(--t-h2); }
.invite__body .lead { color: var(--muted); }
.invite__points { display: grid; gap: .8rem; margin-top: .35rem; }
.invite__points li { display: grid; grid-template-columns: auto 1fr; gap: .75rem; align-items: start; font-size: var(--t-sm); }
.invite__points .icon { width: 1.05rem; height: 1.05rem; margin-top: .3rem; color: var(--accent); stroke-width: 2.6; flex: none; }
.invite__foot { margin-top: .25rem; font-size: var(--t-xs); color: var(--muted); }
.invite .actions { margin-top: .85rem; }
@media (min-width: 62rem) {
  .invite { grid-template-columns: .82fr 1.18fr; }
  .invite--media-right .invite__media { order: 2; }
}

/* ---- modal ----------------------------------------------------------- */
.modal {
  /* the global `* { margin: 0 }` reset kills the UA's `margin: auto`,
     which is what centres a modal <dialog> — put it back */
  margin: auto;
  width: 100%; max-width: min(40rem, calc(100vw - 2rem));
  max-height: min(90dvh, 48rem);
  padding: 0; border: 0; background: transparent; color: var(--ink-2);
  overflow: visible;
}
.modal[open] { display: flex; }
.modal::backdrop {
  background: rgba(46, 18, 54, .58);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.modal__panel {
  flex: 1; min-height: 0; display: flex; flex-direction: column; outline: none;
  background: var(--paper); border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg); overflow: hidden;
}
.modal__head {
  display: flex; align-items: start; justify-content: space-between; gap: 1.5rem;
  padding: 1.35rem clamp(1.35rem, 1rem + 1.4vw, 2rem) 1.15rem;
  border-bottom: 1px solid var(--hair);
}
.modal__head .label { margin-bottom: .55rem; font-size: .7rem; }
.modal__head .label::before { width: 1.25rem; }
.modal__head h2 { font-size: clamp(1.35rem, 1.2rem + .6vw, 1.7rem); }
.modal__lead { margin-top: .45rem; font-size: var(--t-xs); color: var(--muted); max-width: 46ch; }
.modal__close {
  flex: none; display: grid; place-items: center; width: 2.5rem; height: 2.5rem;
  background: var(--canvas); color: var(--ink-2);
  border: 1px solid var(--hair); border-radius: var(--r-pill); cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s;
}
.modal__close:hover { background: var(--purple); border-color: var(--purple); color: #fff; }
.modal__body {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 1.35rem clamp(1.35rem, 1rem + 1.4vw, 2rem) 0;
  overscroll-behavior: contain;
}

/* a compact form: the modal is a task, not a page */
.modal .form { gap: 1rem; }
.modal .form__row { gap: 1rem; }
.modal .field { gap: .3rem; }
.modal .field > label { font-size: .875rem; }
.modal .field input, .modal .field select, .modal .field textarea { padding: .72rem .95rem; }
.modal .field textarea { min-height: 5rem; }
/* mobile has the scroll room — give the message box space to breathe */
@media (max-width: 47.99rem) {
  .modal .field textarea { min-height: 8.5rem; }
}
.modal .field__hint { font-size: .78rem; }

/* the primary action stays put instead of scrolling out of reach */
.modal .form__foot {
  position: sticky; bottom: 0; z-index: 2;
  margin-top: .35rem;
  padding: .95rem 0 clamp(1.15rem, 2.5vw, 1.6rem);
  background: var(--paper);
  border-top: 1px solid var(--hair);
  box-shadow: 0 -18px 22px -20px rgba(46, 18, 54, .22);
}
.modal .form__foot .btn { min-height: 3.25rem; padding-inline: 2rem; }
body.modal-open { overflow: hidden; }

.modal__done { display: grid; justify-items: start; gap: .9rem; }
.modal__done-mark {
  width: 3rem; aspect-ratio: 283 / 361; margin-bottom: .35rem;
  background-color: var(--olive); opacity: .9;
  -webkit-mask: var(--logo-src) no-repeat center / contain;
          mask: var(--logo-src) no-repeat center / contain;
}
.modal__done p { color: var(--fg); }
.modal__done-sub { font-size: var(--t-sm); color: var(--muted); }
.modal__done-sub a { color: var(--accent); font-weight: 600; }
.modal__done .actions { margin-top: .75rem; }

@keyframes modal-in   { from { opacity: 0; transform: translateY(14px) scale(.985); } }
@keyframes modal-fade { from { opacity: 0; } }
.modal[open] .modal__panel { animation: modal-in .42s var(--ease-out) both; }
.modal[open]::backdrop     { animation: modal-fade .3s ease both; }
@media (prefers-reduced-motion: reduce) {
  .modal[open] .modal__panel, .modal[open]::backdrop { animation: none; }
}

/* ---- contact -------------------------------------------------------- */
.contact-card { gap: .45rem; }
.contact-card__v { display: inline-block; padding-block: .35rem; font-family: var(--font-display); font-variation-settings: var(--vf-display); font-size: 1.15rem; font-weight: 600; color: var(--head); letter-spacing: -.015em; overflow-wrap: break-word; transition: color .2s; }
a.contact-card__v:hover { color: var(--accent); }
.contact-card__n { font-size: var(--t-xs); color: var(--muted); }

/* ---- CTA ------------------------------------------------------------ */
.cta { position: relative; overflow: hidden; }
.cta__inner { position: relative; z-index: 1; display: grid; gap: 1.75rem; justify-items: center; text-align: center; }
.cta__title { max-width: 18ch; }
.cta__lead { max-width: 48ch; color: rgba(255,255,255,.72); }
.cta__mark {
  position: absolute; right: -3rem; bottom: -6rem; width: 22rem; aspect-ratio: 283 / 361;
  background-color: #fff; opacity: .04; pointer-events: none;
  -webkit-mask: var(--logo-src) no-repeat center / contain;
          mask: var(--logo-src) no-repeat center / contain;
}
@media (min-width: 58rem) {
  .cta--row .cta__inner { grid-template-columns: 1fr auto; align-items: center; justify-items: start; text-align: left; gap: 3rem; }
  .cta--row .actions { margin-top: 0; }
}

/* ---- page banner ---------------------------------------------------- */
.banner { padding-block: clamp(3.25rem, 2.4rem + 4vw, 5.5rem) clamp(2.5rem, 1.9rem + 3vw, 4rem); }
.banner__grid { display: grid; gap: clamp(1.75rem, 3.5vw, 3.5rem); align-items: end; }
.banner__copy { max-width: 44rem; }
.banner__lead { margin-top: 1.35rem; max-width: 38rem; }
.banner__side { max-width: 30rem; }
.banner__side .lead { color: var(--muted); }
.banner__side .actions { margin-top: 1.75rem; }
/* hairline closes the masthead and sets up the content below */
.banner::after {
  content: ""; position: absolute; left: var(--pad); right: var(--pad); bottom: 0; height: 1px; background: var(--hair);
}
@media (min-width: 62rem) {
  .banner--split .banner__grid { grid-template-columns: 1.15fr .85fr; align-items: center; }
  .banner--cols  .banner__grid { grid-template-columns: 1.2fr .8fr; align-items: end; }
  .banner--cols  .banner__side { padding-bottom: .5rem; }
}
@media (min-width: 80rem) { .banner::after { left: max(var(--pad), calc((100vw - var(--shell)) / 2 + var(--pad))); right: max(var(--pad), calc((100vw - var(--shell)) / 2 + var(--pad))); } }

/* ======================================================================
   MOTION
   ====================================================================== */
[data-reveal] { opacity: 0; transform: translateY(16px); }
.js [data-reveal] { transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); transition-delay: var(--d, 0ms); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
html:not(.js) [data-reveal] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}
@media print {
  .site-header, .site-nav, .nav-scrim, .site-footer, .actions, .media { display: none !important; }
  body { background: #fff; color: #000; }
  .section { padding-block: 1.5rem; background: #fff !important; color: #000 !important; }
}