/* Generated by Frontend Wireframe Engine — Phase 4
   Client:   Security Bank Minnesota
   DNA Hash: 632e075a4b02
   Do not edit — regenerate via the engine */

/* ==========================================================================
   TOKENS
   ========================================================================== */

:root {
  /* Typography — data/dna/typography-dna.yml -> dining-vollkorn-substantial */
  --font-heading: 'Vollkorn', Georgia, serif;
  --font-body: 'Vollkorn', Georgia, serif;
  /* Third role (declared as typography.mono in design-dna.yml): Franklin Gothic
     lineage grotesque for nav, eyebrows, table labels, figures, disclosures. */
  --font-label: 'Libre Franklin', 'Helvetica Neue', Arial, sans-serif;
  --scale-ratio: 1.333;
  --heading-weight: 700;
  --heading-case: none;
  --heading-letterspacing: -0.01em;
  --heading-line-height: 1.2;
  --body-size: 18px;
  --body-weight: 400;
  --body-line-height: 1.75;
  --body-letterspacing: 0.005em;
  --max-line-length: 66ch;

  /* Type scale, 1.333 from an 18px body */
  --t-xs: 12px;
  --t-sm: 14px;
  --t-base: 18px;
  --t-md: 24px;
  --t-lg: 32px;
  --t-xl: 42px;
  --t-2xl: 56px;
  --t-3xl: 75px;

  /* Components — data/dna/component-personality.yml -> double-border-classic */
  --radius: 2px;
  --shadow: none;
  --border: 3px double rgba(26, 23, 20, 0.5);
  --card-bg: #fdfcfa;
  --card-border: 3px double rgba(26, 23, 20, 0.4);
  --card-shadow: none;
  --card-padding: 32px;
  --card-radius: 2px;
  --hover-duration: 0ms;
  --hover-easing: step-end;

  /* Color — data/dna/color-application.yml -> newspaper-ink-on-paper
     Concrete hexes from design-dna.yml -> brand_tokens (source: logo).
     Paper is a TRUE off-white, deliberately not the strategy's yellowed
     newsprint cream: the warm cream body background is a known AI tell and is a
     detector BLOCK finding. Warmth is carried by ink, accent and halftone. */
  --color-brand-primary: #6e1719;   /* oxblood, from the logo mark */
  --color-brand-secondary: #4a0f11;
  --color-bg-base: #fbfaf7;
  --color-bg-elevated: #f4f2ec;
  --color-bg-card: #fdfcfa;
  --color-text-primary: #1a1714;
  --color-text-secondary: #55504a;
  --color-accent: #6e1719;
  --color-owner: #24503c;           /* evergreen — employee-ownership ONLY */
  --color-owner-deep: #1a3b2c;
  --color-harvest: #b8863b;         /* wheat / harvest gold — the land band only */
  --color-sky: #3d6b57;
  --color-border: rgba(26, 23, 20, 0.28);
  --color-rule: #1a1714;
  --color-on-dark: #fbfaf7;
  --color-on-dark-dim: #ddd6cd;

  /* Spacing — data/dna/spacing-philosophy.yml -> editorial-broadsheet
     spacing_scale: [0, 4, 8, 12, 16, 20, 24, 32, 48, 72]
     This IS the guardrail. Nothing in the markup should invent a value that is
     not on this ladder; ad-hoc inline pixel values are what let a 12px gap ship
     next to a component that overhangs its own box by 5.5px a side. */
  --spacing-base: 4px;
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 48px;
  --s-9: 72px;
  --s-10: 104px;

  --spacing-section: var(--s-8);
  --spacing-paragraph: var(--s-3);
  --spacing-column-gap: var(--s-5);
  --spacing-row-gap: var(--s-4);

  /* Page gutter. One token, one place to change it, and it steps up with the
     viewport instead of pinning content to a 48px margin on a 27 inch screen. */
  --gutter: var(--s-4);

  /* Optical allowance for components that paint outside their own box.
     .btn draws a dashed outline at 4px offset, 1.5px thick, so it overhangs by
     5.5px a side. Any gap between two of them must clear 11px before it starts
     being a gap at all. */
  --btn-overhang: 6px;

  /* Animation — data/dna/animation-character.yml -> none-static */
  --transition-speed: 0ms;
  --transition-easing: step-end;
  /* No --entrance-* or --stagger-* tokens are declared. The animation axis is
     none-static: there are no entrances to tokenise, and declaring tokens the
     stylesheet never references is a promise the design does not keep. */

  /* Easing tokens — data/animation-craft.yml correctness floor. Only the
     control-class press feedback uses these; the none-static profile governs
     everything else and it is motionless by design. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

  /* Layout — data/dna/layout-archetypes.yml -> newspaper-multi-column */
  --layout-max-width: 1320px;
  --layout-whitespace-ratio: 0.15;

  --texture-type: "halftone-print";
  --nav-type: "centered-logo-split-nav";

  /* Hero — data/dna/hero-archetypes.yml -> newspaper-multi-column */
  --hero-archetype: "newspaper-multi-column";
  --hero-height: auto;

  /* Button — data/dna/button-archetypes.yml -> double-border */
  --btn-archetype: "double-border";
  --btn-shape: 4px;
  --btn-padding: 13px 26px;
}

/* ==========================================================================
   BASE  (inside @layer base so Tailwind utilities still win the cascade)
   ========================================================================== */

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

  html { -webkit-text-size-adjust: 100%; }

  body {
    margin: 0;
    background-color: var(--color-bg-base);
    color: var(--color-text-primary);
    font-family: var(--font-body);
    font-size: var(--body-size);
    font-weight: var(--body-weight);
    line-height: var(--body-line-height);
    letter-spacing: var(--body-letterspacing);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: var(--heading-weight);
    line-height: var(--heading-line-height);
    letter-spacing: var(--heading-letterspacing);
    margin: 0;
    text-wrap: balance;
  }

  p { margin: 0 0 var(--spacing-paragraph); }
  a { color: inherit; }

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

  ::selection { background: var(--color-brand-primary); color: var(--color-on-dark); }

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

  /* Gutter ladder. Symmetric by construction, so content can never butt the
     right edge, and it grows with the viewport rather than stopping at 48px. */
  .shell {
    max-width: var(--layout-max-width);
    margin: 0 auto;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
  }
  @media (min-width: 480px)  { :root { --gutter: var(--s-6); } }
  @media (min-width: 768px)  { :root { --gutter: var(--s-7); } }
  @media (min-width: 1024px) { :root { --gutter: var(--s-8); } }
  @media (min-width: 1440px) { :root { --gutter: var(--s-9); } }

  .skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--color-brand-primary);
    color: var(--color-on-dark);
    padding: 12px 20px;
    z-index: 200;
    font-family: var(--font-label);
  }
  .skip-link:focus { left: 0; }
}

/* ==========================================================================
   LAYOUT ARCHETYPE: newspaper-multi-column
   Each distinguishing_feature below is built as a real rule. The selector that
   implements each one is named in wireframe-notes.md.
   ========================================================================== */

/* FEATURE 1 — "Text flows across columns using CSS columns; content wraps
   naturally between columns." Genuine CSS multi-column flow, not a grid of
   separate boxes. Text reflows between columns as the viewport changes. */
.newsflow {
  columns: 1;
  column-gap: var(--spacing-column-gap);
  column-rule: 1px solid var(--color-border);
  orphans: 3;
  widows: 3;
}
@media (min-width: 700px) { .newsflow { columns: 2; } }
@media (min-width: 1080px) { .newsflow { columns: 3; } }
.newsflow--two { columns: 1; }
@media (min-width: 760px) { .newsflow--two { columns: 2; } }

.newsflow p { margin-bottom: var(--spacing-paragraph); }
.newsflow > *:first-child { margin-top: 0; }

/* FEATURE 2 — "Headlines span multiple columns to create hierarchy and break
   the dense flow." column-span: all lifts a heading out of the column flow so
   text re-flows around it, exactly as a broadsheet subhead does. */
.newsflow .spanning-head {
  column-span: all;
  font-size: var(--t-md);
  border-top: 2px solid var(--color-rule);
  border-bottom: 1px solid var(--color-border);
  padding: 10px 0;
  margin: 20px 0 16px;
}
.newsflow > .spanning-head:first-child { margin-top: 0; }

/* FEATURE 3 — "Images are inset into the column grid, text wraps around them."
   A float inside the column flow; the surrounding copy wraps it. */
.column-inset {
  float: left;
  width: 100%;
  margin: 0 0 14px;
  break-inside: avoid;
}
@media (min-width: 700px) {
  .column-inset { width: 172px; margin-right: 18px; }
  .column-inset--right { float: right; margin-right: 0; margin-left: 18px; }
}

/* FEATURE 4 — "Section dividers are thin horizontal rules, not background
   changes." Sections are separated by ruled lines. Background changes are
   reserved exclusively for the inverted-section mutation. */
.ruled-section {
  padding-top: var(--spacing-section);
  padding-bottom: var(--spacing-section);
  border-top: 1px solid var(--color-rule);
}
.ruled-section--heavy { border-top: 3px double var(--color-rule); }
.ruled-section--first { border-top: none; }

@media (min-width: 900px) {
  .ruled-section { padding-top: 72px; padding-bottom: 72px; }
}

/* ==========================================================================
   MASTHEAD — navigation: centered-logo-split-nav
   ========================================================================== */

.masthead { background-color: var(--color-brand-primary); color: var(--color-on-dark); }

.masthead__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 14px;
  padding-bottom: 14px;
}

.masthead__wordmark { flex-shrink: 0; }
.masthead__wordmark img { width: 210px; height: auto; }
@media (min-width: 640px)  { .masthead__wordmark img { width: 264px; } }
@media (min-width: 1024px) { .masthead__wordmark img { width: 300px; } }
@media (min-width: 1280px) { .masthead__wordmark img { width: 340px; } }

.masthead__nav {
  display: none;
  flex: 1;
  gap: 26px;
  font-family: var(--font-label);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.masthead__nav--left { justify-content: flex-end; }
.masthead__nav--right { justify-content: flex-start; }

@media (min-width: 1024px) { .masthead__nav { display: flex; } }

.masthead__nav a {
  text-decoration: none;
  color: var(--color-on-dark);
  padding-bottom: 3px;
  border-bottom: 2px solid transparent;
  transition-property: none;
}
.masthead__nav a:hover,
.masthead__nav a:focus-visible { border-bottom-color: var(--color-on-dark); }
.masthead__nav a[aria-current="page"] { border-bottom-color: var(--color-on-dark); }

/* The folio line — a newspaper's dateline strip under the masthead.
   Centred as one group under the centred wordmark, with rule separators between
   the items. Justified edge to edge (the obvious first move) throws the three
   items to the far corners on a wide screen, where they stop reading as one line
   and start reading as three loose scraps. */
.folio {
  border-top: 1px solid rgba(251, 250, 247, 0.32);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 0;
  padding: 8px 0;
  margin: 0;
  font-family: var(--font-label);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-on-dark-dim);
  text-align: center;
}
.folio > span { padding: 0 18px; }
.folio > span + span { border-left: 1px solid rgba(251, 250, 247, 0.34); }

/* On a narrow screen the items stack, so the vertical rules would hang off the
   ends of lines that are no longer side by side. Drop them and tighten up. */
@media (max-width: 719px) {
  .folio > span { padding: 1px 10px; }
  .folio > span + span { border-left: 0; }
}

.masthead__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid rgba(251, 250, 247, 0.55);
  border-radius: var(--radius);
  color: var(--color-on-dark);
  cursor: pointer;
}
@media (min-width: 1024px) { .masthead__toggle { display: none; } }

/* Mobile menu — full-viewport overlay (Phase 4 HARD RULE 8) */
.mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  z-index: 100;
  display: none;
  flex-direction: column;
  overflow-y: auto;
  padding: 24px;
  padding-top: max(24px, env(safe-area-inset-top));
  padding-bottom: max(24px, env(safe-area-inset-bottom));
  background-color: var(--color-brand-primary);
  color: var(--color-on-dark);
}
.mobile-menu.is-open { display: flex; }

.mobile-menu__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid rgba(251, 250, 247, 0.55);
  border-radius: var(--radius);
  color: var(--color-on-dark);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.mobile-menu__list {
  list-style: none;
  margin: 56px 0 0;
  padding: 0;
  font-family: var(--font-label);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 15px;
  font-weight: 600;
}
.mobile-menu__list a {
  display: block;
  text-decoration: none;
  padding: 15px 0;
  border-bottom: 1px solid rgba(251, 250, 247, 0.28);
}

/* ==========================================================================
   TYPE COMPOSITION
   ========================================================================== */

/* Eyebrow / dateline. Deliberately NOT a numbered, letter-spaced "01 — LABEL"
   eyebrow: that is a detector BLOCK finding. This is a newspaper dateline,
   sentence-structured with real place and date information. */
.dateline {
  font-family: var(--font-label);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin: 0 0 14px;
}
.dateline--onDark { color: var(--color-on-dark-dim); }

/* MUTATION: oversized-heading (typographic, above-fold).
   The imagery axis is typography-as-image, so the display type IS the artwork.
   Tracking stays at -0.018em, well inside the -0.04em cramped-tracking floor. */
.display {
  font-size: clamp(42px, 8.6vw, 118px);
  line-height: 0.98;
  letter-spacing: -0.018em;
  font-weight: 900;
  text-wrap: balance;
}
.display--md { font-size: clamp(34px, 5.6vw, 68px); line-height: 1.04; }

/* The figures that carry the pages in place of photography. */
.figure-huge {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: clamp(76px, 15vw, 210px);
  line-height: 0.82;
  letter-spacing: -0.035em;
  font-variant-numeric: lining-nums tabular-nums;
  display: block;
}
.figure-mid {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: clamp(48px, 7vw, 88px);
  line-height: 0.9;
  letter-spacing: -0.03em;
  font-variant-numeric: lining-nums tabular-nums;
  display: block;
}
.figure-caption {
  font-family: var(--font-label);
  font-size: var(--t-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin-top: 10px;
  display: block;
}

.deck {
  font-size: clamp(20px, 2.3vw, 27px);
  line-height: 1.45;
  font-weight: 500;
  max-width: 46ch;
}

/* The front page: copy on the left, a narrow standing rail on the right.
   The rail is a fixed measure on purpose. Letting the rates panel span the full
   content width stretches the dotted leaders so far that a figure loses sight of
   the label it belongs to. */
.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: start;
}
@media (min-width: 1024px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr) 336px; gap: 46px; }
}
@media (min-width: 1280px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr) 372px; gap: 56px; }
}

.lede { font-size: 20px; line-height: 1.62; }
.lede::first-letter {
  float: left;
  font-size: 62px;
  line-height: 0.82;
  font-weight: 900;
  padding: 4px 8px 0 0;
  color: var(--color-brand-primary);
}

.prose { max-width: var(--max-line-length); }
.measure-tight { max-width: 52ch; }

.label {
  font-family: var(--font-label);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.muted { color: var(--color-text-secondary); }

.footnote {
  font-family: var(--font-label);
  font-size: var(--t-xs);
  line-height: 1.55;
  color: var(--color-text-secondary);
}

/* ==========================================================================
   COMPONENTS — double-border-classic
   ========================================================================== */

.plate {
  background-color: var(--color-bg-card);
  border: var(--card-border);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  padding: var(--card-padding);
}
.plate--tight { padding: 20px; }

/* The standing head: a boxed panel in a newspaper column, used for rates. */
.standing-head {
  border: 3px double var(--color-rule);
  border-radius: var(--radius);
  background-color: var(--color-bg-card);
}
.standing-head__title {
  background-color: var(--color-rule);
  color: var(--color-bg-base);
  font-family: var(--font-label);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 9px 16px;
}
.standing-head__body { padding: 6px 16px 16px; }

/* Rate rows with dotted leaders — the ledger line, and the signature moment.
   Hover inverts the row instantly (0ms, step-end) like a marked newspaper cell. */
.rate-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 11px 8px 11px 8px;
  margin: 0 -8px;
  border-bottom: 1px solid var(--color-border);
  transition-property: none;
}
.rate-row:last-child { border-bottom: none; }
.rate-row__name { font-size: 15.5px; }
/* The leader stays flexible so the figure always pins to the right edge of the
   row. What keeps it from sprawling is the container: rate rows only ever sit
   inside a narrow rail or a half-width panel, never across the full page. */
.rate-row__leader {
  flex: 1;
  border-bottom: 1px dotted var(--color-border);
  transform: translateY(-4px);
  min-width: 12px;
}

/* Rail-scoped refinements: the standing head is the conversion element on the
   front page, so it carries a little more weight than a plain boxed panel. */
.rail .standing-head { position: sticky; top: 20px; }
@media (max-width: 1023px) { .rail .standing-head { position: static; } }

.rail .rate-row { padding-top: 13px; padding-bottom: 13px; }
.rail .rate-row__name { font-size: 16px; }
.rail .rate-row__value { font-size: 18px; }
.rail .btn { display: block; text-align: center; }

/* A featured row for the headline rate, so the rail leads with one number
   rather than three of equal weight. */
.rate-lead {
  border-bottom: 1px solid var(--color-border);
  padding: 4px 0 14px;
  margin-bottom: 2px;
}
.rate-lead__value {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: clamp(44px, 4.6vw, 60px);
  line-height: 0.95;
  letter-spacing: -0.03em;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--color-brand-primary);
  display: block;
}
.rate-lead__term {
  font-family: var(--font-label);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  display: block;
  margin-top: 6px;
}
.rate-row__value {
  font-family: var(--font-label);
  font-weight: 700;
  font-size: 17px;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--color-brand-primary);
  white-space: nowrap;
}
@media (hover: hover) and (pointer: fine) {
  .rate-row:hover { background-color: var(--color-brand-primary); color: var(--color-on-dark); }
  .rate-row:hover .rate-row__value { color: var(--color-on-dark); }
  .rate-row:hover .rate-row__leader { border-bottom-color: rgba(251, 250, 247, 0.5); }
}

/* ==========================================================================
   BUTTONS — double-border archetype
   ========================================================================== */

.btn {
  display: inline-block;
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: var(--btn-padding);
  border-radius: var(--btn-shape);
  text-decoration: none;
  cursor: pointer;
  background-color: transparent;
  border: 1.5px solid var(--color-accent);
  outline: 1.5px dashed var(--color-accent);
  outline-offset: 4px;
  color: var(--color-accent);
  /* Control-class press feedback — data/animation-craft.yml floor rule 2.
     Named properties only, never the catch-all keyword. */
  transition: transform 160ms var(--ease-out);
}
.btn:active { transform: scale(0.97); }
.btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 6px; }

@media (hover: hover) and (pointer: fine) {
  .btn:hover { background-color: var(--color-accent); color: var(--color-on-dark); }
}

.btn--solid {
  background-color: var(--color-accent);
  color: var(--color-on-dark);
}
@media (hover: hover) and (pointer: fine) {
  .btn--solid:hover { background-color: var(--color-brand-secondary); }
}

.btn--owner { border-color: var(--color-owner); outline-color: var(--color-owner); color: var(--color-owner); }
@media (hover: hover) and (pointer: fine) {
  .btn--owner:hover { background-color: var(--color-owner); color: var(--color-on-dark); }
}

.btn--onDark { border-color: var(--color-on-dark); outline-color: var(--color-on-dark); color: var(--color-on-dark); }
@media (hover: hover) and (pointer: fine) {
  .btn--onDark:hover { background-color: var(--color-on-dark); color: var(--color-brand-primary); }
}
.btn--onOwner:hover { color: var(--color-owner) !important; }

/* ==========================================================================
   MUTATION: inverted-section (chromatic)
   Solid bands. Evergreen is reserved exclusively for employee-ownership
   content; oxblood carries commercial content.
   ========================================================================== */

.band {
  background-color: var(--color-brand-primary);
  color: var(--color-on-dark);
  border-top: none;
}
.band--owner { background-color: var(--color-owner); }
.band--ink { background-color: var(--color-text-primary); }
.band .dateline { color: var(--color-on-dark-dim); }
.band .muted { color: var(--color-on-dark-dim); }
.band .figure-caption { color: var(--color-on-dark-dim); }
.band .footnote { color: var(--color-on-dark-dim); }

/* ==========================================================================
   MUTATION: halftone-dots (textural) + texture axis halftone-print
   Newsprint halftone. On the photographs it converts a 274x185 source from
   "low resolution" into "print reproduction", which is the honest treatment
   for the only three images the client owns.
   ========================================================================== */

.halftone {
  position: relative;
  overflow: hidden;
  border: 3px double var(--color-rule);
  border-radius: var(--radius);
  background-color: var(--color-bg-elevated);
}
.halftone img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.16) brightness(1.04);
  mix-blend-mode: multiply;
}
.halftone::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(var(--color-text-primary) 42%, transparent 43%);
  background-size: 3px 3px;
  opacity: 0.3;
  mix-blend-mode: multiply;
}

/* The same halftone screen as a standalone field, used behind display figures
   so a section that has no photograph still carries print texture. */
.halftone-field {
  background-image: radial-gradient(currentColor 40%, transparent 41%);
  background-size: 4px 4px;
  opacity: 0.14;
}

/* ==========================================================================
   THE LAND BAND
   A full-bleed horizontal strip in the position a broadsheet puts its front
   page photograph: under the columns, above the fold, with a cutline.

   It carries no photograph today because the client has none, and a borrowed
   stock cornfield is exactly the "interchangeable with any bank" imagery the
   brief rules out. So it is drawn: a horizon, a field, a harvest rule, under
   the same halftone screen the real photographs use.

   TO DROP IN A REAL PHOTOGRAPH: put the file at assets/img/land.jpg and set
   --band-image: url('img/land.jpg') on .land-band. Nothing else changes; the
   drawn field sits underneath as the fallback.
   ========================================================================== */

.land-band {
  --band-image: url('img/land.jpg');
  position: relative;
  overflow: hidden;
  background-color: var(--color-owner-deep);
  border-top: 3px double var(--color-rule);
  border-bottom: 1px solid var(--color-rule);
}

/* Layer 1, the drawn horizon. Stays underneath as the fallback for a build
   where no photograph has been supplied. */
.land-band__drawn {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120px 120px at 78% 26%, rgba(184, 134, 59, 0.55), transparent 70%),
    linear-gradient(to bottom,
      var(--color-sky) 0%, #35604d 44%, var(--color-harvest) 46%,
      #2a5744 49%, var(--color-owner-deep) 100%);
}

/* Layer 2, the photograph. */
.land-band__media {
  position: absolute;
  inset: 0;
  background-image: var(--band-image);
  background-size: cover;
  background-position: center 58%;
}

/* Layer 3, the halftone screen, so the photograph reads as a printed
   reproduction and matches the three branch plates elsewhere on the site. */
.land-band__screen {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(#0d1f18 44%, transparent 45%);
  background-size: 4px 4px;
  opacity: 0.24;
  mix-blend-mode: multiply;
}

/* Layer 4, the scrim. Text over a photograph is the one place the contrast
   audit cannot see, so the base under the type is made near-opaque by hand
   rather than trusted to the image. */
.land-band__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(11, 26, 20, 0.94) 0%,
    rgba(11, 26, 20, 0.86) 26%,
    rgba(11, 26, 20, 0.52) 55%,
    rgba(11, 26, 20, 0.24) 100%);
}

.land-band__inner {
  position: relative;
  padding-top: var(--s-9);
  padding-bottom: var(--s-7);
  min-height: 260px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: var(--color-on-dark);
}
@media (min-width: 1024px) {
  .land-band__inner { min-height: 360px; padding-top: var(--s-10); padding-bottom: var(--s-8); }
}

.land-band__statement {
  font-size: clamp(26px, 3.4vw, 46px);
  line-height: 1.14;
  font-weight: 700;
  letter-spacing: -0.015em;
  max-width: 20ch;
  text-shadow: 0 1px 14px rgba(13, 31, 24, 0.45);
}

/* The cutline: a newspaper caption strip, ruled off under the picture. */
.land-band__cutline {
  position: relative;
  border-top: 1px solid rgba(251, 250, 247, 0.34);
  margin-top: var(--s-6);
  padding-top: var(--s-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-6);
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--font-label);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--color-on-dark-dim);
}
.land-band__credit { letter-spacing: 0.12em; text-transform: uppercase; }

/* ==========================================================================
   THE OWNERSHIP BAND
   The figure and the statement share a top edge. Bottom-aligning a short column
   against a tall one is what opened a screen-high void above the numeral.
   ========================================================================== */

.owner-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-7);
  align-items: start;
}
@media (min-width: 900px) {
  .owner-grid { grid-template-columns: 296px minmax(0, 1fr); gap: var(--s-8); }
}
@media (min-width: 1280px) {
  .owner-grid { grid-template-columns: 340px minmax(0, 1fr); gap: var(--s-9); }
}

/* A boxed statistic, the way a newspaper boxes a figure out of the running
   text. The box is what gives the short column enough mass to hold its side. */
.stat-plate {
  border: 3px double rgba(251, 250, 247, 0.5);
  border-radius: var(--radius);
  padding: var(--s-6) var(--s-5) var(--s-5);
  text-align: center;
}
.stat-plate .figure-huge {
  font-size: clamp(104px, 13vw, 190px);
  line-height: 0.8;
}
.stat-plate__rule {
  border: 0;
  border-top: 1px solid rgba(251, 250, 247, 0.4);
  margin: var(--s-5) 0 var(--s-4);
}
.stat-plate__caption {
  font-family: var(--font-label);
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-on-dark-dim);
  display: block;
}

/* The ownership band's head: statement left, its own qualifier right, so the
   two share a row instead of the intro sitting alone under a short heading. */
.owner-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
  align-items: end;
}
@media (min-width: 900px) {
  .owner-head { grid-template-columns: 1.1fr 1fr; gap: var(--s-8); }
}

/* Boxed so three short columns of text hold their side of the band instead of
   floating in it. Rules rather than fills: this is still a newspaper. */
.owner-card {
  border-top: 3px double rgba(251, 250, 247, 0.5);
  padding-top: var(--s-4);
}
.owner-card h3 {
  font-size: 20px;
  line-height: 1.25;
  margin: 0 0 var(--s-3);
  min-height: 2.5em;
}
.owner-card p { font-size: 16.5px; line-height: 1.65; margin: 0; }

.owner-note {
  margin: var(--s-8) 0 0;
  padding: var(--s-5) var(--s-6);
  border: 1px solid rgba(251, 250, 247, 0.34);
  border-radius: var(--radius);
  font-family: var(--font-label);
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--color-on-dark-dim);
  max-width: 86ch;
}

/* ==========================================================================
   THE Q&A REGISTER
   A question and its answer are one item, not continuous prose, so they are NOT
   set in CSS columns. Multi-column flow leaves the second column empty whenever
   an answer is short, and splits the long ones mid-sentence across the gutter.
   ========================================================================== */

.qa { list-style: none; margin: 0; padding: 0; }
.qa > li {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-2);
  padding: var(--s-5) 0;
  border-top: 1px solid var(--color-border);
}
.qa > li:first-child { border-top: 2px solid var(--color-rule); }
.qa > li:last-child { border-bottom: 1px solid var(--color-border); }

@media (min-width: 860px) {
  .qa > li { grid-template-columns: 21rem minmax(0, 1fr); gap: var(--s-7); align-items: baseline; }
}
@media (min-width: 1280px) {
  .qa > li { grid-template-columns: 24rem minmax(0, 1fr); gap: var(--s-8); }
}

.qa__q {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.005em;
  margin: 0;
  text-wrap: balance;
}
.qa__a { font-size: 17px; line-height: 1.7; margin: 0; max-width: 62ch; }
.qa__a + .qa__a { margin-top: var(--s-3); }

/* ==========================================================================
   TABLES / DATA
   ========================================================================== */

.ledger {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: lining-nums tabular-nums;
}
.ledger caption {
  text-align: left;
  font-family: var(--font-label);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding-bottom: 10px;
}
.ledger th, .ledger td {
  text-align: left;
  padding: 12px 14px 12px 0;
  border-bottom: 1px solid var(--color-border);
  vertical-align: baseline;
}
.ledger thead th {
  font-family: var(--font-label);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-bottom: 2px solid var(--color-rule);
  color: var(--color-text-secondary);
}
.ledger td.num {
  font-family: var(--font-label);
  font-weight: 700;
  color: var(--color-brand-primary);
  white-space: nowrap;
  text-align: right;
  padding-right: 0;
}

/* The record — a ruled list of dated entries. */
.record { list-style: none; margin: 0; padding: 0; }
.record > li {
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: 18px;
  padding: 16px 0;
  border-bottom: 1px solid var(--color-border);
  break-inside: avoid;
}
.record > li:first-child { border-top: 2px solid var(--color-rule); }
.record__year {
  font-family: var(--font-label);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.02em;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--color-brand-primary);
}
.record__year--owner { color: var(--color-owner); }
.record__body { font-size: 16.5px; line-height: 1.6; }
@media (min-width: 700px) {
  .record > li { grid-template-columns: 96px 1fr; gap: 26px; }
  .record__year { font-size: 19px; }
}

/* Marks a record entry as THE ownership entry. Boxed and ruled like a
   newspaper's boxed item rather than given a coloured side stripe, which is a
   known generated-design tell and a detector finding. */
.record > li.is-owner {
  background-color: var(--color-owner);
  color: var(--color-on-dark);
  border-top: 0;
  border-bottom: 0;
  padding: var(--s-6) var(--s-5);
  margin: var(--s-2) 0;
}
.record > li.is-owner .record__body { font-weight: 500; color: var(--color-on-dark); font-size: 18px; }
.record > li.is-owner .record__year--owner { color: var(--color-on-dark); font-size: 22px; }
.record > li.is-owner + li { border-top: 1px solid var(--color-border); }
.record__tag {
  display: inline-block;
  font-family: var(--font-label);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-owner);
  background-color: var(--color-on-dark);
  padding: 4px 10px;
  border-radius: var(--radius);
  margin-top: var(--s-3);
}

/* ==========================================================================
   FORMS
   ========================================================================== */

.field { display: block; margin-bottom: 18px; }
.field > span {
  display: block;
  font-family: var(--font-label);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.field input, .field select, .field textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 17px;
  padding: 11px 13px;
  color: var(--color-text-primary);
  background-color: var(--color-bg-card);
  border: 3px double rgba(26, 23, 20, 0.34);
  border-radius: var(--radius);
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--color-brand-primary);
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.colophon {
  background-color: var(--color-text-primary);
  color: var(--color-on-dark);
  padding-top: 52px;
  padding-bottom: 36px;
}
/* Any muted role inherits an ink-on-paper colour that is unreadable on a
   near-black surface. Re-point them for every dark context, not just .band.
   Measured: --color-text-secondary on the footer was 2.24:1. */
.colophon .footnote,
.colophon .muted,
.colophon .dateline,
.colophon .figure-caption { color: var(--color-on-dark-dim); }

.colophon a { color: var(--color-on-dark); text-decoration: none; border-bottom: 1px solid rgba(251, 250, 247, 0.35); }
.colophon a:hover { border-bottom-color: var(--color-on-dark); }
.colophon h2, .colophon h3 { color: var(--color-on-dark); }

/* A refrain strip across the top of the footer. The ownership line is the one
   thing the brief asks to be structural rather than stated once, so it closes
   every page as well as opening the site. */
.colophon__refrain {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-6);
  align-items: end;
  padding-bottom: var(--s-7);
  border-bottom: 3px double rgba(251, 250, 247, 0.42);
}
@media (min-width: 860px) {
  .colophon__refrain { grid-template-columns: minmax(0, 1fr) 236px; gap: var(--s-9); align-items: center; }
}
.colophon__refrain > p {
  font-size: clamp(26px, 3.2vw, 44px);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
  max-width: 18ch;
}
/* THE SEAL
   The colophon's three facts, as one object instead of six ruled lines.
   double-border-classic is the certificate vocabulary this whole site is built
   in, and a bank's own impressed seal is the purest form of it: concentric
   rings, arced type, a date at the centre. It states the charter year, the
   ownership year and the three towns without a single horizontal rule.

   Drawn as inline SVG so it scales, inherits currentColor, and costs no request. */
.seal {
  width: 100%;
  max-width: 236px;
  height: auto;
  color: var(--color-on-dark);
  justify-self: start;
}
@media (min-width: 860px) { .seal { justify-self: end; } }

.seal text {
  font-family: var(--font-label);
  fill: currentColor;
}
/* Sizes are viewBox units on a 200-unit box rendered at 236px, so every value
   below lands above 14px on screen. Kept at or above 12 in the source too, so
   the sub-12px rule reads true rather than relying on the reader knowing the
   scale factor. */
.seal__arc {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 1.4px;
}
.seal__arc--lower { font-size: 12px; letter-spacing: 1.3px; }
.seal__est {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 3px;
}
.seal__year {
  font-family: var(--font-heading);
  font-size: 40px;
  font-weight: 900;
  letter-spacing: -0.5px;
  font-variant-numeric: lining-nums tabular-nums;
}

.colophon__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-7);
  padding: var(--s-8) 0;
  border-bottom: 1px solid rgba(251, 250, 247, 0.28);
}
@media (min-width: 640px)  { .colophon__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .colophon__grid { grid-template-columns: 1.5fr 1fr 1fr 1.1fr; gap: var(--s-8); } }

.colophon__col h3 {
  font-family: var(--font-label);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-on-dark);
  margin: 0 0 var(--s-3);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid rgba(251, 250, 247, 0.3);
}
.colophon__list { list-style: none; margin: 0; padding: 0; font-size: 16px; line-height: 1.9; }
.colophon__list a { border-bottom: 0; }
.colophon__list a:hover { border-bottom: 1px solid var(--color-on-dark); }

/* The branch block: three addresses stacked, each ruled off. */
.colophon__branches { display: grid; gap: var(--s-5); }
.colophon__branch { border-top: 1px solid rgba(251, 250, 247, 0.22); padding-top: var(--s-3); }
.colophon__branch:first-child { border-top: 0; padding-top: 0; }
.colophon__branch b {
  display: block;
  font-family: var(--font-label);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.colophon__branch span { font-size: 15px; line-height: 1.55; color: var(--color-on-dark-dim); display: block; }

.colophon__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-7);
  justify-content: space-between;
  align-items: center;
  padding-top: var(--s-5);
}

.branch__name {
  font-family: var(--font-label);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-on-dark);
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(251, 250, 247, 0.3);
}
.branch address { font-style: normal; font-size: 15.5px; line-height: 1.6; color: var(--color-on-dark-dim); }

/* ==========================================================================
   UTILITIES
   ========================================================================== */

.rule { border: 0; border-top: 1px solid var(--color-rule); margin: 0; }
.rule--double { border-top: 3px double var(--color-rule); }

/* The gap clears the dashed overhang on BOTH buttons before it starts counting
   as separation. calc, not a magic number, so changing the outline offset in one
   place cannot silently close the gap again. */
.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--s-4) + (var(--btn-overhang) * 2));
  margin-top: var(--s-7);
}
.cta-row--tight { margin-top: var(--s-6); }

.grid-2, .grid-3 { display: grid; gap: var(--s-6); grid-template-columns: 1fr; }
@media (min-width: 760px) { .grid-2 { grid-template-columns: 1fr 1fr; gap: var(--s-7); } }
@media (min-width: 880px) { .grid-3 { grid-template-columns: repeat(3, 1fr); gap: var(--s-7); } }
@media (min-width: 1280px) { .grid-2, .grid-3 { gap: var(--s-8); } }

/* Vertical rhythm utilities, all drawn from the DNA's own spacing ladder. These
   exist so section markup never needs an inline pixel value. */
.mt-3 { margin-top: var(--s-3); }
.mt-4 { margin-top: var(--s-4); }
.mt-5 { margin-top: var(--s-5); }
.mt-6 { margin-top: var(--s-6); }
.mt-7 { margin-top: var(--s-7); }
.mt-8 { margin-top: var(--s-8); }
.mb-0 { margin-bottom: 0; }
.stack > * + * { margin-top: var(--s-4); }
.stack-lg > * + * { margin-top: var(--s-7); }

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

/* ==========================================================================
   REDUCED MOTION GUARD (required)
   The animation axis is none-static, so there is almost nothing to disable.
   The guard is emitted in full regardless: it is the safety net for any rule
   added later, and the scroll-driven selectors are nulled explicitly because a
   duration reset does not stop a scroll-driven playhead.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  [data-parallax], [class*="parallax"], .zoom-element, .scroll-rotate {
    animation: none !important;
    animation-timeline: none !important;
    transform: none !important;
  }
}

@media print {
  .masthead, .mobile-menu { background: none; color: #000; }
  .band { background: none !important; color: #000 !important; }
}