/* ============================================================================
   SECTIONS — the almanac's pages, printed on cream stock

   The dark "ink plate" spread is gone from every section except the footer.
   Sections now alternate cream (--surface-page, inherited from body) with
   leaf-tint bands (--surface-sunken); credential objects carry a certificate
   double-rule frame; the one dark anchor on the page is the footer.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   Local palette aliases — Agent C lane (sections.css + parts.css).

   tokens.css owns the semantic tokens. These are the handful of literal values
   the light-herbal spec names that have no semantic token of their own, plus a
   few on-forest values pinned here so the footer cannot depend on a token
   retune landing. They are prefixed --lh- so they can never collide with a
   token added upstream. Custom properties resolve per element rather than per
   sheet, so parts.css — which loads BEFORE this file — reads them fine.
   --------------------------------------------------------------------------- */

/* Short aliases over the SEMANTIC TOKENS in tokens.css — every value here is
   a var() reference, so tokens.css stays the single source of truth and a
   retune there propagates everywhere. Only --lh-forest, --lh-moss and
   --lh-leaf name colours tokens.css holds under a surface-role name or not
   at all; they are documented as such. */
:root {
  --lh-forest: var(--surface-plate);      /* #06321C — doubles as display ink */
  --lh-moss: #2C4720;                     /* botanical line art / moss text —
                                             the one value with no token home */
  --lh-sage: var(--ink-300);
  --lh-hair: var(--ink-200);
  --lh-amber: var(--amber-500);
  --lh-mark: var(--vermilion-600);
  --lh-mat: var(--paper-050);
  --lh-leaf: #EAF3E4;                     /* one step deeper than the leaf band,
                                             so a tinted object still reads when
                                             it sits ON a leaf band */
  --lh-tulsi: var(--tulsi-600);
  --lh-cream: var(--paper-100);
  --lh-cream-muted: var(--text-on-plate-muted);
  --lh-rule-onplate: var(--rule-on-plate);
}

.section {
  position: relative;
  /* z-index + position make every section its own stacking context, which is
     what keeps the ambient canvases (z-index -1/-2) above the section's own
     background and below its content. */
  z-index: 1;
  padding-block: var(--section-y);
  /* The botanical sprigs are deliberately hung past the section edge; without
     this they extend the document's scroll width and the page pans sideways. */
  overflow: hidden;
}
.section--sunken { background-color: var(--surface-sunken); }

/* Two leaf bands in a row would read as one undifferentiated block; a hairline
   keeps the page rhythm legible. Band membership is ONE test — the literal
   class in markup. (A :has(.gallery) special case used to shadow-declare
   membership here; it broke this very rule on the live gallery→instagram
   order and silently vanished on browsers without :has(). Gallery sections
   now carry .section--sunken explicitly.) */
.section--sunken + .section--sunken { border-block-start: 1px solid var(--lh-hair); }

/* ---- The plate: the footer, and nothing else ---------------------------- */

.plate {
  position: relative;
  background-color: var(--surface-plate);
  color: var(--lh-cream);
  isolation: isolate;
}
/* :where() drops these to zero specificity so any element's own colour class
   (.footer__quote, .footer__purposelabel …) still wins. */
:where(.plate) h1,
:where(.plate) h2,
:where(.plate) h3,
:where(.plate) h4 { color: var(--lh-cream); }
:where(.plate) p { color: var(--lh-cream-muted); }

/* The ambient canvases live in light sections too, so their positioning must
   NOT depend on a .plate ancestor. A canvas is a replaced element with an
   intrinsic size: left in normal flow it once added ~1,400px of blank space to
   the hero. These four classes are absolute, always. */
.plate__branches,
.plate__motes {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
}
.plate__branches { z-index: -2; }
.plate__motes { z-index: -1; }

/* Saffron is legible only on forest. On cream the class is inert — it simply
   restates the ordinary label colour. */
.label--onplate { color: var(--text-accent); }
.plate .label--onplate { color: var(--saffron-500); }

/* ---- Section heading block ---------------------------------------------- */

.section__head { margin-block-end: var(--space-xl); }
.section__head h2 { margin-block-start: var(--space-sm); color: var(--lh-forest); }
.section__intro {
  margin-block-start: var(--space-md);
  max-inline-size: 54ch;
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--text-muted);
}
html[lang="hi"] .section__intro { line-height: 1.75; }
:where(.plate) .section__intro { color: var(--lh-cream-muted); }

/* ============================================================================
   HERO — light, trust-first
   ========================================================================== */

.hero {
  position: relative;
  /* Without the plate there is no isolation from the plate class, and the
     hero's own background would paint over its negative-z canvases. */
  isolation: isolate;
  padding-block: clamp(2.5rem, 7vw, 5.5rem) clamp(3.5rem, 8vw, 6rem);
  overflow: hidden;
  /* The top of the sheet: a shade brighter than the page, fading into it. */
  background-image: linear-gradient(180deg,
    rgb(253 251 243 / 0.9) 0%,
    rgb(253 251 243 / 0) 58%);
}
.hero__branches,
.hero__motes {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
}
.hero__branches { z-index: -2; }
.hero__motes { z-index: -1; }

/* Was a stage light. Now a barely-there herbal wash so the cream has depth
   without the amber spotlight the gala version ran. */
.hero__glow {
  position: absolute;
  inset-block-start: -30%;
  inset-inline-end: -10%;
  inline-size: 60rem;
  block-size: 60rem;
  z-index: -3;
  pointer-events: none;
  background: radial-gradient(circle,
    rgb(212 121 30 / 0.05) 0%,
    rgb(168 183 154 / 0.10) 36%,
    transparent 68%);
}

.hero__grid {
  position: relative;
  display: grid;
  gap: clamp(var(--space-xl), 6vw, var(--space-3xl));
  align-items: center;
}
@media (min-width: 62rem) {
  .hero__grid { grid-template-columns: 1.15fr 0.85fr; }
}

.hero__title {
  margin-block: var(--space-md) 0;
  font-size: var(--step-4);
  color: var(--lh-forest);
}
.hero__title em {
  font-style: normal;
  color: var(--text-accent);
}

/* The authored line break is a desktop composition. On a phone it fights the
   natural wrap and strands a single word; let text-wrap:balance take over. */
@media (max-width: 40rem) {
  .hero__title br { display: none; }
}
html[lang="en"] .hero__title em { font-style: italic; }

.hero__lede {
  margin-block-start: var(--space-md);
  max-inline-size: 52ch;
  font-size: var(--step-0);
  color: var(--text-body);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-block-start: var(--space-lg);
}

.hero__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--space-sm) var(--space-md);
  margin-block-start: var(--space-xl);
  padding-block-start: var(--space-md);
  border-block-start: 1px solid var(--lh-sage);
}
.fact dt {
  font-family: var(--font-ui);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-block-end: 3px;
}
html[lang="hi"] .fact dt { text-transform: none; letter-spacing: 0.04em; font-weight: 700; }
.fact dd {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: var(--step-1);
  color: var(--lh-forest);
  line-height: 1.2;
}

/* Portrait and certificate plate read as one object: the plate is hung across
   the bottom edge of the photograph, the way a real desk plate sits in front
   of the person. */
.hero__figure {
  position: relative;
  display: grid;
  justify-items: center;
}

.signboard {
  inline-size: min(100%, 30rem);
  margin-block-start: clamp(-3.75rem, -6vw, -2rem);
  z-index: 2;
}

/* The brass-era plate used to overhang the photo column by 5rem. The
   certificate plate must NOT: .hero__figure's reveal-mask leaves a resting
   `clip-path: inset(0 0 0 0)`, which clips hard at the column box — an
   overhanging plate loses its left edge, and the wide English name with it.
   Inside the column, at full column width, nothing can be cut. */
@media (min-width: 62rem) {
  .signboard { inline-size: 100%; }
}

/* A white mat and a sage hairline: the photograph is framed, not printed
   straight onto the page. */
.hero__portrait {
  position: relative;
  margin: 0;
  inline-size: 100%;
  padding: 5px;
  background-color: var(--lh-mat);
  border: 1px solid var(--lh-sage);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lift);
}
.hero__portrait img {
  inline-size: 100%;
  aspect-ratio: 4 / 5;
  /* A 4:5 photo at full column width claims more than a screen height, and
     would push the plate below the fold. Cap it. */
  max-block-size: min(28rem, 50vh);
  object-fit: cover;
  /* He is centred in this frame. The vertical figure pulls the crop window
     down the image, which lifts his head toward the middle of the card
     instead of stranding it near the bottom edge. */
  object-position: 50% 38%;
  border-radius: var(--radius-xs);
  filter: saturate(0.98) contrast(1.02);
}
/* A hairline sitting exactly on the photograph's edge, inside the mat. */
.hero__portrait::after {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgb(168 183 154 / 0.55);
  border-radius: var(--radius-xs);
  pointer-events: none;
}

/* About page: the same portrait, matted and captioned, without the plate. */
.aboutfig {
  position: relative;
  margin: 0;
  padding: 5px;
  background-color: var(--lh-mat);
  border: 1px solid var(--lh-sage);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lift);
}
.aboutfig img {
  inline-size: 100%;
  aspect-ratio: 4 / 5;
  max-block-size: min(36rem, 70vh);
  object-fit: cover;
  object-position: 50% 16%;
  border-radius: var(--radius-xs);
  filter: saturate(0.98) contrast(1.02);
}
.aboutfig figcaption {
  margin-block-start: var(--space-2xs);
  font-family: var(--font-ui);
  font-size: var(--step--2);
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.hero__scroll {
  position: absolute;
  inset-block-end: var(--space-sm);
  inset-inline-start: 50%;
  translate: -50% 0;
  font-family: var(--font-ui);
  font-size: var(--step--2);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
  max-inline-size: none;
}
html[lang="hi"] .hero__scroll { text-transform: none; letter-spacing: 0.08em; }
@media (max-width: 62rem) { .hero__scroll { display: none; } }

/* ============================================================================
   ABOUT
   ========================================================================== */

.about__body {
  display: grid;
  gap: var(--space-xl);
  align-items: start;
}
@media (min-width: 56rem) {
  .about__body { grid-template-columns: 1.45fr 1fr; gap: var(--space-3xl); }
}

.prose-lead {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: var(--step-2);
  line-height: 1.34;
  color: var(--lh-forest);
  margin-block-end: var(--space-md);
  letter-spacing: var(--display-tracking);
}
html[lang="hi"] .prose-lead { line-height: 1.5; }

/* Credentials read as a certificate: deeper cream stock, a forest rule with a
   sage rule set inside it. Same frame as the hero plate and the rating tile. */
.cred {
  position: relative;
  padding: var(--space-lg);
  background-color: var(--surface-aged);
  border: var(--frame-outer);
  border-radius: var(--radius-sm);
}
.cred::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: var(--frame-inner);
  border-radius: 2px;
  pointer-events: none;
}
.cred__title {
  font-size: var(--step-1);
  color: var(--lh-forest);
  padding-block-end: var(--space-2xs);
  border-block-end: 2px solid var(--lh-forest);
}
.cred__list { margin-block-start: var(--space-sm); display: grid; gap: var(--space-xs); }
.cred__list > div {
  display: grid;
  grid-template-columns: minmax(6.5rem, auto) 1fr;
  gap: var(--space-sm);
  align-items: baseline;
  padding-block-end: var(--space-xs);
  border-block-end: 1px solid var(--lh-sage);
}
.cred__list > div:last-child { border-block-end: 0; padding-block-end: 0; }
.cred__list dt {
  font-family: var(--font-ui);
  font-size: var(--step--2);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}
html[lang="hi"] .cred__list dt { text-transform: none; letter-spacing: 0.03em; font-weight: 700; }
.cred__list dd { margin: 0; font-weight: 600; color: var(--text-strong); }

/* ============================================================================
   SERVICES — an almanac index that opens.
   The layout of each row lives in parts.css alongside the disclosure
   behaviour. Only the ruled frame belongs here.
   ========================================================================== */

.services { display: grid; counter-reset: svc; }
.service { border-block-start: 1px solid var(--lh-sage); }
.service:last-child { border-block-end: 1px solid var(--lh-sage); }

/* ============================================================================
   ABOUT HOMEOPATHY — the seal as a blind-embossed watermark
   ========================================================================== */

.homeo {
  display: grid;
  gap: var(--space-xl);
  align-items: center;
}
@media (min-width: 56rem) {
  .homeo { grid-template-columns: 0.75fr 1.25fr; gap: var(--space-3xl); }
}

.homeo__mark { justify-self: center; inline-size: min(100%, 20rem); }
.homeo__mark img {
  inline-size: 100%;
  /* Pressed into the paper rather than printed on it. */
  opacity: 0.17;
  filter: grayscale(1) contrast(1.25);
  mix-blend-mode: multiply;
}

.homeo__quote {
  margin-block: var(--space-md);
  padding-block: var(--space-sm);
  border-block: 2px solid var(--lh-forest);
}
.homeo__quote p {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: var(--step-2);
  line-height: 1.34;
  color: var(--lh-forest);
  max-inline-size: 34ch;
  letter-spacing: var(--display-tracking);
}
html[lang="hi"] .homeo__quote p { line-height: 1.52; }

/* ============================================================================
   AWARENESS — a ruled index of topics
   ========================================================================== */

.topics {
  display: grid;
  gap: 0 var(--space-xl);
  margin-block-end: var(--space-xl);
}
@media (min-width: 40rem) { .topics { grid-template-columns: 1fr 1fr; } }
@media (min-width: 68rem) { .topics { grid-template-columns: repeat(2, 1fr); } }

.topic {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  padding-block: var(--space-sm);
  border-block-end: 1px solid var(--lh-sage);
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: var(--step-1);
  color: var(--lh-forest);
  letter-spacing: var(--display-tracking);
}
.topic::before {
  content: "";
  flex: none;
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border-radius: 50%;
  background-color: var(--lh-amber);
  translate: 0 -0.15em;
}

/* A printed caution note. Full rule, leaf ground, a stamped mark — deliberately
   not a coloured stripe down one edge. Saffron field on cream is banned (1.16:1),
   so the tint is herbal and the alarm is carried by the vermilion mark. */
.caution {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  max-inline-size: none;
  padding: var(--space-md);
  /* One step deeper than --surface-sunken so the note still reads when the
     section it sits in is itself a leaf band. */
  background-color: var(--lh-leaf);
  border: 2px solid var(--lh-amber);
  border-radius: var(--radius-sm);
  font-size: var(--step-0);
  color: var(--text-strong);
}
.caution__mark {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 1.75rem;
  block-size: 1.75rem;
  border-radius: 50%;
  background-color: var(--lh-mark);
  color: var(--lh-cream);
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: var(--step-0);
  line-height: 1;
}

/* ============================================================================
   GALLERY — deliberately uneven, so it reads as a contact sheet
   ========================================================================== */

.gallery {
  display: grid;
  gap: var(--space-sm);
  grid-template-columns: repeat(2, 1fr);
}
/* Four across, but alternating proportions and hung at different heights —
   prints pinned to a board, not a spec sheet. */
@media (min-width: 56rem) {
  .gallery {
    grid-template-columns: repeat(4, 1fr);
    align-items: start;
    gap: var(--space-md);
  }
  .gallery__item { aspect-ratio: 3 / 4; }
  .gallery__item:nth-child(1) { aspect-ratio: 4 / 5; margin-block-start: var(--space-xl); }
  .gallery__item:nth-child(3) { aspect-ratio: 4 / 5; margin-block-start: var(--space-lg); }
}

/* Each print is matted like the portrait. The clip lives on the button, not on
   the figure, so the hover scale is cropped at the photograph's edge and never
   paints over its own mat. */
.gallery__item {
  margin: 0;
  padding: 4px;
  background-color: var(--lh-mat);
  border: 1px solid var(--lh-sage);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lift);
}
.gallery__open {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  padding: 0;
  cursor: zoom-in;
  background: none;
  border: 0;
  border-radius: var(--radius-xs);
  overflow: hidden;
}
.gallery__open img {
  inline-size: 100%;
  block-size: 100%;
  min-block-size: 11rem;
  object-fit: cover;
  filter: saturate(0.96) contrast(1.02);
  transition: transform var(--dur-slow) var(--ease-out-quart),
              filter var(--dur-slow) var(--ease-out-quart);
}
.gallery__open:hover img { transform: scale(1.04); filter: saturate(1) contrast(1.03); }

/* ============================================================================
   BOOKING
   ========================================================================== */

.book {
  display: grid;
  gap: var(--space-xl);
  align-items: start;
}
@media (min-width: 58rem) {
  .book { grid-template-columns: 1.35fr 1fr; gap: var(--space-3xl); }
}

.book__form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md) var(--space-sm);
}
.book__form > .field { grid-column: 1 / -1; }
.book__form > .field--half { grid-column: span 1; }
@media (max-width: 34rem) {
  .book__form { grid-template-columns: 1fr; }
  .book__form > .field--half { grid-column: 1 / -1; }
}

.field--submit { display: grid; gap: var(--space-2xs); }

.book__status {
  font-family: var(--font-ui);
  font-size: var(--step--1);
  color: var(--lh-tulsi);
  max-inline-size: none;
}
.book__status:empty { display: none; }
.book__status a { color: var(--text-accent); }

.book__note {
  font-size: var(--step--1);
  color: var(--text-muted);
  max-inline-size: 46ch;
}

.book__aside { display: grid; gap: var(--space-sm); align-content: start; }

/* The hours tile is the one credential-shaped object in the aside, so it takes
   the certificate frame rather than a second dark field. The spec permits a
   forest ground here at mark scale; it is declined deliberately — §4.5 gives
   the page exactly one dark anchor (the footer), and a forest block sitting a
   screen above it would split that anchor in two. The 2px forest rule carries
   the same weight at a fraction of the ink. */
.hours {
  position: relative;
  padding: var(--space-md);
  background-color: var(--surface-raised);
  border: var(--frame-outer);
  border-radius: var(--radius-sm);
  color: var(--text-body);
}
.hours::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: var(--frame-inner);
  border-radius: 2px;
  pointer-events: none;
}
.hours__label {
  font-family: var(--font-ui);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}
html[lang="hi"] .hours__label { text-transform: none; letter-spacing: 0.04em; font-weight: 700; }
.hours__time {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: var(--step-2);
  color: var(--lh-forest);
  margin-block-start: var(--space-3xs);
  letter-spacing: var(--display-tracking);
}
.hours__status {
  margin-block-start: var(--space-2xs);
  font-family: var(--font-ui);
  font-size: var(--step--1);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.hours__status::before {
  content: "";
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border-radius: 50%;
  background-color: currentColor;
  flex: none;
}
.hours__status.is-open { color: var(--lh-tulsi); }
.hours__status:empty { display: none; }

.calltile {
  display: grid;
  gap: 2px;
  padding: var(--space-md);
  background-color: var(--surface-raised);
  border: 1px solid var(--lh-sage);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease-out-quart),
              box-shadow var(--dur-fast) var(--ease-out-quart),
              background-color var(--dur-fast) var(--ease-out-quart);
}
.calltile:hover {
  border-color: var(--lh-forest);
  background-color: var(--lh-mat);
  box-shadow: var(--shadow-lift);
}
.calltile__label {
  font-family: var(--font-ui);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}
html[lang="hi"] .calltile__label { text-transform: none; letter-spacing: 0.04em; font-weight: 700; }
.calltile__num {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: var(--step-2);
  color: var(--lh-forest);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

.addr {
  padding: var(--space-md);
  background-color: var(--surface-raised);
  border: 1px solid var(--lh-sage);
  border-radius: var(--radius-sm);
  display: grid;
  gap: var(--space-2xs);
  justify-items: start;
}
.addr__label {
  font-family: var(--font-ui);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}
html[lang="hi"] .addr__label { text-transform: none; letter-spacing: 0.04em; font-weight: 700; }
.addr__name {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: var(--step-1);
  color: var(--lh-forest);
}
.addr__lines { font-style: normal; color: var(--text-body); line-height: 1.5; }

/* ============================================================================
   CONTACT
   ========================================================================== */

.contact { display: grid; gap: var(--space-xl); align-items: stretch; }
@media (min-width: 58rem) { .contact { grid-template-columns: 1.1fr 0.9fr; } }

.contact__map {
  min-block-size: 22rem;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--lh-sage);
  box-shadow: var(--shadow-lift);
  /* Google's tiles ran warm against the old dark stock. On cream they only
     need a touch of desaturation to sit on the same paper. */
  filter: sepia(0.05) saturate(0.94) contrast(0.98);
}
.contact__map iframe { inline-size: 100%; block-size: 100%; min-block-size: 22rem; border: 0; }

.contact__panel {
  padding: var(--space-lg);
  background-color: var(--surface-raised);
  border: 1px solid var(--lh-sage);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lift);
}
.contact__name { font-size: var(--step-2); color: var(--lh-forest); }
.contact__role {
  font-family: var(--font-ui);
  font-size: var(--step--1);
  color: var(--text-accent);
  letter-spacing: 0.04em;
  margin-block-start: 2px;
}

.contact__rows { display: grid; gap: var(--space-sm); margin-block: var(--space-md); }
.contact__rows > div { padding-block-end: var(--space-sm); border-block-end: 1px solid var(--lh-hair); }
.contact__rows > div:last-child { border-block-end: 0; padding-block-end: 0; }
.contact__rows dt {
  font-family: var(--font-ui);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-block-end: 3px;
}
html[lang="hi"] .contact__rows dt { text-transform: none; letter-spacing: 0.04em; font-weight: 700; }
.contact__rows dd { margin: 0; color: var(--text-body); }
.contact__rows dd a { color: var(--text-body); text-decoration-color: var(--text-accent); }
.contact__rows dd a:hover { color: var(--text-accent); }

.contact__socials { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.contact__socials a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.85rem;
  background-color: var(--lh-mat);
  border: 1px solid var(--lh-sage);
  border-radius: var(--radius-pill);
  font-family: var(--font-ui);
  font-size: var(--step--1);
  color: var(--text-body);
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease-out-quart),
              color var(--dur-fast) var(--ease-out-quart),
              box-shadow var(--dur-fast) var(--ease-out-quart);
}
.contact__socials a:hover {
  border-color: var(--lh-forest);
  color: var(--lh-forest);
  box-shadow: var(--shadow-lift);
}
.contact__socials svg { inline-size: 1.05rem; block-size: 1.05rem; }

/* ============================================================================
   FOOTER — the one dark anchor on the page
   ========================================================================== */

.footer { padding-block: var(--section-y) var(--space-xl); }
.footer__inner { display: grid; gap: var(--space-md); justify-items: center; text-align: center; }

.footer__purposelabel {
  font-family: var(--font-ui);
  font-size: var(--step--2);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--saffron-500);
  margin-block-end: var(--space-2xs);
}
html[lang="hi"] .footer__purposelabel { text-transform: none; letter-spacing: 0.04em; font-weight: 700; }

.footer__purpose { max-inline-size: 46rem; }
.footer__quote {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: var(--step-2);
  line-height: 1.36;
  color: var(--lh-cream);
  max-inline-size: none;
  letter-spacing: var(--display-tracking);
}
html[lang="hi"] .footer__quote { line-height: 1.56; }

.footer__sign {
  font-size: var(--step-0);
  color: var(--lh-cream-muted);
  max-inline-size: none;
}

.footer__meta {
  margin-block-start: var(--space-md);
  padding-block-start: var(--space-md);
  border-block-start: var(--lh-rule-onplate);
  inline-size: 100%;
  font-family: var(--font-ui);
  font-size: var(--step--1);
}
.footer__meta p { color: var(--lh-cream-muted); max-inline-size: none; }
.footer__meta strong { color: var(--lh-cream); }

.footer__disclaimer {
  max-inline-size: 60ch;
  font-size: var(--step--1);
  color: var(--lh-cream-muted);
}