/* =========================================================================
   BASE — reset, layout, type, motion primitives
   Reads only from tokens.css.
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, canvas, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

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

/* Focus is designed, and the ring is the one green that is legal on white. */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

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

.skip {
  position: absolute; left: var(--sp-2); top: var(--sp-2); z-index: 200;
  transform: translateY(-220%);
  background: var(--deep); color: var(--ink-invert);
  padding: var(--sp-1) var(--sp-3);
  font-size: var(--fs-micro); letter-spacing: var(--track-micro);
  text-transform: uppercase;
}
.skip:focus-visible { transform: translateY(0); }

/* -------------------------------------------------------------------------
   LAYOUT
   ------------------------------------------------------------------------- */
.shell {
  width: 100%;
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.fold { padding-block: var(--fold); position: relative; }
.fold--wide { padding-block: var(--fold-wide); }
.fold--quiet { background: var(--surface-quiet); }

/* -------------------------------------------------------------------------
   TYPE
   ------------------------------------------------------------------------- */
/* One family, so weight and tracking do the work a second face used to. */
.display {
  font-family: var(--font);
  font-weight: 700;
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
}
.display em { font-style: normal; font-weight: 300; }
.d1 { font-size: var(--fs-d1); line-height: var(--lh-tight); }
.d2 { font-size: var(--fs-d2); line-height: var(--lh-tight); }
.d3 { font-size: var(--fs-d3); }
.d4 { font-size: var(--fs-d4); }

.eyebrow {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--ink-mid);
}
/* the sage rule is graphic, so it is allowed to be this light */
.eyebrow::before {
  content: '';
  width: 34px; height: 2px;
  background: var(--graphic);
  flex: none;
}
/* On the two dark folds --ink-mid is 1.4:1. Same component, inverted tier. */
.eyebrow--invert { color: var(--on-deep-mid); }

.lead { font-size: var(--fs-lead); color: var(--ink-mid); max-width: var(--measure); }
.body { color: var(--ink-mid); max-width: var(--measure); }

/* page.php's one section. --fold alone does not clear the fixed header on a
   phone: --fold bottoms out at 5rem (80px) while .hdr measures 73px tall and
   the h1's own line box starts above its box top, so the title was rendering
   18px INTO the header — measured, on every page using this template. The
   header's real height is what has to be cleared, so that is what is added,
   rather than a larger --fold that would also inflate the desktop gap where
   there is already 35px of clearance. */
.page-fold {
  padding-top: calc(var(--fold) + 72px);
  padding-bottom: var(--fold);
}
@media (min-width: 1025px) {
  .page-fold { padding-top: var(--fold); }
}

/* The generic page template's content column (page.php) — full .shell
   width rather than .body's 62ch, so the policy/statement/sitemap pages
   fill the page instead of leaving two thirds of it empty.

   The one thing full width costs is line length: at 1360px a 16px
   paragraph runs past 160 characters, which is roughly double what is
   comfortable to read. Rather than re-narrowing the column and undoing
   the request, the long-form blocks are set in columns on wide screens
   only — the text stays inside a readable measure while the content as a
   whole still spans the page. Below 1100px there is no room for two
   columns and it collapses back to a single full-width flow, which at
   that width is already a sensible measure on its own. */
.page-body { max-width: none; }
.page-body > h2 {
  margin-top: var(--sp-5);
  font-size: var(--fs-xl); font-weight: 700;
  letter-spacing: var(--track-tight); color: var(--ink);
}
.page-body > h2:first-child { margin-top: 0; }
.page-body > h3 {
  margin-top: var(--sp-3);
  font-size: var(--fs-lg); font-weight: 700; color: var(--ink);
}
.page-body > p,
.page-body > ul,
.page-body > ol { margin-top: var(--sp-2); }
.page-body > ul,
.page-body > ol { padding-left: 1.25rem; }
.page-body > li,
.page-body > ul li,
.page-body > ol li { margin-top: 0.35rem; }

@media (min-width: 1100px) {
  /* column-fill is left at its default (balance) deliberately. The `auto`
     value only fills column one first when the container has a constrained
     height; on a page that is as tall as its content, it puts everything
     in column one and leaves column two empty. balance splits the flow
     evenly, and the reading order is the same either way — down column
     one, then down column two. */
  .page-body {
    column-count: 2;
    column-gap: clamp(2.5rem, 5vw, 4.5rem);
  }
  /* a heading must never be left stranded at the foot of a column with
     its section starting in the next one */
  .page-body > h2,
  .page-body > h3 { break-after: avoid; break-inside: avoid; }
  .page-body > p,
  .page-body > ul,
  .page-body > ol { break-inside: avoid; }
}
.micro {
  font-size: var(--fs-micro); letter-spacing: var(--track-micro);
  text-transform: uppercase; color: var(--ink-quiet);
  font-variant-numeric: tabular-nums;
}
.num { font-variant-numeric: tabular-nums; }

.rule { border: 0; border-top: var(--hair) solid var(--rule-quiet); }

/* -------------------------------------------------------------------------
   BUTTONS
   Primary is deep green because white on sage measures 2.04:1 — the obvious
   sage button is unreadable and is not offered.
   ------------------------------------------------------------------------- */
/* ONE button on the site.

   v8 shipped two systems: the header's booking pill was its own component —
   999px radius, sage disc, icon on the right — while every other button was a
   2px-radius slab with centred text. Side by side they did not read as the
   same family. The pill won, because it is the one people click most, so .btn
   is now that shape and everything else is a variant of it. */
.btn {
  position: relative;
  /* clips the flood below to the pill's own shape, and isolate: so the
     flood's z-index:-1 lands above this element's own background rather
     than falling through to whatever is behind the button */
  overflow: hidden;
  isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.6rem;
  padding: 0.72rem 0.8rem 0.72rem 1.35rem;
  font-size: var(--fs-sm);
  font-weight: 500;
  border-radius: var(--r-pill);
  transition: transform var(--t-1) var(--ease),
              color var(--t-2) var(--ease),
              box-shadow var(--t-1) var(--ease);
}
/* The disc is where sage is allowed to be solid: it is a shape carrying a
   deep-green glyph, never sage type on white. */
.btn i {
  position: relative;
  width: 27px; height: 27px; border-radius: 50%;
  display: grid; place-items: center; flex: none;
  background: var(--sage); color: var(--deep);
  font-style: normal; line-height: 1;
  transition: transform var(--t-1) var(--ease),
              background-color var(--t-2) var(--ease),
              color var(--t-2) var(--ease);
}
.btn i svg { width: 13px; height: 13px; display: block; }

/* -------------------------------------------------------------------------
   THE HOVER SIGNATURE — the flood

   One gesture, defined once on .btn, so every button on the page — primary,
   ghost, key, the CTA, the two in the visit card — answers to a pointer the
   same way: the disc's colour swells out of the disc and floods the pill,
   and the label and the disc trade colours with it.

   It is a single scale on one circle, start to finish. That is the whole
   point: an earlier version wrapped the glyph out of one edge of the disc
   and back through the other, which needed an instantaneous jump at the
   halfway mark to reposition it, and no amount of easing hides a teleport.
   Nothing here jumps, so there is nothing to smooth over.

   The colours are not decorative. Each variant floods to the one colour its
   own label can legally sit on:
     primary  deep -> sage,  label goes deep   (8.03:1)
     ghost    white -> sage, label goes deep   (8.03:1)
     key      sage -> deep,  label goes white  (16.36:1)
   ------------------------------------------------------------------------- */
.btn::before {
  content: '';
  position: absolute; z-index: -1;
  /* anchored on the disc, so the colour reads as coming OUT of it rather
     than sweeping in from off-button */
  top: 50%; right: 14px; width: 34px; height: 34px; margin-top: -17px;
  border-radius: 50%;
  background: var(--flood, var(--sage));
  transform: scale(0);
  transition: transform var(--t-3) var(--ease);
}
.btn-key::before { --flood: var(--deep); }

/* 14 is enough to clear the widest button on the page from a 34px disc;
   it is scale, so it costs nothing to be generous. */
.btn:hover::before { transform: scale(14); }

.btn-primary:hover, .btn-ghost:hover { color: var(--deep); }
.btn-primary:hover i, .btn-ghost:hover i { background: var(--deep); color: var(--sage); }
.btn-key:hover { color: var(--ink-invert); }
.btn-key:hover i { background: var(--sage); color: var(--deep); }

@media (prefers-reduced-motion: no-preference) {
  .btn:hover { transform: translateY(-2px); }
}

.btn-primary {
  background: var(--deep);
  color: var(--ink-invert);
  box-shadow: 0 12px 26px -16px rgba(var(--deep-rgb), 0.8);
}
.btn-primary:hover { box-shadow: 0 18px 34px -16px rgba(var(--deep-rgb), 0.9); }

.btn-ghost {
  color: var(--ink);
  background: var(--white);
  box-shadow: inset 0 0 0 var(--hair) var(--rule);
}
.btn-ghost:hover { box-shadow: inset 0 0 0 var(--hair) var(--deep); }

/* For dark surfaces, where the deep-green primary would disappear. Sage
   carries deep-green text at 8.03:1 — the one place a sage fill is legal
   under type, because the type on it is nearly black rather than white. */
.btn-key { background: var(--sage); color: var(--deep); }
.btn-key i { background: var(--deep); color: var(--sage); }
.btn-key:hover { box-shadow: 0 16px 30px -16px rgba(var(--sage-rgb), 0.55); }

/* -------------------------------------------------------------------------
   REVEAL — every fold enters the same way, so the page reads as one film.
   Armed by JS so a failed script never leaves the page blank.
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal-on .r { opacity: 0; transform: translate3d(0, 28px, 0); }
  .reveal-on .r.in {
    opacity: 1;
    transform: none;
    transition: opacity var(--t-4) var(--ease), transform var(--t-4) var(--ease);
    /* a beat before anything moves: the fold arrives while the stage above is
       still fading out, and starting instantly made the two read as one rush */
    transition-delay: 0.10s;
  }
  .reveal-on .r-1.in { transition-delay: 0.22s; }
  .reveal-on .r-2.in { transition-delay: 0.36s; }
  .reveal-on .r-3.in { transition-delay: 0.50s; }
  .reveal-on .r-4.in { transition-delay: 0.64s; }
  .reveal-on .r-5.in { transition-delay: 0.78s; }
}