/* =============================================================
   Shriram Properties family — "Disclosure" theme
   Shared by the Shriram sites. 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;
}
/* WCAG AA: hover fill was var(--brand-primary) #1a83bc, which puts the white
   label at 4.19:1. The accent itself is the problem, so the fill is darkened
   one notch (same hue) rather than the text: #197db4 = 4.53:1, still visibly
   lighter than the resting --deep. */
.sp-topbar__cta:hover { background: #197db4; border-color: #197db4; 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); }
/* WCAG AA: hover fill was var(--brand-primary) #1a83bc -> white label at
   4.19:1. Fill darkened one notch instead of the text: #197db4 = 4.53:1. */
.btn-primary:hover { background: #197db4; border-color: #197db4; 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);
}


/* ==== contact-modal (fleet rollout — see tooling/add-contact-modal.mjs) ==== */
.cm-modal {
    /* Re-assert the UA's dialog centering: universal "* { margin: 0 }" resets
       (sattva/purva families and others) strip it, pinning the dialog top-left. */
    margin: auto;
    width: min(100%, 28rem);
    padding: 1rem;
    border: 0;
    background: transparent;
    overscroll-behavior: contain;
    --cm-accent: #0f5f8a;
    --cm-ink: #ffffff;
}

/* Browsers without <dialog> ignore [open] and would render the form inline. */
.cm-modal:not([open]) {
    display: none;
}

/* Literal scrim: ::backdrop cannot reliably see page custom properties. */
.cm-modal::backdrop {
    background: rgba(15, 23, 42, 0.6);
}

.cm-modal__panel {
    position: relative;
    padding: 1.5rem;
    border-radius: 0.75rem;
    background: #ffffff;
    color: #1f2937;
    font-family: inherit;
    box-shadow: 0 20px 25px rgba(15, 23, 42, 0.15);
}

.cm-modal__title {
    margin: 0 0 1.25rem;
    padding-right: 2.5rem;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.3;
    color: #1f2937;
}

.cm-modal__close {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 0;
    border-radius: 0.25rem;
    background: transparent;
    color: #475569;
    cursor: pointer;
    font-size: 1.5rem;
    line-height: 1;
}

.cm-modal__close:hover {
    background: #f1f5f9;
    color: #0f172a;
}

.cm-modal__close:focus-visible {
    outline: 2px solid var(--cm-accent);
    outline-offset: 2px;
}

.cm-form {
    display: grid;
    gap: 1rem;
}

.cm-form__field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    text-align: left;
}

.cm-form__field label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #1f2937;
}

/* Form controls don't inherit fonts — font: inherit closes the gap. */
.cm-form input,
.cm-form textarea {
    width: 100%;
    min-width: 0;
    font: inherit;
    color: #1f2937;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 0.6rem 0.75rem;
}

.cm-form input:focus-visible,
.cm-form textarea:focus-visible {
    outline: 2px solid var(--cm-accent);
    outline-offset: 1px;
}

.cm-form textarea {
    min-height: 5.5rem;
    resize: vertical;
}

.cm-form__submit {
    border: 0;
    border-radius: 6px;
    background: var(--cm-accent);
    color: var(--cm-ink);
    cursor: pointer;
    font: inherit;
    font-weight: 600;
    padding: 0.75rem 1.5rem;
}

.cm-form__submit:hover {
    opacity: 0.92;
}

.cm-form__submit:focus-visible {
    outline: 2px solid #1f2937;
    outline-offset: 2px;
}

.cm-form__hint {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.55;
    color: #64748b;
}

.cm-form__hint a {
    color: inherit;
    text-decoration: underline;
}

/* Class-based, so it cannot fight any inline body.style.overflow use. */
body.has-modal-open {
    overflow: hidden;
}

@media (prefers-reduced-motion: no-preference) {
    .cm-modal[open] {
        animation: cm-modal-in 160ms ease-out;
    }

    .cm-modal[open]::backdrop {
        animation: cm-modal-backdrop-in 160ms ease-out;
    }
}

@keyframes cm-modal-in {
    from {
        opacity: 0;
        transform: translateY(0.5rem);
    }
}

@keyframes cm-modal-backdrop-in {
    from {
        opacity: 0;
    }
}

/* ==== four-sites-2026-09-25 theme patch (themes/shriram.py css_patch) ==== */
/* Related-projects primary button: the injected block paints --dark-primary ink on
   --brand-primary #1a83bc = 4.28:1 (Lighthouse color-contrast). Use the theme's own
   primary-button pair (white on --deep), which is what .btn-primary ships. */
.related-projects[data-related-projects-section] .related-projects__btn--primary { background: var(--deep); border-color: var(--deep); color: var(--light-secondary); }
.sp-table tbody th[scope="row"] { color: var(--ink); font-weight: 600; }
.sp-band--deep .sp-table tbody th[scope="row"] { color: var(--light-secondary); }
.related-projects[data-related-projects-section] .related-projects__btn--primary:hover { background: #197db4; border-color: #197db4; color: var(--light-secondary); }
/* Gallery page: a doc caption that covers two images ("Captions: A / B") keeps
   both images in one figure spanning two grid columns. */
.sp-grid-media { grid-auto-flow: row dense; }
.sp-figure--pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(0.6rem, 1.4vw, 1rem); align-content: start; }
.sp-figure--pair figcaption { grid-column: 1 / -1; margin-top: 0; }
.sp-grid-media .sp-figure--pair { grid-column: span 2; }
@media (max-width: 640px) {
  .sp-grid-media .sp-figure--pair { grid-column: auto; }
}
/* The figcaption's run-in label ("Caption:") follows the caption type, not italics. */
.sp-figure figcaption em { font-style: normal; color: var(--brand-tertiary); }
/* Card grids: an incomplete last row shows the band background, not grey --line cells. */
.sp-cards--fill { background: transparent; gap: 0; border: 0; }
.sp-cards--fill > .sp-card { box-shadow: 0 0 0 1px var(--line); }
/* Prose that continues below a split (an h3 run after a ledger) keeps the band's spacing. */
.sp-split + .sp-band__body { margin-top: clamp(1.5rem, 3vw, 2.25rem); }
/* Long tokens never force a horizontal scroll. break-word, not anywhere: "anywhere"
   lowers a table cell's min-content width and splits labels mid-word ("Develope r"). */
.sp-table td, .sp-ledger__label, .sp-hero__stamp strong { overflow-wrap: break-word; }
/* ==== end four-sites-2026-09-25 theme patch ==== */