/* Realigned Coordination site styles.
   Loads after tokens.css and components.css (both copied unchanged from brand/).
   Colour, spacing and radius come only from the token variables.

   Motion idea: things settle into alignment. Everything rests level. As parts of the
   page arrive they settle into line once; interactive things answer with a small pop.
   Rules: anything that moves sits inside prefers-reduced-motion: no-preference;
   hover movement only on devices that really hover; hover out is faster than hover in;
   colour changes use ease, movement uses the strong ease-out or a gentle pop.

   Shape rule: controls (buttons, tags, inputs, the name tag) use the radius tokens;
   content shapes (the quote, the portrait, hover backgrounds) use the stone shapes. */

@font-face {
  font-family: "Bree Serif";
  src: url("/assets/fonts/bree-serif-400-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Work Sans";
  src: url("/assets/fonts/work-sans-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --container: 1160px;
  --gutter: var(--space-5);
  --leaf-w: 48px;
  --leaf-h: 6px;

  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-gentle: cubic-bezier(.3, .6, .3, 1);
  --pop: cubic-bezier(.34, 1.3, .64, 1);
  --in: 240ms;
  --out: 160ms;

  /* Stone shapes: uneven corners built from the radius tokens, after the cairn's stones. */
  --stone: calc(var(--radius-lg) * 4) calc(var(--radius-lg) * 1.5) calc(var(--radius-lg) * 3) var(--radius-lg);
  --stone-portrait: calc(var(--radius-lg) * 1.5) calc(var(--radius-lg) * 5) var(--radius-lg) calc(var(--radius-lg) * 4);
  --stone-alt: calc(var(--radius-lg) * 1.5) calc(var(--radius-lg) * 4) var(--radius-lg) calc(var(--radius-lg) * 3);
  --stone-sm: calc(var(--radius-lg) * 2) var(--radius-md) calc(var(--radius-lg) * 1.5) var(--radius-sm);
}

@media (max-width: 720px) {
  :root {
    --gutter: var(--space-3);
    /* Smaller screens, smaller stones: the uneven corners halve so text never crowds a curve. */
    --stone: calc(var(--radius-lg) * 2) calc(var(--radius-lg) * .75) calc(var(--radius-lg) * 1.5) calc(var(--radius-lg) * .5);
    --stone-alt: calc(var(--radius-lg) * .75) calc(var(--radius-lg) * 2) calc(var(--radius-lg) * .5) calc(var(--radius-lg) * 1.5);
  }
}

/* Base */

body { margin: 0; }
.rc-root { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1 0 auto; }
img { display: block; max-width: 100%; height: auto; }
p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
p + p { margin-top: var(--space-3); }
ul, ol { padding: 0; }

a { color: var(--link); text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
::selection { background: var(--accent); color: var(--on-accent); }

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

.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Placeholders for copy Nick still has to write. Visible on purpose. */
.ph {
  background: var(--surface-200);
  outline: 1px dashed var(--border-strong);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
  padding-inline: var(--space-1);
}

/* Header */

.site-header { padding-inline: max(var(--gutter), calc((100% - var(--container)) / 2)); }
.site-header__brand { display: inline-block; border-radius: var(--radius-sm); }
.site-header .rc-brandmark { height: 44px; }
.site-header .rc-nav { margin-left: auto; }
.site-header__cta { border-color: var(--brand-deep); color: var(--on-accent); }

@media (max-width: 720px) {
  .site-header {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "brand cta" "nav nav";
    align-items: center;
    gap: var(--space-3);
  }
  .site-header__brand { grid-area: brand; }
  .site-header .rc-brandmark { height: 36px; }
  .site-header__cta { grid-area: cta; min-height: 44px; padding: 10px var(--space-3); font-size: 14px; }
  .site-header .rc-nav { grid-area: nav; margin-left: 0; gap: var(--space-2) var(--space-3); }
}

/* Buttons and links */

.btn-arrow { width: 18px; height: 18px; flex: none; }

.text-link {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-weight: 600;
  transition: text-decoration-color var(--out) ease, text-decoration-thickness var(--out) ease;
}
.text-link svg { width: 20px; height: 20px; flex: none; }
.text-link:hover {
  text-decoration-color: var(--accent);
  text-decoration-thickness: 3px;
  transition-duration: var(--in);
}

@media (prefers-reduced-motion: no-preference) {
  .rc-btn {
    transition: background-color var(--out) ease, border-color var(--out) ease, transform 160ms var(--ease-out);
  }
  .rc-btn:active { transform: scale(.97); }
  .btn-arrow, .text-link svg { transition: transform var(--out) var(--ease-out); }
}

@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .rc-btn:hover { transform: translateY(-2px); transition-duration: var(--in), var(--in), var(--in); }
  .rc-btn:hover:active { transform: translateY(-2px) scale(.97); }
  .rc-btn:hover .btn-arrow,
  .text-link:hover svg { transform: translateX(3px); transition: transform var(--in) var(--pop); }
}

/* Sections and bands */

.section { padding-block: var(--space-6); }
.band--sage { background: var(--surface-300); }
.band--brand { background: var(--brand-surface); color: var(--on-brand); --focus: var(--on-brand); }
.band--brand a:not(.rc-btn) { color: var(--on-brand); }
.band--brand .ph {
  background: color-mix(in srgb, var(--on-brand) 14%, transparent);
  outline-color: color-mix(in srgb, var(--on-brand) 55%, transparent);
}
/* Dark bands carry data-theme="dark", so every token inside switches to its dark value. */
.band--dark { background: var(--surface-300); color: var(--ink); }

/* Coloured bands sit as rounded panels on the light page, with a slim margin of page
   showing around and between them. Their corners are a gentle stone: two rounder, two
   tighter, so they read as soft boxes rather than perfect rectangles. */
:root {
  --frame: var(--space-2);
  --panel: var(--radius-lg) var(--radius-md) var(--radius-lg) var(--radius-md);
}
@media (min-width: 720px) {
  :root {
    --frame: var(--space-3);
    --panel: calc(var(--radius-lg) * 2) var(--radius-lg) calc(var(--radius-lg) * 2) var(--radius-lg);
  }
}
.band--sage,
.band--dark,
.band--brand { margin-inline: var(--frame); border-radius: var(--panel); }
:is(.band--sage, .band--dark, .band--brand) + :is(.band--sage, .band--dark, .band--brand) { margin-top: var(--frame); }

.section-title { margin: 0; font-family: var(--font-display); font-weight: 400; color: var(--brand); font-size: 36px; line-height: 44px; }
.section-title + .rc-lede,
.section-title + p { margin-top: var(--space-3); }

@media (max-width: 720px) {
  .section-title { font-size: 28px; line-height: 36px; }
}

/* Page titles and key headings carry the leaf bar, the signature motif. */

.page-title { margin: 0; font-family: var(--font-display); font-weight: 400; color: var(--brand); font-size: 36px; line-height: 44px; }
.page-title::after,
.has-leaf::after {
  content: "";
  display: block;
  width: var(--leaf-w);
  height: var(--leaf-h);
  margin-top: var(--space-4);
  background: var(--accent);
  border-radius: var(--radius-pill);
  transform-origin: left center;
}
.page-title + .rc-lede { margin-top: var(--space-4); }

@media (prefers-reduced-motion: no-preference) {
  .is-visible .page-title::after { animation: leaf-settle 700ms var(--ease-out) 150ms both; }
}
@keyframes leaf-settle { from { transform: scaleX(0); } }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); margin-top: var(--space-5); }

/* Home: hero. One authored sequence on arrival: the headline's two lines slide into
   alignment, the leaf bar settles under them, then Helen's stone settles into place. */

.hero { padding-block: var(--space-6); overflow-x: clip; }
.hero .rc-eyebrow { margin-bottom: var(--space-3); }

.hero__title {
  font-size: clamp(40px, 3.6vw + 26px, 80px);
  line-height: 1.08;
  letter-spacing: -0.01em;
}
.hero__line { display: block; }
.hero__title::after { margin-top: var(--space-5); }

@media (prefers-reduced-motion: no-preference) {
  .hero.is-visible .hero__line { animation: realign 900ms var(--ease-out) 120ms backwards; }
  .hero__line--1 { --from: -0.28em; }
  .hero__line--2 { --from: 0.9em; }
  .hero.is-visible .hero__title::after { animation-delay: 650ms; }
}
@keyframes realign { from { transform: translateX(var(--from, 0)); } }

.hero__row { display: grid; gap: var(--space-5); margin-top: var(--space-5); }

@media (min-width: 960px) {
  .hero__row { grid-template-columns: 6fr 5fr; gap: var(--space-6); align-items: start; }
}

/* Helen's words on a dark stone that dips into the band below. */
.quote-stone {
  position: relative;
  z-index: 2;
  align-self: end;
  padding: var(--space-5);
  background: var(--surface-300);
  color: var(--ink);
  border-radius: var(--stone);
}
.quote-stone__mark {
  display: block;
  height: var(--space-5);
  font-family: var(--font-display);
  font-size: 96px;
  line-height: 1;
  color: var(--brand);
}
.quote-stone p { font-family: var(--font-display); font-size: 24px; line-height: 34px; color: var(--ink); text-wrap: pretty; }
.quote-stone figcaption { margin-top: var(--space-4); font-size: 15px; line-height: 20px; font-weight: 600; color: var(--ink-muted); }

/* Rests level. Arrives a touch askew and settles into line; lifts and tips on hover. */
@media (prefers-reduced-motion: no-preference) {
  .quote-stone { transition: transform var(--out) var(--ease-out); }
  .hero.is-visible .quote-stone { animation: stone-settle 800ms var(--ease-out) 500ms backwards; }
}
@keyframes stone-settle { from { rotate: -6deg; translate: 0 var(--space-4); } }

@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .quote-stone:hover { transform: translateY(calc(-1 * var(--space-2))) rotate(-1.5deg); transition: transform 360ms var(--pop); }
}

@media (max-width: 720px) {
  .quote-stone { padding: var(--space-4); }
  .quote-stone p { font-size: 22px; line-height: 30px; }
}

/* Home: the four differentiators, each centred between its dividers */

.facts { padding-block: var(--space-5); }
.facts__list { list-style: none; display: grid; }
.facts__list li {
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-3) var(--space-4);
  text-align: center; text-wrap: balance;
  font-weight: 600; font-size: 17px; line-height: 26px;
}
.facts__list li + li { border-top: 1px solid color-mix(in srgb, var(--on-brand) 30%, transparent); }

@media (min-width: 720px) {
  .facts__list { grid-template-columns: repeat(2, 1fr); }
  .facts__list li + li { border-top: 0; }
  .facts__list li:nth-child(even) { border-left: 1px solid color-mix(in srgb, var(--on-brand) 30%, transparent); }
  .facts__list li:nth-child(n + 3) { border-top: 1px solid color-mix(in srgb, var(--on-brand) 30%, transparent); }
}
@media (min-width: 1080px) {
  .facts { padding-block: var(--space-6) var(--space-5); }
  .facts__list { grid-template-columns: repeat(4, 1fr); }
  .facts__list li:nth-child(n + 3) { border-top: 0; }
  .facts__list li + li { border-left: 1px solid color-mix(in srgb, var(--on-brand) 30%, transparent); }
}

/* Home: services as rows. Hovering one raises a sage stone behind it,
   tips the level tag and fills the arrow. */

.services__grid { display: grid; gap: var(--space-5); }
@media (min-width: 960px) {
  .services__grid { grid-template-columns: 4fr 7fr; gap: var(--space-6); align-items: start; }
  .services__intro { position: sticky; top: var(--space-5); }
}

.row-list { list-style: none; }
.row-link {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-2) var(--space-4);
  align-items: center;
  padding: var(--space-4);
}
.row-link + .row-link { border-top: 1px solid var(--border); }
.row-link::before {
  content: "";
  position: absolute;
  inset: var(--space-1) 0;
  z-index: -1;
  background: var(--surface-200);
  border-radius: var(--stone-sm);
  opacity: 0;
  transition: opacity var(--out) ease;
}
.row-link:hover::before,
.row-link:focus-within::before { opacity: 1; transition-duration: var(--in); }

.row-link__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.row-link__name { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 28px; line-height: 36px; }
.row-link__name a { color: var(--brand); text-decoration: none; }
.row-link__name a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.row-link__desc { margin-top: var(--space-2); max-width: 60ch; }

.row-link__go {
  display: grid; place-items: center;
  width: 48px; height: 48px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  color: var(--link);
  transition: background-color var(--out) ease, border-color var(--out) ease, color var(--out) ease;
}
.row-link__go svg { width: 22px; height: 22px; }
.row-link:hover .row-link__go {
  background: var(--accent); border-color: var(--accent); color: var(--on-accent);
  transition-duration: var(--in);
}

.pill {
  display: inline-block;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  font-size: 14px; line-height: 16px; font-weight: 600;
  color: var(--ink-muted);
  white-space: nowrap;
  transition: background-color var(--out) ease, border-color var(--out) ease, color var(--out) ease;
}
.row-link:hover .pill {
  background: var(--accent); border-color: var(--accent); color: var(--on-accent);
  transition-duration: var(--in);
}

@media (prefers-reduced-motion: no-preference) {
  .row-link { transition: transform 160ms var(--ease-out); }
  .row-link:active { transform: scale(.99); }
  .row-link::before { transform: scale(.96); transition: opacity var(--out) ease, transform var(--out) var(--ease-out); }
  .row-link:hover::before,
  .row-link:focus-within::before { transform: scale(1); transition: opacity var(--in) ease, transform var(--in) var(--pop); }
  .row-link__body,
  .row-link__go svg,
  .pill { transition-property: background-color, border-color, color, transform; transition-duration: var(--out); transition-timing-function: ease, ease, ease, var(--ease-out); }
}

@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .row-link:hover .row-link__body { transform: translateX(var(--space-2)); transition: transform var(--in) var(--pop); }
  .row-link:hover .row-link__go svg { transform: translateX(3px); transition: transform var(--in) var(--pop); }
  .row-link:hover .pill { transform: rotate(-3deg) scale(1.06); transition: background-color var(--in) ease, border-color var(--in) ease, color var(--in) ease, transform var(--in) var(--pop); }
}

@media (max-width: 600px) {
  .row-link { grid-template-columns: 1fr; padding-inline: var(--space-2); }
  .row-link__go { display: none; }
  .row-link__name { font-size: 24px; line-height: 32px; }
}

/* Portrait in a stone frame, wearing a name tag that levels out on hover */

.about-nick { display: grid; gap: var(--space-5); align-items: center; }
@media (min-width: 840px) {
  .about-nick { grid-template-columns: 5fr 7fr; gap: var(--space-6); }
}

.portrait { position: relative; max-width: 420px; margin: 0 var(--space-4) 0 0; }
.portrait__frame { overflow: hidden; border-radius: var(--stone-portrait); }
.portrait__frame img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.name-tag {
  position: absolute;
  right: calc(-1 * var(--space-4));
  bottom: var(--space-5);
  max-width: calc(100% - var(--space-5));
  padding: var(--space-3) var(--space-4);
  background: var(--brand-surface);
  color: var(--on-brand);
  border-radius: var(--radius-md);
}
.name-tag__name { display: block; font-family: var(--font-display); font-size: 22px; line-height: 30px; }
.name-tag__role { display: block; font-size: 15px; line-height: 20px; }
.about-nick__copy .rc-prose { margin-top: var(--space-3); }
.about-nick__copy .text-link { margin-top: var(--space-4); }

@media (prefers-reduced-motion: no-preference) {
  .name-tag { transition: transform var(--out) var(--ease-out); }
  .portrait__frame img { transition: transform 300ms var(--ease-out); }
}

@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .portrait:hover .name-tag { transform: translateY(calc(-1 * var(--space-1))) rotate(-2deg); transition: transform 360ms var(--pop); }
  .portrait:hover .portrait__frame img { transform: scale(1.03); transition-duration: 500ms; }
}

/* The realigned echo: an outline of a shape's own stone, sitting a little out of line
   behind it. One per page, on its signature shape. On the portraits it settles closer into
   alignment as the photo arrives. On stone panels it is drawn as two shadows (a ring of
   accent, filled with the colour behind), so it moves with the stone and never shows
   through it. */

.portrait { isolation: isolate; }
.portrait::before {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  border: 3px solid var(--accent);
  border-radius: var(--stone-portrait);
  translate: calc(-1 * var(--space-3)) calc(-1 * var(--space-3));
}
@media (max-width: 600px) {
  .portrait::before { translate: calc(-1 * var(--space-2)) calc(-1 * var(--space-2)); }
}
@media (prefers-reduced-motion: no-preference) {
  .portrait.is-visible::before { animation: outline-settle 1000ms var(--ease-out) 450ms backwards; }
}
@keyframes outline-settle { from { opacity: 0; translate: calc(-1 * var(--space-5)) calc(-1 * var(--space-5)); } }

.echo {
  --echo-shift: calc(-1 * var(--space-3));
  --echo-fill: var(--surface-100);
  box-shadow:
    var(--echo-shift) var(--echo-shift) 0 -3px var(--echo-fill),
    var(--echo-shift) var(--echo-shift) 0 0 var(--accent);
}
.band--sage .echo { --echo-fill: var(--surface-300); }
@media (max-width: 600px) {
  .echo { --echo-shift: calc(-1 * var(--space-2)); }
}

/* The four steps, numbered and joined by a line. The finished state, every number lit
   and every line drawn, is also what shows without motion or JavaScript. When the steps
   come into view they play once, in order: a number lights, the line draws to the next,
   and so on, always finishing complete. */

.steps { list-style: none; display: grid; gap: var(--space-5); margin-top: var(--space-5); }
.step { position: relative; padding-left: 72px; --line-from: 1 0; }
.step:nth-child(1) { --at: 0ms; }
.step:nth-child(2) { --at: 380ms; }
.step:nth-child(3) { --at: 760ms; }
.step:nth-child(4) { --at: 1140ms; }
.step__num {
  position: absolute; left: 0; top: 0; z-index: 1;
  display: grid; place-items: center;
  width: 48px; height: 48px;
  border: 1px solid var(--accent);
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600; font-variant-numeric: tabular-nums;
}
.step:not(:last-child)::before {
  content: "";
  position: absolute; left: 24px; top: 48px; bottom: calc(-1 * var(--space-5));
  width: 1px;
  background: var(--border-strong);
  transform-origin: top;
}
.step__title { margin: var(--space-2) 0; font-family: var(--font-display); font-weight: 400; font-size: 22px; line-height: 30px; color: var(--brand); }

@media (min-width: 960px) {
  .steps { grid-template-columns: repeat(4, 1fr); }
  .step { padding-left: 0; --line-from: 0 1; }
  .step__num { position: relative; }
  .step:not(:last-child)::before {
    left: 48px; right: calc(-1 * var(--space-5)); top: 24px; bottom: auto;
    width: auto; height: 1px;
    transform-origin: left;
  }
  .step__title { margin-top: var(--space-4); }
}

@media (prefers-reduced-motion: no-preference) {
  .step__num { transition: transform var(--out) var(--ease-out); }

  .js .steps[data-reveal]:not(.is-visible) .step__num {
    background-color: var(--surface-300); color: var(--ink); border-color: var(--brand); scale: .8;
  }
  .js .steps[data-reveal]:not(.is-visible) .step:not(:last-child)::before { scale: var(--line-from); }
  .js .steps[data-reveal]:not(.is-visible) .step__title,
  .js .steps[data-reveal]:not(.is-visible) .step p { opacity: 0; }

  .steps.is-visible .step__num { animation: num-light 450ms var(--pop) var(--at) backwards; }
  .steps.is-visible .step:not(:last-child)::before { animation: line-draw 260ms var(--ease-out) calc(var(--at) + 120ms) backwards; }
  .steps.is-visible .step__title,
  .steps.is-visible .step p { animation: rise 600ms var(--ease-out) calc(var(--at) + 80ms) backwards; }
}

@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .step:hover .step__num { transform: scale(1.14); transition: transform var(--in) var(--pop); }
}

@keyframes num-light {
  from { background-color: var(--surface-300); color: var(--ink); border-color: var(--brand); scale: .8; }
}
@keyframes line-draw { from { scale: var(--line-from); } }

/* Scroll reveals. Content is always visible by default: the hidden starting state only
   applies when JavaScript is running (html.js) and motion is welcome. Each kind of
   content arrives its own way, in the settle into alignment language. Each part resets
   once it is fully off screen, so it plays again whenever it comes back into view.
     data-reveal=""         text rises into place
     data-reveal="settle"   rows slide into line
     data-reveal="uncover"  a photo uncovers upward
     data-reveal="pop"      a tag pops in and levels out
     data-reveal="stagger"  a list arrives one item after another
     data-reveal="steps"    the four steps light up in order (above) */

.facts__list { --delay: 250ms; }
.row-link:nth-child(2) { --delay: 90ms; }
.row-link:nth-child(3) { --delay: 180ms; }
.row-link:nth-child(4) { --delay: 270ms; }
.row-link:nth-child(5) { --delay: 360ms; }
.testimonial:nth-child(odd) { --settle-x: calc(-1 * var(--space-6)); }
.about-nick__copy { --delay: 150ms; }
.name-tag { --delay: 450ms; }
.closing .actions { --delay: 200ms; }
[data-reveal="stagger"] > :nth-child(2) { --i: 1; }
[data-reveal="stagger"] > :nth-child(3) { --i: 2; }
[data-reveal="stagger"] > :nth-child(4) { --i: 3; }
[data-reveal="stagger"] > :nth-child(5) { --i: 4; }
[data-reveal="stagger"] > :nth-child(6) { --i: 5; }
[data-reveal="stagger"] > :nth-child(7) { --i: 6; }
[data-reveal="stagger"] > :nth-child(8) { --i: 7; }

@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal=""]:not(.is-visible),
  .js [data-reveal="settle"]:not(.is-visible),
  .js [data-reveal="pop"]:not(.is-visible),
  .js [data-reveal="stagger"]:not(.is-visible) > * { opacity: 0; }
  /* The clip goes on the first child, never on the watched element itself:
     a fully clipped element never counts as scrolled into view. */
  .js [data-reveal="uncover"]:not(.is-visible) > :first-child { clip-path: inset(100% 0 0 0); }

  [data-reveal=""].is-visible { animation: rise 900ms var(--ease-gentle) var(--delay, 0ms) backwards; }
  [data-reveal="settle"].is-visible { animation: settle 700ms var(--ease-out) var(--delay, 0ms) backwards; }
  [data-reveal="uncover"].is-visible > :first-child { animation: uncover 900ms var(--ease-out) var(--delay, 0ms) backwards; }
  [data-reveal="uncover"].is-visible img { animation: unzoom 1200ms var(--ease-out) var(--delay, 0ms) backwards; }
  [data-reveal="pop"].is-visible { animation: tag-pop 600ms var(--pop) var(--delay, 0ms) backwards; }
  [data-reveal="stagger"].is-visible > * {
    animation: rise 800ms var(--ease-gentle) calc(var(--delay, 0ms) + var(--i, 0) * 70ms) backwards;
  }
  .closing__title.is-visible::after { animation: leaf-settle 700ms var(--ease-out) 350ms both; }
}

@media (prefers-reduced-motion: no-preference) and (max-width: 720px) {
  [data-reveal="settle"].is-visible { animation-name: rise; }
}

@keyframes rise { from { opacity: 0; translate: 0 var(--rise, var(--space-3)); } }

[data-from="above"] { --rise: calc(-1 * var(--space-3)); --clip-from: inset(0 0 100% 0); }
@keyframes settle { from { opacity: 0; translate: var(--settle-x, var(--space-6)) 0; } }
@keyframes uncover { from { clip-path: var(--clip-from, inset(100% 0 0 0)); } to { clip-path: inset(0 0 0 0); } }
@keyframes unzoom { from { scale: 1.08; } }
@keyframes tag-pop { from { opacity: 0; scale: .85; rotate: -6deg; } }

/* Closing band */

.closing__title {
  margin: 0;
  font-family: var(--font-display); font-weight: 400;
  color: var(--on-brand);
  font-size: clamp(32px, 1.6vw + 24px, 48px);
  line-height: 1.17;
  max-width: 22ch;
}
.closing__link { font-weight: 600; }

/* Inner pages: shared hero. The title slides into alignment, the leaf bar settles,
   and the stone beside it settles level, the same arrival as Home in a lighter key. */

.page-hero { padding-block: var(--space-6); overflow-x: clip; }
.page-hero__grid { display: grid; gap: var(--space-5); align-items: center; }
.page-hero .rc-eyebrow { margin-bottom: var(--space-3); }
.page-hero .page-title { font-size: clamp(36px, 2.2vw + 24px, 56px); line-height: 1.1; letter-spacing: -0.01em; }
.page-hero .rc-lede { max-width: 56ch; }

@media (min-width: 960px) {
  .page-hero__grid { grid-template-columns: 7fr 5fr; gap: var(--space-6); }
}

@media (prefers-reduced-motion: no-preference) {
  .page-hero.is-visible .page-title { --from: 0.6em; animation: realign 800ms var(--ease-out) 80ms backwards; }
  .page-hero.is-visible .page-title::after { animation-delay: 500ms; }
}

.hero-stone { position: relative; padding: var(--space-5); background: var(--surface-300); border-radius: var(--stone); }
.hero-stone__title { margin: 0 0 var(--space-3); font-family: var(--font-display); font-weight: 400; font-size: 22px; line-height: 30px; color: var(--brand); }

@media (prefers-reduced-motion: no-preference) {
  .hero-stone { transition: transform var(--out) var(--ease-out); }
  .page-hero.is-visible .hero-stone { animation: stone-settle 800ms var(--ease-out) 350ms backwards; }
}
@media (max-width: 720px) {
  .hero-stone { padding: var(--space-4); }
}

/* Jump links: pills that pop on hover */

.chips { list-style: none; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.chip {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: 44px; padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-strong); border-radius: var(--radius-pill);
  background: var(--surface-100); color: var(--ink);
  font-weight: 600; font-size: 15px; line-height: 20px; text-decoration: none;
  transition: background-color var(--out) ease, border-color var(--out) ease, color var(--out) ease;
}
.chip svg { width: 16px; height: 16px; flex: none; }
.chip:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); transition-duration: var(--in); }

@media (prefers-reduced-motion: no-preference) {
  .chip { transition-property: background-color, border-color, color, transform; transition-timing-function: ease, ease, ease, var(--ease-out); }
  .chip:active { transform: scale(.97); }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .chip:hover { transform: translateY(-2px) rotate(-1.5deg); transition: background-color var(--in) ease, border-color var(--in) ease, color var(--in) ease, transform var(--in) var(--pop); }
}

/* Two column text sections: a heading that stays put while the text beside it scrolls */

.split { display: grid; gap: var(--space-4); }
.split__body { max-width: 68ch; }
.split__body p { font-size: 18px; line-height: 30px; }
@media (min-width: 960px) {
  .split { grid-template-columns: 4fr 7fr; gap: var(--space-6); align-items: start; }
  .split__head { position: sticky; top: var(--space-5); }
}

/* Our Story: the portrait stays beside the story while it is read */

.about-nick__copy .rc-prose p { font-size: 18px; line-height: 30px; }


/* Our Story: the header opens on Nick, with Lilo at his side: she sits over the bottom
   left corner of his portrait, away from his face and balancing his name tag, with a
   ring in the page colour to set her apart. She peeks out from behind him a beat after
   he arrives, and lifts a little on hover. */

.page-hero__grid--portrait { align-items: center; }
/* Only the title column clips its slide in here, so the photos can sit over their edges. */
.page-hero--portrait { overflow-x: visible; }
.page-hero--portrait .page-hero__grid > :first-child { overflow-x: clip; }
.portrait-pair { position: relative; max-width: 420px; margin: 0 var(--space-4) 0 0; }
.portrait-pair .portrait { max-width: none; margin: 0; }
.pet {
  position: absolute;
  left: calc(-1 * (var(--space-5) + var(--space-3)));
  bottom: calc(-1 * var(--space-5));
  width: 34%;
}
.pet__frame { overflow: hidden; border-radius: var(--stone-sm); box-shadow: 0 0 0 6px var(--surface-100); }
.pet__frame img { width: 100%; }

@media (max-width: 600px) {
  .portrait-pair { margin-left: var(--space-4); }
  .portrait-pair .name-tag { max-width: 58%; }
  .pet { left: calc(-1 * var(--space-4)); bottom: calc(-1 * var(--space-4)); width: 34%; }
}

@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal="peek"]:not(.is-visible) { opacity: 0; }
  [data-reveal="peek"].is-visible { animation: peek 700ms var(--pop) 700ms backwards; }
  .pet { transition: transform var(--out) var(--ease-out); }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .pet:hover { transform: translateY(calc(-1 * var(--space-1))) rotate(-2deg); transition: transform 360ms var(--pop); }
}
@keyframes peek { from { opacity: 0; translate: var(--space-6) calc(-1 * var(--space-4)); scale: .7; } }

/* Our Story: the story itself, in two calm columns on wide screens. */

.story-text { display: grid; gap: var(--space-4) var(--space-6); }
.story-text p { font-size: 18px; line-height: 30px; }
.story-text__col p + p { margin-top: var(--space-4); }
@media (min-width: 840px) {
  .story-text { grid-template-columns: 1fr 1fr; }
}

/* Our Story: the statement. Its words arrive scattered and settle into line:
   "calm and clarity", acted out once. */

.statement__figure { max-width: calc(880px + 2 * var(--gutter)); }
.statement__mark { display: block; height: var(--space-6); font-family: var(--font-display); font-size: 128px; line-height: 1; color: var(--brand); }
.statement__quote p {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(28px, 2.6vw + 14px, 48px); line-height: 1.25;
  color: var(--ink); text-wrap: balance;
}
.statement__figure figcaption { margin-top: var(--space-5); font-weight: 600; color: var(--ink-muted); }
.w { display: inline-block; }

@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal="words"]:not(.is-visible) .w { opacity: 0; }
  [data-reveal="words"].is-visible .w { animation: word-in 1100ms var(--ease-out) calc(var(--i, 0) * 45ms) backwards; }
}
@keyframes word-in { from { opacity: 0; filter: blur(8px); translate: 0 0.3em; } }

/* Our Story: testimonials stacked a little off line, like stones in a cairn. Each shows
   one key line, opens to the full review on request, and ends with a clear attribution. */

.testimonials { display: grid; gap: var(--space-5); margin-top: var(--space-5); }
.testimonial { max-width: 680px; padding: var(--space-5); background: var(--surface-100); border-radius: var(--stone); }
.testimonial:nth-child(2) { border-radius: var(--stone-alt); }
.testimonial__mark { display: block; height: var(--space-5); font-family: var(--font-display); font-size: 80px; line-height: 1; color: var(--brand); }
.testimonial__key p { font-family: var(--font-display); font-size: 24px; line-height: 34px; color: var(--brand); text-wrap: pretty; }

.testimonial__more { margin-top: var(--space-4); }
.testimonial__more summary {
  display: inline-flex; align-items: center; gap: var(--space-3);
  min-height: 44px;
  list-style: none; cursor: pointer;
  font-weight: 600; color: var(--link);
  border-radius: var(--radius-sm);
}
.testimonial__more summary::-webkit-details-marker { display: none; }
.testimonial__more .faq__chev { width: 32px; height: 32px; }
.testimonial__more summary:hover .faq__chev,
.testimonial__more[open] .faq__chev { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.testimonial__full { padding-top: var(--space-3); }
.testimonial__full p + p { margin-top: var(--space-3); }

.testimonial__by { display: grid; gap: var(--space-1); margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--border); }
.testimonial__name { font-family: var(--font-display); font-size: 22px; line-height: 30px; color: var(--brand); }
.testimonial__role { font-size: 15px; line-height: 20px; font-weight: 600; color: var(--ink-muted); }

@media (min-width: 960px) {
  .testimonial:nth-child(2) { margin-left: auto; }
  .testimonial:nth-child(3) { margin-left: var(--space-6); }
}
@media (max-width: 720px) {
  .testimonial { padding: var(--space-4); }
}

/* Services: one section per service */

.service-detail__grid { display: grid; gap: var(--space-4); }
@media (min-width: 960px) {
  .service-detail__grid { grid-template-columns: 5fr 7fr; gap: var(--space-6); align-items: start; }
}
.title-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.service-detail__lead { margin-top: var(--space-4); font-family: var(--font-display); font-size: 24px; line-height: 34px; color: var(--brand); text-wrap: pretty; }
.service-detail__body > p { font-size: 18px; line-height: 30px; max-width: 64ch; }

/* An invitation to get in touch, under a service */
.service-detail__cta { margin-top: var(--space-4); }

/* The extra work: a stack of stones, a little off line like a cairn */
.cairn { list-style: none; display: grid; gap: var(--space-3); margin-top: var(--space-5); }
.cairn__stone {
  max-width: 640px;
  padding: var(--space-5);
  background: var(--surface-100);
  border-radius: var(--stone);
}
.section:not(.band--sage) .cairn__stone { background: var(--surface-200); }
.cairn__stone:nth-child(even) { border-radius: var(--stone-alt); }
.cairn__title { margin: 0 0 var(--space-2); font-family: var(--font-display); font-weight: 400; font-size: 22px; line-height: 30px; color: var(--brand); }
.cairn__stone:nth-child(odd) { --settle-x: calc(-1 * var(--space-6)); }
.cairn__stone:nth-child(2) { --delay: 90ms; }
.cairn__stone:nth-child(3) { --delay: 180ms; }
.cairn__stone:nth-child(4) { --delay: 270ms; }
.cairn__stone:nth-child(5) { --delay: 360ms; }

@media (min-width: 960px) {
  .cairn__stone:nth-child(1) { margin-left: var(--space-6); }
  .cairn__stone:nth-child(2) { margin-left: auto; margin-right: var(--space-5); }
  .cairn__stone:nth-child(3) { margin-left: 0; }
  .cairn__stone:nth-child(4) { margin-left: auto; }
  .cairn__stone:nth-child(5) { margin-left: var(--space-5); }
}
@media (max-width: 720px) {
  .cairn__stone { padding: calc(var(--space-4) + var(--space-2)) var(--space-4); }
}
@media (prefers-reduced-motion: no-preference) {
  .cairn__stone { transition: transform var(--out) var(--ease-out); }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .cairn__stone:hover { transform: translateY(calc(-1 * var(--space-1))) rotate(-1deg); transition: transform var(--in) var(--pop); }
}

/* Lists with small stone markers */
.points { list-style: none; display: grid; gap: var(--space-3); margin-top: var(--space-4); }
.points li { position: relative; padding-left: var(--space-5); }
.points li::before {
  content: "";
  position: absolute; left: 0; top: 8px;
  width: 14px; height: 10px;
  background: var(--brand);
  border-radius: var(--radius-md) var(--radius-sm);
}

/* Steps with three items (the funding guide) */
@media (min-width: 960px) {
  .steps--3 { grid-template-columns: repeat(3, 1fr); }
}
.steps-after { margin-top: var(--space-5); }
.step__num + p { padding-top: var(--space-2); }
@media (min-width: 960px) {
  .step__num + p { padding-top: 0; margin-top: var(--space-4); }
}
.section--tight-top { padding-top: 0; }

/* FAQ: one rounded panel; each answer opens smoothly and its arrow turns */

.faq { background: var(--surface-200); border-radius: var(--radius-lg); padding: var(--space-2) var(--space-5); max-width: 880px; }
.faq details + details { border-top: 1px solid var(--border); }
.faq summary {
  display: grid; grid-template-columns: 1fr auto; gap: var(--space-4); align-items: center;
  padding: var(--space-4) 0;
  list-style: none; cursor: pointer;
  font-family: var(--font-display); font-size: 22px; line-height: 30px; color: var(--brand);
  border-radius: var(--radius-sm);
}
.faq summary::-webkit-details-marker { display: none; }
.faq__chev {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-pill);
  color: var(--link);
  transition: background-color var(--out) ease, border-color var(--out) ease, color var(--out) ease;
}
.faq__chev svg { width: 18px; height: 18px; }
.faq summary:hover .faq__chev,
.faq details[open] .faq__chev { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.faq__answer { padding-bottom: var(--space-4); max-width: 68ch; }

@media (prefers-reduced-motion: no-preference) {
  .faq__q { display: inline-block; transition: translate var(--out) var(--ease-out); }
  .faq__chev svg { transition: rotate 300ms var(--ease-out); }
  .faq details[open] .faq__chev svg,
  .testimonial__more[open] .faq__chev svg { rotate: 180deg; }

  .faq__answer, .testimonial__full { opacity: 0; transition: opacity 260ms ease; }
  .faq details[open] .faq__answer,
  .testimonial__more[open] .testimonial__full { opacity: 1; transition-delay: 80ms; }

  @supports (interpolate-size: allow-keywords) {
    .faq, .testimonial { interpolate-size: allow-keywords; }
    .faq details::details-content,
    .testimonial__more::details-content {
      block-size: 0;
      overflow: clip;
      transition: block-size 340ms var(--ease-out), content-visibility 340ms allow-discrete;
    }
    .faq details[open]::details-content,
    .testimonial__more[open]::details-content { block-size: auto; }
  }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .faq summary:hover .faq__q { translate: var(--space-2) 0; transition: translate var(--in) var(--pop); }
}
@media (max-width: 720px) {
  .faq { padding: var(--space-1) var(--space-4); }
  .faq summary { font-size: 20px; line-height: 28px; }
}

/* Contact: big, easy to tap phone and email */

.page-hero__grid--contact { align-items: start; }
@media (min-width: 960px) {
  .page-hero__grid--contact { grid-template-columns: 1fr 1fr; }
}
.contact-methods .row-link__name { font-size: clamp(22px, 0.8vw + 16px, 28px); line-height: 1.25; overflow-wrap: break-word; }
.row-link__label { display: block; margin-bottom: var(--space-1); font-size: 15px; line-height: 20px; font-weight: 600; color: var(--ink-muted); }

.details-list { display: grid; gap: var(--space-3); margin-top: var(--space-5); }
.details-list > div { display: grid; gap: var(--space-1); }
.details-list dt { font-weight: 600; }
@media (min-width: 600px) {
  .details-list > div { grid-template-columns: 11rem 1fr; gap: var(--space-3); }
}

.glance { max-width: 880px; padding: var(--space-5); background: var(--surface-100); border-radius: var(--stone-alt); }
.glance .details-list { margin-top: var(--space-4); }

.form-frame { margin-top: var(--space-5); padding: var(--space-3); background: var(--surface-200); border-radius: var(--radius-lg); max-width: 880px; }
.form-frame iframe { border-radius: var(--radius-md); }

/* Page not found and Privacy */

.prose-page { max-width: 68ch; }
.prose-page p { font-size: 18px; line-height: 30px; }

/* Long reading text shares one rhythm across the site: 18px on 30px lines,
   with a full line's worth of space between paragraphs so each one reads as its own. */
.about-nick__copy .rc-prose p + p,
.split__body p + p,
.service-detail__body > p + p,
.prose-page p + p { margin-top: var(--space-4); }

/* Privacy: the full policy. Both PDFs wait on the stone beside the title, the contents
   list stays beside the policy on wide screens and folds away on small ones, and
   "At a glance" sits on its own stone as the short version. */

.page-hero__updated { margin-top: var(--space-4); font-size: 15px; line-height: 20px; font-weight: 600; color: var(--ink-muted); }

.downloads { list-style: none; display: grid; }
.downloads li + li { border-top: 1px solid var(--border); }
.download {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0 var(--space-3);
  padding: var(--space-3) var(--space-2);
  color: var(--ink);
  text-decoration: none;
}
.download::before {
  content: "";
  position: absolute;
  inset: var(--space-1) calc(-1 * var(--space-2));
  z-index: -1;
  background: var(--surface-100);
  border-radius: var(--stone-sm);
  opacity: 0;
  transition: opacity var(--out) ease;
}
.download:hover::before,
.download:focus-visible::before { opacity: 1; transition-duration: var(--in); }
.download__name { font-family: var(--font-display); font-size: 22px; line-height: 30px; color: var(--brand); }
.download__meta { grid-column: 1; font-size: 14px; line-height: 22px; color: var(--ink-muted); }
.download__go {
  grid-column: 2; grid-row: 1 / span 2;
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  color: var(--link);
  transition: background-color var(--out) ease, border-color var(--out) ease, color var(--out) ease;
}
.download__go svg { width: 20px; height: 20px; }
.download:hover .download__go { background: var(--accent); border-color: var(--accent); color: var(--on-accent); transition-duration: var(--in); }

@media (prefers-reduced-motion: no-preference) {
  .download { transition: transform 160ms var(--ease-out); }
  .download:active { transform: scale(.98); }
  .download::before { transform: scale(.96); transition: opacity var(--out) ease, transform var(--out) var(--ease-out); }
  .download:hover::before,
  .download:focus-visible::before { transform: scale(1); transition: opacity var(--in) ease, transform var(--in) var(--pop); }
  .download__go svg { transition: translate var(--out) var(--ease-out); }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .download:hover .download__go svg { translate: 0 2px; transition: translate var(--in) var(--pop); }
}

.policy { display: grid; gap: var(--space-5); align-items: start; }
.policy__toc { display: none; }
.policy__toc-title { margin: 0 0 var(--space-3); font-family: var(--font-display); font-weight: 400; font-size: 22px; line-height: 30px; color: var(--brand); }
.policy__toc ol,
.policy__toc-small ol { list-style: none; display: grid; gap: var(--space-1); padding-left: var(--space-3); border-left: 2px solid var(--border); }
.policy__toc a,
.policy__toc-small a {
  position: relative;
  display: block;
  padding: var(--space-1) 0;
  color: var(--ink);
  font-size: 15px; line-height: 22px; font-weight: 600;
  text-decoration: none;
  transition: color var(--out) ease;
}
.policy__toc a::before,
.policy__toc-small a::before {
  content: "";
  position: absolute; top: 0; bottom: 0; left: calc(-1 * var(--space-3) - 2px);
  width: 2px;
  background: var(--accent);
  opacity: 0;
  transition: opacity var(--out) ease;
}
.policy__toc a:hover,
.policy__toc-small a:hover { color: var(--brand); transition-duration: var(--in); }
.policy__toc a:hover::before,
.policy__toc-small a:hover::before { opacity: 1; transition-duration: var(--in); }

.policy__toc-small details { padding: 0 var(--space-4); background: var(--surface-200); border-radius: var(--radius-lg); }
.policy__toc-small summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-3) 0;
  list-style: none; cursor: pointer;
  font-family: var(--font-display); font-size: 20px; line-height: 28px; color: var(--brand);
  border-radius: var(--radius-sm);
}
.policy__toc-small summary::-webkit-details-marker { display: none; }
.policy__toc-small ol { margin-bottom: var(--space-4); }
.policy__toc-small summary:hover .faq__chev,
.policy__toc-small details[open] .faq__chev { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
@media (prefers-reduced-motion: no-preference) {
  .policy__toc-small details[open] .faq__chev svg { rotate: 180deg; }
}

@media (min-width: 960px) {
  .policy { grid-template-columns: 3fr 8fr; gap: var(--space-6); }
  .policy__toc { display: block; position: sticky; top: var(--space-5); }
  .policy__toc-small { display: none; }
}

.policy__body { max-width: 68ch; }
.policy__body section,
.policy__body h3 { scroll-margin-top: var(--space-5); }
.policy__body section + section { margin-top: var(--space-6); }
.policy__body h2 { margin: 0 0 var(--space-3); font-family: var(--font-display); font-weight: 400; font-size: 28px; line-height: 36px; color: var(--brand); }
.policy__body h3 { margin: var(--space-5) 0 var(--space-3); font-family: var(--font-display); font-weight: 400; font-size: 22px; line-height: 30px; color: var(--brand); }
.policy__body p,
.policy__body li { font-size: 18px; line-height: 30px; }
.policy__body .points { gap: var(--space-2); margin-block: var(--space-3); }
.policy__body .points li::before { top: 10px; }
.policy__glance { padding: var(--space-5); background: var(--surface-200); border-radius: var(--stone-alt); }

@media (max-width: 720px) {
  .policy__glance { padding: var(--space-4); }
}

/* Privacy, Easy Read: the PDF's layout as a web page. Bigger words, one idea at a time,
   a picture beside each, and the ways to get in touch on a green stone at the end. */

.pill--accent {
  margin-bottom: var(--space-3);
  padding: var(--space-1) var(--space-3);
  background: var(--accent); border-color: var(--accent); color: var(--on-accent);
  font-size: 15px; line-height: 20px;
}
.easy-read__lede { font-size: 20px; line-height: 32px; }

.easy-read { list-style: none; max-width: 760px; border-top: 1px solid var(--border); }
.easy-read__item {
  display: grid; grid-template-columns: 72px 1fr; gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--border);
}
.easy-read__icon {
  display: grid; place-items: center;
  width: 72px; height: 72px;
  background: var(--surface-200);
  border-radius: var(--radius-md);
  color: var(--brand);
}
.easy-read__icon svg,
.help__icon svg { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.easy-read__icon svg { width: 36px; height: 36px; stroke-width: 1.5; }
.easy-read__title { margin: 0 0 var(--space-2); font-family: var(--font-display); font-weight: 400; font-size: 26px; line-height: 34px; color: var(--brand); }
.easy-read__item p { font-size: 20px; line-height: 32px; max-width: 52ch; }
.easy-read__item p + p { margin-top: var(--space-2); }

.help {
  max-width: 760px;
  margin-top: var(--space-6);
  padding: var(--space-5);
  background: var(--brand-surface); color: var(--on-brand);
  border-radius: var(--stone-alt);
  --focus: var(--on-brand);
}
.help a { color: var(--on-brand); }
.help__title { margin: 0 0 var(--space-3); font-family: var(--font-display); font-weight: 400; font-size: 28px; line-height: 36px; color: var(--on-brand); }
.help p { font-size: 20px; line-height: 32px; }
.help__links { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); margin-block: var(--space-4); }
.help__link { display: inline-flex; align-items: center; gap: var(--space-3); min-height: 48px; font-size: 20px; line-height: 28px; font-weight: 600; overflow-wrap: anywhere; }
.help__icon { display: grid; place-items: center; flex: none; width: 44px; height: 44px; background: var(--accent); color: var(--on-accent); border-radius: var(--radius-pill); }
.help__icon svg { width: 22px; height: 22px; stroke-width: 2; }

@media (prefers-reduced-motion: no-preference) {
  .help__icon { transition: scale var(--out) var(--ease-out); }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .help__link:hover .help__icon { scale: 1.1; transition: scale var(--in) var(--pop); }
}

@media (max-width: 600px) {
  .easy-read__item { grid-template-columns: 56px 1fr; gap: var(--space-3); }
  .easy-read__icon { width: 56px; height: 56px; }
  .easy-read__icon svg { width: 30px; height: 30px; }
  .easy-read__title { font-size: 23px; line-height: 30px; }
  .easy-read__item p,
  .help p,
  .easy-read__lede { font-size: 19px; line-height: 30px; }
  .help { padding: var(--space-4); }
  .help__link { font-size: 18px; }
}

/* Footer */

/* A rounded panel like the bands. Email and phone sit big and simple in the middle,
   with the social buttons under them; the pages are listed on the right. */

.site-footer {
  margin: var(--frame);
  border-top: 0;
  border-radius: var(--panel);
  padding-inline: max(var(--gutter), calc((100% - var(--container)) / 2));
  padding-block: var(--space-6) var(--space-5);
  align-items: start;
}
.site-footer .rc-brandmark { height: 48px; }
.site-footer__brand > p { margin-top: var(--space-3); max-width: 32ch; }

.site-footer__contact { display: grid; justify-items: start; gap: var(--space-1); }
.site-footer__big {
  font-weight: 600;
  font-size: clamp(20px, 0.9vw + 14px, 26px); line-height: 1.3;
  overflow-wrap: anywhere;
}

/* Scoped to the footer so it outranks the brand footer's list reset (margin 0, grid). */
.rc-footer .socials { list-style: none; display: flex; gap: var(--space-2); margin-top: var(--space-5); }
.social {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-pill);
  color: var(--link);
  transition: background-color var(--out) ease, border-color var(--out) ease, color var(--out) ease;
}
.social svg { width: 20px; height: 20px; fill: currentColor; }
.rc-footer .social:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); transition-duration: var(--in); }

.site-footer__nav ul { gap: var(--space-2); }
.site-footer__base { grid-column: 1 / -1; padding-top: var(--space-4); border-top: 1px solid var(--border); }
.site-footer__base p { max-width: 80ch; color: var(--ink-muted); }
.site-footer__base p + p { margin-top: var(--space-2); }

@media (min-width: 721px) {
  .site-footer { grid-template-columns: 1fr 1.3fr 1fr; }
  .site-footer__contact { justify-items: center; text-align: center; }
  .rc-footer .socials { justify-content: center; }
  .site-footer__nav { text-align: right; }
}
@media (prefers-reduced-motion: no-preference) {
  .social { transition-property: background-color, border-color, color, transform; transition-timing-function: ease, ease, ease, var(--ease-out); }
  .social:active { transform: scale(.94); }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .social:hover { transform: translateY(-2px) rotate(-4deg); transition: background-color var(--in) ease, border-color var(--in) ease, color var(--in) ease, transform var(--in) var(--pop); }
}

/* Preferences: honoured automatically, no widget needed */

@media (prefers-contrast: more) {
  :root, [data-theme] { --ink-muted: var(--ink); --border: var(--border-strong); }
}

/* Print. Motion never reaches paper: everything shows, still, however far the reader
   had scrolled before printing. */

@page { margin: 18mm 16mm 20mm; }

@media print {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js [data-reveal],
  .js [data-reveal] > * { opacity: 1 !important; translate: none !important; clip-path: none !important; }
}

/* Privacy: printing, or saving as a PDF from the browser, gives a clean branded copy of
   the policy: the logo at the top, headings in the brand green, and none of the site's
   navigation, footer, contents list or download panel. Page numbers sit in the bottom
   margin where the browser supports it. */

@page policy {
  @bottom-left { content: "Realigned Coordination privacy policy"; font-family: "Work Sans", Arial, sans-serif; font-size: 8pt; }
  @bottom-right { content: "Page " counter(page) " of " counter(pages); font-family: "Work Sans", Arial, sans-serif; font-size: 8pt; }
}

@media print {
  .page-privacy { page: policy; background: none; font-size: 10.5pt; line-height: 1.55; }

  .page-privacy .rc-skip,
  .page-privacy .rc-nav,
  .page-privacy .site-header__cta,
  .page-privacy .site-footer,
  .page-privacy .policy__toc,
  .page-privacy .policy__toc-small,
  .page-privacy .page-hero .hero-stone,
  .page-privacy .page-hero .actions { display: none !important; }

  .page-privacy .site-header { display: block; padding: 0 0 5mm; background: none; border-bottom: 1px solid var(--border); }
  .page-privacy .site-header .rc-brandmark { height: 13mm; }
  .page-privacy .container { max-width: none; padding-inline: 0; }
  .page-privacy .page-hero { padding: 8mm 0 6mm; }
  .page-privacy .page-hero__grid { display: block; }
  .page-privacy .section { padding-block: 0; }
  .page-privacy .policy { display: block; }
  .page-privacy .policy__body { max-width: none; }

  .page-privacy .page-title { font-size: 24pt; line-height: 1.15; color: var(--brand); }
  .page-privacy .page-title::after { margin-top: 3mm; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .page-privacy .page-hero__updated { margin-top: 3mm; font-size: 9.5pt; }

  .page-privacy .policy__body h2 { margin-bottom: 2.5mm; font-size: 15pt; line-height: 1.25; color: var(--brand); break-after: avoid; }
  .page-privacy .policy__body h3 { margin: 5mm 0 2mm; font-size: 12.5pt; line-height: 1.3; color: var(--brand); break-after: avoid; }
  .page-privacy .policy__body p,
  .page-privacy .policy__body li { font-size: 10.5pt; line-height: 1.55; orphans: 3; widows: 3; }
  .page-privacy .policy__body li { break-inside: avoid; }
  .page-privacy .policy__body section + section { margin-top: 8mm; }
  .page-privacy .policy__body .points { gap: 1.5mm; margin-block: 2.5mm; }
  .page-privacy .policy__body .points li::before { top: 1.6mm; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .page-privacy .policy__glance { padding: 6mm 7mm; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .page-privacy .policy__body a { color: var(--link); text-decoration: none; }
  .page-privacy .policy__body a[href="/privacy/easy-read/"]::after { content: " (realignedsc.com.au/privacy/easy-read)"; }
}