/* ==========================================================================
   GREEN & GRAVEL
   components.css — the reusable pieces used on more than one page
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Buttons and links
   -------------------------------------------------------------------------- */

/* Substantial rectangular blocks. Sentence case, not caps: uppercase belongs
   on navigation and metadata, and a wall of tracked-out caps makes every
   control shout at the same volume. */
.btn {
  --mx: 0px; --my: 0px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 19px 34px;
  border: 1px solid var(--ink);
  border-radius: var(--r);
  font-family: var(--display);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.012em;
  white-space: nowrap;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transform: translate3d(var(--mx), var(--my), 0);
  transition: transform 0.35s var(--ease-out), color 0.3s var(--ease),
              border-color 0.3s var(--ease);
}

/* The hover fill wipes up. Transform only, so it stays on the compositor. */
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--ink);
  transform: scaleY(0);
  transform-origin: bottom center;
  transition: transform 0.45s var(--ease-out);
}
.btn:hover::before,
.btn:focus-visible::before { transform: scaleY(1); }
.btn:hover { color: var(--paper); }
.btn::before { transition: transform 0.38s var(--ease-out); }

.btn--fill {
  background: var(--olive);
  border-color: var(--olive);
  color: var(--paper);
}
.btn--fill::before { background: var(--olive-deep); }
.btn--fill:hover { color: var(--paper); }

.btn--ghost { border-color: var(--line); }
.btn--ghost:hover { border-color: var(--ink); }

.btn--light {
  border-color: rgba(244, 241, 233, 0.4);
  color: var(--on-night);
}
.btn--light::before { background: var(--on-night); }
.btn--light:hover { color: var(--ink); border-color: var(--on-night); }

.btn--sm { padding: 13px 22px; font-size: 0.875rem; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: 0.42; pointer-events: none; }
.btn__ico { flex: none; transition: transform 0.35s var(--ease-out); }
.btn:hover .btn__ico { transform: translateX(5px); }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* Text link with a rule that draws in from the left */
.arrow-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 7px;
  font-family: var(--display);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.012em;
}
.arrow-link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  opacity: 0.28;
  transform-origin: left center;
  transition: transform 0.5s var(--ease-out), opacity 0.5s var(--ease-out);
}
.arrow-link:hover::after { opacity: 1; }
.arrow-link svg { transition: transform 0.45s var(--ease-out); }
.arrow-link:hover svg { transform: translateX(5px); }

/* --------------------------------------------------------------------------
   2. Masthead
   -------------------------------------------------------------------------- */

.masthead {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 500;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  color: var(--on-night);
  transition: transform 0.55s var(--ease-out), background-color 0.45s var(--ease),
              color 0.45s var(--ease);
}

/* Backing panel scales in rather than the box animating its own height.
   Solid, not blurred: frosted glass is a software surface, and this bar
   should read as a printed masthead sitting on the page. */
.masthead::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--night);
  border-bottom: 1px solid var(--night-line);
  transform: translateY(-101%);
  transition: transform 0.45s var(--ease-out);
}
.masthead.is-solid::before { transform: none; }

/* The bar is dark in both states: light type on the hero video, light type on
   the panel once it has scrolled past. */
.masthead.is-over { color: var(--on-night); }
.masthead.is-hidden { transform: translateY(-100%); }

/* With the drawer open the ground behind the bar is paper, whatever the page
   was doing before. This has to win over .is-over, so it comes after it, and
   it is now the only state in which the bar carries dark type. */
.masthead.is-menu { color: var(--ink); }
.masthead.is-menu::before { transform: translateY(-101%); }

.masthead__inner {
  position: relative;
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  gap: 32px;
}

.wordmark {
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
  font-family: var(--display);
}
.wordmark .amp {
  font-weight: 400;
  opacity: 0.5;
  padding-inline: 0.08em;
}

.mainnav {
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.4vw, 38px);
  margin-left: auto;
}
.mainnav a {
  position: relative;
  font-family: var(--display);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  padding-block: 6px;
}
.mainnav a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.45s var(--ease-out);
}
.mainnav a:hover::after,
.mainnav a[aria-current='page']::after { transform: scaleX(1); transform-origin: left center; }
.mainnav a[aria-current='page'] { opacity: 1; }

.masthead__end {
  display: flex;
  align-items: center;
  gap: 22px;
  padding-left: 22px;
  margin-left: 4px;
  border-left: 1px solid currentColor;
  border-left-color: color-mix(in srgb, currentColor 24%, transparent);
  align-self: stretch;
}
.masthead__end .btn { padding: 11px 21px; font-size: 0.8125rem; }
.masthead .btn { border-color: rgba(244, 241, 233, 0.45); }
.masthead .btn::before { background: var(--on-night); }
.masthead .btn:hover { color: var(--ink); border-color: var(--on-night); }
/* Back to ink while the drawer is open. */
.masthead.is-menu .btn { border-color: var(--ink); }
.masthead.is-menu .btn::before { background: var(--ink); }
.masthead.is-menu .btn:hover { color: var(--paper); }

/* Menu button */
.menu-btn {
  display: none;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  padding: 10px 0;
  cursor: pointer;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.menu-btn__bars { display: grid; gap: 5px; width: 22px; }
.menu-btn__bars i {
  display: block;
  height: 1px;
  background: currentColor;
  transition: transform 0.45s var(--ease-out), opacity 0.3s var(--ease);
}
.menu-btn[aria-expanded='true'] .menu-btn__bars i:first-child { transform: translateY(3px) rotate(45deg); }
.menu-btn[aria-expanded='true'] .menu-btn__bars i:last-child { transform: translateY(-3px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   3. Drawer (mobile navigation)
   -------------------------------------------------------------------------- */

.drawer {
  position: fixed;
  inset: 0;
  z-index: 480;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  padding: calc(var(--nav-h) + 24px) var(--gutter) 32px;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.75s var(--ease-out);
  visibility: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.drawer.is-open { clip-path: inset(0 0 0 0); visibility: visible; }

.drawer__nav { display: flex; flex-direction: column; }
.drawer__nav a {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.9rem, 8vw, 2.7rem);
  line-height: 1.05;
  letter-spacing: -0.032em;
  overflow: hidden;
}
.drawer__nav a > span {
  display: inline-block;
  transform: translate3d(0, 110%, 0);
  transition: transform 0.7s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 55ms + 120ms);
}
.drawer.is-open .drawer__nav a > span { transform: none; }
.drawer__nav .num { align-self: center; }

/* A phone number is the main way this business gets work: it needs a thumb's
   worth of target, not an 11px line of text. */
.drawer__foot .label a,
.footer a[href^='tel:'],
.footer a[href^='mailto:'] { display: inline-block; padding-block: 8px; }

.drawer__foot {
  margin-top: auto;
  padding-top: 40px;
  display: grid;
  gap: 18px;
  opacity: 0;
  transition: opacity 0.6s var(--ease) 0.4s;
}
.drawer.is-open /* A phone number is the main way this business gets work: it needs a thumb's
   worth of target, not an 11px line of text. */
.drawer__foot .label a,
.footer a[href^='tel:'],
.footer a[href^='mailto:'] { display: inline-block; padding-block: 8px; }

.drawer__foot { opacity: 1; }

/* --------------------------------------------------------------------------
   4. Media frames and the pending-media placeholder

   Every image and video on the site sits in a .media frame. If the file is
   not there yet, js/lib/media.js adds .is-pending and a toned panel takes its
   place, labelled with the path it is waiting for. A half-shot site still
   looks deliberate.
   -------------------------------------------------------------------------- */

.media {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  background: var(--paper-3);
  isolation: isolate;
}
.media > img,
.media > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.media--4x5  { aspect-ratio: 4 / 5; }
.media--3x4  { aspect-ratio: 3 / 4; }
.media--1x1  { aspect-ratio: 1 / 1; }
.media--4x3  { aspect-ratio: 4 / 3; }
.media--3x2  { aspect-ratio: 3 / 2; }
.media--16x9 { aspect-ratio: 16 / 9; }
.media--21x9 { aspect-ratio: 21 / 9; }
.media--fill { height: 100%; }

/* Slight scale on hover, cropping inside the frame */
.media--hover > img,
.media--hover > video,
.media--hover > .media__fill {
  transition: transform 1.1s var(--ease-out);
}
a:hover > .media--hover > img,
a:hover > .media--hover > video,
a:hover > .media--hover > .media__fill,
.media--hover:hover > img,
.media--hover:hover > video,
.media--hover:hover > .media__fill { transform: scale(1.045); }

/* Tones for pending media, so a page of placeholders still has rhythm */
.media__fill {
  position: absolute;
  inset: 0;
  display: none;
  place-content: center;
  justify-items: center;
  gap: 10px;
  padding: 24px;
  text-align: center;
  background-color: var(--tone, var(--paper-3));
  color: var(--tone-ink, rgba(22, 24, 15, 0.5));
}
/* Fine hairline texture. Reads as tooth on the surface, not as a gradient. */
.media__fill::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    -45deg,
    currentColor 0 1px,
    transparent 1px 9px
  );
  opacity: 0.12;
}
.media__fill::after {
  content: '';
  position: absolute;
  inset: 14px;
  border: 1px solid currentColor;
  opacity: 0.22;
}
/* The inset frame belongs on a picture inside a layout, not on a full-bleed
   background, where it just reads as a stray hairline. */
.seasons__stage .media__fill::after,
.svc__stage .media__fill::after { content: none; }
.media.is-pending > img,
.media.is-pending > video { visibility: hidden; }
.media.is-pending > .media__fill { display: grid; }

/* Blur-up. js/lib/media.js sets --lqip to a ~24px inline preview of the real
   photo, painted under the picture from the first frame. The picture itself
   starts transparent and fades in once it has decoded, so the visitor sees a
   soft version of the actual garden, never a blank box, and no hard pop. The
   preview is scaled up slightly so the blur has no soft edge at the frame. */
.media.has-lqip::before,
.vsec__media.has-lqip::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;               /* under the picture, over the frame's own tone */
  background: var(--lqip) center / cover no-repeat;
  filter: blur(14px);
  transform: scale(1.12);
}
.media.has-lqip > img,
.media.has-lqip > video,
.vsec__media.has-lqip > img,
.vsec__media.has-lqip > video {
  opacity: 0;
  transition: opacity 0.55s ease-out, transform 1.1s var(--ease-out);
}
.media.has-lqip.is-loaded > img,
.media.has-lqip.is-loaded > video,
.vsec__media.has-lqip.is-loaded > img,
.vsec__media.has-lqip.is-loaded > video { opacity: 1; }
/* A preview of the real photo beats the toned panel; keep the panel for
   frames that have no preview or whose file failed. */
.media.has-lqip.is-pending > .media__fill,
.vsec__media.has-lqip.is-pending > .media__fill { display: none; }

.media__fill b {
  position: relative;
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.media__fill span {
  position: relative;
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.02em;
  line-height: 1.5;
  word-break: break-all;
  max-width: 30ch;
  opacity: 0.75;
}

.t-olive  { --tone: var(--olive);     --tone-ink: rgba(244, 241, 233, 0.62); }
.t-deep   { --tone: var(--olive-deep);--tone-ink: rgba(244, 241, 233, 0.55); }
.t-moss   { --tone: var(--moss);      --tone-ink: rgba(244, 241, 233, 0.7); }
.t-sand   { --tone: var(--paper-3);   --tone-ink: rgba(22, 24, 15, 0.48); }
.t-stone  { --tone: var(--stone);     --tone-ink: rgba(22, 24, 15, 0.5); }
.t-timber { --tone: var(--timber);    --tone-ink: rgba(244, 241, 233, 0.68); }
.t-night  { --tone: var(--night-2);   --tone-ink: rgba(244, 241, 233, 0.5); }

/* Caption under a frame */
.media-cap {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: 14px;
  font-size: 0.8125rem;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   5. Video sections
   -------------------------------------------------------------------------- */

.vsec {
  position: relative;
  overflow: hidden;
  background: var(--night);
  color: var(--on-night);
  isolation: isolate;
}
.vsec__media {
  position: absolute;
  inset: -12% 0;             /* headroom for the parallax travel */
  z-index: -2;
}
.vsec__media video,
.vsec__media img,
.vsec__media .media__fill {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Same pending behaviour as a .media frame. On a full-bleed film the label
   moves out of the way of the copy and the inset frame is dropped. */
.vsec__media.is-pending video,
.vsec__media.is-pending img { visibility: hidden; }
.vsec__media.is-pending .media__fill { display: grid; }
/* Centre right: the copy in these sections is always bottom or middle left,
   and the panel is taller than the section, so a top offset lands off screen. */
.vsec__media .media__fill {
  place-content: center end;
  justify-items: end;
  text-align: right;
  padding-inline: var(--gutter);
}
.vsec__media .media__fill::after { content: none; }
/* On a phone a full-bleed film panel has no clear zone left, so the scaffold
   label steps aside. The tone and texture still show. */
@media (max-width: 760px) {
  .vsec__media .media__fill b,
  .vsec__media .media__fill span { display: none; }
}
.vsec__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(12, 14, 9, 0.5);   /* flat scrim, never a gradient */
}
.vsec__scrim--deep { background: rgba(12, 14, 9, 0.66); }
.vsec__inner { position: relative; padding-block: clamp(96px, 14vw, 200px); }

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--night);
  color: var(--on-night);
  isolation: isolate;
  text-align: center;
}
.hero--short { min-height: 82svh; }

.hero__inner {
  position: relative;
  width: 100%;
  padding-block: calc(var(--nav-h) + 40px) clamp(96px, 12vw, 150px);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero__title { max-width: 20ch; margin-inline: auto; }
.hero__lede {
  margin: 26px auto 0;
  /* Deliberately narrow. The headline carries the promise; this is the small
     print underneath it and it should never run past three lines. */
  max-width: 46ch;
  font-size: clamp(1rem, 1.05vw, 1.15rem);
  color: rgba(244, 241, 233, 0.9);
}
.hero .btn-row { margin-top: 42px; justify-content: center; }
.hero .label--rule::before { display: none; }

/* The scroll cue and the service areas sit at the foot of the frame rather
   than in the flow, so the centred block stays optically centred. With the
   copy centred the word "Scroll" crowds the buttons, so only the moving line
   remains: it says the same thing and takes a fifth of the room. */
.hero__foot {
  position: absolute;
  left: 0; right: 0; bottom: clamp(22px, 3vw, 36px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.hero__foot .label { text-align: center; }
.hero__foot .scroll-cue { font-size: 0; gap: 0; }
.hero__foot .scroll-cue i { height: 46px; }

/* Keep the centred block clear of the foot on short screens. */
.hero__inner { padding-bottom: clamp(120px, 15vh, 190px); }

/* Scroll cue */
.scroll-cue {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(244, 241, 233, 0.62);
}
.scroll-cue i {
  position: relative;
  display: block;
  width: 1px;
  height: 40px;
  background: rgba(244, 241, 233, 0.24);
  overflow: hidden;
}
.scroll-cue i::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--on-night);
  animation: cue 2.4s var(--ease-in-out) infinite;
}
@keyframes cue {
  0%   { transform: translateY(-100%); }
  55%  { transform: translateY(0); }
  100% { transform: translateY(100%); }
}

/* Page head for pages without a video hero */
.page-head {
  padding-top: calc(var(--nav-h) + clamp(72px, 10vw, 140px));
  padding-bottom: clamp(48px, 6vw, 80px);
}

/* --------------------------------------------------------------------------
   7. Reactive icons
   Simple custom line marks. Each responds on hover and on entry, and leans a
   degree or two toward the cursor. Nothing cartoonish.
   -------------------------------------------------------------------------- */

.ricon {
  --tilt: 0deg;
  width: 46px;
  height: 46px;
  flex: none;
  overflow: visible;
  transform: rotate(var(--tilt));
  transition: transform 0.6s var(--ease-out);
}
.ricon * {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.ricon [data-part] {
  transition: transform 0.7s var(--ease-out), opacity 0.5s var(--ease-out);
  transform-box: fill-box;
  transform-origin: center;
}

/* shovel: the blade rocks and the shaft lifts */
.is-on .ricon--shovel [data-part='blade'] { transform: rotate(-9deg) translateY(1px); }
.is-on .ricon--shovel [data-part='shaft'] { transform: translateY(-1.5px); }
/* leaf: bends at the stem */
.is-on .ricon--leaf [data-part='blade'] { transform: rotate(-7deg) scale(1.04); }
.is-on .ricon--leaf [data-part='vein'] { opacity: 0.45; }
/* gravel: the stones separate */
.is-on .ricon--gravel [data-part='a'] { transform: translate(-2.5px, -1.5px); }
.is-on .ricon--gravel [data-part='b'] { transform: translate(2.5px, -2px); }
.is-on .ricon--gravel [data-part='c'] { transform: translate(0.5px, 2px); }
/* sleepers: the boards shift into alignment */
.is-on .ricon--sleeper [data-part='a'] { transform: translateX(3px); }
.is-on .ricon--sleeper [data-part='c'] { transform: translateX(-3px); }
/* hedge: the top compresses, as if trimmed */
.ricon--hedge [data-part='top'] { transform-origin: bottom center; }
.is-on .ricon--hedge [data-part='top'] { transform: scaleY(0.84); }
.is-on .ricon--hedge [data-part='cut'] { opacity: 1; transform: translate(3px, -2px); }
.ricon--hedge [data-part='cut'] { opacity: 0; }
/* boundary: the posts settle onto the line */
.is-on .ricon--boundary [data-part='p1'] { transform: translateY(-2px); }
.is-on .ricon--boundary [data-part='p3'] { transform: translateY(-2px); }
/* mower / general */
.is-on .ricon--mower [data-part='wheel'] { transform: rotate(38deg); }
.is-on .ricon--mower [data-part='body'] { transform: translateX(2px); }
/* shears: the blades open around their real pivot */
.ricon--shears [data-part] { transform-box: view-box; transform-origin: 12px 10.4px; }
.is-on .ricon--shears [data-part='a'] { transform: rotate(-9deg); }
.is-on .ricon--shears [data-part='b'] { transform: rotate(9deg); }
/* water / drainage */
.is-on .ricon--drain [data-part='drop'] { transform: translateY(3px); opacity: 0.5; }
/* light, for the seasonal page */
.is-on .ricon--light [data-part='glow'] { opacity: 1; transform: scale(1.12); }
.ricon--light [data-part='glow'] { opacity: 0.22; }
/* barrow: the wheel turns and the body tips forward */
.is-on .ricon--barrow [data-part='wheel'] { transform: rotate(42deg); }
.is-on .ricon--barrow [data-part='body'] { transform: rotate(-4deg); }
/* path: the edges draw apart, the joints spread */
.is-on .ricon--path [data-part='a'] { transform: translateX(-1.5px); }
.is-on .ricon--path [data-part='b'] { transform: translateX(1.5px); }
.is-on .ricon--path [data-part='c'] { transform: translateY(1.5px); }
/* bed: the planting grows */
.is-on .ricon--bed [data-part] { transform: translateY(-1.5px) scaleY(1.1); }
.ricon--bed [data-part] { transform-origin: bottom center; }
/* tree */
.is-on .ricon--tree [data-part='blade'] { transform: translateY(-1.5px) scale(1.05); }

/* --------------------------------------------------------------------------
   8. Before and after comparison
   -------------------------------------------------------------------------- */

.ba {
  --x: 50%;
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--night-2);
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  cursor: ew-resize;
}
.ba--16x9 { aspect-ratio: 16 / 9; }
.ba--3x2  { aspect-ratio: 3 / 2; }
.ba--4x3  { aspect-ratio: 4 / 3; }

.ba__pane { position: absolute; inset: 0; }
.ba__pane > .media { height: 100%; }
.ba__pane--before { clip-path: inset(0 calc(100% - var(--x)) 0 0); }

.ba__handle {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--x);
  width: 1px;
  background: rgba(244, 241, 233, 0.9);
  transform: translateX(-0.5px);
  pointer-events: none;
}
.ba__grip {
  position: absolute;
  top: 50%; left: var(--x);
  width: 54px; height: 54px;
  margin: -27px 0 0 -27px;
  display: grid;
  place-content: center;
  border: 0;
  background: var(--ink);
  color: var(--on-night);
  cursor: grab;
  transition: background-color 0.3s var(--ease);
}
.ba__grip:active { cursor: grabbing; }
.ba:hover .ba__grip { background: var(--olive-deep); }
.ba__grip svg { width: 22px; height: 12px; }

.ba__tag {
  position: absolute;
  top: 20px;
  padding: 9px 15px;
  border: 0;
  font-family: var(--display);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--on-night);
  background: var(--ink);
  pointer-events: none;
}
.ba__tag--before { left: 20px; }
.ba__tag--after  { right: 20px; }

/* Side-by-side alternative, offered on every project */
.ba-wrap { display: grid; gap: 18px; }
.ba-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.ba-split { display: none; grid-template-columns: 1fr 1fr; gap: 8px; }
.ba-wrap.is-split .ba { display: none; }
.ba-wrap.is-split .ba-split { display: grid; }

/* --------------------------------------------------------------------------
   9. Projects
   -------------------------------------------------------------------------- */

.pgrid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: clamp(48px, 7vw, 110px);
}

.pcard { grid-column: span 6; }
.pcard--wide  { grid-column: span 7; }
.pcard--narrow{ grid-column: span 5; }
.pcard--full  { grid-column: span 12; }
.pcard--drop  { margin-top: clamp(40px, 8vw, 130px); }

.pcard a { display: block; }
.pcard .media { background: var(--paper-3); }

.pcard__body {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 8px 24px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.pcard__title {
  font-size: clamp(1.15rem, 1.5vw, 1.5rem);
  letter-spacing: -0.03em;
}
.pcard__meta {
  grid-column: 1 / -1;
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 0.8125rem;
  color: var(--muted);
}
.pcard__meta i { width: 3px; height: 3px; background: currentColor; font-style: normal; opacity: 0.55; }
@media (max-width: 620px) {
  .pcard__meta { display: block; line-height: 1.6; }
  .pcard__meta i { display: inline-block; vertical-align: middle; margin: 0 7px; }
}
.pcard__go {
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out);
}
.pcard a:hover .pcard__go { opacity: 1; transform: none; }

/* Filters. Text with a rule, never pills. */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  align-items: center;
}
.filter {
  position: relative;
  padding: 6px 0;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.35s var(--ease);
}
.filter::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.4s var(--ease-out);
}
.filter:hover { color: var(--ink); }
.filter[aria-pressed='true'] { color: var(--ink); }
.filter[aria-pressed='true']::after { transform: scaleX(1); }

.pcard.is-out {
  opacity: 0;
  transform: scale(0.985);
  pointer-events: none;
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}
.pcard.is-gone { display: none; }

/* --------------------------------------------------------------------------
   10. Process steps
   -------------------------------------------------------------------------- */

.steps { border-top: 1px solid var(--line); }
.is-dark .steps, .on-dark .steps { border-color: var(--night-line); }

.step {
  display: grid;
  grid-template-columns: minmax(90px, 0.7fr) minmax(0, 3fr) minmax(0, 5fr);
  gap: 20px var(--gutter);
  align-items: baseline;
  padding-block: clamp(28px, 3.4vw, 46px);
  border-bottom: 1px solid var(--line);
}
.is-dark .step, .on-dark .step { border-color: var(--night-line); }

.step__n {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.5rem, 2.2vw, 2.1rem);
  line-height: 1;
  /* stone reads at 2.7:1 on paper, under the floor for large text */
  color: #7c7566;
  overflow: hidden;
  display: block;
}
.step__n span {
  display: inline-block;
  transform: translate3d(0, 110%, 0);
  transition: transform 0.85s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 110ms);
}
.step.is-in .step__n span { transform: none; }
.step__t { font-size: clamp(1.05rem, 1.4vw, 1.3rem); font-weight: 500; letter-spacing: -0.02em; }
.step__d { color: var(--muted); font-size: 0.9375rem; }
.on-dark .step__d, .is-dark .step__d { color: var(--on-night-mu); }

/* --------------------------------------------------------------------------
   11. Minimal lists (capabilities, service areas)
   -------------------------------------------------------------------------- */

.linelist { border-top: 1px solid var(--line); }
.is-dark .linelist, .on-dark .linelist { border-color: var(--night-line); }
.linelist li {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-block: 18px;
  border-bottom: 1px solid var(--line);
  font-size: clamp(1rem, 1.3vw, 1.2rem);
  letter-spacing: -0.015em;
  transition: padding-left 0.5s var(--ease-out), color 0.35s var(--ease);
}
.is-dark .linelist li, .on-dark .linelist li { border-color: var(--night-line); }
.linelist li:hover { padding-left: 14px; }
.linelist .num { flex: none; }

/* --------------------------------------------------------------------------
   12. Footer
   -------------------------------------------------------------------------- */

.footer {
  padding-top: clamp(64px, 8vw, 108px);
  padding-bottom: 32px;
  border-top: 1px solid var(--line);
  background: var(--paper);
}
.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: 48px var(--gutter);
}
.footer__mark {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2rem, 3.8vw, 3.1rem);
  line-height: 1;
  letter-spacing: -0.034em;
}
.footer__blurb { margin-top: 22px; max-width: 30ch; color: var(--muted); font-size: 0.9375rem; }
.footer__col h3 { margin-bottom: 20px; }
.footer__col li { margin-bottom: 11px; }
.footer__col a {
  font-size: 0.9375rem;
  color: var(--muted);
  transition: color 0.3s var(--ease);
}
.footer__col a:hover { color: var(--ink); }
.footer__base {
  margin-top: clamp(56px, 7vw, 92px);
  padding-top: 24px;
  border-top: 1px solid var(--line-soft);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 32px;
  font-size: 0.8125rem;
  color: var(--muted);
}
.footer__base ul { display: flex; flex-wrap: wrap; gap: 20px; }

/* --------------------------------------------------------------------------
   13. Custom cursor (desktop, fine pointers only)
   -------------------------------------------------------------------------- */

.cursor {
  position: fixed;
  top: 0; left: 0;
  z-index: 700;
  width: auto; height: auto;
  margin: -16px 0 0 14px;
  display: none;
  place-content: center;
  padding: 9px 15px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--display);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(var(--cx, 0px), var(--cy, 0px), 0) scale(0.86);
  transition: opacity 0.22s var(--ease), scale 0.28s var(--ease-out);
}
.cursor.is-on { opacity: 1; transform: translate3d(var(--cx, 0px), var(--cy, 0px), 0) scale(1); }

@media (hover: hover) and (pointer: fine) {
  .cursor { display: grid; }
  /* The label replaces the arrow only where it has something to say. */
  [data-cursor] { cursor: none; }
}

/* --------------------------------------------------------------------------
   14. Scroll progress
   -------------------------------------------------------------------------- */

.progress {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 600;
  height: 2px;
  background: transparent;
  pointer-events: none;
}
.progress i {
  display: block;
  height: 100%;
  background: var(--olive);
  transform: scaleX(var(--p, 0));
  transform-origin: left center;
}

/* --------------------------------------------------------------------------
   15. Forms
   -------------------------------------------------------------------------- */

.field { display: grid; gap: 10px; }
.field > label { font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.02em; }
.field .hint { font-size: 0.8125rem; color: var(--muted); }

.field input[type='text'],
.field input[type='email'],
.field input[type='tel'],
.field input[type='search'],
.field select,
.field textarea {
  width: 100%;
  padding: 15px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-input);
  background: var(--paper);
  color: var(--ink);
  font-size: 1rem;
  transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease);
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--stone); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--olive);
  background: #fff;
}
.field textarea { min-height: 150px; resize: vertical; }
.field.is-bad input,
.field.is-bad textarea,
.field.is-bad select { border-color: var(--timber); }
.field__err {
  font-size: 0.8125rem;
  color: var(--timber-ink);
  display: none;
}
.field.is-bad .field__err { display: block; }

.field-row {
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

/* Large selectable option tiles, hairline not card */
.opts {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  background: var(--line);
  border: 1px solid var(--line);
}
.opt {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 20px;
  background: var(--paper);
  cursor: pointer;
  transition: background-color 0.35s var(--ease), color 0.35s var(--ease);
}
.opt:hover { background: var(--paper-2); }
.opt input { position: absolute; opacity: 0; pointer-events: none; }
.opt__mark {
  width: 14px; height: 14px;
  flex: none;
  border: 1px solid var(--stone);
  position: relative;
  transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease);
}
.opt input[type='radio'] + .opt__mark { border-radius: 50%; }
.opt__mark::after {
  content: '';
  position: absolute;
  inset: 3px;
  background: var(--paper);
  transform: scale(0);
  transition: transform 0.3s var(--ease-out);
}
.opt input[type='radio'] + .opt__mark::after { border-radius: 50%; }
.opt:has(input:checked) { background: var(--olive); color: var(--paper); }
.opt:has(input:checked) .opt__mark { border-color: var(--paper); }
.opt:has(input:checked) .opt__mark::after { transform: scale(1); }
.opt:has(input:focus-visible) { outline: 2px solid var(--olive); outline-offset: -2px; }
.opt__t { font-size: 0.9375rem; }

/* --------------------------------------------------------------------------
   16. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
  .mainnav, .masthead__end { display: none; }
  .menu-btn { display: inline-flex; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  .c-l, .c-r, .c-r-in, .c-mid, .c-wide { grid-column: 1 / -1; }
  .pcard, .pcard--wide, .pcard--narrow, .pcard--full { grid-column: span 12; }
  .pcard--drop { margin-top: 0; }
  .step { grid-template-columns: 56px 1fr; }
  .step__d { grid-column: 2; }
  .ba__grip { width: 48px; height: 48px; margin: -24px 0 0 -24px; }
  .ba-split { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  /* A wide comparison is too short to read on a phone. Give it depth. */
  .ba--16x9, .ba--21x9 { aspect-ratio: 4 / 3; }
}

@media (max-width: 620px) {
  /* Two narrow lists side by side rather than one long run: the footer was
     two full screens tall on a phone. Mark and contact keep the full width. */
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 36px 20px; }
  .footer__grid > :first-child,
  .footer__grid > :last-child { grid-column: 1 / -1; }
  .footer__col li { margin-bottom: 9px; }
  .btn { width: 100%; }
  .btn-row { flex-direction: column; align-items: stretch; }
  .btn-row .btn { width: 100%; }
  .media-cap { flex-direction: column; gap: 4px; }
  .ba__tag { top: 12px; padding: 6px 10px; }
  .ba__tag--before { left: 12px; }
  .ba__tag--after { right: 12px; }
}

/* --------------------------------------------------------------------------
   17. Reviews

   Printed quotations set into the grid. No cards, no star graphics, no badge
   row: the review itself is the evidence, and boxing it makes it look like
   marketing furniture.
   -------------------------------------------------------------------------- */

.reviews {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0;
  border-top: 1px solid var(--line);
}

.review-q {
  display: grid;
  align-content: start;
  gap: 20px;
  padding: clamp(32px, 3.4vw, 48px) clamp(24px, 2.6vw, 40px) clamp(32px, 3.4vw, 44px) 0;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
}
.review-q:last-child { border-right: 0; }
/* Columns after the first need clearance from the rule they sit against. */
.review-q + .review-q { padding-left: clamp(24px, 2.6vw, 40px); }
@media (max-width: 760px) { .review-q + .review-q { padding-left: 0; } }

.review-q__t {
  font-size: clamp(1.0625rem, 1.25vw, 1.25rem);
  line-height: 1.5;
  letter-spacing: -0.012em;
  color: var(--ink);
  text-wrap: pretty;
}
.review-q__by { display: grid; gap: 4px; }
.review-q__name { font-family: var(--display); font-weight: 600; font-size: 0.9375rem; }
.review-q__meta { font-size: 0.875rem; color: var(--muted); }

@media (max-width: 760px) {
  .review-q { border-right: 0; padding-right: 0; }
}

/* --------------------------------------------------------------------------
   18. Line list with description
   -------------------------------------------------------------------------- */

.linelist li {
  display: grid;
  grid-template-columns: 44px minmax(130px, 0.85fr) minmax(0, 1.7fr);
  align-items: baseline;
  gap: 6px 24px;
}
.linelist__t { font-family: var(--display); font-weight: 600; letter-spacing: -0.026em; }
.linelist__d { font-size: 0.9375rem; line-height: 1.55; color: var(--muted); letter-spacing: 0; }
.is-dark .linelist__d, .on-dark .linelist__d { color: var(--on-night-mu); }

@media (max-width: 700px) {
  .linelist li { grid-template-columns: 36px minmax(0, 1fr); }
  .linelist__d { grid-column: 2; }
}

/* --------------------------------------------------------------------------
   19. Split media and text

   A bounded rectangular video beside a column of copy. The brief calls for
   media that has edges inside the layout, not only full-bleed backgrounds,
   and this is the section that provides it.
   -------------------------------------------------------------------------- */

.split-media {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  align-items: center;
}
.split-media__media { grid-column: 1 / 8; }
.split-media__body  { grid-column: 8 / 13; padding-left: clamp(0px, 1.5vw, 24px); }
.split-media--flip .split-media__media { grid-column: 6 / 13; order: 2; }
.split-media--flip .split-media__body  { grid-column: 1 / 6;  order: 1; padding-left: 0; }

.split-media__body .h-1 { margin-bottom: 22px; }
.split-media__list { margin-top: 30px; border-top: 1px solid var(--line); }
.split-media__list li {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding-block: 13px;
  border-bottom: 1px solid var(--line);
  font-size: 0.9375rem;
}
.split-media__list span:last-child { color: var(--muted); text-align: right; }
.is-dark .split-media__list, .on-dark .split-media__list { border-color: var(--night-line); }
.is-dark .split-media__list li, .on-dark .split-media__list li { border-color: var(--night-line); }

@media (max-width: 900px) {
  .split-media__media,
  .split-media__body,
  .split-media--flip .split-media__media,
  .split-media--flip .split-media__body { grid-column: 1 / -1; order: initial; }
  .split-media__body { margin-top: 32px; }
}

/* --------------------------------------------------------------------------
   20. Project spec table
   -------------------------------------------------------------------------- */

.spec { border-top: 1px solid var(--ink); }
.spec__row {
  display: grid;
  grid-template-columns: minmax(140px, 0.7fr) minmax(0, 1.6fr);
  gap: 8px 32px;
  padding-block: 15px;
  border-bottom: 1px solid var(--line);
}
.spec__k { font-size: 0.9375rem; color: var(--muted); }
.spec__v { font-family: var(--display); font-weight: 600; font-size: 0.9375rem; letter-spacing: -0.008em; }

@media (max-width: 560px) {
  .spec__row { grid-template-columns: 1fr; gap: 2px; padding-block: 13px; }
}

/* Project tile summary. Gives the grid something to read as well as look at. */
.pcard__summary {
  grid-column: 1 / -1;
  margin-top: 4px;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 52ch;
}
.pcard__title { font-family: var(--display); font-weight: 600; }
.pcard__go { font-family: var(--display); font-weight: 600; letter-spacing: 0.14em; }

/* --------------------------------------------------------------------------
   21. Availability calendar

   A calendar is the most software-shaped thing that can go on a site like
   this, so it is drawn as a diary page: square cells, hairline rules, no
   pills, no blue, and the day number in the display face. Nothing about it
   should read as a booking app.
   -------------------------------------------------------------------------- */

.cal { display: grid; gap: clamp(20px, 2.4vw, 30px); }

.cal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.cal__month {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.1rem, 1.5vw, 1.35rem);
  letter-spacing: -0.026em;
}
.cal__nav { display: flex; gap: 8px; }
.cal__btn {
  width: 42px; height: 42px;
  display: grid;
  place-content: center;
  border: 1px solid var(--line);
  cursor: pointer;
  transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease);
}
.cal__btn:hover:not(:disabled) { border-color: var(--ink); background: var(--paper-2); }
.cal__btn:disabled { opacity: 0.28; cursor: default; }

/* One hairline grid: the gap shows the background through. */
.cal__grid {
  background: var(--line);
  border: 1px solid var(--line);
  display: grid;
  gap: 1px;
}
.cal__dows,
.cal__days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px;
}
.cal__dow {
  background: var(--paper-2);
  padding-block: 11px;
  text-align: center;
  font-family: var(--display);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.cal__day {
  position: relative;
  background: var(--paper);
  aspect-ratio: 1 / 1;
  min-height: 62px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  padding: 9px 10px;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.cal__day--blank { background: var(--paper); cursor: default; }

.cal__n {
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.cal__w {
  font-size: 0.625rem;
  line-height: 1.25;
  letter-spacing: 0.04em;
  color: var(--muted);
  transition: color 0.2s var(--ease);
}

.cal__day:not([disabled]):hover { background: var(--paper-2); }

/* Four states, four readings. Nothing is greyed into invisibility: a day you
   cannot have still has to say why. */

/* Not available at all — hatched the way a slot is scratched out in a paper
   diary. Tuesday and Friday, because of the clubs. */
.cal__day--off,
.cal__day--shut {
  cursor: default;
  color: var(--stone);
  background: var(--paper);
}
.cal__day--off::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    -45deg, var(--line) 0 1px, transparent 1px 6px);
  opacity: 0.9;
  pointer-events: none;
}
.cal__day--off .cal__n { opacity: 0.55; }

/* Already booked — solid, not hatched: the day is spoken for, not empty. */
.cal__day--booked {
  background: var(--paper-3);
  color: var(--ink-2);
}
.cal__day--booked .cal__w { color: var(--muted); }

/* Sunday. Kept back, but askable if it will not wait. */
.cal__day--urgent {
  background: #f6e3dd;
  color: #6d2f21;
}
.cal__day--urgent .cal__w { color: #8c4232; }
.cal__day--urgent:not([disabled]):hover { background: #f1d6ce; }

.cal__day--out { color: var(--stone); }
.cal__day--out::after { opacity: 0.4; }
.cal__day--out.cal__day--urgent,
.cal__day--out.cal__day--booked { background: var(--paper); color: var(--stone); }

.cal__day.is-on {
  background: var(--olive);
  color: var(--paper);
}
.cal__day.is-on .cal__w { color: rgba(244, 241, 233, 0.75); }
.cal__day:focus-visible { outline: 2px solid var(--olive); outline-offset: -2px; z-index: 1; }
.cal__day.is-on:focus-visible { outline-color: var(--paper); }

.cal__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  font-size: 0.8125rem;
  color: var(--muted);
}
.cal__legend span { display: inline-flex; align-items: center; gap: 9px; }
.cal__swatch { width: 18px; height: 18px; display: block; border: 1px solid var(--line); }
.cal__swatch--free { background: var(--paper); }
.cal__swatch--off {
  background-image: repeating-linear-gradient(-45deg, var(--line) 0 1px, transparent 1px 6px);
}
.cal__swatch--booked { background: var(--paper-3); }
.cal__swatch--urgent { background: #f6e3dd; border-color: #e0bdb2; }
.cal__swatch--on { background: var(--olive); border-color: var(--olive); }

.cal__picked { min-height: 46px; }
.cal__hint { font-size: 0.875rem; color: var(--muted); }
.cal__chips { display: grid; gap: 1px; margin-top: 12px; background: var(--line); border: 1px solid var(--line); }
.cal__chips li {
  display: grid;
  grid-template-columns: minmax(120px, auto) 1fr 34px;
  align-items: center;
  gap: 14px;
  padding: 11px 0 11px 14px;
  background: var(--paper);
  font-size: 0.9375rem;
}
.cal__chips li > span:first-child { font-family: var(--display); font-weight: 600; }
.cal__chipwin { color: var(--muted); font-size: 0.875rem; }
.cal__chips button {
  width: 34px; height: 100%;
  cursor: pointer;
  color: var(--muted);
  font-size: 1.1rem;
  line-height: 1;
  transition: color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.cal__chips button:hover { color: var(--paper); background: var(--ink); }

/* The long phrase on a Sunday, and the one word it becomes when the cell is
   too narrow to hold it. */
.cal__w-short { display: none; }
@media (max-width: 720px) {
  .cal__w-long { display: none; }
  .cal__w-short { display: inline; }
}

.cal__ask {
  margin-top: 14px;
  font-size: 0.9375rem;
  line-height: 1.55;
}
.cal__ask a {
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}

.cal__note {
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--muted);
  padding-top: 18px;
  border-top: 1px solid var(--line);
  max-width: 58ch;
}

@media (max-width: 560px) {
  .cal__day { min-height: 46px; padding: 6px 7px; aspect-ratio: auto; height: 62px; }
  .cal__n { font-size: 0.875rem; }
  .cal__w { font-size: 0.5625rem; letter-spacing: 0; }
  .cal__chips li { grid-template-columns: 1fr 34px; gap: 2px 10px; }
  .cal__chipwin { grid-column: 1; }
  .cal__chips button { grid-row: span 2; }
}

/* Availability line in the footer, read straight from the calendar data. */
.footer__hours { display: grid; gap: 6px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line-soft); }
.footer__hours span:last-child { font-size: 0.875rem; color: var(--muted); line-height: 1.5; }

/* --------------------------------------------------------------------------
   22. Hero legibility veil

   The flat scrim sets the mood and is enough over a still. Over real footage
   it is not: a 16 second clip moves through bright sky, pale gravel and a
   yellow trug, and measured against the actual frames the copy dropped to
   3.2:1 in the bottom corner.

   So the flat layer comes down a little and two soft gradients are added,
   anchored bottom and left, which is exactly where every piece of hero copy
   sits. The top right of the frame — where there is never any type — stays
   brighter than it was before. This is the "local gradients only where needed
   for legibility" exception, and it is the only place on the site with one.
   -------------------------------------------------------------------------- */

.hero .vsec__scrim,
.hero-night .vsec__scrim {
  background-color: rgba(12, 14, 9, 0.34);
  background-image:
    radial-gradient(58% 46% at 50% 47%,
      rgba(12, 14, 9, 0.46) 0%,
      rgba(12, 14, 9, 0.22) 62%,
      rgba(12, 14, 9, 0) 100%),
    linear-gradient(to top,
      rgba(12, 14, 9, 0.40) 0%,
      rgba(12, 14, 9, 0) 30%);
}

/* The veil above was heavier before. Piling darkness onto compressed footage
   turns foliage to mud, so it now does less and the shadow below does the
   rest: a wide, soft halo that lifts the type off whatever is behind it
   without visibly dimming the picture. Restrained on purpose — no offset, no
   hard edge, just local separation. */
.hero__title,
.hero .lede,
.hero .label,
.hero .scroll-cue,
.hero-night__title,
.hero-night .lede,
.hero-night .label {
  text-shadow: 0 0 28px rgba(12, 14, 9, 0.55),
               0 1px 3px rgba(12, 14, 9, 0.35);
}

/* The deep variant keeps its extra weight on top of the same shaping. */
.hero .vsec__scrim--deep,
.hero-night .vsec__scrim--deep { background-color: rgba(12, 14, 9, 0.56); }

/* The veil is now centred on the copy rather than anchored bottom-left, since
   the copy moved. Same principle: darken only where the type is, and lift the
   type rather than dimming the picture. */
.hero .label,
.hero-night .label { color: rgba(244, 241, 233, 0.88); }

/* Same reasoning for the supporting line. Lifting the type is free; darkening
   the picture is not. */
.hero__lede,
.hero-night .lede { color: rgba(244, 241, 233, 0.9); }

/* The hero wordmark. Same scale as the headline it replaced, set as a
   logotype: caps, heavier, and the ampersand stepped back the way it is in
   the masthead so the two read as the same mark. */
.hero__logo {
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: -0.005em;
  max-width: none;
}
.hero__logo .amp {
  font-weight: 400;
  opacity: 0.55;
  padding-inline: 0.06em;
}

/* Hidden trap field for form bots: off-screen, out of the tab order, ignored by screen readers. */
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }