/* =============================================================
   Shriram Sarjapur Road — "Disclosure" theme
   Authored for this site. Palette from builders/shriram-properties:
   Shriram blue #1A83BC / #4BA3D3 / #0F5F8A with the gold swoosh #BD925C.
   Contrast note: #1A83BC is 4.19:1 on white, so it is used only for
   fills, large display type and UI. Text-on-light uses #0F5F8A (6.9:1).
   ============================================================= */

:root {
  /* The nine canonical brand tokens (builders/shriram-properties.json) */
  --brand-primary: #1a83bc;
  --brand-secondary: #4ba3d3;
  --brand-tertiary: #0f5f8a;
  --dark-primary: #171717;
  --dark-secondary: #4a4a4a;
  --dark-tertiary: #d8d8d8;
  --light-primary: #f8f8f8;
  --light-secondary: #ffffff;
  --light-tertiary: #eeeeee;

  /* Brand accent — the gold swoosh (branding.accentColor) */
  --accent: #bd925c;

  /* Semantic aliases, all derived from the tokens above */
  --ink: var(--dark-primary);
  --ink-soft: var(--dark-secondary);
  --line: var(--dark-tertiary);
  --bg: var(--light-primary);
  --surface: var(--light-secondary);
  --tint: var(--light-tertiary);
  --deep: var(--brand-tertiary);

  --state-success: #166534;
  --state-error: #991b1b;

  --font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-headline: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --radius: 2px;
  --shell: 1140px;
  --gutter: clamp(1.1rem, 4vw, 2.25rem);
  --rhythm: clamp(3rem, 6.5vw, 5.25rem);
}

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

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0125rem;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }

a { color: var(--brand-tertiary); text-underline-offset: 0.18em; }
a:hover { color: var(--dark-primary); }
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--deep);
  color: var(--light-secondary);
  padding: 0.7rem 1.1rem;
  font-size: 0.85rem;
}
.skip-link:focus { left: 0; }

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

/* ---------- Type scale: display sans, tight tracking ---------- */

h1, h2, h3, h4 {
  font-family: var(--font-headline);
  color: var(--ink);
  letter-spacing: -0.021em;
  line-height: 1.14;
  margin: 0 0 0.75rem;
  font-weight: 700;
  text-wrap: balance;
}

h1 { font-size: clamp(2rem, 4.6vw, 3.1rem); }
h2 { font-size: clamp(1.55rem, 3.3vw, 2.3rem); }
h3 { font-size: clamp(1.1rem, 1.9vw, 1.32rem); letter-spacing: -0.012em; }
h4 { font-size: 1.02rem; letter-spacing: 0; }

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

strong { font-weight: 700; color: var(--ink); }

.lede {
  font-size: clamp(1.06rem, 1.9vw, 1.22rem);
  line-height: 1.62;
  color: var(--ink-soft);
}

/* The signature micro-label: mono, wide-tracked, gold rule beneath */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand-tertiary);
  margin: 0 0 0.85rem;
}
.eyebrow::before {
  content: "";
  width: 1.6rem;
  height: 2px;
  background: var(--accent);
  flex: none;
}

/* Gold hairline under every section heading — the theme's constant */
.rule-head { position: relative; padding-bottom: 0.85rem; margin-bottom: 1.35rem; }
.rule-head::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 2.75rem;
  height: 3px;
  background: var(--accent);
}

/* ---------- Top bar ---------- */

.sp-topbar {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.sp-topbar__inner {
  max-width: var(--shell);
  margin-inline: auto;
  padding: 0.7rem var(--gutter);
  display: flex;
  align-items: center;
  gap: 1rem;
}
.sp-topbar__brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: var(--ink);
  margin-right: auto;
}
.sp-topbar__brand img { width: 38px; height: 38px; object-fit: contain; }
.sp-topbar__lockup { display: flex; flex-direction: column; line-height: 1.15; }
.sp-topbar__dev {
  font-family: var(--font-mono);
  font-size: 0.63rem;
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--accent);
}
.sp-topbar__project {
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.sp-topbar__toggle {
  display: none;
  width: 42px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 0;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
}
.sp-topbar__toggle span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--ink);
}
.sp-topbar__links { display: flex; align-items: center; gap: 0.1rem; flex-wrap: nowrap; }
.sp-topbar__link {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0;
  white-space: nowrap;
  text-decoration: none;
  color: var(--ink-soft);
  padding: 0.5rem 0.42rem;
  border-radius: var(--radius);
}
.sp-topbar__link:hover { color: var(--brand-tertiary); background: var(--tint); }
.sp-topbar__cta {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.075em;
  text-transform: uppercase;
  white-space: nowrap;
  text-decoration: none;
  color: var(--light-secondary);
  background: var(--deep);
  border: 1px solid var(--deep);
  padding: 0.55rem 0.9rem;
  border-radius: var(--radius);
  margin-left: 0.5rem;
}
.sp-topbar__cta:hover { background: var(--brand-primary); border-color: var(--brand-primary); color: var(--light-secondary); }

@media (max-width: 1024px) {
  .sp-topbar__toggle { display: flex; }
  .sp-topbar__links {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    padding: 0.5rem var(--gutter) 1.1rem;
  }
  .sp-topbar.is-open .sp-topbar__links { display: flex; flex-wrap: wrap; }
  .sp-topbar__inner { position: relative; }
  .sp-topbar__link { padding: 0.72rem 0; border-bottom: 1px solid var(--tint); font-size: 0.82rem; }
  .sp-topbar__cta { margin: 0.9rem 0 0; text-align: center; }
}

/* ---------- Hero: asymmetric split, not a centred banner ---------- */

.sp-hero { background: var(--surface); border-bottom: 1px solid var(--line); }
.sp-hero__inner {
  max-width: var(--shell);
  margin-inline: auto;
  padding: clamp(2.25rem, 5vw, 4rem) var(--gutter) clamp(2rem, 4vw, 3.25rem);
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: clamp(1.75rem, 4vw, 3.25rem);
  align-items: center;
}
.sp-hero__copy { border-left: 3px solid var(--accent); padding-left: clamp(1rem, 2vw, 1.6rem); }
.sp-hero__status {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--light-secondary);
  background: var(--brand-primary);
  padding: 0.34rem 0.7rem;
  border-radius: var(--radius);
  margin-bottom: 1rem;
}
.sp-hero h1 { margin-bottom: 1rem; }
.sp-hero__lede { font-size: clamp(1.02rem, 1.8vw, 1.16rem); color: var(--ink-soft); line-height: 1.65; }
.sp-hero__media { position: relative; }
.sp-hero__media img { width: 100%; border-radius: var(--radius); border: 1px solid var(--line); }
.sp-hero__stamp {
  position: absolute;
  left: -1px;
  bottom: -1px;
  background: var(--deep);
  color: var(--light-secondary);
  padding: 0.7rem 1rem;
  max-width: 78%;
}
.sp-hero__stamp span {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.63rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--dark-tertiary);
}
.sp-hero__stamp strong { display: block; color: var(--light-secondary); font-size: 0.95rem; line-height: 1.3; margin-top: 0.2rem; }
.sp-hero__actions { display: flex; flex-wrap: wrap; gap: 0.65rem; margin-top: 1.5rem; }

@media (max-width: 1024px) {
  .sp-hero__inner { grid-template-columns: minmax(0, 1fr); }
  .sp-hero__media { order: -1; }
}

/* Subpage hero — same rule motif, single column */
.page-hero { background: var(--surface); border-bottom: 1px solid var(--line); }
.page-hero .container {
  padding-block: clamp(2rem, 4.5vw, 3.4rem) clamp(1.6rem, 3vw, 2.4rem);
}
.page-hero__body { border-left: 3px solid var(--accent); padding-left: clamp(1rem, 2vw, 1.6rem); max-width: 62rem; }
.page-hero h1 { margin-bottom: 0.7rem; }
.page-updated {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 1rem;
}

/* ---------- Section bands ---------- */

.sp-band { padding-block: var(--rhythm); background: var(--surface); }
.sp-band--tint { background: var(--bg); border-block: 1px solid var(--line); }
.sp-band--deep { background: var(--deep); color: var(--light-secondary); }
.sp-band--deep h2,
.sp-band--deep h3 { color: var(--light-secondary); }
.sp-band--deep p { color: var(--dark-tertiary); }
.sp-band--deep .eyebrow { color: var(--light-secondary); }
.sp-band--deep a { color: var(--light-secondary); }
/* Anything that normally paints itself ink-dark has to flip on the deep band. */
.sp-band--deep strong,
.sp-band--deep li,
.sp-band--deep em { color: var(--light-secondary); }
.sp-band--deep .sp-table caption { color: var(--dark-tertiary); }
.sp-band--deep .sp-steps li { border-bottom-color: rgba(255, 255, 255, 0.22); }
.sp-band--deep .sp-steps li::before { color: var(--light-tertiary); }
.sp-band--deep .sp-list li::marker { color: var(--light-tertiary); }
.sp-band--deep .sp-note strong,
.sp-band--deep .sp-note li,
.sp-band--deep .sp-note p { color: var(--ink); }
.sp-closing strong,
.sp-closing em { color: var(--light-secondary); }
.sp-band__intro { max-width: 68ch; }
.sp-band__body { max-width: 72ch; }
.sp-band__body--wide { max-width: none; }

.sp-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 3.5vw, 3rem);
  align-items: start;
}
@media (max-width: 1024px) { .sp-split { grid-template-columns: minmax(0, 1fr); } }

.sp-actions { display: flex; flex-wrap: wrap; gap: 0.65rem; margin-top: 1.6rem; }

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

.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.77rem;
  font-weight: 700;
  letter-spacing: 0.085em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.78rem 1.35rem;
  border-radius: var(--radius);
  border: 1.5px solid transparent;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  cursor: pointer;
}
.btn-primary { background: var(--deep); color: var(--light-secondary); border-color: var(--deep); }
.btn-primary:hover { background: var(--brand-primary); border-color: var(--brand-primary); color: var(--light-secondary); }
.btn-outline { background: transparent; color: var(--brand-tertiary); border-color: var(--line); }
.btn-outline:hover { border-color: var(--brand-tertiary); background: var(--tint); color: var(--brand-tertiary); }
.sp-band--deep .btn-primary { background: var(--light-secondary); color: var(--deep); border-color: var(--light-secondary); }
.sp-band--deep .btn-outline { color: var(--light-secondary); border-color: rgba(255, 255, 255, 0.45); }
.sp-band--deep .btn-outline:hover { background: rgba(255, 255, 255, 0.1); color: var(--light-secondary); }

/* ---------- Ledger: the theme's data signature ---------- */

.sp-ledger { margin: 1.75rem 0 0; border-top: 1px solid var(--line); }
.sp-ledger__row {
  display: grid;
  grid-template-columns: minmax(8.5rem, 0.42fr) minmax(0, 1fr);
  gap: 0.4rem clamp(1rem, 2.5vw, 2rem);
  align-items: baseline;
  padding: 0.95rem 0;
  border-bottom: 1px solid var(--line);
}
.sp-ledger__figure {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.15rem, 2.3vw, 1.5rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--brand-tertiary);
}
.sp-ledger__label { color: var(--ink-soft); font-size: 0.95rem; line-height: 1.55; }
.sp-band--deep .sp-ledger,
.sp-band--deep .sp-ledger__row { border-color: rgba(255, 255, 255, 0.22); }
.sp-band--deep .sp-ledger__figure { color: var(--light-secondary); }
.sp-band--deep .sp-ledger__label { color: var(--dark-tertiary); }

@media (max-width: 640px) {
  .sp-ledger__row { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Data tables ---------- */

.sp-tablewrap { overflow-x: auto; margin: 1.5rem 0; -webkit-overflow-scrolling: touch; }
.sp-table {
  width: 100%;
  min-width: 30rem;
  border-collapse: collapse;
  font-size: 0.94rem;
}
.sp-table caption {
  caption-side: top;
  text-align: left;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding-bottom: 0.6rem;
}
.sp-table th,
.sp-table td { text-align: left; padding: 0.68rem 0.9rem 0.68rem 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.sp-table thead th {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--brand-tertiary);
  border-bottom: 2px solid var(--accent);
}
.sp-table tbody td:first-child { color: var(--ink); font-weight: 600; }
.sp-table td.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--brand-tertiary); }
.sp-band--deep .sp-table th,
.sp-band--deep .sp-table td { border-color: rgba(255, 255, 255, 0.22); color: var(--light-secondary); }
.sp-band--deep .sp-table thead th { color: var(--light-secondary); }

/* ---------- Notes / cautions ---------- */

.sp-note {
  border-left: 3px solid var(--brand-primary);
  background: var(--bg);
  padding: 1.05rem 1.2rem;
  margin: 1.5rem 0;
  font-size: 0.96rem;
}
.sp-note--caution { border-left-color: var(--accent); }
.sp-note p:first-child { margin-top: 0; }
.sp-note__title {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-tertiary);
  margin-bottom: 0.45rem;
}

/* ---------- Editorial lists ---------- */

.sp-list { margin: 1.1rem 0; padding-left: 1.1rem; }
.sp-list li { margin-bottom: 0.6rem; }

.sp-steps { list-style: none; counter-reset: step; margin: 1.4rem 0 0; padding: 0; }
.sp-steps li {
  counter-increment: step;
  position: relative;
  padding: 0 0 0.95rem 2.6rem;
  margin-bottom: 0.95rem;
  border-bottom: 1px solid var(--line);
}
.sp-steps li:last-child { border-bottom: 0; margin-bottom: 0; }
.sp-steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.15rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--accent);
}

/* ---------- Cards (hairline, square — no soft shadows) ---------- */

.sp-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-top: 1.75rem;
}
.sp-card { background: var(--surface); padding: 1.35rem 1.3rem; }
.sp-card h3 { margin-bottom: 0.5rem; }
.sp-card p { font-size: 0.94rem; color: var(--ink-soft); }
.sp-card__tag {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  display: block;
  margin-bottom: 0.5rem;
}

/* Amenity chips */
.sp-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 1.4rem 0 0; padding: 0; list-style: none; }
.sp-chips li {
  font-size: 0.82rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand-secondary);
  padding: 0.42rem 0.75rem;
  background: var(--surface);
  color: var(--ink-soft);
}

/* ---------- Media / gallery ---------- */

.sp-figure { margin: 1.75rem 0 0; }
.sp-figure img { width: 100%; border: 1px solid var(--line); border-radius: var(--radius); }
.sp-figure figcaption {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding-top: 0.6rem;
  border-top: 1px solid var(--line);
  margin-top: 0.6rem;
}
.sp-grid-media {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: clamp(1rem, 2vw, 1.6rem);
  margin-top: 1.75rem;
}
.sp-grid-media .sp-figure { margin: 0; }
.sp-grid-media img { aspect-ratio: 1 / 1; object-fit: cover; }
.sp-grid-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: clamp(1rem, 2vw, 1.6rem); margin-top: 1.75rem; }
.sp-grid-plans .sp-figure { margin: 0; }
.sp-grid-plans img { background: var(--surface); }

/* ---------- FAQ ---------- */

.faq-list { margin-top: 1.6rem; border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item > summary {
  list-style: none;
  cursor: pointer;
  padding: 1.05rem 2.5rem 1.05rem 0;
  position: relative;
  font-weight: 650;
  font-size: 1.01rem;
  line-height: 1.45;
  color: var(--ink);
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after {
  content: "+";
  position: absolute;
  right: 0.35rem;
  top: 0.9rem;
  font-family: var(--font-mono);
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--accent);
  line-height: 1;
}
.faq-item[open] > summary::after { content: "\2212"; }
.faq-item[open] > summary { color: var(--brand-tertiary); }
.faq-item__answer { margin: 0; padding: 0 2.5rem 1.15rem 0; color: var(--ink-soft); font-size: 0.97rem; }

/* ---------- Closing CTA ---------- */

.sp-closing { background: var(--dark-primary); color: var(--light-secondary); padding-block: clamp(2.5rem, 5vw, 4rem); }
.sp-closing h2 { color: var(--light-secondary); }
.sp-closing p { color: var(--dark-tertiary); max-width: 60ch; }
.sp-closing .btn-primary { background: var(--accent); border-color: var(--accent); color: var(--dark-primary); }
.sp-closing .btn-primary:hover { background: var(--light-secondary); border-color: var(--light-secondary); color: var(--dark-primary); }
.sp-closing .rule-head::after { background: var(--accent); }

/* ---------- Contact form ---------- */

.sp-form { margin-top: 1.6rem; max-width: 34rem; }
.sp-form__field { margin-bottom: 1.05rem; }
.sp-form__field label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--brand-tertiary);
  margin-bottom: 0.4rem;
}
.sp-form__field input,
.sp-form__field textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 0.97rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.72rem 0.8rem;
}
.sp-form__field input:focus,
.sp-form__field textarea:focus { border-color: var(--brand-primary); }
.sp-form__err { display: block; min-height: 1.05rem; font-size: 0.8rem; color: var(--state-error); margin-top: 0.28rem; }
.sp-form__hint { font-size: 0.83rem; color: var(--ink-soft); margin-top: 0.9rem; }
.form-status {
  margin-top: 1rem;
  padding: 0.75rem 0.95rem;
  border-radius: var(--radius);
  font-size: 0.9rem;
  border: 1px solid var(--line);
}
.form-status.success { color: var(--state-success); background: #dcfce7; border-color: #86efac; }
.form-status.error { color: var(--state-error); background: #fef2f2; border-color: #fca5a5; }

/* ---------- Footer ---------- */

.sp-footer { background: var(--dark-primary); color: var(--dark-tertiary); border-top: 3px solid var(--accent); padding-block: clamp(2.4rem, 4.5vw, 3.5rem) 2rem; }
.sp-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.sp-footer img { width: 44px; height: 44px; object-fit: contain; margin-bottom: 0.8rem; }
.sp-footer p { font-size: 0.88rem; line-height: 1.65; }
.footer-heading {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 0.7rem;
}
.sp-footer ul { list-style: none; margin: 0; padding: 0; }
.sp-footer li { margin-bottom: 0.45rem; }
.sp-footer a { color: var(--light-tertiary); text-decoration: none; font-size: 0.88rem; }
.sp-footer a:hover { color: var(--light-secondary); text-decoration: underline; }
.sp-footer__legal { border-top: 1px solid rgba(255, 255, 255, 0.16); margin-top: 2.2rem; padding-top: 1.4rem; }
.sp-footer__legal p { font-size: 0.79rem; line-height: 1.6; color: #9a9a9a; }

@media (max-width: 1024px) {
  .sp-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .sp-footer__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- 404 ---------- */

.sp-404 { padding-block: clamp(3rem, 8vw, 6rem); }
.sp-404__code {
  font-family: var(--font-mono);
  font-size: clamp(3rem, 10vw, 6rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--brand-primary);
  line-height: 1;
  margin-bottom: 0.6rem;
}

/* ---------- Lightbox ---------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(23, 23, 23, 0.92);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.lightbox.is-open { display: flex; }
.lightbox__img { max-width: 96vw; max-height: 88vh; border: 1px solid rgba(255, 255, 255, 0.25); }
.lightbox__close {
  position: absolute;
  top: 1rem;
  right: 1.25rem;
  background: transparent;
  border: 0;
  color: var(--light-secondary);
  font-size: 2.1rem;
  line-height: 1;
  cursor: pointer;
}

/* ---------- WCAG AA contrast guards ----------------------------------
   Lighthouse color-contrast failures, 2026-07-28. The nine brand tokens are
   unchanged — these only re-point specific components at an AA-safe one.

   1. The bronze accent #bd925c is 2.83:1 on white. It is fine as a fill, a
      border, or on the dark footer (6.34:1), but it cannot carry small text
      on a light surface. Darkening --accent globally is NOT the fix: it would
      drop the footer to 3.73:1 and fail there instead. So the two small-text
      uses move to --brand-tertiary (6.94:1 on white) — the same rule the
      SOBHA family applies to its gold. */
.sp-topbar__dev,
.sp-card__tag {
    color: var(--brand-tertiary);
}

/* ...but inside a deep band the surface is --brand-tertiary itself, so the
   accent is the readable choice there (and is what the design intends). */
.sp-band--deep .sp-card__tag {
    color: var(--accent);
}

/* 2. White on --brand-primary is 4.19:1 — just short of 4.5:1 for this
      10.5px bold pill. --brand-tertiary carries the same hue at 6.94:1. */
.sp-hero__status {
    background: var(--brand-tertiary);
}

/* 3. `.sp-table tbody td:first-child` (0,2,2) outranks
      `.sp-band--deep .sp-table td` (0,2,1), so inside a deep band the first
      column kept --ink on --deep: 2.58:1. Restate it at higher specificity
      rather than weakening the base rule. */
.sp-band--deep .sp-table tbody td:first-child {
    color: var(--light-secondary);
}