/* =========================================================================
   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); }
.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; }
}