/* =============================================================================
   Sky House BSD — main.css
   Foundation layer. All values below were measured from the reference site
   (promoskyhouse.web.id) during the Milestone 1 audit — see reference/audit-summary.md.
   Section-level styling is added per milestone; do not put section CSS here yet.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* --- Palette (extracted from reference stylesheet) --- */
  --color-bg:            #0a0a0a;   /* page background          (Tailwind `bg`)    */
  --color-surface:       #111111;   /* raised panels                                */
  --color-cream:         #f5f2ed;   /* primary text / foreground (Tailwind `cream`) */
  --color-gold:          #c9a96e;   /* accent, italic emphasis   (Tailwind `gold`)  */

  --color-text:          var(--color-cream);
  --color-muted:         rgba(245, 242, 237, 0.6);
  --color-subtle:        rgba(245, 242, 237, 0.4);
  --color-faint:         rgba(245, 242, 237, 0.3);
  --color-border:        rgba(245, 242, 237, 0.1);
  --color-border-strong: rgba(245, 242, 237, 0.2);
  --color-overlay:       rgba(10, 10, 10, 0.8);

  /* --- Typography --- */
  --font-sans:  'Outfit', 'Outfit Fallback', system-ui, sans-serif;           /* reference stack */
  --font-serif: 'Cormorant Garamond', 'Cormorant Garamond Fallback', serif;    /* reference stack */

  /* Eyebrow / section label: 10px, 0.28em tracking, uppercase */
  --eyebrow-size:      0.625rem;
  --eyebrow-tracking:  0.28em;
  /* Navigation + small caps UI: 11px, 0.18em tracking */
  --nav-size:          0.6875rem;
  --nav-tracking:      0.18em;

  /* --- Layout --- */
  --container-max:     1600px;  /* reference `max-w-400` */
  --container-pad:     1.5rem;  /* 24px — below md       */
  --container-pad-md:  2.5rem;  /* 40px — md and up      */

  --header-height:     73px;    /* mobile  */
  --header-height-md:  84px;    /* desktop */

  /* --- Vertical rhythm (reference section padding-bottom) --- */
  --section-gap:       5rem;    /* 80px  — mobile  */
  --section-gap-md:    7rem;    /* 112px — desktop */

  --radius-card:       1rem;    /* reference rounded-2xl */
  --radius-pill:       999px;

  /* --- Motion --- */
  --ease-out:          cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:          200ms;
  --dur-base:          500ms;
  --dur-slow:          700ms;
}

/* -----------------------------------------------------------------------------
   2. Reset / Bootstrap overrides
   The reference is a dark, serif-led design; Bootstrap's light defaults must go.
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* fixed header must not cover anchored sections */
  scroll-padding-top: var(--header-height);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  /* no -webkit-font-smoothing override: the reference leaves it at auto, and forcing
     antialiased renders every light-on-dark line visibly thinner on macOS */
  overflow-x: hidden;   /* guards against slider overflow; per-section fixes preferred */
}

img, video { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }
a:hover { color: inherit; }

/* Bootstrap sets its own heading sizes/margins — the reference controls both. */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: normal;
}
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

/* Bootstrap variable bridge — keeps any Bootstrap component that slips through on-palette */
:root {
  --bs-body-bg: var(--color-bg);
  --bs-body-color: var(--color-text);
  --bs-body-font-family: var(--font-sans);
  --bs-border-color: var(--color-border);
  --bs-link-color: var(--color-gold);
  --bs-link-hover-color: var(--color-gold);
  --bs-emphasis-color: var(--color-cream);
  --bs-code-color: var(--color-gold);          /* Bootstrap defaults to pink */
  --bs-secondary-color: var(--color-muted);
  --bs-heading-color: var(--color-cream);
}

/* -----------------------------------------------------------------------------
   3. Container
   Reference uses a 1600px max width with 24px / 40px gutters — wider than any
   Bootstrap container, so this is a custom class rather than `.container`.
   -------------------------------------------------------------------------- */
.sh-container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* Sections are spaced by bottom padding on the reference, not top+bottom. */
.sh-section { padding-bottom: var(--section-gap); }

/* -----------------------------------------------------------------------------
   4. Typography primitives
   -------------------------------------------------------------------------- */
.sh-font-serif { font-family: var(--font-serif); }
.sh-font-sans  { font-family: var(--font-sans); }

/* Section label, e.g. "01 — About BSD" */
.sh-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--eyebrow-size);
  line-height: 1.5;
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
  color: var(--color-subtle);
}

/* Serif display heading — per-section sizes are set in each milestone's CSS */
.sh-heading {
  font-family: var(--font-serif);
  font-weight: 400;
  line-height: 1.05;
  color: var(--color-cream);
}

/* The reference emphasises one phrase per heading in gold italic — on every heading,
   whatever its class. Scoping this to .sh-heading left all nine homepage section
   titles (which carry their own classes) rendering the phrase in cream. */
h1 em, h2 em, h3 em,
.sh-heading em,
.sh-accent { color: var(--color-gold); font-style: italic; }

.sh-body {
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--color-muted);
}

.sh-nav-link {
  font-family: var(--font-sans);
  font-size: var(--nav-size);
  line-height: 1.5;
  letter-spacing: var(--nav-tracking);
  text-transform: uppercase;
  color: var(--color-muted);
  transition: color var(--dur-fast) ease;
}
.sh-nav-link:hover { color: var(--color-cream); }

/* -----------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.sh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-sans);
  font-size: var(--nav-size);
  letter-spacing: var(--nav-tracking);
  text-transform: uppercase;
  padding: 0.875rem 1.75rem;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background-color var(--dur-fast) ease,
              border-color var(--dur-fast) ease,
              color var(--dur-fast) ease,
              opacity var(--dur-fast) ease;
  /* WCAG tap target */
  min-height: 44px;
}

.sh-btn--primary {
  background-color: var(--color-cream);
  color: var(--color-bg);
  /* reference filled buttons carry no border, so they sit 2px shorter than outlined ones */
  border: 0;
}
.sh-btn--primary:hover { background-color: rgba(245, 242, 237, 0.9); color: var(--color-bg); }

.sh-btn--outline {
  border-color: var(--color-border-strong);
  color: var(--color-cream);
}
.sh-btn--outline:hover { border-color: var(--color-cream); }

.sh-btn--gold {
  background-color: var(--color-gold);
  color: var(--color-bg);
}
.sh-btn--gold:hover { background-color: rgba(201, 169, 110, 0.9); color: var(--color-bg); }

/* -----------------------------------------------------------------------------
   6. Accessibility
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
}
/* Only suppress the ring for mouse users, never for keyboard */
:focus:not(:focus-visible) { outline: none; }

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

.sh-skip-link {
  position: absolute;
  top: 0; left: 0;
  z-index: 200;
  padding: 0.75rem 1.25rem;
  background: var(--color-cream);
  color: var(--color-bg);
  transform: translateY(-120%);
  transition: transform var(--dur-fast) ease;
}
.sh-skip-link:focus { transform: translateY(0); color: var(--color-bg); }

@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;
    scroll-behavior: auto !important;
  }
}

/* =============================================================================
   MILESTONE 2 — Header, Navigation, Hero, Features, Official Film
   Every value below was measured from the reference at 1440×900 and 390×844
   (tools/probe-desktop.mjs, tools/probe-m2.mjs). Mobile-first; the desktop
   half lives in responsive.css.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.sh-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  background-color: rgba(10, 10, 10, 0.8);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  /* slides down on load; see .is-ready */
  opacity: 0;
  transform: translateY(-100px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}
.sh-header.is-ready { opacity: 1; transform: translateY(0); }

.sh-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--container-max);
  margin-inline: auto;
  padding: 20px var(--container-pad);
}

.sh-header__logo { flex-shrink: 0; display: block; }
.sh-header__logo img { height: 32px; width: auto; object-fit: contain; }

/* Desktop nav — hidden until lg (992px in Bootstrap; reference switches at 1024) */
.sh-nav { display: none; }

.sh-nav__link {
  font-family: var(--font-sans);
  font-size: 0.6875rem;              /* 11px */
  line-height: 1.5;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-muted);
  background: none;
  border: 0;
  transition: color var(--dur-fast) ease;
  white-space: nowrap;
}
.sh-nav__link:hover,
.sh-nav__link:focus-visible { color: var(--color-cream); }

/* Catalog dropdown */
.sh-nav__group { position: relative; }
/* Catalog dropdown switch — see the comment above the nav group in index.html.
   "off" hides the chevron and the unit menu so Catalog reads as a plain link.
   Everything below stays in place for when the switch is set back to "on". */
.sh-nav__group[data-catalog-menu="off"] .sh-nav__chevron,
.sh-nav__group[data-catalog-menu="off"] .sh-dropdown { display: none; }
.sh-nav__trigger { display: inline-flex; align-items: center; gap: 0.25rem; }
.sh-nav__chevron { transition: transform var(--dur-fast) ease; }
.sh-nav__trigger[aria-expanded="true"] .sh-nav__chevron { transform: rotate(180deg); }

.sh-dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  translate: -50% 0;
  margin-top: 1rem;
  width: 13rem;                       /* 208px — reference w-52 */
  background-color: rgba(10, 10, 10, 0.95);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--dur-fast) ease, transform var(--dur-fast) ease, visibility var(--dur-fast);
}
.sh-nav__trigger[aria-expanded="true"] + .sh-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.sh-dropdown__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(245, 242, 237, 0.55);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  transition: color 150ms ease, background-color 150ms ease;
}
.sh-dropdown__item:last-child { border-bottom: 0; }
.sh-dropdown__item:hover,
.sh-dropdown__item:focus-visible {
  color: var(--color-cream);
  background-color: rgba(255, 255, 255, 0.05);
}
.sh-dropdown__size { color: var(--color-faint); }

/* Header CTA — hidden on mobile, where it moves into the drawer instead */
.sh-header__cta { display: none; }

.sh-btn--header {
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  padding: 12px 20px;
  border-color: rgba(245, 242, 237, 0.4);
  color: var(--color-cream);
  min-height: 0;
}
.sh-btn--header:hover { background-color: var(--color-cream); color: var(--color-bg); }

/* Hamburger */
.sh-header__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem;
  color: var(--color-cream);
  /* reference icon is 22px; pad the hit area out to 44px without moving it */
  margin: -11px;
  width: 44px;
  height: 44px;
}
.sh-header__toggle .sh-icon-close { display: none; }
.sh-header__toggle[aria-expanded="true"] .sh-icon-open { display: none; }
.sh-header__toggle[aria-expanded="true"] .sh-icon-close { display: block; }

/* -----------------------------------------------------------------------------
   Mobile drawer — expands beneath the header bar (not a full-screen overlay)
   -------------------------------------------------------------------------- */
.sh-drawer {
  background-color: rgba(10, 10, 10, 0.95);
  /* the reference only mounts this panel when open, so a closed drawer must not
     contribute its 1px border to the header height */
  border-top: 0 solid rgba(255, 255, 255, 0.1);
  /* 0fr -> 1fr animates to the panel's natural height without measuring it in JS */
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 400ms var(--ease-out);
}
.sh-drawer.is-open { grid-template-rows: 1fr; border-top-width: 1px; }
.sh-drawer__inner { overflow: hidden; }
.sh-drawer__list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
  padding: 1.5rem var(--container-pad);
}
.sh-drawer__list .sh-nav__link { letter-spacing: 0.2em; text-align: left; }
.sh-drawer .sh-btn { align-self: flex-start; }

body.nav-is-open { overflow: hidden; }

/* -----------------------------------------------------------------------------
   Hero — full viewport, wordmark anchored to the bottom
   -------------------------------------------------------------------------- */
.sh-hero {
  position: relative;
  height: 100vh;
  height: 100svh;                     /* avoids the iOS URL-bar jump */
  padding-top: 70px;
  overflow: hidden;
}

.sh-hero__media { position: absolute; inset: 0; }
.sh-hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
}

/* Three stacked scrims, exactly as the reference layers them */
.sh-hero__scrim { position: absolute; inset: 0; background-color: rgba(10, 10, 10, 0.4); pointer-events: none; }
.sh-hero__fade {
  position: absolute; inset: auto 0 0 0; height: 55%; pointer-events: none;
  background: linear-gradient(to top, #0a0a0a 0%, #0a0a0a 15%, transparent 100%);
}
.sh-hero__vignette {
  position: absolute; inset: auto 0 0 0; height: 80%; pointer-events: none;
  background: radial-gradient(ellipse 160% 60% at 50% 100%, #0a0a0a 0%, transparent 70%);
}

.sh-hero__inner {
  position: relative;
  z-index: 10;
  max-width: var(--container-max);
  margin-inline: auto;
  height: 100%;
  padding: 2rem var(--container-pad);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  pointer-events: none;
}

.sh-hero__wordmark {
  font-family: var(--font-serif);
  font-size: clamp(48px, 13vw, 160px);
  line-height: 1;
  color: var(--color-cream);
  user-select: none;
}
/* Each line is masked so it can rise into view */
.sh-hero__line { overflow: hidden; }
.sh-hero__line > span {
  display: block;
  transform: translateY(105%);
  opacity: 0;
  transition: transform 900ms var(--ease-out), opacity 900ms var(--ease-out);
}
.sh-hero.is-ready .sh-hero__line > span { transform: translateY(0); opacity: 1; }
.sh-hero.is-ready .sh-hero__line:nth-child(2) > span { transition-delay: 120ms; }
.sh-hero__dot { color: var(--color-gold); }

.sh-hero__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1rem;
  opacity: 0;
  transition: opacity 700ms var(--ease-out) 600ms;
}
.sh-hero.is-ready .sh-hero__foot { opacity: 1; }

.sh-hero__scroll { display: flex; align-items: center; gap: 1rem; }
.sh-hero__rule { display: block; height: 1px; width: 3.5rem; background-color: rgba(245, 242, 237, 0.2); }
/* The reference ships one slide, so this reads as a static progress mark */
.sh-hero__marker { height: 1px; width: 2rem; background-color: var(--color-cream); }

/* -----------------------------------------------------------------------------
   Features — value proposition beside the building render
   -------------------------------------------------------------------------- */
.sh-features {
  position: relative;
  margin-top: -2rem;
  padding-bottom: 8rem;               /* 128px */
  overflow: hidden;
}
.sh-features__grid { display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: center; }

.sh-features__copy {
  display: flex;
  flex-direction: column;
  /* children fill the column, as block flow does on the reference (space-y-6);
     flex-start would shrink the eyebrow to its text width */
  gap: 1.5rem;
  padding-inline: var(--container-pad);
  /* keeps the column aligned to the 1600px container while the image bleeds right */
  padding-left: max(var(--container-pad), calc((100vw - var(--container-max)) / 2 + var(--container-pad-md)));
}

.sh-developer { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; }
.sh-developer__label {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  line-height: 1.5;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-muted);
}
/* Source logo is dark artwork; the reference knocks it out to pure white */
.sh-developer__logo { height: 64px; width: auto; object-fit: contain; filter: brightness(0) invert(1); }

.sh-features__title {
  font-family: var(--font-serif);
  font-size: 1.875rem;                /* 30px */
  line-height: 1.1;
  color: var(--color-cream);
}
.sh-features__body {
  font-family: var(--font-sans);
  font-size: 0.875rem;                /* 14px */
  line-height: 1.625;
  color: rgba(245, 242, 237, 0.5);
  max-width: 32rem;                   /* 512px */
}
.sh-features__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }

.sh-btn--compact {
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  padding: 12px 20px;
  min-height: 0;
}
.sh-btn--compact.sh-btn--outline { border-color: rgba(245, 242, 237, 0.4); }
.sh-btn--compact.sh-btn--outline:hover { background-color: var(--color-cream); color: var(--color-bg); }

.sh-features__visual { position: relative; padding-left: var(--container-pad); }
.sh-features__visual img { width: 100%; height: auto; display: block; }
/* Three gradients dissolve the render into the page on three edges */
.sh-features__visual::before,
.sh-features__visual::after,
.sh-features__visual > .sh-features__fade {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.sh-features__visual::before { background: linear-gradient(to right, #0a0a0a 0%, transparent 40%); }
.sh-features__visual::after  { background: linear-gradient(to top,   #0a0a0a 0%, transparent 40%); }
.sh-features__visual > .sh-features__fade { background: linear-gradient(to bottom, #0a0a0a 0%, transparent 30%); }

/* -----------------------------------------------------------------------------
   Official Film — lives inside #about, paired with the About copy (Milestone 3)
   -------------------------------------------------------------------------- */
/* Pulled up over .sh-features by a negative margin and raised to z-10, this section
   would otherwise swallow clicks aimed at the Features CTAs underneath — it does
   exactly that on the reference. Only real content inside it takes pointer events. */
.sh-about,
.sh-about__grid { pointer-events: none; }
.sh-about .sh-film,
.sh-about__copy { pointer-events: auto; }

.sh-about {
  position: relative;
  z-index: 10;
  margin-top: -10rem;                 /* -160px */
  padding-bottom: 3.5rem;
  overflow: hidden;
}
.sh-about__grid { display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: start; }


.sh-film {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-card);
  overflow: hidden;
}
/* caption inherits the <button> UA default of text-align:center, as on the reference */
.sh-film__button { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; }
.sh-film__button img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
.sh-film__button:hover img { transform: scale(1.05); }

.sh-film__scrim {
  position: absolute; inset: 0;
  background-color: rgba(10, 10, 10, 0.4);
  transition: background-color 300ms ease;
}
.sh-film__button:hover .sh-film__scrim { background-color: rgba(10, 10, 10, 0.3); }
.sh-film__fade {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, #0a0a0a 0%, transparent 55%);
}

.sh-film__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sh-film__ring {
  width: 80px; height: 80px;
  border-radius: 50%;
  border: 1px solid rgba(245, 242, 237, 0.4);
  background-color: rgba(10, 10, 10, 0.2);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  transition: background-color 300ms ease, border-color 300ms ease;
}
.sh-film__button:hover .sh-film__ring {
  background-color: rgba(245, 242, 237, 0.1);
  border-color: var(--color-cream);
}
/* optical centring — the triangle reads left-heavy inside a circle */
.sh-film__ring svg { margin-left: 6px; color: var(--color-cream); }

.sh-film__caption { position: absolute; inset: auto 0 0 0; padding: 1.5rem; }
/* caption parts are spans (they sit inside a <button>), so they need to be told
   to fill the width — otherwise the title wraps early and mis-measures */
.sh-film__eyebrow,
.sh-film__title { display: block; }
.sh-film__eyebrow {
  font-family: var(--font-sans);
  font-size: 0.625rem;
  line-height: 1.5;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-subtle);
  margin-bottom: 0.25rem;
}
.sh-film__title {
  font-family: var(--font-serif);
  font-size: 1.25rem;                 /* 20px */
  line-height: 1.375;
  color: var(--color-cream);
}

/* Once activated the thumbnail is swapped for the real YouTube iframe */
.sh-film__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* -----------------------------------------------------------------------------
   Reveal-on-scroll (opt-in via data-reveal)
   -------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out);
}
[data-reveal].is-revealed { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .sh-header, .sh-hero__line > span, .sh-hero__foot, [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* =============================================================================
   MILESTONE 3 — 01 About BSD copy column, 02 Catalog carousel
   Measured from the reference at 1440×900 and 390×844 (tools/probe-m3*.mjs).
   ========================================================================== */

/* -----------------------------------------------------------------------------
   01 — About BSD (right column of #about; the film card is the left column)
   -------------------------------------------------------------------------- */
.sh-about__copy {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;                        /* reference space-y-10 */
  padding-left: var(--container-pad);
  /* mirrors the film column: holds the copy to the 1600px container edge */
  padding-right: max(var(--container-pad), calc((100vw - var(--container-max)) / 2 + var(--container-pad-md)));
}

.sh-about__intro { display: flex; flex-direction: column; gap: 1.5rem; }

.sh-about__title {
  font-family: var(--font-serif);
  font-size: 2.25rem;                 /* 36px */
  line-height: 1.05;
  color: var(--color-cream);
}

.sh-about__lead {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  line-height: 1.625;
  color: rgba(245, 242, 237, 0.5);
}

/* Specification list — 13 items, one column on phones, three from lg */
.sh-specs {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 1.5rem;
  row-gap: 0.75rem;
  padding-top: 0.5rem;
}
.sh-specs__item { display: flex; align-items: flex-start; gap: 0.625rem; }
.sh-specs__item svg { flex-shrink: 0; margin-top: 2px; color: var(--color-gold); }
.sh-specs__item span {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  line-height: 1.375;                 /* reference leading-snug */
  color: rgba(245, 242, 237, 0.8);
}

/* -----------------------------------------------------------------------------
   02 — Catalog carousel
   Card width is min(520px, 65vw) on the reference, so it is expressed once here
   and every other dimension derives from it.
   -------------------------------------------------------------------------- */
.sh-catalog {
  --unit-w: min(520px, 65vw);
  --unit-gap: 24px;
  --unit-ratio: 1.4153846;            /* 736 / 520 — the media box aspect */
  position: relative;
  overflow: hidden;
  padding-bottom: 5rem;               /* 80px */
}

.sh-catalog__head {
  max-width: var(--container-max);
  margin-inline: auto;
  margin-bottom: 3rem;                /* 48px */
  padding-inline: var(--container-pad);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;                       /* reference space-y-3 */
}

.sh-catalog__title {
  font-family: var(--font-serif);
  font-size: 2.25rem;                 /* 36px */
  line-height: 1.05;
  color: var(--color-cream);
}

/* Height is set explicitly, exactly as the reference does: media box + 96px footer.
   The card is a couple of px taller than that, and the reference lets the overflow
   clip rather than growing the stage — matched here so nothing below shifts by 3px. */
.sh-catalog__stage {
  position: relative;
  height: calc(var(--unit-w) * var(--unit-ratio) + 96px);
}

/* Absolutely positioned so the 18-card track never contributes to layout width */
.sh-catalog__track {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  gap: var(--unit-gap);
  width: max-content;
  will-change: transform;
  transition: transform 700ms var(--ease-out);
}
/* used when looping from the last copy back to the middle one */
.sh-catalog__track.is-snapping { transition: none; }

.sh-unit {
  flex-shrink: 0;
  width: var(--unit-w);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-card);
  background-color: #0c0a09;          /* reference bg-stone-950 */
  cursor: pointer;
  transform: scale(0.96);
  transform-origin: center center;
  backface-visibility: hidden;
  transition: transform 700ms var(--ease-out);
}
.sh-unit.is-active { transform: none; }

.sh-unit__media {
  position: relative;
  overflow: hidden;
  height: calc(var(--unit-w) * var(--unit-ratio));
}
/* object-contain: unit plans must never be cropped */
.sh-unit__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.sh-unit__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 28px;
}
.sh-unit__tower {
  font-family: var(--font-sans);
  font-size: 0.625rem;                /* 10px */
  line-height: 1.5;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-subtle);
  margin-bottom: 0.375rem;
}
.sh-unit__name {
  font-family: var(--font-serif);
  font-size: 1.875rem;                /* 30px */
  line-height: 1.2;
  color: var(--color-cream);
}
.sh-unit__size { text-align: right; }
.sh-unit__size-label {
  font-family: var(--font-sans);
  font-size: 0.5625rem;               /* 9px */
  line-height: 1.5;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-faint);
  margin-bottom: 0.25rem;
}
.sh-unit__size-value {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-muted);
}

/* Prev / next */
.sh-catalog__nav {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border: 1px solid var(--color-border-strong);
  border-radius: 50%;
  background-color: rgba(10, 10, 10, 0.6);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  color: rgba(245, 242, 237, 0.5);
  transition: border-color var(--dur-fast) ease, color var(--dur-fast) ease;
}
.sh-catalog__nav:hover { border-color: rgba(245, 242, 237, 0.6); color: var(--color-cream); }
.sh-catalog__nav--prev { left: 1rem; }
.sh-catalog__nav--next { right: 1rem; }

/* Progress dots — a wide bar marks the active unit */
.sh-catalog__dots {
  margin-top: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.sh-catalog__dot { padding: 0.25rem; }
.sh-catalog__dot span {
  display: block;
  height: 1px;
  width: 1rem;
  background-color: rgba(245, 242, 237, 0.25);
  transition: width var(--dur-base) ease, background-color var(--dur-base) ease;
}
.sh-catalog__dot:hover span { background-color: rgba(245, 242, 237, 0.5); }
.sh-catalog__dot[aria-current="true"] span { width: 2rem; background-color: var(--color-cream); }

/* =============================================================================
   MILESTONE 4 — global backdrop, 04 Gallery, Surrounding, 05 Location, lightbox
   Measured from the reference at 1440×900 and 390×844 (tools/probe-m4*.mjs).
   ========================================================================== */

/* -----------------------------------------------------------------------------
   Global decorative backdrop
   The reference's first child of <main>: coloured glows plus four map photos at
   7–8% opacity in luminosity blend. Very subtle, but it is what stops the dark
   background reading as flat black.
   -------------------------------------------------------------------------- */
main { position: relative; background-color: var(--color-bg); overflow-x: hidden; }

.sh-backdrop {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.sh-backdrop__glow { position: absolute; border-radius: 50%; }
.sh-backdrop__layer {
  position: absolute;
  pointer-events: none;
  mix-blend-mode: luminosity;
}
.sh-backdrop__layer img { width: 100%; height: auto; display: block; }
.sh-backdrop__layer span { position: absolute; inset: 0; display: block; }

/* Sections must paint above the backdrop */
main > * { position: relative; z-index: 1; }

/* -----------------------------------------------------------------------------
   04 — Gallery (also hosts the Surrounding block)
   -------------------------------------------------------------------------- */
.sh-gallery { position: relative; padding-bottom: 5rem; }

.sh-gallery__head {
  max-width: var(--container-max);
  margin-inline: auto;
  margin-bottom: 2.5rem;              /* 40px */
  padding-inline: var(--container-pad);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}
.sh-gallery__heading { display: flex; flex-direction: column; gap: 0.75rem; }
.sh-gallery__title {
  font-family: var(--font-serif);
  font-size: 2.25rem;
  line-height: 1.05;
  color: var(--color-cream);
}
/* "Drag to explore" — desktop only, as on the reference */
.sh-gallery__hint {
  display: none;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-faint);
  font-family: var(--font-sans);
  font-size: 0.625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* Horizontal drag rail. Aligns its first card to the 1600px container while the
   rail itself bleeds to the viewport edge. */
.sh-rail {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
  padding-left: max(var(--container-pad), calc((100vw - var(--container-max)) / 2 + var(--container-pad-md)));
  -webkit-overflow-scrolling: touch;
}
.sh-rail::-webkit-scrollbar { display: none; }
.sh-rail.is-dragging { cursor: grabbing; scroll-behavior: auto; }
.sh-rail.is-dragging * { pointer-events: none; }
/* trailing breathing room so the last card is not flush to the edge */
.sh-rail__end { flex-shrink: 0; width: 1.5rem; }

.sh-facility {
  position: relative;
  flex-shrink: 0;
  width: 300px;
  height: 400px;
  border-radius: var(--radius-card);
  overflow: hidden;
  cursor: inherit;
  text-align: left;
}
.sh-facility img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
.sh-facility:hover img { transform: scale(1.05); }

.sh-facility__scrim {
  position: absolute;
  inset: 0;
  background-color: rgba(10, 10, 10, 0.2);
  transition: background-color var(--dur-base) ease;
}
.sh-facility:hover .sh-facility__scrim { background-color: rgba(10, 10, 10, 0.1); }
.sh-facility__fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 10, 10, 0.9) 0%, rgba(10, 10, 10, 0.2) 50%, transparent 100%);
}

/* expand badge — fades in on hover */
.sh-facility__badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 1px solid var(--color-faint);
  background-color: rgba(10, 10, 10, 0.4);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(245, 242, 237, 0.7);
  opacity: 0;
  transform: scale(0.85);
  transition: opacity var(--dur-fast) ease, transform var(--dur-fast) ease;
}
.sh-facility:hover .sh-facility__badge,
.sh-facility:focus-visible .sh-facility__badge { opacity: 1; transform: scale(1); }

.sh-facility__caption { position: absolute; inset: auto 0 0 0; padding: 1.5rem; }
.sh-facility__eyebrow {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.5625rem;               /* 9px */
  line-height: 1.5;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(245, 242, 237, 0.5);
  margin-bottom: 0.375rem;
}
.sh-facility__name {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.5rem;                  /* 24px */
  line-height: 1.333;
  color: var(--color-cream);
}

/* -----------------------------------------------------------------------------
   Surrounding Facilities slider (nested inside #gallery)
   -------------------------------------------------------------------------- */
.sh-surround {
  max-width: var(--container-max);
  margin-inline: auto;
  margin-top: 4rem;                   /* 64px */
  padding-inline: var(--container-pad);
}
.sh-surround__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 2rem;
}
.sh-surround__eyebrow { margin-bottom: 0.5rem; }
.sh-surround__title {
  font-family: var(--font-serif);
  font-size: 1.875rem;                /* 30px */
  line-height: 1.05;
  color: var(--color-cream);
}
.sh-surround__count {
  font-family: var(--font-sans);
  font-size: 0.625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-faint);
  font-variant-numeric: tabular-nums;
}

/* Below md: image on its own line, then a centred [prev · dots · next] row.
   From md: [prev] [viewport] [next] on one line with the dots underneath.
   One markup serves both — flex wrapping plus explicit order does the moving. */
.sh-surround__slider {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  column-gap: 1rem;
  row-gap: 1.25rem;
  touch-action: pan-y;
}

.sh-surround__viewport { order: 1; flex: 0 0 100%; overflow: hidden; }
.sh-surround__nav--prev { order: 2; }
.sh-surround__dots      { order: 3; }
.sh-surround__nav--next { order: 4; }

.sh-surround__nav {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--color-border-strong);
  background-color: rgba(255, 255, 255, 0.05);
  color: rgba(245, 242, 237, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--dur-fast) ease, color var(--dur-fast) ease;
}
.sh-surround__nav svg { width: 14px; height: 14px; }
.sh-surround__nav:hover { border-color: rgba(245, 242, 237, 0.6); color: var(--color-cream); }

.sh-surround__track {
  /* one slide fills the viewport on mobile; from md it shrinks to 90% so the
     neighbouring slides peek in at the edges */
  --surround-slide: 100%;
  --surround-lead: 0%;
  display: flex;
  gap: 20px;
  transform: translateX(calc(var(--surround-lead) - var(--surround-index, 0) * (var(--surround-slide) + 20px)));
  transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}
.sh-surround__slide {
  flex-shrink: 0;
  width: var(--surround-slide);
  border-radius: var(--radius-card);
  overflow: hidden;
  opacity: 0.4;
  transform: scale(0.97);
  transition: opacity 0.5s ease, transform 0.5s ease;
  cursor: pointer;
}
.sh-surround__slide.is-current { opacity: 1; transform: scale(1); cursor: zoom-in; }
.sh-surround__slide img { width: 100%; height: auto; display: block; }

.sh-surround__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

/* -----------------------------------------------------------------------------
   05 — Location
   -------------------------------------------------------------------------- */
.sh-location { position: relative; padding-top: 1rem; padding-bottom: 5rem; }
.sh-location__grid { display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: start; }
.sh-location__map { position: relative; }
/* static image, not an interactive embed (PRD §14) */
.sh-location__map img { width: 100%; height: auto; display: block; opacity: 0.8; }

.sh-location__copy { display: flex; flex-direction: column; gap: 2rem; }
.sh-location__block {
  padding-left: var(--container-pad);
  padding-right: max(var(--container-pad), calc((100vw - var(--container-max)) / 2 + var(--container-pad-md)));
}
.sh-location__intro { display: flex; flex-direction: column; gap: 1rem; }
.sh-location__title {
  font-family: var(--font-serif);
  font-size: 2.25rem;
  line-height: 1.05;
  color: var(--color-cream);
}
.sh-location__lead {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.625;
  color: var(--color-subtle);
  max-width: 24rem;                   /* 384px */
}

/* Accordion */
.sh-acc__item { border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
.sh-acc__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0;
  text-align: left;
}
.sh-acc__label {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  line-height: 1.4285714;             /* 20px — Tailwind text-sm, not the inherited 1.5 */
  letter-spacing: 0.025em;
  color: var(--color-muted);
  transition: color var(--dur-fast) ease;
}
.sh-acc__trigger:hover .sh-acc__label { color: var(--color-cream); }
.sh-acc__icon {
  flex-shrink: 0;
  margin-left: 1rem;
  display: flex;
  color: var(--color-faint);
  /* the plus turns into a cross when the panel opens */
  transition: transform var(--dur-fast) ease, color var(--dur-fast) ease;
}
.sh-acc__trigger:hover .sh-acc__icon { color: var(--color-muted); }
.sh-acc__trigger[aria-expanded="true"] .sh-acc__label,
.sh-acc__trigger[aria-expanded="true"] .sh-acc__icon { color: var(--color-gold); }
.sh-acc__trigger[aria-expanded="true"] .sh-acc__icon { transform: rotate(45deg); }

.sh-acc__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 300ms var(--ease-out);
}
.sh-acc__panel.is-open { grid-template-rows: 1fr; }
.sh-acc__panel > div { overflow: hidden; }
.sh-acc__panel p {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  line-height: 1.625;
  color: var(--color-subtle);
  padding-bottom: 1rem;
}

/* -----------------------------------------------------------------------------
   Lightbox — shared by the gallery and the surrounding slider
   -------------------------------------------------------------------------- */
.sh-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  background-color: rgba(10, 10, 10, 0.92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  opacity: 0;
  transition: opacity var(--dur-fast) ease;
}
.sh-lightbox[hidden] { display: none; }
.sh-lightbox.is-open { opacity: 1; }

.sh-lightbox__panel {
  position: relative;
  width: 100%;
  max-width: 56rem;                   /* 896px — reference max-w-4xl */
  border-radius: var(--radius-card);
  overflow: hidden;
  background-color: var(--color-bg);
}
.sh-lightbox__media { position: relative; width: 100%; height: clamp(280px, 55vh, 560px); }
.sh-lightbox__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sh-lightbox__media::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 6rem;
  background: linear-gradient(to top, rgba(10, 10, 10, 0.8), transparent);
  pointer-events: none;
}

.sh-lightbox__bar {
  background-color: rgba(255, 255, 255, 0.05);
  border-top: 1px solid var(--color-border);
  padding: 20px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.sh-lightbox__eyebrow {
  font-family: var(--font-sans);
  font-size: 0.5625rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(245, 242, 237, 0.35);
  margin-bottom: 0.25rem;
}
.sh-lightbox__title { font-family: var(--font-serif); font-size: 1.5rem; line-height: 1.333; color: var(--color-cream); }
.sh-lightbox__controls { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
.sh-lightbox__count {
  font-family: var(--font-sans);
  font-size: 0.625rem;
  color: var(--color-faint);
  padding-inline: 0.25rem;
  font-variant-numeric: tabular-nums;
}

.sh-icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--color-border-strong);
  color: rgba(245, 242, 237, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--dur-fast) ease, color var(--dur-fast) ease;
}
.sh-icon-btn:hover { border-color: rgba(245, 242, 237, 0.6); color: var(--color-cream); }

.sh-lightbox__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background-color: rgba(10, 10, 10, 0.6);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

body.sh-lightbox-open { overflow: hidden; }

/* =============================================================================
   MILESTONE 5 — 06 Testimonials, contact, closing CTA, footer, floating CTAs
   Measured from the reference at 1440×900 and 390×844 (tools/probe-m5.mjs).
   ========================================================================== */

/* -----------------------------------------------------------------------------
   06 — Testimonials
   -------------------------------------------------------------------------- */
.sh-testimonials {
  position: relative;
  margin-top: -2.5rem;                /* -40px */
  padding-bottom: 5rem;
  overflow: hidden;
}
.sh-testimonials__grid { display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: start; }

.sh-testimonials__copy {
  order: 2;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  padding-right: var(--container-pad);
  padding-left: max(var(--container-pad), calc((100vw - var(--container-max)) / 2 + var(--container-pad-md)));
}
.sh-testimonials__head { display: flex; flex-direction: column; gap: 0.75rem; }
.sh-testimonials__title {
  font-family: var(--font-serif);
  font-size: 2.25rem;
  line-height: 1.05;
  color: var(--color-cream);
}

.sh-quote { display: flex; flex-direction: column; gap: 1.5rem; }
/* the semantic <blockquote> wrapper must not swallow the 24px rhythm the
   reference gets from its flat space-y-6 stack */
.sh-quote blockquote { display: flex; flex-direction: column; gap: 1.5rem; margin: 0; }
.sh-quote__stars { display: flex; align-items: center; gap: 0.25rem; color: var(--color-gold); }
/* oversized decorative quote mark the copy tucks up under */
.sh-quote__mark {
  font-family: var(--font-serif);
  font-size: 6rem;                    /* 96px */
  line-height: 1;
  color: rgba(245, 242, 237, 0.08);
  user-select: none;
}
.sh-quote__text {
  font-family: var(--font-serif);
  font-size: 1.25rem;                 /* 20px */
  line-height: 1.625;
  color: rgba(245, 242, 237, 0.8);
  margin-top: -2rem;
}
.sh-quote__author { display: flex; align-items: center; gap: 1rem; padding-top: 0.5rem; }
.sh-quote__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-image: linear-gradient(to bottom right, rgba(123, 51, 6, 0.5), rgba(41, 37, 36, 0.5));
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: var(--font-sans);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  color: var(--color-muted);
}
.sh-quote__name { font-family: var(--font-sans); font-size: 0.875rem; color: var(--color-cream); }
.sh-quote__unit {
  font-family: var(--font-sans);
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(245, 242, 237, 0.35);
  margin-top: 0.125rem;
}

.sh-testimonials__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.sh-testimonials__dots { display: flex; align-items: center; gap: 0.5rem; }
.sh-testimonials__arrows { display: flex; align-items: center; gap: 0.5rem; }

/* Video testimonial */
.sh-video {
  order: 1;
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-card);
  overflow: hidden;
  background-color: #000;
}
.sh-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.sh-video__fade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent 50%);
}
.sh-video__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sh-video__ring {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 1px solid rgba(245, 242, 237, 0.4);
  background-color: rgba(0, 0, 0, 0.3);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-cream);
  transition: background-color 300ms ease, border-color 300ms ease;
}
.sh-video__play:hover .sh-video__ring { background-color: rgba(245, 242, 237, 0.1); border-color: var(--color-cream); }
.sh-video__ring svg { margin-left: 6px; }
/* the big play target disappears once playback starts */
.sh-video.is-playing .sh-video__play { opacity: 0; pointer-events: none; }
.sh-video__play { transition: opacity var(--dur-fast) ease; }

.sh-video__bar {
  position: absolute;
  inset: auto 0 0 0;
  padding: 2.5rem 1.25rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.sh-video__track {
  position: relative;
  width: 100%;
  height: 4px;
  border-radius: 999px;
  background-color: rgba(245, 242, 237, 0.2);
  cursor: pointer;
}
.sh-video__fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background-color: var(--color-cream);
}
.sh-video__thumb {
  position: absolute;
  top: 50%;
  left: 0%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: var(--color-cream);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 150ms ease;
}
.sh-video__track:hover .sh-video__thumb { opacity: 1; }

.sh-video__row { display: flex; align-items: center; gap: 0.75rem; }
.sh-video__toggle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--color-faint);
  color: rgba(245, 242, 237, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: border-color var(--dur-fast) ease, color var(--dur-fast) ease;
}
.sh-video__toggle:hover { border-color: rgba(245, 242, 237, 0.6); color: var(--color-cream); }
.sh-video__toggle .sh-icon-pause { display: none; }
.sh-video.is-playing .sh-video__toggle .sh-icon-play { display: none; }
.sh-video.is-playing .sh-video__toggle .sh-icon-pause { display: block; }
.sh-video__time {
  font-family: var(--font-sans);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  color: rgba(245, 242, 237, 0.5);
  font-variant-numeric: tabular-nums;
}
/* only the separator is dimmed — the times themselves stay at 50% */
.sh-video__sep { color: rgba(245, 242, 237, 0.25); }
.sh-video__label {
  margin-left: auto;
  font-family: var(--font-sans);
  font-size: 0.5625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-faint);
}

/* -----------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */
.sh-contact { position: relative; padding-top: 0.5rem; padding-bottom: 5rem; overflow: hidden; }
.sh-contact__inner {
  padding-left: max(var(--container-pad), calc((100vw - var(--container-max)) / 2 + var(--container-pad-md)));
  padding-right: max(var(--container-pad), calc((100vw - var(--container-max)) / 2 + var(--container-pad-md)));
}
.sh-contact__grid { display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: start; }
.sh-contact__copy { display: flex; flex-direction: column; gap: 2rem; }
.sh-contact__head { display: flex; flex-direction: column; gap: 1rem; }
.sh-contact__title {
  font-family: var(--font-serif);
  font-size: 2.25rem;
  line-height: 1.05;
  color: var(--color-cream);
}
.sh-contact__lead {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  line-height: 1.625;
  color: rgba(245, 242, 237, 0.5);
  max-width: 24rem;
}

.sh-contact__list { display: flex; flex-direction: column; gap: 1.25rem; }
.sh-contact__item { display: flex; align-items: center; gap: 1rem; }
.sh-contact__icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(245, 242, 237, 0.15);
  color: var(--color-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: border-color var(--dur-fast) ease, color var(--dur-fast) ease;
}
a.sh-contact__item:hover .sh-contact__icon { border-color: rgba(245, 242, 237, 0.5); color: var(--color-cream); }
/* these sit inside an <a>, so they are spans and must be told to stack */
.sh-contact__item > span:last-child { display: block; }
.sh-contact__label,
.sh-contact__value { display: block; }
.sh-contact__label {
  font-family: var(--font-sans);
  font-size: 0.5625rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-faint);
  margin-bottom: 0.125rem;
}
.sh-contact__value {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  color: rgba(245, 242, 237, 0.7);
  transition: color var(--dur-fast) ease;
}
a.sh-contact__item:hover .sh-contact__value,
.sh-contact__value:hover { color: var(--color-cream); }

/* -----------------------------------------------------------------------------
   Contact form — no backend; it composes a WhatsApp message (PRD §17)
   -------------------------------------------------------------------------- */
.sh-form {
  background-color: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--radius-card);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.sh-field { display: flex; flex-direction: column; gap: 0.375rem; }
.sh-field__label {
  font-family: var(--font-sans);
  font-size: 0.5625rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(245, 242, 237, 0.35);
}
.sh-field__control {
  width: 100%;
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 0.75rem;
  padding: 14px 16px;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  line-height: 1.4285714;             /* 20px — Tailwind text-sm, not the inherited 1.5 */
  color: var(--color-cream);
  transition: border-color var(--dur-fast) ease;
}
.sh-field__control::placeholder { color: rgba(245, 242, 237, 0.25); }
.sh-field__control:focus { outline: none; border-color: rgba(201, 169, 110, 0.5); }
.sh-field__control:focus-visible { outline: none; }
/* rows="4" governs the height; a min-height would make it taller than the reference */
textarea.sh-field__control { resize: vertical; }

/* native select, styled to match the reference's closed control */
select.sh-field__control {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 42px;
  color: var(--color-cream);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23f5f2ed' stroke-opacity='0.3' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}
select.sh-field__control:invalid { color: rgba(245, 242, 237, 0.25); }
select.sh-field__control option { background-color: #111; color: var(--color-cream); }

/* inline validation — no alert() (PRD §18) */
.sh-field__error {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  line-height: 1.5;
  color: #e0806a;
}
/* an empty error slot must not consume a flex gap */
.sh-field__error:empty { display: none; }
.sh-field.is-invalid .sh-field__control { border-color: rgba(224, 128, 106, 0.6); }

.sh-form__submit {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 16px 28px;
  border-radius: 0.75rem;
  background-color: var(--color-cream);
  color: var(--color-bg);
  margin-top: 0.25rem;
  transition: background-color 300ms ease;
}
.sh-form__submit:hover { background-color: var(--color-gold); }

/* -----------------------------------------------------------------------------
   Closing CTA
   -------------------------------------------------------------------------- */
.sh-closing { position: relative; overflow: hidden; padding-block: 5rem; }
.sh-closing__media { position: absolute; inset: 0; }
.sh-closing__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  transform: scaleX(-1);              /* reference mirrors the photo */
}
.sh-closing__wash,
.sh-closing__fade { position: absolute; inset: 0; pointer-events: none; }
.sh-closing__wash { background: linear-gradient(to right, #0a0a0a 0%, #0a0a0a 20%, rgba(10, 10, 10, 0.6) 55%, transparent 100%); }
.sh-closing__fade { background: linear-gradient(to top, #0a0a0a 0%, rgba(10, 10, 10, 0.5) 30%, transparent 70%); }

.sh-closing__inner { position: relative; z-index: 10; height: 100%; display: flex; align-items: center; }
.sh-closing__copy {
  max-width: 42rem;
  padding-right: 2rem;
  padding-left: max(2rem, calc((100vw - var(--container-max)) / 2 + 3.5rem));
}
.sh-closing__title {
  font-family: var(--font-serif);
  font-size: 2.25rem;
  line-height: 1.05;
  color: var(--color-cream);
  margin-bottom: 1rem;
}
.sh-closing__lead {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  line-height: 1.625;
  color: rgba(245, 242, 237, 0.55);
  margin-bottom: 2rem;
  max-width: 24rem;
}
.sh-closing__actions { display: flex; flex-direction: column; gap: 0.75rem; }

.sh-btn--wide {
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  padding: 16px 28px;
  min-height: 0;
}
.sh-btn--wide.sh-btn--primary:hover { background-color: var(--color-gold); color: var(--color-bg); }
.sh-btn--wide.sh-btn--outline { border-color: var(--color-faint); color: rgba(245, 242, 237, 0.7); }
.sh-btn--wide.sh-btn--outline:hover { border-color: var(--color-cream); color: var(--color-cream); }

/* -----------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.sh-footer {
  position: relative;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background-color: var(--color-bg);
}
/* gold hairline centred on the top edge */
.sh-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50% 0;
  width: 33.333%;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(201, 169, 110, 0.3), transparent);
}
.sh-footer__inner { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-pad); }
.sh-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  padding-block: 4rem;
}
.sh-footer__col { display: flex; flex-direction: column; gap: 1.25rem; }
.sh-footer__heading {
  font-family: var(--font-sans);
  font-size: 0.5625rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(245, 242, 237, 0.25);
}
.sh-footer__brand { display: block; }
.sh-footer__brand a { display: inline-block; }
.sh-footer__logo { height: 48px; width: auto; object-fit: contain; }
.sh-footer__blurb {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  line-height: 1.625;
  color: var(--color-subtle);
  max-width: 240px;
}
.sh-footer__rows { display: flex; flex-direction: column; gap: 0.75rem; padding-top: 0.25rem; }
.sh-footer__row { display: flex; align-items: flex-start; gap: 0.75rem; }
.sh-footer__badge {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(245, 242, 237, 0.15);
  color: var(--color-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sh-footer__rowbody { padding-top: 0.25rem; line-height: 1.375; }
.sh-footer__name { font-family: var(--font-sans); font-size: 0.75rem; line-height: 1.3333333; color: rgba(245, 242, 237, 0.7); font-weight: 500; }
.sh-footer__note { font-family: var(--font-sans); font-size: 10.5px; line-height: 1.375; color: rgba(245, 242, 237, 0.35); max-width: 210px; }
/* Tailwind text-xs is 12px/16px — the inherited 1.5 would add 2px per line */
.sh-footer__text { font-family: var(--font-sans); font-size: 0.75rem; line-height: 1.3333333; color: var(--color-muted); }
a.sh-footer__text:hover { color: var(--color-cream); }

.sh-footer__social { display: flex; align-items: center; gap: 0.75rem; padding-top: 0.25rem; }
.sh-footer__social a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(245, 242, 237, 0.15);
  color: var(--color-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--dur-fast) ease, color var(--dur-fast) ease;
}
.sh-footer__social a:hover { border-color: rgba(245, 242, 237, 0.5); color: var(--color-cream); }

.sh-footer__nav { display: flex; flex-direction: column; gap: 0.75rem; }
.sh-footer__link {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(245, 242, 237, 0.45);
  width: fit-content;
  transition: color var(--dur-fast) ease;
}
.sh-footer__link:hover { color: var(--color-cream); }

.sh-footer__sub {
  font-family: var(--font-sans);
  font-size: 0.5625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245, 242, 237, 0.25);
  margin-bottom: 0.375rem;            /* 6px — Developer */
}
/* the reference spaces each sub-label differently; matched individually */
.sh-footer__sub--2 { margin-bottom: 0.125rem; }       /* Location */
.sh-footer__sub--4 { margin-bottom: 0.25rem; }        /* Marketing Office, Email, Phone */
.sh-footer__sub--8 { margin-bottom: 0.5rem; }         /* Towers */
.sh-footer__cta {
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  padding: 12px 20px;
  width: fit-content;
  min-height: 0;
  margin-top: 0.25rem;                /* reference mt-1, on top of the column gap */
  border-color: rgba(245, 242, 237, 0.3);
  color: rgba(245, 242, 237, 0.7);
}
.sh-footer__cta:hover { background-color: var(--color-cream); color: var(--color-bg); border-color: var(--color-cream); }
.sh-footer__devlogo { height: 20px; width: auto; object-fit: contain; filter: brightness(0) invert(1); opacity: 0.7; }

.sh-phase { display: flex; flex-direction: column; gap: 0.125rem; }
.sh-phase__head { display: flex; align-items: center; gap: 0.5rem; }
.sh-phase__label {
  font-family: var(--font-sans);
  font-size: 0.5625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-faint);
}
.sh-phase__pill {
  font-family: var(--font-sans);
  font-size: 0.5rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(201, 169, 110, 0.6);
  border: 1px solid rgba(201, 169, 110, 0.3);
  padding: 2px 6px;
  border-radius: 999px;
}
.sh-phase__towers { font-family: var(--font-sans); font-size: 0.6875rem; color: var(--color-muted); }
.sh-phase__hand { font-family: var(--font-sans); font-size: 0.5625rem; color: var(--color-faint); }

.sh-footer__legal {
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  column-gap: 1.5rem;
  row-gap: 0.5rem;
}
.sh-footer__legal a {
  font-family: var(--font-sans);
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(245, 242, 237, 0.45);
  transition: color var(--dur-fast) ease;
}
.sh-footer__legal a:hover { color: var(--color-cream); }

.sh-footer__disclaimer {
  padding-top: 1.25rem;
  text-align: center;
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  line-height: 1.625;
  color: rgba(245, 242, 237, 0.35);
  max-width: 48rem;
  margin-inline: auto;
  padding-inline: 0.5rem;
}
.sh-footer__disclaimer a { color: rgba(245, 242, 237, 0.55); text-decoration: underline; text-underline-offset: 2px; }
.sh-footer__disclaimer a:hover { color: var(--color-cream); }

.sh-footer__copyright {
  padding-block: 1.5rem;
  margin-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
}
.sh-footer__copyright p {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  line-height: 1.3333333;
  color: rgba(245, 242, 237, 0.55);
  letter-spacing: 0.025em;
  text-align: center;
}

/* -----------------------------------------------------------------------------
   Floating CTAs — bottom-right stack (PRD §19 `sticky-mobile`)
   -------------------------------------------------------------------------- */
.sh-float {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}
.sh-float a {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -4px rgba(0, 0, 0, 0.3);
  transition: transform var(--dur-fast) ease, opacity var(--dur-fast) ease;
}
.sh-float a:hover { transform: scale(1.05); }
.sh-float__wa { background-color: #25d366; }
/* Instagram brand gradient */
.sh-float__ig {
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
}
/* WhatsApp only appears once the hero is behind you, as on the reference */
.sh-float__wa { opacity: 0; visibility: hidden; transform: scale(0.8); }
.sh-float.is-past-hero .sh-float__wa { opacity: 1; visibility: visible; transform: scale(1); }

/* =============================================================================
   MILESTONE 6 — About Us & legal pages
   One template for all four pages. Measured from the reference at 1440×900 and
   390×844 (tools/probe-m6.mjs); prose rules transcribed from its .article-body.
   ========================================================================== */

.sh-page { padding-top: 7rem; padding-bottom: 6rem; }   /* 112 / 96px — clears the fixed header */

/* Narrower than the homepage: a 1100px measure instead of 1600px */
.sh-page__inner {
  padding-left: max(var(--container-pad), calc((100vw - 1100px) / 2 + var(--container-pad-md)));
  padding-right: max(var(--container-pad), calc((100vw - 1100px) / 2 + var(--container-pad-md)));
}

.sh-page__head { margin-bottom: 2.5rem; }
.sh-page__eyebrow { margin-bottom: 0.75rem; }
.sh-page__title {
  font-family: var(--font-serif);
  font-size: 2.25rem;                 /* 36px */
  line-height: 1.04;
  color: var(--color-cream);
}
.sh-page__title em { color: var(--color-gold); font-style: italic; }
.sh-page__lead {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  line-height: 1.625;
  color: rgba(245, 242, 237, 0.55);
  max-width: 42rem;                   /* 672px */
  margin-top: 1.25rem;
}
.sh-page__updated {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  line-height: 1.5;
  color: var(--color-faint);
  margin-top: 1.25rem;
}
.sh-page__rule { border-top: 1px solid rgba(255, 255, 255, 0.06); margin-bottom: 2.5rem; }

/* -----------------------------------------------------------------------------
   Prose — long-form legal copy
   -------------------------------------------------------------------------- */
.sh-prose {
  max-width: 48rem;                   /* 768px */
  font-family: var(--font-sans);
  font-size: 0.9375rem;               /* 15px */
  line-height: 1.85;
  color: rgba(245, 242, 237, 0.65);
}
.sh-prose p { margin-bottom: 1.25rem; }
.sh-prose h2 {
  font-family: var(--font-serif);
  font-size: 1.75rem;                 /* 28px */
  line-height: 1.15;
  color: var(--color-cream);
  margin-top: 2.5rem;
  margin-bottom: 1rem;
}
.sh-prose h3 {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  line-height: 1.2;
  color: var(--color-cream);
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}
.sh-prose strong { color: rgba(245, 242, 237, 0.9); font-weight: 600; }
.sh-prose em { color: rgba(245, 242, 237, 0.75); font-style: italic; }
/* main.css strips list markers globally; long-form lists need them back */
.sh-prose ul { list-style: disc outside; padding-left: 1.5rem; margin-bottom: 1.25rem; }
.sh-prose ol { list-style: decimal outside; padding-left: 1.5rem; margin-bottom: 1.25rem; }
.sh-prose li { margin-bottom: 0.4rem; }
.sh-prose a { color: var(--color-gold); text-decoration: none; }
.sh-prose a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* Phone numbers are plain text on the reference. They are dialable links here (PRD §39),
   but must look exactly as before: no gold, no underline, wherever they appear. */
.sh-tel,
.sh-prose .sh-tel,
.sh-prose .sh-tel:hover { color: inherit; text-decoration: none; }
.sh-prose blockquote {
  color: rgba(245, 242, 237, 0.5);
  border-left: 2px solid var(--color-gold);
  margin: 1.5rem 0;
  padding-left: 1.25rem;
  font-style: italic;
}
.sh-prose hr { border: 0; border-top: 1px solid rgba(255, 255, 255, 0.08); margin: 2rem 0; }

/* -----------------------------------------------------------------------------
   About Us — business identity card (sits outside the prose rhythm)
   -------------------------------------------------------------------------- */
.sh-idcard {
  margin-top: 1rem;
  padding: 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-card);
  background-color: rgba(255, 255, 255, 0.02);
}
.sh-idcard__row {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding-block: 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.sh-idcard__row:last-child { border-bottom: 0; }
.sh-idcard__label {
  flex-shrink: 0;
  padding-top: 0.125rem;
  font-family: var(--font-sans);
  font-size: 0.625rem;
  /* no line-height: inherits the prose's 1.85, exactly as on the reference */
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(245, 242, 237, 0.35);
}
.sh-idcard__value {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  line-height: 1.625;
  color: rgba(245, 242, 237, 0.75);
}
.sh-idcard__note { font-size: 0.75rem; line-height: 1.3333333; color: rgba(245, 242, 237, 0.45); }

/* -----------------------------------------------------------------------------
   Disclaimer — gold "Important Notice" callout
   -------------------------------------------------------------------------- */
.sh-notice {
  padding: 1.5rem;
  margin-bottom: 2.5rem;
  border: 1px solid rgba(201, 169, 110, 0.25);
  border-radius: var(--radius-card);
  background-color: rgba(201, 169, 110, 0.05);
}
.sh-notice__eyebrow {
  font-family: var(--font-sans);
  font-size: 0.625rem;
  /* no line-height: inherits the prose's 1.85, exactly as on the reference */
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(201, 169, 110, 0.7);
  margin-bottom: 0.75rem;
}
.sh-notice__text {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  line-height: 1.625;
  color: rgba(245, 242, 237, 0.8);
  margin-bottom: 1rem;
}
.sh-notice__sign {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  line-height: 1.625;
  color: rgba(245, 242, 237, 0.55);
  font-style: italic;
  margin-bottom: 0;
}