/* =========================================================================
   Desert Premier Wellness
   All design decisions are centralised in the :root token block below.
   Change a token here and it propagates across every page.
   ========================================================================= */

/* -------------------------------------------------------------------------
   0. FONTS — self-hosted
   Source Serif 4 and Source Sans 3, latin subset, two weights each. Four
   files, 74 KB in total, served from this site's own origin.

   They are self-hosted rather than loaded from Google Fonts so that the site
   contacts no third party at all. A visitor's browser now talks only to this
   server. Both faces are SIL Open Font License; the licences are in /fonts/.

   To change or add a weight: fetch it from https://fonts.google.com or the
   @fontsource npm packages, drop the .woff2 into /fonts/, and add a matching
   @font-face block here.
   ---------------------------------------------------------------------- */
@font-face {
  font-family: "Source Serif 4";
  src: url("/fonts/source-serif-4-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("/fonts/source-serif-4-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("/fonts/source-sans-3-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("/fonts/source-sans-3-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* -------------------------------------------------------------------------
   1. TOKENS
   ---------------------------------------------------------------------- */
:root {
  /* --- Colour ----------------------------------------------------------
     Derived from the Desert Premier Wellness logo. The brown and the gold
     below are sampled straight from the artwork and are exact.

     Brand gold is brilliant on dark and nearly invisible on light: #FADA37
     against the paper background is 1.3:1. So gold is used at full strength
     only on the brown bands and inside the logo tile, and --gold-rule is the
     deepened version that holds up as a mark on light backgrounds.
     ------------------------------------------------------------------- */
  --paper:        #FAF6EF;   /* page background, warm paper                */
  --paper-alt:    #F1EADE;   /* alternating band, warm sand                */
  --paper-sink:   #3A3132;   /* dark band and footer. EXACT brand brown.   */

  --ink:          #2C2526;   /* primary text, warm near-black              */
  --ink-2:        #5A4F51;   /* secondary text                             */
  --ink-3:        #665B5D;   /* tertiary / meta text                       */
  --ink-invert:   #F3F0EC;   /* text on brown bands                        */
  --ink-invert-2: #C6BDB8;

  --gold:         #FADA37;   /* EXACT brand gold. Dark backgrounds only.   */
  --gold-rule:    #B8860B;   /* deepened gold for rules on light paper     */

  --accent:       #6E4A16;   /* bronze. Links and quiet interactive text.  */
  --accent-dark:  #523608;   /* hover / pressed                            */
  --accent-soft:  #F6EEDC;   /* warm cream panel                           */

  --line:         #E7E0D7;   /* hairlines                                  */
  --line-strong:  #D2C9BC;

  /* --- Typography ------------------------------------------------------ */
  --font-display: "Source Serif 4", "Iowan Old Style", "Palatino Linotype",
                  Palatino, Georgia, "Times New Roman", serif;
  --font-body:    "Source Sans 3", -apple-system, BlinkMacSystemFont,
                  "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --step--1: clamp(0.875rem, 0.855rem + 0.10vw, 0.9375rem);
  --step-0:  clamp(1.0rem,   0.968rem + 0.16vw, 1.0938rem);
  --step-1:  clamp(1.125rem, 1.061rem + 0.32vw, 1.3125rem);
  --step-2:  clamp(1.3125rem, 1.185rem + 0.64vw, 1.625rem);
  --step-3:  clamp(1.5rem,   1.276rem + 1.12vw, 2.0625rem);
  --step-4:  clamp(1.875rem, 1.492rem + 1.91vw, 2.8125rem);
  --step-5:  clamp(2.25rem,  1.643rem + 3.03vw, 3.75rem);

  --lh-tight: 1.12;
  --lh-head:  1.2;
  --lh-body:  1.62;

  --measure:  66ch;   /* comfortable prose width */

  /* --- Space (4px base, roughly a 1.5 ratio) --------------------------- */
  --s-1:  0.25rem;
  --s-2:  0.5rem;
  --s-3:  0.75rem;
  --s-4:  1rem;
  --s-5:  1.5rem;
  --s-6:  2rem;
  --s-7:  3rem;
  --s-8:  4rem;
  --s-9:  6rem;
  --s-10: 8rem;

  /* Vertical rhythm for major page sections */
  --section-y: clamp(3.5rem, 2.2rem + 5vw, 7rem);

  /* --- Layout ---------------------------------------------------------- */
  --wrap:        1140px;
  --wrap-narrow: 780px;
  --gutter:      clamp(1.25rem, 0.85rem + 2vw, 2.5rem);

  --radius:    4px;
  --radius-lg: 8px;

  --header-h: 72px;
}

/* -------------------------------------------------------------------------
   2. RESET / BASE
   ---------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--lh-head);
  color: var(--ink);
  margin: 0 0 var(--s-4);
  letter-spacing: -0.011em;
  text-wrap: balance;
}

h1 { font-size: var(--step-5); line-height: var(--lh-tight); letter-spacing: -0.021em; }
h2 { font-size: var(--step-4); letter-spacing: -0.016em; }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

p, ul, ol, dl { margin: 0 0 var(--s-4); }
p { max-width: var(--measure); text-wrap: pretty; }

a { color: var(--accent); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--accent-dark); }

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

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: var(--s-7) 0;
}

strong, b { font-weight: 600; }

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

::selection { background: var(--accent); color: #fff; }

/* -------------------------------------------------------------------------
   3. LAYOUT PRIMITIVES
   ---------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: var(--wrap-narrow); }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: calc(var(--section-y) * 0.62); }

.band-alt  { background: var(--paper-alt); }
.band-soft { background: var(--accent-soft); }

.band-sink {
  background: var(--paper-sink);
  color: var(--ink-invert);
}
.band-sink h1, .band-sink h2, .band-sink h3, .band-sink h4 { color: var(--ink-invert); }
.band-sink p, .band-sink li { color: var(--ink-invert-2); }
.band-sink a { color: #fff; }
.band-sink .eyebrow { color: var(--ink-invert-2); }
.band-sink .rule::before { background: var(--gold); }

.stack > * + * { margin-top: var(--s-4); }
.stack-lg > * + * { margin-top: var(--s-6); }

.grid { display: grid; gap: var(--s-6); }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
@media (min-width: 720px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
}

/* Two-column editorial split: heading rail + content */
.split { display: grid; gap: var(--s-6); }
@media (min-width: 900px) {
  .split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
    gap: clamp(2rem, 1rem + 4vw, 5rem);
  }
  .split__rail { position: sticky; top: calc(var(--header-h) + 2rem); align-self: start; }
}

/* -------------------------------------------------------------------------
   4. TYPOGRAPHIC UTILITIES
   ---------------------------------------------------------------------- */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 var(--s-3);
  display: block;
}

.lede {
  font-size: var(--step-1);
  line-height: 1.52;
  color: var(--ink-2);
  max-width: 60ch;
}

.small { font-size: var(--step--1); color: var(--ink-2); }
.meta  { font-size: var(--step--1); color: var(--ink-3); }

.rule::before {
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  background: var(--gold-rule);
  margin-bottom: var(--s-5);
}

.u-center { text-align: center; }
.u-center p, .u-center .lede { margin-inline: auto; }
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* -------------------------------------------------------------------------
   5. BUTTONS
   ---------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 48px;
  padding: 0.75rem 1.6rem;
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.btn--primary { background: var(--paper-sink); color: var(--ink-invert); }
.btn--primary:hover { background: var(--ink); color: #fff; }

.btn--ghost {
  background: transparent;
  color: var(--accent);
  border-color: var(--line-strong);
}
.btn--ghost:hover { border-color: var(--accent); color: var(--accent-dark); }

.band-sink .btn--primary { background: var(--gold); color: var(--paper-sink); }
.band-sink .btn--primary:hover { background: #FFE569; color: var(--paper-sink); }
.band-sink .btn--ghost { color: #fff; border-color: rgba(255,255,255,0.38); }
.band-sink .btn--ghost:hover { border-color: #fff; color: #fff; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  align-items: center;
  margin-top: var(--s-6);
}

/* Quiet inline "next step" link with a chevron */
.link-next {
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 2px;
  display: inline-block;
}
.link-next:hover { border-color: var(--accent); }
.link-next::after { content: " \2192"; }

/* -------------------------------------------------------------------------
   6. HEADER / NAV
   ---------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: var(--s-4);
  top: -100px;
  z-index: 200;
  background: var(--accent);
  color: #fff;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--radius);
  text-decoration: none;
  font-weight: 600;
  transition: top 0.15s ease;
}
.skip-link:focus { top: var(--s-3); color: #fff; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  /* Solid rather than translucent. A blurred header let body text ghost
     through behind the navigation, which read as a rendering fault. */
  background: var(--paper);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}
.site-header[data-scrolled="true"] { border-bottom-color: var(--line); }

.site-header__inner {
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
}

/* Brand lockup.
   The logo mark is gold, which disappears against the paper background, so on
   light surfaces it sits inside a small tile of the brand brown. That keeps
   the artwork exactly as supplied rather than recolouring it. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: var(--ink);
  padding-block: var(--s-2);
}
.brand__tile {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 9px;
  background: var(--paper-sink);
}
.brand__tile img { width: 36px; height: 36px; }
.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__top {
  font-family: var(--font-body);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.brand__main {
  font-family: var(--font-display);
  font-size: 1.3125rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  color: var(--ink);
  margin-top: 4px;
}
.brand:hover .brand__main { color: var(--accent); }

@media (max-width: 380px) {
  .brand__tile { width: 40px; height: 40px; }
  .brand__tile img { width: 31px; height: 31px; }
  .brand__main { font-size: 1.1875rem; }
}

/* Full supplied lockup, used in the footer where the background is the
   identical brand brown so the artwork sits on it seamlessly. */
.footer__logo { width: 100%; max-width: 260px; height: auto; }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 44px;
  padding: 0 var(--s-3);
  background: none;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--ink);
  font: inherit;
  font-size: var(--step--1);
  font-weight: 600;
  cursor: pointer;
}
.nav-toggle__bars { display: block; width: 18px; height: 10px; position: relative; }
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1.5px;
  background: currentColor;
}
.nav-toggle__bars::before { top: 0; }
.nav-toggle__bars::after  { bottom: 0; }

.nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 0.4rem + 1.6vw, 2rem);
}
.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 0.4rem + 1.6vw, 2rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__link {
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-2);
  text-decoration: none;
  padding-block: var(--s-2);
  border-bottom: 2px solid transparent;
}
.nav__link:hover { color: var(--ink); }
.nav__link[aria-current="page"] { color: var(--ink); border-bottom-color: var(--gold-rule); }

.nav .btn { min-height: 42px; padding: 0.5rem 1.1rem; font-size: var(--step--1); }

@media (max-width: 899px) {
  .nav-toggle { display: inline-flex; }
  .nav {
    position: absolute;
    left: 0; right: 0; top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    padding: var(--s-3) var(--gutter) var(--s-6);
    box-shadow: 0 18px 32px -24px rgba(28, 35, 32, 0.4);
  }
  .nav[hidden] { display: none; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__link {
    display: block;
    padding: var(--s-4) 0;
    font-size: var(--step-1);
    border-bottom: 1px solid var(--line);
  }
  .nav__link[aria-current="page"] { border-bottom-color: var(--line); color: var(--accent); }
  .nav .btn { margin-top: var(--s-5); width: 100%; min-height: 50px; font-size: var(--step-0); }
}

@media (min-width: 900px) {
  .nav-toggle { display: none; }
  .nav[hidden] { display: flex; }
}

/* -------------------------------------------------------------------------
   7. HERO
   ---------------------------------------------------------------------- */
.hero {
  padding-block: clamp(3rem, 1.8rem + 5vw, 6.5rem) clamp(3rem, 2rem + 4vw, 5.5rem);
  border-bottom: 1px solid var(--line);
}
.hero__grid { display: grid; gap: clamp(2rem, 1rem + 4vw, 4rem); align-items: center; }
@media (min-width: 920px) {
  .hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.85fr); }
}
.hero h1 { margin-bottom: var(--s-5); }
.hero .lede { font-size: var(--step-2); line-height: 1.42; color: var(--ink-2); max-width: 34ch; }
@media (max-width: 919px) {
  .hero .lede { max-width: 50ch; }
}
.hero__figure { position: relative; }
/* The portrait is used at its native 2:3, uncropped, because the source is a
   tight headshot with no spare margin to crop into. On narrow screens it
   switches to 4:5 so it does not eat the whole first screen; the object-position
   keeps the face in frame through that crop. */
.hero__figure img {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  object-position: center top;
  border-radius: var(--radius-lg);
}
@media (max-width: 919px) {
  .hero__figure img { aspect-ratio: 4 / 5; object-position: center 12%; }
}

/* Home hero only. The physician stays clearly visible — this is deliberately a
   one-physician program — but the portrait is held back about a fifth so the
   first screen reads "Desert Premier Wellness, led by David Shockey, M.D."
   rather than as a personal-brand site. The physician's own page keeps the
   full-size treatment; that page is about him. */
@media (min-width: 920px) {
  .hero__grid--compact { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.72fr); }
  .hero__figure--compact img { max-width: 420px; margin-inline: auto; }
}
@media (max-width: 919px) {
  .hero__figure--compact img { max-width: 220px; margin-inline: auto; }
}

/* Page header for interior pages */
.page-head {
  padding-block: clamp(2.5rem, 1.6rem + 3.6vw, 5rem) clamp(2rem, 1.4rem + 2.6vw, 3.5rem);
  border-bottom: 1px solid var(--line);
}
.page-head h1 { font-size: var(--step-4); margin-bottom: var(--s-4); }

/* -------------------------------------------------------------------------
   8. CONTENT COMPONENTS
   ---------------------------------------------------------------------- */

/* Facts rail: small labelled figures, no boxes */
.facts {
  display: grid;
  gap: var(--s-5);
  list-style: none;
  margin: 0;
  padding: 0;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .facts { grid-template-columns: repeat(3, 1fr); } }
.facts li { border-top: 1px solid var(--line); padding-top: var(--s-4); }
.facts dt, .facts__label {
  font-size: var(--step--1);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-3);
  margin-bottom: var(--s-2);
}
.facts__value {
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: 1.25;
  color: var(--ink);
}

/* Feature list with hairline separators, no bullets, no cards */
.feature-list { list-style: none; margin: 0; padding: 0; }
.feature-list > li {
  padding-block: var(--s-5);
  border-top: 1px solid var(--line);
}
.feature-list > li:last-child { border-bottom: 1px solid var(--line); }
.feature-list h3 { margin-bottom: var(--s-2); font-size: var(--step-1); }
.feature-list p { margin: 0; color: var(--ink-2); }

/* Checklist used for membership benefits */
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); }
@media (min-width: 700px) { .checklist { grid-template-columns: repeat(2, 1fr); column-gap: var(--s-7); } }
.checklist li {
  position: relative;
  padding-left: 1.9rem;
  line-height: 1.5;
  border-bottom: 1px solid var(--line);
  padding-bottom: var(--s-4);
}
.checklist li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.52em;
  width: 11px; height: 6px;
  border-left: 1.5px solid var(--accent);
  border-bottom: 1.5px solid var(--accent);
  transform: rotate(-45deg);
}

/* Assessment groups */
.assess { display: grid; gap: var(--s-6); }
@media (min-width: 760px) { .assess { grid-template-columns: repeat(2, 1fr); } }
.assess__group {
  border-top: 2px solid var(--gold-rule);
  padding-top: var(--s-4);
}
.assess__group h3 {
  font-size: var(--step-1);
  margin-bottom: var(--s-3);
}
.assess__group ul { list-style: none; margin: 0; padding: 0; }
.assess__group li {
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink-2);
  font-size: var(--step-0);
}
.assess__group li:last-child { border-bottom: 0; }

/* Numbered steps */
.steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; gap: var(--s-5); }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(3, 1fr); gap: var(--s-6); } }
.steps li { counter-increment: step; border-top: 1px solid var(--line); padding-top: var(--s-4); }
.steps li::before {
  content: counter(step);
  display: block;
  font-family: var(--font-display);
  font-size: var(--step-2);
  color: var(--accent);
  margin-bottom: var(--s-2);
}
.steps h3 { font-size: var(--step-1); margin-bottom: var(--s-2); }
.steps p { margin: 0; color: var(--ink-2); font-size: var(--step-0); }

/* Pricing block */
.price-block {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 1rem + 2vw, 2.75rem);
  background: var(--paper);
}
.price-block__figure {
  font-family: var(--font-display);
  font-size: var(--step-4);
  line-height: 1;
  color: var(--ink);
  margin-bottom: var(--s-3);
}
.price-block__figure span {
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 400;
  color: var(--ink-2);
  letter-spacing: 0;
}

/* Disclosure / compliance panel */
.disclosure {
  border-left: 3px solid var(--gold-rule);
  padding: var(--s-2) 0 var(--s-2) var(--s-5);
  background: transparent;
}
.disclosure p { color: var(--ink-2); }
.disclosure p:last-child { margin-bottom: 0; }

/* Quote / positioning statement */
.statement {
  font-family: var(--font-display);
  font-size: var(--step-3);
  line-height: 1.36;
  letter-spacing: -0.012em;
  max-width: 24ch;
  margin: 0;
}

/* Portrait figure */
.portrait img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-lg);
}
.portrait figcaption { margin-top: var(--s-3); font-size: var(--step--1); color: var(--ink-3); }

/* Physician bio. Deliberately a plain page: one heading, continuous prose and
   the portrait set into it, matching how the practice's previous site
   presented it. No section scaffolding here — it is a biography, not a
   structured argument. */
.bio > p { margin-bottom: var(--s-5); }
.bio__portrait { margin: 0 0 var(--s-5); }
.bio__portrait img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  display: block;
}
@media (min-width: 700px) {
  .bio__portrait {
    float: left;
    width: 272px;
    margin: 0.35rem var(--s-6) var(--s-4) 0;
    shape-outside: inset(0 round var(--radius-lg));
  }
}
.bio__founder {
  clear: both;
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
  color: var(--ink-2);
}

.figure-wide img {
  width: 100%;
  aspect-ratio: 21 / 9;   /* matches the supplied exterior photograph */
  object-fit: cover;
  border-radius: var(--radius-lg);
}

/* Credential chips */
.creds { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.creds li {
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--ink-2);
  border: 1px solid var(--line-strong);
  border-radius: 100px;
  padding: 0.3rem 0.85rem;
}

/* FAQ, native disclosure elements */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: var(--s-5) 3rem var(--s-5) 0;
  position: relative;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute;
  right: var(--s-2);
  top: 50%;
  width: 12px; height: 12px;
  border-right: 1.5px solid var(--accent);
  border-bottom: 1.5px solid var(--accent);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.2s ease;
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq__body { padding: 0 0 var(--s-5); }
.faq__body p:last-child { margin-bottom: 0; }

/* Contact rows */
.contact-list { list-style: none; margin: 0; padding: 0; }
/* Rows are <div> wrappers around a dt/dd pair inside a <dl>, which is the
   only structurally valid way to group them. Both selectors are needed. */
.contact-list li,
.contact-list > div {
  display: grid;
  gap: var(--s-1);
  padding-block: var(--s-4);
  border-bottom: 1px solid var(--line);
}
@media (min-width: 620px) {
  .contact-list li,
  .contact-list > div {
    grid-template-columns: 9rem 1fr;
    gap: var(--s-4);
    align-items: baseline;
  }
}
.contact-list dt, .contact-list__label {
  margin: 0;
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-weight: 600;
  color: var(--ink-3);
}
.contact-list__value { font-size: var(--step-1); }
.contact-list__value a { text-decoration: none; }
.contact-list__value a:hover { text-decoration: underline; }

/* Notice / emergency callout */
.notice {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: var(--s-4) var(--s-5);
  background: var(--paper-alt);
  font-size: var(--step--1);
  color: var(--ink-2);
}
.notice strong { color: var(--ink); }
.notice p:last-child { margin-bottom: 0; }
.notice--urgent { border-left: 3px solid var(--gold-rule); }

/* -------------------------------------------------------------------------
   9. FORMS — none.
   The site collects no information, so there are no form styles here. If a
   form is ever added, that is a decision about privacy exposure and about
   who administers the resulting data, not a styling question. See the README.
   ---------------------------------------------------------------------- */

/* -------------------------------------------------------------------------
   10. FOOTER
   ---------------------------------------------------------------------- */
.site-footer {
  background: var(--paper-sink);
  color: var(--ink-invert-2);
  padding-block: var(--s-8) var(--s-6);
  font-size: var(--step--1);
}
.site-footer a { color: var(--ink-invert); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }

.footer__grid { display: grid; gap: var(--s-7); }
@media (min-width: 780px) {
  .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--s-6); }
}
.site-footer h2 {
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-invert);
  margin-bottom: var(--s-4);
}
.footer__list { list-style: none; margin: 0; padding: 0; }
.footer__list li { margin-bottom: var(--s-3); }

.footer__bottom {
  margin-top: var(--s-8);
  padding-top: var(--s-5);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  align-items: center;
  justify-content: space-between;
  font-size: 0.8125rem;
}

/* -------------------------------------------------------------------------
   11. MOTION
   ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* -------------------------------------------------------------------------
   12. PRINT
   ---------------------------------------------------------------------- */
@media print {
  .site-header, .site-footer, .nav-toggle, .btn { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}

/* -------------------------------------------------------------------------
   13. CLICK-TO-CALL
   The waitlist button. Slightly larger than a standard button because it is
   the single action the site asks anyone to take.
   ---------------------------------------------------------------------- */
.btn--call {
  min-height: 56px;
  padding-inline: 1.9rem;
  font-size: var(--step-1);
}
.btn--call::before {
  content: "";
  width: 17px;
  height: 17px;
  flex: none;
  background: currentColor;
  /* Handset glyph, masked so it inherits the button's text colour. */
  -webkit-mask: var(--phone-glyph) center / contain no-repeat;
  mask: var(--phone-glyph) center / contain no-repeat;
}
:root {
  --phone-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.2.4 2.4.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1A17 17 0 0 1 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.4 0 .8-.2 1l-2.3 2.2z'/%3E%3C/svg%3E");
}
@media (max-width: 480px) {
  .btn--call { width: 100%; font-size: var(--step-0); }
}

.figure-wide figcaption { margin-top: var(--s-3); font-size: var(--step--1); color: var(--ink-3); }