/* ============================================================
   Meridian — Components
   Built once, included on every page.
   ============================================================ */

/* ============================================================
   GLASS
   Frosted glass is an accent, not the design. It appears on
   exactly three things: the sticky nav, the floating booking
   widget, and cards that sit over a real photograph.
   Never glass-on-glass. Never glass over a flat gradient.
   ============================================================ */
.glass {
  background: var(--glass-tint);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-md);
}
/* Solid fallback where backdrop-filter is unsupported. Opacity
   climbs to near-solid so text keeps its AA contrast. */
@supports not (backdrop-filter: blur(1px)) {
  .glass { background: rgba(245,242,236,.96); }
}
/* Small screens: glass sits over busier crops, so tint goes up. */
@media (max-width: 640px) {
  .glass { background: rgba(245,242,236,.88); }
}

/* ============================================================
   BUTTONS
   Contrast note: Sunflower, Ember and Teal all fail AA as text
   on light. They are used here as FILLS only, always carrying
   --ink text. Ink fill carries --offwhite text.
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-family: var(--font-body);
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.01em;
  padding: .9375rem 1.5rem;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.btn:active { transform: translateY(1px); }

/* Primary — Sunflower fill + Ink text. 10.9:1 */
.btn--primary { background: var(--sunflower); color: var(--ink); }
.btn--primary:hover { background: var(--ember); color: var(--ink); box-shadow: var(--shadow-md); }

/* Solid — Ink fill + off-white text. 18.5:1 */
.btn--ink { background: var(--ink); color: var(--offwhite); }
.btn--ink:hover { background: #1d1f1f; box-shadow: var(--shadow-md); }

/* Ghost on light */
.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}
.btn--ghost:hover { border-color: var(--ink); background: rgba(20,22,28,.04); }

/* Ghost on photography / ink sections */
.btn--ghost-light {
  background: rgba(245,242,236,.10);
  color: var(--offwhite);
  border-color: rgba(245,242,236,.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.btn--ghost-light:hover { background: rgba(245,242,236,.20); border-color: var(--offwhite); }

.btn--sm { padding: .6875rem 1.125rem; font-size: .875rem; }
.btn--lg { padding: 1.0625rem 1.875rem; font-size: 1rem; }
.btn--block { width: 100%; }

/* Text link with an arrow that steps forward on hover */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 600;
  font-size: .9375rem;
  color: var(--ink);
  text-decoration: none;
}
.arrow-link svg { transition: transform var(--dur) var(--ease); }
.arrow-link:hover svg { transform: translateX(4px); }
.section--ink .arrow-link { color: var(--offwhite); }

/* ============================================================
   NAV — sticky, glass
   ============================================================ */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  /* Above the drawer (110) so the burger, now an X, stays visible and
     clickable while the drawer is open. */
  z-index: 130;
  border: 0;
  border-bottom: 1px solid transparent;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
  transition: background-color var(--dur-slow) var(--ease),
              border-color var(--dur-slow) var(--ease),
              box-shadow var(--dur-slow) var(--ease),
              padding var(--dur-slow) var(--ease);
  padding-block: .875rem;
}
/* Over a photo hero the nav starts transparent with light text,
   then becomes glass with ink text once you scroll past it. */
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
}

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.2vw, 2rem);
  list-style: none;
  padding: 0;
  margin: 0;
}
.nav__links a {
  position: relative;
  font-size: .9375rem;
  font-weight: 500;
  color: var(--offwhite);
  text-decoration: none;
  padding-block: .375rem;
  transition: color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--sunflower);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.nav__links a:hover::after,
.nav__links a[aria-current="page"]::after { transform: scaleX(1); }

.nav__cta { display: flex; align-items: center; gap: .75rem; flex: none; }
.nav .btn--ink { background: var(--offwhite); color: var(--ink); }
.nav .btn--ink:hover { background: var(--sunflower); }

/* Scrolled state */
.nav.is-scrolled {
  padding-block: .625rem;
  background: var(--glass-tint);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  border-bottom-color: var(--line);
  box-shadow: 0 1px 24px rgba(20,22,28,.06);
}
@supports not (backdrop-filter: blur(1px)) {
  .nav.is-scrolled { background: rgba(245,242,236,.97); }
}
.nav.is-scrolled .nav__links a { color: var(--ink); }
.nav.is-scrolled .btn--ink { background: var(--ink); color: var(--offwhite); }
.nav.is-scrolled .btn--ink:hover { background: var(--ember); color: var(--ink); }
.nav.is-scrolled .nav__burger span { background: var(--ink); }

/* Pages that do not open on a photo hero start in the scrolled
   palette so nav text never sits white on off-white. */
.nav--solid { padding-block: .625rem; background: var(--glass-tint);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  border-bottom-color: var(--line); }
.nav--solid .nav__links a { color: var(--ink); }
.nav--solid .btn--ink { background: var(--ink); color: var(--offwhite); }
.nav--solid .nav__burger span { background: var(--ink); }

/* Burger */
.nav__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  padding: 0 10px;
  border-radius: var(--radius-sm);
}
.nav__burger span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--offwhite);
  border-radius: 2px;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile drawer */
.nav__drawer {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(88vw, 360px);
  z-index: 110;
  background: var(--offwhite);
  border-left: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  padding: 6rem 2rem 2rem;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform var(--dur-slow) var(--ease-out), visibility var(--dur-slow);
  overflow-y: auto;
}
.nav__drawer.is-open { transform: translateX(0); visibility: visible; }
.nav__drawer ul { list-style: none; padding: 0; margin: 0 0 2rem; }
.nav__drawer li + li { border-top: 1px solid var(--line); }
.nav__drawer a {
  display: block;
  padding: 1rem 0;
  font-family: var(--font-head);
  font-size: 1.375rem;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
}
.nav__drawer a:hover { color: var(--ember); }

.nav__scrim {
  position: fixed;
  inset: 0;
  z-index: 105;
  background: rgba(20,22,28,.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-slow) var(--ease), visibility var(--dur-slow);
}
.nav__scrim.is-open { opacity: 1; visibility: visible; }

body.is-locked { overflow: hidden; }

@media (max-width: 900px) {
  .nav__links { display: none; }
  .nav__cta .btn { display: none; }
  .nav__burger { display: flex; }
}

/* ============================================================
   FLOATING BOOK A TOUR WIDGET
   ============================================================ */
.booking-fab {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  padding: .8125rem 1.25rem .8125rem .9375rem;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: .9375rem;
  color: var(--ink);
  text-decoration: none;
  opacity: 0;
  transform: translateY(12px) scale(.96);
  pointer-events: none;
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out),
              background-color var(--dur) var(--ease);
}
.booking-fab.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.booking-fab:hover { background: var(--sunflower); }
 /* The logo's stacked circle pair, reused as the widget's mark. */
.booking-fab__mark { flex: none; display: block; }
@media (max-width: 640px) {
  .booking-fab { left: 1rem; right: 1rem; justify-content: center; }
}

/* ============================================================
   CARDS
   ============================================================ */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 2.5vw, 2rem);
  text-decoration: none;
  color: inherit;
  transition: transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
a.card:hover, .card--hover:hover {
  transform: translateY(-4px);
  border-color: rgba(247,158,75,.45);
  box-shadow: var(--shadow-md);
}
.card h3 { margin-bottom: .5rem; }
.card p { color: var(--warmgrey); font-size: .9375rem; }
.card__foot { margin-top: auto; padding-top: 1.5rem; }

/* Price line */
.price {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: -0.02em;
}
.price span { font-family: var(--font-body); font-size: .8125rem; font-weight: 500; color: var(--warmgrey); }

/* ============================================================
   MEDIA / FIGURES
   ============================================================ */
.figure {
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface-sunk);
}
.figure img { width: 100%; height: 100%; object-fit: cover; }
.figure--tall img { aspect-ratio: 4 / 5; }
.figure--wide img { aspect-ratio: 16 / 9; }
.figure--square img { aspect-ratio: 1 / 1; }

/* ============================================================
   PERKS RIBBON
   ============================================================ */
.ribbon {
  display: flex;
  flex-wrap: wrap;
  gap: .625rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.ribbon li {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .9375rem;
  font-weight: 500;
  padding: .625rem 1.125rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
}
.section--ink .ribbon li {
  background: rgba(245,242,236,.06);
  border-color: rgba(245,242,236,.18);
  color: var(--offwhite);
}

/* ============================================================
   STAT STRIP (glass, overlaps the hero photo)
   ============================================================ */
.statstrip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-radius: var(--radius);
  overflow: hidden;
}
.statstrip__item { padding: 1.5rem clamp(1.25rem, 2.5vw, 2rem); }
.statstrip__item + .statstrip__item { border-left: 1px solid var(--line); }
.statstrip__val {
  display: block;
  font-family: var(--font-head);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: .125rem;
}
.statstrip__lab {
  font-size: .8125rem;
  /* ink-based, not warmgrey: this strip sits on glass over the darkest
     part of the photograph, where warmgrey drops to 4.15:1. */
  color: rgba(20,22,28,.66);
  line-height: 1.35;
  display: block;
}
@media (max-width: 640px) {
  .statstrip { grid-template-columns: 1fr; }
  .statstrip__item { padding: 1rem 1.25rem; }
  .statstrip__item + .statstrip__item { border-left: 0; border-top: 1px solid var(--line); }
  .statstrip__val { font-size: 1.25rem; }
}

/* ============================================================
   QUOTE
   ============================================================ */
.quote {
  font-family: var(--font-head);
  font-size: clamp(1.375rem, 2.6vw, 2rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.quote__mark {
  display: block;
  /* Grotesks draw a slanted double-prime here; a serif gives a real
     curly quote. */
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 3rem;
  line-height: .6;
  color: var(--sunflower);
  margin-bottom: 1rem;
}
.quote__by {
  font-family: var(--font-body);
  font-size: .875rem;
  font-weight: 500;
  color: var(--warmgrey);
  margin-top: 1.5rem;
}
.section--ink .quote__by { color: rgba(245,242,236,.6); }

/* Placeholder marker — anything not yet supplied by the client
   is flagged rather than invented. */
.placeholder {
  display: inline-block;
  font-family: var(--font-body);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink);
  background: rgba(255,122,92,.30);
  border: 1px dashed rgba(20,22,28,.35);
  padding: .1875rem .4375rem;
  border-radius: 4px;
}
.section--ink .placeholder {
  color: var(--offwhite);
  background: rgba(255,122,92,.20);
  border-color: rgba(245,242,236,.4);
}

/* ============================================================
   CHECKLIST
   ============================================================ */
.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; }
.checklist li {
  display: grid;
  grid-template-columns: 1.25rem 1fr;
  gap: .75rem;
  font-size: .9375rem;
  align-items: start;
}
.checklist li::before {
  content: "";
  width: 1.25rem; height: 1.25rem;
  margin-top: .125rem;
  border-radius: 50%;
  background: var(--sunflower) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314161C' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 12px no-repeat;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background: var(--ink);
  color: var(--ink-soft);
  padding-block: clamp(3.5rem, 7vw, 5.5rem) 2rem;
}
.footer a { color: var(--ink-soft); text-decoration: none; transition: color var(--dur) var(--ease); }
.footer a:hover { color: var(--sunflower); }
.footer__top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.3fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: 3rem;
}
.footer h4 {
  font-family: var(--font-body);
  font-size: var(--kicker);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: rgba(245,242,236,.55);
  margin-bottom: 1.125rem;
}
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .625rem; font-size: .9375rem; }
.footer address { font-style: normal; font-size: .9375rem; line-height: 1.5; }
.footer__loc + .footer__loc { margin-top: 1.125rem; }
.footer__loc strong { color: var(--offwhite); display: block; font-weight: 600; font-size: .9375rem; }
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  justify-content: space-between;
  align-items: center;
  padding-top: 2rem;
  border-top: 1px solid rgba(245,242,236,.14);
  font-size: .8438rem;
  color: rgba(245,242,236,.55);
}

.newsletter { display: flex; gap: .5rem; margin-top: 1rem; }
.newsletter input {
  flex: 1;
  min-width: 0;
  padding: .8125rem 1rem;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(245,242,236,.22);
  background: rgba(245,242,236,.06);
  color: var(--offwhite);
  font-size: .9375rem;
}
.newsletter input::placeholder { color: rgba(245,242,236,.45); }
.newsletter input:focus-visible { box-shadow: var(--focus-on-ink); border-color: transparent; }
.newsletter .btn { flex: none; }

.socials { display: flex; gap: .5rem; margin-top: 1.5rem; }
.socials a {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 1px solid rgba(245,242,236,.20);
  border-radius: 50%;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.socials a:hover { background: var(--sunflower); border-color: var(--sunflower); color: var(--ink); }
.socials svg { width: 17px; height: 17px; }

@media (max-width: 900px) {
  .footer__top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .footer__top { grid-template-columns: 1fr; }
  .newsletter { flex-direction: column; }
  .newsletter .btn { width: 100%; }
}

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
}
.reveal.is-in { opacity: 1; transform: none; }
/* JS adds .js to <html>; without JS everything is visible. */
html:not(.js) .reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}


/* ============================================================
   PAGE BLOCKS
   Eight sections, eight layout families. Nothing repeats.
     1 hero        asymmetric editorial, photo bleeds right
     2 manifesto   centred type statement, no image
     3 spaces      asymmetric bento, 6 items / 6 cells
     4 locations   full-bleed panorama with overlaid index
     5 why         hairline rows, no cards
     6 perks       single marquee
     7 quote       one large pull quote
     8 cta         full-bleed ink with booking form
   ============================================================ */

/* ---- The logo mark, reused as a page device ---------------- */
.mark { display: block; flex: none; }
.mark--sm { width: 22px; height: 22px; }

/* ============================================================
   1. HERO — full-bleed photograph, bottom-anchored
   Reference was a dark architectural hero with bottom-left copy.
   Taken further with: a two-part bottom composition instead of one
   copy block, a glass panel that does real work (the three
   locations and the entry price) rather than a decorative stat bar,
   and the logo's three colours as the closing rule.
   ============================================================ */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  /* Fills exactly one viewport on any monitor. svh (not vh) so mobile
     browser chrome does not push the CTAs below the fold. */
  min-height: 100svh;
  /* Top padding runs heavier than bottom so the block optically centres in
     the space BELOW the overlaid nav, not in the raw viewport. */
  padding-top: clamp(7rem, 12vh, 9rem);
  padding-bottom: clamp(3rem, 7vh, 5.5rem);
  background: var(--ink);
  overflow: hidden;
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 52%;
  transform: scale(1.02);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    /* nav band, so white nav links hold whatever the crop does */
    linear-gradient(to bottom, rgba(20,22,28,.62) 0, rgba(20,22,28,0) 200px),
    /* base, carrying the copy and the panel */
    linear-gradient(to top, rgba(20,22,28,.90) 0%, rgba(20,22,28,.76) 30%, rgba(20,22,28,.50) 58%, rgba(20,22,28,.22) 82%);
}
/* Closing rule in the logo's three colours. */
.hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 5px;
  background: linear-gradient(90deg,
    var(--sunflower) 0 42%, var(--teal) 42% 68%, var(--ember) 68% 100%);
}

.hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 21rem);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  width: 100%;
}
.hero h1 {
  color: var(--offwhite);
  /* min(vw, vh) keeps the display type inside short landscape monitors */
  font-size: clamp(2.5rem, min(7.2vw, 10.5vh), 6rem);
  line-height: .95;
  letter-spacing: -0.035em;
  max-width: 15ch;
}
.hero h1 .em { position: relative; display: inline-block; }
.hero h1 .em::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: .07em;
  height: .1em;
  background: var(--sunflower);
  z-index: -1;
}
.hero__sub {
  margin-top: clamp(.875rem, 2vh, 1.5rem);
  font-size: clamp(1rem, 1.5vw, 1.1875rem);
  line-height: 1.55;
  color: rgba(245,242,236,.82);
  max-width: 40ch;
}
.hero__actions {
  display: flex; flex-wrap: wrap; gap: .75rem;
  margin-top: clamp(1.25rem, 3vh, 2.25rem);
}

/* Glass panel. Legitimate: a real photograph sits behind it, and it
   carries information rather than decoration. */
.heropanel {
  border-radius: var(--radius);
  padding: 1.25rem 1.375rem 1.125rem;
  background: rgba(245,242,236,.88);
}
@supports not (backdrop-filter: blur(1px)) {
  .heropanel { background: rgba(245,242,236,.97); }
}
.heropanel__head {
  font-size: var(--micro);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(20,22,28,.58);
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--line);
}
.heropanel__row {
  display: flex;
  align-items: baseline;
  gap: .625rem;
  padding: .6875rem 0;
  border-bottom: 1px solid var(--line);
}
.heropanel__dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  flex: none;
  transform: translateY(-1px);
}
.heropanel__row:nth-of-type(1) .heropanel__dot { background: var(--sunflower); }
.heropanel__row:nth-of-type(2) .heropanel__dot { background: var(--teal); }
.heropanel__row:nth-of-type(3) .heropanel__dot { background: var(--ember); }
.heropanel__name { font-weight: 600; font-size: .9375rem; color: var(--ink); }
.heropanel__meta { margin-left: auto; font-size: .8125rem; color: rgba(20,22,28,.62); }
.heropanel__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  padding-top: .875rem;
}
.heropanel__price {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.375rem;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.heropanel__price span { font-family: var(--font-body); font-size: .75rem; font-weight: 500; color: rgba(20,22,28,.62); }

/* Short viewports: a forced 100svh would squeeze the copy, so the hero
   sizes to its content instead. */
@media (max-height: 640px) and (min-width: 641px) {
  .hero { min-height: auto; padding-top: 6rem; padding-bottom: 2.5rem; }
  .hero__grid { align-items: center; }
}
/* Short and narrow: the panel is the first thing to go under the copy. */
@media (max-width: 980px) {
  .hero { min-height: auto; padding-bottom: 3rem; }
  .hero__grid { grid-template-columns: 1fr; align-items: start; }
  .heropanel { max-width: 26rem; }
}
@media (max-width: 640px) {
  .hero { min-height: auto; padding-top: 8rem; }
  .hero::before {
    background: linear-gradient(to bottom, rgba(20,22,28,.72) 0 22%, rgba(20,22,28,.58) 45%, rgba(20,22,28,.92) 100%);
  }
  .hero__actions .btn { flex: 1 1 100%; }
}

/* ============================================================
   2. MANIFESTO — type only, no image, no grid
   ============================================================ */
.manifesto { text-align: center; }
.manifesto__body {
  max-width: 30ch;
  margin-inline: auto;
  font-family: var(--font-head);
  font-size: var(--statement);
  font-weight: 500;
  line-height: 1.24;
  letter-spacing: -0.022em;
  text-wrap: balance;
}
/* inline + clone so the wash follows every wrapped line cleanly */
.manifesto__body .em {
  display: inline;
  background: var(--teal-wash);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  padding: .04em .16em;
  border-radius: 3px;
}
.manifesto__foot {
  margin-top: 2.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}
.manifesto p.muted {
  max-width: 52ch;
  margin: 1.75rem auto 0;
  font-size: .9375rem;
}

/* ============================================================
   3. SPACES — asymmetric bento, 6 items, 6 cells, no empties
   ============================================================ */
.bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(.75rem, 1.4vw, 1.125rem);
}
.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 240px;
  padding: clamp(1.25rem, 2.2vw, 1.75rem);
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.tile h3 { font-size: 1.25rem; margin-bottom: .4375rem; }
.tile p { font-size: .9375rem; line-height: 1.55; color: rgba(20,22,28,.68); max-width: 34ch; }
.tile__price {
  margin-top: .875rem;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .9375rem;
  letter-spacing: -0.01em;
}
.tile__price span { font-family: var(--font-body); font-weight: 500; font-size: .8125rem; color: var(--warmgrey); }

/* Cell placement. Six items, six cells, deliberately unequal. */
.tile--a { grid-column: span 7; grid-row: span 2; min-height: 420px; }  /* Coworking, photo */
.tile--b { grid-column: span 5; }                                        /* Dedicated Desk */
.tile--c { grid-column: span 5; }                                        /* Serviced Office */
.tile--d { grid-column: span 4; }                                        /* Virtual Office */
.tile--e { grid-column: span 4; }                                        /* Meeting Room */
.tile--f { grid-column: span 4; }                                        /* Event Space */

/* Photo tile: real image, ink wash, light type. */
.tile--photo { border: 0; }
.tile--photo img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform 700ms var(--ease-out);
}
.tile--photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(20,22,28,.93) 0%, rgba(20,22,28,.66) 44%, rgba(20,22,28,.30) 100%);
}
.tile--photo:hover img { transform: scale(1.04); }
.tile--photo h3 { color: var(--offwhite); font-size: 1.5rem; }
.tile--photo p { color: rgba(245,242,236,.82); max-width: 40ch; }
.tile--photo .tile__price { color: var(--offwhite); }
.tile--photo .tile__price span { color: rgba(245,242,236,.65); }

/* Colour-field tiles, carrying the logo palette at logo weight. */
.tile--sun  { background: var(--sunflower); border-color: transparent; }
.tile--sun p { color: rgba(20,22,28,.72); }
.tile--teal { background: var(--teal-wash); border-color: transparent; }
.tile--ember{ background: var(--ember-wash); border-color: transparent; }

/* Event Space tile carries the brand line illustration. */
.tile--art { padding-top: 0; }
.tile__art {
  align-self: center;
  width: min(100%, 200px);
  margin: .75rem auto auto;
  opacity: .9;
}

@media (max-width: 900px) {
  .tile--a { grid-column: span 12; grid-row: auto; min-height: 340px; }
  .tile--b, .tile--c { grid-column: span 6; }
  .tile--d, .tile--e, .tile--f { grid-column: span 4; }
}
@media (max-width: 680px) {
  .tile { grid-column: span 12 !important; min-height: 0; }
  .tile--a { min-height: 300px; }
}

/* ============================================================
   4. LOCATIONS — full-bleed panorama, overlaid index
   ============================================================ */
.locband {
  position: relative;
  isolation: isolate;
  background: var(--ink);
  padding-block: clamp(4rem, 8vw, 6.5rem);
  overflow: hidden;
}
.locband__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.locband__bg img { width: 100%; height: 100%; object-fit: cover; }
.locband::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to right, rgba(20,22,28,.95) 0%, rgba(20,22,28,.88) 55%, rgba(20,22,28,.84) 100%);
}
.locband h2 { color: var(--offwhite); }
.locband .kicker { color: rgba(245,242,236,.62); }

.locindex {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid rgba(245,242,236,.22);
}
.locindex__item {
  display: block;
  padding: 1.75rem clamp(1.25rem, 2.5vw, 2rem) 1.75rem 0;
  border-bottom: 1px solid rgba(245,242,236,.22);
  text-decoration: none;
  color: var(--offwhite);
  transition: background-color var(--dur) var(--ease);
}
.locindex__item + .locindex__item { border-left: 1px solid rgba(245,242,236,.22); padding-left: clamp(1.25rem, 2.5vw, 2rem); }
.locindex__item:hover { background: rgba(245,242,236,.06); }
.locindex__num {
  display: block;
  font-family: var(--font-head);
  font-size: var(--micro);
  font-weight: 700;
  letter-spacing: .08em;
  margin-bottom: 1rem;
}
.locindex__item:nth-child(1) .locindex__num { color: var(--sunflower); }
.locindex__item:nth-child(2) .locindex__num { color: var(--teal); }
.locindex__item:nth-child(3) .locindex__num { color: var(--ember); }
.locindex h3 {
  color: var(--offwhite);
  font-size: clamp(1.375rem, 2.4vw, 1.875rem);
  letter-spacing: -0.025em;
  margin-bottom: .625rem;
}
.locindex address {
  font-style: normal;
  font-size: .875rem;
  line-height: 1.5;
  color: rgba(245,242,236,.68);
}
.locindex__note {
  margin-top: 1rem;
  font-size: .8125rem;
  color: rgba(245,242,236,.66);
}
.locindex__go {
  margin-top: 1.25rem;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .875rem;
  font-weight: 600;
}
.locindex__item:hover .locindex__go .mark { transform: translateX(4px); }
.locindex__go .mark { transition: transform var(--dur) var(--ease); }

@media (max-width: 820px) {
  .locindex { grid-template-columns: 1fr; }
  .locindex__item + .locindex__item { border-left: 0; padding-left: 0; }
  .locindex__item { padding-right: 0; }
}

/* ============================================================
   5. WHY — hairline rows, no cards
   ============================================================ */
.rows { border-top: 1px solid var(--line); }
.row {
  display: grid;
  grid-template-columns: 3rem minmax(0, 20ch) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: start;
  padding-block: clamp(1.5rem, 2.8vw, 2.25rem);
  border-bottom: 1px solid var(--line);
  transition: background-color var(--dur) var(--ease);
}
.row:hover { background: rgba(255,122,92,.07); }
.row__num {
  /* The accent is the chip, the numeral is ink. Colouring the digits
     themselves would put sunflower/teal/ember on light, which all fail
     AA as text. */
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-head);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  transition: transform var(--dur) var(--ease);
}
/* Logo sequence: triangle, upper circle, lower circle, triangle. */
.row:nth-child(1) .row__num { background: var(--sunflower); }
.row:nth-child(2) .row__num { background: var(--teal); }
.row:nth-child(3) .row__num { background: var(--ember); }
.row:nth-child(4) .row__num { background: var(--sunflower); }
.row:hover .row__num { transform: translateY(-2px); }
.row h3 { font-size: 1.25rem; }
.row p { color: var(--warmgrey); font-size: .9375rem; max-width: 52ch; }
@media (max-width: 760px) {
  .row { grid-template-columns: 3rem 1fr; }
  .row p { grid-column: 2; }
}

/* ============================================================
   6. PERKS — one marquee, the only one on the page
   ============================================================ */
.marquee {
  position: relative;
  overflow: hidden;
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--ink);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee 46s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__group {
  display: flex;
  align-items: center;
  gap: clamp(1.75rem, 4vw, 3.25rem);
  padding-right: clamp(1.75rem, 4vw, 3.25rem);
  flex: none;
}
.marquee__item {
  font-family: var(--font-head);
  font-size: clamp(1rem, 1.9vw, 1.375rem);
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--offwhite);
  white-space: nowrap;
}
@keyframes marquee { to { transform: translateX(-50%); } }
/* Reduced motion: the belt stops and wraps into a readable list. */
@media (prefers-reduced-motion: reduce) {
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .marquee__track { animation: none; width: 100%; }
  .marquee__group:last-child { display: none; }
  .marquee__group { flex-wrap: wrap; gap: .75rem 2rem; padding-right: 0; }
}

/* ============================================================
   7. QUOTE — one voice, large
   ============================================================ */
.pullquote {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
  max-width: 58rem;
}
.pullquote blockquote { margin: 0; }
.quote {
  font-family: var(--font-head);
  font-size: var(--statement);
  font-weight: 500;
  line-height: 1.26;
  letter-spacing: -0.022em;
  text-wrap: balance;
}
.quote__by {
  display: block;
  margin-top: 1.75rem;
  font-family: var(--font-body);
  font-size: .875rem;
  font-weight: 500;
  color: var(--warmgrey);
}
.quote__by strong { color: var(--ink); font-weight: 600; }
@media (max-width: 640px) {
  .pullquote { grid-template-columns: 1fr; gap: 1.25rem; }
}

/* ============================================================
   8. CTA — full-bleed ink
   ============================================================ */
.cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--ink);
  color: var(--offwhite);
  padding-block: clamp(3.5rem, 8vw, 6rem);
}
/* Layer 1: the photograph. */
.cta__media { position: absolute; inset: 0; z-index: -3; }
.cta__media img { width: 100%; height: 100%; object-fit: cover; }
/* Layer 2: ink scrim, weighted left so the headline stays readable. */
.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(100deg,
    rgba(20,22,28,.94) 0%, rgba(20,22,28,.88) 38%, rgba(20,22,28,.70) 70%, rgba(20,22,28,.58) 100%);
}
/* Layer 3: the sunflower wedge, drawn from the logo triangle. */
.cta::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; right: 0;
  z-index: -1;
  width: min(38vw, 480px);
  background: var(--sunflower);
  clip-path: polygon(38% 0, 100% 0, 100% 100%, 0 100%);
  pointer-events: none;
}
@media (max-width: 900px) { .cta::after { display: none; } }
.cta__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr minmax(0, 26rem);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.cta h2 { color: var(--offwhite); font-size: var(--h2); max-width: 14ch; }
.cta p { color: rgba(245,242,236,.80); margin-top: 1rem; max-width: 40ch; }
@media (max-width: 900px) { .cta__inner { grid-template-columns: 1fr; } }

.bookbox {
  color-scheme: dark;
  /* Ink-tinted frosted glass. A light tint here would sit on the sunflower
     wedge and drop the labels, placeholder and note below AA. At .72 ink the
     worst case (pure sunflower behind) still reads 10.5:1 for the heading. */
  background: rgba(20,22,28,.72);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid rgba(245,242,236,.26);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2rem);
  box-shadow:
    inset 0 1px 0 rgba(245,242,236,.16),
    var(--shadow-lg);
}
/* No backdrop-filter, or the viewer asked for less transparency: go solid. */
@supports not (backdrop-filter: blur(1px)) {
  .bookbox { background: rgba(20,22,28,.93); }
}
@media (prefers-reduced-transparency: reduce) {
  .bookbox {
    background: rgba(20,22,28,.95);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
.bookbox h3 { color: var(--offwhite); font-size: 1.0625rem; margin-bottom: 1.25rem; }
.bookbox label {
  display: block;
  font-size: var(--micro);
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: rgba(245,242,236,.70);
  margin-bottom: .375rem;
}
.bookbox .field + .field { margin-top: 1rem; }
.bookbox select,
.bookbox input {
  width: 100%;
  padding: .8125rem 1rem;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(245,242,236,.30);
  background: rgba(245,242,236,.10);
  color: var(--offwhite);
  font-size: .9375rem;
}
.bookbox select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FAF8F4' stroke-width='2' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .875rem center;
  background-size: 16px;
  padding-right: 2.5rem;
}
.bookbox option { background: var(--ink); color: var(--offwhite); }
.bookbox input::placeholder { color: rgba(245,242,236,.72); }
.bookbox input:focus-visible,
.bookbox select:focus-visible { box-shadow: var(--focus-on-ink); border-color: transparent; }
.bookbox .btn { margin-top: 1.25rem; }
.bookbox__note { font-size: var(--micro); color: rgba(245,242,236,.66); margin-top: .75rem; text-align: center; }

/* ============================================================
   PAGE HERO (hub + stub pages)
   ============================================================ */
.pagehero {
  padding-top: clamp(8rem, 14vw, 11rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}
.pagehero h1 { font-size: var(--display); line-height: .96; max-width: 14ch; }
.pagehero .lead { margin-top: 1.5rem; }

/* ============================================================
   ACCORDION (detail pages)
   ============================================================ */
.accordion { border-top: 1px solid var(--line); }
.accordion__item { border-bottom: 1px solid var(--line); }
.accordion__q {
  display: flex;
  width: 100%;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  padding: 1.375rem 0;
  font-family: var(--font-head);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.accordion__q::after {
  content: "";
  flex: none;
  width: 1.25rem; height: 1.25rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314161C' stroke-width='2' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--dur) var(--ease);
}
.accordion__q[aria-expanded="true"]::after { transform: rotate(180deg); }
.accordion__a { padding-bottom: 1.375rem; color: var(--warmgrey); font-size: .9375rem; max-width: 62ch; }

/* ============================================================
   NAV — light-page variant
   The homepage no longer opens on a dark photo, so the nav sits
   on off-white: ink text, no background at rest, glass once
   content scrolls underneath it (which is what makes the glass
   legitimate rather than decorative).
   ============================================================ */
.nav--onlight .nav__links a { color: var(--ink); }
.nav--onlight .nav__logo { color: var(--ink); }
.nav--onlight .nav__burger span { background: var(--ink); }
.nav--onlight .btn--ink { background: var(--ink); color: var(--offwhite); }
.nav--onlight .btn--ink:hover { background: var(--ember); color: var(--ink); }
.nav--onlight.is-scrolled .btn--ink { background: var(--ink); color: var(--offwhite); }
.nav--onlight.is-scrolled .btn--ink:hover { background: var(--ember); color: var(--ink); }

/* Arrow links use the logo triangle instead of a generic chevron. */
.arrow-link .mark { transition: transform var(--dur) var(--ease); }
.arrow-link:hover .mark { transform: translateX(4px); }

/* ---- Tile specs: concrete inclusions, pulled from the live site ---- */
.tile__specs {
  list-style: none;
  /* The bottom margin is what keeps the price hairline off the last
     line of text. Without it the rule sits on the descenders. */
  margin: 1.125rem 0 1.375rem;
  padding: 0;
  display: grid;
  gap: .5rem;
}
.tile__specs li {
  display: grid;
  grid-template-columns: .875rem 1fr;
  gap: .5rem;
  align-items: start;
  font-size: .875rem;
  line-height: 1.5;
  color: rgba(20,22,28,.72);
}
.tile__specs li::before {
  content: "";
  width: .875rem; height: .875rem;
  margin-top: .17em;
  border-radius: 50%;
  background: rgba(20,22,28,.13) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314161C' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 9px no-repeat;
}
.tile--sun .tile__specs li { color: rgba(20,22,28,.82); }
.tile--sun .tile__specs li::before { background-color: rgba(20,22,28,.16); }
.tile--photo .tile__specs li { color: rgba(245,242,236,.88); }
.tile--photo .tile__specs li::before {
  background-color: rgba(245,242,236,.22);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FAF8F4' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
/* Price sits at the foot of every tile, on a hairline. */
.tile__price {
  margin-top: auto;
  padding-top: 1.125rem;
  border-top: 1px solid var(--line);
}
.tile--sun .tile__price { border-top-color: rgba(20,22,28,.18); }
.tile--photo .tile__price { border-top-color: rgba(245,242,236,.28); }
.tile--teal .tile__price, .tile--ember .tile__price { border-top-color: rgba(20,22,28,.14); }
.tile__price { font-size: 1.0625rem; }
/* On the tall photo tile the auto-margin pushed the heading up into the
   bright part of the crop. Keep the whole block down where the ink wash is. */
.tile--photo .tile__price { margin-top: 1.25rem; }

/* ============================================================
   SERVICE PAGES
   ============================================================ */

/* ---- Service hero: photo band, shorter than the home hero ---- */
.svchero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: min(66svh, 620px);
  padding-top: clamp(7rem, 12vh, 8.5rem);
  padding-bottom: clamp(3rem, 6vh, 4.5rem);
  background: var(--ink);
  overflow: hidden;
}
.svchero__media { position: absolute; inset: 0; z-index: -2; }
.svchero__media img { width: 100%; height: 100%; object-fit: cover; }
.svchero::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to bottom, rgba(20,22,28,.62) 0, rgba(20,22,28,0) 190px),
    linear-gradient(to top, rgba(20,22,28,.90) 0%, rgba(20,22,28,.84) 30%, rgba(20,22,28,.72) 60%, rgba(20,22,28,.46) 100%);
}
.svchero::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
  background: linear-gradient(90deg, var(--sunflower) 0 42%, var(--teal) 42% 68%, var(--ember) 68% 100%);
}
.svchero h1 {
  color: var(--offwhite);
  font-size: clamp(2.25rem, min(6vw, 9vh), 4.25rem);
  line-height: .98;
  max-width: 16ch;
}
.svchero__lead {
  margin-top: 1.125rem;
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  line-height: 1.55;
  color: rgba(245,242,236,.84);
  max-width: 52ch;
}
.svchero .kicker { color: rgba(245,242,236,.66); }

/* Breadcrumb */
.crumbs { font-size: .8125rem; color: rgba(245,242,236,.74); margin-bottom: 1rem; }
.crumbs a { color: rgba(245,242,236,.82); text-decoration: none; }
.crumbs a:hover { color: var(--sunflower); }
.crumbs span { opacity: .5; margin: 0 .4rem; }

/* ---- Availability note ---- */
.note {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  padding: 1rem 1.125rem;
  border-radius: var(--radius-sm);
  background: var(--sunflower-wash);
  border: 1px solid rgba(255,122,92,.4);
  font-size: .875rem;
  line-height: 1.5;
  max-width: 62ch;
}
.note__mark { flex: none; margin-top: .1rem; }

/* ---- Plan comparison table ---- */
.ptable-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ptable {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  text-align: left;
}
.ptable th, .ptable td {
  padding: .9375rem 1rem;
  vertical-align: top;
  font-size: .875rem;
}
.ptable thead th {
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  border-bottom: 2px solid var(--ink);
  vertical-align: bottom;
}
.ptable thead th:first-child {
  font-family: var(--font-body);
  font-size: var(--micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--warmgrey);
}
.ptable .prate {
  display: block;
  font-family: var(--font-head);
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-top: .25rem;
}
.ptable .pdur { display: block; font-family: var(--font-body); font-size: .75rem; font-weight: 500; color: var(--warmgrey); margin-top: .1875rem; }
.ptable tbody tr + tr { border-top: 1px solid var(--line); }
.ptable tbody th { font-weight: 500; color: var(--ink); width: 34%; }
/* Highlighted column, the plan most people take */
.ptable .is-feature { background: var(--sunflower-wash); }
.ptable thead .is-feature { border-bottom-color: var(--sunflower); }
.ptable__tag {
  display: inline-block;
  font-family: var(--font-body);
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: var(--sunflower);
  color: var(--ink);
  padding: .1875rem .375rem;
  border-radius: 3px;
  margin-bottom: .4375rem;
}
.yes, .no {
  display: inline-block;
  width: 1.125rem; height: 1.125rem;
  border-radius: 50%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 10px;
}
.yes { background-color: var(--sunflower);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314161C' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); }
.no { background-color: rgba(20,22,28,.09);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B6560' stroke-width='4' stroke-linecap='round'%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3C/svg%3E"); }
.ptable__scroll-hint { font-size: .75rem; color: var(--warmgrey); margin-top: .75rem; }
@media (min-width: 860px) { .ptable__scroll-hint { display: none; } }

/* ---- Location price cards (dedicated desk, serviced office) ---- */
.plans { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap); }
@media (max-width: 760px) { .plans { grid-template-columns: 1fr; } }
.plan {
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 2.6vw, 2rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.plan--feature { background: var(--sunflower); border-color: transparent; }
.plan__loc { display: flex; align-items: center; gap: .5rem; font-size: var(--micro); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--warmgrey); }
.plan--feature .plan__loc { color: rgba(20,22,28,.66); }
.plan__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ember); flex: none; }
.plan--feature .plan__dot { background: var(--ink); }
.plan h3 { font-size: 1.375rem; margin: .625rem 0 .25rem; }
.plan__rate {
  font-family: var(--font-head);
  font-size: clamp(1.875rem, 3.5vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-top: .875rem;
}
.plan__rate span { font-family: var(--font-body); font-size: .875rem; font-weight: 500; color: var(--warmgrey); letter-spacing: 0; }
.plan--feature .plan__rate span { color: rgba(20,22,28,.66); }
.plan__term { font-size: .8125rem; color: var(--warmgrey); margin-top: .5rem; }
.plan--feature .plan__term { color: rgba(20,22,28,.7); }
.plan .checklist { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.plan--feature .checklist { border-top-color: rgba(20,22,28,.2); }
.plan .btn { margin-top: 1.5rem; }
.plan__foot { margin-top: auto; }

/* ---- Included grid ---- */
.included { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem 3rem; }
@media (max-width: 760px) { .included { grid-template-columns: 1fr; } }

/* ---- Location availability strip ---- */
.availrow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
}
.availrow__item { padding: 1.5rem 1.5rem 1.5rem 0; border-bottom: 1px solid var(--line); }
.availrow__item + .availrow__item { border-left: 1px solid var(--line); padding-left: 1.5rem; }
.availrow__item h3 { font-size: 1.0625rem; margin-bottom: .375rem; }
.availrow__item address { font-style: normal; font-size: .8438rem; color: var(--warmgrey); line-height: 1.5; }
.availrow__flag { display: inline-block; margin-top: .75rem; font-size: .75rem; font-weight: 600; padding: .1875rem .4375rem; border-radius: 3px; }
.availrow__flag--yes { background: var(--sunflower); color: var(--ink); }
.availrow__flag--no { background: rgba(20,22,28,.08); color: var(--warmgrey); }
@media (max-width: 760px) {
  .availrow { grid-template-columns: 1fr; }
  .availrow__item + .availrow__item { border-left: 0; padding-left: 0; }
  .availrow__item { padding-right: 0; }
}

/* ---- Services hub: index rows ---- */
.svcrow {
  display: grid;
  grid-template-columns: minmax(0,15rem) minmax(0,1fr) minmax(0,11rem);
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: start;
  padding-block: clamp(1.75rem, 3vw, 2.5rem);
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
  transition: background-color var(--dur) var(--ease);
}
.svcrow:hover { background: var(--sunflower-wash); }
.svcrow h3 { font-size: clamp(1.25rem, 2vw, 1.625rem); }
.svcrow__tag { display: block; margin-top: .4375rem; font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--warmgrey); }
.svcrow p { color: var(--warmgrey); font-size: .9375rem; }
.svcrow__price { text-align: right; }
.svcrow__price b { display: block; font-family: var(--font-head); font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; }
.svcrow__price span { font-size: .75rem; color: var(--warmgrey); }
.svcrow__go { display: inline-flex; align-items: center; gap: .4rem; margin-top: .75rem; font-size: .8125rem; font-weight: 600; }
.svcrow:hover .svcrow__go .mark { transform: translateX(3px); }
.svcrow__go .mark { transition: transform var(--dur) var(--ease); }
@media (max-width: 820px) {
  .svcrow { grid-template-columns: 1fr; gap: .75rem; }
  .svcrow__price { text-align: left; }
}

/* ---- Business solutions: the real brand line icons ---- */
.bizgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
@media (max-width: 860px) { .bizgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .bizgrid { grid-template-columns: 1fr; } }
.biz {
  display: flex; gap: 1rem; align-items: flex-start;
  padding: 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.biz__icon {
  flex: none;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: var(--radius-sm);
  background: var(--sunflower-wash);
}
.biz__icon img { width: 26px; height: auto; }
.biz h3 { font-size: 1rem; margin-bottom: .1875rem; }
.biz p { font-size: .8438rem; color: var(--warmgrey); line-height: 1.45; }

/* ---- Location cards (locations hub) ---- */
.loccards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
@media (max-width: 900px) { .loccards { grid-template-columns: 1fr; } }
.loccard {
  position: relative;
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  isolation: isolate;
  background: var(--surface-sunk);
}
.loccard img { width: 100%; aspect-ratio: 4/5; object-fit: cover; transition: transform 600ms var(--ease-out); }
.loccard:hover img { transform: scale(1.04); }
.loccard::after {
  content: ""; position: absolute; inset: 40% 0 0 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(20,22,28,0), rgba(20,22,28,.5));
}
.loccard__panel {
  position: absolute; left: .875rem; right: .875rem; bottom: .875rem; z-index: 2;
  padding: 1.125rem 1.25rem; border-radius: var(--radius-sm);
  background: rgba(245,242,236,.86);
}
@supports not (backdrop-filter: blur(1px)) { .loccard__panel { background: rgba(245,242,236,.97); } }
.loccard__panel h3 { font-size: 1.1875rem; margin-bottom: .25rem; }
.loccard__panel address { font-style: normal; font-size: .8125rem; line-height: 1.45; color: rgba(20,22,28,.68); }

/* ---- Map ---- */
.map {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface-sunk);
  aspect-ratio: 16/9;
}
.map iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---- Availability pill, in the service hero ----
   This used to be a standalone callout in its own full-height band, which
   left one small box floating in a sea of whitespace. It belongs next to
   the lead, where the question actually gets asked. */
.availpill {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: 1.125rem;
  padding: .4375rem .875rem .4375rem .75rem;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(245,242,236,.34);
  background: rgba(245,242,236,.12);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-size: .8125rem;
  font-weight: 500;
  color: var(--offwhite);
}
.availpill__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--sunflower);
  flex: none;
}

/* Note callout, tightened. No icon: the yellow ground already flags it. */
.note {
  display: block;
  padding: .875rem 1.125rem;
  border-radius: var(--radius-sm);
  border: 0;
  border-left: 3px solid var(--sunflower);
  background: var(--sunflower-wash);
  font-size: .875rem;
  line-height: 1.5;
  max-width: 68ch;
}

/* ============================================================
   NAV DROPDOWNS
   Mirrors the live site's "What We Offer" and "Locations" menus.
   Desktop: hover or click to open. Mobile: the same markup becomes
   an accordion inside the drawer.
   ============================================================ */
.nav__links > li { position: relative; }

.nav__toggle {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  font-family: var(--font-body);
  font-size: .9375rem;
  font-weight: 500;
  color: var(--offwhite);
  padding-block: .375rem;
  position: relative;
  transition: color var(--dur) var(--ease);
}
.nav.is-scrolled .nav__toggle,
.nav--onlight .nav__toggle,
.nav--solid .nav__toggle { color: var(--ink); }
.nav__toggle::after {
  content: "";
  position: absolute;
  left: 0; right: 1.1rem; bottom: 0;
  height: 2px;
  background: var(--sunflower);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.nav__item.is-open > .nav__toggle::after,
.nav__toggle:hover::after { transform: scaleX(1); }
.nav__caret {
  width: 10px; height: 10px;
  flex: none;
  transition: transform var(--dur) var(--ease);
}
.nav__item.is-open .nav__caret { transform: rotate(180deg); }

/* The panel */
.nav__menu {
  position: absolute;
  top: calc(100% + .75rem);
  left: -1rem;
  z-index: 120;
  min-width: 30rem;
  padding: 1.125rem;
  border-radius: var(--radius);
  background: rgba(245,242,236,.92);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--dur) var(--ease),
              transform var(--dur) var(--ease),
              visibility var(--dur);
}
@supports not (backdrop-filter: blur(1px)) {
  .nav__menu { background: rgba(245,242,236,.99); }
}
.nav__item.is-open > .nav__menu { opacity: 1; visibility: visible; transform: none; }
.nav__menu--right { left: auto; right: -1rem; min-width: 22rem; }

.nav__menu-inner { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1.25rem; }
.nav__menu--right .nav__menu-inner { grid-template-columns: 1fr; gap: 0; }

.nav__group-title {
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--warmgrey);
  padding: 0 .625rem .5rem;
  margin: 0;
}
.nav__menu a {
  display: block;
  padding: .5625rem .625rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--ink);
  transition: background-color var(--dur) var(--ease);
}
.nav__menu a:hover { background: var(--sunflower-wash); }
.nav__menu a b { display: block; font-family: var(--font-head); font-size: .9375rem; font-weight: 600; letter-spacing: -0.01em; }
.nav__menu a span { display: block; font-size: .75rem; color: var(--warmgrey); margin-top: .0625rem; }
.nav__menu a em {
  font-style: normal;
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  margin-right: .4375rem;
  vertical-align: .05em;
}
.nav__menu__foot {
  margin-top: 1rem;
  padding-top: .875rem;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding-inline: .625rem;
}
.nav__menu__foot .arrow-link { font-size: .8125rem; }

/* ---- Drawer accordion (same markup, small screens) ---- */
.nav__drawer .nav__toggle {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
  font-family: var(--font-head);
  font-size: 1.375rem;
  font-weight: 500;
  color: var(--ink);
}
.nav__drawer .nav__toggle::after { display: none; }
.nav__drawer .nav__caret { width: 14px; height: 14px; }
.nav__drawer .nav__menu {
  position: static;
  min-width: 0;
  padding: 0 0 .75rem;
  border: 0;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
  opacity: 1;
  visibility: visible;
  transform: none;
  display: none;
}
.nav__drawer .nav__item.is-open > .nav__menu { display: block; }
.nav__drawer .nav__menu-inner { grid-template-columns: 1fr; gap: .75rem; }
.nav__drawer .nav__menu a { padding: .5rem .75rem; }
.nav__drawer .nav__menu a b { font-size: 1rem; }
.nav__drawer .nav__menu__foot { display: none; }

@media (max-width: 1120px) {
  .nav__menu { min-width: 26rem; }
}

/* ============================================================
   LOCATION PAGES
   ============================================================ */
.loccontact {
  margin-top: 1.25rem;
  padding: 1.25rem 1.375rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--sunflower);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.loccontact address { font-style: normal; font-weight: 600; font-size: .9375rem; line-height: 1.5; }
.loccontact p { font-size: .875rem; margin-top: .75rem; line-height: 1.6; }
.loccontact p.muted { font-size: .8125rem; }

/* Gallery: real per-branch photography, first frame runs wide. */
.gal {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(.75rem, 1.4vw, 1.125rem);
}
.gal__item { margin: 0; grid-column: span 2; border-radius: var(--radius); overflow: hidden; background: var(--surface-sunk); }
.gal__item--wide { grid-column: span 6; }
.gal__item img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3/2; transition: transform 700ms var(--ease-out); }
.gal__item--wide img { aspect-ratio: 21/9; }
.gal__item:hover img { transform: scale(1.03); }
/* A three-photo branch fills the second row in halves, not thirds. */
.gal:has(.gal__item:nth-child(4):last-child) .gal__item:not(.gal__item--wide) { grid-column: span 2; }
.gal:has(.gal__item:nth-child(3):last-child) .gal__item:not(.gal__item--wide) { grid-column: span 3; }
@media (max-width: 760px) {
  .gal { grid-template-columns: 1fr; }
  .gal__item, .gal__item--wide,
  .gal:has(.gal__item:nth-child(3):last-child) .gal__item:not(.gal__item--wide),
  .gal:has(.gal__item:nth-child(4):last-child) .gal__item:not(.gal__item--wide) { grid-column: span 1; }
  .gal__item img, .gal__item--wide img { aspect-ratio: 3/2; }
}

/* 20 amenities is a lot of rows, so run them in columns. */
.amenlist { grid-template-columns: repeat(4, minmax(0,1fr)); gap: .75rem 2rem; }
@media (max-width: 1000px) { .amenlist { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 720px)  { .amenlist { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 460px)  { .amenlist { grid-template-columns: 1fr; } }

/* The svcrow on location pages has no description column. */
.svcrow p:empty { display: none; }
/* .nav__menu a sets display:block and out-specifies .arrow-link, which
   pushed the triangle onto its own line. Two classes beats class+type. */
.nav__menu__foot .arrow-link {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  white-space: nowrap;
  padding: .25rem 0;
}
.nav__menu__foot .arrow-link:hover { background: none; }

/* ---- Editorial split (location pages) ----
   Dropped during the homepage redesign, but the location pages pair copy
   with a map, so it comes back scoped to that job. */
.split {
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.split__text { min-width: 0; }
.split__media { position: relative; min-width: 0; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

/* ---- Amenity grid: the real brand line-icons, one per amenity ----
   Replaces a 20-row checklist, where the same tick repeated twenty times
   carried no information. Icons are the client's own, pulled from the
   live location pages. */
.amengrid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(.5rem, 1.2vw, .875rem);
}
.amen {
  display: flex;
  align-items: center;
  gap: .875rem;
  padding: .8125rem .9375rem;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--line);
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.amen:hover { border-color: rgba(255,122,92,.55); background: var(--sunflower-wash); }
.amen__icon {
  flex: none;
  width: 42px; height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--sunflower-wash);
}
.amen__icon img { width: 26px; height: 24px; object-fit: contain; }
.amen span { font-size: .875rem; line-height: 1.35; font-weight: 500; }
@media (max-width: 1060px) { .amengrid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 760px)  { .amengrid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 440px)  { .amengrid { grid-template-columns: 1fr; } }

/* ============================================================
   ROOM CARDS (event space + meeting room)
   Rebuilt: the rate is what people scan for, so it leads at display
   size. Capacity becomes a pill instead of a box inside a box, and
   each branch is colour-coded from the logo palette.
   ============================================================ */
.rooms {
  display: grid;
  grid-template-columns: repeat(var(--room-cols, 3), minmax(0, 1fr));
  gap: var(--gap);
}
@media (max-width: 1100px) { .rooms { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 620px)  { .rooms { grid-template-columns: 1fr; } }

.room {
  --accent: var(--sunflower);
  --accent-wash: var(--sunflower-wash);
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: inherit;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.room--teal  { --accent: var(--teal);  --accent-wash: var(--teal-wash); }
.room--ember { --accent: var(--ember); --accent-wash: var(--ember-wash); }
a.room:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
/* Accent rule along the top edge, branch-coded. */
.room::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--accent);
  z-index: 2;
}

.room__media { background: var(--surface-sunk); }
.room__media img { width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block; }

.room__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: 1.0625rem clamp(1.125rem, 2vw, 1.375rem) 0;
}
.room__where {
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--warmgrey);
}
.room__cap {
  flex: none;
  display: inline-flex;
  align-items: baseline;
  gap: .25rem;
  padding: .25rem .5625rem;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--ink);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .02em;
}
.room__cap b { font-family: var(--font-head); font-size: .9375rem; font-weight: 700; letter-spacing: -0.02em; }

.room__body {
  padding: .5rem clamp(1.125rem, 2vw, 1.375rem) clamp(1.125rem, 2vw, 1.375rem);
  display: flex;
  flex-direction: column;
  flex: 1;
}
.room h3 { font-size: 1.25rem; letter-spacing: -0.022em; }

/* The number people actually came for */
.room__price { margin-top: 1rem; }
.room__amt {
  display: block;
  font-family: var(--font-head);
  font-size: clamp(1.875rem, 3vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1;
}
.room__per { display: block; font-size: .8125rem; color: var(--warmgrey); margin-top: .375rem; }
.room__alt {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem;
  margin-top: .875rem;
  padding-top: .75rem;
  border-top: 1px solid var(--line);
  font-size: .8125rem;
  color: var(--warmgrey);
}
.room__alt b { font-family: var(--font-head); font-size: 1rem; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }
.room__when {
  display: inline-block;
  margin-top: .625rem;
  padding: .1875rem .4375rem;
  border-radius: 4px;
  background: var(--accent-wash);
  font-size: .6875rem;
  font-weight: 500;
}
.room__foot {
  margin-top: auto;
  padding-top: 1.125rem;
  display: flex;
  align-items: center;
  gap: .4375rem;
  font-size: .875rem;
  font-weight: 600;
}
.room__foot .mark { transition: transform var(--dur) var(--ease); }
a.room:hover .room__foot .mark { transform: translateX(4px); }

/* Block plans (event space only) */
/* Grid, not flex-wrap: at four columns the three chips were breaking to
   2 + 1, which read as a layout accident. */
.plans-inline {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .3125rem;
  margin-top: .875rem;
}
.plans-inline div {
  min-width: 0;
  padding: .5rem .25rem .5625rem;
  border-radius: var(--radius-sm);
  background: var(--accent-wash);
  text-align: center;
}
.plans-inline b { display: block; font-family: var(--font-head); font-size: .8125rem; font-weight: 700; letter-spacing: -0.03em; }
.plans-inline span { display: block; font-size: .5625rem; text-transform: uppercase; letter-spacing: .05em; color: var(--warmgrey); margin-top: .125rem; }

/* Setup options */
.setups { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(.625rem, 1.2vw, 1rem); }
@media (max-width: 900px) { .setups { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .setups { grid-template-columns: 1fr; } }
.setup {
  padding: 1.125rem 1.125rem 1.25rem;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
}
.setup h3 { font-size: 1rem; margin-bottom: .3125rem; }
.setup p { font-size: .8125rem; color: var(--warmgrey); line-height: 1.45; }
/* Ember as TEXT on a light surface is 2.94:1. Accents are fills only, so
   the ordinal runs in warmgrey and the colour lives in the tile hover. */
.setup__n { display: block; font-family: var(--font-head); font-size: .75rem; font-weight: 700; letter-spacing: .06em; color: var(--warmgrey); margin-bottom: .625rem; }
.setup { transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease); }
.setup:hover { border-color: rgba(247,158,75,.5); background: var(--ember-wash); }

/* ---- Wide room cards ----
   Four columns crammed a photo, a price, an availability chip, three plan
   blocks and a link into ~250px. Two columns with the photo alongside gives
   the same content room to breathe. */
.rooms--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rooms--wide .room {
  display: grid;
  grid-template-columns: 40% 1fr;
  grid-template-rows: auto 1fr;
}
.rooms--wide .room__media {
  grid-column: 1;
  grid-row: 1 / -1;
  height: 100%;
}
.rooms--wide .room__media img {
  height: 100%;
  min-height: 15rem;
  aspect-ratio: auto;
}
.rooms--wide .room__top  { grid-column: 2; grid-row: 1; }
.rooms--wide .room__body { grid-column: 2; grid-row: 2; }
.rooms--wide .room__amt { font-size: clamp(2rem, 2.8vw, 2.5rem); }
.rooms--wide .plans-inline b { font-size: .875rem; letter-spacing: -0.02em; }
.rooms--wide .plans-inline div { padding: .5625rem .375rem .625rem; }
.rooms--wide .plans-inline span { font-size: .625rem; }

@media (max-width: 1100px) { .rooms--wide { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 860px) {
  .rooms--wide { grid-template-columns: 1fr; }
  .rooms--wide .room { grid-template-columns: 38% 1fr; }
}
@media (max-width: 560px) {
  .rooms--wide .room { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr; }
  .rooms--wide .room__media { grid-column: 1; grid-row: 1; }
  .rooms--wide .room__media img { min-height: 0; aspect-ratio: 16/10; }
  .rooms--wide .room__top  { grid-column: 1; grid-row: 2; }
  .rooms--wide .room__body { grid-column: 1; grid-row: 3; }
}

/* ============================================================
   NEWS ARCHIVE
   ============================================================ */
.postgrid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(1.25rem, 2.5vw, 2rem); }
@media (max-width: 980px) { .postgrid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 620px) { .postgrid { grid-template-columns: 1fr; } }

.post {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}
.post__media {
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface-sunk);
  margin-bottom: 1rem;
}
.post__media img {
  width: 100%;
  aspect-ratio: 3/2;
  object-fit: cover;
  display: block;
  transition: transform 600ms var(--ease-out);
}
.post:hover .post__media img { transform: scale(1.04); }
.post__meta {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: var(--micro);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--warmgrey);
  margin-bottom: .5rem;
}
.post__cat { color: var(--ink); background: var(--sunflower); padding: .1875rem .4375rem; border-radius: 4px; }
.post h3 {
  font-size: 1.25rem;
  line-height: 1.22;
  letter-spacing: -0.022em;
  transition: color var(--dur) var(--ease);
}
.post:hover h3 { color: var(--ember); }
.post p { font-size: .9375rem; color: var(--warmgrey); margin-top: .5rem; }
.post__go {
  display: inline-flex; align-items: center; gap: .4375rem;
  margin-top: .875rem; font-size: .8125rem; font-weight: 600;
}
.post:hover .post__go .mark { transform: translateX(4px); }
.post__go .mark { transition: transform var(--dur) var(--ease); }

/* Lead story runs full width above the grid */
.post--lead {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  padding-bottom: clamp(2rem, 4vw, 3rem);
  margin-bottom: clamp(2rem, 4vw, 3rem);
  border-bottom: 1px solid var(--line);
}
.post--lead .post__media { margin-bottom: 0; }
.post--lead .post__media img { aspect-ratio: 16/10; }
.post--lead h3 { font-size: clamp(1.5rem, 3vw, 2.25rem); line-height: 1.1; }
.post--lead p { font-size: 1rem; }
@media (max-width: 860px) { .post--lead { grid-template-columns: 1fr; } }

/* Category filter row */
.filters { display: flex; flex-wrap: wrap; gap: .5rem; }
.filters a {
  font-size: .8125rem;
  font-weight: 500;
  padding: .4375rem .875rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line-strong);
  text-decoration: none;
  color: var(--ink);
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.filters a:hover { background: var(--sunflower-wash); border-color: rgba(255,122,92,.55); }
.filters a[aria-current="true"] { background: var(--ink); color: var(--offwhite); border-color: var(--ink); }

/* ============================================================
   ARTICLE (single post)
   ============================================================ */
.article { max-width: 44rem; margin-inline: auto; }
.article__head { text-align: center; margin-bottom: clamp(2rem, 4vw, 3rem); }
.article__head h1 { font-size: clamp(2rem, 4.5vw, 3.25rem); line-height: 1.05; margin-top: 1rem; }
.article__byline {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: .5rem .875rem;
  margin-top: 1.5rem;
  font-size: .875rem;
  color: var(--warmgrey);
}
.article__byline b { color: var(--ink); font-weight: 600; }
.article__hero {
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: clamp(2rem, 4vw, 3rem);
  background: var(--surface-sunk);
}
.article__hero img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }

/* Prose */
.prose { font-size: 1.0625rem; line-height: 1.7; }
.prose > * + * { margin-top: 1.25rem; }
.prose h2 { font-size: clamp(1.375rem, 2.4vw, 1.75rem); margin-top: 2.5rem; }
.prose h3 { font-size: 1.1875rem; margin-top: 2rem; }
.prose ul, .prose ol { padding-left: 1.25rem; }
.prose li + li { margin-top: .4375rem; }
.prose img { border-radius: var(--radius); margin-block: 2rem; }
.prose figure { margin: 2rem 0; }
.prose figcaption { font-size: .8125rem; color: var(--warmgrey); margin-top: .625rem; text-align: center; }
.prose blockquote {
  margin: 2rem 0;
  padding: .25rem 0 .25rem 1.5rem;
  border-left: 3px solid var(--sunflower);
  font-family: var(--font-head);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.015em;
}
.prose a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--teal); text-underline-offset: 3px; text-decoration-thickness: 2px; }
.prose a:hover { background: var(--teal-wash); }
.prose hr { border: 0; height: 1px; background: var(--line); margin-block: 2.5rem; }

.article__foot {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.share { display: flex; align-items: center; gap: .5rem; }
.share span { font-size: .8125rem; color: var(--warmgrey); }
.share a {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--ink);
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.share a:hover { background: var(--sunflower); border-color: var(--sunflower); }
.share svg { width: 15px; height: 15px; }

/* ============================================================
   CONTACT
   ============================================================ */
.contactgrid {
  display: grid;
  grid-template-columns: 1fr minmax(0, 27rem);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
@media (max-width: 900px) { .contactgrid { grid-template-columns: 1fr; } }

.cmethods { display: grid; gap: .75rem; margin-top: 1.75rem; }
.cmethod {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.125rem 1.25rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent, var(--sunflower));
  border-radius: var(--radius-sm);
  background: var(--surface);
  text-decoration: none;
  color: inherit;
  transition: background-color var(--dur) var(--ease);
}
a.cmethod:hover { background: var(--sunflower-wash); }
.cmethod--teal  { --accent: var(--teal); }
.cmethod--ember { --accent: var(--ember); }
.cmethod__k { font-size: var(--micro); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--warmgrey); display: block; }
.cmethod__v { font-family: var(--font-head); font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; display: block; margin-top: .1875rem; }
.cmethod__n { font-size: .8125rem; color: var(--warmgrey); display: block; margin-top: .25rem; }

/* Light form, for the contact page (the booking form is the dark one) */
.formcard {
  padding: clamp(1.5rem, 3vw, 2rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.formcard h2 { font-size: 1.375rem; }
.formcard > p { font-size: .875rem; color: var(--warmgrey); margin-top: .375rem; }
.frow { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem; }
@media (max-width: 520px) { .frow { grid-template-columns: 1fr; } }
.field-l { margin-top: 1rem; }
.field-l label {
  display: block;
  font-size: var(--micro);
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--warmgrey);
  margin-bottom: .375rem;
}
.field-l input, .field-l select, .field-l textarea {
  width: 100%;
  padding: .8125rem 1rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
  background: var(--offwhite);
  color: var(--ink);
  font-size: .9375rem;
}
.field-l textarea { min-height: 8rem; resize: vertical; }
.field-l input::placeholder, .field-l textarea::placeholder { color: rgba(20,22,28,.45); }
.field-l select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314161C' stroke-width='2' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .875rem center;
  background-size: 16px;
  padding-right: 2.5rem;
}
.formcard .btn { margin-top: 1.5rem; }
.formnote { font-size: var(--micro); color: var(--warmgrey); margin-top: .75rem; text-align: center; }

/* Branch contact strip with maps */
.branchmaps { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--gap); }
@media (max-width: 900px) { .branchmaps { grid-template-columns: 1fr; } }
.branchmap { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.branchmap .map { border: 0; border-radius: 0; aspect-ratio: 4/3; }
.branchmap__body { padding: 1.125rem 1.25rem 1.375rem; }
.branchmap__body h3 { font-size: 1.0625rem; margin-bottom: .3125rem; }
.branchmap__body address { font-style: normal; font-size: .8438rem; line-height: 1.5; color: var(--warmgrey); }

/* ---- Tittle swap: the logo triangle replaces the dot on lowercase i ----
   The dot is masked off the glyph (measured cut at .30em from the top of
   the 1em inline box, verified against Hanken Grotesk 700), then the
   triangle is drawn in the gap it leaves. Masking rather than covering
   means nothing shows through when the heading sits on a photograph.
   The triangle is a sibling of the masked glyph, not a pseudo-element on
   it, because a mask applies to an element's whole subtree. */
.tittle { position: relative; display: inline-block; line-height: 1; }
.tittle__g {
  display: inline-block;
  line-height: 1;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0 .30em, #000 .30em);
          mask-image: linear-gradient(to bottom, transparent 0 .30em, #000 .30em);
}
.tittle__t {
  position: absolute;
  left: 50%;
  top: .16em;
  width: .175em;
  height: .155em;
  transform: translateX(-50%);
  background: var(--sunflower);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  pointer-events: none;
}
/* No mask support: leave the dot alone and drop the triangle rather than
   shipping a doubled mark. */
@supports not ((-webkit-mask-image: linear-gradient(#000,#000)) or (mask-image: linear-gradient(#000,#000))) {
  .tittle__t { display: none; }
}
@media (prefers-contrast: more) { .tittle__t { display: none; } }

/* ---- Filters and byline sitting inside a photo hero ---- */
.svchero .filters { margin-top: 1.5rem; }
.svchero .filters a {
  color: var(--offwhite);
  border-color: rgba(245,242,236,.38);
  background: rgba(245,242,236,.10);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.svchero .filters a:hover { background: rgba(245,242,236,.22); border-color: var(--offwhite); }
.svchero .filters a[aria-current="true"] { background: var(--sunflower); color: var(--ink); border-color: var(--sunflower); }

.svchero .article__byline { justify-content: flex-start; margin-top: 1.25rem; color: rgba(245,242,236,.78); }
.svchero .article__byline b { color: var(--offwhite); }
.svchero .post__meta { margin-bottom: 1rem; }
/* Article titles run longer than a service name, so they get more measure. */
.svchero h1.is-long { max-width: 22ch; font-size: clamp(2rem, min(4.6vw, 7.5vh), 3.5rem); }

/* ============================================================
   BRAND LOCKUP
   The wordmark is live HTML text beside an inline SVG mark, not a
   bitmap. It inherits the nav's colour, so the light/dark logo
   swap that the old PNG pair needed is gone: one lockup, two
   contexts, no bitmap.
   ============================================================ */
.nav__logo {
  display: flex;
  flex: none;
  align-items: center;
  gap: .5rem;
  color: var(--offwhite);
  text-decoration: none;
}
.brandmark { flex: none; display: block; }
.brandmark__ring { stroke: currentColor; }
.brandmark__fill { fill: var(--coral); }
.brandword {
  font-family: var(--font-head);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
}
.nav__logo .brandmark { width: 26px; height: 26px; }
.nav__logo .brandword { font-size: 1.3125rem; }
.nav.is-scrolled .nav__logo,
.nav--solid .nav__logo { color: var(--ink); }

.footer__logo {
  display: flex;
  align-items: center;
  gap: .5625rem;
  margin-bottom: 1.25rem;
  color: var(--offwhite);
}
.footer__logo .brandmark { width: 30px; height: 30px; }
.footer__logo .brandword { font-size: 1.5rem; }

/* ============================================================
   7b. TESTIMONIAL ROW
   Three supporting voices under the pull quote. Hairline columns,
   not cards: the bento above already owns the card family, and a
   second grid of boxes would flatten the page.
   ============================================================ */
.quoterow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3.5vw, 3rem);
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--line);
}
.quoterow__item { display: flex; flex-direction: column; }
.quoterow__item blockquote { margin: 0; }
.quoterow__mark {
  width: 22px; height: 22px;
  margin-bottom: 1rem;
  color: var(--ink);
}
.quoterow p {
  font-size: 1.0625rem;
  line-height: 1.5;
  letter-spacing: -0.005em;
  color: var(--ink);
  text-wrap: pretty;
}
.quoterow__by {
  display: block;
  margin-top: 1.125rem;
  font-family: var(--font-body);
  font-size: .875rem;
  color: var(--warmgrey);
}
.quoterow__by strong { display: block; color: var(--ink); font-weight: 600; }
@media (max-width: 860px) {
  .quoterow { grid-template-columns: 1fr; gap: 2rem; }
  .quoterow__item + .quoterow__item { padding-top: 2rem; border-top: 1px solid var(--line); }
}

/* The Gallery tile is a third of the width of the Open Studio tile, so
   the same wash leaves its type sitting on the busiest part of the crop.
   Short photo tiles get a heavier scrim; the photo still reads as one. */
.tile--f.tile--photo::after {
  background: linear-gradient(to top, rgba(20,22,28,.95) 0%, rgba(20,22,28,.82) 52%, rgba(20,22,28,.62) 100%);
}
/* The price qualifier is --warmgrey by default, which goes muddy on coral. */
.tile--sun .tile__price span { color: rgba(20,22,28,.68); }

/* Designer credit, sitting quietly at the end of the footer row. */
.footer__credit { margin-left: auto; }
.footer__credit a {
  color: rgba(245,242,236,.72);
  text-decoration: underline;
  text-decoration-color: rgba(255,122,92,.6);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.footer__credit a:hover { color: var(--coral); text-decoration-color: var(--coral); }