/* ============================================================
   NATURE AWARENESS - retreats, workshops and coaching
   natureawareness.co.uk

   Inherits the consultancy design system verbatim, then adds the
   sun layer. See design/PALETTE.md for every ratio and the rules.
   Sibling: ../Nature Awarness/assets/site.css - keep in step.
   ============================================================ */

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

/* The hidden attribute must win. Any class that sets display: would otherwise
   override the UA rule and un-hide the element, which is how the contact form
   shipped its validation errors visible on load. */
[hidden]{display:none!important}

:root{
  /* ---- surfaces ---- */
  --paper:#fbf8e7;        /* seal cream field */
  --paper-2:#f5f1dc;      /* secondary banding */
  --paper-3:#f7efd9;      /* warm banding, this site only */
  --forest:#143b1f;       /* seal forest */
  --forest-2:#0d2815;     /* footer */

  /* ---- ink on cream ----
     Ratios are quoted against --paper-3 #f7efd9, the DARKEST of the three
     cream surfaces, so every token below is safe on all three. ---- */
  --ink:#143b1f;          /* 11.75:1 AAA */
  --ink-2:#345f31;        /*  6.96:1 AA  */
  --muted:#5f725a;        /*  4.53:1 AA  seal sage ring, darkened for --paper-3 */
  --copper-ink:#97612c;   /*  4.51:1 AA  copper text under 24px */
  --copper:#bf7b38;       /*  3.22:1     large text + fills only */
  --sun-ink:#916413;      /*  4.53:1 AA  amber text under 24px */
  --sun-deep:#6b490e;     /*  7.02:1 AAA */
  --sun:#e7ae47;          /*  1.87:1     FILLS AND GRAPHICS ONLY */

  /* ---- ink on forest ---- */
  --on-forest:#fbf8e7;    /* 11.75:1 AAA */
  --lime:#f9f871;         /* 11.16:1 AAA */
  --sun-glow:#e7ae47;     /*  6.29:1 AA  the brand sun, unchanged */
  --copper-glow:#cc8e51;  /*  4.51:1 AA  */
  --sage-glow:#9fafa1;    /*  5.44:1 AA  */

  /* ---- type ---- */
  --display:'Fraunces',Georgia,'Times New Roman',serif;
  --body:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;

  /* ---- rhythm ---- */
  --gap:clamp(1rem,2.5vw,1.75rem);
  --bleed:clamp(1.25rem,5vw,3rem);
  --band:clamp(4rem,9vw,7.5rem);
  --band-join:clamp(2rem,4.5vw,3.5rem);  /* two sections sharing one surface */
  --measure:38rem;        /* ~71ch at the body size */
  --measure-sm:33rem;     /* ~70ch at .93-.95rem, the small body size */

  /* One size for every uppercase micro-label. Set in rem it sat at 10.5-11.5px
     everywhere, which is fine on a desktop and too small on a phone held at
     arm's length, so it steps up below the fold-out point. */
  --label:.73rem;
  --r:.6rem;              /* button radius, matches consultancy */
  --r-card:1rem;

  /* ---- motion: critically damped, no overshoot ---- */
  --ease:cubic-bezier(.32,.72,0,1);
  --fast:160ms;
  --mid:320ms;
}

@media(max-width:620px){ :root{--label:.79rem} }

html{
  scroll-behavior:smooth;-webkit-text-size-adjust:100%;
  /* the chrome we did not draw, themed off the palette rather than left default */
  caret-color:var(--sun-ink);
  accent-color:var(--sun-ink);
  scrollbar-width:thin;
  scrollbar-color:color-mix(in srgb,var(--ink) 30%,transparent) transparent;
}
::selection{background:color-mix(in srgb,var(--sun) 60%,transparent);color:var(--forest)}
.on-dark ::selection{background:color-mix(in srgb,var(--sun-glow) 50%,transparent);color:var(--forest)}

body{
  font-family:var(--body);
  background:var(--paper);
  color:var(--ink);
  font-size:clamp(1rem,.96rem + .2vw,1.075rem);
  line-height:1.65;
  letter-spacing:.001em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ---------- type scale: tracking tightens as size grows ---------- */
h1,h2,h3,h4{font-family:var(--display);font-optical-sizing:auto;font-weight:600;line-height:1.08;letter-spacing:-.022em}
h1{font-size:clamp(2.5rem,1.6rem + 4.2vw,4.75rem);line-height:1.02;letter-spacing:-.032em}
h2{font-size:clamp(1.9rem,1.4rem + 2.2vw,3rem);letter-spacing:-.026em}
h3{font-size:clamp(1.2rem,1.1rem + .5vw,1.5rem);letter-spacing:-.016em}
h4{font-size:1.075rem;letter-spacing:-.012em}
p{text-wrap:pretty}
h1,h2,h3{text-wrap:balance}
a{color:inherit}
img{max-width:100%;height:auto}

.wrap{max-width:74rem;margin-inline:auto;padding-inline:var(--bleed)}
.wrap-narrow{max-width:52rem;margin-inline:auto;padding-inline:var(--bleed)}
section[id]{scroll-margin-top:5.5rem}
.band{padding-block:var(--band)}
.band-tight{padding-block:clamp(2.75rem,6vw,4.5rem)}

/* Where a band changes surface, the colour change is what separates the two and
   a full --band on each side is right. Where two consecutive bands share a
   surface there is nothing marking the join, so 2 x --band reads as dead space
   rather than rhythm. Halve it. Same rule for the interior page hero, which is
   always followed by more of the same cream. */
:is(.band,.band-tight):not(.on-dark):not(.on-warm):not(.on-paper-2)
  + :is(.band,.band-tight):not(.on-dark):not(.on-warm):not(.on-paper-2),
.page-hero + :is(.band,.band-tight):not(.on-dark):not(.on-warm):not(.on-paper-2),
.on-dark    + :is(.band,.band-tight).on-dark,
.on-warm    + :is(.band,.band-tight).on-warm,
.on-paper-2 + :is(.band,.band-tight).on-paper-2,
/* --paper-2 and --paper-3 are 1.63 dE apart, which is below the threshold at
   which a surface change is reliably visible. The eye reads them as one
   surface, so the join between them is spaced as one. */
.on-warm    + :is(.band,.band-tight).on-paper-2,
.on-paper-2 + :is(.band,.band-tight).on-warm{padding-top:var(--band-join)}

/* ---------- eyebrow ---------- */
.eyebrow{
  font-family:var(--body);
  font-size:.75rem;font-weight:650;
  letter-spacing:.15em;text-transform:uppercase;
  color:var(--muted);
  display:flex;align-items:center;gap:.7rem;
  margin-bottom:1.1rem;
}
.eyebrow::after{content:"";flex:1;height:1px;background:currentColor;opacity:.32;max-width:5rem}
.on-dark .eyebrow{color:var(--sage-glow)}
.eyebrow--center{justify-content:center}
.eyebrow--center::before{content:"";flex:1;height:1px;background:currentColor;opacity:.32;max-width:5rem}

.lede{font-size:clamp(1.075rem,1rem + .45vw,1.3rem);color:var(--ink-2);max-width:var(--measure);line-height:1.55}
h1+.lede,h2+.lede{margin-top:1.05rem}

/* ---------- dark and warm bands ---------- */
.on-dark{background:var(--forest);color:var(--on-forest)}
.on-dark h2,.on-dark h3,.on-dark h4{color:var(--on-forest)}
.on-dark .lede{color:var(--sage-glow)}
.on-warm{background:var(--paper-3)}
.on-paper-2{background:var(--paper-2)}

/* ---------- skip link ---------- */
.skip{
  position:absolute;left:.5rem;top:-4rem;z-index:200;
  background:var(--forest);color:var(--on-forest);
  padding:.7rem 1.1rem;border-radius:.5rem;font-weight:600;text-decoration:none;
  transition:top var(--fast) var(--ease);
}
.skip:focus{top:.5rem}

/* ---------- nav ---------- */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:100;
  display:flex;align-items:center;gap:1rem;
  padding:.7rem var(--bleed);
  background:color-mix(in srgb,var(--paper) 72%,transparent);
  backdrop-filter:blur(18px) saturate(180%);
  -webkit-backdrop-filter:blur(18px) saturate(180%);
  border-bottom:1px solid transparent;
  transition:border-color var(--mid) var(--ease),background var(--mid) var(--ease);
}
/* Translucent over the hero, where it sits on cream and the blur reads well.
   Opaque once scrolled: this site is roughly half dark bands, and 94% cream
   over forest with a saturate boost turns the bar a muddy sage and drags the
   wordmark down with it. A solid cream bar is the honest version. */
.nav[data-stuck="true"]{
  border-bottom-color:color-mix(in srgb,var(--ink) 12%,transparent);
  background:var(--paper);
  backdrop-filter:none;-webkit-backdrop-filter:none;
}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;font-family:var(--display);font-weight:600;letter-spacing:-.01em;font-size:1.02rem;color:var(--ink);min-height:44px}
.brand .mark{width:32px;height:32px;flex:none;border-radius:50%}
.brand em{font-style:normal;color:var(--copper-ink)}

.nav-links{display:flex;align-items:center;gap:1.4rem;margin-left:auto}
/* the CTA lives inside the link list so it can travel into the mobile drawer,
   so it has to opt out of the link styling: .nav-links a was repainting it
   ink-2 on the sun fill, which is 3.73:1. */
.nav-links a.nav-cta,
.nav-links a.nav-cta:hover,
.nav-links a.nav-cta[aria-current="page"]{
  color:var(--forest);border-bottom-color:transparent;padding-bottom:0;
}
.nav-cta{margin-left:.4rem}
.nav-links a{
  font-size:.9rem;font-weight:550;color:var(--ink-2);text-decoration:none;
  padding-bottom:2px;border-bottom:1.5px solid transparent;
  transition:color var(--fast) var(--ease),border-color var(--fast) var(--ease);
}
.nav-links a:hover{color:var(--ink);border-bottom-color:var(--sun)}
.nav-links a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--sun)}

/* mobile drawer */
.nav-toggle{
  display:none;margin-left:auto;background:none;border:0;cursor:pointer;
  width:44px;height:44px;align-items:center;justify-content:center;
  padding:0;border-radius:.5rem;color:var(--ink);
}
.nav-toggle svg{display:block}
.nav-toggle:hover{background:color-mix(in srgb,var(--ink) 7%,transparent)}

/* a scrim, so the drawer reads as a layer over the page rather than a panel
   that happens to cut a line of body copy in half */
.nav-scrim{
  position:fixed;inset:0;z-index:99;
  background:color-mix(in srgb,var(--forest) 42%,transparent);
  opacity:0;pointer-events:none;transition:opacity var(--mid) var(--ease);
}
.nav[data-open="true"] ~ .nav-scrim{opacity:1;pointer-events:auto}
@media(min-width:901px){ .nav-scrim{display:none} }

@media(max-width:900px){
  /* absolute, not fixed. A fixed child resolves top:100% against whichever
     ancestor happens to establish a containing block, which here was the nav
     only because of its backdrop-filter: drop the filter and the drawer jumps
     to the bottom of the viewport. Absolute resolves against the fixed nav
     itself, so the drawer sits under it whatever the nav is painting. */
  .nav-links{
    position:absolute;inset:0 0 auto 0;top:100%;
    flex-direction:column;align-items:stretch;gap:0;
    margin:0;padding:.5rem var(--bleed) 1.25rem;
    background:var(--paper);
    border-bottom:1px solid color-mix(in srgb,var(--ink) 12%,transparent);
    max-height:calc(100dvh - 100%);overflow-y:auto;overscroll-behavior:contain;
    transform:translateY(-8px);opacity:0;pointer-events:none;
    transition:opacity var(--fast) var(--ease),transform var(--fast) var(--ease);
  }
  .nav[data-open="true"] .nav-links{opacity:1;transform:none;pointer-events:auto}
  .nav-links a{padding:.85rem 0;border-bottom:1px solid color-mix(in srgb,var(--ink) 10%,transparent);font-size:1rem}
  .nav-links a[aria-current="page"]{color:var(--sun-ink)}
  .nav-toggle{display:flex}
  /* the CTA travels into the drawer instead of disappearing: on a phone the
     nav had no call to action at all. */
  .nav-cta{
    margin:1rem 0 .25rem;justify-content:center;
    padding-block:.85rem;font-size:.95rem;border-bottom:0;
  }
  .nav-links a.nav-cta[aria-current="page"]{color:var(--forest)}
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--body);font-weight:600;font-size:.95rem;letter-spacing:.005em;
  padding:.8rem 1.35rem;border-radius:var(--r);border:1px solid transparent;
  text-decoration:none;cursor:pointer;
  transition:transform 110ms var(--ease),background var(--fast) var(--ease),
             border-color var(--fast) var(--ease),color var(--fast) var(--ease),
             box-shadow var(--fast) var(--ease);
}
.btn:active{transform:scale(.97)}   /* feedback on press, not release */

/* PRIMARY: sun fill, forest text. 6.29:1. The retreats site's signature. */
.btn-solid{background:var(--sun);color:var(--forest);box-shadow:0 1px 0 rgba(20,59,31,.09)}
.btn-solid:hover{background:#f0bc5e}

/* SECONDARY: the consultancy's primary, kept for lower-priority actions */
.btn-forest{background:var(--forest);color:var(--paper)}
.btn-forest:hover{background:#1c5029}

.btn-quiet{background:transparent;color:var(--ink);border-color:color-mix(in srgb,var(--ink) 26%,transparent)}
.btn-quiet:hover{border-color:var(--ink);background:color-mix(in srgb,var(--ink) 5%,transparent)}

.on-dark .btn-solid{background:var(--sun);color:var(--forest)}
.on-dark .btn-solid:hover{background:#f0bc5e}
.on-dark .btn-forest{background:var(--lime);color:var(--forest)}
.on-dark .btn-forest:hover{background:#fbfa96}
.on-dark .btn-quiet{color:var(--on-forest);border-color:color-mix(in srgb,var(--on-forest) 34%,transparent)}
.on-dark .btn-quiet:hover{border-color:var(--on-forest);background:color-mix(in srgb,var(--on-forest) 8%,transparent)}

/* Two buttons sized to their labels stack into two near-but-not-equal widths,
   which reads as a mistake. Below the fold-out point they share one width. */
@media(max-width:540px){
  .hero-actions .btn,.book-actions .btn{flex:1 1 100%}
}

.btn-sm{padding:.55rem 1rem;font-size:.875rem}
.btn-lg{padding:.95rem 1.7rem;font-size:1rem}
.btn-block{width:100%}

:focus-visible{outline:2.5px solid var(--sun-ink);outline-offset:3px;border-radius:.35rem}
.on-dark :focus-visible{outline-color:var(--lime)}

/* ---------- link with arrow ---------- */
.link-arrow{
  font-weight:600;font-size:.95rem;color:var(--ink);text-decoration:none;
  display:inline-flex;align-items:center;gap:.4rem;
  border-bottom:1.5px solid var(--copper);padding-bottom:2px;
  transition:gap var(--fast) var(--ease),border-color var(--fast) var(--ease);
}
.link-arrow:hover{gap:.65rem;border-bottom-color:var(--ink)}
/* the visible mark stays a text underline; the tappable area is grown around
   it, so the target clears 44px without the rule drifting off the baseline */
@media(hover:none){
  .link-arrow{position:relative}
  .link-arrow::after{content:"";position:absolute;inset:-11px -6px}
}
.on-dark .link-arrow{color:var(--on-forest);border-bottom-color:var(--copper-glow)}
.on-dark .link-arrow:hover{border-bottom-color:var(--sun-glow)}

/* ---------- scroll reveal ---------- */
.rise{transition:opacity 420ms var(--ease),transform 420ms var(--ease)}
.js-reveal .rise{opacity:0;transform:translateY(10px)}
.js-reveal .rise.in{opacity:1;transform:none}

/* ============================================================
   SHARED COMPONENTS
   If a pattern appears on two pages it lives here, not in a
   page's own <style>.
   ============================================================ */

/* ---------- page hero for interior pages ---------- */
.page-hero{padding-top:clamp(7rem,13vw,9.5rem);padding-bottom:clamp(2.5rem,6vw,4rem)}
.page-hero h1{max-width:16ch}
.page-hero .lede{margin-top:1.3rem}
.page-hero .hero-actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:2rem}

/* ---------- stat row ---------- */
.figures{display:grid;grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr));gap:clamp(1.25rem,3vw,2.5rem);margin-top:2.75rem}
.fig .n{font-family:var(--display);font-size:clamp(1.9rem,1.5rem + 1.4vw,2.6rem);line-height:1;letter-spacing:-.03em;color:var(--sun-ink);display:block}
.on-dark .fig .n{color:var(--sun-glow)}
.fig .t{margin-top:.55rem;font-size:.86rem;color:var(--ink-2);line-height:1.45}
.on-dark .fig .t{color:var(--on-forest)}

/* ---------- prose ---------- */
.prose{max-width:var(--measure)}
.prose p+p{margin-top:1.05rem}
.prose strong{color:var(--ink);font-weight:650}
.on-dark .prose strong{color:var(--sun-glow)}

/* ---------- content written in the WordPress editor ----------
   The static build never sees these; they exist so that whatever an editor
   writes in WordPress lands inside the design system rather than beside it.
   The block editor's own class names are matched alongside the bare elements,
   because content pasted as plain HTML carries neither. */
.prose--editor{max-width:var(--measure)}
.prose--editor > * + *{margin-top:1.05rem}
.prose--editor h2,.prose--editor h3{margin-top:2.25rem}
.prose--editor h2{font-size:clamp(1.5rem,1.25rem + 1vw,1.95rem)}
.prose--editor h3{font-size:1.2rem}
.prose--editor h2:first-child,.prose--editor h3:first-child{margin-top:0}
.prose--editor a{color:var(--sun-ink);text-underline-offset:2px}
.prose--editor a:hover{color:var(--ink)}
.on-dark .prose--editor a{color:var(--sun-glow)}
.prose--editor strong{color:var(--ink);font-weight:650}
.on-dark .prose--editor strong{color:var(--sun-glow)}

/* editor lists get the same dot the ticked lists use */
.prose--editor ul,.prose--editor ol{list-style:none;display:flex;flex-direction:column;gap:.55rem;padding:0}
.prose--editor li{padding-left:1.35rem;position:relative;line-height:1.6}
.prose--editor ul li::before{
  content:"";position:absolute;left:0;top:.62em;width:.42rem;height:.42rem;border-radius:50%;
  background:var(--sun);outline:1px solid color-mix(in srgb,var(--sun-ink) 45%,transparent);
}
.prose--editor ol{counter-reset:na-ol}
.prose--editor ol li{counter-increment:na-ol}
.prose--editor ol li::before{
  content:counter(na-ol) ".";position:absolute;left:0;top:0;
  font-family:var(--display);font-size:.9em;color:var(--copper-ink);
}
.on-dark .prose--editor ol li::before{color:var(--copper-glow)}

/* a quote block is the pull quote, so the two idioms stay one idiom */
.prose--editor blockquote,.story blockquote{
  margin:2.5rem 0;
  font-family:var(--display);font-optical-sizing:auto;
  font-size:clamp(1.2rem,1.05rem + .6vw,1.5rem);
  line-height:1.35;letter-spacing:-.018em;color:var(--ink);
}
.prose--editor blockquote p,.story blockquote p{font:inherit;color:inherit;margin:0}
.prose--editor blockquote p + p,.story blockquote p + p{margin-top:.6rem}
.prose--editor blockquote::before,.story blockquote::before{
  content:"";display:block;width:1.6rem;height:2px;background:var(--copper);margin-bottom:1.1rem;
}
.on-dark .prose--editor blockquote,.on-dark .story blockquote{color:var(--on-forest)}
.on-dark .prose--editor blockquote::before,.on-dark .story blockquote::before{background:var(--copper-glow)}

/* ---------- cards: the shared surface ---------- */
.card{
  display:flex;flex-direction:column;
  background:var(--paper);
  border:1px solid color-mix(in srgb,var(--ink) 14%,transparent);
  border-radius:var(--r-card);
  padding:1.6rem 1.5rem 1.5rem;
  transition:border-color var(--mid) var(--ease),transform var(--mid) var(--ease),box-shadow var(--mid) var(--ease);
}
.card:hover{border-color:color-mix(in srgb,var(--ink) 30%,transparent);transform:translateY(-2px);box-shadow:0 12px 32px -18px rgba(20,59,31,.4)}
.card h3{margin-bottom:.55rem}
.card>p{font-size:.93rem;color:var(--ink-2);margin-bottom:1.1rem}
.card .btn,.card .link-arrow{margin-top:auto}
.card .btn{align-self:stretch}
.card .link-arrow{align-self:flex-start}
.on-dark .card{background:color-mix(in srgb,var(--on-forest) 6%,transparent);border-color:color-mix(in srgb,var(--sage-glow) 26%,transparent)}
.on-dark .card>p{color:var(--sage-glow)}
.on-dark .card:hover{border-color:color-mix(in srgb,var(--sage-glow) 50%,transparent);box-shadow:0 12px 32px -18px rgba(0,0,0,.6)}

/* ---------- the three-up offer grid ----------
   Lived in index.html's own <style> while e-book.html used the same markup and
   patched the grid back in with an inline style. Shared markup, shared rules. */
.exp{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem;margin-top:3rem}
/* three equal cards or one column: a 2 + 1 tablet row orphans the third card */
@media(max-width:960px){ .exp{grid-template-columns:1fr;max-width:34rem;margin-inline:auto} }
.exp .card{padding:0;overflow:hidden}
.exp .card .shot{border-radius:0;aspect-ratio:16/10}
.exp-body{display:flex;flex-direction:column;flex:1;padding:1.5rem 1.45rem 1.45rem}
.exp-tag{
  display:inline-flex;align-items:center;gap:.45rem;align-self:flex-start;
  font-size:var(--label);font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  padding:.3rem .6rem;border-radius:.35rem;margin-bottom:.85rem;
}
.exp-tag--free{background:var(--sun);color:var(--forest)}
.exp-tag--paid{background:color-mix(in srgb,var(--ink) 8%,transparent);color:var(--ink-2)}
.exp-body h3{margin-bottom:.5rem}
.exp-body>p{font-size:.93rem;color:var(--ink-2);margin-bottom:1.15rem}
/* The meta row carries the auto margin, not the button. Pushing the button
   alone to the card foot left a gap above it that varied by 80px between cards
   of different copy lengths; carrying both keeps that interval fixed. */
.exp-meta{
  display:flex;flex-wrap:wrap;gap:.35rem .9rem;
  margin-top:auto;margin-bottom:1.25rem;
  font-size:.78rem;color:var(--muted);
}
.exp-meta span{display:flex;align-items:center;gap:.35rem}
.exp-meta span::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--copper);flex:none}
.exp-body .btn{margin-top:0}

/* plain three-up cards, where the card keeps its own padding */
.card-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem;margin-top:3rem}
@media(max-width:960px){ .card-3{grid-template-columns:1fr;max-width:34rem;margin-inline:auto} }

/* ---------- reasons-why columns ----------
   Used on four pages, styled on one. about, events and workshops rendered this
   as unstyled markup: one 128ch column, no rules, headings against paragraphs. */
.why-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  grid-template-rows:auto auto;
  gap:clamp(1.6rem,3.5vw,3rem);margin-top:3rem;
}
@media(max-width:900px){ .why-grid{grid-template-columns:1fr;grid-template-rows:none;gap:2rem} }
/* a two-line heading in one column must not drop that column's paragraph
   below its neighbours; subgrid keeps both rows aligned across all three */
.why{display:grid;grid-row:span 2;grid-template-rows:subgrid;align-content:start;
     border-top:2px solid var(--copper);padding-top:1.15rem}
@media(max-width:900px){ .why{grid-row:auto;display:block} }
.on-dark .why{border-top-color:var(--copper-glow)}
.why h3{font-size:1.15rem;margin-bottom:.5rem}
.why p{font-size:.94rem;color:var(--ink-2);max-width:var(--measure-sm)}
.on-dark .why p{color:var(--sage-glow)}

/* ---------- photo strip ---------- */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem}
.gallery--3{grid-template-columns:repeat(3,1fr)}
.gallery .shot{aspect-ratio:1;border-radius:.6rem}
.gallery--wide .shot{aspect-ratio:4/3}
@media(max-width:760px){ .gallery,.gallery--3{grid-template-columns:repeat(2,1fr)} }

/* ---------- ticked lists ---------- */
.ticks{list-style:none;display:flex;flex-direction:column;gap:.6rem;margin-bottom:1.4rem}
.ticks li{font-size:.92rem;line-height:1.55;color:var(--ink-2);padding-left:1.35rem;position:relative}
.ticks li::before{content:"";position:absolute;left:0;top:.6em;width:.45rem;height:.45rem;border-radius:50%;background:var(--sun);outline:1px solid color-mix(in srgb,var(--sun-ink) 45%,transparent);outline-offset:0}
.ticks li strong{color:var(--ink);font-weight:650}
.on-dark .ticks li{color:var(--on-forest)}
.on-dark .ticks li strong{color:var(--sun-glow)}
.on-dark .ticks li::before{outline-color:color-mix(in srgb,var(--sun-glow) 60%,transparent)}

/* ---------- pull quotes ---------- */
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:clamp(1.5rem,3vw,2.5rem);margin-top:3rem}
.quote{display:flex;flex-direction:column}
.quote::before{content:"";display:block;width:1.6rem;height:2px;background:var(--copper);margin-bottom:1.1rem}
.on-dark .quote::before{background:var(--copper-glow)}
.quote p{
  font-family:var(--display);font-optical-sizing:auto;
  font-size:clamp(1.02rem,.98rem + .32vw,1.2rem);
  line-height:1.42;letter-spacing:-.015em;color:var(--ink);
}
.on-dark .quote p{color:var(--on-forest)}
.quote footer{
  margin-top:auto;padding-top:1rem;font-family:var(--body);font-size:.76rem;font-weight:650;
  letter-spacing:.13em;text-transform:uppercase;color:var(--copper-ink);
}
.on-dark .quote footer{color:var(--copper-glow)}
.stars{display:flex;gap:.15rem;margin-bottom:.8rem;color:var(--sun-ink)}
.on-dark .stars{color:var(--sun-glow)}
.stars svg{width:.95rem;height:.95rem;display:block}

/* ---------- key list ---------- */
.keylist{border-top:1px solid color-mix(in srgb,var(--ink) 14%,transparent)}
.on-dark .keylist{border-top-color:color-mix(in srgb,var(--sage-glow) 26%,transparent)}
.keyrow{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.1rem;
  padding:.95rem 0;align-items:baseline;
  border-bottom:1px solid color-mix(in srgb,var(--ink) 14%,transparent);
  font-size:.93rem;
}
.on-dark .keyrow{border-bottom-color:color-mix(in srgb,var(--sage-glow) 26%,transparent)}
.keyrow .k{
  font-family:var(--display);font-optical-sizing:auto;
  font-size:.85rem;letter-spacing:.01em;white-space:nowrap;color:var(--copper-ink);
}
.on-dark .keyrow .k{color:var(--copper-glow)}

/* ---------- quiet inline CTA ---------- */
.nudge{
  display:flex;flex-wrap:wrap;align-items:center;gap:.9rem 1.4rem;
  margin-top:2.5rem;padding-top:1.5rem;
  border-top:1px solid color-mix(in srgb,var(--ink) 14%,transparent);
}
.on-dark .nudge{border-top-color:color-mix(in srgb,var(--sage-glow) 26%,transparent)}
.nudge p{font-size:.95rem;color:var(--muted);margin:0}
.on-dark .nudge p{color:var(--sage-glow)}

/* ---------- closing call to action ---------- */
.book{text-align:center}
.book .eyebrow{justify-content:center}
.book .eyebrow::before{content:"";flex:1;height:1px;background:currentColor;opacity:.32;max-width:5rem}
.book .lede{margin-inline:auto}
.book-actions{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center;margin-top:2.2rem}

.contact{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem 2.2rem;margin-top:3rem;padding-top:2rem;border-top:1px solid color-mix(in srgb,var(--ink) 14%,transparent);font-size:.88rem;color:var(--muted)}
.contact a{color:var(--sun-ink);text-decoration-thickness:1px;text-underline-offset:2px;
  display:inline-block;padding-block:.4rem}
.contact a:hover{color:var(--ink)}
.on-dark .contact{border-top-color:color-mix(in srgb,var(--sage-glow) 26%,transparent);color:var(--sage-glow)}
.on-dark .contact a{color:var(--sun-glow)}
.on-dark .contact a:hover{color:var(--on-forest)}

/* ---------- footer ---------- */
.foot{background:var(--forest-2);color:var(--sage-glow);padding-block:3rem 2.5rem;font-size:.85rem;line-height:1.7}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.2fr) repeat(2,minmax(0,1fr));gap:2rem clamp(1.5rem,4vw,3rem)}
.foot .mark{width:52px;height:52px;margin-bottom:.7rem;border-radius:50%}
.foot h4{font-size:var(--label);font-family:var(--body);font-weight:650;letter-spacing:.14em;text-transform:uppercase;color:var(--sun-glow);margin-bottom:.9rem}
.foot ul{list-style:none;display:flex;flex-direction:column;gap:.1rem}
.foot ul a{display:inline-block;padding-block:.35rem}
.foot a{color:var(--sage-glow);text-decoration:none;transition:color var(--fast) var(--ease)}
.foot a:hover{color:var(--on-forest)}
.foot-base a{display:inline-block;padding-block:.4rem}
.foot-base{
  margin-top:2.5rem;padding-top:1.5rem;
  border-top:1px solid color-mix(in srgb,var(--sage-glow) 22%,transparent);
  display:flex;flex-wrap:wrap;gap:.6rem 2rem;justify-content:space-between;
  font-size:.78rem;
}
.foot em{font-style:normal;color:var(--sun-glow)}
@media(max-width:760px){ .foot-grid{grid-template-columns:1fr;gap:2rem} }

/* ---------- the logo mark ---------- */
.mark{display:block}
.seal-hero{width:min(100%,15rem);margin-inline:auto;filter:drop-shadow(0 14px 34px rgba(20,59,31,.16))}

/* ---------- media ---------- */
.shot{
  display:block;width:100%;border-radius:var(--r-card);
  object-fit:cover;background:var(--paper-2);
}
figure.shot-fig{margin:0}
figure.shot-fig figcaption{
  margin-top:.7rem;font-size:.78rem;color:var(--muted);line-height:1.5;
}
.on-dark figure.shot-fig figcaption{color:var(--sage-glow)}

/* ---------- utilities ---------- */
.center{text-align:center}
.mt-0{margin-top:0}
.stack-sm{display:flex;flex-direction:column;gap:.5rem}
.h2-sub{font-size:clamp(1.5rem,1.25rem + 1vw,1.95rem)}
.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}

/* ---------- reduced motion / transparency / contrast ---------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .js-reveal .rise{opacity:1;transform:none}
}
@media(prefers-reduced-transparency:reduce){
  .nav{background:var(--paper);backdrop-filter:none;-webkit-backdrop-filter:none}
}
@media(prefers-contrast:more){
  .card{border-color:var(--ink)}
  .eyebrow::after,.eyebrow--center::before,.book .eyebrow::before{opacity:.7}
}