/* ============================================================
   HARRIS HQ
   Palette and typography taken from the printed Harris HQ
   document and the Level 5 plan: bone, espresso, oat, clay,
   sage — EB Garamond for words, Hanken Grotesk for labels.
   ============================================================ */

:root {
  /* brand — sampled from the printed document */
  --bone:       #ECE3DE;
  --paper:      #F4EFEB;
  --espresso:   #1B1515;
  --ink:        #241D1B;
  --ink-soft:   #6E605A;
  --oat:        #DED8CA;
  --clay:       #B0705C;   /* accent, deepened from the plan's booth fill */
  --clay-soft:  #DAB0A5;   /* the plan's booth fill */
  --pink:       #E499A8;   /* Harris pink — read from the supplied swatch;
                              replace with the exact brand hex if you have it */
  --mint:       #63C9A3;   /* the green from the desk-drop welcome card */
  --sage:       #56754E;   /* the plan's storage / planting fill */
  --sky:        #BFDDE1;   /* the plan's assigned-hot-desk fill */

  /* semantic tokens — components only ever reference these */
  --ground:     var(--bone);
  --ground-alt: var(--paper);
  --ground-inv: var(--espresso);
  --text:       var(--ink);
  --text-soft:  var(--ink-soft);
  --text-inv:   #EFE7E2;
  --text-inv-soft: #A2938D;
  --rule:       rgba(36, 29, 27, 0.14);
  --rule-inv:   rgba(239, 231, 226, 0.16);
  --accent:     var(--clay);

  --serif: 'EB Garamond', Georgia, 'Times New Roman', serif;
  --sans:  'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --ease:  cubic-bezier(0.22, 1, 0.36, 1);
  --measure: 62ch;

  color-scheme: light;
}

/* The page is a reproduction of printed cream-and-espresso collateral, so it
   commits to one look. There is deliberately no dark-mode inversion: flipping
   the bone and paper grounds to near-black loses the light/dark section rhythm
   that carries the whole design, and leaves the clay labels stranded on a
   ground they were never drawn against. `color-scheme: light` keeps the form
   controls and scrollbars light to match, on a viewer whose system is dark. */

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ground); }
body {
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.55;
  background: var(--ground);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
::selection { background: var(--clay-soft); color: var(--espresso); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.site-hidden { visibility: hidden; }

.skip {
  position: fixed; top: 10px; left: 10px; z-index: 1200;
  transform: translateY(-160%);
  font-family: var(--sans); font-size: 0.72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.12em;
  padding: 12px 18px; border-radius: 2px;
  background: var(--espresso); color: var(--bone); text-decoration: none;
  transition: transform 0.25s var(--ease);
}
/* :focus, not :focus-visible — a skip link is only ever reached by
   keyboard and must show the moment it takes focus */
.skip:focus { transform: none; }

/* ---------- layout primitives ---------- */
.wrap { width: min(1180px, 100% - 48px); margin-inline: auto; }
.wrap-narrow { width: min(760px, 100% - 48px); margin-inline: auto; }
.wrap-wide { width: min(1440px, 100% - 48px); margin-inline: auto; }

.section { padding-block: clamp(72px, 9vw, 132px); }

/* A second subject inside one section — our neighbours after the amenities.
   Spaced as though a section boundary sat between them, so it reads as a
   fresh start rather than a continuation of the list above. Twice the section
   padding, because a real boundary is one section's bottom plus the next
   one's top. */
.section-break { margin-top: clamp(144px, 18vw, 264px); }

.section--alt { background: var(--ground-alt); }
.section--inv {
  background: var(--ground-inv);
  color: var(--text-inv);
  --text: var(--text-inv);
  --text-soft: var(--text-inv-soft);
  --rule: var(--rule-inv);
  /* the welcome card carries no coloured emphasis — italics alone do the
     work, in the same ink as the roman text. On a dark ground the clay
     accent reads brassy, so emphasis goes to bone and labels to muted. */
  --accent: var(--text-inv);
}
.section--inv .label--accent { color: var(--text-inv-soft); }

/* a fine grain over the dark grounds, so espresso reads like printed
   stock rather than a flat fill. Children are lifted above it. */
.section--inv { position: relative; isolation: isolate; }
.section--inv::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  opacity: 0.5; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");
}
.section--inv > * { position: relative; z-index: 1; }
/* Harris pink — holds its own colours in both themes, so it reads as a
   deliberate pop rather than a section that happens to be light */
.section--pink {
  background: var(--pink);
  --text: #2A1519;
  --text-soft: #6B3F47;
  --accent: #2A1519;
  --rule: rgba(42, 21, 25, 0.22);
  color: var(--text);
}

/* editorial split: heading left, content right */
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 72px); }
.split > * { min-width: 0; }
@media (max-width: 820px) { .split { grid-template-columns: 1fr; } }

/* ---------- type ---------- */
.label {
  font-family: var(--sans);
  font-size: 0.66rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-soft);
}
.label--accent { color: var(--accent); }

h1, h2, h3 { font-weight: 400; letter-spacing: -0.005em; text-wrap: balance; }
.display {
  font-size: clamp(2.6rem, 7vw, 5.4rem);
  line-height: 0.98;
}
.h2 {
  font-size: clamp(1.9rem, 4vw, 3.1rem);
  line-height: 1.06;
}
.h3 { font-size: 1.32rem; line-height: 1.25; }
.lede { font-size: clamp(1.05rem, 1.6vw, 1.28rem); color: var(--text-soft); max-width: var(--measure); }
.body { max-width: var(--measure); }
em { font-style: italic; }
.rule { height: 1px; background: var(--rule); border: 0; }

/* ============================================================
   MOTION
   Three primitives, used everywhere:
     .reveal      — a soft rise, staggered by --i within a group
     .ln / .ln-i  — a line that lifts out from behind its own edge
     .draw        — a rule that draws itself across
   Everything collapses to a plain static page under reduced motion.
   ============================================================ */
:root { --step: 70ms; --rise: 1.05s; }

.reveal {
  opacity: 0; transform: translateY(16px);
  transition: opacity var(--rise) var(--ease), transform var(--rise) var(--ease);
  transition-delay: calc(var(--i, 0) * var(--step));
}
.reveal.in { opacity: 1; transform: none; }

/* a masked line — the inner span starts below the mask and rises into it.
   The padding/negative-margin pair gives descenders room so they are not
   clipped mid-flight. */
.ln { display: block; overflow: hidden; padding-bottom: 0.18em; margin-bottom: -0.18em; }
.ln-i {
  display: block; transform: translateY(108%);
  transition: transform 1.15s var(--ease);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.in .ln-i, .ln.in .ln-i { transform: none; }

/* a rule that draws from its leading edge */
.draw { transform: scaleX(0); transform-origin: left; transition: transform 1.2s var(--ease); }
.draw.in { transform: scaleX(1); }
.draw-c { transform-origin: center; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .ln-i, .draw, .hero-title .ch { opacity: 1; transform: none; transition: none; }
  #seatSvg .desk, #seatSvg .rm-group,
  #seatSvg .team-label, #seatSvg .zone-label { opacity: 1; animation: none; }
  .band img { transform: none !important; }
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ============================================================
   GATE
   ============================================================ */
.gate[hidden] { display: none; }
.gate {
  position: fixed; inset: 0; z-index: 1000;
  background: var(--ground);
  display: grid; place-items: center; padding: 24px;
}
.gate-card { width: min(430px, 100%); text-align: center; }
/* the wordmark sits at the foot behind a rule, as it does on the card cover */
.gate-rule { height: 1px; border: 0; background: var(--rule); margin: 44px 0 22px; }
.gate-mark { display: flex; justify-content: center; }
.gate-mark .wm { height: 13px; }
.gate-mark .wm svg { height: 13px; }
.gate-title { font-size: 2.4rem; margin-bottom: 10px; line-height: 1.05; }
.gate-sub { color: var(--text-soft); margin-bottom: 30px; }
.gate form { display: flex; gap: 10px; }
.gate input {
  flex: 1; padding: 13px 16px; border: 1px solid var(--rule); border-radius: 2px;
  background: transparent; color: var(--text); font-family: var(--serif); font-size: 1rem;
  outline: none; transition: border-color 0.2s;
}
.gate input:focus { border-color: var(--accent); }
.btn {
  font-family: var(--sans); font-weight: 600; font-size: 0.78rem;
  text-transform: uppercase; letter-spacing: 0.14em;
  padding: 14px 22px; border: 1px solid var(--espresso); border-radius: 2px;
  background: var(--espresso); color: var(--bone);
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.btn { position: relative; isolation: isolate; overflow: hidden; }
.btn::after {
  content: ''; position: absolute; inset: 0; z-index: -1; background: var(--clay);
  transform: scaleX(0); transform-origin: left; transition: transform 0.5s var(--ease);
}
.btn:hover { border-color: var(--clay); color: #fff; }
.btn:hover::after { transform: scaleX(1); }
.section--inv .btn { background: var(--bone); border-color: var(--bone); color: var(--espresso); }
.section--inv .btn { position: relative; isolation: isolate; overflow: hidden; }
.btn::after {
  content: ''; position: absolute; inset: 0; z-index: -1; background: var(--clay);
  transform: scaleX(0); transform-origin: left; transition: transform 0.5s var(--ease);
}
.btn:hover { border-color: var(--clay); color: #fff; }
.btn:hover::after { transform: scaleX(1); }
.gate-hint { color: var(--text-soft); font-size: 0.88rem; margin-top: 20px; font-style: italic; }
.gate-error { color: var(--clay); font-family: var(--sans); font-size: 0.82rem; margin-top: 12px; }
.gate-card.shake { animation: shake 0.4s; }
@keyframes shake { 25% { transform: translateX(-7px); } 75% { transform: translateX(7px); } }

/* ---------- section rail ----------
   A quiet position indicator on a very long page. Each tick is a
   section; the current one extends and names itself. */
.rail {
  position: fixed; right: 22px; top: 50%; transform: translateY(-50%);
  z-index: 190; display: grid; gap: 14px; justify-items: end;
}
.rail-item {
  position: relative; display: flex; align-items: center;
  background: none; border: 0; padding: 4px 0; cursor: pointer;
  color: var(--text-soft);
}
.rail-tick {
  display: block; width: 16px; height: 1px; background: currentColor;
  opacity: 0.45; transition: width 0.4s var(--ease), opacity 0.3s, background 0.3s;
}
/* At rest the rail is ticks only — the extended accent tick already says
   where you are, and a permanent label would reach into the content
   column at narrower widths. The name appears on hover, on a chip so it
   stays readable over whatever it crosses. */
.rail-name {
  font-family: var(--sans); font-size: 0.6rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.14em;
  /* absolute, so a hidden label contributes no width and the rail's
     footprint at rest is the ticks alone */
  position: absolute; right: calc(100% + 10px); top: 50%;
  opacity: 0; transform: translateY(-50%) translateX(6px); pointer-events: none;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
  white-space: nowrap;
  padding: 4px 9px; border-radius: 2px;
  background: rgba(236, 227, 222, 0.94);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.rail[data-on="dark"] .rail-name { background: rgba(27, 21, 21, 0.9); }
.rail[data-on="pink"] .rail-name { background: rgba(228, 153, 168, 0.94); }
.rail-item:hover .rail-name,
.rail-item:focus-visible .rail-name { opacity: 1; transform: translateY(-50%); }
.rail-item:hover .rail-tick { opacity: 1; width: 26px; }
.rail-item[aria-current="true"] .rail-tick { width: 30px; opacity: 1; background: var(--accent); }
/* the rail sits over whatever section is behind it, so it reads its colour
   from the one it is currently marking */
.rail[data-on="dark"] .rail-item { color: #EFE7E2; }
.rail[data-on="dark"] .rail-item[aria-current="true"] .rail-tick { background: #EFE7E2; }
.rail[data-on="pink"] .rail-item { color: #2A1519; }
.rail[data-on="pink"] .rail-item[aria-current="true"] .rail-tick { background: #2A1519; }
/* only shown where there is real margin beside the content column */
@media (max-width: 1400px) { .rail { display: none; } }

/* ============================================================
   NAV
   ============================================================ */
.progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 0;
  background: var(--clay); z-index: 300; transition: width 0.12s linear;
}
.nav {
  position: fixed; inset: 0 0 auto; z-index: 200;
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px clamp(24px, 4vw, 48px);
  transition: background 0.35s, padding 0.35s, box-shadow 0.35s;
}
/* until the page scrolls, the nav sits on the dark hero and needs to be
   light; the open mobile menu keeps the page ground, so it is excluded */
.nav:not(.scrolled) .nav-mark { color: #EFE7E2; }
.nav:not(.scrolled) .nav-links:not(.open) a { color: #A2938D; }
.nav:not(.scrolled) .nav-links:not(.open) a:hover,
.nav:not(.scrolled) .nav-links:not(.open) .nav-cta { color: #EFE7E2; }
.nav:not(.scrolled) .nav-links:not(.open) .nav-cta { border-bottom-color: rgba(239, 231, 226, 0.55); }
/* once the menu is open it covers the hero with the page ground, so the
   burger has to go back to dark or the close control disappears */
.nav:not(.scrolled) .burger:not(.open) span { background: #EFE7E2; }

.nav.scrolled {
  background: color-mix(in srgb, var(--ground) 90%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 var(--rule);
  padding-block: 13px;
}
.nav-mark {
  display: inline-flex; align-items: baseline; gap: 0.42em;
  font-family: var(--sans); font-weight: 700; font-size: 0.8rem;
  letter-spacing: 0.26em; text-decoration: none;
}
.nav-links { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 34px); }
.nav-links a {
  font-family: var(--sans); font-size: 0.74rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.13em;
  text-decoration: none; color: var(--text-soft); transition: color 0.2s;
}
.nav-links a:hover { color: var(--text); }
.nav-links .nav-cta { color: var(--text); border-bottom: 1px solid var(--accent); padding-bottom: 3px; }
.burger { display: none; background: none; border: 0; cursor: pointer; padding: 8px; position: relative; z-index: 210; }
.burger span { display: block; width: 22px; height: 1px; background: var(--text); margin: 6px 0; transition: 0.3s; }

@media (max-width: 860px) {
  .burger { display: block; }
  .nav-links {
    position: fixed; inset: 0; background: var(--ground);
    flex-direction: column; justify-content: center; gap: 30px;
    opacity: 0; pointer-events: none; transition: opacity 0.3s;
  }
  .nav-links.open { opacity: 1; pointer-events: auto; }
  .nav-links a { font-size: 0.95rem; }
  .burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .burger.open span:nth-child(2) { opacity: 0; }
  .burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* ============================================================
   HERO
   ============================================================ */
/* laid out like the welcome card left on each desk: dark ground, centred
   column, letterspaced label, serif statement, then the address block */
.hero {
  min-height: 100svh;
  display: grid; grid-template-rows: 1fr auto;
  padding: 128px 0 40px;
  position: relative; overflow: hidden;
}
.hero-inner {
  align-self: center; text-align: center;
  width: min(720px, 100% - 48px); margin-inline: auto;
  position: relative; z-index: 2;
}
.hero-kicker { margin-bottom: 26px; }
.hero-title { font-size: clamp(3.1rem, 10vw, 7.4rem); line-height: 0.92; letter-spacing: -0.02em; }
.hero-line {
  font-size: clamp(1.12rem, 1.9vw, 1.5rem); line-height: 1.34;
  margin: clamp(26px, 3.4vw, 40px) auto 0; max-width: 30ch; text-wrap: balance;
}
.hero-line em { font-style: italic; color: var(--accent); }
/* sits alone under the rule now — the rule's own bottom margin sets the gap */
.hero-address { color: var(--text-soft); font-size: 1rem; }

.hero-rule {
  height: 1px; border: 0; background: var(--rule);
  margin: clamp(34px, 4.5vw, 52px) auto clamp(26px, 3vw, 34px);
  width: min(320px, 70%);
}
.hero-foot { display: grid; justify-items: center; }
/* the mark in the nav and footer sits at the cap height of the label
   beside it, so HARRIS and HQ read as one lockup */
.nav-mark .wm, .footer-mark .wm { height: 0.84em; }
.nav-mark .wm svg, .footer-mark .wm svg { height: 0.84em; }
.wm-after { letter-spacing: 0.16em; }

/* ---------- the wordmark ----------
   The SVG's box is the wordmark's cap box, so setting a height in `em`
   and letting inline-block sit its bottom edge on the baseline lines the
   logo up with the type beside it without any nudging. */
.wm { display: inline-block; }
.wm svg { display: block; height: 100%; width: auto; }

.hero-title .ln { padding-bottom: 0.22em; margin-bottom: -0.22em; }
.hero-title .wm { height: 0.7em; margin-right: 0.14em; }
.hero-title .wm svg { height: 0.7em; }
.hero-title .ch {
  display: inline-block; transform: translateY(112%);
  transition: transform 1.25s var(--ease);
  transition-delay: calc(var(--i, 0) * 48ms);
}
.hero-title.in .ch { transform: none; }
.hero-title em { font-style: italic; color: var(--accent); }
.hero-meta {
  margin-top: clamp(30px, 5vw, 52px);
  display: flex; flex-wrap: wrap; gap: 14px 40px; align-items: baseline;
  border-top: 1px solid var(--rule); padding-top: 22px;
}
.hero-meta dt { font-family: var(--sans); font-size: 0.64rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em; color: var(--text-soft); }
.hero-meta dd { font-size: 1.05rem; margin-top: 4px; }
.hero-meta .day { color: var(--accent); }

/* ---------- full-bleed render bands ---------- */
.band {
  position: relative; overflow: hidden;
  height: min(66svh, 620px);
  background: var(--ground-alt);
}
.band img {
  width: 100%; height: 118%; object-fit: cover;
  position: absolute; inset: 0; will-change: transform;
}
.band figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 56px clamp(24px, 4vw, 48px) 22px;
  font-family: var(--sans); font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.06em; color: #fff;
  background: linear-gradient(transparent, rgba(20, 14, 13, 0.62));
}
@media (max-width: 700px) { .band { height: 52svh; } }



.scroll-cue {
  justify-self: start; display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--sans); font-size: 0.64rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.18em; color: var(--text-soft);
  text-decoration: none;
}
.scroll-cue i { display: block; width: 42px; height: 1px; background: currentColor; transform-origin: left; animation: cue 2.4s var(--ease) infinite; }
@keyframes cue { 0%, 100% { transform: scaleX(0.35); opacity: 0.5; } 50% { transform: scaleX(1); opacity: 1; } }

/* ============================================================
   PULL QUOTE / MESSAGE
   ============================================================ */
.quote { font-size: clamp(1.5rem, 3.1vw, 2.5rem); line-height: 1.2; font-style: italic; text-wrap: balance; }
.sig { margin-top: 34px; }
/* the sign-off — the same italic serif as the rest of the message, set at the
   size of the paragraph above it so it reads as initials rather than a
   heading */
.sig-name {
  font-family: var(--serif);
  font-style: italic;
  font-size: inherit;   /* the body's 18px, not the root's 16 */
  line-height: 1.5;
  color: var(--text);
}
.sig-role { margin-top: 8px; }

/* ============================================================
   SEATING CHART
   ============================================================ */
.seat-head { display: flex; flex-wrap: wrap; gap: 20px 32px; align-items: flex-end; justify-content: space-between; margin-bottom: 26px; }

.seat-search { position: relative; width: min(340px, 100%); }
.seat-search input {
  width: 100%; padding: 13px 40px 13px 16px;
  border: 1px solid var(--rule); border-radius: 2px; background: transparent;
  font-family: var(--serif); font-size: 1rem; color: var(--text); outline: none;
  transition: border-color 0.2s;
}
.seat-search input:focus { border-color: var(--accent); }
.seat-search input::placeholder { color: var(--text-soft); }
.seat-clear {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  background: none; border: 0; cursor: pointer; color: var(--text-soft);
  font-size: 1.2rem; line-height: 1; padding: 6px 10px;
}
.seat-suggest {
  position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; right: 0;
  background: var(--ground-alt); border: 1px solid var(--rule);
  max-height: 260px; overflow-y: auto; list-style: none;
}
.seat-suggest:empty { display: none; }
.seat-suggest li { padding: 10px 16px; cursor: pointer; font-size: 0.95rem; display: flex; justify-content: space-between; gap: 12px; }
.seat-suggest li:hover, .seat-suggest li[aria-selected="true"] { background: var(--clay-soft); color: var(--espresso); }
.seat-suggest .st { font-family: var(--sans); font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.12em; opacity: 0.75; align-self: center; }

.seat-legend { display: flex; flex-wrap: wrap; gap: 8px; }
.seat-chip {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--sans); font-size: 0.63rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.11em;
  padding: 7px 13px; border: 1px solid var(--rule); border-radius: 2px;
  background: transparent; color: var(--text-soft); cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}
.seat-chip i { width: 11px; height: 11px; background: var(--swatch); border: 1px solid var(--rule); display: block; }
.seat-chip:hover { color: var(--text); }
.seat-chip.on { color: var(--text); border-color: var(--accent); }

.seat-stage {
  border: 1px solid var(--rule); background: var(--ground-alt);
  padding: clamp(10px, 2vw, 20px); overflow: hidden; position: relative;
}
/* desk names grow as the camera moves in, so keep the drawing steady */
#seatSvg { transition: none; }
.seat-scroll { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
#seatSvg { display: block; width: 100%; height: auto; min-width: 880px; }
/* keep desk names legible on a phone — the plan scrolls sideways instead of shrinking */
@media (max-width: 900px) { #seatSvg { min-width: 1080px; } }

.seat-hint {
  display: none;
  font-family: var(--sans); font-size: 0.62rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.13em; color: var(--text-soft);
  margin-top: 12px;
}
@media (max-width: 900px) { .seat-hint { display: block; } }

.rm { fill: none; stroke: var(--rule); stroke-width: 1.2; }
.rm-fill { fill: var(--oat); opacity: 0.5; }
.rm-label { font-family: var(--sans); font-size: 9px; font-weight: 600; letter-spacing: 0.1em; fill: var(--text-soft); }
.zone-label { font-family: var(--sans); font-size: 10px; font-weight: 600; letter-spacing: 0.14em; fill: var(--text-soft); }
.team-label { font-family: var(--sans); font-size: 9.5px; font-weight: 700; letter-spacing: 0.12em; fill: var(--text-soft); }
.fill-booth { fill: var(--clay-soft); }
.fill-green { fill: var(--sage); }
.plate { fill: var(--oat); opacity: 0.28; }

/* Furniture — tables, chairs, joinery, soft seating. The plan works in two
   tones and so does this: tables and chairs sit near-white like a hot desk,
   while joinery, benches and the breakout floor take the darker oat. The line
   is finer than a desk's, so a desk still reads as the thing you can tap. */
.furn { pointer-events: none; }
.furn > * { stroke: var(--rule); stroke-width: 0.7; }
.furn-l { fill: var(--paper); }
.furn-d { fill: var(--oat); opacity: 0.8; }
.furn-arc { fill: none; stroke: var(--rule); stroke-width: 1.1; }

/* the plan assembles itself when it first scrolls into view — desks
   arrive as a wave, each delayed by where it sits on the floor */
#seatSvg:not(.drawn) .desk { opacity: 0; }
#seatSvg:not(.drawn) .rm-group,
#seatSvg:not(.drawn) .team-label,
#seatSvg:not(.drawn) .zone-label { opacity: 0; }
#seatSvg.drawn .rm-group,
#seatSvg.drawn .team-label,
#seatSvg.drawn .zone-label { animation: fadeIn 0.7s var(--ease) backwards; }
#seatSvg.drawn .desk {
  transform-box: fill-box; transform-origin: center;
  animation: deskIn 0.5s var(--ease) backwards;
  animation-delay: var(--d, 0ms);
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes deskIn {
  from { opacity: 0; transform: scale(0.7); }
  to   { opacity: 1; transform: none; }
}

.desk { cursor: pointer; }
.desk rect { stroke: var(--rule); stroke-width: 0.8; transition: fill 0.3s, stroke 0.3s; }
.desk-set rect { fill: var(--oat); }
.desk-hot rect { fill: var(--paper); }
.desk-assigned rect { fill: var(--sky); }
.desk text { font-family: var(--sans); font-size: 6.4px; font-weight: 600; fill: var(--ink); pointer-events: none; }
.desk-hot text { fill: var(--ink-soft); }
.desk:hover rect { fill: var(--clay-soft); stroke: var(--clay); }
.desk.sel rect { fill: var(--clay); stroke: var(--clay); }
.desk.sel text { fill: #fff; }
.desk.dim { opacity: 0.22; }
.desk, .rm-group { transition: opacity 0.35s; }

/* everything else steps back while a desk is found */
#seatSvg.zoomed .desk:not(.sel) { opacity: 0.55; }
#seatSvg.zoomed .rm-group, #seatSvg.zoomed .team-label,
#seatSvg.zoomed .zone-label { opacity: 0.5; }

/* the ring left sitting on the found desk */
.marker {
  fill: none; stroke: var(--clay); stroke-width: 1.4;
  animation: markerIn 0.5s var(--ease) both;
}
@keyframes markerIn {
  from { transform: scale(2.4); opacity: 0; }
  to   { transform: scale(1.55); opacity: 1; }
}

/* the ping itself — three rings expanding out of the desk */
.ping {
  fill: none; stroke: var(--clay); stroke-width: 1.6;
  animation: ping 1.9s var(--ease) forwards;
}
@keyframes ping {
  from { transform: scale(0.9); opacity: 0.85; }
  to   { transform: scale(7); opacity: 0; }
}

/* styled in full rather than borrowing .mini, which is defined later in
   this file and would otherwise win the background back */
.seat-reset {
  position: absolute; z-index: 5; top: 14px; right: 14px;
  font-family: var(--sans); font-size: 0.62rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.13em;
  padding: 9px 14px; border: 1px solid var(--accent); border-radius: 2px;
  background: var(--ground); color: var(--accent);
  cursor: pointer; box-shadow: 0 2px 10px rgba(27, 21, 21, 0.09);
  transition: background 0.2s, color 0.2s;
}
.seat-reset:hover { background: var(--accent); color: var(--ground); }
.seat-reset[hidden] { display: none; }

.seat-readout {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 20px;
  border-top: 1px solid var(--rule); margin-top: 18px; padding-top: 16px;
}
/* nothing selected, nothing reserved — no empty rule under the plan */
.seat-readout:empty { display: none; }
.seat-readout .who { font-size: 1.35rem; }
.seat-readout .meta { color: var(--text-soft); font-size: 0.95rem; }
.seat-readout .empty { color: var(--text-soft); font-style: italic; }

/* ============================================================
   CARDS (amenities / tenants)
   ============================================================ */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(238px, 1fr)); gap: clamp(20px, 3vw, 34px); }
.card { display: flex; flex-direction: column; }
/* portrait crop — the supplied photos are near-square, so this keeps
   almost all of each frame while giving the cards presence in a row */
.card-media {
  aspect-ratio: 4 / 5; background: var(--ground-alt);
  border: 1px solid var(--rule); display: grid; overflow: hidden; margin-bottom: 16px;
}
.section--inv .card-media { background: rgba(255, 255, 255, 0.04); }

/* tenant logos sit on an espresso tile, as the printed spread sets them */
.card-logo {
  aspect-ratio: 16 / 10; margin-bottom: 16px;
  background: var(--espresso); color: var(--bone);
  display: grid; place-items: center; padding: 0 16%;
  transition: background 0.4s var(--ease), color 0.4s var(--ease);
}
.card-logo svg { width: 100%; height: auto; display: block; }
.card:hover .card-logo { background: var(--clay); color: #fff; }

/* amenity cards lead with a drawing rather than a photo */
.card-icon {
  aspect-ratio: 3 / 2; margin-bottom: 16px;
  border: 1px solid var(--rule); background: var(--ground-alt);
  display: grid; place-items: center; color: var(--accent);
  transition: background 0.35s var(--ease), color 0.35s var(--ease);
}
.card-icon svg { width: 34%; height: auto; }
.card:hover .card-icon { background: var(--clay-soft); color: var(--espresso); }
.section--inv .card-icon { background: rgba(255, 255, 255, 0.04); }
/* photo and placeholder share one grid cell, so the photo simply covers it */
.card-media > * { grid-area: 1 / 1; }
.card-media img { width: 100%; height: 100%; object-fit: cover; }
.card-media .ph {
  align-self: center; justify-self: center; text-align: center; padding: 0 16px;
  font-family: var(--sans); font-size: 0.66rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-soft);
}
/* reserve two lines so a wrapping level/tag pair doesn't push its heading
   out of line with the cards either side of it */
.card-level {
  margin-bottom: 8px; display: flex; gap: 0 10px; flex-wrap: wrap;
  min-height: 2.35rem; align-content: flex-start;
}
.card p + p { margin-top: 0.7em; }

/* ---------- amenity rows ----------
   icon, then the name, then the copy — so each entry can carry a proper
   paragraph or two without squeezing its neighbours */
.rows { display: block; }
.arow {
  display: grid;
  grid-template-columns: 64px minmax(160px, 1fr) minmax(0, 2.15fr);
  gap: clamp(18px, 3vw, 44px);
  padding-block: clamp(26px, 3vw, 36px);
  border-top: 1px solid var(--rule);
  align-items: start;
}
.arow:last-child { border-bottom: 1px solid var(--rule); }
.arow { transition: border-color 0.35s; }
.arow-icon { color: var(--accent); transition: transform 0.5s var(--ease), color 0.35s; }
.arow:hover .arow-icon { transform: translateX(4px); }
.arow-icon svg { width: 100%; height: auto; display: block; }
.arow-level { display: flex; flex-wrap: wrap; gap: 2px 10px; margin-bottom: 7px; }
.arow-head h3 { font-size: 1.32rem; line-height: 1.2; }
.arow-body p { color: var(--text-soft); max-width: var(--measure); }
.arow-body p + p { margin-top: 0.75em; }
.arow-body .card-link { margin-top: 16px; display: inline-block; }

@media (max-width: 780px) {
  .arow { grid-template-columns: 44px 1fr; gap: 16px 20px; }
  .arow-body { grid-column: 1 / -1; }
}
.card-tag { color: var(--accent); }
.card h3 { font-size: 1.3rem; margin-bottom: 8px; }
.card p { color: var(--text-soft); font-size: 0.98rem; flex: 1; }
.card-link {
  margin-top: 14px; align-self: flex-start;
  font-family: var(--sans); font-size: 0.66rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.14em;
  text-decoration: none; border-bottom: 1px solid var(--accent); padding-bottom: 3px;
}
.card-link { position: relative; }
.card-link::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform 0.45s var(--ease);
}
.card-link:hover::after, .card-link:focus-visible::after { transform: scaleX(1); }

/* a status pill — mint, the one place the welcome card's green appears
   outside success messages */
.badge {
  display: inline-block; margin-top: 16px;
  font-family: var(--sans); font-size: 0.62rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.16em;
  padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--mint); color: var(--mint);
}
.badge[hidden] { display: none; }

/* two dark sections in a row need a seam, or the boundary vanishes */
.section--inv + .section--inv { border-top: 1px solid var(--rule-inv); }

/* ---------- cottage list ---------- */
.cottage-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 30px; margin-top: 42px; }
.cottage-item { border-top: 1px solid var(--rule); padding-top: 18px; }
.cottage-item h3 { font-size: 1.18rem; margin-bottom: 7px; }
.cottage-item p { color: var(--text-soft); font-size: 0.96rem; }

/* ---------- day in the life ---------- */
.day-list { display: grid; gap: 0; margin-top: 10px; }
.day-row { display: grid; grid-template-columns: 5.5rem 1fr; gap: 24px; padding-block: 22px; border-top: 1px solid var(--rule); align-items: baseline; }
.day-row:last-child { border-bottom: 1px solid var(--rule); }
.day-time { font-family: var(--sans); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; color: var(--accent); font-variant-numeric: tabular-nums; }
.day-row p { color: var(--text-soft); max-width: var(--measure); }
@media (max-width: 560px) { .day-row { grid-template-columns: 1fr; gap: 6px; } }

/* ============================================================
   THINGS TO KNOW
   ============================================================ */
.know { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); margin-top: 42px; }
.know-cell { background: var(--ground); padding: 26px; display: flex; flex-direction: column; gap: 10px; }

/* on pink the cells lose their fill entirely and sit straight on the
   colour, separated by the same hairline rules the rest of the page uses */
.section--pink .know {
  gap: 4px clamp(28px, 4vw, 56px);
  background: transparent; border: 0;
}
.section--pink .know-cell {
  background: transparent;
  border-top: 1px solid var(--rule);
  padding: 22px 0 30px;
}
.section--pink .mini { border-color: rgba(42, 21, 25, 0.3); }
.section--pink .mini:hover { border-color: var(--text); color: var(--text); background: rgba(255, 255, 255, 0.28); }
.know-cell .label { margin-bottom: 2px; }
/* a small aside above a value — "stays the same" and the like. Set in italic
   rather than a second run of small caps, which would fight the label. */
.know-note { font-size: 0.92rem; font-style: italic; color: var(--text-soft); margin-bottom: 1px; }
.know-val { font-size: 1.08rem; line-height: 1.35; word-break: break-word; }
.know-val p + p { margin-top: 11px; }
.know-val.small { font-size: 0.97rem; color: var(--text-soft); }
/* a labelled line inside a cell, for the network/password pair */
.pair { display: block; }
.pair + .pair { margin-top: 6px; }
.pair-k {
  display: inline-block; min-width: 7.4em; padding-right: 0.7em;
  font-family: var(--sans); font-size: 0.6rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.13em;
  color: var(--text-soft);
}
.know-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; padding-top: 12px; }
.mini {
  font-family: var(--sans); font-size: 0.62rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.13em;
  padding: 8px 13px; border: 1px solid var(--rule); border-radius: 2px;
  background: transparent; color: var(--text); cursor: pointer; text-decoration: none;
  transition: border-color 0.2s, color 0.2s;
}
.mini:hover { border-color: var(--accent); color: var(--accent); }
.mini.done { border-color: var(--mint); color: #2E7A5C; }
.masked { filter: blur(6px); user-select: none; transition: filter 0.3s; }
.masked.shown { filter: none; user-select: text; }

/* ============================================================
   FAQ
   ============================================================ */
.faq { margin-top: 10px; }
.faq-item { border-top: 1px solid var(--rule); }
.faq-item:last-child { border-bottom: 1px solid var(--rule); }
.faq-q {
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  font-family: var(--serif); font-size: 1.22rem; color: var(--text);
  padding: 24px 46px 24px 0; position: relative; line-height: 1.3;
}
.faq-q::after {
  content: ''; position: absolute; right: 6px; top: 50%; width: 13px; height: 1px;
  background: var(--accent); transition: transform 0.35s var(--ease);
}
.faq-q::before {
  content: ''; position: absolute; right: 12px; top: 50%; width: 1px; height: 13px;
  background: var(--accent); margin-top: -6px; transition: transform 0.35s var(--ease), opacity 0.35s;
}
.faq-item.open .faq-q::before { transform: rotate(90deg); opacity: 0; }
/* a question linked to from elsewhere scrolls to itself, so it needs to clear
   the fixed nav rather than sliding underneath it */
.faq-item { scroll-margin-top: 104px; }

.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.5s var(--ease); }
.faq-item.open .faq-a { grid-template-rows: 1fr; }
.faq-a > div { overflow: hidden; }
/* The last block in an answer carries the padding, so a multi-block answer
   spaces itself without a trailing gap. */
.faq-a p, .faq-a ul { color: var(--text-soft); max-width: var(--measure); }
.faq-a > div > :last-child { padding-bottom: 24px; }
.faq-a > div > * + * { margin-top: 14px; }

.faq-a ul { list-style: none; }
.faq-a li { position: relative; padding-left: 18px; }
.faq-a li + li { margin-top: 7px; }
.faq-a li::before {
  content: ''; position: absolute; left: 2px; top: 0.62em;
  width: 5px; height: 1px; background: currentColor; opacity: 0.5;
}

/* the pill sets its own height, so the paragraph should not add leading */
.faq-link { line-height: 1; }

/* the line that matters most in an answer — set in the body colour rather
   than the accent, since dark grounds carry no coloured emphasis */
.faq-note {
  color: var(--text);
  font-style: italic;
  padding-left: 15px;
  border-left: 1px solid var(--rule);
}
.faq-q { transition: color 0.25s; }
.faq-q:hover { color: var(--accent); }

/* ============================================================
   DEFECT FORM
   ============================================================ */
.form { display: grid; gap: 22px; margin-top: 38px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.field { display: grid; gap: 9px; }
.field > span { font-family: var(--sans); font-size: 0.64rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.15em; color: var(--text-soft); }
.field input, .field select, .field textarea {
  width: 100%; padding: 13px 15px; border: 1px solid var(--rule); border-radius: 2px;
  background: transparent; color: var(--text); font-family: var(--serif); font-size: 1rem;
  outline: none; transition: border-color 0.2s;
}
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: right 18px center, right 13px center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.section--inv .field select option { background: var(--espresso); color: var(--text-inv); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); }
.field textarea { resize: vertical; line-height: 1.5; }
.sev { border: 0; display: flex; flex-wrap: wrap; gap: 9px; }
.sev legend { font-family: var(--sans); font-size: 0.64rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.15em; color: var(--text-soft); margin-bottom: 11px; }
.sev label {
  cursor: pointer; padding: 10px 16px; border: 1px solid var(--rule); border-radius: 2px;
  font-size: 0.92rem; transition: border-color 0.2s, background 0.2s;
}
.sev label:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--clay) 16%, transparent); }
.sev input { position: absolute; opacity: 0; width: 0; }
.sev label:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.form-status { font-family: var(--sans); font-size: 0.85rem; min-height: 1.5em; }
.form-status.ok { color: #2E7A5C; }
.section--inv .form-status.ok { color: var(--mint); }
.form-status.err { color: var(--clay); }
@media (max-width: 620px) { .form-row { grid-template-columns: 1fr; } }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { padding-block: 64px; }
.footer-inner { display: flex; flex-wrap: wrap; gap: 20px 40px; align-items: baseline; justify-content: space-between; }
.footer-mark {
  display: inline-flex; align-items: baseline; gap: 0.42em;
  font-family: var(--sans); font-weight: 700; letter-spacing: 0.26em; font-size: 0.8rem;
}
.footer-line { color: var(--text-soft); font-style: italic; }
.footer a { font-family: var(--sans); font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; text-decoration: none; border-bottom: 1px solid var(--accent); padding-bottom: 3px; }