/* ===========================================================================
   AquaTerra Partners - site stylesheet
   ---------------------------------------------------------------------------
   Built to ATP_Website_FINAL_11OCT26.pdf: a full-bleed photographic landing
   page carrying only the nav and the wordmark, and nine section pages that
   are the PDF's own slides - centred small-caps serif title, gold eyebrow,
   and pale panels on white.

   Palette sampled from the PDF itself: ink #0d1b2a, body #3d4d5c,
   panel #f4f8fb, gold #a8811c, aqua #12678d, terra #4e9c3f.
   No build step, no package manager, no CDN, no external request.
   ASCII only, so a re-encoding cannot mangle anything.
   =========================================================================== */

/* The deck sets its titles in Copperplate, which is Apple's and cannot be
   shipped with a website. Marcellus SC is the nearest face that can: low
   contrast, flared serifs, and REAL small capitals rather than ones the
   browser fakes by shrinking capitals. It is served from this folder, not
   from a font host, so the site still makes no external request - the whole
   file is 14KB. SIL Open Font License 1.1; the record is in
   docs/licenses/README.md. */
@font-face {
  font-family: "Marcellus SC";
  src: url("../fonts/marcellus-sc.woff2") format("woff2");
  font-weight: 400; font-style: normal;
  /* block, not swap: the file is local, so the wait is imperceptible, and a
     flash of Georgia without small capitals is worse than no flash at all */
  font-display: block;
}

:root {
  --ink:      #0d1b2a;
  --body:     #3d4d5c;
  --muted:    #6b7a89;
  --panel:    #f4f8fb;
  --panel-edge: #e4edf4;
  --page:     #ffffff;
  --gold:     #a8811c;
  --aqua:     #12678d;
  --terra:    #4e9c3f;
  --rule:     #dfe7ee;

  --serif: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino,
           "Times New Roman", serif;
  /* the engraved face, for the titles and the wordmark only */
  --titleface: "Marcellus SC", Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui,
          "Helvetica Neue", Arial, sans-serif;

  --wrap: 1180px;
  --nav-h: 68px;
  --radius: 10px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  /* Reserve the scrollbar gutter on every page, whether or not that page is
     long enough to need one. Without it a short page has no scrollbar and so
     ~15px more content width, and because the nav and the page body are
     centred in a max-width wrapper they land about 7px right of where the
     same header sits on a page that does scroll. `about` is 621px, the
     shortest page by 70px, so it and the landing page sat in one position
     and every other page in another. */
  scrollbar-gutter: stable;
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--page);
  color: var(--body);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--aqua); }
img { max-width: 100%; height: auto; }

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

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: #fff; padding: 10px 16px; font-size: 14px;
}
.skip:focus { left: 0; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------------- nav -- */
.nav { position: relative; z-index: 20; height: var(--nav-h); }
.nav-in {
  max-width: var(--wrap); margin: 0 auto; height: 100%;
  padding: 0 20px; display: flex; align-items: center; gap: 14px;
}
.nav-mark { display: flex; align-items: center; flex: none; align-self: stretch; }
.nav-mark img { width: 36px; height: auto; display: block; }

.nav-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center; gap: 2px;
  flex: 1 1 auto; min-width: 0; justify-content: space-between;
}
.nav-list a {
  display: block; padding: 8px 5px;
  font-size: 12px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; text-decoration: none; white-space: nowrap;
}
.nav-list a:hover { text-decoration: underline; text-underline-offset: 5px; }

/* over a photograph the links are white; on a section page they are ink */
.nav-dark .nav-list a { color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .45); }
.nav-light { border-bottom: 1px solid var(--rule); }
.nav-light .nav-list a { color: var(--ink); }
.nav-light .nav-list a[aria-current="page"] { color: var(--gold); }
.nav-dark .nav-list a[aria-current="page"] { text-decoration: underline;
                                             text-underline-offset: 5px; }

.nav-toggle {
  display: none; margin-left: auto; background: none; border: 0;
  padding: 10px 6px; cursor: pointer; color: var(--ink);
}
.nav-dark .nav-toggle { color: #fff; }
.nav-toggle span {
  display: block; width: 20px; height: 2px; margin: 4px 0;
  background: currentColor; border-radius: 2px;
}

/* The row of nine labels needs about 830px. Collapsing at 1080px meant any
   window or preview pane narrower than that lost the whole bar and showed
   only the menu button, which is most of them. */
@media (max-width: 940px) {
  .nav-toggle { display: block; }
  .nav-list {
    position: absolute; left: 0; right: 0; top: var(--nav-h);
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: 0; display: none;
    background: var(--page); border-bottom: 1px solid var(--rule);
    padding: 6px 26px 22px;
    box-shadow: 0 18px 40px rgba(13, 27, 42, .14);
    max-height: calc(100vh - var(--nav-h)); overflow-y: auto;
  }
  .nav[data-open="true"] .nav-list { display: flex; }
  .nav-list a {
    color: var(--ink) !important; text-shadow: none !important;
    font-size: 14px; padding: 14px 2px; border-bottom: 1px solid var(--rule);
  }
  .nav-list li:last-child a { border-bottom: 0; }
}

/* And the same, whenever the bar does not actually fit - whatever the font.
   The 940px above was measured in one browser with one set of fonts, and that
   was the mistake: Georgia is about a quarter wider than the Liberation Serif
   the measuring browser substituted, so on a real machine the bar overflowed
   at widths the query called roomy and the last item, CONTACT, fell off the
   end. site.js measures the bar instead of trusting a number and sets
   data-fit="no" when it has to collapse. The query stays as the floor for a
   visitor with JavaScript off. */
.nav[data-fit="no"] .nav-toggle { display: block; }
.nav[data-fit="no"] .nav-list {
  position: absolute; left: 0; right: 0; top: var(--nav-h);
  flex-direction: column; align-items: stretch; justify-content: flex-start;
  gap: 0; display: none;
  background: var(--page); border-bottom: 1px solid var(--rule);
  padding: 6px 26px 22px;
  box-shadow: 0 18px 40px rgba(13, 27, 42, .14);
  max-height: calc(100vh - var(--nav-h)); overflow-y: auto;
}
.nav[data-fit="no"][data-open="true"] .nav-list { display: flex; }
.nav[data-fit="no"] .nav-list a {
  color: var(--ink) !important; text-shadow: none !important;
  font-size: 14px; padding: 14px 2px; border-bottom: 1px solid var(--rule);
}
.nav[data-fit="no"] .nav-list li:last-child a { border-bottom: 0; }

/* --------------------------------------------------------------- landing -- */
.landing { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
.landing-bg {
  /* 100vw includes the reserved gutter, which `inset: 0` does not, so the
     photograph still reaches both edges instead of stopping short of it. */
  position: fixed; inset: 0; width: 100vw; z-index: 0;
  background-position: center; background-size: cover; background-repeat: no-repeat;
  /* the default is painted here, not by script, so the landing page still has
     its photograph with JavaScript switched off */
  background-image: url("../img/bg/lake-range.jpg");
}
/* a soft darkening at the top only, so the white nav and wordmark hold up over
   a pale sky without flattening the photograph */
.landing-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(6, 25, 40, .42) 0,
                              rgba(6, 25, 40, .16) 32%, rgba(6, 25, 40, 0) 56%);
}
/* The landing children share a stacking context above the photograph. The nav
   has to sit above its siblings too, or the open menu - absolutely positioned
   inside it - is painted behind .landing-main, which fills the rest of the
   page, and its links cannot be clicked. */
.landing-main, .landing-foot { position: relative; z-index: 10; }
.landing .nav { position: relative; z-index: 30; }

.landing-main { flex: 1 1 auto; padding: 22px 26px 0; }
.wordmark {
  margin: 0; text-align: center;
  /* The small capitals are in the face, so nothing here asks for them: the
     lowercase letters of Marcellus SC are drawn as small capitals. Asking
     for them again would make the browser shrink glyphs that are already
     small. The one capital still comes from the copy's own spelling. */
  font-family: var(--titleface); font-weight: 400;
  letter-spacing: .055em;
  font-size: clamp(2rem, 4.4vw, 3.3rem); line-height: 1.1;
  color: #fff; text-shadow: 0 2px 14px rgba(0, 0, 0, .4);
}

/* The line under the wordmark, new on the 29 Oct deck. Lighter than the name
   and set in the body face, so it reads as a sentence about the firm rather
   than as part of its signature. It sits over the sky, where the gradient is
   darkest, so plain white at low weight holds up without a panel behind it. */
.tagline {
  margin: 18px 0 0; text-align: center;
  font-size: clamp(.95rem, 1.7vw, 1.22rem); font-weight: 400;
  letter-spacing: .01em; line-height: 1.4;
  color: rgba(255, 255, 255, .92);
  text-shadow: 0 1px 10px rgba(0, 0, 0, .45);
  /* no max-width: the deck sets this on one line, and the page's own gutter
     is the only limit it needs. `balance` evens it out when a phone wraps it */
  text-wrap: balance;
}

/* The photograph's credit, where the switcher dots used to sit. Small and
   quiet: the licence does not ask for it, and it is for the one reader who
   wonders rather than for the page. */
/* The photograph's credit. It used to run along the foot of the landing
   picture; it now sits on the last line of the contact page's footer, where
   the firm's own housekeeping is. `flex 100%` gives it a line of its own
   below the copyright and the address rather than a third column beside
   them, and the smaller size keeps it quieter than either. */
.site-footer .photo-credit {
  flex: 1 0 100%; margin: 10px 0 0;
  font-size: 11.5px; letter-spacing: .02em; color: var(--muted);
}
/* The link's own box is 14px tall, which is no kind of target on a phone.
   Padding gives it a 44px one and the negative margin keeps the line where it
   was, so the credit looks the same size and is reachable with a thumb. */
/* The link's own box is 14px tall, which is no kind of target on a phone.
   Padding gives it a 44px one and the negative margin takes the padding back
   out of the line, so the credit reads as one sentence and is still reachable
   with a thumb. The horizontal pair cancels exactly: over the photograph the
   leftover 6px a side went unnoticed, but on a white footer it opened a
   visible gap either side of each name. */
.site-footer .photo-credit a {
  color: inherit; text-decoration: underline; text-underline-offset: 2px;
  display: inline-block; padding: 15px 4px; margin: -15px -4px;
}
.site-footer .photo-credit a:hover { color: var(--ink); }

/* -------------------------------------------------------------- sections -- */
.page { padding: 54px 0 90px; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 26px; }

.page-title {
  margin: 0 0 42px; text-align: center;
  /* Marcellus SC, as on the wordmark, and for the same reason: its own
     lowercase glyphs are the small capitals. Weight 400 because that is the
     only weight it has - at 700 the browser smears a fake bold over it, and
     the deck's titles are monoline anyway. The wide tracking is the
     engraved look; it is also what the deck does. */
  font-family: var(--titleface); font-weight: 400;
  letter-spacing: .055em; line-height: 1.18;
  /* The ceiling is set by the longest title rather than by taste: about needs
     1198px at 2.65rem and the column is 1128px, so it broke across two lines
     with one subject stranded on the first. At 2.45rem it, and mission, set on
     one line at every width down to about 880px, below which the 1.75rem floor
     stops it shrinking any further and no screen could hold them anyway. The
     middle term came down with it: at 3.3vw the title measured exactly the
     width of its column at 1024px, and a line that exactly fills its column
     is one the balancer breaks in two. The vw cap is a separate matter: it only bites below
     about 330px, where mission's longest subject plus its middot is 6px wider
     than the screen and the page scrolled sideways. */
  font-size: min(clamp(1.75rem, 3.2vw, 2.45rem), 8.0vw);
  color: var(--ink);
  /* No `text-wrap: balance` here. It evens out a wrapped title, which reads
     well, but it will also keep two lines where one would do - and one line
     is what the firm asked for wherever the window allows it. site.js sizes
     the title to fit; the balancer was working against it. */
}

/* A title breaks only at its separators, never inside a segment. No media
   query: with the one over-long segment exempted in the build, every
   protected segment still fits on its own line down to a 300px viewport,
   measured, so the rule can apply everywhere. `.wrap` is that exemption. */
.page-title .seg:not(.loose) { display: inline-block; white-space: nowrap; }

/* The one segment allowed to wrap stays an ordinary inline box, with nothing
   to hold its words together. It is marked `loose`, not `wrap`: `wrap` is the
   page container's own class a few rules down, and a segment wearing it was
   inheriting that container's 26px of side padding - which is what opened the
   extra space after the dash on the outcomes title. */
.page-title .seg.loose { display: inline; }

/* The 29 Oct deck parts a title's subjects with a wide gap and no glyph, so
   the parting is this margin. It is set symmetrically on each subject rather
   than between them: a left margin alone would push every wrapped line off
   centre by its own width, and these titles wrap on a phone. A glyph
   separator, if one ever comes back, sets its own spacing and this becomes
   nothing - see `sep` in the build's content.py. */
.page-title .seg { margin: 0 .34em; }

/* The exception, and the reason it is one. A wide gap says "these are
   parallel", which is true of mission's three subjects and about's and false
   of outcomes: "Five outcomes" runs straight into "and the order to expect",
   and parting a sentence from its own conjunction by the width of a word
   reads as a dropped glyph. No margin at all, so what is left between the
   subjects is the plain space in the markup and nothing else - a word space,
   because the two parts are words in one sentence. (A breath of .10em was
   tried first and still read as a gap: 22px against a 14px word space.) The
   segment is still a segment, so the title can fold here on a phone and
   nowhere else. */
.page-title.title-joined .seg { margin: 0; }


/* Capitalisation. Small caps leaves a real capital full height and renders
   everything else small, so a title's own capitalisation decides which words
   take a large first letter - and the source is mixed, which is why some
   titles showed one on every word and others on only the first.
   Every title is sentence case: one capital, at its start. Nothing else is
   altered, so a title whose words are proper names - Strategic Advisory,
   Technical Project Leadership - keeps the capitals the firm wrote, while a
   descriptive one takes a single capital and no more. Done here rather than
   in the text so the copy still matches the PDF word for word. */
.page-title::first-letter { text-transform: uppercase; }

/* And the exception the firm asked for on mission: a full capital opening
   every word, not just the title - Clear Strategy, Disciplined Execution,
   Scalable Systems. In a face with real small capitals a "large first
   letter" is simply the capital, so uppercasing is the whole of it and
   nothing is resized. `capitalize` rather than a ::first-letter rule because
   ::first-letter reaches the opening of a box, which gave one capital per
   subject; the firm wants one per word. See `word_caps` in content.py for
   why it is a flag rather than a rule for every title. */
.page-title.title-word-caps .seg { text-transform: capitalize; }

/* Nothing title-cases a title any more: the 29 Oct deck sets Mission in
   sentence case, and every title now takes exactly the capitals the firm
   wrote. The one rule above is the whole of it. */

.eyebrow {
  margin: 0 0 12px;
  font-size: 12px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--gold);
}

.intro {
  /* `auto` either side, not 0. The cap keeps the measure readable, but a
     capped box with no auto margins hugs the left of the column - so once
     the copy was centred, the text was centred inside a box that was itself
     126px left of the page's centre, and every intro sat visibly off-axis
     under a centred title. The cap and the centring have to agree. */
  margin: 0 auto 30px; max-width: 58rem;
  text-wrap: pretty;
  font-size: 1.22rem; line-height: 1.5; color: var(--body);
}
.intro.tight { margin-bottom: 22px; }

/* ---------------------------------------------------------------- panels -- */
.panel {
  background: var(--panel);
  border: 1px solid var(--panel-edge);
  border-radius: var(--radius);
  padding: 26px 30px;
}
.panel > :first-child { margin-top: 0; }
.panel > :last-child { margin-bottom: 0; }
.panel p { margin: 0 0 1em; }
.panel p:last-child { margin-bottom: 0; }

.panel-lg p {
  font-size: 1.22rem; line-height: 1.6; color: var(--ink);
  /* even out the line lengths and keep a single word off the last line */
  text-wrap: pretty;
}

/* A lead line and the line that qualifies it, inside a card. Advisory and
   leadership are set this way, two cards to a row. */
.panel > b { font-weight: 600; color: var(--ink); display: block; }
.panel > span { display: block; color: var(--body); }

.grid { display: grid; gap: 20px; margin: 0; padding: 0; list-style: none; }
.grid.c2 { grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr)); }
/* four cards read as two rows of two, as the PDF has them; auto-fit alone
   made three columns and left the fourth stranded on its own row */
@media (min-width: 900px) { .grid.c2 { grid-template-columns: repeat(2, 1fr); } }
.grid.c3 { grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr)); }
.grid.c4 { grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); }
.grid.c5 { grid-template-columns: repeat(auto-fit, minmax(min(195px, 100%), 1fr)); }
.grid > li { display: flex; }
.grid > li > .panel { width: 100%; }

/* The five outcome cards carry headings of one line or two - "Reduce risk"
   against "Strengthen operations" - so the copy under them started at five
   different heights and the row read as ragged. `subgrid` makes the disc,
   the heading and the copy share the row heights of the grid itself, so the
   heading band is as tall as the tallest heading and every card's copy
   begins on the same line. Two levels of it, because the panel sits inside
   the li.
   Measured, not assumed: the alignment is asserted across every width in
   build/qa/rows.js. Declared only where it is supported - without subgrid
   the cards simply fall back to the ragged-but-correct layout above, which
   is what they did until now. */
@supports (grid-template-rows: subgrid) {
  .grid.c5 { grid-template-rows: auto auto 1fr; }
  .grid.c5 > li,
  .grid.c5 > li > .panel {
    display: grid; grid-template-rows: subgrid; grid-row: span 3;
    /* A subgrid inherits the parent's gutters, and the parent's 20px is
       meant for the space BETWEEN cards, not between a card's own disc,
       heading and copy - it was adding 20px to each of those on top of the
       margins that already set the rhythm. Zero here, and the margins go
       back to deciding it. The 20px still parts the cards, because that is
       the parent's own gap and this only overrides the subgridded axis. */
    row-gap: 0;
  }
}

.card-head {
  margin: 0 0 10px; font-size: 1.06rem; font-weight: 700;
  color: var(--ink); line-height: 1.3;
}
.card-body { margin: 0; color: var(--body); font-size: .99rem; }

/* numbered outcome panels */
.num {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; margin: 0 0 18px;
  border-radius: 50%; background: #fff;
  border: 1px solid #b9dced; color: var(--aqua);
  font-size: 15px; font-variant-numeric: tabular-nums;
}

/* process stages */
.stage .eyebrow { margin-bottom: 14px; }
.stage .card-head { font-size: 1.12rem; margin-bottom: 14px; }

/* experience check lists */
.checks { list-style: none; margin: 16px 0 0; padding: 0; }
.checks li {
  position: relative; padding-left: 28px; margin-bottom: 13px;
  color: var(--body); font-size: 1.02rem;
}
.checks li:last-child { margin-bottom: 0; }
.checks li::before {
  content: ""; position: absolute; left: 3px; top: .42em;
  width: 11px; height: 6px;
  border-left: 2px solid var(--terra); border-bottom: 2px solid var(--terra);
  transform: rotate(-45deg);
}

/* ----------------------------------------------------------------- quote -- */
.quote { margin: 0; }
.quote p {
  margin: 0; color: var(--ink);
  /* Hang the opening quotation mark in the margin so the T of the first line
     sits flush with the w below it. The value is the mark's own width,
     measured rather than guessed - see the README. */
  text-indent: -0.42em;
  font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1.45;
}
.quote footer {
  margin-top: 20px; font-size: 12px; font-weight: 700;
  letter-spacing: .16em; color: var(--gold);
}
/* The line that answers the quotation on engagement. It is a remark ABOUT
   the quote, not part of it, so it needs more air than the citation under
   mission's quote gets - that one is an attribution and belongs tight.
   36px: rendered at 22, 30, 36 and 44 and looked at. 30 was barely a change
   from 22 and 44 cut the line loose from what it refers to. */
.quote-close {
  margin: 36px 0 0; font-weight: 700; font-style: italic; color: var(--aqua);
  font-size: 1rem;
}

/* two-column layouts used by Mission and Engagement */
.split { display: grid; gap: 26px; align-items: start; }

/* Mission's two panels held different amounts of copy and so stood at
   different heights, which is the first thing the eye catches on a page whose
   title is centred. Stretching the row and letting each panel fill its column
   squares them off. Not on `wide-left`: engagement's left column is bare
   prose with no panel beside it to match, so stretching there would only
   stretch the one box it does have into empty space. */
@media (min-width: 900px) {
  .split:not(.wide-left) { align-items: stretch; }
  .split:not(.wide-left) > div { display: flex; flex-direction: column; }
  .split:not(.wide-left) > div > .panel { flex: 1 1 auto; }
}
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split.wide-left { grid-template-columns: 1.1fr .9fr; }
}

/* ---------------------------------------------------------------- footer -- */
.site-footer {
  border-top: 1px solid var(--rule);
  padding: 26px 0 34px;
  font-size: 12.5px; color: var(--muted);
}
.site-footer .wrap {
  display: flex; flex-wrap: wrap; gap: 6px 22px; justify-content: space-between;
}
.site-footer p { margin: 0; }
.site-footer a { color: var(--muted); display: inline-block; padding: 5px 0; }
.site-footer a:hover { color: var(--ink); }

@media (max-width: 640px) {
  .page { padding: 34px 0 60px; }
  .page-title { margin-bottom: 30px; }
  .panel { padding: 22px 20px; }
}

/* ----------------------------------------------------------------- print -- */
/* ------------------------------------------------------------------ form -- */
/* The contact form composes a message in the visitor's own mail program. The
   site is static files: there is nothing here to post an enquiry to, and so
   nothing here that could hold one. */
.form-panel { padding: 26px; max-width: 720px; margin: 0 auto; }
.form-panel .field { margin: 0 0 16px; }
.form-panel .field label {
  display: block; margin-bottom: 6px;
  font-size: 13px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted);
}
.form-panel .field input, .form-panel .field select,
.form-panel .field textarea {
  width: 100%; box-sizing: border-box;
  padding: 10px 12px; border: 1px solid var(--panel-edge); border-radius: 8px;
  background: var(--page); color: var(--ink);
  font: inherit; font-size: 15px;
}
.form-panel .field textarea { resize: vertical; min-height: 110px; }
.form-panel .field input:focus-visible, .form-panel .field select:focus-visible,
.form-panel .field textarea:focus-visible {
  outline: 2px solid var(--aqua); outline-offset: 1px; border-color: var(--aqua);
}
.form-panel .field input:user-invalid,
.form-panel .field textarea:user-invalid { border-color: #b4452f; }

.form-panel .actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px;
  margin: 20px 0 0;
}
.btn {
  display: inline-block; padding: 11px 22px; border: 1px solid var(--ink);
  border-radius: 8px; background: var(--ink); color: #fff;
  font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
}
.btn:hover { background: #16293d; border-color: #16293d; }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: var(--panel); }
.more { color: var(--aqua); }
.form-panel .hint { margin: 14px 0 0; font-size: 13px; color: var(--muted); }

/* The honeypot. Off-screen rather than display:none: a bot that skips what
   is display:none will still fill what is merely positioned away, and this
   field exists to be filled by something that is not a person. aria-hidden
   and tabindex="-1" keep it out of the tab order and out of a screen
   reader, so nobody is ever asked to fill it. */
.hp { position: absolute; left: -9999px; top: auto;
      width: 1px; height: 1px; overflow: hidden; }

/* Shown in place of the form once the enquiry is safely stored. */
.notice { margin: 0; }
.notice h2 { margin: 0 0 8px; font-family: var(--titleface); font-weight: 400;
             font-size: 21px; letter-spacing: .03em; color: var(--ink); }
.notice p { margin: 0; color: var(--body); }

/* Shown only when the submission did not go through, so that nothing the
   visitor wrote is lost to a server problem. Driven by the `hidden`
   attribute, which the script toggles and which works with no CSS at all. */
.fallback { margin-top: 26px; border-top: 1px solid var(--rule);
            padding-top: 20px; }
[hidden] { display: none !important; }
.fallback h2 { margin: 0 0 6px; font-family: var(--serif); font-size: 17px;
               color: var(--ink); }
.fallback pre {
  margin: 14px 0 0; padding: 14px; border: 1px solid var(--panel-edge);
  border-radius: 8px; background: var(--page); color: var(--body);
  font-size: 13px; white-space: pre-wrap; word-break: break-word;
}

@media print {
  *, *::before, *::after {
    -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important;
  }
  .nav-toggle, .skip { display: none !important; }
  .nav-list { display: flex !important; flex-direction: row; position: static;
              box-shadow: none; padding: 0; border-bottom: 0; }
  .nav-list a { font-size: 9px; padding: 3px 4px; border-bottom: 0; }
  /* No scrollbar on paper, so nothing to reserve a gutter for - and with the
     gutter gone the photograph's 100vw, which was sized to cover it, would
     hang over the sheet by that much. Both go. */
  html { scrollbar-gutter: auto; }
  /* The photograph is run a few millimetres past the sheet on each side. Laid
     out exactly to the page box it left a 2-3mm white edge down both sides -
     the printed page box and the laid-out one do not land on the same
     fraction of a pixel - and bleeding past the trim is how that is handled
     on paper anyway. */
  .landing-bg { position: absolute; inset: 0 -5mm; width: auto; }
  .panel, .quote { break-inside: avoid; page-break-inside: avoid; }
  .page-title { break-after: avoid; page-break-after: avoid; }
  /* On paper a section is a sheet, so it is given the room the screen's
     scrolling does not need: the standing space above and below the content
     comes down, and the footer sets itself on one line. */
  .page { padding: 22px 0 24px; }
  .page-title { margin-bottom: 26px; }
  .site-footer { padding: 14px 0; }
  .site-footer .wrap { gap: 10px; }
  /* A section that does not fill its sheet would otherwise leave its footer
     stranded in the middle of the paper with blank space beneath it. The
     content keeps its place at the top; the footer goes to the foot. */
  body:has(main.page) { min-height: 100vh; display: flex; flex-direction: column; }
  body:has(main.page) main.page { flex: 1 0 auto; }
  /* The form is shown on paper so a reviewer can see the page, not fill it in,
     so it gives up the room a typist would want and keeps its sheet. */
  .form-panel { padding: 18px; }
  .form-panel .field { margin-bottom: 10px; }
  /* rows="5" already makes the box taller than any min-height, so the
     height is what has to come down */
  .form-panel .field textarea { min-height: 0; height: 74px; }
  .form-panel .actions { margin-top: 12px; }
}


/* ------------------------------------------------- centred page copy ------ */
/* Every page sets its title centred, and the deck's own slides are centred
   too. The copy below the title was not, so each page read as a centred
   heading sitting on a left-aligned block - and the join showed.
   The deck's line structure is the other half of it. The copy carries the
   breaks the firm wrote (`<br>`, from breaks.py), which have nothing to do
   with the width of a browser column: left-aligned they look like a ragged
   accident, centred they look like the deliberate lines they are.
   Two things stay left, because they are not prose:
     - a ticked list, which the eye reads down the column of ticks; centring
       it scatters them.
     - the contact form, where a centred label floating over a full-width
       field is harder to use and no better to look at. */
.page .eyebrow,
.page .intro,
.page .panel p,
.page .panel > b,
.page .panel > span,
.page .split > div > p,
.page .card-head,
.page .card-body,
.page .quote p,
.page .quote footer,
.page .quote-close { text-align: center; }

/* an intro is one to three lines; balance evens their lengths rather than
   leaving a long first line over one short word */
.page .intro { text-wrap: balance; }

/* The last two words of a line, held together so neither is left alone at
   the foot of a paragraph. Only used where the pair contains a hyphen, which
   a non-breaking space cannot protect; see widow() in the build. */
.bind { white-space: nowrap; }

/* Body copy gets `pretty` instead. Balance evens every line, which is right
   for two or three but makes a six-line card look stepped; pretty leaves the
   lines alone and only works on the end, which is where the fault was - a
   last line holding one word ("judged.") under a full one. Not `balance`
   here and not nothing. */
.page .card-body,
.page .panel p,
.page .split > div > p { text-wrap: pretty; }

/* the numbered disc on outcomes sits over centred copy, so it centres too */
.page .num { margin-left: auto; margin-right: auto; }

/* the exceptions, after the rule above so they win on equal specificity */
.page .checks li { text-align: left; }
.page .form-panel p,
.page .form-panel label,
.page .form-panel .field,
.page .form-panel .form-note { text-align: left; }

/* ------------------------------------------------------------- not found -- */
/* The 404's one link back. The nav above it already reaches every page, so
   this is a destination rather than a menu: one obvious way out for someone
   who arrived from a dead link and does not yet know what this site is. */
.notfound-home {
  margin: 30px 0 0; text-align: center;
}
.notfound-home a {
  display: inline-block; padding: 12px 26px;
  border: 1px solid var(--rule); border-radius: var(--radius);
  color: var(--ink); font-weight: 600; text-decoration: none;
}
.notfound-home a:hover { border-color: var(--aqua); color: var(--aqua); }