/* Generated by Frontend Wireframe Engine
   Security Bank Minnesota / "Section 14"
   DNA Hash: caee3e83ff95
   Do not edit - regenerate via the engine

   RECOMPOSED for "start over and focus on farming, make it feel like outside".
   The page is no longer a document with pictures in it. It is a landscape you
   scroll down through: low sky, horizon, standing crop, turned soil. Sections
   are environments, not boxes.

   layout   full-bleed-immersive   every section is a full-width environment
   color    earth-organic-natural  sky, field and soil carry the surface
   texture  sand-dune-gradient     horizon bands at golden hour, plus grain
   imagery  illustration-botanical corn and soybeans, drawn
   comps    organic-natural        variable radius, warm shadows, no rectangles
   nav      transparent-overlay    part of the sky, solid after 100px
   hero     noise-grain-analog     sun and dust, not a spa
   spacing  dramatic               a sky can be empty; a rate table cannot */

:root {
  /* ── Typography ── editorial-petrona-warm (locked through the recompose) ── */
  --font-heading: 'Petrona', Georgia, serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'DM Mono', ui-monospace, monospace;
  --heading-weight: 700;
  --heading-letterspacing: -0.015em;
  --heading-line-height: 1.08;
  --body-size: 18px;
  --body-line-height: 1.7;
  --max-line-length: 62ch;

  --step--1: 0.8125rem;
  --step-0: 1.125rem;
  --step-1: clamp(1.3rem, 0.6vw + 1.15rem, 1.5rem);
  --step-2: clamp(1.7rem, 1.2vw + 1.35rem, 2.1rem);
  --step-3: clamp(2.1rem, 2.2vw + 1.5rem, 3rem);
  --step-4: clamp(2.6rem, 3.4vw + 1.6rem, 4.4rem);
  --step-5: clamp(3rem, 6.2vw + 1.1rem, 8rem);

  /* ── THE LAND RAMP ── earth-organic-natural, retuned from the strategy's
     desert ambers to southern Minnesota. Read it top to bottom: this is the
     order the page moves in. */
  --sky-high:    #f4ebd8;
  --sky:         #efe3c8;
  --sky-low:     #e7cf9d;
  --horizon:     #d9a85c;
  --field-light: #4f6839;
  --field:       #415630;
  --field-deep:  #2e3f25;
  --soil:        #4a3526;
  --soil-deep:   #33241a;

  --color-brand-primary: #6e1719;
  --color-brand-secondary: #4a0e10;

  --color-bg-base: var(--sky);
  --color-text-primary: #2a2119;
  --color-text-secondary: #57493a;
  --color-cream: #f7f1e4;
  --color-cream-dim: #e8dfcb;
  --color-accent: #415630;
  --color-border: rgba(74, 53, 38, 0.22);

  /* ── Components ── organic-natural: the radius differs on every side ── */
  --radius: 12px 4px 16px 8px;
  --radius-card: 16px 6px 20px 10px;
  --radius-btn: 12px;
  --shadow: 2px 4px 16px 0 rgba(51, 36, 26, 0.15);
  --shadow-card: 3px 5px 18px 0 rgba(51, 36, 26, 0.12);
  --shadow-hover: 4px 6px 22px 0 rgba(51, 36, 26, 0.22);

  /* ── Spacing ── dramatic: open where it can be, dense where it must be ── */
  --sp-1: 8px;
  --sp-2: 12px;
  --sp-3: 20px;
  --sp-4: 32px;
  --sp-5: 48px;
  --sp-6: 72px;
  --sp-7: 112px;
  --sp-8: 168px;
  --spacing-content-mobile: 20px;
  --spacing-content-desktop: 72px;

  /* ── Animation ── confident-decisive, parallax_factor 0.0 ── */
  --entrance-duration: 350ms;
  --entrance-easing: cubic-bezier(0, 0, 0.2, 1);
  --stagger-delay: 50ms;
  --hover-duration: 280ms;
  --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-max-width: 1360px;
  --texture-type: "sand-dune-gradient";
  --nav-type: "transparent-overlay";
  --hero-archetype: "noise-grain-analog";
  --btn-archetype: "soft-rounded-fill";
}

/* ═══════════════════════════════════════════════════════════════════
   BASE
   Layered so the element reset never outranks a Tailwind utility.
   ═══════════════════════════════════════════════════════════════════ */

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

@layer base {
  body {
    margin: 0;
    /* Turned soil, not paper. Deliberately NOT a cream page: every section
       carries sky, field or soil, so no neutral ground is ever exposed. */
    background-color: #33241a;
    color: var(--color-text-primary);
    font-family: var(--font-body);
    font-size: var(--body-size);
    line-height: var(--body-line-height);
    -webkit-font-smoothing: antialiased;
  }

  h1, h2, h3, h4 {
    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(--sp-3); max-width: var(--max-line-length); }
  a { color: inherit; }
  img { max-width: 100%; display: block; }

  ::selection { background: var(--horizon); color: var(--soil-deep); }
  :focus-visible { outline: 3px solid var(--horizon); outline-offset: 3px; }
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--soil-deep); color: var(--color-cream);
  padding: var(--sp-2) var(--sp-3); font-size: var(--step--1);
}
.skip-link:focus { left: var(--sp-2); top: var(--sp-2); }

/* ═══════════════════════════════════════════════════════════════════
   TEXTURE - sand-dune-gradient
   Horizon bands at golden hour. Every environment is a vertical gradient
   rather than a flat fill, so a section has depth and a top and a bottom
   the way a view does. Grain at 0.06 overlay, per the axis.
   ═══════════════════════════════════════════════════════════════════ */

.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.06;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ═══════════════════════════════════════════════════════════════════
   LAYOUT - full-bleed-immersive
   "Each section is its own full-width visual environment; background
   changes define section boundaries." No section carries a white or
   neutral background. whitespace_ratio 0.60.
   ═══════════════════════════════════════════════════════════════════ */

.env {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding-block: var(--sp-7);
}
@media (min-width: 1024px) { .env { padding-block: var(--sp-8); } }
.env-tight { padding-block: var(--sp-6); }

.shell {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--layout-max-width);
  margin-inline: auto;
  padding-inline: var(--spacing-content-mobile);
}
@media (min-width: 1024px) { .shell { padding-inline: var(--spacing-content-desktop); } }

/* The four environments, in the order the page descends through them. */
.env-sky   { background: linear-gradient(180deg, var(--sky-high) 0%, var(--sky) 55%, var(--sky-low) 100%); color: var(--color-text-primary); }
.env-gold  { background: linear-gradient(180deg, var(--sky-low) 0%, var(--horizon) 100%); color: var(--soil-deep); }
.env-field { background: linear-gradient(180deg, var(--field-light) 0%, var(--field) 45%, var(--field-deep) 100%); color: var(--color-cream); }
.env-soil  { background: linear-gradient(180deg, var(--soil) 0%, var(--soil-deep) 100%); color: var(--color-cream); }
.env-brand { background: linear-gradient(180deg, var(--color-brand-primary) 0%, var(--color-brand-secondary) 100%); color: var(--color-cream); }

.env-field h1, .env-field h2, .env-field h3, .env-field p,
.env-soil h1, .env-soil h2, .env-soil h3, .env-soil p,
.env-brand h1, .env-brand h2, .env-brand h3, .env-brand p { color: var(--color-cream); }

/* Simple two-part composition. No column grid: this archetype has none. */
.row { display: grid; gap: var(--sp-5); }
@media (min-width: 900px) {
  .row-2 { grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
  .row-wide-left { grid-template-columns: 1.35fr 1fr; gap: var(--sp-6); }
  .row-wide-right { grid-template-columns: 1fr 1.35fr; gap: var(--sp-6); }
  .row-3 { grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
}
.measure { max-width: 62ch; }
.measure-wide { max-width: 80ch; }

/* ═══════════════════════════════════════════════════════════════════
   THE HORIZON SEAM
   Where two environments meet, the seam is not a straight rule. A low
   ridge of standing crop breaks the edge, so one section grows out of
   the next instead of being stacked on it.
   ═══════════════════════════════════════════════════════════════════ */

.seam { position: relative; height: 46px; margin-top: -46px; z-index: 3; pointer-events: none; }
.seam svg { display: block; width: 100%; height: 100%; }

/* ═══════════════════════════════════════════════════════════════════
   BOTANICAL - illustration-botanical
   Corn and soybeans, which is what Freeborn County grows. Fine line
   work at 1 to 1.5px, specimens at growth stages, labelled parts in
   small type, specimens scattered in the margins.
   ═══════════════════════════════════════════════════════════════════ */

.bot { stroke-linecap: round; stroke-linejoin: round; fill: none; }
.bot-ink   { stroke: var(--soil); stroke-width: 1.4; }
.bot-cream { stroke: var(--color-cream); stroke-width: 1.4; opacity: 0.85; }
.bot-fill-leaf { fill: var(--field); stroke: none; opacity: 0.9; }
.bot-fill-cream { fill: var(--color-cream); stroke: none; opacity: 0.9; }
.bot-label { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; }

/* Specimen mount, per the direction's museum framing. */
.specimen-plate {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: var(--sp-4);
  background: rgba(247, 241, 228, 0.55);
}
.env-field .specimen-plate,
.env-soil .specimen-plate { background: rgba(51, 36, 26, 0.32); border-color: rgba(247, 241, 228, 0.28); }

/* Drifting margin specimens. Decoration only, hidden from assistive tech. */
.margin-specimen { position: absolute; z-index: 1; opacity: 0.5; pointer-events: none; }
@media (max-width: 899px) { .margin-specimen { display: none; } }

/* ═══════════════════════════════════════════════════════════════════
   TYPE
   ═══════════════════════════════════════════════════════════════════ */

.display { font-size: var(--step-5); }
.h2 { font-size: var(--step-4); }
.h3 { font-size: var(--step-2); }
.lede { font-size: var(--step-1); line-height: 1.55; }

/* Sentence-case mono metadata. Never an uppercase wide-tracked kicker:
   that scaffold is the generic tell this design exists to avoid. */
.meta {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.02em;
  color: var(--color-text-secondary);
  margin: 0 0 var(--sp-3);
}
.env-field .meta, .env-soil .meta, .env-brand .meta { color: var(--color-cream-dim); }
.env-gold .meta { color: var(--soil); }
.fig { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* A drop of harvest light behind a phrase in a headline. */
.lit { color: var(--horizon); }
.env-sky .lit, .env-gold .lit { color: var(--color-brand-primary); }

/* ═══════════════════════════════════════════════════════════════════
   CARDS - organic-natural
   Nothing on this page is a perfect rectangle.
   ═══════════════════════════════════════════════════════════════════ */

.card {
  border-radius: var(--radius-card);
  border: 1px solid var(--color-border);
  background: rgba(247, 241, 228, 0.6);
  box-shadow: var(--shadow-card);
  padding: var(--sp-4);
  transition-property: box-shadow, transform;
  transition-duration: var(--hover-duration);
  transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
}
.env-field .card, .env-soil .card, .env-brand .card {
  background: rgba(51, 36, 26, 0.34);
  border-color: rgba(247, 241, 228, 0.26);
}
@media (hover: hover) and (pointer: fine) {
  .card:hover { box-shadow: var(--shadow-hover); }
}
.card-household { border-top: 5px solid var(--color-brand-primary); }
.card-operation { border-top: 5px solid var(--field-light); }
.chan-household { color: var(--color-brand-primary); }
.chan-operation { color: var(--field-deep); }
.env-field .chan-household, .env-soil .chan-household,
.env-field .chan-operation, .env-soil .chan-operation { color: var(--horizon); }

/* ═══════════════════════════════════════════════════════════════════
   BUTTONS - soft-rounded-fill
   Solid, filled, plainly labelled. Unmissable to a customer in their
   sixties standing in a field with the sun on the screen.
   ═══════════════════════════════════════════════════════════════════ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 15px 30px;
  border-radius: var(--radius-btn);
  border: none;
  background-color: var(--color-brand-primary);
  color: var(--color-cream);
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(51, 36, 26, 0.18);
  transition-property: transform, box-shadow, background-color, color;
  transition-duration: 220ms;
  transition-timing-function: var(--ease-out);
}
.btn-field { background-color: var(--field-deep); }
.btn-cream { background-color: var(--color-cream); color: var(--soil-deep); }
.btn-gold  { background-color: var(--horizon); color: var(--soil-deep); }
.btn-ghost {
  background-color: transparent;
  color: var(--color-brand-primary);
  box-shadow: none;
  border: 2px solid var(--color-brand-primary);
  padding: 13px 28px;
}
.env-field .btn-ghost, .env-soil .btn-ghost, .env-brand .btn-ghost {
  color: var(--color-cream);
  border-color: var(--color-cream);
}
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(51, 36, 26, 0.28); }
  .btn-ghost:hover { background-color: var(--color-brand-primary); color: var(--color-cream); }
  .env-field .btn-ghost:hover, .env-soil .btn-ghost:hover, .env-brand .btn-ghost:hover {
    background-color: var(--color-cream); color: var(--soil-deep);
  }
}
.btn:active { transform: scale(0.97); }

.tlink {
  display: inline-block;
  text-decoration: none;
  font-weight: 600;
  color: var(--color-brand-primary);
  border-bottom: 2px solid currentColor;
  padding-bottom: 2px;
  transition-property: opacity;
  transition-duration: 150ms;
  transition-timing-function: var(--ease-out);
}
.env-field .tlink, .env-soil .tlink, .env-brand .tlink { color: var(--color-cream); border-bottom-color: var(--horizon); }
.env-gold .tlink { color: var(--soil-deep); }
@media (hover: hover) and (pointer: fine) { .tlink:hover { opacity: 0.72; } }

/* ═══════════════════════════════════════════════════════════════════
   NAVIGATION - transparent-overlay
   Part of the sky, not a bar sitting on it. Goes solid at 100px so the
   online-banking action is never lost, which is the banking must_keep.
   ═══════════════════════════════════════════════════════════════════ */

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;
  background-color: transparent;
  transition-property: background-color, box-shadow;
  transition-duration: 300ms;
  transition-timing-function: var(--ease-out);
}
.site-header.is-solid {
  background-color: rgba(244, 235, 216, 0.96);
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 18px rgba(51, 36, 26, 0.16);
}
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: 80px;
  padding-block: var(--sp-2);
}
.brandmark { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; }
.brandmark-name { font-family: var(--font-heading); font-weight: 700; font-size: 1.4rem; line-height: 1.05; color: var(--color-brand-primary); }
.brandmark-sub { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; color: var(--color-text-secondary); display: block; }
.brandmark-badge {
  width: 40px; height: 40px; flex-shrink: 0;
  border-radius: 12px 4px 14px 6px;
  background: var(--color-brand-primary);
  color: var(--color-cream);
  display: grid; place-items: center;
  font-family: var(--font-heading); font-weight: 700; font-size: 1.05rem;
}
.navlink {
  font-size: 1.0625rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--color-text-primary);
  padding-block: 6px;
  border-bottom: 2px solid transparent;
  transition-property: color, border-color;
  transition-duration: 150ms;
  transition-timing-function: var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .navlink:hover { color: var(--color-brand-primary); border-bottom-color: var(--color-brand-primary); }
}
.navlink[aria-current="page"] { color: var(--color-brand-primary); border-bottom-color: var(--color-brand-primary); }

/* Critical responsive behaviour lives here, NOT in Tailwind utilities. The
   browser CDN build applies asynchronously, so a `lg:hidden` on the menu button
   flashes both the full nav and the hamburger on first paint. */
.nav-desktop { display: none; }
.nav-actions .btn { display: none; }
@media (min-width: 1024px) {
  .nav-desktop { display: flex; align-items: center; gap: var(--sp-5); }
  .menu-toggle { display: none !important; }
}
@media (min-width: 560px) {
  .nav-actions .btn { display: inline-flex; }
}

.menu-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 8px 14px;
  background: var(--color-brand-primary); color: var(--color-cream);
  border: none; border-radius: var(--radius-btn);
  font-family: var(--font-body); font-size: 0.9375rem; font-weight: 600;
  cursor: pointer;
}
.menu-toggle:active, .mobile-menu-close:active { transform: scale(0.97); }

.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;
  background: linear-gradient(180deg, var(--sky-high) 0%, var(--sky-low) 100%);
  padding: 24px;
  padding-top: max(24px, env(safe-area-inset-top));
  padding-bottom: max(24px, env(safe-area-inset-bottom));
}
.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: var(--color-brand-primary); color: var(--color-cream);
  border: none; border-radius: 12px 4px 14px 6px;
  font-size: 24px; line-height: 1; cursor: pointer;
}
.mobile-navlink {
  display: block;
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--color-border);
  font-family: var(--font-heading);
  font-size: var(--step-2);
  text-decoration: none;
  color: var(--color-text-primary);
}

/* ═══════════════════════════════════════════════════════════════════
   RATE TABLES
   The one place the page gets dense. `dramatic` spacing exists so that
   a sky can be nearly empty while this stays tight and readable.
   ═══════════════════════════════════════════════════════════════════ */

.ratetable { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.ratetable caption { text-align: left; font-family: var(--font-heading); font-size: var(--step-1); font-weight: 700; padding-bottom: var(--sp-2); }
.ratetable th, .ratetable td { text-align: right; padding: 9px 12px; border-bottom: 1px solid rgba(247, 241, 228, 0.20); }
.ratetable th:first-child, .ratetable td:first-child { text-align: left; }
.ratetable thead th { border-bottom: 2px solid var(--horizon); font-weight: 500; }
.table-scroll { overflow-x: auto; }

/* ═══════════════════════════════════════════════════════════════════
   BRANCH SPECIMENS
   The three real photographs, at their true 274x185. Small on purpose.
   ═══════════════════════════════════════════════════════════════════ */

.photo-plate {
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-card);
  background: rgba(247, 241, 228, 0.6);
}
.env-field .photo-plate, .env-soil .photo-plate { background: rgba(51, 36, 26, 0.34); border-color: rgba(247, 241, 228, 0.26); }
.photo-plate img { width: 100%; height: auto; filter: contrast(1.04) saturate(0.94); }
.photo-plate figcaption { font-family: var(--font-mono); font-size: var(--step--1); padding: 10px 14px; }

/* ═══════════════════════════════════════════════════════════════════
   THE OPERATING YEAR - monochrome-section mutation
   ═══════════════════════════════════════════════════════════════════ */

.season { border-top: 2px solid var(--horizon); padding-top: var(--sp-3); }
.season-marker { font-family: var(--font-mono); font-size: var(--step--1); color: var(--color-cream-dim); display: block; margin-bottom: 6px; }

/* ═══════════════════════════════════════════════════════════════════
   ENTRANCES - confident-decisive
   Moves once, lands exactly, stops. No parallax anywhere in this build.
   ═══════════════════════════════════════════════════════════════════ */

@keyframes decisive-enter {
  0%   { opacity: 0; transform: translateY(24px); }
  100% { opacity: 1; transform: translateY(0); }
}
/* Content is hidden ONLY once JS has confirmed it can reveal it again.
   Hiding by default in CSS means a failed observer, a JS error or an old
   browser leaves whole sections permanently invisible. */
.anim-ready [data-animate] { opacity: 0; }
.anim-ready [data-animate].is-in { animation: decisive-enter var(--entrance-duration) var(--entrance-easing) forwards; }

/* SIGNATURE MOMENT: the four seasons of the operating year land in
   sequence at a tight uniform 50ms stagger, each arriving exactly on
   the rule above it. One instance, not scattered across the page. */
.anim-ready .season[data-animate].is-in { animation-delay: calc(var(--seq, 0) * var(--stagger-delay)); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::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;
  }
  .anim-ready [data-animate] { opacity: 1 !important; transform: none !important; }
}

/* Rate tables adapt to the environment they land in. */
.env-sky .ratetable th, .env-sky .ratetable td,
.env-gold .ratetable th, .env-gold .ratetable td { border-bottom-color: rgba(74, 53, 38, 0.22); }
.env-sky .ratetable thead th, .env-gold .ratetable thead th { border-bottom-color: var(--color-brand-primary); }

/* Definition rows inside branch cards. */
.dl-row { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-top: 1px solid rgba(247, 241, 228, 0.18); }
.env-sky .dl-row, .env-gold .dl-row { border-top-color: rgba(74, 53, 38, 0.18); }
.dl-row dt { opacity: 0.78; }
.dl-row dd { margin: 0; text-align: right; }