/* --------------------------------------------------------------------------
   Typography — see docs/fonts.md

   Both faces are self-hosted, so every visitor gets the real typography rather
   than a fallback.

   DISPLAY — Besley 600, subset from the licensed static TTF in the brand asset
   folder. Letter-spacing is set to the specified -0.02em on every heading.
   BODY — Charter, built from the Bitstream Charter originals. The stack still
   prefers a locally installed Charter (macOS ships it) before these files.

   WOFF rather than WOFF2 throughout: the Brotli compressor was unavailable at
   build time. Recompressing would save roughly 30% and needs no other change.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Besley";
  src: url("../fonts/besley-600.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "XCharter";
  src: url("../fonts/xcharter-regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "XCharter";
  src: url("../fonts/xcharter-italic.woff") format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "XCharter";
  src: url("../fonts/xcharter-bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "XCharter";
  src: url("../fonts/xcharter-bolditalic.woff") format("woff");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Core palette — fixed */
  --bone:      #F4EFE6;
  --plum:      #4A1942;
  --ink:       #191016;
  --brass:     #A08347;

  /* Secondary / supporting */
  --charcoal:  #2A2328;
  --parchment: #E7E1D6;
  --thistle:   #E3D9DE;
  --hairline:  #D5CCBC;
  --stone:     #A29786;

  /* Type */
  --display: "Besley", Georgia, "Times New Roman", serif;
  --body: Charter, "Bitstream Charter", "XCharter", "Charis SIL", Bitter, Georgia, serif;
  --label: "Helvetica Neue", "TeX Gyre Heros", Helvetica, Arial, sans-serif;
  --data: Menlo, Consolas, "DejaVu Sans Mono", monospace;

  /* Measure and rhythm — white space is the luxury, density is the failure mode */
  --measure: 34rem;
  --gutter: clamp(1.5rem, 5vw, 5rem);
  --band: clamp(4.5rem, 9vw, 8.5rem);
  --max: 76rem;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--bone);
  color: var(--charcoal);                    /* 13.39:1 on Bone — AAA */
  font-family: var(--body);
  font-size: 1rem;                           /* 16px */
  line-height: 1.6;
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

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

/* --------------------------------------------------------------------------
   Type scale
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(2.25rem, 5.2vw, 3.9rem); line-height: 1.08; }
h2 { font-size: clamp(1.6rem, 3vw, 2.3rem);    line-height: 1.18; }
h3 { font-size: clamp(1.2rem, 1.8vw, 1.45rem); line-height: 1.28; }
h4 { font-size: 1.0625rem;                     line-height: 1.35; }

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

a { color: var(--plum); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--plum);
  outline-offset: 3px;
}

strong { font-weight: 700; }

/* Eyebrows and labels — tracked capitals, never body copy */
.eyebrow {
  font-family: var(--label);
  font-size: 0.6875rem;                      /* 11px */
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--plum);
  margin: 0 0 1.25rem;
  display: block;
}
/* Brass on Plum measures 3.9:1 — the palette table marks that large-text only,
   so an eyebrow at this size takes Bone (12.15:1) instead. Brass on Ink is
   5.17:1 and passes AA at label size. */
.eyebrow--onplum { color: var(--bone); }
.eyebrow--onink  { color: var(--brass); }
.eyebrow--onplum, .eyebrow--onink { font-size: 0.75rem; letter-spacing: 0.2em; }

.lede {
  font-size: clamp(1.125rem, 1.6vw, 1.3125rem);
  line-height: 1.5;
  color: var(--ink);
}

.measure { max-width: var(--measure); }

/* Data / technical — version stamps, figures */
.data {
  font-family: var(--data);
  font-size: 0.875rem;
  letter-spacing: 0.01em;
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.band { padding-block: var(--band); }
.band--tight { padding-block: calc(var(--band) * 0.6); }

.band--bone      { background: var(--bone);      color: var(--charcoal); }
.band--parchment { background: var(--parchment); color: var(--charcoal); }
.band--plum      { background: var(--plum);      color: var(--bone); }   /* 12.15:1 AAA */
.band--ink       { background: var(--ink);       color: var(--bone); }   /* 16.27:1 AAA */

.band--plum h1, .band--plum h2, .band--plum h3, .band--plum h4,
.band--ink  h1, .band--ink  h2, .band--ink  h3, .band--ink  h4 { color: var(--bone); }

/* :where() keeps this at zero added specificity so component rules further
   down (buttons especially) still win. Without it this rule painted the
   reversed button's label Bone on a Bone field — an invisible button. */
.band--plum :where(a), .band--ink :where(a) { color: var(--bone); }

.rule { border: 0; border-top: 1px solid var(--hairline); margin: 0; }
.band--plum .rule, .band--ink .rule { border-top-color: rgba(244, 239, 230, 0.28); }

/* One consistent left axis: content columns share the wrap's inline padding */
.cols {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
}
@media (min-width: 56rem) {
  .cols--2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cols--aside { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--plum);
  color: var(--bone);
  padding: 0.75rem 1.25rem;
  font-family: var(--label);
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  z-index: 100;
}
.skip-link:focus { left: 0; }

.masthead {
  background: var(--bone);
  border-bottom: 1px solid var(--hairline);
  position: sticky;
  top: 0;
  z-index: 50;
}
.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  min-height: 5.25rem;
  padding-block: 1rem;
}

/* Clearspace: one bob-width on all sides. The bob is ~1/7 of the lockup
   height here, so the padding below holds more than the minimum. */
.masthead__logo { display: inline-flex; align-items: center; padding: 0.5rem 0; }
.masthead__logo img { height: 2.125rem; width: auto; }  /* wordmark well above the 24px floor */

.nav { display: flex; align-items: center; gap: clamp(1.25rem, 2.5vw, 2.25rem); }
.nav a {
  font-family: var(--label);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--charcoal);
  text-decoration: none;
  padding-block: 0.35rem;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
}
.nav a:hover { border-bottom-color: var(--plum); }
.nav a[aria-current="page"] { color: var(--plum); border-bottom-color: var(--plum); }

.nav__cta {
  border: 1px solid var(--plum);
  padding: 0.6rem 1.1rem;
  color: var(--plum) !important;
}
.nav__cta:hover { background: var(--plum); color: var(--bone) !important; border-bottom-color: var(--plum); }

.nav-toggle { display: none; }

@media (max-width: 54rem) {
  .masthead__inner { flex-wrap: wrap; }
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: none;
    border: 1px solid var(--hairline);
    color: var(--charcoal);
    font-family: var(--label);
    font-size: 0.6875rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 0.6rem 0.9rem;
    cursor: pointer;
  }
  .nav {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    width: 100%;
    border-top: 1px solid var(--hairline);
    padding-block: 0.5rem 1rem;
  }
  .nav[data-open="true"] { display: flex; }
  .nav a { width: 100%; padding-block: 0.85rem; border-bottom: 1px solid transparent; }
  .nav__cta { margin-top: 0.75rem; text-align: center; }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero { padding-block: clamp(4rem, 11vw, 9rem) clamp(3.5rem, 8vw, 7rem); }
.hero h1 { max-width: 18ch; }
.hero .lede { margin-top: 1.75rem; max-width: 42ch; }
.hero__actions { margin-top: 2.75rem; display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-block;
  font-family: var(--label);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 1rem 1.9rem;
  border: 1px solid var(--plum);
  background: var(--plum);
  color: var(--bone);
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}
.btn:hover { background: var(--ink); border-color: var(--ink); color: var(--bone); }

.btn--quiet { background: transparent; color: var(--plum); }
.btn--quiet:hover { background: var(--plum); color: var(--bone); }

.btn--onplum { background: var(--bone); border-color: var(--bone); color: var(--plum); }
.btn--onplum:hover { background: transparent; color: var(--bone); }

.textlink {
  font-family: var(--label);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 0.3rem;
}

/* --------------------------------------------------------------------------
   The plaque — the only callout device.
   Dark Plum field, italic Charter, small triangular tail.
   -------------------------------------------------------------------------- */
.plaque {
  background: var(--plum);
  color: var(--bone);
  font-family: var(--body);
  font-style: italic;
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  line-height: 1.45;
  padding: clamp(1.75rem, 3vw, 2.5rem) clamp(1.75rem, 3.5vw, 3rem);
  margin: 0;
  position: relative;
  max-width: 46rem;
}
.plaque::after {
  content: "";
  position: absolute;
  left: clamp(1.75rem, 3.5vw, 3rem);
  bottom: -0.75rem;
  width: 0;
  height: 0;
  border-left: 0.75rem solid transparent;
  border-right: 0.75rem solid transparent;
  border-top: 0.75rem solid var(--plum);
}
.plaque cite {
  display: block;
  margin-top: 1.1rem;
  font-style: normal;
  font-family: var(--label);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bone);                        /* on the default Plum plaque: 12.15:1 */
  opacity: 0.82;
}
/* On a Plum or Ink band the plaque darkens to Ink, where Brass reaches
   5.17:1 and can carry the accent at label size. */
.band--plum .plaque, .band--ink .plaque { background: var(--ink); }
.band--plum .plaque::after, .band--ink .plaque::after { border-top-color: var(--ink); }
.band--plum .plaque cite, .band--ink .plaque cite { color: var(--brass); opacity: 1; }

/* --------------------------------------------------------------------------
   Service cards — icons are the solid treatment (Bone silhouette, brass bob),
   so they must sit on a Plum or Ink field. Never on Bone.
   -------------------------------------------------------------------------- */
.services {
  display: grid;
  gap: 1px;
  background: rgba(244, 239, 230, 0.22);
  border: 1px solid rgba(244, 239, 230, 0.22);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
@media (min-width: 40rem)   { .services { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem)   { .services { grid-template-columns: repeat(3, 1fr); } }

/* Seven areas into a two- or three-column grid leaves a hole in the last row,
   which reads as a broken tile rather than as white space. The seventh card
   takes the full row instead. */
@media (min-width: 40rem) {
  .service:nth-child(7):last-child { grid-column: 1 / -1; }
}

.service {
  background: var(--plum);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.service img { width: 2.75rem; height: 2.75rem; }
.service h3 { color: var(--bone); font-size: 1.1875rem; }
.service p { color: var(--bone); font-size: 0.9375rem; line-height: 1.55; margin: 0; opacity: 0.92; }

/* --------------------------------------------------------------------------
   Numbered list — commitments, sequence steps
   -------------------------------------------------------------------------- */
.ordered { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.ordered > li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: 0 1.5rem;
  padding-block: clamp(1.5rem, 2.5vw, 2rem);
  border-top: 1px solid var(--hairline);
  align-items: baseline;
}
.ordered > li:last-child { border-bottom: 1px solid var(--hairline); }
.ordered > li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--data);
  font-size: 0.875rem;
  color: var(--plum);
}
.ordered h3 { margin-bottom: 0.5rem; }
.band--plum .ordered > li,
.band--ink .ordered > li { border-color: rgba(244, 239, 230, 0.24); }
.band--plum .ordered > li::before,
.band--ink .ordered > li::before { color: var(--brass); }

/* Values / definition pairs */
.terms { display: grid; gap: 0; margin: 0; }
@media (min-width: 48rem) { .terms { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 5vw, 4rem); } }
.terms > div { padding-block: 1.4rem; border-top: 1px solid var(--hairline); }
.terms dt { font-family: var(--display); font-weight: 600; font-size: 1.0625rem; letter-spacing: -0.02em; color: var(--ink); }
.terms dt a { display: inline-block; padding-block: 0.2rem; }
.terms dd { margin: 0.35rem 0 0; font-size: 0.9375rem; line-height: 1.55; }

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */
.form { margin-top: 2.5rem; max-width: 38rem; }
.field { margin-bottom: 1.75rem; }
.field > label {
  display: block;
  font-family: var(--label);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--plum);
  margin-bottom: 0.6rem;
}
.field .hint { font-size: 0.875rem; color: var(--charcoal); opacity: 0.75; margin: -0.2rem 0 0.6rem; }

.field input,
.field select,
.field textarea {
  width: 100%;
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink);
  background: #FBF8F2;
  border: 1px solid var(--hairline);
  border-radius: 0;
  padding: 0.85rem 1rem;
  -webkit-appearance: none;
  appearance: none;
}
.field select {
  background-image: linear-gradient(45deg, transparent 50%, var(--plum) 50%),
                    linear-gradient(135deg, var(--plum) 50%, transparent 50%);
  background-position: calc(100% - 1.15rem) 1.35rem, calc(100% - 0.8rem) 1.35rem;
  background-size: 0.35rem 0.35rem, 0.35rem 0.35rem;
  background-repeat: no-repeat;
  padding-right: 2.5rem;
}
.field textarea { min-height: 9rem; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--plum); }
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border-color: #8A2B22; border-width: 2px; }

.field__error {
  display: none;
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: #7A2018;                            /* 8.2:1 on Bone — measured, AAA */
}
.field__error[data-shown="true"] { display: block; }

/* Honeypot — off-screen rather than display:none so bots still see it */
.trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__status { margin-top: 1.5rem; font-size: 0.9375rem; }
.form__status[data-state="error"] { color: #7A2018; }

.form-note { margin-top: 1.25rem; font-size: 0.875rem; color: var(--charcoal); opacity: 0.8; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.colophon { background: var(--ink); color: var(--bone); padding-block: clamp(3.5rem, 6vw, 5rem) 2.5rem; }
.colophon__top { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 56rem) { .colophon__top { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); gap: 4rem; } }

.colophon__logo img { height: 2.375rem; width: auto; }
.colophon__tagline {
  font-family: var(--body);
  font-style: italic;
  font-size: 1rem;
  color: var(--bone);
  margin-top: 1.1rem;
  opacity: 0.88;
}

.colophon__nav { display: grid; gap: 2rem; }
@media (min-width: 40rem) { .colophon__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.colophon h2 {
  font-family: var(--label);
  font-weight: 400;
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass);                       /* 5.17:1 on Ink — AA */
  margin: 0 0 1rem;
}
.colophon ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; }
/* inline-block plus padding lifts these to a 24px minimum touch target */
.colophon a {
  color: var(--bone);
  text-decoration: none;
  font-size: 0.9375rem;
  display: inline-block;
  padding-block: 0.3rem;
}
.colophon a:hover { text-decoration: underline; }

.colophon__base {
  margin-top: clamp(3rem, 5vw, 4rem);
  padding-top: 1.75rem;
  border-top: 1px solid rgba(244, 239, 230, 0.2);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  justify-content: space-between;
  font-family: var(--label);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  color: var(--bone);
  opacity: 0.72;
}

/* --------------------------------------------------------------------------
   Utility
   -------------------------------------------------------------------------- */
/* These exist because the Content-Security-Policy sets `style-src 'self'`
   without 'unsafe-inline', which blocks style attributes outright. Anything
   that would otherwise be an inline style has to live here. Weakening the
   policy to allow inline styles would be the wrong trade for the sake of four
   declarations. */
.mt-sm { margin-top: 1.25rem; }
.mt-none { margin-top: 0; }
.note { font-size: 0.9375rem; line-height: 1.55; }

/* A lede on a dark band takes the reversed colour. Slightly held back from
   full Bone so the heading above it still leads. */
.band--plum .lede, .band--ink .lede { color: var(--bone); opacity: 0.92; }

.stack > * + * { margin-top: var(--stack-gap, 1.5rem); }
.stack--lg { --stack-gap: clamp(2rem, 4vw, 3rem); }
.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;
}
.mt-lg { margin-top: clamp(2.5rem, 5vw, 4rem); }

@media print {
  .masthead, .nav, .hero__actions, .form { display: none; }
  body { background: #fff; color: #000; }
}

/* Inline links that need to clear the 24px minimum touch target. */
.inline-link { display: inline-block; padding-block: 0.3rem; }