/* ==========================================================================
   New Living Health Care Services, LLC
   Design system + site styles
   --------------------------------------------------------------------------
   Type:   Fraunces (display) + Public Sans (body/utility, USWDS civic face)
   Colour: forest-green ground, sage support, amber "light of hope"
   Motion: one orchestrated thread; everything else quiet
   ========================================================================== */

/* --------------------------------------------------------------- 1. Tokens */
:root {
  /* Colour */
  --ink:        #1C3A26;   /* primary text, dark ground */
  --ink-deep:   #12251A;   /* footer, hero ground */
  --ink-soft:   #47604C;   /* secondary text */
  --paper:      #F3F5EE;   /* page ground */
  --paper-warm: #EAF0E2;   /* alternating band */
  --line:       #CED9C8;   /* hairlines on paper */
  --line-dark:  #2E4C38;   /* hairlines on ink */
  --amber:      #E4A140;   /* the light — accent, used sparingly */
  --amber-deep: #C2822A;   /* amber on light bg for AA text contrast */
  --sage:       #7DA383;   /* supportive, calm */
  --sage-tint:  #DEE9DB;   /* soft fills */
  --white:      #FFFFFF;
  --danger:     #B4442F;   /* crisis / urgent only */

  /* Type */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body:    "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --fs-hero: clamp(2.7rem, 6.2vw, 5.1rem);
  --fs-h1:   clamp(2.1rem, 4.4vw, 3.3rem);
  --fs-h2:   clamp(1.6rem, 3vw, 2.3rem);
  --fs-h3:   clamp(1.15rem, 1.6vw, 1.35rem);
  --fs-lead: clamp(1.1rem, 1.5vw, 1.3rem);
  --fs-body: 1.0625rem;   /* 17px — audience includes older & impaired readers */
  --fs-sm:   0.9375rem;
  --fs-xs:   0.8125rem;

  /* Space */
  --sp-1: 0.5rem;  --sp-2: 0.875rem; --sp-3: 1.25rem; --sp-4: 2rem;
  --sp-5: 3rem;    --sp-6: 4.5rem;   --sp-7: 7rem;

  --shell: 1180px;
  --rail: 88px;        /* left thread rail, desktop */
  --radius: 4px;       /* restrained, institutional */
  --radius-lg: 10px;

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------------------------------------------------------- 2. Base reset */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 var(--sp-3);
  font-variation-settings: "SOFT" 0, "WONK" 0;
}

p { margin: 0 0 var(--sp-3); max-width: 68ch; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }

ul, ol { margin: 0 0 var(--sp-3); padding-left: 1.25rem; }
li { margin-bottom: 0.4rem; }

hr { border: 0; border-top: 1px solid var(--line); margin: var(--sp-5) 0; }

::selection { background: var(--amber); color: var(--ink-deep); }

/* Accessible focus — never removed */
:focus-visible {
  outline: 3px solid var(--amber);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute; left: var(--sp-3); top: -100px; z-index: 999;
  background: var(--ink-deep); color: var(--white);
  padding: var(--sp-2) var(--sp-3); border-radius: var(--radius);
  transition: top .2s var(--ease);
}
.skip-link:focus { top: var(--sp-3); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------- 3. Layout shells */
.shell {
  width: min(100% - 2.5rem, var(--shell));
  margin-inline: auto;
}

.section { padding: var(--sp-6) 0; }
.section--tight { padding: var(--sp-5) 0; }
.section--warm { background: var(--paper-warm); }
.section--ink { background: var(--ink-deep); color: #E7EFE7; }
.section--ink h2, .section--ink h3 { color: var(--white); }
.section--ink p { color: #BCCDBE; }
.section--ink a { color: var(--amber); }
/* Buttons keep their own colours inside ink sections — without these, the
   .section--ink a rule outweighs .btn--primary and paints amber on amber. */
.section--ink .btn--primary { color: var(--ink-deep); }
.section--ink .btn--onink { color: var(--white); }
.section--ink .btn--onink:hover { color: var(--ink-deep); }

/* On desktop the content sits to the right of the thread rail */
@media (min-width: 1080px) {
  .shell { padding-left: var(--rail); }
}

/* --------------------------------------------------- 4. Eyebrows & labels */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--amber-deep);
  margin: 0 0 var(--sp-2);
  display: flex; align-items: center; gap: 0.6rem;
}
.eyebrow::after {
  content: ""; flex: 1; height: 1px; background: var(--line); max-width: 120px;
}
.section--ink .eyebrow { color: var(--amber); }
.section--ink .eyebrow::after { background: var(--line-dark); }

.lead { font-size: var(--fs-lead); line-height: 1.6; color: var(--ink-soft); max-width: 62ch; }
.section--ink .lead { color: #C8D6C8; }

/* ------------------------------------------------------- 5. Crisis banner */
.crisis-bar {
  background: var(--ink-deep);
  color: var(--white);
  font-size: var(--fs-sm);
  border-bottom: 1px solid var(--line-dark);
}
.crisis-bar__inner {
  width: min(100% - 2.5rem, var(--shell));
  margin-inline: auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.5rem;
  padding: 0.6rem 0;
}
.crisis-bar__flag {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-weight: 700; letter-spacing: 0.04em;
}
.crisis-bar__dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--amber);
  box-shadow: 0 0 0 0 rgba(228,161,64,.6);
  animation: pulse 2.6s infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(228,161,64,.55); }
  70%  { box-shadow: 0 0 0 9px rgba(228,161,64,0); }
  100% { box-shadow: 0 0 0 0 rgba(228,161,64,0); }
}
.crisis-bar a { color: var(--amber); font-weight: 600; text-decoration: none; }
.crisis-bar a:hover { text-decoration: underline; }

/* --------------------------------------------------------- 6. Site header */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(243,245,238,.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  width: min(100% - 2.5rem, var(--shell));
  margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3);
  min-height: 74px;
}

.brand { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; }
.brand__mark { width: 34px; height: auto; flex: none; }
/* Official tree-of-hands logo: black hands need a light ground. On dark
   surfaces (footer) render it as a white silhouette. */
.brand__mark--light { filter: brightness(0) invert(1); opacity: .92; }
.brand__name {
  font-family: var(--font-display); font-weight: 600; font-size: 1.05rem;
  line-height: 1.15; letter-spacing: -0.01em;
}
.brand__sub {
  display: block; font-family: var(--font-body); font-size: 0.6875rem;
  font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--ink-soft);
}

.nav { display: flex; align-items: center; gap: var(--sp-3); }
.nav__list { display: flex; gap: var(--sp-3); list-style: none; margin: 0; padding: 0; }
.nav__link {
  text-decoration: none; font-size: var(--fs-sm); font-weight: 500;
  padding: 0.4rem 0; position: relative; color: var(--ink-soft);
  transition: color .2s var(--ease);
}
.nav__link::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0;
  background: var(--amber); transition: width .25s var(--ease);
}
.nav__link:hover { color: var(--ink); }
.nav__link:hover::after { width: 100%; }
.nav__link[aria-current="page"] { color: var(--ink); font-weight: 700; }
.nav__link[aria-current="page"]::after { width: 100%; }

.nav-toggle {
  display: none; background: none; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 0.55rem 0.65rem; cursor: pointer;
}
.nav-toggle__bar {
  display: block; width: 20px; height: 2px; background: var(--ink);
  transition: transform .25s var(--ease), opacity .2s var(--ease);
}
.nav-toggle__bar + .nav-toggle__bar { margin-top: 5px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 900px) {
  /* backdrop-filter turns the header into the containing block for fixed
     descendants, which pinned the slide-out nav to the header's 74px box and
     left the menu list floating transparent over page content. On mobile the
     header goes solid instead, so the nav panel anchors to the viewport. */
  .site-header { background: var(--paper); backdrop-filter: none; -webkit-backdrop-filter: none; }

  .nav-toggle { display: block; }

  /* Scrim behind the open menu — dims the page so the panel reads as a layer */
  body.nav-open::before {
    content: ""; position: fixed; inset: 0; z-index: 55;
    background: rgba(18, 37, 26, .45);
  }

  .nav {
    position: fixed; inset: 0 0 0 auto; width: min(84vw, 340px);
    background: var(--paper); border-left: 1px solid var(--line);
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    padding: 6rem var(--sp-4) var(--sp-4);
    transform: translateX(100%); transition: transform .3s var(--ease);
    box-shadow: -20px 0 50px rgba(18,37,26,.12);
  }
  .nav.is-open { transform: translateX(0); }
  .nav__list { flex-direction: column; gap: 0; }
  .nav__link { display: block; padding: 0.9rem 0; font-size: 1.05rem; border-bottom: 1px solid var(--line); }
  .nav__link::after { display: none; }
  .nav .btn { margin-top: var(--sp-3); }
}

/* ------------------------------------------------------------- 7. Buttons */
/* UIverse-idiom components, written from scratch. See README for swapping in
   attributed uiverse.io snippets. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 700;
  letter-spacing: 0.01em; text-decoration: none; cursor: pointer;
  padding: 0.85rem 1.5rem; border-radius: var(--radius); border: 1.5px solid transparent;
  min-height: 48px;                    /* comfortable tap target */
  position: relative; overflow: hidden;
  transition: transform .2s var(--ease), background .2s var(--ease),
              color .2s var(--ease), border-color .2s var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--amber); color: var(--ink-deep); }
.btn--primary::before {
  content: ""; position: absolute; inset: 0; transform: translateX(-101%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
  transition: transform .55s var(--ease);
}
.btn--primary:hover::before { transform: translateX(101%); }
.btn--primary:hover { background: #F0AF4E; }

.btn--ghost { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn--ghost:hover { background: var(--ink); color: var(--paper); }

.btn--onink { border-color: rgba(255,255,255,.35); color: var(--white); }
.btn--onink:hover { background: var(--white); color: var(--ink-deep); border-color: var(--white); }

.btn--sm { padding: 0.6rem 1.1rem; min-height: 42px; font-size: var(--fs-xs); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); }

/* Text link with animated rule */
.tlink {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-weight: 700; font-size: var(--fs-sm); text-decoration: none;
  color: var(--ink); padding-bottom: 2px; position: relative;
}
.tlink::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px;
  width: 100%; background: var(--amber);
  transform-origin: right; transform: scaleX(1);
  transition: transform .3s var(--ease);
}
.tlink:hover::after { transform-origin: left; animation: rule-sweep .5s var(--ease); }
@keyframes rule-sweep {
  0% { transform: scaleX(1); transform-origin: right; }
  49% { transform: scaleX(0); transform-origin: right; }
  50% { transform: scaleX(0); transform-origin: left; }
  100% { transform: scaleX(1); transform-origin: left; }
}
.tlink svg { transition: transform .25s var(--ease); }
.tlink:hover svg { transform: translateX(3px); }

/* ---------------------------------------------------- 8. The thread (rail) */
.thread {
  position: fixed; left: 0; top: 0; height: 100vh; width: var(--rail);
  z-index: 40; pointer-events: none; display: none;
}
@media (min-width: 1080px) { .thread { display: block; } }

.thread__track { stroke: var(--line); stroke-width: 2; fill: none; }
.thread__draw  { stroke: var(--amber); stroke-width: 2; fill: none; stroke-linecap: round; }

.thread__nodes { position: absolute; inset: 0; }
.thread__node {
  position: absolute; left: 38px; transform: translate(-50%, -50%);
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--paper); border: 2px solid var(--line);
  transition: background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.thread__node.is-lit {
  background: var(--amber); border-color: var(--amber);
  transform: translate(-50%,-50%) scale(1.35);
}
.thread__label {
  position: absolute; left: 56px; top: 50%; transform: translateY(-50%);
  font-size: 0.625rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-soft);
  white-space: nowrap; opacity: 0; transition: opacity .3s var(--ease);
  writing-mode: vertical-rl; left: 20px;
}

/* ---------------------------------------------------------------- 9. Hero */
.hero {
  position: relative; overflow: hidden;
  background: var(--ink-deep); color: var(--white);
  padding: clamp(4rem, 11vw, 8.5rem) 0 clamp(3.5rem, 8vw, 6rem);
}
.hero::before {           /* the light */
  content: ""; position: absolute; z-index: 0;
  width: 900px; height: 900px; left: -160px; top: -420px;
  background: radial-gradient(circle, rgba(228,161,64,.20) 0%, rgba(228,161,64,.06) 42%, transparent 68%);
  pointer-events: none;
  /* Driven by the v4 ESM module on index.html — the variables animate on
     .hero and this pseudo-element reads them. Statics here are the fallback. */
  transform: scale(var(--hero-light-scale, 1));
  opacity: var(--hero-light-alpha, 1);
}
.hero__inner { position: relative; z-index: 2; }
/* Faded vitals-monitor photograph anchored to the hero's left. The mask
   dissolves it before the portrait; the low opacity keeps the headline
   readable and lets the dark green ground own the mood. */
.hero__ekg {
  position: absolute; z-index: 0; left: 0; top: 0; bottom: 0;
  width: min(64vw, 960px);
  background: url("../img/hero-ekg.jpg") left center / cover no-repeat;
  opacity: .22;
  -webkit-mask-image: linear-gradient(90deg, #000 35%, transparent 96%);
  mask-image: linear-gradient(90deg, #000 35%, transparent 96%);
  pointer-events: none;
}
/* The portrait — the MinimalistHero composition in this site's language:
   the amber circle is the "light of hope", the person stands in front of it.
   Decorative, desktop-only; the hero is complete without it. */
.hero__figure {
  position: absolute; z-index: 1; display: none;
  right: 4vw; top: 0; bottom: 0;
  width: min(36vw, 520px);
  align-items: flex-end; justify-content: center;
  pointer-events: none;
}
.hero__figure-circle {
  position: absolute; align-self: center;
  width: min(28vw, 420px); height: min(28vw, 420px);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(228,161,64,.95) 0%, rgba(228,161,64,.85) 60%, rgba(228,161,64,.55) 100%);
}
.hero__figure img {
  position: relative; z-index: 1;
  width: min(21vw, 310px); height: auto;
}
@media (min-width: 1080px) { .hero__figure { display: flex; } }
/* The Three.js adapter scene — a quiet cube lattice behind the hero text.
   Filled by the module on index.html; empty (and harmless) everywhere else. */
.hero__three {
  position: absolute; z-index: 0; display: none;
  right: -40px; top: 50%; transform: translateY(-50%);
  width: min(42vw, 600px); height: min(85%, 560px);
  opacity: .4; pointer-events: none; color: var(--sage);
}
@media (min-width: 1080px) { .hero__three { display: block; } }
.hero__eyebrow {
  color: var(--amber); font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: var(--sp-3);
}
.hero__title {
  font-size: var(--fs-hero); color: var(--white);
  max-width: 17ch; margin-bottom: var(--sp-4);
  font-variation-settings: "SOFT" 8, "WONK" 0;
}
.hero__title em { font-style: normal; color: var(--amber); }
.hero__lead { color: #C2D2C2; font-size: var(--fs-lead); max-width: 54ch; }

.hero__creds {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4);
  margin-top: var(--sp-5); padding-top: var(--sp-3);
  border-top: 1px solid var(--line-dark);
  font-size: var(--fs-xs); letter-spacing: 0.08em; text-transform: uppercase;
  color: #96AC98; font-weight: 600;
}

/* Page hero (interior pages) */
.pagehead { background: var(--ink-deep); color: var(--white); padding: clamp(3rem,7vw,5.5rem) 0 clamp(2.5rem,5vw,4rem); position: relative; overflow: hidden; }
.pagehead::before {
  content: ""; position: absolute; width: 700px; height: 700px; right: -220px; top: -340px;
  background: radial-gradient(circle, rgba(125,163,131,.20) 0%, transparent 66%);
}
.pagehead__inner { position: relative; z-index: 1; }
.pagehead h1 { color: var(--white); font-size: var(--fs-h1); max-width: 20ch; font-variation-settings: "SOFT" 8; }
.pagehead .lead { color: #C2D2C2; }
.crumbs { font-size: var(--fs-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--amber); font-weight: 700; margin-bottom: var(--sp-3); }
.crumbs a { text-decoration: none; color: #96AC98; }
.crumbs a:hover { color: var(--white); }

/* ---------------------------------------------------------- 10. Grid/cards */
.grid { display: grid; gap: var(--sp-3); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }
.grid--split { grid-template-columns: 1fr; gap: var(--sp-5); }
@media (min-width: 900px) { .grid--split { grid-template-columns: 0.85fr 1.15fr; gap: var(--sp-6); } }

.card {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: var(--sp-4);
  position: relative; overflow: hidden;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.card::before {
  content: ""; position: absolute; top: 0; left: 0; height: 3px; width: 0;
  background: var(--amber); transition: width .4s var(--ease);
}
.card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(18,37,26,.09); border-color: var(--sage); }
.card:hover::before { width: 100%; }
.card h3 { font-size: var(--fs-h3); margin-bottom: var(--sp-2); }
.card p { font-size: var(--fs-sm); color: var(--ink-soft); margin-bottom: 0; }
.card__icon {
  width: 42px; height: 42px; border-radius: var(--radius);
  background: var(--sage-tint); color: var(--ink);
  display: grid; place-items: center; margin-bottom: var(--sp-3);
}
.card__icon svg { width: 21px; height: 21px; }

.section--warm .card { background: var(--white); }

/* Steps — numbered ONLY here, because intake genuinely is a sequence */
.steps { counter-reset: step; display: grid; gap: var(--sp-3); }
.step {
  display: grid; grid-template-columns: 54px 1fr; gap: var(--sp-3);
  align-items: start; padding: var(--sp-3) 0; border-top: 1px solid var(--line);
}
.step:last-child { border-bottom: 1px solid var(--line); }
.step__num {
  counter-increment: step;
  font-family: var(--font-display); font-size: 1.45rem; font-weight: 600;
  color: var(--amber-deep); line-height: 1;
}
.step__num::before { content: counter(step, decimal-leading-zero); }
.step h3 { font-size: var(--fs-h3); margin-bottom: 0.35rem; }
.step p { font-size: var(--fs-sm); color: var(--ink-soft); margin-bottom: 0; }

/* ------------------------------------------------------------- 11. People */
.person {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: var(--sp-4);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.person:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(18,37,26,.09); }
.person__initials {
  width: 60px; height: 60px; border-radius: 50%;
  background: var(--ink); color: var(--amber);
  display: grid; place-items: center; margin-bottom: var(--sp-3);
  font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; letter-spacing: 0.02em;
}
.person__name { font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; margin: 0 0 0.15rem; }
.person__role { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; color: var(--amber-deep); margin: 0 0 var(--sp-2); }
.person p { font-size: var(--fs-sm); color: var(--ink-soft); margin: 0; }

/* --------------------------------------------------------------- 12. Jobs */
.jobs { border-top: 1px solid var(--line); }
.job {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3);
  justify-content: space-between;
  padding: var(--sp-3) var(--sp-2); border-bottom: 1px solid var(--line);
  text-decoration: none; position: relative;
  transition: background .25s var(--ease), padding-left .25s var(--ease);
}
.job::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--amber); transform: scaleY(0); transform-origin: top;
  transition: transform .3s var(--ease);
}
.job:hover { background: var(--white); padding-left: var(--sp-3); }
.job:hover::before { transform: scaleY(1); }
.job__title { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; }
.job__meta { font-size: var(--fs-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); font-weight: 600; }
.job__go { display: inline-flex; align-items: center; gap: 0.4rem; font-size: var(--fs-sm); font-weight: 700; color: var(--amber-deep); }
.job:hover .job__go svg { transform: translateX(4px); }
.job__go svg { transition: transform .25s var(--ease); }

/* ------------------------------------------------------- 13. Crisis block */
.crisis {
  background: var(--ink-deep); color: var(--white);
  border-left: 5px solid var(--amber);
  border-radius: var(--radius-lg); padding: var(--sp-4) var(--sp-5);
}
.crisis h2 { color: var(--white); font-size: var(--fs-h2); }
.crisis p { color: #C2D2C2; }
.crisis__lines { display: grid; gap: var(--sp-3); margin-top: var(--sp-4); }
@media (min-width: 760px) { .crisis__lines { grid-template-columns: 1fr 1fr; } }
.crisis__line { border-top: 1px solid var(--line-dark); padding-top: var(--sp-2); }
.crisis__line strong { display: block; font-size: var(--fs-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--amber); margin-bottom: 0.3rem; }
.crisis__num { font-family: var(--font-display); font-size: 1.7rem; font-weight: 600; color: var(--white); text-decoration: none; display: inline-block; }
.crisis__num:hover { color: var(--amber); }
.crisis__note { font-size: var(--fs-xs); color: #93A995; margin: 0.2rem 0 0; }

/* ------------------------------------------------------------- 14. Forms */
.form { display: grid; gap: var(--sp-3); max-width: 640px; }
.field { display: grid; gap: 0.4rem; }
.field label { font-size: var(--fs-sm); font-weight: 700; }
.field input, .field select, .field textarea {
  font-family: var(--font-body); font-size: var(--fs-body); color: var(--ink);
  background: var(--white); border: 1.5px solid var(--line);
  border-radius: var(--radius); padding: 0.8rem 0.9rem; width: 100%;
  min-height: 50px; transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--sage); box-shadow: 0 0 0 3px rgba(125,163,131,.25); outline: none;
}
.field__hint { font-size: var(--fs-xs); color: var(--ink-soft); }
.form__notice {
  background: var(--sage-tint); border-left: 3px solid var(--sage);
  padding: var(--sp-2) var(--sp-3); border-radius: var(--radius);
  font-size: var(--fs-sm);
}

/* Consent checkbox (UIverse-idiom custom control) */
.check { display: flex; align-items: flex-start; gap: 0.7rem; font-size: var(--fs-sm); cursor: pointer; }
.check input { position: absolute; opacity: 0; width: 0; height: 0; }
.check__box {
  flex: none; width: 22px; height: 22px; margin-top: 2px;
  border: 1.5px solid var(--line); border-radius: var(--radius);
  background: var(--white); display: grid; place-items: center;
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.check__box svg { width: 13px; height: 13px; stroke: var(--ink-deep); stroke-width: 3.2; opacity: 0; transform: scale(.5); transition: opacity .18s var(--ease), transform .18s var(--ease); }
.check input:checked + .check__box { background: var(--amber); border-color: var(--amber); }
.check input:checked + .check__box svg { opacity: 1; transform: scale(1); }
.check input:focus-visible + .check__box { outline: 3px solid var(--amber); outline-offset: 3px; }

/* Pending-state spinner — adapted from Uiverse.io by satyamchaudharydev (MIT).
   Rethemed to site tokens and sized for inline form use. Shown while the
   contact form is submitting; the global reduced-motion rule freezes it. */
.spinner {
  --size: 9px;
  position: relative;
  display: inline-block;
  vertical-align: middle;
  width: calc(var(--size) * 2);
  height: calc(var(--size) * 2);
  margin-left: var(--sp-2);
}
.spinner[hidden] { display: none; }
.spinner::before, .spinner::after {
  box-sizing: border-box;
  position: absolute;
  content: "";
  width: var(--size);
  height: var(--size);
  top: 50%;
  left: 50%;
  background: var(--amber);
  animation: spinner-orbit-up 2.4s cubic-bezier(0, 0, 0.24, 1.21) infinite;
}
.spinner::after {
  background: var(--sage);
  top: calc(50% - var(--size));
  left: calc(50% - var(--size));
  animation-name: spinner-orbit-down;
}
@keyframes spinner-orbit-down {
  0%, 100% { transform: none; }
  25% { transform: translateX(100%); }
  50% { transform: translateX(100%) translateY(100%); }
  75% { transform: translateY(100%); }
}
@keyframes spinner-orbit-up {
  0%, 100% { transform: none; }
  25% { transform: translateX(-100%); }
  50% { transform: translateX(-100%) translateY(-100%); }
  75% { transform: translateY(-100%); }
}

/* ----------------------------------------------------- 14b. Imagery system */
/* Content photograph — bordered, rounded, cropped. The slow drift is added
   by main.js (anime.js) and respects prefers-reduced-motion. */
.photo {
  margin: 0; border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden; background: var(--sage-tint);
}
.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo--wide { aspect-ratio: 3 / 2; }
.photo figcaption {
  font-size: var(--fs-xs); color: var(--ink-soft); padding: 0.6rem 0.9rem;
  background: var(--white); border-top: 1px solid var(--line);
}

/* Faded background layer ("veil") — the EKG-in-the-hero treatment,
   generalized. Keep opacity low: the words always win. */
.section--veil { position: relative; }
.section--veil > .shell { position: relative; z-index: 1; }
.section__veil {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-size: cover; background-position: center;
  opacity: .13;
  -webkit-mask-image: linear-gradient(90deg, transparent 2%, #000 40%);
  mask-image: linear-gradient(90deg, transparent 2%, #000 40%);
}
/* Brand watermark variant: the tree, oversized and barely-there. */
.section__veil--mark {
  background: url("../img/logo-tree.png") right -4rem center / auto 130% no-repeat;
  opacity: .05;
  -webkit-mask-image: none;
  mask-image: none;
}

/* ------------------------------------------------------------- 15. Detail */
.factlist { list-style: none; padding: 0; margin: 0; }
.factlist li {
  display: grid; grid-template-columns: 130px 1fr; gap: var(--sp-2);
  padding: var(--sp-2) 0; border-bottom: 1px solid var(--line); font-size: var(--fs-sm);
}
.factlist strong { font-size: var(--fs-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); font-weight: 700; }
@media (max-width: 560px) { .factlist li { grid-template-columns: 1fr; gap: 0.2rem; } }

.pill {
  display: inline-block; font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase;
  background: var(--sage-tint); color: var(--ink);
  padding: 0.35rem 0.7rem; border-radius: 100px;
}

.prose h2 { margin-top: var(--sp-5); font-size: var(--fs-h2); }
.prose h3 { margin-top: var(--sp-4); font-size: var(--fs-h3); }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose ul { max-width: 68ch; }

/* Accordion for the Notices page */
.acc { border-top: 1px solid var(--line); }
.acc__item { border-bottom: 1px solid var(--line); }
.acc__btn {
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; color: var(--ink);
  padding: var(--sp-3) 2.5rem var(--sp-3) 0; position: relative;
}
.acc__btn::after {
  content: ""; position: absolute; right: 0.5rem; top: 50%; width: 11px; height: 11px;
  border-right: 2px solid var(--amber-deep); border-bottom: 2px solid var(--amber-deep);
  transform: translateY(-70%) rotate(45deg); transition: transform .3s var(--ease);
}
.acc__btn[aria-expanded="true"]::after { transform: translateY(-20%) rotate(-135deg); }
.acc__panel { overflow: hidden; height: 0; }
.acc__panel > div { padding-bottom: var(--sp-4); }
.acc__panel p, .acc__panel li { font-size: var(--fs-sm); }

/* ------------------------------------------------------------- 16. Footer */
.site-footer { background: var(--ink-deep); color: #ACC0AC; padding: var(--sp-6) 0 var(--sp-4); }
.site-footer h4 {
  font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--amber);
  margin: 0 0 var(--sp-2);
}
.site-footer a { color: #D6E3D4; text-decoration: none; }
.site-footer a:hover { color: var(--white); text-decoration: underline; }
.footer__grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.footer__list { list-style: none; padding: 0; margin: 0; font-size: var(--fs-sm); }
.footer__list li { margin-bottom: 0.5rem; }
.footer__brand .brand__name { color: var(--white); }
.footer__brand .brand__sub { color: #80987F; }
.footer__bottom {
  margin-top: var(--sp-5); padding-top: var(--sp-3); border-top: 1px solid var(--line-dark);
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); justify-content: space-between;
  font-size: var(--fs-xs); color: #80987F;
}
.social { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); }
.social a {
  width: 38px; height: 38px; border: 1px solid var(--line-dark); border-radius: var(--radius);
  display: grid; place-items: center; transition: background .2s var(--ease), border-color .2s var(--ease);
}
.social a:hover { background: var(--amber); border-color: var(--amber); color: var(--ink-deep); }
.social svg { width: 17px; height: 17px; }

/* ------------------------------------------------- 17. Reveal + reduced motion */
.reveal { opacity: 0; transform: translateY(14px); }
.reveal.is-in { opacity: 1; transform: none; transition: opacity .6s var(--ease), transform .6s var(--ease); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal, .reveal.is-in { opacity: 1 !important; transform: none !important; }
  .thread__draw { stroke-dashoffset: 0 !important; }
}

/* Fallback: if JS never runs, nothing stays invisible */
.no-js .reveal { opacity: 1; transform: none; }

/* ------------------------------------------------------------- 18. Print */
@media print {
  .crisis-bar, .site-header, .thread, .site-footer, .btn { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .hero, .pagehead, .section--ink { background: #fff !important; color: #000 !important; }
  .hero__title, .pagehead h1 { color: #000 !important; }
}