/* ==========================================================================
   NEXT LEVEL HOSPITALITY — SITE STYLESHEET
   --------------------------------------------------------------------------
   One stylesheet for all three pages. It reads every colour, space, shadow,
   radius, duration and type size from assets/css/tokens.css and defines none
   of its own. If you need a value that is not a token, add the token — do not
   type a literal here.

   Order:
     1. Reset and base
     2. Layout primitives
     3. Header, nav, hamburger, theme toggle
     4. Hero
     5. Sections, prose, cards, buttons
     6. The pre-rendered US map
     7. Contact page
     8. Footer
   ========================================================================== */

/* ==========================================================================
   1. RESET AND BASE
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-body);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  -webkit-font-smoothing: antialiased;
  transition: background-color var(--duration-slow) var(--ease-smooth),
              color var(--duration-slow) var(--ease-smooth);
}

h1, h2, h3, h4 {
  color: var(--color-heading);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 1rem;
}

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

a {
  color: var(--color-link);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color var(--duration-fast) var(--ease-smooth);
}

a:hover { color: var(--color-link-hover); }

img, svg { max-width: 100%; }

/* Sections are scroll targets; keep the fixed header from covering them. */
[id] { scroll-margin-top: calc(var(--header-height) + 1rem); }

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

/* Skip link — the first tab stop on every page. Visible the moment it has
   focus, which is the only time it is any use. */
.skip-link {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -150%);
  z-index: calc(var(--header-z) + 1);
  background: var(--color-surface-raised);
  color: var(--color-link);
  padding: 0.75rem 1.25rem;
  border: var(--card-border);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  transition: transform var(--duration-fast) var(--ease-out);
}

.skip-link:focus {
  transform: translate(-50%, 0);
}

/* ==========================================================================
   2. LAYOUT PRIMITIVES
   ========================================================================== */

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--section-padding-y);
  background: var(--color-bg);
  transition: background-color var(--duration-slow) var(--ease-smooth);
}

.section--surface {
  background: var(--color-surface);
  border-block: var(--card-border-width) solid var(--color-border);
}

/* Two sections always stack their padding, but a marked boundary — a surface
   change and a rule — divides that space into one --section-padding-y either
   side of the line, which is the rhythm the eye reads everywhere on the site.
   Where two sections share a background there is no line to divide it, so the
   same stacking reads as a single undivided gap of twice the measure. Fold
   that pair back onto one --section-padding-y, contributed by the section
   above. Home only today: the opening statement and the cards below it, which
   became adjacent when the "What we do" section between them was deleted. */
.section:not(.section--surface) + .section:not(.section--surface) {
  padding-block-start: 0;
}

/* Wider than --measure so section headings sit on one line at desktop; the
   lede inside falls back to the reading measure. */
.section__head {
  max-width: 52rem;
  margin-bottom: 3rem;
}

.section__eyebrow {
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 0.75rem;
}

.section__title {
  font-size: var(--text-section);
}

.section__lede {
  max-width: var(--measure);
  font-size: var(--text-lg);
  color: var(--color-body);
  margin-bottom: 0;
}

/* The homepage opening statement — the page's <h1>, which used to sit on the
   hero photograph. It carries the display size the hero title had, and the
   section holds nothing else, so its head needs no trailing space. */
.section__title--lead { font-size: var(--text-hero); }

.section--opening .section__head { margin-bottom: 0; }

.prose {
  max-width: var(--measure);
  font-size: var(--text-lg);
}

.prose > * + * { margin-top: 1.25rem; }

.prose h3 {
  font-size: var(--text-xl);
  margin: 2.5rem 0 0;
}

.rule {
  width: 3rem;
  height: 2px;
  border: 0;
  margin: 0 0 1.5rem;
  background: var(--color-gold);
}

/* ==========================================================================
   3. HEADER
   Dark and translucent in BOTH themes: it sits over the hero photograph and
   must never take the page background.
   ========================================================================== */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--header-height);
  background: var(--header-bg);
  backdrop-filter: blur(var(--header-blur));
  -webkit-backdrop-filter: blur(var(--header-blur));
  z-index: var(--header-z);
  transition: background-color var(--duration-slow) var(--ease-smooth);
}

.site-header__inner {
  max-width: var(--container-max);
  height: 100%;
  margin: 0 auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Equal side boxes so the wordmark lands centred between them at mobile
   widths, where the hamburger is on the left and the toggle on the right. */
.site-header__left,
.site-header__right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 0 0 auto;
  min-width: 2.5rem;
}

.site-header__right { justify-content: flex-end; }

/* ---- The gold diamond mark and the wordmark ---- */

.wordmark {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex: 1 1 auto;
  min-width: 0;
  color: var(--color-gold);
  text-decoration: none;
  transition: opacity var(--duration-fast) var(--ease-smooth);
}

.wordmark:hover { color: var(--color-gold); opacity: 0.85; }

.wordmark__mark {
  width: var(--wordmark-mark);
  height: var(--wordmark-mark);
  flex: 0 0 auto;
}

.wordmark__text {
  font-family: var(--font-wordmark);
  font-size: var(--wordmark-size);
  font-weight: var(--wordmark-weight);
  letter-spacing: var(--wordmark-tracking);
  text-transform: uppercase;
  color: var(--header-fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- Inline nav (>= 768px) ---- */

.site-nav { display: none; }

.site-nav__list {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav__link {
  position: relative;
  display: block;
  padding: 0.5rem 0;
  color: var(--header-fg-muted);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-smooth);
}

.site-nav__link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--color-gold);
  transform: scaleX(0);
  transition: transform var(--duration-fast) var(--ease-out);
}

.site-nav__link:hover { color: var(--header-fg); }
.site-nav__link:hover::after { transform: scaleX(0.5); }

/* Current page. Set from the data-page attribute on <html>, so the header
   markup itself stays byte-identical across all three files. */
html[data-page='home']    .site-nav__link[href='/'],
html[data-page='about']   .site-nav__link[href='/about'],
html[data-page='contact'] .site-nav__link[href='/contact'] {
  color: var(--header-fg);
}

html[data-page='home']    .site-nav__link[href='/']::after,
html[data-page='about']   .site-nav__link[href='/about']::after,
html[data-page='contact'] .site-nav__link[href='/contact']::after {
  transform: scaleX(1);
}

/* ---- Hamburger (< 768px) ---- */

.hamburger { position: relative; }

.hamburger__button {
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-smooth);
}

.hamburger__button:hover { background: var(--header-control-hover-bg); }

.hamburger__line {
  width: 20px;
  height: 2px;
  border-radius: 1px;
  background: var(--header-fg);
  transition: transform var(--duration-fast) var(--ease-smooth),
              opacity var(--duration-fast) var(--ease-smooth);
}

.hamburger__button[aria-expanded='true'] .hamburger__line:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.hamburger__button[aria-expanded='true'] .hamburger__line:nth-child(2) {
  opacity: 0;
}
.hamburger__button[aria-expanded='true'] .hamburger__line:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

.hamburger__menu {
  position: absolute;
  top: calc(var(--header-height) - 0.75rem);
  left: 0;
  min-width: 12rem;
  background: var(--color-surface-raised);
  border: var(--card-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-menu);
  overflow: hidden;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}

.hamburger__menu.is-open {
  opacity: 1;
  transform: translateY(0);
}

.hamburger__menu[hidden] { display: none; }

.hamburger__item {
  display: block;
  padding: 0.875rem 1.25rem;
  color: var(--color-heading);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color var(--duration-fast) var(--ease-smooth),
              color var(--duration-fast) var(--ease-smooth);
}

.hamburger__item + .hamburger__item {
  border-top: var(--card-border-width) solid var(--color-border);
}

.hamburger__item:hover {
  background: var(--color-gold-subtle);
  color: var(--color-link);
}

html[data-page='home']    .hamburger__item[href='/'],
html[data-page='about']   .hamburger__item[href='/about'],
html[data-page='contact'] .hamburger__item[href='/contact'] {
  box-shadow: inset 3px 0 0 var(--color-gold);
}

/* The menu lives inside .site-header, whose focus rule forces the gold ring.
   Menu items sit on a light surface, where the deep gold reads better. */
.site-header .hamburger__menu :focus-visible {
  outline-color: var(--focus-ring-color);
}

/* ---- Theme toggle ---- */

.theme-toggle {
  width: 32px;
  height: 32px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--header-control-border);
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--header-fg);
  cursor: pointer;
  transition: transform var(--duration-slow) var(--ease-smooth),
              background-color var(--duration-slow) var(--ease-smooth);
}

.theme-toggle:hover {
  background: var(--header-control-hover-bg);
  transform: scale(1.1);
}

.theme-toggle__icon {
  width: 16px;
  height: 16px;
  display: block;
}

.theme-toggle__icon--moon { display: none; }
[data-theme='dark'] .theme-toggle__icon--sun  { display: none; }
[data-theme='dark'] .theme-toggle__icon--moon { display: block; }

@media (min-width: 768px) {
  .hamburger { display: none; }
  .site-nav { display: block; margin-left: auto; }
  .wordmark { flex: 0 0 auto; justify-content: flex-start; gap: 0.75rem; }
  .site-header__left { display: none; }
  .site-header__right { min-width: 0; margin-left: 1.75rem; }
}

/* ==========================================================================
   4. HERO — the signature feature
   --------------------------------------------------------------------------
   A daytime and a nighttime photograph of the same office, stacked, with the
   theme deciding which one is opaque. The swap is done entirely in CSS off
   [data-theme] on <html>; no JavaScript chooses an image.

   Two stacked layers rather than one element whose background-image changes:
     - both photographs are already decoded when the toggle is pressed, so the
       swap is instant and can be cross-faded instead of cutting
     - the wrong image can never appear, because the theme is written to
       <html> by the inline boot script before the stylesheet is even parsed
   ========================================================================== */

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--color-hero-backdrop);
  overflow: hidden;
  transition: background-color var(--duration-slow) var(--ease-smooth);
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__layer {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  transition: opacity var(--duration-slow) var(--ease-smooth);
}

.hero__layer--day {
  background-image: image-set(
    url('../img/hero-day-1920.webp') type('image/webp'),
    url('../img/hero-day-1920.jpg')  type('image/jpeg')
  );
}

.hero__layer--night {
  opacity: 0;
  background-image: image-set(
    url('../img/hero-night-1920.webp') type('image/webp'),
    url('../img/hero-night-1920.jpg')  type('image/jpeg')
  );
}

[data-theme='dark'] .hero__layer--day   { opacity: 0; }
[data-theme='dark'] .hero__layer--night { opacity: 1; }

/* The smaller pair for small viewports. */
@media (max-width: 800px) {
  .hero__layer--day {
    background-image: image-set(
      url('../img/hero-day-1280.webp') type('image/webp'),
      url('../img/hero-day-1280.jpg')  type('image/jpeg')
    );
  }
  .hero__layer--night {
    background-image: image-set(
      url('../img/hero-night-1280.webp') type('image/webp'),
      url('../img/hero-night-1280.jpg')  type('image/jpeg')
    );
  }
}

/* No scrim, gradient or overlay: nothing sits on the photograph any more, so
   it renders clean and undimmed in both themes. The only element on the hero
   is the chevron below, which carries its own disc. */

/* ---- The circular scroll chevron ---- */

.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 2.5rem;
  z-index: 1;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--hero-control-bg);
  backdrop-filter: blur(var(--header-blur));
  -webkit-backdrop-filter: blur(var(--header-blur));
  border: 2px solid var(--hero-control-border);
  border-radius: var(--radius-full);
  color: var(--hero-fg);
  cursor: pointer;
  transform: translate(-50%, 0);
  animation: hero-bounce 2s infinite;
  transition: background-color var(--duration-slow) var(--ease-smooth),
              border-color var(--duration-slow) var(--ease-smooth),
              color var(--duration-slow) var(--ease-smooth);
}

.hero__scroll:hover,
.hero__scroll:focus-visible {
  animation: none;
  transform: translate(-50%, -4px);
  color: var(--color-gold);
  border-color: var(--color-gold);
}

@keyframes hero-bounce {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, -10px); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__scroll { animation: none; }
}

/* Short viewports: the chevron sits closer to the bottom edge. It is never
   hidden — it is the only element on the hero and the only way down from it
   for a keyboard. */
@media (max-height: 560px) {
  .hero__scroll { bottom: 1.25rem; }
}

/* ==========================================================================
   5. PAGE HEADER (About / Contact — no hero photograph)
   ========================================================================== */

.page-head {
  padding-block: calc(var(--header-height) + 4rem) 3.5rem;
  background: var(--color-surface);
  border-bottom: var(--card-border-width) solid var(--color-border);
  transition: background-color var(--duration-slow) var(--ease-smooth);
}

.page-head__eyebrow {
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 0.75rem;
}

.page-head__title {
  font-size: var(--text-hero);
  margin-bottom: 1rem;
}

.page-head__lede {
  max-width: var(--measure);
  font-size: var(--text-lg);
  margin: 0;
}

/* ==========================================================================
   6. CARDS AND BUTTONS
   ========================================================================== */

.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--grid-gap);
}

@media (min-width: 768px) {
  .card-grid { grid-template-columns: repeat(3, 1fr); }
}

.card {
  background: var(--color-surface-raised);
  padding: var(--card-padding);
  border: var(--card-border);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  transition: var(--card-transition);
}

.card:hover { box-shadow: var(--card-shadow-hover); }

.card__icon {
  width: 4rem;
  height: 4rem;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-gold-subtle);
  border-radius: var(--radius-lg);
  color: var(--color-link);
}

.card__icon svg { width: 2rem; height: 2rem; }

.card__title {
  font-size: var(--text-xl);
  margin-bottom: 0.75rem;
}

.card__body { margin: 0; }

/* ---- Values list on the About page ---- */

.value-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .value-list { grid-template-columns: repeat(2, 1fr); }
}

.value-list__item {
  padding-top: 1.5rem;
  border-top: 2px solid var(--color-gold);
}

.value-list__term {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-heading);
  margin-bottom: 0.5rem;
}

.value-list__desc { margin: 0; }

/* ---- Buttons ---- */

.button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 1.75rem;
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: var(--text-base);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-smooth),
              border-color var(--duration-fast) var(--ease-smooth),
              color var(--duration-fast) var(--ease-smooth);
}

.button--primary {
  background: var(--color-gold-deep);
  border-color: var(--color-gold-deep);
  color: #ffffff;
}

.button--primary:hover {
  background: var(--color-link-hover);
  border-color: var(--color-link-hover);
  color: #ffffff;
}

[data-theme='dark'] .button--primary {
  background: var(--color-gold);
  border-color: var(--color-gold);
  color: #1a1204;
}

[data-theme='dark'] .button--primary:hover {
  background: var(--color-gold-hover);
  border-color: var(--color-gold-hover);
}

/* Only the contact form's Send button is ever disabled, while the request is
   in flight. It keeps its colour and simply dims, and the hover rules are
   turned off so it does not react to the cursor. The focus ring is untouched:
   nothing here suppresses an outline. */
.button:disabled {
  opacity: var(--disabled-opacity);
  cursor: default;
}

.button--primary:disabled:hover {
  background: var(--color-gold-deep);
  border-color: var(--color-gold-deep);
}

[data-theme='dark'] .button--primary:disabled:hover {
  background: var(--color-gold);
  border-color: var(--color-gold);
}

.button__arrow { width: 1rem; height: 1rem; flex: 0 0 auto; }

/* ---- Closing call to action ---- */

.cta {
  padding-block: var(--section-padding-y);
  background: var(--color-surface);
  border-top: var(--card-border-width) solid var(--color-border);
  transition: background-color var(--duration-slow) var(--ease-smooth);
}

.cta__inner {
  max-width: var(--measure);
}

.cta__title {
  font-size: var(--text-section);
}

.cta__body {
  font-size: var(--text-lg);
  margin-bottom: 2rem;
}

/* ==========================================================================
   7. THE PRE-RENDERED US MAP
   --------------------------------------------------------------------------
   Static inline SVG. It was projected once at authoring time with an Albers
   USA projection; the browser downloads no GeoJSON and runs no projection
   code. Nothing in the SVG carries a fill or stroke attribute, so everything
   below re-themes with the rest of the site.
   ========================================================================== */

/* The map is wider than a phone. It scrolls inside its own box, which is not
   self-evident, so say so — but only where it applies. */
.map-scroll-hint {
  display: none;
  margin: 2rem 0 0;
  font-size: var(--text-sm);
  color: var(--color-muted);
}

@media (max-width: 639px) {
  .map-scroll-hint { display: block; }
}

.map-frame {
  margin-top: 3rem;
  /* Below about 640px the map is narrower than its own detail, so it scrolls
     inside its own box rather than shrinking into illegibility. The page
     body never scrolls horizontally. */
  overflow-x: auto;
  overflow-y: visible;
  padding-bottom: 0.5rem;
}

.us-map {
  display: block;
  width: 100%;
  min-width: 40rem;
  height: auto;
  margin: 0 auto;
  max-width: 60rem;
}

.us-map__state {
  fill: var(--map-state-fill);
  stroke: var(--map-state-stroke);
  stroke-width: 0.6;
  stroke-linejoin: round;
  transition: fill var(--duration-slow) var(--ease-smooth),
              stroke var(--duration-slow) var(--ease-smooth);
}

.us-map__state--market {
  fill: var(--map-market-fill);
  stroke: var(--map-market-stroke);
  stroke-width: 0.8;
}

.us-map__dc-context {
  fill: var(--map-state-fill);
  stroke: var(--map-state-stroke);
  stroke-width: 0.6;
  transition: fill var(--duration-slow) var(--ease-smooth),
              stroke var(--duration-slow) var(--ease-smooth);
}

.us-map__dc-frame {
  fill: var(--map-inset-fill);
  stroke: var(--map-state-stroke);
  stroke-width: 1;
  transition: fill var(--duration-slow) var(--ease-smooth);
}

.us-map__dc-ring {
  fill: none;
  stroke: var(--map-state-stroke);
  stroke-width: 1.25;
}

.us-map__dc-leader {
  stroke: var(--map-state-stroke);
  stroke-width: 1.25;
  stroke-dasharray: 3 3;
}

/* ---- Markers ---- */

.us-map__marker {
  cursor: default;
  /* The dot is the hit target. The halo is decoration and must not steal
     pointer events, or Post Falls and Spokane — 6.9 units apart — would be
     impossible to tell apart with a mouse. */
  pointer-events: none;
}

.us-map__marker-dot {
  pointer-events: auto;
  fill: var(--map-marker-fill);
  stroke: var(--map-marker-ring);
  stroke-width: 1.25;
  transition: fill var(--duration-fast) var(--ease-smooth),
              r var(--duration-fast) var(--ease-smooth);
}

.us-map__marker-halo {
  fill: var(--map-marker-halo);
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-smooth);
}

.us-map__marker-label {
  font-family: var(--font-body);
  font-size: var(--map-label-size);
  font-weight: 600;
  fill: var(--map-label-fg);
  stroke: var(--map-label-halo);
  stroke-width: 3.5;
  paint-order: stroke fill;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-fast) var(--ease-smooth);
}

.us-map__marker:hover .us-map__marker-halo,
.us-map__marker:focus-visible .us-map__marker-halo,
.us-map__marker:focus .us-map__marker-halo { opacity: 1; }

.us-map__marker:hover .us-map__marker-label,
.us-map__marker:focus-visible .us-map__marker-label,
.us-map__marker:focus .us-map__marker-label { opacity: 1; }

/* A focused marker needs a ring that survives on top of a tinted state. The
   baseline :focus-visible outline is drawn too, but SVG outline support is
   uneven, so the halo doubles as a visible focus indicator. */
.us-map__marker:focus-visible .us-map__marker-dot,
.us-map__marker:focus .us-map__marker-dot {
  stroke: var(--focus-ring-color);
  stroke-width: 2.5;
}

/* The baseline :focus-visible rule in tokens.css already draws the outline;
   this restates it so the offset is measured from the marker group rather
   than inherited from a wider selector. Nothing here suppresses an outline. */
.us-map__marker:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

.map-note {
  margin-top: 1.5rem;
  font-size: var(--text-sm);
  color: var(--color-muted);
}

/* ==========================================================================
   8. CONTACT PAGE
   ========================================================================== */

.contact-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: start;
}

@media (min-width: 900px) {
  .contact-layout { grid-template-columns: 22rem 1fr; gap: 4rem; }
}

/* The phone number and the address are the primary contact path: they work
   whether or not the form does. */
.contact-primary {
  background: var(--color-surface-raised);
  padding: var(--card-padding);
  border: var(--card-border);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
}

.contact-primary__label {
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 0.5rem;
}

.contact-primary__phone {
  display: inline-block;
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--color-link);
  text-decoration: none;
  letter-spacing: var(--tracking-tight);
}

.contact-primary__phone:hover { text-decoration: underline; }

.contact-primary__block + .contact-primary__block {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: var(--card-border-width) solid var(--color-border);
}

.contact-primary__address {
  font-style: normal;
  color: var(--color-body);
  line-height: var(--leading-relaxed);
}

/* ---- The form ---- */

/* Full-width inputs in a 1fr column stretch to ~750px at 1440, which is far
   too wide for a name field. The column is capped instead. */
.contact-form-wrap,
.contact-noscript { max-width: 34rem; }

.contact-form-wrap > .contact-form__hint { margin-bottom: 2rem; }

.contact-form__row + .contact-form__row { margin-top: 1.5rem; }

.contact-form__label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-heading);
}

.contact-form__optional {
  font-weight: 400;
  color: var(--color-muted);
}

.contact-form__input,
.contact-form__textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  background: var(--color-surface-raised);
  color: var(--color-heading);
  border: var(--card-border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  transition: border-color var(--duration-fast) var(--ease-smooth);
}

.contact-form__input:hover,
.contact-form__textarea:hover { border-color: var(--color-muted); }

.contact-form__textarea {
  min-height: 9rem;
  resize: vertical;
}

/* The honeypot. Taken out of the layout and off the screen, but NOT with
   display:none or visibility:hidden — a bot worth trapping skips those. It is
   also aria-hidden and out of the tab order in the markup, so nobody using a
   keyboard or a screen reader can reach it by accident. */
.contact-form__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-form__actions {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

.contact-form__hint {
  font-size: var(--text-sm);
  color: var(--color-muted);
  margin: 0;
}

/* The panel shown while the form is sending, and again with the outcome. One
   of the three is visible at a time; the rest carry [hidden]. The resting look
   is the brand-toned surface. */
.form-status {
  margin-top: 1.5rem;
  padding: 1rem 1.25rem;
  border-radius: var(--radius-md);
  border: var(--card-border-width) solid var(--color-border);
  background: var(--color-gold-subtle);
  color: var(--color-heading);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

.form-status[hidden] { display: none; }

/* The failure panel. It reads as different from the confirmation without
   introducing a second hue: gold is the only accent on this site, so a red
   warning treatment is out. The plain surface and the darker rule carry the
   difference, and the wording carries the meaning — which is the better way
   round in any case, since colour alone is never a message. */
.form-status--error {
  background: var(--color-surface-raised);
  border-color: var(--color-heading);
}

.form-status__title {
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.form-status a { font-weight: 600; }

/* ==========================================================================
   9. FOOTER
   ========================================================================== */

.site-footer {
  background: var(--color-surface);
  border-top: var(--card-border-width) solid var(--color-border);
  transition: background-color var(--duration-slow) var(--ease-smooth);
}

.site-footer__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 4rem var(--gutter);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}

@media (min-width: 768px) {
  .site-footer__grid { grid-template-columns: 2fr 1fr 1.4fr; }
}

.site-footer__brand {
  font-family: var(--font-wordmark);
  font-size: var(--text-lg);
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-heading);
  margin-bottom: 1rem;
}

.site-footer__blurb {
  max-width: 32ch;
  font-size: var(--text-sm);
  margin: 0;
}

.site-footer__heading {
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-heading);
  margin-bottom: 1rem;
}

.site-footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.site-footer__links a {
  color: var(--color-body);
  font-size: var(--text-sm);
  text-decoration: none;
}

.site-footer__links a:hover {
  color: var(--color-link);
  text-decoration: underline;
}

.site-footer__contact {
  font-style: normal;
  font-size: var(--text-sm);
  color: var(--color-body);
}

.site-footer__contact a {
  color: var(--color-body);
  text-decoration: none;
}

.site-footer__contact a:hover {
  color: var(--color-link);
  text-decoration: underline;
}

.site-footer__phone {
  display: inline-block;
  margin-top: 0.75rem;
  font-weight: 600;
}

.site-footer__legal {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: var(--card-border-width) solid var(--color-border);
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-muted);
}