/* New Roots Coaching — shared styles */

:root {
  --purple: #6a3f8e;
  --green: #2e8b68;
  --amber: #f5b642;
  --sand: #eae1d0;
  --paper: #fafafa;
  --blue: #4a90e2;
  --ink: #3a3a3a;
  --ink-soft: #4b5563;

  --serif: Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --hand: "Segoe Print", "Bradley Hand", "Chilanka", "Comic Sans MS", cursive;

  --gutter: clamp(20px, 5vw, 56px);
  --nav-h: 64px;
  --measure: 38rem;
  --wide: 68rem;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ink);
  background: var(--paper);
}

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

a { color: inherit; }

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.2;
  margin: 0 0 0.6em;
}

h2 { font-size: clamp(1.9rem, 4vw, 2.6rem); }
h3 { font-size: 1.4rem; }

p { margin: 0 0 1.1em; }

.wrap {
  width: 100%;
  max-width: var(--wide);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.measure { max-width: var(--measure); }

.eyebrow {
  font-family: var(--sans);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--purple);
  margin-bottom: 0.8rem;
}

section { padding: clamp(64px, 10vw, 120px) 0; }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  min-height: calc(100svh - var(--nav-h));
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  padding: 48px var(--gutter) 72px;
  /* Replace with a real photo: background-image: url("../img/hero.jpg"); */
  background:
    linear-gradient(180deg, rgba(58, 58, 58, 0.55), rgba(58, 58, 58, 0.78)),
    radial-gradient(ellipse at 20% 20%, #3b5b4d 0%, transparent 55%),
    radial-gradient(ellipse at 80% 80%, #4a3566 0%, transparent 55%),
    var(--ink);
  background-size: cover;
  background-position: center;
}

.hero-inner { max-width: 44rem; }

.logo-mark { width: 96px; height: 96px; margin: 0 auto 1.2rem; }

.hero h1 {
  font-size: clamp(2.6rem, 8vw, 4.6rem);
  letter-spacing: 0.01em;
  margin-bottom: 0.35em;
}

.descriptor {
  font-size: clamp(0.95rem, 2.4vw, 1.1rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 auto 1.4rem;
  opacity: 0.9;
}

.tagline {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.2rem, 3vw, 1.65rem);
  line-height: 1.45;
  margin: 0 auto 1.8rem;
  max-width: 30rem;
}

.credential {
  display: inline-block;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  padding: 0.55rem 1.1rem;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 999px;
}

/* ---------- Navigation (starts under the hero, then sticks) ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--nav-h);
  background: var(--ink);
  color: #fff;
  border-bottom: 3px solid var(--amber);
}

.nav .wrap {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--serif);
  font-size: 1.15rem;
  text-decoration: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
  white-space: nowrap;
}

.nav-logo { width: 40px; height: 40px; flex: none; }

.nav-brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.nav-brand-sub {
  font-family: var(--sans);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.8;
}

.nav.is-stuck .nav-brand {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(0.8rem, 2.5vw, 1.8rem);
  margin-left: auto;
  list-style: none;
  padding: 0;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 0.95rem;
}

.nav-links a:not(.btn) { text-decoration: none; padding: 0.4rem 0; }
.nav-links a:not(.btn):hover { text-decoration: underline; text-underline-offset: 6px; }

.lang { opacity: 0.8; font-size: 0.85rem; letter-spacing: 0.08em; }

.btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.95rem;
  text-decoration: none;
  padding: 0.7rem 1.4rem;
  border-radius: 999px;
  background: var(--amber);
  color: var(--ink);
  border: 2px solid var(--amber);
  transition: background 0.2s ease, color 0.2s ease;
}

.btn:hover { background: transparent; color: var(--amber); }

.btn.on-light { background: var(--purple); border-color: var(--purple); color: #fff; }
.btn.on-light:hover { background: transparent; color: var(--purple); }

.btn.green { background: var(--green); border-color: var(--green); color: #fff; }
.btn.green:hover { background: transparent; color: var(--green); }

/* Hamburger and its panel: phones only */
.nav-toggle,
.nav-menu { display: none; }

@media (max-width: 1080px) {
  /* The links and the button move into the hamburger menu */
  .nav-links li:not(.keep),
  .nav-links li.cta { display: none; }
  .nav-links { margin-left: auto; }

  .nav-toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    margin-right: -10px;
    padding: 0;
    background: transparent;
    border: 0;
    color: #fff;
    cursor: pointer;
  }
  .nav-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform 0.2s ease, opacity 0.2s ease;
  }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .nav-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--ink);
    border-bottom: 3px solid var(--amber);
    padding-bottom: 1.1rem;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.25);
  }
  .nav-menu.open { display: block; }
  .nav-menu a:not(.btn) {
    display: block;
    padding: 0.95rem var(--gutter);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 1.05rem;
    text-decoration: none;
    color: #fff;
  }
  .nav-menu a:not(.btn):first-child { border-top: 0; }
  .nav-menu a:not(.btn):hover,
  .nav-menu a:not(.btn):focus-visible { background: rgba(255, 255, 255, 0.08); }
  .nav-menu .btn {
    display: block;
    margin: 0.9rem var(--gutter) 0;
    text-align: center;
  }
}

/* Keep the brand name on one line on the narrowest phones */
@media (max-width: 400px) {
  .nav-brand { font-size: 1rem; gap: 0.45rem; }
  .nav-logo { width: 34px; height: 34px; }
  .nav-brand-sub { font-size: 0.56rem; letter-spacing: 0.05em; }
}

/* ---------- Video ---------- */

.video { background: var(--sand); padding-top: clamp(48px, 7vw, 88px); padding-bottom: clamp(48px, 7vw, 88px); }

.video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  max-width: 52rem;
  margin: 0 auto;
  border-radius: 14px;
  background: linear-gradient(135deg, #4a4a4a, var(--ink));
  display: grid;
  place-items: center;
  color: #fff;
  overflow: hidden;
}

.video-frame .play {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  border: 2px solid rgba(255, 255, 255, 0.7);
  display: grid;
  place-items: center;
}

.video-frame .play::after {
  content: "";
  margin-left: 6px;
  border-style: solid;
  border-width: 12px 0 12px 20px;
  border-color: transparent transparent transparent #fff;
}

.video-note {
  text-align: center;
  font-family: var(--hand);
  color: var(--purple);
  margin-top: 1rem;
}

/* ---------- My approach ---------- */

.approach p.lead {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 2.6vw, 1.6rem);
  line-height: 1.5;
}

/* ---------- Movements + tree ---------- */

section[id] { scroll-margin-top: var(--nav-h); }

.movements {
  background: var(--paper);
  padding-top: clamp(48px, 8vw, 96px);
  padding-bottom: clamp(48px, 6vw, 80px);
}

.movements-layout {
  --tree-h: min(512px, calc(100svh - var(--nav-h) - 228px));
  display: grid;
  grid-template-columns: minmax(260px, 420px) 1fr;   /* 420px holds the 512px-tall tree (409px wide) */
  gap: clamp(24px, 6vw, 80px);
  align-items: start;
}

/* The stage = section titles + a 512px tree. It sticks the moment its top
   meets the yellow band under the nav, and stays until the text has gone by. */
.stage {
  position: sticky;
  top: var(--nav-h);
  align-self: start;
  z-index: 5;
  padding: 28px 0 12px;
  background: var(--paper);
}

.stage h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); margin-bottom: 0.2em; }
.stage .eyebrow { margin-bottom: 0.5rem; }

.tree {
  position: relative;
  height: var(--tree-h);
  width: calc(var(--tree-h) * 0.7985);   /* artwork is 416 x 521 */
  max-width: 100%;
  margin: 54px auto 0;   /* headroom for the "2. Reconnect" note above the top leaf */
}

.tree img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity 0.8s ease;
}

/* Hand-drawn notes and arrows: appear with their leaf, in the caption's handwriting */
.tree-notes {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.tree-notes text { font-family: var(--hand); font-size: 20.4px; fill: currentColor; stroke: none; }
.tree-notes path { fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.tree-notes .note-1 { color: var(--purple); }
.tree-notes .note-2 { color: var(--green); }
.tree-notes .note-3 { color: var(--blue); }
.js .tree-notes g { opacity: 0; transition: opacity 0.8s ease; }
.js .tree-notes g.on { opacity: 1; }

/* Washed out until lit; without JavaScript everything simply shows in full */
.js .tree img { opacity: 0.14; }
.js .tree img.on { opacity: 1; }

/* The text starts one screen below the stage, so the tree arrives and sticks first and the
   movements then scroll up into view. The bottom padding makes the section release the tree
   exactly when the closing line reaches the middle of the tree image. */
.movement-list {
  position: relative;
  padding-top: calc(100svh - var(--nav-h));
  padding-bottom: calc(var(--tree-h) / 2 + 12px - 3rem);
}

.movement {
  min-height: max(360px, 50svh);
}

.movement.m3 { min-height: 0; }  /* its last line is the bottom edge the closing line waits for */

.movement .num {
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.movement.m1 .num { color: var(--purple); }
.movement.m2 .num { color: var(--green); }
.movement.m3 .num { color: var(--blue); }

.movement .method {
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink-soft);
  margin-bottom: 1rem;
}

.movements-closing {
  /* Scrolls up the screen from below, like the movements before it, after Movement 3 has gone
     past the band. The tree stays put until this line's top reaches the middle of the tree
     image; then the whole section moves up. */
  margin-top: var(--tree-h);
  height: 3rem;
}

.movements-caption {
  font-family: var(--hand);
  color: var(--purple);
  font-size: 1.25rem;
  line-height: 1.4;
  transform: rotate(-1.5deg);
  margin: 0;
}

@media (max-width: 800px) {
  .movements-layout { grid-template-columns: 1fr; gap: 0; }
  .stage {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(58, 58, 58, 0.12);
  }
  .movements-layout { --tree-h: 150px; }
  .movement-list { padding-top: 24px; padding-bottom: 40px; }
  .movements-closing { margin-top: 30svh; height: auto; }
  .tree-notes { display: none; }
  .tree { margin: 0; flex: none; }
  .stage h2 { margin: 0; }
  .movement { min-height: max(300px, 55svh); }
  .movement.m3 { min-height: 0; }
}

/* ---------- Bridge (between the movements and "How we work together") ---------- */

.bridge {
  background: var(--paper);
  padding-top: 0;
  padding-bottom: clamp(56px, 8vw, 96px);
}

.bridge p {
  width: 75%;                 /* of the same width the tree and movements use */
  margin: 0 auto;
  text-align: center;
  font-family: var(--serif);
  font-size: clamp(1.15rem, 2.2vw, 1.4rem);
  line-height: 1.6;
}

@media (max-width: 800px) {
  .bridge p { width: 100%; }  /* a phone has no width to spare */
}

/* ---------- Journey banner (same type as the hero title, in charcoal on amber) ---------- */

.journey-banner {
  background: var(--amber);
  color: var(--ink);
  text-align: center;
  padding: clamp(48px, 8vw, 96px) 0;
}

.journey-banner h2,
.manner-banner h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.6rem, 8vw, 4.6rem);   /* matches .hero h1 */
  line-height: 1.2;
  letter-spacing: 0.01em;
  margin: 0;
}

/* ---------- How we work together ---------- */

.together { background: var(--sand); }

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 20px;
  margin-top: 2.2rem;
}

.card {
  background: var(--paper);
  border-radius: 14px;
  padding: 1.6rem 1.5rem;
  border-top: 5px solid var(--purple);
}

/* Desktop and tablet: three across, with the newsletter on a second row beneath Tools */
@media (min-width: 900px) {
  .cards { grid-template-columns: repeat(3, 1fr); }
  .card.c-newsletter { grid-column: 2; }
}

/* Colours follow the card, not its position */
.card.c-sessions   { border-top-color: var(--purple); }
.card.c-tools      { border-top-color: var(--green); }
.card.c-workshops  { border-top-color: var(--amber); }
.card.c-newsletter { border-top-color: var(--blue); }

/* Tool buttons inside the Tools card */
.card .ticks li:has(.tool-btn)::before { display: none; }
.card .ticks li:has(.tool-btn) { padding-left: 0; }
.tool-btn {
  display: block;
  font-size: 0.95rem;
  text-decoration: none;
  color: var(--green);
  border: 2px solid var(--green);
  border-radius: 999px;
  padding: 0.5rem 1.1rem;
  transition: background 0.2s ease, color 0.2s ease;
}
a.tool-btn:hover { background: var(--green); color: #fff; }
.tool-btn.is-soon { opacity: 0.45; cursor: default; }

.card .ticks { list-style: none; margin: 0; padding: 0; font-size: 0.98rem; color: var(--ink-soft); }
.card .ticks li { position: relative; padding-left: 1.3rem; }
.card .ticks li + li { margin-top: 0.35rem; }
.card .ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--green);
}

.card h3 { font-size: 1.2rem; margin-bottom: 0.4em; }
.card p { margin: 0; font-size: 0.98rem; color: var(--ink-soft); }

/* ---------- Proof ---------- */

.proof .wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 6vw, 72px);
  align-items: center;
}

/* About sits on charcoal */
.proof { background: var(--ink); color: #fff; }
.proof .eyebrow { color: var(--amber); }   /* the purple is too dim on charcoal */
.proof h2 { color: #fff; }
.proof p { color: rgba(255, 255, 255, 0.88); }

.cert { margin: 0; }

.cert img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

@media (max-width: 760px) {
  .proof .wrap { grid-template-columns: 1fr; }
}

/* ---------- Begin your journey ---------- */

.journey { background: var(--blue); color: var(--ink); text-align: center; }

/* On blue the small purple label goes dim, so it becomes a charcoal title */
.journey .eyebrow {
  color: var(--ink);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
}

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  margin-top: 2.4rem;
  text-align: left;
}

.step {
  background: var(--paper);
  border-radius: 14px;
  padding: 2rem 1.8rem;
}

/* A picture runs edge to edge across the top of each card */
.step-img {
  display: block;
  width: calc(100% + 3.6rem);
  max-width: none;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  margin: -2rem -1.8rem 1.6rem;
  border-radius: 14px 14px 0 0;
}

.step .label { font-weight: 600; margin-bottom: 0.3rem; }
.step.s1 .label { color: var(--green); }
.step.s2 .label { color: var(--purple); }
.step p { color: var(--ink-soft); }

/* Step 1 offers two tools, one under the other */
.step-tool { margin-top: 1.4rem; padding-top: 1.3rem; border-top: 1px solid rgba(0, 0, 0, 0.12); }
.step-tool h4 { font-family: var(--serif); font-size: 1.15rem; font-weight: 600; margin: 0 0 0.3rem; color: var(--ink); }
.step-tool .btn { margin-top: 0.7rem; }

/* Step 2: three ticked points, in the purple that marks the step */
.step-ticks { list-style: none; margin: 1.2rem 0 0; padding: 0; }
.step-ticks li { position: relative; padding-left: 2.5rem; min-height: 1.6rem; color: var(--ink-soft); font-size: 0.98rem; }
.step-ticks li + li { margin-top: 0.9rem; }
.step-ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.05rem;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: var(--purple) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.5l4.5 4.5L19 7.5'/></svg>") center / 62% no-repeat;
}
.step-note { margin-top: 1.3rem; }
.step-note + .btn { margin-top: 0.4rem; }

/* ---------- Manner banner (charcoal; same title type as the amber banner) ---------- */

.manner-banner {
  background: var(--ink);
  color: #fff;
  text-align: center;
  padding: clamp(56px, 9vw, 112px) 0;
}

.manner-banner h2 { margin-bottom: 0.4em; }

.manner-banner p {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.2rem, 3vw, 1.65rem);
  line-height: 1.5;
  max-width: 38rem;
  margin: 0 auto;
  opacity: 0.9;
}

/* ---------- Multidisciplinary (picture as the section's background) ---------- */

.multi {
  position: relative;
  overflow: hidden;
  background: var(--paper);
}

/* The picture: the tangle fills the right half, the braid runs back behind the text, gently faded */
.multi::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../img/tangle-braid.jpg") right center / 90% auto no-repeat;
  mix-blend-mode: multiply;          /* the picture's white melts into the page */
  pointer-events: none;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, transparent 12%, rgba(0, 0, 0, 0.12) 26%, rgba(0, 0, 0, 0.12) 38%, #000 62%),
    linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0, transparent 12%, rgba(0, 0, 0, 0.12) 26%, rgba(0, 0, 0, 0.12) 38%, #000 62%),
    linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%);
  mask-composite: intersect;
}

.multi .wrap { position: relative; z-index: 1; }   /* text always above the picture */

.multi-text { max-width: calc(50% - 32px); }
.multi-text p { text-shadow: 0 0 14px var(--paper), 0 0 6px var(--paper); }
.multi-text p:last-child { margin-bottom: 0; }

@media (max-width: 800px) {
  .multi-text { max-width: none; }
  /* On a phone the text takes the whole width, so the picture sits beneath it as its own block,
     like the custom-made picture below. It is cropped to the braid and the tangle. */
  .multi { display: flex; flex-direction: column; }
  .multi .wrap { order: 1; }
  .multi::before {
    order: 2;
    position: static;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 0.72;
    background-size: 165% auto;
    background-position: right center;
    -webkit-mask-image:
      linear-gradient(to right, transparent 0, #000 14%),
      linear-gradient(to bottom, transparent 0, #000 10%, #000 90%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(to right, transparent 0, #000 14%),
      linear-gradient(to bottom, transparent 0, #000 10%, #000 90%, transparent 100%);
    mask-composite: intersect;
  }
}

/* ---------- Custom-made (picture left, title right, on the picture's own cream) ---------- */

.custom { background: #ede9e6; }   /* sampled from the picture, so it has no visible edge */

.custom-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 6vw, 80px);
  align-items: center;
}

.custom-art { margin: 0; }

.custom-art img {
  width: 100%;
  max-width: 30rem;
  height: auto;
  margin: 0 auto;
  /* feather the edges a touch so any paper texture dissolves into the section */
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-composite: intersect;
}

.custom-text h2 {
  font-size: clamp(2.4rem, 6vw, 4rem);
  margin-bottom: 0.4em;
}
.custom-text p:last-child { margin-bottom: 0; }

@media (max-width: 800px) {
  .custom-grid { grid-template-columns: 1fr; }
  .custom-text { order: -1; }   /* title first, picture beneath */
}

/* ---------- Footer ---------- */

footer {
  border-top: 3px solid var(--amber);   /* keeps the footer distinct from the charcoal banner above */
  background: var(--ink);
  color: rgba(255, 255, 255, 0.8);
  padding: 48px 0;
  font-size: 0.92rem;
}

footer .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem 2.5rem;
  justify-content: space-between;
}

footer a { text-decoration: none; }
footer a:hover { text-decoration: underline; }
footer ul { list-style: none; padding: 0; margin: 0; display: flex; gap: 1.4rem; flex-wrap: wrap; }

/* ---------- Motion ---------- */

.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.7s ease, transform 0.7s ease; }
.js .reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal,
  .js .tree .leaf,
  .js .tree .bud,
  .js .tree .branch { opacity: 1; transform: none; transition: none; }
  .nav-brand { transition: none; }
}

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