/* ==========================================================================
   Grid Maintenance — site stylesheet
   Colour system is documented in style-guide.html. All foreground/background
   pairings below meet WCAG 2.1 AA (4.5:1 body text, 3:1 large text and UI).
   ========================================================================== */

:root {
  --iron:        #1A1A1A;  /* primary — headings, header, footer, dark bands */
  --iron-deep:   #131414;  /* footer, credibility strip, hover states        */
  --iron-line:   #2E3030;  /* borders on iron surfaces                       */
  --paper:       #F3F6F6;  /* Mist — light page sections                     */
  --paper-line:  #E2E7E7;  /* hairlines on light surfaces                    */
  --white:       #FFFFFF;
  --ink:         #1A1A1A;  /* body text                                      */
  --ink-muted:   #505151;  /* Muted — secondary text, 8.0:1 on white         */
  --ember:       #B33F0B;  /* CTA fill — 5.8:1 with white text               */
  --ember-deep:  #93340A;  /* ember as text on light — 7.7:1 on white        */
  --ember-bright:#DD7038;  /* graphic marks on dark bands — 5.3:1 on Ink     */
  --sage:        #5A6B69;  /* Grid brand colour — 5.2:1 on Mist            */
  --sage-light:  #8FA09E;  /* sage on dark grounds — 6.4:1 on Ink          */
  --sage-deep:   #4A5554;  /* sage hover / pressed                         */
  --confirm:     #7A2E0E;  /* pending-verification chips                     */

  /* Back-compat aliases: legacy rules still reference the old names. */
  --navy: var(--iron); --navy-deep: var(--iron-deep); --navy-line: var(--iron-line);
  --wash: var(--paper); --wash-line: var(--paper-line);
  --accent: var(--ember); --accent-deep: var(--ember-deep);

  --wrap: 1180px;
  --radius: 3px;
  --shadow: 0 1px 2px rgba(20, 22, 26, .07), 0 10px 28px rgba(20, 22, 26, .08);

  --sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI",
          Roboto, "Helvetica Neue", Arial, sans-serif;
  --display: "Geist", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
}

/* Self-hosted — a single variable file served from this domain. No request
   leaves the site: the no-third-party promise in the privacy policy holds. */
@font-face {
  font-family: "Geist";
  src: url("../fonts/geist-var.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("../fonts/geist-mono.woff2") format("woff2");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("../fonts/instrument-serif.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("../fonts/instrument-serif-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* --------------------------------------------------------------- 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; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--white);
  /* Long unbreakable strings — the email address in particular — must wrap
     rather than force the page to scroll sideways on a phone. */
  overflow-wrap: break-word;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent-deep); }
a:hover { color: var(--navy); }
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---------------------------------------------------------- typography -- */
h1, h2, h3, h4 {
  color: var(--navy);
  line-height: 1.2;
  letter-spacing: -.01em;
  margin: 0 0 .5em;
  font-weight: 700;
}
h1 { font-size: clamp(34px, 4.4vw, 56px); line-height: 1.06; letter-spacing: -.025em; }
h2 { font-size: clamp(26px, 2.6vw, 38px); line-height: 1.15; letter-spacing: -.015em; margin-top: 0; }
h3 { font-size: 1.2rem; }
h4 { font-size: 1.02rem; }
p, ul, ol, dl, table { margin: 0 0 1.15rem; }
p { max-width: 68ch; }
.lede { font-size: 1.18rem; line-height: 1.6; color: var(--ink-muted); max-width: 64ch; }
strong { font-weight: 700; color: var(--ink); }
.eyebrow {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: .10em;
  font-size: .76rem;
  font-weight: 500;
  color: var(--sage);
  margin: 0 0 .7rem;
}
.eyebrow-light { color: var(--sage-light); }

/* Emphasis device from the Grid brand kit: the italic word is the honest one.
   Instrument Serif runs small beside Geist, so it is nudged up to match. */
em, .serif-em {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: 1.07em; letter-spacing: 0;
}

/* -------------------------------------------------------------- layout -- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 24px; }
.wrap-narrow { max-width: 820px; }
section { padding-block: clamp(2.75rem, 1.5rem + 4vw, 4.75rem); }
.band-wash  { background: var(--wash); }
.band-navy  { background: var(--navy); color: #E8EEF8; }
.band-navy h2, .band-navy h3, .band-navy h4 { color: var(--white); }
.band-navy a { color: #F0B98B; }
/* Buttons keep their own text colour inside navy bands — without this the link
   colour above wins on specificity and drops the amber button to 3.2:1. */
.band-navy .btn-accent, .band-navy .btn-accent:hover,
.band-navy .btn-ghost-light { color: var(--white); }
.band-navy .btn-ghost-light:hover { color: var(--navy); }
.band-navy .btn-navy { color: var(--white); }
.band-navy .lede { color: #C7CBD1; }

/* min-width:0 stops a wide item (notably the file input, whose intrinsic width
   is ~340px) from widening the whole column and forcing a horizontal scroll. */
.grid { display: grid; gap: 1.5rem; }
.grid > * { min-width: 0; }
@media (min-width: 720px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-sidebar { grid-template-columns: 1.55fr 1fr; gap: 2.5rem; align-items: start; }
}
@media (min-width: 980px) { .grid-4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 620px) and (max-width: 979px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }

/* -------------------------------------------------------------- header -- */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--white); color: var(--navy);
  padding: .75rem 1.25rem; font-weight: 700; border: 2px solid var(--navy);
}
.skip-link:focus { left: 8px; top: 8px; }

.site-header {
  background: var(--navy); color: var(--white);
  position: sticky; top: 0; z-index: 50;
}
/* Header shares the content column so the logo's left edge lines up with every
   H1 on the site. The nav dropped to weight 400 and no longer needs the extra
   width that previously forced this wrapper wider. */
.site-header .wrap { max-width: var(--wrap); }
.header-inner {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.25rem;
  padding-block: .45rem;
}
.logo { display: flex; flex-direction: column; justify-content: center; text-decoration: none; margin-right: auto; }
/* Applied once the real logo is installed (tools/install-logo.py). The mark
   contains the wordmark, so no accompanying text is needed beside it. */
/* align-self stops the column flex container stretching the mark across the
   cross axis, which would override width:auto and distort the box. */
.logo img { height: 64px; width: auto; align-self: flex-start; max-width: min(280px, 55vw); object-fit: contain; display: block; }
@media (max-width: 900px) { .logo img { height: 46px; } }
.logo-mark {
  font-size: 1rem; font-weight: 700; letter-spacing: .04em;
  color: var(--white); text-transform: uppercase; line-height: 1.1;
}
.logo-sub {
  font-size: .66rem; letter-spacing: .09em; text-transform: uppercase;
  color: #A9ADB5; margin-top: .25rem;
}
.site-nav ul {
  list-style: none; display: flex; flex-wrap: wrap;
  gap: .35rem .9rem; margin: 0; padding: 0;
}
.site-nav a {
  color: #E5E4E0; text-decoration: none; font-size: .9rem; font-weight: 400;
  padding: .35rem 0; display: inline-block; border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: var(--white); border-bottom-color: var(--accent); }
.site-nav a[aria-current="page"] { color: var(--white); border-bottom-color: var(--accent); }
/* Ghost treatment: the page's own primary CTA is the only filled-ember
   element per fold — the style guide's one-primary-button rule. */
.header-phone {
  display: inline-flex; align-items: center; gap: .5rem;
  background: transparent; color: var(--white);
  border: 1px solid var(--ember-bright);
  text-decoration: none; font-weight: 500; font-size: .9rem;
  padding: .6rem 1.05rem; border-radius: var(--radius); white-space: nowrap;
}
.header-phone:hover { background: var(--ember); border-color: var(--ember); color: var(--white); }
@media (max-width: 900px) {
  .logo { margin-right: 0; width: 100%; }
  .header-inner { padding-block: .8rem 1rem; }
  .site-nav { order: 3; width: 100%; }
  .site-nav ul { gap: .3rem 1.1rem; }
  .site-nav a { font-size: .88rem; }
  .header-phone { margin-left: auto; }
}

/* ------------------------------------------------------------- buttons -- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-weight: 700; font-size: 1rem; text-decoration: none; cursor: pointer;
  padding: .82rem 1.5rem; border-radius: var(--radius); border: 2px solid transparent;
  transition: background-color .15s ease, color .15s ease;
}
.btn-accent { background: var(--accent); color: var(--white); }
.btn-accent:hover { background: var(--ember-deep); color: var(--white); }
.btn-navy { background: var(--navy); color: var(--white); }
.btn-navy:hover { background: var(--navy-deep); color: var(--white); }
.btn-ghost { border-color: var(--navy); color: var(--navy); background: transparent; }
.btn-ghost:hover { background: var(--navy); color: var(--white); }
.btn-ghost-light { border-color: #8A8F98; color: var(--white); background: transparent; }
.btn-ghost-light:hover { background: var(--white); color: var(--navy); }
.btn-row { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 1.5rem; }

/* ---------------------------------------------------------------- hero -- */
.hero { background: var(--navy); color: #E8EEF8; padding-block: clamp(3rem, 2rem + 5vw, 5.5rem); }
/* 26ch left ~530px of empty navy at 1440px. The headline now claims more of
   the column, and the hero splits into two at desktop so the stage is balanced
   rather than half-filled. */
.hero h1 { color: var(--white); max-width: 34ch; }
.hero p { color: #C7CBD1; font-size: 1.2rem; max-width: 60ch; }
@media (min-width: 1000px) {
  .hero .wrap { display: grid; grid-template-columns: 1.5fr 1fr; gap: 3rem; align-items: center; }
  .hero-main { grid-column: 1; }
  .hero-aside {
    border-left: 1px solid var(--navy-line); padding-left: 2rem;
    display: grid; gap: 1.35rem;
  }
}
.hero-lede { font-size: 1.075rem; max-width: 46ch; }
.hero-aside { margin-top: 2.5rem; display: grid; gap: 1.1rem; }
.hero-stat strong {
  display: block; color: var(--white); font-size: 1.6rem; line-height: 1.15;
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.hero-stat span { display: block; color: #A9ADB5; font-size: .92rem; margin-top: .2rem; }
@media (min-width: 1000px) { .hero-aside { margin-top: 0; } }
.page-head { background: var(--navy); color: #C7CBD1; padding-block: clamp(2.5rem, 2rem + 3vw, 4rem); }
.page-head h1 { color: var(--white); margin-bottom: .4rem; }
.page-head p { color: #C7CBD1; font-size: 1.12rem; }

/* --------------------------------------------------- credibility strip -- */
.credstrip { background: var(--navy-deep); border-top: 1px solid var(--navy-line); }
.credstrip ul {
  list-style: none; margin: 0; padding: 1.1rem 0; display: flex;
  flex-wrap: wrap; gap: .7rem 2rem; align-items: center;
}
.credstrip li {
  color: #E5E4E0; font-size: .93rem; font-weight: 600; line-height: 1.35;
  padding-left: 1.6rem; position: relative;
}
.credstrip li::before {
  content: ""; position: absolute; left: 0; top: .28em;
  width: .95rem; height: .55rem; border-left: 3px solid var(--accent);
  border-bottom: 3px solid var(--accent); transform: rotate(-45deg);
}
.credstrip small { display: block; font-weight: 400; color: #A9ADB5; font-size: .82rem; }
.credstrip-more { padding-left: 0 !important; }
.credstrip-more::before { display: none !important; }
.credstrip-more a { color: var(--ember-bright); font-weight: 700; text-decoration: none; }
.credstrip-more a:hover { text-decoration: underline; }

/* --------------------------------------------------------------- cards -- */
.card {
  background: var(--white); border: 1px solid var(--wash-line);
  border-radius: var(--radius); padding: 1.6rem; box-shadow: var(--shadow);
  display: flex; flex-direction: column;
}
.card h3 { margin-bottom: .5rem; }
.card p { font-size: .98rem; color: var(--ink-muted); }
.card .card-link { margin-top: auto; font-weight: 700; text-decoration: none; padding-top: .5rem; }
.card .card-link:hover { text-decoration: underline; }
/* Team cards: photo sits flush to the card edges above the name. */
.card-photo {
  margin: -1.6rem -1.6rem 1.1rem;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--wash);
  border-bottom: 1px solid var(--wash-line);
}
.card-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.photo-pending {
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 1.25rem; color: var(--ink-muted); font-size: .88rem; line-height: 1.4;
}
.card-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.1rem; height: 2.1rem; border-radius: 50%;
  background: var(--navy); color: var(--white); font-weight: 700; font-size: .95rem;
  margin-bottom: .9rem; flex: none;
}

/* --------------------------------------------------------- reason list -- */
.reasons { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.35rem; }
@media (min-width: 760px) { .reasons { grid-template-columns: repeat(2, 1fr); gap: 1.5rem 2.5rem; } }
.reasons li { padding-left: 2.4rem; position: relative; }
.reasons li::before {
  content: ""; position: absolute; left: 0; top: .18em;
  width: 1.15rem; height: .65rem; border-left: 3px solid var(--accent);
  border-bottom: 3px solid var(--accent); transform: rotate(-45deg);
}
.reasons h3 { font-size: 1.05rem; margin-bottom: .25rem; }
.reasons p { font-size: .97rem; color: var(--ink-muted); margin: 0; }
.band-navy .reasons p { color: #C7CBD1; }

/* -------------------------------------------------------------- tables -- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 1.5rem; }
table { border-collapse: collapse; width: 100%; font-size: .97rem; background: var(--white); }
caption { text-align: left; font-weight: 700; color: var(--navy); padding-bottom: .6rem; }
th, td { text-align: left; padding: .85rem 1rem; border-bottom: 1px solid var(--wash-line); vertical-align: top; }
thead th { background: var(--navy); color: var(--white); font-size: .88rem; letter-spacing: .04em; text-transform: uppercase; }
tbody th { width: 34%; color: var(--navy); font-weight: 700; }
tbody tr:nth-child(even) { background: #FAF9F6; }

/* --------------------------------------------------------- checklists -- */
.checklist { list-style: none; margin: 0 0 1.25rem; padding: 0; }
.checklist li { padding-left: 1.9rem; position: relative; margin-bottom: .6rem; }
.checklist li::before {
  content: ""; position: absolute; left: 0; top: .3em;
  width: 1rem; height: .55rem; border-left: 3px solid var(--accent);
  border-bottom: 3px solid var(--accent); transform: rotate(-45deg);
}
.checklist-tight li { margin-bottom: .35rem; }

/* --------------------------------------------------------- step flow --- */
.steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; gap: 1.5rem; }
.step {
  counter-increment: step; position: relative; padding-left: 4.2rem;
  padding-bottom: 1.5rem; border-bottom: 1px solid var(--wash-line);
}
.step:last-child { border-bottom: 0; padding-bottom: 0; }
.step::before {
  content: counter(step); position: absolute; left: 0; top: 0;
  width: 2.9rem; height: 2.9rem; border-radius: 50%;
  background: var(--navy); color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; font-weight: 700;
}
.step h3 { margin-bottom: .35rem; padding-top: .45rem; }
.step-detail { background: var(--wash); border-left: 3px solid var(--accent); padding: 1rem 1.25rem; margin-top: 1rem; }
.step-detail p:last-child, .step-detail ul:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------- callout -- */
.callout {
  background: var(--wash); border-left: 4px solid var(--navy);
  padding: 1.4rem 1.6rem; border-radius: 0 var(--radius) var(--radius) 0; margin-bottom: 1.5rem;
}
.callout h3 { margin-bottom: .4rem; }
/* An intro callout that sits before the page's first h2 uses an h2 for correct
   heading order, but keeps the visual weight of a callout heading. */
.callout h2 { font-size: 1.2rem; margin-bottom: .4rem; }
.callout p:last-child, .callout ul:last-child { margin-bottom: 0; }
.callout-accent { border-left-color: var(--accent); }

/* ------------------------------------------------- quotation exemplar -- */
.quote-demo {
  border: 1px solid var(--wash-line); border-radius: var(--radius);
  background: var(--white); box-shadow: var(--shadow); overflow: hidden;
}
.quote-demo-head { background: var(--navy); color: var(--white); padding: 1rem 1.35rem; }
.quote-demo-head p { margin: 0; font-size: .9rem; color: #C7CBD1; max-width: none; }
.quote-demo-head strong { color: var(--white); display: block; font-size: 1.05rem; }
.quote-part { padding: 1.35rem; border-bottom: 1px solid var(--wash-line); }
.quote-part:last-child { border-bottom: 0; }
.quote-part h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; color: var(--accent-deep); margin-bottom: .6rem; }
.quote-part ul { list-style: none; margin: 0; padding: 0; font-size: .95rem; }
.quote-part li { padding: .25rem 0 .25rem 1.4rem; position: relative; color: var(--ink-muted); }
.quote-part li::before { content: "–"; position: absolute; left: .25rem; color: var(--accent); font-weight: 700; }
.quote-note { background: var(--wash); padding: 1rem 1.35rem; font-size: .9rem; color: var(--ink-muted); }
.quote-note p { margin: 0; }

/* ------------------------------------------------------ case studies --- */
.case { border: 1px solid var(--wash-line); border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow); overflow: hidden; margin-bottom: 2rem; }
.case-head { padding: 1.4rem 1.6rem .2rem; }
.case-head h3 { margin-bottom: .3rem; }
.case-meta { display: flex; flex-wrap: wrap; gap: .5rem; padding: 0 1.6rem 1.1rem; }
.tag {
  display: inline-block; background: var(--wash); border: 1px solid var(--wash-line);
  color: var(--navy); font-size: .8rem; font-weight: 700; padding: .25rem .65rem; border-radius: 999px;
}
.case-body { padding: 0 1.6rem 1.4rem; }
.case-body dl { display: grid; gap: .2rem 1.5rem; margin: 0; }
@media (min-width: 680px) { .case-body dl { grid-template-columns: max-content 1fr; } }
.case-body dt { font-weight: 700; color: var(--navy); font-size: .92rem; }
.case-body dd { margin: 0 0 .7rem; font-size: .97rem; color: var(--ink-muted); }
.outcome { background: var(--wash); border-top: 1px solid var(--wash-line); padding: 1rem 1.6rem; font-weight: 600; color: var(--navy); }

.ba-pair { display: grid; gap: 1rem; margin: 1.25rem 0; }
@media (min-width: 620px) { .ba-pair { grid-template-columns: 1fr 1fr; } }
.ba-slot {
  border: 1px dashed var(--wash-line); background: var(--wash); border-radius: var(--radius);
  aspect-ratio: 4 / 3; display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center; padding: 1rem; color: var(--ink-muted); font-size: .9rem;
}
.ba-slot strong { display: block; color: var(--navy); text-transform: uppercase; letter-spacing: .1em; font-size: .78rem; margin-bottom: .35rem; }

/* -------------------------------------------------------------- forms -- */
.form-panel { background: var(--white); border: 1px solid var(--wash-line); border-radius: var(--radius); padding: 1.75rem; box-shadow: var(--shadow); }
.field { margin-bottom: 1.15rem; }
.field label { display: block; font-weight: 700; color: var(--navy); margin-bottom: .35rem; font-size: .95rem; }
.field .hint { display: block; font-weight: 400; color: var(--ink-muted); font-size: .87rem; margin-top: .15rem; }
.req { color: var(--accent-deep); }
input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
input[type="file"], select, textarea {
  width: 100%; min-width: 0; max-width: 100%; font: inherit; font-size: 1rem; color: var(--ink);
  padding: .7rem .85rem; border: 1px solid #878D96; border-radius: var(--radius);
  background: var(--white);
}
textarea { min-height: 8rem; resize: vertical; }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--navy) 50%), linear-gradient(135deg, var(--navy) 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(1.15em), calc(100% - 15px) calc(1.15em);
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 2.5rem; }
input:focus, select:focus, textarea:focus { border-color: var(--navy); }
fieldset { border: 0; padding: 0; margin: 0 0 1rem; }
legend { font-weight: 700; color: var(--navy); padding: 0; margin-bottom: .5rem; }
@media (min-width: 640px) { .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.25rem; } }
.form-legal { font-size: .87rem; color: var(--ink-muted); }

/* ----------------------------------------------------- contact blocks -- */
.contact-card { background: var(--navy); color: #E5E4E0; border-radius: var(--radius); padding: 1.6rem; }
.contact-card h3 { color: var(--white); margin-bottom: .2rem; }
.contact-card p { color: #C7CBD1; font-size: .96rem; }
.contact-card a { color: #F0B98B; font-weight: 700; }
.contact-list { list-style: none; margin: 0; padding: 0; }
.contact-list li { margin-bottom: .8rem; }
.contact-list .label { display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: #A9ADB5; }

/* ------------------------------------------------------------ CTA end -- */
.cta-end { background: var(--navy); color: #C7CBD1; }
/* Two navy sections in a row would otherwise merge into one block. */
.band-navy + .cta-end { border-top: 1px solid var(--navy-line); }
.cta-end h2 { color: var(--white); }
.cta-end p { color: #C7CBD1; font-size: 1.1rem; }

/* ------------------------------------------------------------- footer -- */
.site-footer { background: var(--navy-deep); color: #ACB0B8; font-size: .93rem; padding-block: 2.75rem 1.75rem; }
.site-footer h2, .site-footer h3 { color: var(--white); font-size: .82rem; text-transform: uppercase; letter-spacing: .12em; margin-bottom: .8rem; }
.site-footer a { color: #E5E4E0; text-decoration: none; }
.site-footer a:hover { color: var(--white); text-decoration: underline; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: .45rem; }
.footer-grid { display: grid; gap: 2rem; }
/* Same guard as .grid — the email address is a long unbreakable token and
   would otherwise widen the column past a 320px viewport. */
.footer-grid > * { min-width: 0; }
.site-footer a { overflow-wrap: anywhere; }
@media (min-width: 760px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; } }
.footer-bottom {
  border-top: 1px solid var(--navy-line); margin-top: 2rem; padding-top: 1.25rem;
  display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; justify-content: space-between; font-size: .85rem;
}
.footer-bottom p { margin: 0; max-width: none; }

/* --------------------------------------------------- service anchors --- */
.anchor-nav {
  background: var(--wash); border-bottom: 1px solid var(--wash-line);
  position: sticky; top: 5.1rem; z-index: 40;
}
@media (max-width: 900px) { .anchor-nav { position: static; } }
.anchor-nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: .45rem 1.5rem; margin: 0; padding: .7rem 0; }
.anchor-nav a { font-weight: 700; font-size: .95rem; color: var(--navy); text-decoration: none; border-bottom: 2px solid var(--accent); padding-bottom: .15rem; }
.anchor-nav a:hover { color: var(--accent-deep); }
.svc, [id].anchor-target { scroll-margin-top: 6.5rem; }
.svc + .svc { border-top: 1px solid var(--wash-line); }

/* Home-page trust row — marks plus the numbers that back them. */
.trustbar { background: var(--white); border-bottom: 1px solid var(--wash-line); }
.trustbar .wrap {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 1.25rem 2.75rem; padding-block: 1.4rem;
}
.trustbar img { height: 54px; width: auto; flex: none; }
.trustbar .trust-note {
  font-size: .92rem; color: var(--ink-muted); max-width: 30ch; margin: 0;
}
.trustbar .trust-note strong { color: var(--navy); display: block; }
@media (max-width: 560px) {
  .trustbar .wrap { gap: 1rem 1.75rem; }
  .trustbar img { height: 44px; }
}

/* ------------------------------------ registrations & memberships ------ */
.cred-tiles { display: grid; gap: 1.25rem; margin-top: 1.75rem; }
@media (min-width: 700px) { .cred-tiles { grid-template-columns: repeat(2, 1fr); } }
.cred-tile {
  background: var(--white); border: 1px solid var(--wash-line); border-radius: var(--radius);
  padding: 1.5rem; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: .35rem;
}
.cred-tile .cred-logo {
  height: 62px; display: flex; align-items: center; margin-bottom: .9rem;
}
.cred-tile .cred-logo img { max-height: 62px; width: auto; }
.cred-tile h3 { margin-bottom: .1rem; }
.cred-tile .cred-id {
  font-size: 1.05rem; font-weight: 700; color: var(--navy);
  font-variant-numeric: tabular-nums; letter-spacing: .01em;
}
.cred-tile p { font-size: .95rem; color: var(--ink-muted); margin-bottom: 0; }
.cred-verify {
  margin-top: auto; padding-top: .9rem; font-weight: 700; font-size: .93rem; text-decoration: none;
}
.cred-verify:hover { text-decoration: underline; }
/* Slot awaiting an entitlement check — see README, "Third-party logos". */
.cred-pending {
  border-style: dashed; background: var(--wash);
}
.cred-pending .cred-logo {
  border: 1px dashed var(--wash-line); border-radius: var(--radius); background: var(--white);
  justify-content: center; padding: .5rem 1rem; color: var(--ink-muted); font-size: .82rem;
}

/* ------------------------------------------------- [CONFIRM] markers --- */
.confirm {
  display: inline-block; background: #FDF3E7; color: var(--confirm);
  border: 1px dashed var(--confirm); border-radius: 3px;
  font-size: .82rem; font-weight: 700; padding: .1rem .45rem; letter-spacing: .01em;
}
.confirm::before { content: "⚑ "; }
.band-navy .confirm, .credstrip .confirm { background: #FDF3E7; }

/* ------------------------------------------------------------ utility -- */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.text-center { text-align: center; }
.center-narrow { max-width: 720px; margin-inline: auto; }
.center-narrow p { margin-inline: auto; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.stack > * + * { margin-top: 1.15rem; }
.small { font-size: .9rem; color: var(--ink-muted); }

/* ------------------------------------------------- mobile nav toggle ---- */
/* Progressive enhancement: without JS the nav stays visible (current
   behaviour). With JS, it collapses on small screens so the hero CTA is not
   pushed below the fold — the single biggest mobile conversion problem found
   in review. */
.nav-toggle { display: none; }
@media (max-width: 900px) {
  .js .nav-toggle {
    display: inline-flex; align-items: center; gap: .55rem;
    background: transparent; color: var(--white);
    border: 1px solid var(--navy-line); border-radius: var(--radius);
    /* No `font:` shorthand — it resets font-family and would override the
       display face set in the brand layer. */
    font-size: .9rem; font-weight: 700; line-height: inherit;
    padding: .6rem .9rem; cursor: pointer;
  }
  .js .nav-toggle:hover { background: var(--navy); }
  .nav-toggle-bars { display: block; width: 16px; height: 2px; background: currentColor; position: relative; }
  .nav-toggle-bars::before, .nav-toggle-bars::after {
    content: ""; position: absolute; left: 0; width: 16px; height: 2px; background: currentColor;
  }
  .nav-toggle-bars::before { top: -5px; }
  .nav-toggle-bars::after { top: 5px; }
  .js .nav-toggle[aria-expanded="true"] .nav-toggle-bars { background: transparent; }
  .js .nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { top: 0; transform: rotate(45deg); }
  .js .nav-toggle[aria-expanded="true"] .nav-toggle-bars::after  { top: 0; transform: rotate(-45deg); }

  .js .site-nav ul { display: none; }
  .js .site-nav.is-open ul { display: flex; flex-direction: column; gap: 0; margin-top: .35rem; }
  .js .site-nav.is-open li { border-top: 1px solid var(--navy-line); }
  .js .site-nav.is-open a { display: block; padding: .75rem 0; font-size: 1rem; border-bottom: 0; }
  .js .site-nav.is-open a[aria-current="page"] { color: #F0B98B; }
}

/* Mobile hero: the eyebrow repeats what the H1 and subhead already say, and on
   a phone it costs ~4 lines before the reader reaches anything actionable. */
@media (max-width: 560px) {
  /* eyebrow retained: it is the only scannable audience line on mobile */
  .hero { padding-block: 2rem 2.5rem; }
  .hero h1 { font-size: 1.75rem; }
  .hero p { font-size: 1.05rem; }
  .btn-row { gap: .6rem; }
  .btn { width: 100%; }
}

/* Defensibility callout sits inside a navy band, so it needs its own light-on-dark
   treatment rather than the default wash background. */
.band-navy .callout.defensibility {
  background: var(--navy-deep); border-left-color: var(--accent); margin-top: 2rem;
}
.band-navy .callout.defensibility h3 { color: var(--white); }
.band-navy .callout.defensibility p { color: #C7CBD1; }

/* At 320px the Menu toggle (94px) + call button (159px) + gap overflowed the
   272px content width by under a pixel, wrapping the header onto a third row.
   Tighten the gap and the call button's padding at the narrowest widths. */
@media (max-width: 360px) {
  .header-inner { gap: .75rem .6rem; }
  .header-phone { padding-inline: .8rem; font-size: .9rem; }
  .js .nav-toggle { padding-inline: .7rem; }
}

/* The Grid wordmark is 3.86:1 — far wider than a stacked mark. At 320px the
   max-width guard clips it and object-fit letterboxes the box, so drop the
   height a little at the narrowest widths and let it sit at full ratio. */
@media (max-width: 360px) {
  .logo img { height: 44px; max-width: 100%; }
}


/* ==================================================================
   Grid brand layer — display face, texture, dark-band mark colours
   ================================================================== */
h1, h2, h3, h4, .btn, .site-nav a, .logo-mark, .header-phone,
.nav-toggle, .hero-stat strong, thead th, .anchor-nav a {
  font-family: var(--display);
}
/* Monospace labels, matching the Grid Modular treatment. Declared after the
   display-face list so source order cannot undo it. */
.eyebrow, .cred-id, .tag { font-family: var(--mono); }
h1 { font-weight: 750; }
h2 { font-weight: 700; }

/* Grid motif on the dark stage, matching Grid Modular: fine orthogonal rules
   plus a low ember glow. Pure CSS, no image request, no external asset. */
.hero, .page-head {
  background:
    radial-gradient(560px 320px at 85% 8%, rgba(221, 112, 56, .10), transparent 70%),
    repeating-linear-gradient(to right, rgba(255,255,255,.045) 0 1px, transparent 1px 72px),
    repeating-linear-gradient(to bottom, rgba(255,255,255,.045) 0 1px, transparent 1px 72px),
    var(--iron);
}
.cta-end {
  background:
    radial-gradient(480px 280px at 12% 100%, rgba(221, 112, 56, .08), transparent 70%),
    var(--iron);
}

/* Graphic marks need 3:1 against their background — ember fails on iron,
   so dark bands use the bright ember. */
.credstrip li::before,
.band-navy .reasons li::before,
.band-navy .checklist li::before { border-color: var(--ember-bright); }
.band-navy .callout.defensibility { border-left-color: var(--ember-bright); }
.cover-rule { background: var(--ember-bright); }

/* Progressive disclosure. Detail a committed reader wants, kept out of the
   skim path. Never used on compliance.html: that page is saved to PDF and put
   in contract files, and collapsed content can fail to print or escape Ctrl-F. */
.disclose { border-top: 1px solid var(--wash-line); margin-top: 1.5rem; }
.disclose > summary {
  cursor: pointer; font-weight: 700; color: var(--navy);
  padding: .9rem 0 .9rem 1.6rem; list-style: none; position: relative;
}
.disclose > summary::-webkit-details-marker { display: none; }
.disclose > summary::before {
  content: "+"; position: absolute; left: 0; top: .78rem;
  font-size: 1.2rem; line-height: 1; color: var(--accent); font-weight: 700;
}
.disclose[open] > summary::before { content: "\2212"; }
.disclose > summary:hover { color: var(--accent-deep); }
.disclose > summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.disclose > :not(summary) { margin-bottom: 1rem; }
.disclose > :last-child { margin-bottom: 1.5rem; }
@media print { .disclose > :not(summary) { display: block !important; } }

/* Compressed index of the five steps, promoted into the first screen so the
   page shows the method it promises rather than describing that it has one. */
.step-index { list-style: none; counter-reset: si; margin: 0; padding: 0; display: grid; gap: .85rem; }
.step-index li {
  counter-increment: si; position: relative; padding-left: 2.5rem;
  font-size: 1.03rem; line-height: 1.5;
}
.step-index li::before {
  content: counter(si); position: absolute; left: 0; top: 0;
  width: 1.7rem; height: 1.7rem; border-radius: 50%;
  background: var(--accent); color: var(--white);
  font-weight: 700; font-size: .92rem;
  display: grid; place-items: center;
}
.quote-demo { scroll-margin-top: 7rem; }

/* On mobile the sidebar renders after the form, so the reassurance a reader
   needs at the moment of decision has to sit above the submit button. */
.pre-submit { margin: 1.75rem 0; }
@media (min-width: 900px) { .pre-submit { display: none; } }

/* Spam honeypot. Hidden from people, visible to bots that fill everything. */
.hp-field { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }