/* ==========================================================================
   landing.css — the tree landing page.
   All colours, type and spacing come from tokens.css. No raw hex below.

   1. Reset + primitives     5. Side panel
   2. Header bar             6. Services strip
   3. Intro                  7. Contact + form
   4. The stage (tree, parts, dots, pointer lines)    8. Footer
   ========================================================================== */

/* --------------------------------------------------- 1. RESET + PRIMITIVES */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scrollbar-gutter: stable; }
body {
  margin: 0; background: var(--cream); color: var(--bark);
  font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
body.panel-open { overflow: hidden; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 {
  font-family: var(--font-display); color: var(--ink); font-weight: 600;
  letter-spacing: var(--ls-tight); line-height: var(--lh-tight); margin: 0 0 var(--s4);
}
p { margin: 0 0 var(--s4); }
a { color: var(--gold-text); }
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--gold); outline-offset: 3px; border-radius: var(--r-sm);
}
.skip-link {
  position: absolute; left: var(--s4); top: -100vh; z-index: 300;
  background: var(--grove); color: var(--on-dark); padding: var(--s3) var(--s5); border-radius: var(--r-md);
}
.skip-link:focus { top: var(--s4); }
[hidden] { display: none !important; }

.eyebrow {
  font-size: var(--fs-micro); font-weight: 600; letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase; color: var(--gold-text); margin-bottom: var(--s4);
}
.eyebrow--light { color: var(--gold); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  padding: 0.75rem 1.35rem; border-radius: var(--r-md); border: 1px solid transparent;
  font-size: var(--fs-sm); font-weight: 600; text-decoration: none; cursor: pointer;
  transition: background var(--dur) var(--ease), transform var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.bar .btn { white-space: nowrap; }
@media (max-width: 420px) { .bar .btn { padding: 0.6rem 1rem; } .brand__sub { letter-spacing: 0.1em; } }
.btn--primary { background: var(--gold); color: var(--grove); box-shadow: var(--sh-sm); }
.btn--primary:hover { background: var(--gold-line); box-shadow: var(--sh-md); }
.btn--ghost-dark { border-color: var(--on-dark-line); color: var(--on-dark); background: transparent; }
.btn--ghost-dark:hover { border-color: var(--gold); background: var(--gold-a12); }
.btn--lg { padding: 0.95rem 1.8rem; font-size: var(--fs-body); }
.btn--block { width: 100%; }

/* ------------------------------------------------------------ 2. HEADER */
.bar {
  position: sticky; top: 0; z-index: 50;
  background: var(--cream-a92); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--stone);
}
.bar__inner {
  max-width: var(--container); margin: 0 auto; padding: var(--s3) var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
}
.bar__nav { display: flex; align-items: center; gap: var(--s4); }
.bar__link {
  font-size: var(--fs-sm); font-weight: 600; color: var(--ink); text-decoration: none;
  padding-block: var(--s2); border-bottom: 1.5px solid transparent; white-space: nowrap;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.bar__link:hover { border-bottom-color: var(--gold); color: var(--gold-text); }
/* Phones: logo + two actions must fit on one line. The subtitle goes first. */
@media (max-width: 480px) {
  .bar .brand__sub { display: none; }
  .bar__nav { gap: var(--s3); }
  .bar .btn { padding: 0.55rem 0.9rem; }
}
/* The smallest phones: the tree mark alone carries the brand. */
@media (max-width: 380px) { .bar .brand__text { display: none; } }
.brand { display: inline-flex; align-items: center; gap: var(--s3); text-decoration: none; color: var(--ink); }
.brand__mark { width: 40px; height: 40px; flex: none; }
.brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.brand__name { font-family: var(--font-display); font-size: 1.125rem; font-weight: 600; }
.brand__sub { font-size: var(--fs-micro); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--slate); font-weight: 500; }

/* ------------------------------------------------------------- 3. INTRO */
.intro {
  text-align: center; max-width: 46rem; margin: 0 auto;
  padding: clamp(2rem, 1rem + 3vw, 3.5rem) var(--gutter) 0;
}
.intro h1 { font-size: var(--fs-h1); margin-bottom: var(--s4); }
.intro h1 em { font-style: italic; font-weight: 400; color: var(--gold-text); }
.intro__lead { font-size: var(--fs-lead); color: var(--slate); line-height: 1.55; margin: 0; }

/* ------------------------------------------------------------- 4. STAGE
   Desktop: the tree sits in the middle column; the parts list is an overlay
   grid with the same three columns, two parts on each side, alternating
   down the tree (leaves, branches, trunk, roots). landing.js draws the
   pointer lines into the SVG on top.                                    */
.stage {
  /* Sized so the whole tree, and the Roots label under it, fit on a laptop
     screen, while leaving the side columns room for a one-line goal name. */
  --tree: clamp(360px, min(40vw, 100vh - 330px), 580px);
  position: relative; max-width: 1360px; margin: 0 auto;
  padding: var(--s5) var(--gutter) var(--s8);
  display: grid; grid-template-columns: minmax(0, 1fr) var(--tree) minmax(0, 1fr);
}
.stage__tree { grid-column: 2; position: relative; aspect-ratio: 1; }
.tree { width: 100%; height: auto; }

/* A soft cream-to-gold glow behind the tree. */
.stage__tree::before {
  content: ""; position: absolute; inset: 6%; border-radius: 50%; z-index: -1;
  background: radial-gradient(circle at 50% 55%, var(--gold-faint) 0%, var(--cream) 70%);
}

.parts {
  list-style: none; margin: 0; padding: 0;
  position: absolute; inset: var(--s5) var(--gutter) var(--s8);
  display: grid; grid-template-columns: minmax(0, 1fr) var(--tree) minmax(0, 1fr);
  grid-template-rows: repeat(4, 1fr);
  pointer-events: none;
}
.part { pointer-events: auto; align-self: center; }
.part--leaves   { grid-column: 1; grid-row: 1; }
.part--branches { grid-column: 3; grid-row: 2; }
.part--trunk    { grid-column: 1; grid-row: 3; }
.part--roots    { grid-column: 3; grid-row: 4; }

.part__btn {
  display: flex; align-items: center; gap: var(--s4); width: 100%;
  background: none; border: 0; padding: var(--s2); cursor: pointer; text-align: left;
  border-radius: var(--r-lg);
}
/* Left-hand parts read toward the tree: text, then circle. */
.part--leaves .part__btn, .part--trunk .part__btn { flex-direction: row-reverse; text-align: right; }

.part__ring {
  flex: none; width: 108px; height: 108px; border-radius: 50%;
  background: var(--paper); box-shadow: var(--sh-md);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease);
}
.part__img { width: 100%; height: 100%; border-radius: 50%; }
.part__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.part__name {
  font-size: var(--fs-micro); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--slate); display: inline-flex; gap: var(--s2); align-items: baseline;
}
.part--leaves .part__name, .part--trunk .part__name { justify-content: flex-end; }
.part__n { font-family: var(--font-mono); color: var(--gold-text); letter-spacing: 0.04em; }
.part__goal {
  font-family: var(--font-display); font-size: clamp(1.2rem, 1rem + 0.7vw, 1.6rem);
  font-weight: 600; color: var(--ink); line-height: 1.15;
}
.part__short { font-size: var(--fs-xs); color: var(--slate); line-height: 1.45; max-width: 16rem; }
.part__goal { white-space: nowrap; }
@media (max-width: 1180px) and (min-width: 901px) {
  .part__ring { width: 84px; height: 84px; }
  .part__btn { gap: var(--s3); }
  .part__goal { font-size: 1.15rem; }
}
.part--leaves .part__short, .part--trunk .part__short { margin-left: auto; }
.part__more {
  margin-top: var(--s1); font-size: var(--fs-xs); font-weight: 600; color: var(--gold-text);
  opacity: 0; transform: translateY(-2px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.part__more::after { content: " \2192"; }

.part__btn:hover .part__ring, .part__btn:focus-visible .part__ring, .part__btn.is-active .part__ring {
  transform: scale(1.07); box-shadow: 0 0 0 3px var(--gold-soft), var(--sh-lg);
}
.part__btn:hover .part__more, .part__btn:focus-visible .part__more, .part__btn.is-active .part__more { opacity: 1; transform: none; }

/* While one part is hovered or focused, the others step back. */
.part, .leader, .hotspot { transition: opacity var(--dur) var(--ease); }
.stage.is-hl .part, .stage.is-hl .leader, .stage.is-hl .hotspot { opacity: 0.4; }
.stage.is-hl-roots .part--roots, .stage.is-hl-roots .leader--roots, .stage.is-hl-roots .hotspot--roots,
.stage.is-hl-trunk .part--trunk, .stage.is-hl-trunk .leader--trunk, .stage.is-hl-trunk .hotspot--trunk,
.stage.is-hl-branches .part--branches, .stage.is-hl-branches .leader--branches, .stage.is-hl-branches .hotspot--branches,
.stage.is-hl-leaves .part--leaves, .stage.is-hl-leaves .leader--leaves, .stage.is-hl-leaves .hotspot--leaves { opacity: 1; }

/* Dots on the tree. */
.hotspots { position: absolute; inset: 0; }
.hotspot {
  position: absolute; width: 30px; height: 30px; margin: -15px 0 0 -15px; padding: 0;
  border: 0; background: none; cursor: pointer; border-radius: 50%;
}
.hotspot span {
  position: absolute; inset: 8px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 0 3px var(--paper), 0 2px 8px var(--shadow-a28);
  transition: transform var(--dur) var(--ease-out);
}
.hotspot span::after {
  content: ""; position: absolute; inset: -6px; border-radius: 50%;
  border: 1.5px solid var(--gold); opacity: 0;
  animation: pulse 2.6s var(--ease-out) infinite;
}
.hotspot--trunk span::after    { animation-delay: 0.65s; }
.hotspot--branches span::after { animation-delay: 1.3s; }
.hotspot--leaves span::after   { animation-delay: 1.95s; }
@keyframes pulse { 0% { transform: scale(0.6); opacity: 0.9; } 100% { transform: scale(1.8); opacity: 0; } }
.stage.is-hl .hotspot span, .stage[data-active] .hotspot span { transform: scale(1); }
.stage.is-hl-roots .hotspot--roots span, .stage.is-hl-trunk .hotspot--trunk span,
.stage.is-hl-branches .hotspot--branches span, .stage.is-hl-leaves .hotspot--leaves span { transform: scale(1.35); }

/* Pointer lines. */
.leaders { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.leader {
  stroke: var(--gold); stroke-width: 1.25; stroke-linecap: round;
  stroke-dasharray: var(--len); stroke-dashoffset: 0;
}

/* Entrance: tree settles, parts rise in from the ground up, lines draw.
   Everything is in its final state unless motion is allowed. */
@media (prefers-reduced-motion: no-preference) {
  .tree, .part { transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); }
  .part { transition-delay: calc(250ms + var(--i) * 110ms); }
  .leader { transition: stroke-dashoffset 700ms var(--ease-out) 700ms, opacity var(--dur) var(--ease); }
  body:not(.is-ready) .tree { opacity: 0; transform: scale(0.97); }
  body:not(.is-ready) .part { opacity: 0; transform: translateY(10px); }
  body:not(.is-ready) .leader { stroke-dashoffset: var(--len); }
}
@media (prefers-reduced-motion: reduce) {
  .hotspot span::after { animation: none; }
}

/* Phones and small tablets: tree on top, parts as a list of cards below. */
@media (max-width: 900px) {
  .stage { display: block; padding-bottom: var(--s7); }
  .stage__tree { width: min(88vw, 460px); margin: 0 auto; }
  .parts {
    position: static; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: none;
    gap: var(--s3); margin: var(--s5) auto 0; max-width: 34rem; pointer-events: auto;
  }
  .part { grid-column: auto !important; grid-row: auto !important; }
  .part__btn, .part--leaves .part__btn, .part--trunk .part__btn {
    flex-direction: row; text-align: left;
    background: var(--paper); border: 1px solid var(--stone); padding: var(--s3) var(--s4);
  }
  .part--leaves .part__name, .part--trunk .part__name { justify-content: flex-start; }
  .part--leaves .part__short, .part--trunk .part__short { margin-left: 0; }
  .part__ring { width: 76px; height: 76px; }
  .part__more { opacity: 1; transform: none; }
  .leaders { display: none; }
}

/* ------------------------------------------------------------- 5. PANEL */
.scrim {
  position: fixed; inset: 0; z-index: 90; background: var(--grove-a28);
  opacity: 0; transition: opacity 300ms var(--ease);
}
.panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 100;
  width: min(560px, 100vw); background: var(--paper);
  box-shadow: -18px 0 50px var(--shadow-a28);
  display: flex; flex-direction: column;
  transform: translateX(104%); transition: transform 320ms var(--ease-out);
}
.panel:focus { outline: none; }
body.panel-open .scrim { opacity: 1; }
body.panel-open .panel { transform: none; }

.panel__scroll { flex: 1; overflow-y: auto; padding: var(--s7) var(--s7) var(--s6); position: relative; }
@media (max-width: 560px) { .panel__scroll { padding: var(--s6) var(--s5) var(--s5); } }
.panel__close {
  position: absolute; top: var(--s4); right: var(--s4); width: 40px; height: 40px;
  display: grid; place-items: center; border-radius: 50%;
  border: 1px solid var(--stone); background: var(--paper); color: var(--ink); cursor: pointer;
}
.panel__close:hover { border-color: var(--gold); background: var(--gold-faint); }
.panel__close svg { width: 16px; height: 16px; }

.panel__head { display: flex; align-items: center; gap: var(--s5); margin-bottom: var(--s5); padding-right: var(--s7); }
.panel__img { width: 112px; height: 112px; flex: none; border-radius: 50%; box-shadow: var(--sh-md); }
.panel__part {
  font-size: var(--fs-micro); font-weight: 600; letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase; color: var(--gold-text); margin: 0 0 var(--s1);
}
.panel__goal { font-size: clamp(1.7rem, 1.4rem + 1vw, 2.2rem); margin: 0 0 var(--s2); }
.panel__service {
  display: inline-block; font-size: var(--fs-micro); font-weight: 600; letter-spacing: 0.06em;
  color: var(--grove); background: var(--sage-soft); border-radius: var(--r-pill); padding: 3px 10px;
}
.panel__tagline {
  font-family: var(--font-display); font-style: italic; font-size: var(--fs-h4);
  color: var(--ink); border-left: 3px solid var(--gold); padding-left: var(--s4); margin-bottom: var(--s4);
}
.panel__intro { font-size: var(--fs-sm); }
.panel__h {
  font-family: var(--font-body); font-size: var(--fs-micro); font-weight: 700;
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--slate);
  margin: var(--s6) 0 var(--s3); line-height: 1.4;
}
.panel__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.panel__list li { position: relative; padding-left: 1.9rem; font-size: var(--fs-sm); line-height: 1.5; }
.panel__list li::before {
  content: ""; position: absolute; left: 0; top: 0.1rem; width: 1.25rem; height: 1.25rem; border-radius: 50%;
}
/* Strong: a sage disc with a check. Needs attention: a gold ring with a dash. */
.panel__list--strong li::before {
  background: var(--sage-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.6 2.6L12 5.4' fill='none' stroke='%2323271C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 70% no-repeat;
}
.panel__list--warn li { color: var(--slate); }
.panel__list--warn li::before {
  border: 1.5px solid var(--gold-line);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 8h6' stroke='%23836420' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / 70% no-repeat;
}
.panel__help {
  font-size: var(--fs-sm); background: var(--gold-faint); border: 1px solid var(--gold-line);
  border-radius: var(--r-lg); padding: var(--s4) var(--s5); color: var(--ink); margin-bottom: var(--s5);
}
.panel__nav {
  display: flex; justify-content: space-between; gap: var(--s3);
  border-top: 1px solid var(--stone); padding: var(--s3) var(--s5); background: var(--cream);
}
.panel__step {
  background: none; border: 0; cursor: pointer; padding: var(--s2) var(--s2);
  font-size: var(--fs-xs); font-weight: 600; color: var(--gold-text); border-radius: var(--r-sm);
}
.panel__step:hover { color: var(--ink); }

/* ------------------------------------------------------------ 6. SERVICES */
.services { background: var(--sage-faint); border-block: 1px solid var(--stone); }
.services__inner {
  max-width: var(--container); margin: 0 auto; padding: var(--s7) var(--gutter);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5);
}
@media (max-width: 760px) { .services__inner { grid-template-columns: minmax(0, 1fr); gap: var(--s4); } }
.service { display: grid; gap: var(--s1); }
.service__n { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--gold-text); }
.service strong { font-family: var(--font-display); font-size: var(--fs-h3); color: var(--ink); font-weight: 600; }
.service span:last-child { font-size: var(--fs-sm); color: var(--slate); }

/* ------------------------------------------------------ 6b. TWO WAYS IN */
.begin { background: var(--cream); scroll-margin-top: 64px; }
.begin__inner { max-width: 1040px; margin: 0 auto; padding: var(--section-y) var(--gutter); text-align: center; }
.begin h2 { font-size: var(--fs-h2); margin-bottom: var(--s7); }
.choices-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); text-align: left; align-items: stretch; }
@media (max-width: 760px) { .choices-2 { grid-template-columns: minmax(0, 1fr); } }
.choice-card {
  position: relative; display: flex; flex-direction: column; gap: var(--s2);
  background: var(--paper); border: 1px solid var(--stone); border-radius: var(--r-xl);
  padding: var(--s6); box-shadow: var(--sh-sm);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.choice-card:hover { transform: translateY(-3px); box-shadow: var(--sh-lg); border-color: var(--gold-line); }
.choice-card--feature { border: 1.5px solid var(--gold); box-shadow: 0 0 0 4px var(--gold-faint), var(--sh-md); }
.choice-card__flag {
  position: absolute; top: var(--s5); right: var(--s5);
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--grove); background: var(--gold-soft); border-radius: var(--r-pill); padding: 3px 10px;
}
.choice-card__img { width: 72px; height: 72px; border-radius: 50%; box-shadow: var(--sh-md); margin-bottom: var(--s3); }
.choice-card .choice-card__meta { font-size: var(--fs-micro); font-weight: 600; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--gold-text); margin: 0; }
.choice-card h3 { font-size: clamp(1.35rem, 1.2rem + 0.6vw, 1.7rem); margin: 0 0 var(--s1); }
.choice-card p { font-size: var(--fs-sm); margin: 0; }
.choice-card__list { list-style: none; margin: var(--s2) 0 0; padding: 0; display: grid; gap: var(--s2); }
.choice-card__list li { position: relative; padding-left: 1.6rem; font-size: var(--fs-sm); color: var(--ink); line-height: 1.45; }
.choice-card__list li::before {
  content: ""; position: absolute; left: 0; top: 0.12rem; width: 1.05rem; height: 1.05rem; border-radius: 50%;
  background: var(--sage-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.6 2.6L12 5.4' fill='none' stroke='%2323271C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 70% no-repeat;
}
.choice-card__btn { margin-top: auto; align-self: flex-start; }
/* Space above the button without undoing margin-top:auto, so both cards
   keep their buttons level at the bottom. */
.choice-card > :nth-last-child(2) { margin-bottom: var(--s5); }
.btn--ghost { border-color: var(--stone); color: var(--ink); background: transparent; }
.btn--ghost:hover { border-color: var(--gold); background: var(--gold-faint); }
@media (max-width: 480px) { .choice-card { padding: var(--s5); } .choice-card__flag { top: var(--s4); right: var(--s4); } }

/* ------------------------------------------------------------- 7. CONTACT */
.contact { background: var(--grove); color: var(--on-dark-2); scroll-margin-top: 64px; }
.contact__inner {
  max-width: var(--container); margin: 0 auto; padding: var(--section-y) var(--gutter);
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: start;
}
@media (max-width: 900px) { .contact__inner { grid-template-columns: minmax(0, 1fr); } }
.contact h2 { color: var(--on-dark); font-size: var(--fs-h2); }
.contact__direct { list-style: none; margin: var(--s6) 0 0; padding: 0; display: grid; gap: var(--s3); }
.contact__direct a, .contact__direct span { color: var(--on-dark); font-size: var(--fs-sm); text-decoration: none; }
.contact__direct a:hover { color: var(--gold); }
.contact__direct .btn { color: var(--on-dark); }
.contact__check { margin-top: var(--s6); padding: var(--s4) var(--s5); border: 1px solid var(--on-dark-line); border-radius: var(--r-lg); font-size: var(--fs-sm); }
.contact__check a { color: var(--gold); font-weight: 600; }

.form {
  background: var(--paper); border-radius: var(--r-xl); padding: var(--s7);
  box-shadow: var(--sh-lg); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4);
}
.form__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s4); }
@media (max-width: 560px) { .form__row { grid-template-columns: minmax(0, 1fr); } .form { padding: var(--s5); } }
.field { display: grid; gap: var(--s2); min-width: 0; }
.field > label { font-size: var(--fs-xs); font-weight: 600; color: var(--ink); }
.field .req { color: var(--rust-text); }
.field input, .field select, .field textarea {
  width: 100%; padding: 0.75rem 0.9rem; border-radius: var(--r-md);
  border: 1px solid var(--stone); background: var(--cream); color: var(--ink); font-size: var(--fs-sm);
}
.field textarea { resize: vertical; min-height: 120px; }
.field input:focus, .field select:focus, .field textarea:focus { background: var(--paper); border-color: var(--gold); }
.field [aria-invalid="true"] { border-color: var(--rust-text); }
.field__err { font-size: var(--fs-micro); color: var(--rust-text); min-height: 1em; }
.form__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s4); }
.form__note { font-size: var(--fs-micro); color: var(--slate); margin: 0; flex: 1 1 14rem; }
.form__status {
  border-radius: var(--r-md); padding: var(--s4); font-size: var(--fs-sm);
  background: var(--gold-faint); border: 1px solid var(--gold-line); color: var(--ink);
}
.form__echo { display: block; margin-top: var(--s3); white-space: pre-wrap; font-size: var(--fs-micro); color: var(--bark); }

/* -------------------------------------------------------------- 8. FOOTER */
.footer {
  background: var(--grove-900); color: var(--on-dark-3);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s3);
  padding: var(--s5) var(--gutter); font-size: var(--fs-xs);
}
.noscript { text-align: center; padding: var(--s5); }