/* ============================================================
   BASE — reset, typography, band system, header, footer
   ============================================================ */

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

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

body {
  margin: 0;
  background: var(--ground);
  color: var(--charcoal);
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: var(--lh-body);
  font-weight: var(--weight-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: var(--weight-semi);
  color: var(--charcoal);
  margin: 0;
  text-wrap: balance;
}

/* Hero H1s keep `balance`, deliberately. It was suspected of
   compressing headlines below their own max-width, but once the
   subhead was descaled out of serif-bold the hierarchy resolved
   on its own, and balance breaks these headlines at better
   points than `pretty` does. Verified at render, both ways. */

h1 { font-size: var(--size-h1); line-height: var(--lh-h1); }
h2 { font-size: var(--size-h2); line-height: var(--lh-h2); }
h3 { font-size: var(--size-h3); line-height: var(--lh-h3); }

p { margin: 0; }
p + p { margin-top: var(--space-5); }

/* figure, blockquote and dl carry a large default margin in every
   browser (1em 40px). Left in place it silently narrows any card
   built on them, which is how Testimonial Card is marked up. */
figure, blockquote, figcaption, dl, dd { margin: 0; }

a { color: inherit; }

/* ol included deliberately: Process Arc is an ordered list for
   screen readers, but paints its own numbered circles, so the
   browser's decimal markers would double up. */
ul, ol { margin: 0; padding: 0; list-style: none; }

button { font: inherit; color: inherit; }

/* Visible focus for keyboard users on every interactive element */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* --- Type utilities ---------------------------------------- */
.lead    { font-size: var(--size-lead); line-height: var(--lh-lead); }
.caption { font-size: var(--size-caption); line-height: var(--lh-caption); color: var(--linework); }
.eyebrow {
  font-size: 12px;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: var(--weight-semi);
  color: var(--accent-text);
}

/* ============================================================
   SECTION BAND SYSTEM  (checklist A2 — fully locked)

   Every page starts Ground, then alternates strictly:
   Ground -> Tinted -> Ground -> Tinted, down the page,
   regardless of section type. Position is the only input.
   No exceptions.

   Band classes are written explicitly in the HTML rather than
   computed, so each section's band is visible in the markup and
   directly checkable against the Part B tables in the checklist.
   ============================================================ */

/* Horizontal padding resolves to the rail: at wide viewports it
   collapses the band's content box onto the header's exact ink
   edges (184 to 1096 at 1280), and at narrow ones it falls back
   to a plain --gutter margin. This is the whole rail fix. The
   old rule put --gutter OUTSIDE .container, which is why body
   content landed at 160 while the logo sat at 184. */
.band {
  padding-block: var(--section-y);
  padding-inline: max(var(--gutter), calc((100% - var(--rail)) / 2));
  scroll-margin-top: var(--space-6);
}
.band--ground { background: var(--ground); }
.band--tint   { background: var(--tint); }

/* Bands whose whole content is a CTA carry a tighter rhythm.
   Full section padding around a single button reads as an empty
   stretch rather than deliberate calm. Colour alternation is
   untouched — A2 governs band colour, not band height. */
.band--cta { padding-block: var(--space-7); }

/* Text column. Locked at 640px (A1). No longer auto-centred:
   under the rail rule every element on the site starts at the
   left rail, so a standalone measure column left-aligns like
   everything else. Previously these self-centred and started at
   x=320 while the rest of the page started at 184. */
.measure { max-width: var(--measure); margin-inline: 0; }

/* Shared-edge text column: same 640px cap as .measure, but no
   auto-centering — it left-aligns within whatever container it
   sits in. Used together with .container so a page's prose shares
   the exact same left edge as its full-width sections (hero
   splits, card grids), rather than each width independently
   self-centering in the viewport and landing at a different left
   margin. .measure remains for the few standalone full-bleed text
   sections (legal pages, Tier 2) that have no wider sibling
   content to align against. */
.text-col { max-width: var(--measure); }

/* Multi-column rows (card grids, hero splits). Now sized to the
   rail itself rather than to --page-max, since .band's padding
   already resolves to the rail. Kept as an explicit cap so the
   container can never exceed it if .band's padding is overridden
   somewhere. */
.container { max-width: var(--rail); margin-inline: auto; }

.stack > * + * { margin-top: var(--space-5); }
/* 27 Aug, visual review C04 + D6, and Arvind's own catch on paragraph
   gaps. This rule treated every child alike, so prose in the long-form
   column sat 48px apart, the same distance as a section break. The
   principle both reviewers proposed: 48 separates, 24 joins. */
.stack-lg > * + * { margin-top: var(--space-5); }
.stack-lg > .section-head { margin-top: var(--space-6); margin-bottom: var(--space-5); }

/* 27 Aug round 3, items 3 and 7. Was --space-7. A claim heading sat 48px
   from what it introduces, which read as detached, and on FAQ and the
   filter bar it compounded with the first row's own padding. */
.section-head { margin-bottom: var(--space-6); }

/* A heading that makes a claim has to sit close to the sentence
   that answers it. At --space-7 plus the stack gap it floated,
   and the claim read as detached from its own explanation. */
.stack > .section-head { margin-bottom: 0; }

/* Hero terminus. On pages whose hero has no second column, the
   right side of the rail was empty and read as an accidental
   hole rather than composed space: the header above asserts both
   rail edges and the card grids below often span the full rail,
   so the hero was the only zone where the right edge vanished.
   A hairline at the full rail bounds that whitespace and asserts
   the edge. Targets the first band in <main>, which is the hero
   on all 11 pages, so it needs no markup change. */
/* 27 Aug, visual review C03. The hero tail was three paddings stacked:
   the band's own, this terminus, and the next band's top. Was --space-7. */
/* 27 Aug round 3, item 4. The hairline came out: it only ever marked one
   boundary per page, and the band alternation already does that work. The
   terminus padding went with it, so the hero flows into what follows. */
main > .band:first-child > .container {
  padding-bottom: 0;
}

/* ============================================================
   SITE HEADER + NAV
   Top nav is person-centric: Home, Offerings, Work With Me,
   Inner Compass, My Story  (brand-offerings-canon.md).
   Offerings carries a 5-entry dropdown, Ganga Tattva last.
   No nav entry anywhere for: Tier 2 detail pages, the
   Testimonials page, or the diagnostic tool.
   ============================================================ */

.site-header {
  background: var(--ground);
  border-bottom: 1px solid var(--border);
  position: relative;
  z-index: 100;
}

.site-header__inner {
  max-width: var(--page-max);
  margin-inline: auto;
  padding: var(--space-5) var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}

/* Shared wordmark treatment, header and footer both. Same
   font-variant-caps:small-caps approach as the footer (A/M stay
   full-height, the rest becomes small caps) — recreated in CSS
   since no logo file exists in the project; swap for a real
   logo image later with no markup change if one is produced. */
.wordmark {
  font-family: var(--font-heading);
  font-variant-caps: small-caps;
  font-weight: var(--weight-semi);
  color: var(--charcoal);
  text-decoration: none;
  white-space: nowrap;
  letter-spacing: 0.01em;
}

.site-header__brand {
  font-size: var(--size-h3);
  display: inline-flex;
  align-items: center;
  min-height: 44px;      /* touch target minimum */
}

.nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.nav__link {
  text-decoration: none;
  font-size: var(--size-caption);
  letter-spacing: 0.01em;
  padding: var(--space-2) 0;
  display: inline-block;
  border-bottom: 1.5px solid transparent;
  transition: border-color var(--transition);
}

.nav__link:hover { border-bottom-color: var(--accent-text); }
.nav__link[aria-current="page"] { border-bottom-color: var(--charcoal); }

/* Offerings dropdown */
.nav__group { position: relative; }

.nav__trigger {
  background: none;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--size-caption);
  padding: var(--space-2) 0;
  border-bottom: 1.5px solid transparent;
  transition: border-color var(--transition);
}

.nav__trigger:hover { border-bottom-color: var(--accent-text); }

.nav__chev { transition: transform 0.18s ease; }
.nav__trigger[aria-expanded="true"] .nav__chev { transform: rotate(180deg); }

/* Outer hit-area: starts flush against the trigger (top:100%, zero
   gap) and is transparent — the visible card sits inside
   .nav__menu__card below. The old version put the 12px visual gap
   directly on .nav__menu's position offset, which left a strip of
   page between the trigger and the menu covered by neither
   element. A real cursor crossing that strip triggers a genuine
   mouseleave on .nav__group before ever reaching the menu, closing
   it — reproduced directly via dispatchEvent before this fix,
   confirmed fixed the same way after. Moving the 12px into
   padding-top keeps it part of .nav__menu's own hoverable box
   instead of dead space outside it, so the same visual gap no
   longer breaks hover continuity. */
.nav__menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding-top: var(--space-3);
  display: none;
}

.nav__menu[data-open="true"] { display: block; }

.nav__menu__card {
  min-width: 248px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 28px rgba(35, 38, 43, 0.10);
  padding: var(--space-2);
}

.nav__menu a {
  display: block;
  text-decoration: none;
  font-size: var(--size-caption);
  padding: var(--space-3) var(--space-4);
  border-radius: 4px;
}

.nav__menu a { transition: background var(--transition); }
.nav__menu a:hover { background: var(--tint); }

/* Ganga Tattva is the dropdown's fifth and final entry. It is NOT
   tinted ochre here: at 13px on the ground the accent lands at
   3.38:1, under the 4.5:1 needed for small text. A1 scoped that
   ochre to CTA tint, diagram accents, borders and the Signpost
   tag, all of which were contrast-checked in context. Nav text
   was never one of them, so this stays charcoal and the register
   shift is carried by the Signpost component as specified. */

.nav__toggle {
  display: none;
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: var(--space-3) var(--space-4);
  min-height: 44px;
  cursor: pointer;
  font-size: var(--size-caption);
}

@media (max-width: 768px) {
  .nav__toggle { display: block; }

  .nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--ground);
    border-bottom: 1px solid var(--border);
    padding: var(--space-4) var(--gutter) var(--space-6);
  }

  .nav[data-open="true"] { display: block; }

  .nav__list { flex-direction: column; align-items: flex-start; gap: var(--space-4); }

  .nav__group { width: 100%; }

  /* Desktop's 8px vertical padding (~38px total) is fine for a
     mouse; mobile needs the real 44px touch-target minimum. Scoped
     to this media query so desktop's tighter rhythm is untouched. */
  .nav__link,
  .nav__trigger {
    min-height: 44px;
  }

  /* Mobile uses click-to-toggle (nav.js), not hover, so the
     gap-bridging padding-top that fixes the desktop hover bug
     serves no purpose here and is reset via the padding shorthand
     below. The card/hit-area split collapses back to one visual
     block: .nav__menu carries the indent styling, .nav__menu__card
     is reset to a plain wrapper so its desktop box doesn't double
     up inside it. */
  .nav__menu {
    position: static;
    transform: none;
    margin-top: var(--space-3);
    border-left: 2px solid var(--border);
    padding: 0 0 0 var(--space-4);
  }

  .nav__menu__card {
    background: transparent;
    border: 0;
    box-shadow: none;
    min-width: 0;
    padding: 0;
  }
}

/* ============================================================
   FOOTER — sitewide, appears on every page.
   Copy locked verbatim (page-copy-master.md L1036).
   Participates in band alternation like any other section.
   ============================================================ */

/* Footer is a fixed, standalone band — always --tint, deliberately
   NOT part of the page's Ground/Tint alternation sequence. Arvind
   asked for one consistent footer look on every page regardless of
   how many sections precede it; tools/check-structure.py excludes
   .site-footer from its alternation count and instead verifies its
   markup is byte-identical across all pages, the same way the
   header already is. */
/* Always --tint and exempt from alternation, unchanged. The
   failure was adjacency, not the rule: where a page's last band
   is also tinted (Home), the two merged into one 944px
   undifferentiated mass. A hairline separates them without
   touching the one-consistent-footer requirement. */
.site-footer {
  padding-block: var(--space-8);
  padding-inline: max(var(--gutter), calc((100% - var(--rail)) / 2));
  border-top: 1px solid var(--border);
}

.site-footer__inner {
  max-width: var(--rail);
  margin-inline: auto;
  text-align: left;
}

.site-footer__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-5);
  margin-bottom: var(--space-7);
}

/* Sizing only — the wordmark treatment itself lives in the shared
   .wordmark class (used here and on .site-header__brand) so the
   two can never drift apart. */
.site-footer__wordmark { font-size: 22px; }

.site-footer__social:hover { background: var(--charcoal); }

.site-footer__social {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--linework);
  color: var(--white);
  transition: background var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 768px) {
  /* Real hit area grows to the 44px touch-target minimum without
     changing the visual badge size, same pattern already used for
     the nav toggle and modal close button. */
  .site-footer__social { width: 44px; height: 44px; }
  .site-footer__social svg { width: 18px; height: 18px; }

  .site-footer__wordmark,
  .site-footer__legal a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  margin-bottom: var(--space-6);
}

/* Was --size-body at 600 underlined and stacked vertically, which
   read as primary navigation rather than footer meta. Caption
   weight, in a row, sitting with the copyright it belongs to. */
.site-footer__legal a {
  font-size: var(--size-caption);
  font-weight: var(--weight-regular);
  color: var(--linework);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--transition);
}

.site-footer__legal a:hover { color: var(--charcoal); }

.site-footer__copyright { margin-bottom: var(--space-4); }

.site-footer p {
  font-size: var(--size-caption);
  line-height: 1.6;
  color: var(--linework);
  text-align: left;
}

.site-footer em { font-style: italic; }

/* Screen-reader-only text */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Placeholder treatment for assets not yet produced.
   Correct aspect ratios are set per instance so that dropping in
   real files causes no reflow. */
.placeholder {
  background: var(--tint);
  border: 1px dashed var(--linework);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-5);
  color: var(--linework);
  font-size: var(--size-caption);
  font-style: italic;
}

.band--tint .placeholder { background: var(--ground); }

/* ------------------------------------------------------------
   Mobile chrome, 27 August visual review C10 + C11.
   Header and footer kept desktop padding at every width while the
   touch targets were already 44px, so the padding was not carrying
   them. Header sits above every hero, so it is the more valuable of
   the two. Desktop is deliberately unchanged.
   ------------------------------------------------------------ */
@media (max-width: 768px) {
  .site-header__inner { padding-block: var(--space-3); }
  .site-footer { padding-block: var(--space-6); }
  .site-footer__top { margin-bottom: var(--space-6); }
}

/* ------------------------------------------------------------
   Footer, 27 August round 3 item 5.
   Where a page ended on a Tint band the footer dissolved into it and
   lost its own identity. Charcoal gives the site a terminal edge. The
   identity row collapses to one line via display:contents on the
   wrapper, so the footer MARKUP stays byte-identical across all 18
   pages and check-structure.py's footer assertion still holds.
   ------------------------------------------------------------ */
.site-footer { background: var(--charcoal); border-top: 0; }
.site-footer,
.site-footer p,
.site-footer a { color: var(--surface); }
.site-footer__inner { display: flex; flex-wrap: wrap; align-items: center;
  column-gap: var(--space-6); row-gap: var(--space-5); }
.site-footer__top { display: contents; }
.site-footer__wordmark { order: 1; }
.site-footer__legal { order: 2; display: flex; gap: var(--space-6); margin: 0; }
.site-footer__social { order: 3; margin-left: auto; }
.site-footer__copyright { order: 4; flex: 1 1 100%; margin: 0; }
.site-footer > .site-footer__inner > p:not(.site-footer__copyright) {
  order: 5; flex: 1 1 100%; margin: 0; }