/* ==========================================================================
   Revita Holistic Healthcare Private Limited
   Shared stylesheet — no framework, no external assets.
   Palette: peacock green (primary) + deep blue (secondary) on a cool ground.
   ========================================================================== */

:root {
  --peacock:      #0C6E63;
  --peacock-deep: #084F48;
  --peacock-soft: #148C7E;
  --peacock-mist: #E2EDE3;

  --blue:         #12507E;
  --blue-soft:    #2E7DB8;
  --blue-mist:    #E7EDF3;

  /* Natural warm ground — linen and sand rather than clinical white. */
  --bg:           #F7F2E7;
  --bg-alt:       #EFE6D5;
  --surface:      #FFFCF5;

  --ink:          #1E2622;
  --ink-soft:     #56605A;
  --line:         rgba(12, 110, 99, 0.18);

  /* Paper grain, layered over the flat colours so they are not dead flat. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.055'/%3E%3C/svg%3E");

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --wrap: 1080px;
  --radius: 14px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --peacock:      #4FC7B6;
    --peacock-deep: #7FDBCD;
    --peacock-soft: #2FA695;
    --peacock-mist: #10302D;

    --blue:         #78B8EA;
    --blue-soft:    #4C94CC;
    --blue-mist:    #122A3B;

    /* Warm near-black, so the dark theme reads as lamplight rather than slate. */
    --bg:           #14120E;
    --bg-alt:       #1C1915;
    --surface:      #1D1A16;

    --ink:          #F1EBE0;
    --ink-soft:     #ADA599;
    --line:         rgba(79, 199, 182, 0.22);
  }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background-color: var(--bg);
  background-image: var(--grain);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 0.6em;
}

h1 { font-size: clamp(2.1rem, 5vw, 3.2rem); }
h2 { font-size: clamp(1.55rem, 3.2vw, 2.1rem); }
h3 { font-size: 1.12rem; font-family: var(--sans); font-weight: 650; letter-spacing: 0; }

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

a { color: var(--peacock); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--blue); }

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px;
}

/* --- Keyboard access ----------------------------------------------------- */

/* Off-screen until tabbed to, then it lands over the sticky header. */
.skip {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 20;
  padding: 10px 20px;
  border-radius: 0 0 10px 10px;
  background: var(--peacock);
  color: #FFFFFF;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: top 0.15s ease;
}
.skip:focus { top: 0; color: #FFFFFF; }

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

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

.lede {
  font-size: 1.15rem;
  color: var(--ink-soft);
  max-width: 62ch;
}

/* Small caps label above a section heading ------------------------------- */
.eyebrow {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
  margin: 0 0 0.9em;
}

/* --- Header -------------------------------------------------------------- */

header.site {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

header.site .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  padding-top: 14px;
  padding-bottom: 14px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  margin-right: auto;
}

.mark {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--peacock) 0%, var(--blue) 100%);
  display: grid;
  place-items: center;
  color: #FFFFFF;
  font-family: var(--serif);
  font-size: 1.05rem;
  line-height: 1;
}

.brand b {
  font-family: var(--serif);
  font-size: 1.16rem;
  font-weight: 600;
  color: var(--ink);
  display: block;
  line-height: 1.15;
}

.brand .sub {
  font-size: 0.7rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

nav.site a {
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 0.94rem;
  margin-left: 24px;
}
nav.site a:first-child { margin-left: 0; }
nav.site a:hover,
nav.site a[aria-current="page"] { color: var(--peacock); }

/* Phone pill in the header */
.call {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--peacock-mist);
  color: var(--peacock);
  font-size: 0.9rem;
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
}
.call:hover { background: var(--peacock); color: #FFFFFF; border-color: var(--peacock); }
@media (prefers-color-scheme: dark) { .call:hover { color: #0C1719; } }

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

.btn {
  display: inline-block;
  padding: 12px 26px;
  border-radius: 999px;
  background: var(--peacock);
  color: #FFFFFF;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--peacock);
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.btn:hover { background: var(--peacock-deep); border-color: var(--peacock-deep); color: #FFFFFF; }
@media (prefers-color-scheme: dark) {
  .btn { color: #0C1719; }
  .btn:hover { color: #0C1719; }
}

/* Icon buttons (WhatsApp) — inline-flex so the glyph sits on the text baseline. */
.btn.wa {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.btn.wa svg { width: 17px; height: 17px; flex: none; }

.btn.ghost {
  background: transparent;
  color: var(--blue);
  border-color: var(--line);
}
.btn.ghost:hover { background: var(--blue-mist); color: var(--blue); border-color: var(--blue-soft); }

/* --- Sections ------------------------------------------------------------ */

section { padding: 78px 0; }
/* Clear the sticky header when an in-page anchor is followed. */
section[id] { scroll-margin-top: 78px; }
section.tint {
  background-color: var(--bg-alt);
  background-image: var(--grain);
}
section.narrow .wrap { max-width: 760px; }

/* --- Image-led sections --------------------------------------------------

   The hero and the feature bands are photographs carrying the full width of
   the page, with the copy sitting on top. Two things make that safe rather
   than merely fashionable:

   1. A scrim. Every one of these sections lays a dark warm wash over the
      photograph in the *same* background shorthand, so the text contrast does
      not depend on which photograph happens to be behind it. The scrim is
      tuned against the lightest area of each image, not the average.
   2. No `background-attachment: fixed`. Parallax on a background image forces
      a repaint on every scroll frame and judders badly on mobile, which is
      where most of this site is read.
   ------------------------------------------------------------------------- */

/* Shared scrim + layout for any full-bleed photographic section. */
.shot {
  position: relative;
  isolation: isolate;
  background-color: #0E1A18;   /* shows through before the image decodes */
  color: #FFFFFF;
}
.shot::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Scrim and photograph are two custom properties composed here, so each
     section only declares what differs -- and the small-screen variants
     further down are a one-line override of --shot-image rather than a
     restatement of the whole gradient. */
  background-image: var(--shot-scrim), var(--shot-image);
  background-size: cover;
  background-position: var(--shot-position, center);
  background-repeat: no-repeat;
}
.shot > .wrap { position: relative; }

/* Copy on a photograph. Explicit colours, because the inherited ink tokens are
   tuned for paper and vanish against a dark image. */
.shot h1,
.shot h2,
.shot h3 { color: #FFFFFF; }
.shot p,
.shot li { color: rgba(255, 255, 255, 0.90); }
.shot .eyebrow { color: #9FE6D8; }
.shot .lede { color: rgba(255, 255, 255, 0.93); }
.shot a:not(.btn) { color: #9FE6D8; }

/* The ghost button reads as an outline in blue on paper; over a photograph it
   needs its own light treatment or it disappears. */
.shot .btn.ghost {
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(2px);
}
.shot .btn.ghost:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: #FFFFFF;
  color: #FFFFFF;
}

/* --- Hero ---------------------------------------------------------------- */

/* Angled scrim: heaviest where the copy sits, easing off to the right so the
   photograph is still legible as a photograph.

   Scrim weights were checked against the worst case -- a pure white pixel
   behind the text. At 0.72 alpha that still gives 7.3:1 for white type and
   5.4:1 for the pale peacock tagline, both clear of WCAG AA, so the wash is
   kept as light as the contrast budget allows. */
.hero {
  padding: clamp(88px, 11vw, 132px) 0 clamp(84px, 10vw, 122px);
  --shot-scrim: linear-gradient(
    100deg,
    rgba(9, 24, 22, 0.82) 0%,
    rgba(9, 24, 22, 0.72) 40%,
    rgba(9, 24, 22, 0.48) 74%,
    rgba(9, 24, 22, 0.34) 100%
  );
  --shot-image: url("images/hero-wide.jpg");
  --shot-position: 64% center;
}
.hero h1 { max-width: 17ch; }
.hero .lede { max-width: 54ch; }

/* The About hero is an open landscape rather than an interior, so it takes a
   flatter, more even scrim than the angled one on the home page. */
.hero--about {
  --shot-scrim: linear-gradient(
    100deg,
    rgba(9, 24, 22, 0.86) 0%,
    rgba(9, 24, 22, 0.76) 46%,
    rgba(9, 24, 22, 0.56) 100%
  );
  --shot-image: url("images/hero-about.jpg");
  --shot-position: center 40%;
}

/* Single column now — the photograph occupies the full width behind the copy
   rather than sitting in a panel beside it. */
.hero-grid { display: block; }

/* --- Feature bands ------------------------------------------------------- */

.feature { padding: 104px 0; }
.feature .wrap { max-width: 780px; }
.feature h2 { max-width: 20ch; }
.feature .lede { max-width: 58ch; }

.feature--philosophy {
  --shot-scrim: linear-gradient(180deg, rgba(9, 24, 22, 0.72) 0%, rgba(9, 24, 22, 0.64) 100%);
  --shot-image: url("images/philosophy.jpg");
}
.feature--metasphere {
  --shot-scrim: linear-gradient(105deg, rgba(8, 22, 34, 0.86) 0%, rgba(8, 22, 34, 0.66) 100%);
  --shot-image: url("images/metasphere.jpg");
}
/* The waiting room is a bright, near-white interior, so this one carries a
   heavier wash than the others to land in the same contrast band. */
.feature--contact {
  --shot-scrim: linear-gradient(180deg, rgba(9, 24, 22, 0.80) 0%, rgba(9, 24, 22, 0.74) 100%);
  --shot-image: url("images/contact.jpg");
}

/* Small screens get half-width crops of the same photographs: 234 KB for the
   whole background set instead of 736 KB. Only the image swaps -- the scrim,
   which is what the contrast depends on, is untouched. */
@media (max-width: 760px) {
  .hero { --shot-image: url("images/hero-wide-sm.jpg"); }
  .hero--about { --shot-image: url("images/hero-about-sm.jpg"); }
  .feature--philosophy { --shot-image: url("images/philosophy-sm.jpg"); }
  .feature--metasphere { --shot-image: url("images/metasphere-sm.jpg"); }
  .feature--contact { --shot-image: url("images/contact-sm.jpg"); }
}

/* Cards sitting on a photographic section need their own opaque ground back —
   inheriting the white-on-image treatment would make them unreadable. */
.shot .card {
  background: rgba(255, 252, 245, 0.96);
  border-color: rgba(255, 255, 255, 0.28);
}
.shot .card h3 { color: var(--peacock-deep); }
.shot .card p,
.shot .card li { color: var(--ink-soft); }

/* The brand hierarchy carries its own colours from two-class rules
   (`.tier .t-name`, `.tier .t-desc`) which outrank the white-on-image rules
   above. On paper those colours are correct; over a photograph they measured
   2.3:1 and 2.2:1, well under the 4.5:1 minimum. Three classes to win. */
.shot .tier { border-left-color: rgba(255, 255, 255, 0.30); }
.shot .tier .t-name { color: #A8EADC; }
.shot .tier .t-desc { color: rgba(255, 255, 255, 0.88); }

/* The journey pills are a near-white pill on paper. Left alone, the
   white-on-image rule above would paint white text onto them. Over a
   photograph they become glass instead: translucent, light text, legible
   whatever is behind. */
.shot .flow li {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.30);
  color: #FFFFFF;
  backdrop-filter: blur(3px);
}
.shot .flow li::before { color: #9FE6D8; }
.shot .flow li:last-child {
  background: rgba(159, 230, 216, 0.22);
  border-color: rgba(159, 230, 216, 0.5);
}

/* Full-width artwork band inside a section. */
.band {
  margin: 42px 0 0;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 14px 36px rgba(30, 38, 34, 0.12);
}
.band img {
  display: block;
  width: 100%;
  height: auto;               /* see note on .hero-art img */
  aspect-ratio: 14 / 6;
  object-fit: cover;
}

/* The artwork is a light warm composition; on the dark theme it reads as a
   glaring panel, so knock it back to sit with the page. */
@media (prefers-color-scheme: dark) {
  .band img,
  .card-photo img { filter: brightness(0.78) saturate(1.04); }

  /* The full-bleed sections are already dark by design, so they only need a
     nudge — knocking them back as hard as the cards would flatten them to
     black. The scrim is deepened instead of the image being dimmed twice. */
  .shot::before { filter: brightness(0.86); }
}

@media (max-width: 880px) {
  .hero-grid { grid-template-columns: 1fr; gap: 38px; }
  .hero-art img { aspect-ratio: 16 / 10; }
  .band img { aspect-ratio: 16 / 9; }
}
.hero .tagline {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--blue);
  margin-bottom: 1.4em;
}

/* Pale peacock ONLY over a photograph. Scoped to .shot because the hero on
   privacy.html and 404.html has no image behind it -- there, this colour
   measured 1.22:1 against the linen ground, which is invisible. */
.shot .tagline { color: #A8EADC; }
.hero .actions { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 14px; }

/* --- Cards --------------------------------------------------------------- */

.grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  margin-top: 38px;
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 26px;
}
/* Full-bleed photo across the top of a card. The negative margins cancel the
   card's own padding, so the image meets the card edge. */
.card-photo {
  margin: -28px -26px 22px;
  border-radius: var(--radius) var(--radius) 0 0;
  overflow: hidden;
  background: var(--bg-alt);
}
.card-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.card h3 { margin-bottom: 0.5em; color: var(--peacock); }
.card p { color: var(--ink-soft); font-size: 0.96rem; }

.card ul {
  margin: 0;
  padding-left: 1.1em;
  color: var(--ink-soft);
  font-size: 0.94rem;
}
.card ul li { margin-bottom: 0.3em; }

/* Numbered value cards */
.card .num {
  font-family: var(--serif);
  font-size: 1.5rem;
  color: var(--blue-soft);
  display: block;
  line-height: 1;
  margin-bottom: 0.35em;
}

/* --- Condition chips ----------------------------------------------------- */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
}
.chips li {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 0.9rem;
  color: var(--ink);
  background: var(--surface);
}

/* --- Founders ------------------------------------------------------------ */

.founders {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  margin-top: 38px;
}

.founder {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--blue-soft);
  border-radius: var(--radius);
  padding: 28px 26px;
}
.founder .name {
  font-family: var(--serif);
  font-size: 1.35rem;
  color: var(--ink);
  display: block;
  margin-bottom: 4px;
}
.founder .role {
  font-size: 0.78rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--blue);
  font-weight: 700;
}

/* --- Care journey flow --------------------------------------------------- */

.flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  margin-top: 34px;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.flow li {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 20px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--peacock);
  counter-increment: step;
}

.flow li::before {
  content: counter(step, decimal-leading-zero);
  color: var(--blue-soft);
  margin-right: 11px;
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: 0;
}
.flow li:last-child {
  background: var(--peacock-mist);
  border-color: transparent;
}

/* --- Brand hierarchy ----------------------------------------------------- */

.tier {
  border-left: 2px solid var(--line);
  padding: 4px 0 4px 24px;
  margin: 0 0 6px;
}
.tier + .tier { margin-left: 26px; }
.tier .t-name {
  font-family: var(--serif);
  font-size: 1.1rem;
  color: var(--peacock);
}
.tier .t-desc { font-size: 0.92rem; color: var(--ink-soft); }

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

.contact-list {
  padding: 0;
  margin: 32px 0 0;
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.contact-list dt {
  font-size: 0.74rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--blue);
  font-weight: 700;
  margin-bottom: 5px;
}
.contact-list dd { margin: 0; }
.contact-list .value { color: var(--ink); font-style: normal; }
.contact-list .value a { font-weight: 600; }

.muted-note { font-size: 0.92rem; color: var(--ink-soft); }

/* The contact block now sits on a photograph, so its paper-tuned tokens are
   replaced rather than merely darkened. */
.shot .contact-list dt { color: #9FE6D8; }
.shot .contact-list .value,
.shot .contact-list .value a { color: #FFFFFF; }
.shot .muted-note { color: rgba(255, 255, 255, 0.78); }

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

footer.site {
  border-top: 1px solid var(--line);
  padding: 44px 0;
  font-size: 0.88rem;
  color: var(--ink-soft);
}
footer.site .row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 30px;
  align-items: baseline;
}
footer.site .row p { margin: 0; }
footer.site a { color: var(--ink-soft); }
footer.site .units { margin-left: auto; }

/* --- Responsive ---------------------------------------------------------- */

@media (max-width: 760px) {
  body { font-size: 16px; }
  section { padding: 58px 0; }
  .hero { padding: 62px 0 54px; }
  nav.site a { margin-left: 0; margin-right: 20px; }
  .brand { margin-right: 0; width: 100%; }
  footer.site .units { margin-left: 0; }
}

/* --- Print --------------------------------------------------------------- */
/* Patients print this page for the address and hours — drop the chrome and
   keep the contact details legible in black on white. */

@media print {
  :root {
    --bg: #FFFFFF;
    --bg-alt: #FFFFFF;
    --surface: #FFFFFF;
    --ink: #000000;
    --ink-soft: #333333;
    --peacock: #000000;
    --blue: #000000;
    --line: #999999;
  }

  body { font-size: 11pt; line-height: 1.45; }

  header.site,
  nav.site,
  .call,
  .skip,
  .actions,
  .btn { display: none !important; }

  section { padding: 14pt 0; }
  .hero { padding: 0 0 14pt; background: none; }
  h1 { font-size: 20pt; }
  h2 { font-size: 14pt; }

  /* Keep a card or a contact entry from splitting across pages. */
  .card,
  .founder,
  .contact-list > div,
  .tier { break-inside: avoid; }

  .card,
  .founder,
  .chips li,
  .flow li { border: 1px solid var(--line); }

  /* Spell out external link targets; tel: and mailto: already print their text. */
  a[href^="http"]::after { content: " [" attr(href) "]"; font-size: 9pt; }
}

/* ==========================================================================
   Craft layer — motion, depth and interaction

   Everything here is an enhancement over a page that already works. Each
   piece is gated so that it degrades to the plain layout rather than to a
   broken one:

     - reveal animations are scoped to `.js`, which the script adds, so with
       JavaScript blocked the content is simply visible
     - every transition is inside `prefers-reduced-motion: no-preference`
     - the header's scrolled state is cosmetic only

   No parallax, and no `background-attachment: fixed`. Both force a repaint on
   every scroll frame and judder on the phones most of this traffic uses.
   ========================================================================== */

/* --- Display type -------------------------------------------------------- */

/* The hero is the one place the serif is allowed to be genuinely large.
   Tighter tracking as it scales up, because letterspacing tuned for body
   copy looks loose at display sizes. */
.hero h1 {
  font-size: clamp(2.5rem, 1.5rem + 4.2vw, 4rem);
  letter-spacing: -0.022em;
  line-height: 1.04;
}
.hero .lede { font-size: clamp(1.06rem, 1rem + 0.4vw, 1.24rem); }
.feature h2 { letter-spacing: -0.018em; }

/* --- Depth on the photographic sections ---------------------------------- */

/* A vignette, barely there, so the full-bleed sections have a centre rather
   than reading as a flat rectangle of image. */
.shot::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
    120% 90% at 50% 45%,
    transparent 42%,
    rgba(6, 16, 15, 0.30) 100%
  );
}

/* --- Cards --------------------------------------------------------------- */

.card { position: relative; overflow: hidden; }

@media (prefers-reduced-motion: no-preference) {
  .card {
    transition:
      transform 0.4s cubic-bezier(0.2, 0.6, 0.2, 1),
      box-shadow 0.4s cubic-bezier(0.2, 0.6, 0.2, 1),
      border-color 0.4s ease;
  }
  .card-photo img {
    transition: transform 0.85s cubic-bezier(0.2, 0.6, 0.2, 1);
    will-change: transform;
  }
  .card:hover,
  .card:focus-within {
    transform: translateY(-5px);
    box-shadow: 0 20px 46px rgba(30, 38, 34, 0.15);
    border-color: color-mix(in srgb, var(--peacock) 34%, transparent);
  }
  /* The crop breathes rather than zooms -- 3% is enough to feel alive and
     small enough that faces stay inside the frame. */
  .card:hover .card-photo img,
  .card:focus-within .card-photo img { transform: scale(1.035); }
}

@media (prefers-color-scheme: dark) {
  .card:hover,
  .card:focus-within { box-shadow: 0 20px 46px rgba(0, 0, 0, 0.5); }
}

/* --- Bands --------------------------------------------------------------- */

.band { position: relative; }
@media (prefers-reduced-motion: no-preference) {
  .band img {
    transition: transform 1.1s cubic-bezier(0.2, 0.6, 0.2, 1);
  }
  .band:hover img { transform: scale(1.02); }
}

/* --- Header -------------------------------------------------------------- */

header.site {
  transition:
    background-color 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}
header.site .wrap { transition: padding 0.3s cubic-bezier(0.2, 0.6, 0.2, 1); }

/* Set by the script once the page has scrolled past the fold marker. */
header.site.is-scrolled {
  background: color-mix(in srgb, var(--bg) 97%, transparent);
  box-shadow: 0 8px 28px rgba(30, 38, 34, 0.10);
}
@media (prefers-color-scheme: dark) {
  header.site.is-scrolled { box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45); }
}
@media (min-width: 761px) {
  header.site.is-scrolled .wrap { padding-top: 9px; padding-bottom: 9px; }
}

/* --- Scroll reveal ------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  /* Scoped to .js: without the script these selectors never match and the
     content renders at full opacity, which is the correct fallback. */
  .js .reveal {
    opacity: 0;
    transform: translateY(20px);
    transition:
      opacity 0.75s cubic-bezier(0.2, 0.6, 0.2, 1),
      transform 0.75s cubic-bezier(0.2, 0.6, 0.2, 1);
  }
  .js .reveal.is-visible {
    opacity: 1;
    transform: none;
  }
  /* Children of a revealed group come in just behind it, so a row of cards
     lands as a sequence rather than a block. */
  .js .reveal-group > * {
    opacity: 0;
    transform: translateY(16px);
    transition:
      opacity 0.65s cubic-bezier(0.2, 0.6, 0.2, 1),
      transform 0.65s cubic-bezier(0.2, 0.6, 0.2, 1);
  }
  .js .reveal-group.is-visible > * { opacity: 1; transform: none; }
  .js .reveal-group.is-visible > *:nth-child(2) { transition-delay: 0.07s; }
  .js .reveal-group.is-visible > *:nth-child(3) { transition-delay: 0.14s; }
  .js .reveal-group.is-visible > *:nth-child(4) { transition-delay: 0.21s; }
  .js .reveal-group.is-visible > *:nth-child(5) { transition-delay: 0.28s; }
}

/* --- Focus ---------------------------------------------------------------- */

/* One visible focus ring everywhere, including over photographs where the
   default UA ring can vanish. */
a:focus-visible,
button:focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--peacock);
  outline-offset: 3px;
  border-radius: 6px;
}
.shot a:focus-visible,
.shot .btn:focus-visible { outline-color: #A8EADC; }

/* --- WebP ----------------------------------------------------------------

   Inline images use <picture>, which needs no CSS beyond making the wrapper
   a block so the existing `.card-photo img` / `.band img` rules still govern
   sizing and the inline baseline gap does not reappear.

   The full-bleed backgrounds are custom properties, and custom properties
   accept almost any value at parse time -- an unsupported `image-set()` would
   NOT be discarded, it would simply break. Hence the @supports guard rather
   than the usual "declare the fallback first" trick.

   WebP is only used where it actually won. Three images (both philosophy
   crops and the desktop About hero) compressed no better or worse as WebP --
   dense foliage defeats it -- so they stay JPEG and are absent below.
   ------------------------------------------------------------------------- */

.card-photo picture,
.band picture { display: block; }

@supports (background-image: image-set(url("images/hero-wide.webp") type("image/webp"))) {
  .hero {
    --shot-image: image-set(
      url("images/hero-wide.webp") type("image/webp"),
      url("images/hero-wide.jpg") type("image/jpeg")
    );
  }
  .feature--metasphere {
    --shot-image: image-set(
      url("images/metasphere.webp") type("image/webp"),
      url("images/metasphere.jpg") type("image/jpeg")
    );
  }
  .feature--contact {
    --shot-image: image-set(
      url("images/contact.webp") type("image/webp"),
      url("images/contact.jpg") type("image/jpeg")
    );
  }

  @media (max-width: 760px) {
    .hero {
      --shot-image: image-set(
        url("images/hero-wide-sm.webp") type("image/webp"),
        url("images/hero-wide-sm.jpg") type("image/jpeg")
      );
    }
    .hero--about {
      --shot-image: image-set(
        url("images/hero-about-sm.webp") type("image/webp"),
        url("images/hero-about-sm.jpg") type("image/jpeg")
      );
    }
    .feature--metasphere {
      --shot-image: image-set(
        url("images/metasphere-sm.webp") type("image/webp"),
        url("images/metasphere-sm.jpg") type("image/jpeg")
      );
    }
    .feature--contact {
      --shot-image: image-set(
        url("images/contact-sm.webp") type("image/webp"),
        url("images/contact-sm.jpg") type("image/jpeg")
      );
    }
  }
}

/* --- Utility classes replacing inline styles ------------------------------

   These existed as `style="..."` attributes. They were moved here so the
   Content-Security-Policy can use `style-src 'self'` with no `unsafe-inline`:
   CSP governs inline style *attributes* too, so a single one of them would
   have forced the policy open for the whole site.
   ------------------------------------------------------------------------- */

/* Eyebrow label introducing a second list further down a section. */
.eyebrow-spaced { margin-top: 48px; }

/* Quiet qualifying note under a list of conditions or programmes. */
.note {
  margin-top: 22px;
  color: var(--ink-soft);
  font-size: 0.94rem;
  max-width: 62ch;
}

/* Short biography under a founder's name and role. */
.founder-bio {
  margin-top: 14px;
  color: var(--ink-soft);
  font-size: 0.95rem;
}

/* <address> is italic by default in every browser; the contact blocks are not. */
address.plain { font-style: normal; }

/* Row of call-to-action buttons at the foot of a section. */
.actions {
  margin-top: 34px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
/* The hero declares its own margin, so it must not inherit the 34px above. */
.hero .actions { margin-top: 34px; }

.stack-top { margin-top: 34px; }
.stack-flush { margin-top: 0; }

/* Indent steps of the brand hierarchy so the nesting is visible.

   Qualified with `.tier` deliberately. The sibling rule `.tier + .tier` above
   carries two classes, so a bare `.tier-indent-1` would lose to it and every
   step would flatten to the same 26px. These were inline styles before, which
   won on specificity by default; as classes they have to earn it. */
.tier.tier-indent-1 { margin-left: 52px; }
.tier.tier-indent-2 { margin-left: 78px; }

@media (max-width: 640px) {
  /* The indents become noise once the column is narrow. */
  .tier.tier-indent-1,
  .tier.tier-indent-2 { margin-left: 0; }
}

/* ==========================================================================
   Multi-page structure

   The site was one long homepage plus About. It is now six pages, so three
   things are needed: a shorter hero for interior pages, a background per
   page, and the gallery.
   ========================================================================== */

/* --- Navigation ----------------------------------------------------------- */

/* The brand's margin-right:auto already pushes everything after it rightward.
   This makes that explicit and keeps the menu hard right when the header wraps
   onto two rows on narrower screens. */
nav.site {
  margin-left: auto;
  text-align: right;
}

@media (max-width: 900px) {
  /* Six items no longer fit beside the brand and the phone pill. Let the menu
     take its own full-width row rather than squeezing the lot. */
  header.site .wrap { row-gap: 4px; }
  nav.site {
    order: 3;
    width: 100%;
    text-align: left;
    margin-left: 0;
    overflow-x: auto;
    white-space: nowrap;
    /* Trim the scrollbar's visual weight on touch devices. */
    scrollbar-width: none;
  }
  nav.site::-webkit-scrollbar { display: none; }
  nav.site a:first-child { margin-left: 0; }
}

/* --- Interior page heroes -------------------------------------------------

   Shorter than the homepage hero: on an interior page the visitor has already
   chosen where they are going, so the hero introduces rather than sells.
   -------------------------------------------------------------------------- */

.hero--page {
  padding: clamp(66px, 8vw, 96px) 0 clamp(60px, 7vw, 86px);
}
.hero--page h1 { max-width: 20ch; }

/* Each interior hero needs its own photograph, or `--shot-image` is undefined
   and the scrim paints over nothing. */
.hero--metabolic {
  --shot-scrim: linear-gradient(
    100deg,
    rgba(9, 24, 22, 0.84) 0%,
    rgba(9, 24, 22, 0.74) 45%,
    rgba(9, 24, 22, 0.52) 100%
  );
  --shot-image: url("images/band-care.jpg");
}
.hero--care {
  --shot-scrim: linear-gradient(
    100deg,
    rgba(9, 24, 22, 0.82) 0%,
    rgba(9, 24, 22, 0.72) 45%,
    rgba(9, 24, 22, 0.50) 100%
  );
  --shot-image: url("images/philosophy.jpg");
}
.hero--gallery {
  --shot-scrim: linear-gradient(
    100deg,
    rgba(9, 24, 22, 0.84) 0%,
    rgba(9, 24, 22, 0.74) 45%,
    rgba(9, 24, 22, 0.52) 100%
  );
  --shot-image: url("images/band-centre.jpg");
}

@media (max-width: 760px) {
  .hero--metabolic { --shot-image: url("images/band-care-sm.jpg"); }
  .hero--gallery { --shot-image: url("images/band-centre-sm.jpg"); }
}

@supports (background-image: image-set(url("images/band-care.webp") type("image/webp"))) {
  .hero--metabolic {
    --shot-image: image-set(
      url("images/band-care.webp") type("image/webp"),
      url("images/band-care.jpg") type("image/jpeg")
    );
  }
  .hero--gallery {
    --shot-image: image-set(
      url("images/band-centre.webp") type("image/webp"),
      url("images/band-centre.jpg") type("image/jpeg")
    );
  }
  @media (max-width: 760px) {
    .hero--metabolic {
      --shot-image: image-set(
        url("images/band-care-sm.webp") type("image/webp"),
        url("images/band-care-sm.jpg") type("image/jpeg")
      );
    }
    .hero--gallery {
      --shot-image: image-set(
        url("images/band-centre-sm.webp") type("image/webp"),
        url("images/band-centre-sm.jpg") type("image/jpeg")
      );
    }
  }
}

/* --- "Read more" links on the homepage summary cards ---------------------- */

.more {
  font-weight: 650;
  font-size: 0.94rem;
  text-decoration: none;
}
.more:hover { text-decoration: underline; }

/* --- Gallery -------------------------------------------------------------- */

.gallery-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  margin-top: 38px;
}

.shot-tile {
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface);
}
.shot-tile img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.shot-tile figcaption {
  padding: 12px 16px 14px;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

@media (prefers-reduced-motion: no-preference) {
  .shot-tile img { transition: transform 0.85s cubic-bezier(0.2, 0.6, 0.2, 1); }
  .shot-tile:hover img { transform: scale(1.035); }
}
@media (prefers-color-scheme: dark) {
  .shot-tile img { filter: brightness(0.78) saturate(1.04); }
}

/* Honest empty state while real photographs are being taken. Stock imagery is
   used elsewhere to illustrate a discipline; in a gallery it would read as
   "this is our centre", which would not be true. */
.gallery-empty {
  max-width: 640px;
  margin: 0 auto;
  padding: 52px 0;
  text-align: center;
}
.gallery-empty .lede { margin-left: auto; margin-right: auto; }
.gallery-empty .actions { justify-content: center; }

/* The homepage summary is exactly four cards. The default auto-fit grid gives
   three across with a lone orphan beneath, which reads as a mistake. Two-up
   keeps it balanced and gives the images room to be worth showing. */
@media (min-width: 760px) {
  .grid--2up { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   Page rail — seven dashes on the right edge, one per page

   A compact index of the whole site, always reachable without returning to the
   top. It is an *addition* to the header menu, never a replacement: it is
   hidden on narrower screens, so the header must always carry full navigation.
   ========================================================================== */

/* Visually hidden but read aloud. A bare dash announces nothing, so every
   link carries a real name for screen readers. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.pagerail {
  /* Hidden by default; switched on only where there is room beside the
     1080px content column. See the media query below. */
  display: none;
}

@media (min-width: 1180px) {
  .pagerail {
    position: fixed;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 13px;

    padding: 15px 11px;
    border: 1px solid var(--line);
    border-radius: 999px;
    /* Its own ground, so the dashes have predictable contrast whether the
       page behind is a photograph or the paper background. */
    background: color-mix(in srgb, var(--surface) 76%, transparent);
    backdrop-filter: blur(8px);
  }

  .pagerail a {
    position: relative;
    display: block;
    padding: 3px 0;
    line-height: 0;
    text-decoration: none;
  }

  .pagerail-dash {
    display: block;
    width: 16px;
    height: 2px;
    border-radius: 2px;
    background: var(--ink-soft);
    opacity: 0.45;
    transition:
      width 0.25s cubic-bezier(0.2, 0.6, 0.2, 1),
      opacity 0.25s ease,
      background-color 0.25s ease;
  }

  .pagerail a:hover .pagerail-dash,
  .pagerail a:focus-visible .pagerail-dash {
    width: 26px;
    opacity: 1;
    background: var(--peacock);
  }

  /* The page you are on: longer, solid, in the brand colour. */
  .pagerail a[aria-current="page"] .pagerail-dash {
    width: 30px;
    opacity: 1;
    background: var(--peacock);
  }

  /* Name of the page, revealed to the left on hover or keyboard focus.
     Absolutely positioned so revealing it never resizes the rail. */
  .pagerail-label {
    position: absolute;
    right: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%) translateX(6px);
    padding: 4px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    color: var(--ink);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.2, 0.6, 0.2, 1);
    box-shadow: 0 6px 20px rgba(30, 38, 34, 0.12);
  }

  .pagerail a:hover .pagerail-label,
  .pagerail a:focus-visible .pagerail-label {
    opacity: 1;
    transform: translateY(-50%);
  }

  .pagerail a:focus-visible {
    outline: 2px solid var(--peacock);
    outline-offset: 4px;
    border-radius: 4px;
  }
}

@media (prefers-color-scheme: dark) {
  .pagerail-label { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5); }
}

@media (prefers-reduced-motion: reduce) {
  .pagerail-dash,
  .pagerail-label { transition: none; }
}

/* A wide gallery image that spans the whole grid rather than sitting in one
   column — used where the usable, face-free part of a photograph is a short
   wide band and forcing it into a 3:2 tile would either crop people back in
   or upscale a small region into mush. */
.gallery-band {
  grid-column: 1 / -1;
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface);
}
.gallery-band img {
  display: block;
  width: 100%;
  height: auto;      /* natural aspect ratio; no forced crop */
}
.gallery-band figcaption {
  padding: 12px 16px 14px;
  font-size: 0.9rem;
  color: var(--ink-soft);
}
@media (prefers-color-scheme: dark) {
  .gallery-band img { filter: brightness(0.78) saturate(1.04); }
}