/* ==========================================================================
   Foundry 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:        #23262C;  /* primary — headings, header, footer, dark bands */
  --iron-deep:   #191B20;  /* footer, credibility strip, hover states        */
  --iron-line:   #3A3E46;  /* borders on iron surfaces                       */
  --paper:       #F5F4F0;  /* warm neutral page sections                     */
  --paper-line:  #E4E2DB;  /* hairlines on light surfaces                    */
  --white:       #FFFFFF;
  --ink:         #20232A;  /* body text                                      */
  --ink-muted:   #555A62;  /* secondary text — 6.9: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 — 4.7:1 on iron    */
  --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: "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI",
          Roboto, Arial, sans-serif;
  --display: "Archivo", "Helvetica Neue", -apple-system, "Segoe UI", Roboto, Arial, sans-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: "Archivo";
  src: url("../fonts/archivo-var.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  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(1.9rem, 1.3rem + 2vw, 2.7rem); letter-spacing: -.02em; }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); 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 {
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .78rem;
  font-weight: 700;
  color: var(--accent-deep);
  margin: 0 0 .7rem;
}
.eyebrow-light { color: #E5A473; }

/* -------------------------------------------------------------- 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;
}
/* The header bar is allowed to run wider than the 1180px content column so the
   logo, seven nav items and the call button sit on a single row at desktop. */
.site-header .wrap { max-width: 1340px; }
.header-inner {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.25rem;
  padding-block: .62rem;
}
.logo { display: flex; flex-direction: column; 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: 62px; width: auto; align-self: flex-start; max-width: min(280px, 55vw); object-fit: contain; display: block; }
@media (max-width: 900px) { .logo img { height: 48px; } }
.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: 600;
  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: 700; font-size: .95rem;
  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 Foundry 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%; }
}


/* ==================================================================
   Foundry brand layer — display face, texture, dark-band mark colours
   ================================================================== */
h1, h2, h3, h4, .btn, .eyebrow, .site-nav a, .logo-mark, .header-phone,
.nav-toggle, .cred-id, .hero-stat strong, thead th, .tag, .anchor-nav a {
  font-family: var(--display);
}
h1 { font-weight: 750; }
h2 { font-weight: 700; }

/* Forged texture on the dark stage: a faint diagonal grain 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(135deg, rgba(255,255,255,.022) 0 1px, transparent 1px 14px),
    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; }