/* base.css — reset, element defaults, layout primitives, view transitions. Rarely edited. */

/* Self-hosted web fonts (2026-10-05, mobile pass): the same Fraunces + Nunito that Google Fonts served, as the latin subset + a 1 KB ₹ (U+20B9) file each.
   No third-party request before first paint (the old render-blocking fonts.googleapis.com stylesheet cost 2 extra connections on a phone), no Google call at all.
   font-display: swap + the metric-matched fallbacks below keep the layout still while the files arrive. Update ?v= when a file changes. */
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 500 800; font-display: swap; src: url(/static/fonts/fraunces-latin.woff2?v=1) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 500 800; font-display: swap; src: url(/static/fonts/fraunces-rupee.woff2?v=1) format("woff2"); unicode-range: U+20B9; }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 400 800; font-display: swap; src: url(/static/fonts/nunito-latin.woff2?v=1) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 400 800; font-display: swap; src: url(/static/fonts/nunito-rupee.woff2?v=1) format("woff2"); unicode-range: U+20B9; }

/* Metric-matched fallbacks: system fonts rescaled to the web fonts' widths so the swap doesn't shift layout.
   Re-measured 2026-10-04 at the weights the site really uses (Fraunces 650, Nunito 500): the old 93.4% was tuned to Fraunces 400 and left
   headings ~9% too narrow, so wrapped lines on inner pages jumped (CLS 0.25 on /services/safety). Vertical overrides scaled by the same factor. */
@font-face { font-family: "Fraunces Fallback"; src: local("Times New Roman"), local("Liberation Serif"), local("Georgia");
  size-adjust: 101.6%; ascent-override: 96.2%; descent-override: 25.1%; line-gap-override: 0%; }
@font-face { font-family: "Nunito Fallback"; src: local("Arial"), local("Liberation Sans"), local("Helvetica");
  size-adjust: 101.9%; ascent-override: 99.2%; descent-override: 34.6%; line-gap-override: 0%; }

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body, h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
  ul, ol { margin: 0; padding: 0; }
  img, svg, video, canvas, picture { display: block; max-width: 100%; }
  img, video { height: auto; }
  button, input, select, textarea { font: inherit; color: inherit; }
  button { cursor: pointer; }
  /* [hidden] must always win — `display:flex` on a component would otherwise un-hide it. */
  [hidden] { display: none !important; }
}

@layer base {
  html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 14px); }
  body {
    background: var(--paper); color: var(--ink);
    font-family: var(--font-text); font-size: var(--step-0); line-height: 1.6; font-weight: 500;
    -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
    overflow-x: clip;               /* clip, not hidden: keeps position:sticky working */
    min-height: 100dvh;
  }
  h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 650; line-height: 1.1; letter-spacing: -.012em; text-wrap: balance; font-variation-settings: "SOFT" 100; }
  h1 { font-size: var(--step-4); }
  h2 { font-size: var(--step-3); }
  h3 { font-size: var(--step-1); line-height: 1.2; }
  p { text-wrap: pretty; max-width: var(--measure); }
  p + p { margin-top: var(--space-3); }
  a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22em; }
  strong, b { font-weight: 750; }
  ::selection { background: var(--sun); color: var(--sun-ink); }
  s { text-decoration-thickness: 2px; text-decoration-color: color-mix(in srgb, currentColor 70%, transparent); }

  /* Focus: always visible, two-tone so it reads on paper, sun and deep sage alike. */
  :focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 8px; box-shadow: 0 0 0 6px color-mix(in srgb, var(--sun) 70%, transparent); }
  :where(.surface-deep, .site-footer, .sheet--deep) :focus-visible { outline-color: var(--on-deep); box-shadow: 0 0 0 6px color-mix(in srgb, var(--sun) 55%, transparent); }
  main:focus { outline: none; }

  .container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
  .visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 10000; background: var(--ink); color: var(--paper); padding: .7rem 1.1rem; border-radius: var(--r-pill); transition: top var(--dur-2) var(--ease); }
  .skip-link:focus { top: 1rem; }

  /* Icons: stroke icons draw in currentColor; filled ones carry their own fill (icons.html). */
  .i { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .i--lg { width: 1.6em; height: 1.6em; }
  .i--fill { fill: currentColor; stroke: none; }

  /* Type utilities */
  .eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-size: var(--step--1); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--amber); }
  .lead { font-size: var(--step-1); line-height: 1.5; color: var(--ink-2); font-weight: 500; }
  .fine { font-size: var(--step--1); color: var(--ink-3); line-height: 1.5; }
  .fine .i { display: inline-block; vertical-align: -.2em; margin-right: .25em; }
  .hide-sm { display: none !important; }
  @media (min-width: 560px) { .hide-sm { display: inline-flex !important; } .show-sm { display: none !important; } }
  @media (min-width: 900px) { .hide-sm { display: inline-flex !important; } }

  /* Surfaces: a section picks one; children inherit the right text + link colours. */
  .surface-paper { background: var(--paper); color: var(--ink); }
  .surface-paper-2 { background: var(--paper-2); color: var(--ink); }
  .surface-sage { background: var(--sage-tint); color: var(--ink); }
  .surface-deep { background: var(--sage-deep); color: var(--on-deep); }
  .surface-deep .eyebrow { color: var(--sun); }
  .surface-deep .fine, .surface-deep .lead { color: var(--on-deep-2); }
  .surface-sun { background: var(--sun); color: var(--sun-ink); }
  .surface-sun .eyebrow, .surface-sun .lead, .surface-sun .fine { color: var(--sun-ink); }
}

/* ---- Cross-page transitions: the header stays put, the rest cross-fades (Chrome/Edge/Safari 18.2+; others ignore it) ---- */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .26s; animation-timing-function: var(--ease); }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}