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

:root {
  /* Ground: an off-white, half a step off paper, so the dark reads deeper. */
  --paper: #f4f6f7;
  --paper-shelf: #e4e9ec;
  /* Ink: near-black carrying the navy of the field, never pure black. */
  --ink: #141a22;
  --ink-soft: #39414c;
  --ink-muted: #5f6875;
  /* Rules carry a slate cast rather than a green one. */
  --line: rgba(20, 35, 55, 0.18);
  --line-soft: rgba(20, 35, 55, 0.09);
  --line-strong: rgba(20, 35, 55, 0.32);
  /* Deep green: the quiet label on the light ground. */
  --accent: #3d6b53;
  --accent-deep: #2d5140;
  /* Fresh green. Only ever on the navy ground. This is the one upbeat
     note in the palette and it carries every primary action. */
  --accent-bright: #7ccfa2;
  /* Deep navy: the dark field. Deep and desaturated enough to read as
     private counsel rather than hospital signage or a portal UI. */
  --espresso: #16283d;
  --espresso-lift: #1f3a56;
  --paper-on-dark: #eef2f5;
  --muted-on-dark: #a6b3c0;
  --font-display: 'Literata', Georgia, serif;
  --font-body: 'Work Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  /* Type scale. Ten roles, and nothing off-scale.
     micro is the table column head and the only uppercase on the site. */
  --t-micro: 0.7rem;
  --t-small: 0.84rem;
  --t-ui: 0.84rem;
  --t-body: 1rem;
  --t-lead: 1.12rem;
  --t-term: 1.35rem;
  --t-mark: 1.5rem;
  --t-fig: 2rem;
  --nav-h: 5rem;
  --content: 60rem;
  --max-width: 1220px;
  --gutter: 2.5rem;
  --measure: 52rem;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --transition: 0.4s var(--ease);
}

/* Announced, not shown. */
.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;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1100;
  background: var(--paper);
  color: var(--ink);
  padding: 0.9rem 1.4rem;
  font-family: var(--font-body);
  font-size: var(--t-ui);
  font-weight: 500;
  text-decoration: none;
  border: 1px solid var(--ink);
}
.skip-link:focus { left: 1rem; top: 1rem; }

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.hero-band :focus-visible,
nav :focus-visible { outline-color: var(--accent-bright); }

body {
  font-family: var(--font-body);
  font-weight: 400;
  background: var(--paper);
  color: var(--ink-soft);
  line-height: 1.75;
  text-rendering: optimizeLegibility;
  text-wrap: pretty;
  overflow-x: hidden;
}

/* ---- Utility ---- */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

section {
  padding: 2.5rem 0 4.25rem;
}

/* The head stacks: title, then deck, then the lead paragraph, one rhythm on one
   left edge. A deck set parallel to the title made every page open two columns
   wide and then revert to a narrow one, and it put prose on a third alignment. */
.section-head {
  max-width: var(--content);
  margin-bottom: 1.6rem;
}
.section-head .section-heading { margin-bottom: 0; }
.section-head .section-subtext {
  max-width: 36rem;
  margin-top: 1.1rem;
  font-size: var(--t-body);
  line-height: 1.7;
}

.section-heading {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 3.6vw, 3rem);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 1.1rem;
  text-wrap: balance;
}

.section-subtext {
  font-size: var(--t-lead);
  font-weight: 400;
  color: var(--ink-soft);
  max-width: 620px;
  line-height: 1.85;
}

/* ---- Navigation ---- */
body > nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  padding: 1.15rem 2.5rem;
  background: var(--espresso);
  border-bottom: 1px solid rgba(124, 207, 162, 0.28);
  transition: box-shadow var(--transition);
}
body > nav.scrolled {
  box-shadow: 0 18px 40px -30px rgba(17, 26, 21, 0.55);
}
nav .nav-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
nav .logo {
  font-family: var(--font-display);
  font-size: var(--t-mark);
  font-weight: 500;
  color: var(--paper-on-dark);
  text-decoration: none;
  line-height: 1;
}
nav .logo span { color: var(--accent-bright); }
.brand-lockup {
  display: flex;
  align-items: baseline;
  gap: 0.95rem;
  flex: none;
}
.brand-locality {
  font-size: var(--t-small);
  font-weight: 400;
  color: var(--muted-on-dark);
  white-space: nowrap;
}
nav .nav-links {
  display: flex;
  gap: 2rem;
  list-style: none;
  align-items: center;
}
nav .nav-links a {
  display: inline-block;
  padding: 0.35rem 0;
  font-size: var(--t-ui);
  font-weight: 500;
  color: var(--muted-on-dark);
  text-decoration: none;
  transition: color var(--transition);
}
nav .nav-links a:hover { color: var(--accent-bright); }
nav .nav-links a.active:not(.nav-cta) {
  color: var(--paper-on-dark);
  box-shadow: inset 0 -2px 0 var(--accent-bright);
  padding-bottom: 0.35rem;
}
nav .nav-links a.nav-cta {
  background: var(--accent-bright);
  border: 1px solid var(--accent-bright);
  color: var(--espresso) !important;
  font-weight: 600;
  padding: 0.66rem 1.35rem;
  border-radius: 0;
  white-space: nowrap;
  transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition) !important;
}
nav .nav-links a.nav-cta:hover {
  background: transparent;
  color: var(--accent-bright) !important;
  border-color: var(--accent-bright);
}

.menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  /* padding carries the tap target past 24px on its own */
  padding: 0.6rem 0.25rem;
}
.menu-toggle span {
  display: block;
  width: 26px;
  height: 1px;
  background: var(--paper-on-dark);
  margin: 6px 0;
  transition: transform var(--transition), opacity var(--transition);
}
/* the bars become a cross while the panel is open */
.menu-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle.active span:nth-child(2) { opacity: 0; }
.menu-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---- Hero ---- */
.hero-band {
  background: var(--espresso);
  border-bottom: 1px solid var(--espresso);
}
.hero-band .hero h1 { color: var(--paper-on-dark); }
.hero-band .hero h1 em { color: var(--accent-bright); }
.hero-band .hero-sub { color: var(--muted-on-dark); }
.hero-band .btn {
  background: var(--accent-bright);
  border-color: var(--accent-bright);
  color: var(--espresso);
}
.hero-band .btn:hover {
  background: transparent;
  color: var(--accent-bright);
}
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
  gap: 0 clamp(2.5rem, 5vw, 5.5rem);
  align-items: start;
  text-align: left;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: calc(var(--nav-h) + 4.5rem) var(--gutter) 5.5rem;
}
.hero-lede { max-width: none; }
/* the deck starts a line lower than the headline's cap height, so the two
   columns read as set together rather than as two things that happen to align */
.hero-aside { margin-top: 0.6rem; }
.home-cap { padding-top: 0.5rem; padding-bottom: clamp(3.5rem, 6vw, 5.5rem); }
/* ---- Tabbed views ---- */
.view { padding-top: calc(var(--nav-h) + 4.5rem); }
#home { padding: 0; }
[hidden] { display: none !important; }

.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 4.4vw, 3.8rem);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin-bottom: 0;
  max-width: 36rem;
  text-wrap: balance;
}
.hero-sub {
  font-size: var(--t-lead);
  font-weight: 400;
  color: var(--ink-soft);
  max-width: 58ch;
  line-height: 1.75;
  margin: 0 0 2.75rem;
}
.hero-note {
  font-size: var(--t-small);
  line-height: 1.7;
  max-width: 74ch;
  margin-top: 1.5rem;
  color: var(--ink-muted);
}
.hero-band .hero-note { color: var(--muted-on-dark); }
/* The three pillars are the spine of the pitch, so they get an index the way
   the chain does. Numerals, not icons: this site has no iconography and
   decorative glyphs on a page about serious illness read as clip art. */
.prose h2 .idx {
  font-family: var(--font-body);
  font-size: var(--t-small);
  font-weight: 400;
  color: var(--accent);
  margin-right: 0.85rem;
  vertical-align: 0.3em;
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  background: var(--ink);
  color: var(--paper);
  padding: 1.15rem 2.4rem;
  font-family: var(--font-body);
  font-size: var(--t-ui);
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--ink);
  cursor: pointer;
  transition: background var(--transition), color var(--transition), transform var(--transition);
}
.btn:hover {
  background: transparent;
  color: var(--ink);
  transform: translateY(-2px);
}
.btn svg { width: 16px; height: 16px; transition: transform var(--transition); }
.btn:hover svg { transform: translateX(5px); }

.process-note {
  max-width: 36rem;
  margin-top: 3.5rem;
  font-size: var(--t-body);
  font-weight: 400;
  color: var(--ink-soft);
  line-height: 1.8;
  max-width: var(--measure);
}
.process-note strong { color: var(--ink); font-weight: 500; }

/* ---- Contact ---- */
.contact-inner { max-width: var(--measure); margin: 3.5rem 0 0; text-align: left; }
.contact-inner .section-heading { margin-top: 1.75rem; }
.contact-inner .section-subtext { margin: 0 0 2.5rem; }
.boutique-banner {
  max-width: none;
  margin: 0 0 2.75rem;
  padding: 1.75rem 2rem;
  background: var(--paper);
  border: 1px solid var(--line);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.75;
  color: var(--ink-soft);
  text-align: left;
}
.boutique-banner strong { color: var(--ink); font-weight: 500; }
.required { color: var(--accent); font-weight: 500; margin-left: 2px; }
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  text-align: left;
}
.form-row { display: flex; gap: 1.5rem; }
.form-group { flex: 1; display: flex; flex-direction: column; gap: 0.5rem; }
.form-group label {
  font-size: var(--t-ui);
  font-weight: 500;
  color: var(--ink-muted);
}
.form-group input,
.form-group select,
.form-group textarea {
  font-family: var(--font-body);
  font-size: var(--t-body);
  font-weight: 400;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 0.95rem 1.1rem;
  border-radius: 0;
  transition: border-color var(--transition);
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--ink-muted); }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { border-color: var(--accent); }
.form-group textarea { resize: vertical; min-height: 130px; }
.form-group select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='%234a5c6a'%3E%3Cpath d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.1rem center;
  padding-right: 2.5rem;
}
.form-group select option { background: var(--paper); color: var(--ink); }
.form-submit {
  align-self: flex-start;
  margin-top: 0.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  background: var(--ink);
  color: var(--paper);
  padding: 1.15rem 2.4rem;
  font-family: var(--font-body);
  font-size: var(--t-ui);
  font-weight: 600;
  border: 1px solid var(--ink);
  cursor: pointer;
  transition: background var(--transition), color var(--transition), transform var(--transition);
}
.form-submit:hover { background: transparent; color: var(--ink); transform: translateY(-2px); }
.contact-more {
  /* left rail, like everything else on the page. The centring here was left
     over from a standalone contact page that was centred. */
  margin-top: 2.75rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 0.75rem 1.75rem;
  font-size: var(--t-small);
}
.contact-more a {
  color: var(--ink-muted);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  padding-bottom: 2px;
  transition: color var(--transition), border-color var(--transition);
}
.contact-more a:hover { color: var(--accent); border-color: var(--accent); }

/* ---- Prose. The founder's history is paragraphs, not a table: a personal
   account read as a table is cold, and this page carries the trust. ---- */
/* THE LAYOUT SYSTEM,
stated once.
   Every page is one content column,
--content wide. Inside it:
     - prose sits at --measure (about 70 characters) and nothing widens it
     - term-and-description content is a .phases definition list: term left,
description right,
which is the only two-column pattern on the site
     - the chain is the one bespoke grid,
because a failure rail is worth it
   A section is EITHER a .row (heading left,
and no element wider than --content,
so a
   hairline never spans further than the text under it. */
.prose {
  max-width: var(--content);
  margin-top: 1.6rem;
}
/* 36rem is about 70 characters. The page was running 105, which was the real
   readability problem on it, ahead of any copy cut. */
.prose p,
.prose li,
.prose dd,
.prose .lede { max-width: 36rem; }
.prose p {
  font-size: var(--t-body);
  line-height: 1.85;
  color: var(--ink-soft);
}
/* one rhythm: only prose-break gets a rule */
.prose > * + * { margin-top: 1.2rem; }
.prose > :first-child { margin-top: 0; }
.prose h3 {
  font-family: var(--font-display);
  font-size: var(--t-lead);
  font-weight: 400;
  color: var(--ink);
  line-height: 1.35;
  margin-top: 2rem;
  margin-bottom: 0.4rem;
}
.prose .lede { color: var(--ink); }

/* spec blocks read as a datasheet rather than a paragraph in disguise */
.spec { margin-top: 2rem; }
.spec-foot { margin-top: 2rem; }

/* ---- The flow. The only diagram on the site, and it is a composition rather
   than prose, so the layout-grid probe exempts it the way it exempts the hero
   cover. Type comes entirely from existing roles: no new styles. ---- */
.flow {
  max-width: 55.5rem;
  margin-top: 2rem;
}
.flow-row { display: grid; }
/* the single stages sit in the left column, so the flow reads down the left
   edge with one branch to the right, rather than introducing a centred third
   alignment on an otherwise left-aligned page */
.flow-row--one { grid-template-columns: minmax(0, 26rem); justify-content: start; }
.flow-row--two { grid-template-columns: repeat(2, minmax(0, 26rem)); column-gap: 3.5rem; }
/* a rule above each step rather than a box around it. Four bordered boxes plus
   connectors closed into rectangles, and boxes are the one shape this site does
   not otherwise use: everything else is hairlines. */
.flow-step {
  border-top: 1px solid var(--line-strong);
  padding: 1rem 0 0.5rem;
}
.flow-name {
  display: block;
  font-family: var(--font-display);
  font-size: var(--t-lead);
  line-height: 1.3;
  color: var(--ink);
}
.flow-price {
  display: block;
  margin-top: 0.2rem;
  font-size: var(--t-body);
  font-weight: 500;
  color: var(--ink);
}
.flow-note {
  display: block;
  margin-top: 0.6rem;
  font-size: var(--t-small);
  line-height: 1.6;
  color: var(--ink-muted);
}
/* The transition between stages: a hairline stem above and below a short
   label. A drawn fork put a horizontal bar parallel to the step rules, which
   read as a doubled line, and boxes-and-arrows fights a type-led page. The
   label is what carries the flow. */
.flow-gate {
  position: relative;
  margin: 0;
  padding: 3rem 0 3rem 15.5rem;
  font-size: var(--t-small);
  line-height: 1.6;
  color: var(--ink-muted);
}
.flow-gate::before,
.flow-gate::after {
  content: "";
  position: absolute;
  /* the centre of the left column, so the stem lines up with the stages */
  left: 13rem;
  width: 1px;
  height: 1.9rem;
  background: var(--line-strong);
}
.flow-gate::before { top: 0; }
.flow-gate::after { bottom: 0; }

.flow-caption {
  max-width: 36rem;
  margin-top: 1.75rem;
  font-size: var(--t-small);
  line-height: 1.7;
  color: var(--ink-muted);
}

/* A section: its heading in the label column, its content in the body column.
   This is the same label-left / content-right relationship as the section head
   and the definition lists, so the page keeps one structure the whole way down
   instead of opening two-column and then reverting to a single narrow column. */
.row > :first-child { margin-top: 0; }
.row + .row { margin-top: 3rem; }

@media (min-width: 900px) {
  .row {
    display: grid;
    grid-template-columns: minmax(0, 18rem) minmax(0, 36rem);
    column-gap: 3.5rem;
    row-gap: 1.2rem;
    align-items: start;
  }
  .row > h2 { grid-column: 1; margin-top: 0; }
  .row > :not(h2) { grid-column: 2; margin-top: 0; }
  /* the rule belongs to the whole section, not to the heading column */
  .row.prose-break { padding-top: 2.5rem; }
}

/* A section: its heading in the label column, its content in the body column.
   This is the same label-left / content-right relationship as the section head
   and the definition lists, so the page keeps one structure the whole way down
   instead of opening two-column and then reverting to a single narrow column. */
.row > :first-child { margin-top: 0; }
.row + .row { margin-top: 3rem; }

@media (min-width: 900px) {
  .row {
    display: grid;
    grid-template-columns: minmax(0, 18rem) minmax(0, 36rem);
    column-gap: 3.5rem;
    row-gap: 1.2rem;
    align-items: start;
  }
  .row > h2 { grid-column: 1; margin-top: 0; }
  .row > :not(h2) { grid-column: 2; margin-top: 0; }
  /* the rule belongs to the whole section, not to the heading column */
  .row.prose-break { padding-top: 2.5rem; }
}

/* two parallel blocks side by side: the record and the log, or the two
   examples. Each column lands near 70 characters at this container width. */
.spec-pair { margin-top: 2rem; display: grid; gap: 2.5rem 3.5rem; }
.spec-pair .spec { margin-top: 0; }

/* the engagement phases, and the seven tabs: a real two-column definition
   list rather than a stack of terms above their own paragraphs */
.phases { margin-top: 1.75rem; }
.phases dt {
  font-weight: 500;
  color: var(--ink);
  margin-top: 1.75rem;
}
.phases dd { margin: 0.35rem 0 0; max-width: 36rem; }
.phases dd > p + p { margin-top: 0.6rem; }
/* the failure line: quieter than the step, and labelled, so the column is never
   ambiguous about whether it is describing the work or the way it fails */
.phases .breaks {
  font-size: var(--t-small);
  line-height: 1.6;
  color: var(--ink-muted);
}
.phases .breaks strong { color: var(--ink-soft); font-weight: 500; }
/* an optional header naming the two columns. display:contents puts the two
   spans straight into the grid's first row. */
.phases-head { display: contents; }
.phases-head span {
  font-size: var(--t-small);
  line-height: 1.6;
  letter-spacing: 0.05em;
  color: var(--ink-muted);
  padding-bottom: 0.5rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid var(--line-soft);
}

@media (min-width: 900px) {
  .phases {
    display: grid;
    grid-template-columns: minmax(0, 18rem) minmax(0, 36rem);
    column-gap: 3.5rem;
    align-items: baseline;
  }
  .phases dt { grid-column: 1; margin-top: 2rem; }
  .phases dd { grid-column: 2; margin-top: 2rem; }
  .phases dt:first-of-type,
.phases dt:first-of-type + dd { margin-top: 0; }
}
.prose h2 {
  font-family: var(--font-display);
  font-size: var(--t-mark);
  font-weight: 400;
  color: var(--ink);
  line-height: 1.35;
  margin-top: 3.25rem;
}
.prose h2 + p { margin-top: 1.1rem; }
.prose ul { margin-top: 1.4rem; padding-left: 1.15rem; }
.prose li {
  font-size: var(--t-body);
  line-height: 1.85;
  color: var(--ink-soft);
}
.prose li + li { margin-top: 0.7rem; }
.prose li strong { color: var(--ink); font-weight: 500; }
.prose p strong { color: var(--ink); font-weight: 500; }
.prose-break {
  margin-top: 3.25rem;
  padding-top: 3rem;
  border-top: 1px solid var(--line);
}

/* Inline links inside content. Without this they fall back to the browser's
   blue, which the audit cannot see (it passes contrast) but which wrecks the
   palette. Same hairline treatment as the links under the inquiry form. */
.prose a,
.process-note a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 1px;
  transition: color var(--transition), border-color var(--transition);
}
.prose a:hover,
.process-note a:hover { color: var(--accent); border-color: var(--accent); }

/* ---- Footer. The same two columns as every page: identity in the label
   column, prose in the body column. Deliberately NOT a site map: the audit's
   orphan-page rule is what stops a page falling off this site, and a footer
   linking everything from everywhere makes that rule pass vacuously. ---- */
footer {
  background: var(--espresso);
  border-top: 1px solid rgba(124, 207, 162, 0.28);
  padding: 3.25rem 2.5rem;
}
.footer-inner {
  max-width: var(--max-width);
  margin: 0 auto;
}
.footer-id,
.footer-area,
.footer-body a {
  font-size: var(--t-small);
  line-height: 1.7;
}
.footer-id { color: var(--paper-on-dark); }
.footer-area { color: var(--muted-on-dark); }
.footer-area strong { color: var(--paper-on-dark); font-weight: 500; }
.footer-body > p + p { margin-top: 0.9rem; }
.footer-body a {
  display: inline-block;
  color: var(--accent-bright);
  text-decoration: none;
  border-bottom: 1px solid rgba(124, 207, 162, 0.4);
  /* the padding is what carries the tap target past 24px */
  padding: 0.5rem 0 2px;
}
.footer-body a:hover { border-color: var(--accent-bright); }

@media (min-width: 900px) {
  .footer-inner {
    display: grid;
    grid-template-columns: minmax(0, 18rem) minmax(0, 36rem);
    column-gap: 3.5rem;
    align-items: start;
  }
}
@media (max-width: 899px) {
  .footer-id { margin-bottom: 1.25rem; }
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
  .hero { padding: calc(var(--nav-h) + 4rem) var(--gutter) 5rem; }
  body > nav { padding: 1.1rem 1.25rem; }
  body > nav.scrolled { padding: 0.85rem 1.25rem; }
  nav .nav-inner { gap: 1rem; }
  .brand-locality { display: none; }
  /* seven items do not fit here: keep one bar, scroll it sideways */
  nav .nav-inner { flex-wrap: nowrap; }
  nav .nav-links {
    gap: 1.15rem;
    min-width: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  nav .nav-links::-webkit-scrollbar { display: none; }
  nav .nav-links a { font-size: var(--t-small); white-space: nowrap; }
  nav .nav-links a.nav-cta { padding: 0.55rem 1rem; white-space: nowrap; }
}

@media (max-width: 900px) {
  /* one column: two reading measures side by side stop fitting here */
  .hero { grid-template-columns: minmax(0, 1fr); }
  .hero-aside { margin-top: 2.25rem; }
}

@media (max-width: 940px) {
  nav .nav-inner { position: relative; }
  .menu-toggle { display: block; }
  nav .nav-links {
    display: none;
    position: absolute;
    top: calc(100% + 1.1rem);
    left: calc(var(--gutter) * -1);
    right: calc(var(--gutter) * -1);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem 0 1rem;
    background: var(--espresso);
    border-top: 1px solid rgba(124, 207, 162, 0.28);
    box-shadow: 0 24px 40px -28px rgba(0, 0, 0, 0.65);
  }
  nav .nav-links.open { display: flex; }
  nav .nav-links li { border-bottom: 1px solid var(--espresso-lift); }
  nav .nav-links li:last-child { border-bottom: 0; padding: 0.9rem var(--gutter) 0.25rem; }
  nav .nav-links a {
    display: block;
    padding: 0.95rem var(--gutter);
    font-size: var(--t-body);
  }
  /* the desktop underline is an inset box-shadow, which in a full-width panel
     row draws a bright line edge to edge. The green text carries it instead. */
  nav .nav-links a.active:not(.nav-cta) {
    box-shadow: none;
    padding-bottom: 0.95rem;
    color: var(--accent-bright);
  }
  nav .nav-links a.nav-cta { text-align: center; padding: 0.9rem 1rem; }
}

@media (max-width: 768px) {
  section { padding: 5.5rem 0; }
  :root { --gutter: 1.5rem; }
  .hero { padding: calc(var(--nav-h) + 3rem) var(--gutter) 4rem; }

  /* keep nav a single horizontal bar: scroll sideways instead of stacking */
  nav .nav-inner { flex-wrap: nowrap; gap: 0.75rem; }
  nav .logo { flex: none; font-size: var(--t-term); }
  nav .nav-links {
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    gap: 1rem;
  }
  nav .nav-links::-webkit-scrollbar { display: none; }
  nav .nav-links a { font-size: var(--t-small); white-space: nowrap; }
  nav .nav-links a.nav-cta { white-space: nowrap; }

  .form-row { flex-direction: column; }
  .hero h1 { font-size: clamp(2.6rem, 10vw, 3.6rem); }
}

/* ---- Print ---- */
@media print {
  nav,
html,
body { background: #fff !important; }
  .hero-band { background: #fff !important; }
  .hero-band .hero h1 { color: var(--ink) !important; }
  .hero-band .hero-sub { color: var(--ink-soft) !important; }
  .hero-band .btn { background: none !important; color: var(--ink) !important; }
  .hero {
    display: block !important;
    padding: 0 0 1.5rem !important;
  }
  section { padding: 1.5rem 0 !important; }
  .section-head { margin-bottom: 1.25rem !important; }
  .boutique-banner,
.contact-form {
    break-inside: avoid;
    page-break-inside: avoid;
  }
}

/* Anchor targets clear the fixed bar. Without this the skip link drops #main
   behind the navbar, which defeats the point of having one. */
#main,
#consult,
.prose h2[id] { scroll-margin-top: calc(var(--nav-h) + 1.5rem); }

/* The one place the site raises its voice, and it does it by being plain
   rather than loud. No red, no icon, no box. */
.urgent-note {
  display: block;
  margin-top: 1.1rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
  font-size: var(--t-small);
  line-height: 1.7;
  color: var(--ink-soft);
}

/* ---- Motion ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
*::before,
*::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}