/* ==========================================================================
   Layout stylesheet. The colour tokens in :root are defaults only;
   palette.css, generated per site, overrides every one of them.
   ========================================================================== */
:root {
  /* Forest ink. Dark bands read as deliberate, not grey. */
  --ink:      #14241b;
  --ink-2:    #20372b;
  --ink-3:    #2e4c3c;   /* raised surface inside dark bands */

  /* Primary: signal red */
  --brick:    #bf1d27;
  --brick-d:  #9b131c;
  --brick-l:  #e05b63;

  /* Second accent */
  --amber:    #86cb93;
  --amber-d:  #4ca95e;
  --ember:    #e06f67;

  --bone:     #f7f8f7;
  --sand:     #eef1ef;
  --line:     #dbe1dd;
  --line-2:   #c2cbc5;
  --text:     #17271e;
  --muted:    #586e62;
  --white:    #ffffff;

  --radius:   3px;
  --container: 1180px;
  --gutter:   22px;
  --t:        .18s ease;

  --display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --body:    'Public Sans', system-ui, -apple-system, Segoe UI, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--text);
  background: var(--bone);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
ul { list-style: none; padding: 0; margin: 0; }

a { color: var(--brick); text-decoration: underline; text-underline-offset: 3px;
    text-decoration-thickness: 1px; transition: color var(--t); }
a:hover { color: var(--brick-d); }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 .5em;
}
h1 { font-size: clamp(2.3rem, 5vw, 3.9rem); letter-spacing: -0.03em; }
h2 { font-size: clamp(1.7rem, 3.1vw, 2.5rem); letter-spacing: -0.02em; }
h3 { font-size: 1.16rem; letter-spacing: -0.01em; }
p  { margin: 0 0 1.1em; }

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

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

/* ------------------------------------------------------------ eyebrow */
.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--body);
  font-size: .73rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--brick);
}
.eyebrow::before {
  content: ""; width: 26px; height: 2px; background: var(--brick); flex: none;
}

/* ------------------------------------------------------------ buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--body); font-weight: 700; font-size: .95rem;
  padding: 14px 26px;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  background: var(--white); color: var(--ink);
  text-decoration: none; cursor: pointer;
  box-shadow: 4px 4px 0 var(--ink);
  transition: transform var(--t), box-shadow var(--t), background var(--t), color var(--t);
}
.btn:hover {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--ink);
  color: var(--ink);
}
.btn-primary { background: var(--brick); border-color: var(--brick-d);
               color: var(--white); box-shadow: 4px 4px 0 var(--brick-d); }
.btn-primary:hover { background: var(--brick-d); color: var(--white);
                     box-shadow: 2px 2px 0 var(--brick-d); }
.btn-dark { background: var(--ink); color: var(--white); box-shadow: 4px 4px 0 var(--ink-2); }
.btn-dark:hover { color: var(--white); box-shadow: 2px 2px 0 var(--ink-2); }
.btn-lg { padding: 17px 32px; font-size: 1rem; }
.btn-block { width: 100%; }
.btn-onink { background: transparent; border-color: var(--white); color: var(--white);
             box-shadow: 4px 4px 0 rgba(255,255,255,.35); }
.btn-onink:hover { background: var(--white); color: var(--ink);
                   box-shadow: 2px 2px 0 rgba(255,255,255,.35); }

/* ------------------------------------------------------------ top bar */
.utility {
  background: var(--ink); color: rgba(255,255,255,.8);
  font-size: .8rem; letter-spacing: .01em;
}
.utility-in { display: flex; justify-content: space-between; align-items: center;
              min-height: 40px; gap: 18px; }
.utility a { color: var(--white); text-decoration: none; font-weight: 600; }
/* a phone number never breaks across two lines */
.utility a[href^="tel:"] { white-space: nowrap; }
.utility a:hover { color: var(--ember); }
.utility-left { display: flex; gap: 22px; }
.hide-sm { display: inline; }

/* ------------------------------------------------------------ header */
.masthead {
  position: sticky; top: 0; z-index: 90;
  background: var(--bone);
  border-bottom: 2px solid var(--ink);
}
.masthead-in { display: flex; align-items: center; justify-content: space-between;
               gap: 26px; min-height: 78px; }

.wordmark { display: inline-flex; align-items: center; gap: 12px;
            text-decoration: none; color: var(--ink); }
.wordmark-mark {
  width: 40px; height: 40px; flex: none;
  background: var(--brick); color: var(--white);
  display: grid; place-items: center;
  font-family: var(--display); font-weight: 900; font-size: 1.25rem;
  border-radius: var(--radius);
}
.wordmark-text { font-family: var(--display); font-weight: 700; font-size: 1.22rem;
                 line-height: 1.05; letter-spacing: -.02em; }
.wordmark-text span { display: block; font-family: var(--body); font-weight: 600;
                      font-size: .68rem; letter-spacing: .18em; text-transform: uppercase;
                      color: var(--muted); }

/* nav */
.nav > ul { display: flex; align-items: center; gap: 4px; }
.nav a { display: inline-flex; align-items: center; gap: 6px;
         font-size: .87rem; font-weight: 700; letter-spacing: .07em;
         text-transform: uppercase; color: var(--ink);
         text-decoration: none; padding: 10px 13px; border-radius: var(--radius); }
.nav a:hover { background: var(--sand); color: var(--brick); }
.nav li { position: relative; }

.submenu {
  position: absolute; top: 100%; left: 0; display: none;
  min-width: 270px; background: var(--white);
  border: 2px solid var(--ink); border-radius: var(--radius);
  box-shadow: 6px 6px 0 rgba(26,22,20,.13); padding: 8px;
}
.submenu.wide { min-width: 460px; display: none; }
.nav .has-sub:hover .submenu { display: block; }
.submenu.wide { column-count: 2; column-gap: 6px; }
.submenu a { display: block; text-transform: none; letter-spacing: 0;
             font-weight: 600; font-size: .9rem; padding: 9px 11px;
             break-inside: avoid; }

.masthead-cta { display: flex; align-items: center; gap: 12px; }
.callout {
  display: inline-flex; align-items: center; gap: 11px;
  background: var(--ink); color: var(--white);
  padding: 10px 18px; border-radius: var(--radius); text-decoration: none;
}
.callout:hover { background: var(--brick); color: var(--white); }
.callout small { display: block; font-size: .64rem; letter-spacing: .15em;
                 text-transform: uppercase; opacity: .72; line-height: 1; }
.callout strong { font-size: 1.02rem; font-family: var(--display); letter-spacing: -.01em; }

.menu-btn { display: none; background: var(--white); border: 2px solid var(--ink);
            border-radius: var(--radius); width: 46px; height: 44px;
            font-size: 1.1rem; cursor: pointer; color: var(--ink); }

/* ------------------------------------------------------------ hero */
.hero {
  background:
    radial-gradient(1100px 520px at 88% -10%, rgba(194,65,12,.30) 0%, transparent 62%),
    radial-gradient(700px 420px at 4% 108%, rgba(232,163,61,.13) 0%, transparent 60%),
    var(--ink);
  color: var(--white); padding: 74px 0 78px;
  position: relative; overflow: hidden;
  border-bottom: 3px solid var(--brick);
}
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 96px);
}
.hero-in { position: relative; z-index: 1;
           display: grid; grid-template-columns: 1.08fr .92fr;
           gap: 60px; align-items: center; }
.hero h1 { color: var(--white); margin: 18px 0 20px; }
.hero h1 em { font-style: normal; color: var(--ember); }
.hero .eyebrow { color: var(--amber); }
.hero .eyebrow::before { background: var(--amber); }
.hero-lead { font-size: 1.12rem; color: rgba(255,255,255,.8); max-width: 600px; }
.hero-lead strong { color: var(--white); }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin: 28px 0 0; }

/* what you actually get -- the value the hero was missing */
.hero-value { display: grid; gap: 13px; margin: 26px 0 0;
              border-left: 2px solid rgba(232,163,61,.45); padding-left: 20px; }
.hero-value li { display: grid; grid-template-columns: 22px 1fr; gap: 12px;
                 font-size: .98rem; color: rgba(255,255,255,.88); }
.hero-value i { color: var(--amber); margin-top: 5px; font-size: .9rem; }
.hero-value strong { color: var(--white); font-weight: 700; }

/* visual anchor */
.hero-visual { position: relative; }
.hero-visual img { width: 100%; height: auto; aspect-ratio: 4/3;
                   object-fit: cover; display: block;
                   border: 3px solid rgba(255,255,255,.12);
                   border-radius: var(--radius); }
.hero-plate {
  position: absolute; left: -18px; bottom: -18px;
  background: var(--brick); color: var(--white);
  padding: 16px 20px; border-radius: var(--radius);
  box-shadow: 6px 6px 0 rgba(0,0,0,.35); max-width: 260px;
}
.hero-plate strong { display: block; font-family: var(--display);
                     font-size: 1.28rem; line-height: 1.1; }
.hero-plate span { display: block; margin-top: 4px; font-size: .78rem;
                   letter-spacing: .1em; text-transform: uppercase;
                   color: rgba(255,255,255,.82); }

/* ------------------------------------------------------------ marks row */
.marks { background: var(--sand); border-bottom: 1px solid var(--line); }
.marks-grid > div { position: relative; }
.marks-grid > div::before { content: ""; position: absolute; top: 0; left: 24px;
  width: 26px; height: 3px; background: var(--brick); }
.marks-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.marks-grid > div { padding: 26px 24px; border-right: 1px solid var(--line); }
.marks-grid > div:last-child { border-right: 0; }
.marks-grid strong { display: block; font-family: var(--display); font-size: 1.02rem;
                     color: var(--ink); margin-bottom: 3px; }
.marks-grid span { font-size: .87rem; color: var(--muted); }

/* ------------------------------------------------------------ sections */
.band { padding: 76px 0; }
.band-sand { background: var(--sand); }
.band-ink {
  background:
    radial-gradient(900px 420px at 92% 0%, rgba(194,65,12,.22) 0%, transparent 60%),
    var(--ink);
  color: rgba(255,255,255,.82);
  border-top: 3px solid var(--brick);
}
.band-ink .card { background: var(--ink-3); border-color: rgba(255,255,255,.12); }
.band-ink .card:hover { border-color: var(--amber); }
.band-ink .card h3 { color: var(--white); }
.band-ink .card p { color: rgba(255,255,255,.72); }
.band-ink .card-icon { background: rgba(232,163,61,.14); color: var(--amber); }
.band-ink .head-index { color: rgba(255,255,255,.28); }
.band-ink h2, .band-ink h3 { color: var(--white); }
/* Inherited from the base theme with this override missing: .head p is
   --muted, which is 2.94:1 on --ink and fails WCAG AA for body text. The
   card and step equivalents on this band were already overridden; this one
   was not. Same value as those, 9.48:1. */
.band-ink .head p { color: rgba(255,255,255,.72); }
.band-ink .ticks span { color: rgba(255,255,255,.82); }
.band-ink .ticks i { color: var(--amber); }
.band-ink .eyebrow { color: var(--ember); }
.band-ink .eyebrow::before { background: var(--ember); }
.band + .band { border-top: 1px solid var(--line); }
.band-sand + .band-sand { border-top: 1px solid var(--line-2); }

.head { max-width: 760px; margin-bottom: 42px; }
.head h2 { margin-top: 14px; }
.head p { color: var(--muted); font-size: 1.05rem; margin: 0; }
.head-index { font-family: var(--display); font-size: .9rem; color: var(--line-2);
              display: block; margin-bottom: 6px; }

/* ------------------------------------------------------------ card grids */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }

.card {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 30px 26px;
  transition: border-color var(--t), transform var(--t);
}
.card:hover { border-color: var(--ink); transform: translateY(-3px); }
.card h3 { margin-bottom: 9px; }
.card p { font-size: .95rem; color: var(--muted); margin: 0; }
.card-icon { width: 44px; height: 44px; display: grid; place-items: center;
             background: var(--sand); color: var(--brick); border-radius: var(--radius);
             font-size: 1.15rem; margin-bottom: 18px; }
.card-more { display: inline-block; margin-top: 16px; font-weight: 700;
             font-size: .88rem; letter-spacing: .04em; }

/* Linked card headings.
   The heading carries the link and the foot link is gone, so the heading's
   hit area is stretched over the whole card -- a bigger target than the small
   text link it replaces, not a smaller one. */
.card-linked { position: relative; }
.card-link { color: inherit; text-decoration: none; }
.card-link::after { content: ""; position: absolute; inset: 0; }
.card-linked:hover .card-link,
.card-link:focus-visible { color: var(--brick); text-decoration: underline;
                           text-underline-offset: 3px; }
.card-linked:hover { border-color: var(--ink); }
/* keep the focus ring on the card, not on a zero-height inline box */
.card-link:focus-visible { outline: none; }
.card-linked:focus-within { outline: 3px solid var(--brick); outline-offset: 2px; }
.band-ink .card-linked:hover .card-link { color: var(--amber); }

/* numbered steps */
.steps { display: grid; gap: 0; }
.step { display: grid; grid-template-columns: 74px 1fr; gap: 24px;
        padding: 26px 0; border-top: 1px solid var(--line); }
.step:last-child { border-bottom: 1px solid var(--line); }
.step-n { font-family: var(--display); font-size: 2.1rem; font-weight: 700;
          color: var(--line-2); line-height: 1; }
.step h3 { margin-bottom: 7px; }
.step p { margin: 0; color: var(--muted); font-size: .96rem; }
.band-ink .step { border-color: rgba(255,255,255,.14); }
.band-ink .step-n { color: rgba(255,255,255,.3); }
.band-ink .step p { color: rgba(255,255,255,.72); }

/* ------------------------------------------------------------ split w/ image */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.split.flip .split-media { order: -1; }
.split-media { border: 1px solid var(--line); border-radius: var(--radius);
               overflow: hidden; position: relative; background: var(--sand); }
.split-media img { width: 100%; height: auto; aspect-ratio: 4 / 3;
                   object-fit: cover; display: block; }
.split-tag { position: absolute; left: 0; bottom: 0;
             background: var(--ink); color: var(--white);
             padding: 9px 15px; font-size: .78rem; font-weight: 700;
             letter-spacing: .1em; text-transform: uppercase; }
.split-body h2 { margin-bottom: 16px; }
.split-body p { color: var(--muted); }

.ticks { margin: 0 0 24px; display: grid; gap: 11px; }
.ticks li { display: grid; grid-template-columns: 22px 1fr; gap: 10px;
            font-size: .95rem; color: var(--text); }
.ticks i { color: var(--brick); margin-top: 4px; }

/* ------------------------------------------------------------ fact panel */
.facts { display: grid; grid-template-columns: 1.35fr 1fr; gap: 46px; align-items: start; }
.facts h3 { margin-bottom: 8px; }
.facts p { color: var(--muted); }
.panel { background: var(--white); border: 2px solid var(--ink);
         border-radius: var(--radius); padding: 28px 26px;
         box-shadow: 6px 6px 0 var(--sand); }
.panel h3 { margin-bottom: 10px; }
.panel p { font-size: .93rem; margin-bottom: 0; }
.panel p + p { margin-top: 12px; }

/* census figures strip */
.figures { display: grid; grid-template-columns: repeat(4, 1fr);
           border: 1px solid var(--line); border-radius: var(--radius);
           background: var(--white); margin-top: 34px; }
.figures div { padding: 20px 18px; border-right: 1px solid var(--line); }
.figures div:last-child { border-right: 0; }
.figures dt { font-family: var(--display); font-size: 1.5rem; font-weight: 700;
              color: var(--ink); line-height: 1; }
.figures dd { margin: 6px 0 0; font-size: .76rem; letter-spacing: .1em;
              text-transform: uppercase; color: var(--muted); }

/* ------------------------------------------------------------ link columns */
.linklist { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px;
            border: 1px solid var(--line); border-radius: var(--radius);
            background: var(--line); overflow: hidden; }
.linklist a { background: var(--white); padding: 13px 16px; font-size: .92rem;
              font-weight: 600; color: var(--ink); text-decoration: none;
              transition: background var(--t), color var(--t); }
.linklist a:hover { background: var(--ink); color: var(--white); }

/* ------------------------------------------------------------ faq */
.faq { display: grid; grid-template-columns: 1fr 1.5fr; gap: 56px; align-items: start; }
.faq-items { display: grid; gap: 0; }
.faq-item { border-top: 1px solid var(--line); padding: 22px 0; }
.faq-item:last-child { border-bottom: 1px solid var(--line); }
.faq-q { font-family: var(--display); font-weight: 700; font-size: 1.08rem;
         color: var(--ink); margin-bottom: 8px; }
.faq-item p { margin: 0; color: var(--muted); font-size: .96rem; }

/* ------------------------------------------------------------ closing cta */
.closer { background: var(--brick); color: var(--white); padding: 66px 0; }
.closer-in { display: grid; grid-template-columns: 1.6fr 1fr; gap: 40px; align-items: center; }
.closer h2 { color: var(--white); margin-bottom: 10px; }
.closer p { color: rgba(255,255,255,.88); margin: 0; font-size: 1.05rem; }
.closer .btn { background: var(--white); border-color: var(--white); color: var(--brick);
               box-shadow: 4px 4px 0 var(--brick-d); }
.closer .btn:hover { box-shadow: 2px 2px 0 var(--brick-d); color: var(--brick-d); }
.closer-actions { display: flex; justify-content: flex-end; }

/* ------------------------------------------------------------ breadcrumb */
.crumbs { background: var(--sand); border-bottom: 1px solid var(--line);
          font-size: .84rem; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 9px; align-items: center;
             padding: 13px 0; margin: 0; list-style: none; color: var(--muted); }
.crumbs li { display: inline-flex; align-items: center; gap: 9px; }
.crumbs li::after { content: "/"; color: var(--line-2); }
.crumbs li:last-child::after { content: ""; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--brick); text-decoration: underline; }

/* inner page hero */
.page-head { background: var(--ink); color: var(--white); padding: 62px 0 66px;
             position: relative; overflow: hidden; }
.page-head::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 1px, transparent 1px 88px);
}
.page-head > .container { position: relative; z-index: 1; }
.page-head h1 { color: var(--white); margin: 18px 0 16px; max-width: 900px; }
.page-head .eyebrow { color: var(--ember); }
.page-head .eyebrow::before { background: var(--ember); }
.page-head p { color: rgba(255,255,255,.84); font-size: 1.1rem; max-width: 680px;
               margin: 0; }
.page-head .hero-actions { margin-top: 26px; }

/* ------------------------------------------------------------ forms */
.form { background: var(--white); border: 2px solid var(--ink);
        border-radius: var(--radius); padding: 30px 28px;
        box-shadow: 6px 6px 0 var(--sand); display: grid; gap: 16px; }
.field { display: grid; gap: 6px; }
.field label { font-size: .82rem; font-weight: 700; letter-spacing: .04em;
               color: var(--ink); }
.field-note { font-size: .78rem; color: var(--muted); }
.form input, .form select, .form textarea {
  font: inherit; font-size: .95rem; color: var(--text);
  padding: 12px 13px; background: var(--bone);
  border: 1px solid var(--line-2); border-radius: var(--radius);
  width: 100%;
}
.form input:focus, .form select:focus, .form textarea:focus {
  outline: none; border-color: var(--brick); background: var(--white);
}
.form input:disabled, .form select:disabled, .form textarea:disabled {
  opacity: .55; cursor: not-allowed;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-note { display: flex; gap: 9px; font-size: .85rem; color: var(--muted);
             margin: 0; }
.form-note i { color: var(--brick); margin-top: 4px; }

.contact-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; }
.detail-list { display: grid; gap: 18px; margin-top: 26px; }
.detail-list li { display: grid; grid-template-columns: 40px 1fr; gap: 14px;
                  align-items: start; }
.detail-list i { width: 38px; height: 38px; display: grid; place-items: center;
                 background: var(--sand); color: var(--brick);
                 border-radius: var(--radius); font-size: .95rem; }
.detail-list strong { display: block; color: var(--ink); font-size: .95rem; }
.detail-list span, .detail-list a { color: var(--muted); font-size: .95rem; }

/* prose (about, privacy) */
.prose { max-width: 800px; }
.prose h2 { margin-top: 40px; }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { color: var(--muted); }
.prose ol { padding-left: 22px; display: grid; gap: 12px; margin: 0 0 1.1em; }
.prose ol li { list-style: decimal; }
.prose strong { color: var(--ink); }

/* ------------------------------------------------------------ footer */
.foot { background: var(--ink); color: rgba(255,255,255,.72); padding-top: 62px; }
.foot-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.2fr; gap: 40px;
             padding-bottom: 46px; }
.foot .wordmark { color: var(--white); margin-bottom: 16px; }
.foot .wordmark-text span { color: rgba(255,255,255,.55); }
.foot p { font-size: .93rem; color: rgba(255,255,255,.66); }
.foot h2 { font-family: var(--body); font-size: .75rem; font-weight: 700;
           letter-spacing: .16em; text-transform: uppercase;
           color: var(--white); margin-bottom: 16px; }
.foot ul { display: grid; gap: 9px; }
.foot a { color: rgba(255,255,255,.72); text-decoration: none; font-size: .93rem; }
.foot a:hover { color: var(--ember); }
.foot-contact li { display: grid; grid-template-columns: 20px 1fr; gap: 9px;
                   font-size: .93rem; align-items: start; }
.foot-contact i { color: var(--ember); margin-top: 5px; }
.foot-base { border-top: 1px solid rgba(255,255,255,.1); padding: 20px 0 26px;
             font-size: .85rem; color: rgba(255,255,255,.5); }
.foot-base-in { display: flex; justify-content: space-between; gap: 16px;
                flex-wrap: wrap; }
.foot-base a { color: rgba(255,255,255,.5); }

/* sticky mobile call bar */
.callbar { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
           background: var(--brick); color: var(--white); text-align: center;
           padding: 14px; font-weight: 700; text-decoration: none;
           border-top: 2px solid var(--brick-d); }

/* ------------------------------------------------------------ responsive */
@media (max-width: 1040px) {
  .nav { display: none; }
  .menu-btn { display: block; }
  .nav.open {
    display: block; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--bone); border-bottom: 2px solid var(--ink);
    padding: 12px var(--gutter) 20px;
  }
  .nav.open > ul { flex-direction: column; align-items: stretch; gap: 2px; }
  .nav.open a { padding: 13px 10px; }
  .submenu, .submenu.wide { position: static; display: none; border: 0;
    box-shadow: none; padding: 0 0 0 14px; column-count: 1; min-width: 0; }
  .nav.open .has-sub.open .submenu { display: block; }
  /* .hero-in was missing here: the hero grid stayed two-column on phones,
     squeezing the image to ~43px and pushing the plate off-screen. */
  .hero-in { grid-template-columns: 1fr; gap: 38px; }
  .facts, .faq, .split, .contact-cols, .closer-in { grid-template-columns: 1fr; gap: 34px; }
  .split.flip .split-media { order: 0; }
  .closer-actions { justify-content: flex-start; }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .linklist { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 760px) {
  body { font-size: 16px; }
  .hero { padding-bottom: 56px; }
  .hero-plate { left: 12px; right: 12px; bottom: -14px; max-width: none;
                box-shadow: 4px 4px 0 rgba(0,0,0,.35); }
  .hero-plate strong { font-size: 1.12rem; }
  .hide-sm { display: none; }
  /* The header phone pill wrapped onto three lines at phone width and crowded
     the wordmark. The fixed .callbar at the bottom already provides the call
     action, so the pill is redundant here. */
  .callout { display: none; }
  .utility-in { justify-content: center; text-align: center; }
  .utility-left { gap: 0; }
  .band { padding: 54px 0; }
  .hero { padding-top: 56px; }
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .linklist { grid-template-columns: repeat(2, 1fr); }
  .ledger, .marks-grid, .figures { grid-template-columns: repeat(2, 1fr); }
  .ledger div:nth-child(2), .marks-grid > div:nth-child(2) { border-right: 0; }
  .figures div:nth-child(2) { border-right: 0; }
  .ledger div, .marks-grid > div, .figures div { border-bottom: 1px solid rgba(0,0,0,.08); }
  .band-ink .ledger div { border-bottom-color: rgba(255,255,255,.12); }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
  .step { grid-template-columns: 52px 1fr; gap: 16px; }
  .form-row { grid-template-columns: 1fr; }
  .callbar { display: block; }
  body { padding-bottom: 56px; }
  .utility-left { gap: 14px; }
}

@media (max-width: 460px) {
  .ledger, .marks-grid, .figures, .foot-grid { grid-template-columns: 1fr; }
  .ledger div, .marks-grid > div, .figures div { border-right: 0; }
}

@media print {
  .utility, .masthead, .closer, .callbar, .foot { display: none; }
}

/* Promoted from h3 to h2 so the outline stays contiguous; sized as the
   h3 rule it replaces. */
.card .card-title { font-size: 1.16rem; margin-bottom: 9px;
  font-family: var(--display); font-weight: 700; color: var(--ink);
  line-height: 1.12; letter-spacing: -0.01em; }

/* DRAWN LOGO (D.BRAND_MARK + D.LOGO_WORDS + D.LOGO_TAG): the mark is an SVG
   with its own colours; the place name is set in the display face, the trade
   on its own line in the accent colour, and the tag line in spaced capitals
   under both. Without BRAND_MARK the monogram rules above still apply. */
.wordmark-svg { display: block; width: 46px; height: 46px; flex: none; }
.wordmark-svg svg { display: block; width: 100%; height: 100%; }
.wordmark-logo { gap: 11px; }
.wordmark-logo .wordmark-text b { display: block; font-family: var(--display);
  font-weight: 800; font-size: 1.12rem; line-height: 1; letter-spacing: -.005em;
  text-transform: uppercase; white-space: nowrap; }
.wordmark-logo .wordmark-text b em { display: block; margin-top: 3px;
  font-family: var(--body); font-style: normal; font-weight: 700;
  font-size: .62rem; letter-spacing: .16em; color: var(--brick); }
.wordmark-logo .wordmark-text > span { margin-top: 3px; font-size: .52rem;
  letter-spacing: .2em; white-space: nowrap; }
.foot .wordmark-logo .wordmark-text b em { color: var(--brick-l); }
@media (max-width: 420px) {
  .wordmark-svg { width: 40px; height: 40px; }
  .wordmark-logo { gap: 9px; }
  .wordmark-logo .wordmark-text b { font-size: .96rem; }
  .wordmark-logo .wordmark-text b em { font-size: .56rem; letter-spacing: .12em; }
  .wordmark-logo .wordmark-text > span { font-size: .48rem; letter-spacing: .14em; }
}