/* ============================================================
   The House North Campus
   Palette drawn from the logo: brown #2F221C, bone #F2EFEA.
   Aqua is the single accent; brass marks the Kids Hall only.

   Two themes. Everything below reads from these variables, so a
   theme is one block of values — never a second set of rules.
   ============================================================ */

:root,
:root[data-theme="dark"] {
  /* surfaces, back to front */
  --ink:      #12100F;
  --ink-2:    #171412;
  --panel:    #1B1613;
  --hero-top: #14100E;

  /* text */
  --bone:     #F2EFEA;
  --mist:     #A2958C;
  --mist-dim: #948578; /* WCAG AA 4.5:1+ on --ink; was #6E635C at ~3.25:1 */

  /* brand and accents */
  --brown:    #2F221C;
  --glow:     #78D6CE;
  --glow-hi:  #96E5DE;
  --brass:    #C9A46B;

  --bone-rgb:  242 239 234;
  --brown-rgb:  47  34  28;
  --glow-rgb:  120 214 206;
  --brass-rgb: 201 164 107;

  --line:   rgb(var(--bone-rgb) / 0.10);
  --line-2: rgb(var(--bone-rgb) / 0.18);

  --nav-bg: rgb(18 16 15 / 0.82);
  --hero-wash: rgb(var(--brown-rgb) / 0.9);
  --shaft: 1;
  --card-sheen: rgb(var(--bone-rgb) / 0.035);
  --card-shadow: 0 24px 60px -30px rgb(0 0 0 / 0.9);
  /* the Google embed ships light; this drops it into the dark page */
  --map-filter: invert(91%) hue-rotate(184deg) saturate(0.62) brightness(0.96) contrast(0.94);
}

/* Warm paper rather than plain white — the brown from the logo still
   sets the temperature, and the aqua darkens so it holds contrast. */
:root[data-theme="light"] {
  --ink:      #F4F0E9;
  --ink-2:    #EDE7DE;
  --panel:    #FBF8F3;
  --hero-top: #FFFCF7;

  --bone:     #1A1512;
  --mist:     #5C5148;
  --mist-dim: #6B5F54; /* WCAG AA 4.5:1+ on --ink; was #8A7D73 at ~3.51:1 */

  --brown:    #2F221C;
  --glow:     #0E7F76;
  --glow-hi:  #0B6B63;
  --brass:    #8A6420;

  --bone-rgb:   26  21  18;
  --brown-rgb:  47  34  28;
  --glow-rgb:   14 127 118;
  --brass-rgb: 138 100  32;

  --line:   rgb(var(--bone-rgb) / 0.13);
  --line-2: rgb(var(--bone-rgb) / 0.22);

  --nav-bg: rgb(244 240 233 / 0.85);
  --hero-wash: rgb(var(--brown-rgb) / 0.07);
  --shaft: 0.45;
  --card-sheen: rgb(255 255 255 / 0.7);
  --card-shadow: 0 22px 50px -32px rgb(47 34 28 / 0.45);
  --map-filter: none;
}

:root {
  --display: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --body:    "Source Serif 4", Georgia, "Times New Roman", serif;

  --shell: 1200px;
  --gut: clamp(20px, 5vw, 64px);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
  -webkit-text-size-adjust: 100%;
  /* clip, not hidden — keeps position: fixed on the nav working */
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--body);
  font-size: clamp(16px, 1.05vw, 17px);
  line-height: 1.7;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  transition: background-color 0.35s var(--ease), color 0.35s var(--ease);
}

/* thinned strokes read as washed out on paper */
[data-theme="light"] body { -webkit-font-smoothing: auto; }

/* Media never widens its container, whatever its intrinsic size. */
img, video { max-width: 100%; display: block; }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--glow);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 12px;
  z-index: 100;
  background: var(--glow);
  color: var(--ink);
  padding: 10px 16px;
  font-family: var(--display);
  font-size: 13px;
  text-decoration: none;
}
.skip:focus { left: 12px; }

.shell {
  width: min(var(--shell), 100%);
  margin-inline: auto;
  padding-inline: var(--gut);
}

/* ---------- shared type ---------- */

.eyebrow {
  margin: 0 0 18px;
  font-family: var(--display);
  font-variation-settings: "wdth" 118, "wght" 600;
  font-size: 11px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--glow);
}

.sechead { max-width: 640px; margin: 0 auto 56px; text-align: center; }
.sechead--left { max-width: none; margin: 0 0 20px; text-align: left; }

.sechead__title {
  margin: 0;
  font-family: var(--display);
  font-variation-settings: "wdth" 122, "wght" 600;
  font-size: clamp(30px, 4.2vw, 52px);
  line-height: 1.02;
  letter-spacing: -0.005em;
  text-transform: uppercase;
}

.sechead__lede {
  margin: 20px auto 0;
  max-width: 46ch;
  color: var(--mist);
}
.sechead--left .sechead__lede { margin-inline: 0; }

/* ---------- brand ---------- */

.brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
}

/* the logo ships with generous padding — crop in so the mark reads at 44px */
.brand__tile {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--brown);
  box-shadow: 0 0 0 1px var(--line-2);
}

.brand__tile img {
  width: 100%;
  height: 100%;
  transform: scale(1.34);
}

.brand__text { display: grid; line-height: 1.1; }

.brand__name {
  font-family: var(--display);
  font-variation-settings: "wdth" 120, "wght" 700;
  font-size: 15px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.brand__sub {
  font-family: var(--display);
  font-variation-settings: "wdth" 110, "wght" 400;
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--mist);
}

/* ---------- nav ---------- */

.nav {
  position: fixed;
  inset: 12px 0 auto;
  z-index: 900;
}

/* The bar is the pill. At rest it spans the shell; once the page scrolls it
   contracts into a floating, blurred capsule. */
.nav__inner {
  position: relative;
  width: min(var(--shell), 100%);
  margin-inline: auto;
  padding: 12px var(--gut);
  display: flex;
  align-items: center;
  gap: 32px;
  border: 1px solid transparent;
  border-radius: 999px;
  transition: width 0.5s var(--ease), padding 0.5s var(--ease),
              background 0.4s var(--ease), border-color 0.4s var(--ease),
              box-shadow 0.4s var(--ease), backdrop-filter 0.4s var(--ease);
}

.nav.is-stuck .nav__inner {
  width: min(980px, 100% - 24px);
  padding: 9px 14px;
  background: var(--nav-bg);
  backdrop-filter: blur(14px);
  border-color: var(--line-2);
  box-shadow: 0 18px 40px -26px rgb(0 0 0 / 0.7);
}

.nav.is-stuck .brand__tile { width: 36px; height: 36px; border-radius: 9px; }

/* Auto margins split the leftover space evenly, so the gap to the logo and
   the gap to the controls match — centring on the bar itself would not,
   because the logo block is far wider than the theme button. */
.nav__links {
  position: relative;
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 2px;
}

.nav__links a {
  position: relative;
  z-index: 1;
  padding: 9px 16px;
  border-radius: 999px;
  font-family: var(--display);
  font-variation-settings: "wdth" 112, "wght" 500;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--mist);
  transition: color 0.25s var(--ease);
}

.nav__links a:hover,
.nav__links a:focus-visible { color: var(--bone); }

/* One pill for the whole row — it travels rather than fading in place */
.nav__pill {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: rgb(var(--bone-rgb) / 0.08);
  border: 1px solid var(--line);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.38s var(--ease), width 0.38s var(--ease),
              opacity 0.22s var(--ease);
}

.nav__links.is-hovering .nav__pill { opacity: 1; }

.nav__side {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ---------- mobile menu ---------- */

.burger {
  display: none;
  place-items: center;
  /* rows must hug the bars, or they stretch and the X can't close */
  align-content: center;
  gap: 5px;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: none;
  color: var(--bone);
  cursor: pointer;
  transition: transform 0.28s var(--ease);
}

.burger:active { transform: scale(0.9); transition-duration: 0.12s; }

.burger span {
  display: block;
  width: 15px;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.32s var(--ease), opacity 0.2s var(--ease);
}

.burger[aria-expanded="true"] span:first-child { transform: translateY(3.25px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child  { transform: translateY(-3.25px) rotate(-45deg); }

.drawer {
  display: none;
  flex-direction: column;
  width: min(var(--shell), 100% - 24px);
  margin: 10px auto 0;
  padding: 8px;
  border: 1px solid var(--line-2);
  border-radius: 20px;
  background: var(--nav-bg);
  backdrop-filter: blur(14px);
  box-shadow: 0 22px 50px -28px rgb(0 0 0 / 0.8);
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity 0.28s var(--ease), transform 0.28s var(--ease);
}

.drawer.is-open { opacity: 1; transform: none; pointer-events: auto; }

.drawer a {
  padding: 14px 16px;
  border-radius: 14px;
  font-family: var(--display);
  font-variation-settings: "wdth" 112, "wght" 500;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--mist);
  opacity: 0;
  transform: translateY(-6px);
  transition: background 0.24s var(--ease), color 0.24s var(--ease),
              opacity 0.28s var(--ease), transform 0.28s var(--ease);
}

.drawer.is-open a {
  opacity: 1;
  transform: none;
}

.drawer a:nth-child(1) { transition-delay: 0.04s; }
.drawer a:nth-child(2) { transition-delay: 0.08s; }
.drawer a:nth-child(3) { transition-delay: 0.12s; }
.drawer a:nth-child(4) { transition-delay: 0.16s; }

.drawer a:hover { background: rgb(var(--bone-rgb) / 0.06); color: var(--bone); }

/* Only reaches the DOM when scripting is off, so the burger/drawer above
   never has a dead end — mobile visitors keep a working nav either way. */
.noscript-nav { display: none; }

@media (max-width: 860px) {
  .noscript-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    width: min(var(--shell), 100% - 24px);
    margin: 10px auto 0;
    padding: 8px;
    border: 1px solid var(--line-2);
    border-radius: 20px;
    background: var(--nav-bg);
  }

  .noscript-nav a {
    padding: 12px 16px;
    border-radius: 14px;
    font-family: var(--display);
    font-variation-settings: "wdth" 112, "wght" 500;
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--mist);
  }
}

/* ---------- social marks ---------- */

.social {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
}

.social__link {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  color: var(--mist);
  border: 1px solid transparent;
  transition: color 0.28s var(--ease), border-color 0.28s var(--ease),
              background 0.28s var(--ease), transform 0.28s var(--ease);
}

.social__link:hover {
  color: var(--glow);
  border-color: rgb(var(--glow-rgb) / 0.34);
  background: rgb(var(--glow-rgb) / 0.08);
}

.social__link:active { transform: scale(0.92); transition-duration: 0.12s; }

.social__icon { width: 19px; height: 19px; }

/* ---------- floating WhatsApp ---------- */

/* Anchored by its right edge, so widening pushes the left edge outward and
   the label unrolls away from the icon rather than shoving it sideways.
   At rest it borrows the scrolled nav's capsule — blurred panel, hairline
   border — so it reads as the same floating layer, not a bolt-on badge. */
.wa {
  position: fixed;
  right: clamp(16px, 2.4vw, 34px);
  bottom: clamp(16px, 2.4vw, 34px);
  z-index: 880;
  display: inline-flex;
  align-items: center;
  /* 1 + 14 + 24 + 14 + 1 = 54, borders included: a true circle until the
     gap and the label open. Height is border-box, so the two must match. */
  column-gap: 0;
  height: 54px;
  padding: 0 14px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--nav-bg);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 40px -24px rgb(0 0 0 / 0.7);
  color: var(--glow);
  text-decoration: none;
  transition: column-gap 0.42s var(--ease), padding-right 0.42s var(--ease),
              background 0.32s var(--ease), border-color 0.32s var(--ease),
              color 0.32s var(--ease), box-shadow 0.32s var(--ease),
              transform 0.2s var(--ease);
}

.wa__icon {
  flex: none;
  width: 24px;
  height: 24px;
}

/* 0fr to 1fr measures the label exactly, so the pill stops at the width the
   words actually need — a max-width guess would finish easing early. */
.wa__label {
  display: grid;
  grid-template-columns: 0fr;
  min-width: 0; /* or the flex item floors at the widest word */
  transition: grid-template-columns 0.42s var(--ease);
}

.wa__text {
  overflow: hidden;
  min-width: 0;
  white-space: nowrap;
  font-family: var(--display);
  font-variation-settings: "wdth" 114, "wght" 600;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.26s var(--ease);
}

.wa:hover,
.wa:focus-visible {
  column-gap: 13px;
  padding-right: 22px;
  background: var(--glow);
  border-color: var(--glow);
  color: var(--ink);
  box-shadow: 0 22px 46px -22px rgb(var(--glow-rgb) / 0.55);
}

.wa:hover .wa__label,
.wa:focus-visible .wa__label { grid-template-columns: 1fr; }

/* trails the wipe slightly, so the words arrive rather than being sliced */
.wa:hover .wa__text,
.wa:focus-visible .wa__text {
  opacity: 1;
  transition-delay: 0.12s;
}

.wa:active { transform: scale(0.96); transition-duration: 0.12s; }

@media (max-width: 720px) {
  .wa { height: 50px; padding: 0 12px; } /* 1 + 12 + 24 + 12 + 1 = 50 */
}

/* No wipe to trail, so the label must not sit invisible on an open pill. */
@media (prefers-reduced-motion: reduce) {
  .wa:hover .wa__text,
  .wa:focus-visible .wa__text { transition-delay: 0s; }
}

/* ---------- theme switch ---------- */

.theme {
  position: relative;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-left: 6px;
  padding: 0;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: none;
  color: var(--mist);
  cursor: pointer;
  transition: color 0.28s var(--ease), border-color 0.28s var(--ease),
              transform 0.28s var(--ease);
}

.theme:hover { color: var(--glow); border-color: rgb(var(--glow-rgb) / 0.44); }
.theme:active { transform: scale(0.9); transition-duration: 0.12s; }

.theme__icon {
  grid-area: 1 / 1;
  width: 17px;
  height: 17px;
  transition: opacity 0.3s var(--ease), transform 0.4s var(--ease);
}

/* dark theme shows the sun you can switch to; light shows the moon */
.theme__icon--moon { opacity: 0; transform: rotate(-40deg) scale(0.7); }

[data-theme="light"] .theme__icon--sun  { opacity: 0; transform: rotate(40deg) scale(0.7); }
[data-theme="light"] .theme__icon--moon { opacity: 1; transform: none; }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 28px;
  font-family: var(--display);
  font-variation-settings: "wdth" 114, "wght" 600;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.28s var(--ease), background 0.28s var(--ease),
              color 0.28s var(--ease), border-color 0.28s var(--ease);
}

.btn--primary {
  background: var(--glow);
  color: var(--ink);
}
.btn--primary:hover {
  transform: translateY(-2px);
  background: var(--glow-hi);
}
.btn--primary:active { transform: scale(0.97); transition-duration: 0.12s; }

.btn--ghost {
  color: var(--bone);
  border-color: var(--line-2);
}
.btn--ghost:hover {
  border-color: var(--bone);
  transform: translateY(-2px);
}
.btn--ghost:active { transform: scale(0.97); transition-duration: 0.12s; }

.btn__arrow { width: 16px; height: 16px; }

/* ============================================================
   HERO
   ============================================================ */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 150px 0 100px;
  overflow: hidden;
  background:
    radial-gradient(120% 80% at 78% 0%, rgb(var(--glow-rgb) / 0.10), transparent 58%),
    radial-gradient(90% 70% at 8% 90%, var(--hero-wash), transparent 62%),
    linear-gradient(180deg, var(--hero-top) 0%, var(--ink) 62%, var(--ink-2) 100%);
}

/* A shaft of light, the way it falls through a high window */
.hero__light {
  position: absolute;
  top: -30%;
  right: 6%;
  width: 46vw;
  height: 150%;
  transform: rotate(14deg);
  background: linear-gradient(180deg, rgb(var(--glow-rgb) / 0.16), rgb(var(--brass-rgb) / 0.05) 55%, transparent 80%);
  filter: blur(60px);
  opacity: var(--shaft);
  pointer-events: none;
  animation: drift 18s var(--ease) infinite alternate;
}

/* transform only — opacity belongs to the theme, via --shaft */
@keyframes drift {
  from { transform: rotate(14deg) translateX(0); }
  to   { transform: rotate(10deg) translateX(-4vw); }
}

.hero__mark {
  position: absolute;
  right: 3vw;
  bottom: 22%;
  width: min(40vw, 500px);
  opacity: 0.07;
  pointer-events: none;
}

/* logoPutih is white; flip it dark so the watermark still reads on the light theme's pale hero */
:root[data-theme="light"] .hero__mark { filter: invert(1); }

.hero__inner {
  position: relative;
  width: min(var(--shell), 100%);
  margin: 0 auto;
  padding: 0 var(--gut);
}

.hero__title {
  margin: 0;
  font-family: var(--display);
  font-variation-settings: "wdth" 125, "wght" 600;
  font-size: clamp(38px, 5.9vw, 84px);
  line-height: 0.94;
  letter-spacing: -0.015em;
  text-transform: uppercase;
}

.hero__title span { display: block; }

/* 0.7166 is the measured width ratio of "THE HOUSE" to "NORTH CAMPUS" at this
   face and width axis — it flushes the two lines to the same edge. */
.hero__title span:nth-child(2) { font-size: 0.7166em; }

.hero__lede {
  max-width: 50ch;
  margin: 28px 0 0;
  color: var(--mist);
  font-size: 1.05rem;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 38px;
}

/* the three places to reach us, sitting under the two calls to action */
/* Deliberately quieter than .hero__actions — these are a secondary way to
   reach us, not a third call to action competing with the two buttons. */
.social--hero {
  gap: 6px;
  margin-top: 34px;
}

.social--hero .social__link {
  width: 34px;
  height: 34px;
}

.social--hero .social__icon {
  width: 16px;
  height: 16px;
}

/* ============================================================
   SERVICES
   ============================================================ */

.services {
  padding: clamp(88px, 12vw, 150px) 0 clamp(80px, 10vw, 130px);
  background: var(--ink-2);
}

/* one roof over all three cards — the point of the section */
.roofline {
  display: block;
  width: 100%;
  height: 92px;
  margin-bottom: 22px;
  color: rgb(var(--bone-rgb) / 0.26);
}

.cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}

/* Each card is built like a door: plaque, panel, handle. */
.card {
  position: relative;
  min-height: 400px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 4px;
  background:
    linear-gradient(180deg, var(--card-sheen), transparent 34%),
    linear-gradient(0deg, rgb(var(--glow-rgb) / 0.07), transparent 46%),
    var(--panel);
  transition: transform 0.4s var(--ease), border-color 0.4s var(--ease),
              box-shadow 0.4s var(--ease);
}

/* inner door panel */
.card::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgb(var(--bone-rgb) / 0.055);
  border-radius: 2px;
  pointer-events: none;
}

.card:hover {
  transform: translateY(-6px);
  border-color: rgb(var(--glow-rgb) / 0.34);
  box-shadow: var(--card-shadow);
}

.card__plaque {
  position: relative;
  align-self: flex-start;
  margin: 0;
  padding: 7px 14px;
  border: 1px solid rgb(var(--glow-rgb) / 0.32);
  border-radius: 3px;
  font-family: var(--display);
  font-variation-settings: "wdth" 110, "wght" 600;
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--glow);
  background: rgb(var(--glow-rgb) / 0.06);
}

.card__body { position: relative; margin-top: auto; }

.card__title {
  margin: 0;
  font-family: var(--display);
  font-variation-settings: "wdth" 122, "wght" 600;
  font-size: clamp(21px, 2.1vw, 27px);
  line-height: 1.05;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.card__time {
  margin: 10px 0 0;
  font-family: var(--display);
  font-variation-settings: "wdth" 108, "wght" 400;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mist);
}

.card__text {
  margin: 16px 0 0;
  font-size: 0.94rem;
  line-height: 1.65;
  color: var(--mist);
}

.card__handle {
  position: absolute;
  right: 26px;
  top: 38%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--glow);
  opacity: 0.5;
  transition: opacity 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

.card:hover .card__handle {
  opacity: 1;
  box-shadow: 0 0 0 6px rgb(var(--glow-rgb) / 0.12);
}

/* the one card in a different room gets the one different colour */
.card--kids {
  background:
    linear-gradient(180deg, var(--card-sheen), transparent 34%),
    linear-gradient(0deg, rgb(var(--brass-rgb) / 0.09), transparent 46%),
    var(--panel);
}
.card--kids:hover { border-color: rgb(var(--brass-rgb) / 0.38); }
.card--kids .card__plaque {
  color: var(--brass);
  border-color: rgb(var(--brass-rgb) / 0.34);
  background: rgb(var(--brass-rgb) / 0.07);
}
.card--kids .card__handle { background: var(--brass); }
.card--kids:hover .card__handle { box-shadow: 0 0 0 6px rgb(var(--brass-rgb) / 0.14); }

.services__note {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin: 34px 0 0;
  padding: 0;
  font-size: 0.86rem;
  color: var(--mist-dim);
}

/* dot column is fixed, so a wrapped second line stays under the text */
.note {
  display: grid;
  grid-template-columns: 7px 1fr;
  align-items: baseline;
  gap: 10px;
}

.note__text { min-width: 0; }

.dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  /* baseline alignment sits a bare dot too low next to the text */
  transform: translateY(-2px);
}
.dot--glow  { background: var(--glow); }
.dot--brass { background: var(--brass); }

/* ============================================================
   LOCATION
   ============================================================ */

.location {
  padding: clamp(88px, 12vw, 150px) 0;
  background:
    radial-gradient(80% 60% at 100% 0%, rgb(var(--glow-rgb) / 0.07), transparent 60%),
    var(--ink);
}

.location__grid {
  display: grid;
  grid-template-columns: 1fr 1.08fr;
  gap: clamp(32px, 5vw, 70px);
  align-items: stretch;
}

/* A grid item defaults to min-width:auto, so one wide child — the video at
   its intrinsic 1280px — can stretch the whole track and push the section
   past the screen. Deny that. */
.location__grid > * { min-width: 0; }

.location__col { display: flex; flex-direction: column; align-items: flex-start; }
.location__col .sechead,
.location__col .addr { width: 100%; }

/* Full-bleed under the two columns above it. */
.location__map {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
}

.addr {
  margin: 0 0 32px;
  font-style: normal;
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--mist);
}

.addr__name {
  display: block;
  margin-bottom: 8px;
  font-family: var(--display);
  font-variation-settings: "wdth" 118, "wght" 600;
  font-size: 16px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bone);
}

.map {
  position: relative;
  flex: 1;
  min-height: 440px;
  border: 1px solid var(--line-2);
  border-radius: 4px;
  overflow: hidden;
  background: var(--panel);
}

/* tints the Google embed to match the page; delete to show the default map */
.map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  filter: var(--map-filter);
}

.map__cap {
  margin: 12px 0 0;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  color: var(--mist-dim);
}

/* Grand Opening clip. Shares the top row with the address; playback is
   capped at data-stop seconds in script.js. */
.locvid {
  align-self: center;
  width: 100%;
}

.locvid__media {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--line-2);
  border-radius: 4px;
  background: #000;
  object-fit: cover;
}

/* ============================================================
   FOOTER
   ============================================================ */

.foot {
  position: relative;
  padding: 0 0 40px;
  background: var(--ink-2);
}

.foot__roof {
  display: block;
  width: 100%;
  height: 92px;
  color: rgb(var(--bone-rgb) / 0.22);
}

.foot__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 5vw, 80px);
  padding-top: clamp(50px, 7vw, 80px);
  padding-bottom: clamp(50px, 7vw, 80px);
  align-items: start;
}

.foot__title {
  margin: 0;
  font-family: var(--display);
  font-variation-settings: "wdth" 122, "wght" 600;
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.04;
  text-transform: uppercase;
}

.foot__lede {
  margin: 18px 0 0;
  max-width: 40ch;
  color: var(--mist);
}

.chan { list-style: none; margin: 0; padding: 0; }

.chan__link {
  display: grid;
  grid-template-columns: 20px 120px 1fr;
  gap: 16px;
  align-items: baseline;
  padding: 20px 4px;
  border-top: 1px solid var(--line);
  text-decoration: none;
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease);
}

.chan li:last-child .chan__link { border-bottom: 1px solid var(--line); }

.chan__link:hover {
  transform: translateX(10px);
  border-color: rgb(var(--glow-rgb) / 0.4);
}

.chan__link:active { transform: translateX(10px) scale(0.985); transition-duration: 0.12s; }

.chan__icon {
  width: 20px;
  height: 20px;
  align-self: center;
  color: var(--glow);
}

.chan__k {
  font-family: var(--display);
  font-variation-settings: "wdth" 112, "wght" 600;
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--glow);
}

.chan__v {
  font-size: 1rem;
  color: var(--mist);
  transition: color 0.3s var(--ease);
}
.chan__link:hover .chan__v { color: var(--bone); }

.foot__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 32px;
  padding-top: 30px;
  border-top: 1px solid var(--line);
}

.brand--foot { margin-right: auto; }

.foot__addr,
.foot__copy {
  margin: 0;
  font-size: 0.82rem;
  color: var(--mist-dim);
}

/* ============================================================
   MOTION
   ============================================================ */

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}

.reveal.is-in {
  opacity: 1;
  transform: none;
}

/* hero load sequence */
.hero .reveal { transition-delay: 0.15s; }
.hero__title .reveal:nth-child(1) { transition-delay: 0.25s; }
.hero__title .reveal:nth-child(2) { transition-delay: 0.38s; }
.hero__lede    { transition-delay: 0.52s !important; }
.hero__actions { transition-delay: 0.64s !important; }
.facts         { transition-delay: 0.76s !important; }

.cards .reveal:nth-child(2) { transition-delay: 0.1s; }

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1000px) {
  .location__grid { grid-template-columns: 1fr; }
  .foot__grid     { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .nav__links { display: none; }
  .nav__side  { margin-left: auto; }
  .nav__inner { gap: 16px; }
  .burger { display: grid; }
  .drawer { display: flex; }
}

@media (max-width: 720px) {
  html { scroll-padding-top: 76px; }
  .hero { padding-top: 118px; }
  .hero__mark { width: 78vw; right: -18vw; bottom: 22%; }
  .facts { grid-template-columns: 1fr; gap: 20px; }
  .fact { border-left: 2px solid var(--line); padding-left: 14px; }
  .cards { grid-template-columns: 1fr; gap: 16px; }
  .card { min-height: 0; }
  .card__body { margin-top: 28px; }
  .card__handle { display: none; }
  .roofline, .foot__roof { height: 54px; }
  .roofline { margin-bottom: 16px; }
  .map { min-height: 320px; }
  .chan__link { grid-template-columns: 20px 1fr; column-gap: 14px; row-gap: 4px; }
  .chan__icon { grid-row: 1 / span 2; }
  .btn { padding: 14px 22px; }

  /* One legend row per line — side by side they'd each be two ragged lines. */
  .services__note { flex-direction: column; gap: 10px; margin-top: 26px; }

  /* Stacked sections were adding ~170px of dead space between the last card
     and the next heading; tighten the seam without flattening the rhythm. */
  .services { padding: 72px 0 56px; }
  .location { padding: 64px 0; }
  .sechead { margin-bottom: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}