/* ============================================================
   First National Bank and Trust — "The Ledger & the Land"
   Shared design system. Loaded on every page.
   ============================================================ */

:root{
  --white:#fefefe;
  --cream:#ead9cd;
  --cream-2:#f4ebe3;
  --maroon:#7d202b;
  --maroon-deep:#5f171f;
  --red:#c92035;
  --red-2:#801b15;
  --ink:#282021;
  --ink-soft:#5b5153;
  --rule:#d3d1d4;
  --brown:#796351;
  --sky:#cedadd;
  --green:#798373;
  --r-lg:1.6rem;
  --r-md:1.15rem;
  --r-sm:.8rem;
  --shadow-soft:0 18px 40px -24px rgba(40,32,33,.35);
  --shadow-lift:0 26px 55px -26px rgba(40,32,33,.45);
  --ease:cubic-bezier(.22,1,.32,1);
}

*{ -webkit-font-smoothing:antialiased; }
html{ scroll-behavior:smooth; }
body{
  font-family:'Poppins',system-ui,sans-serif;
  color:var(--ink);
  background:var(--white);
  line-height:1.65;
  font-weight:400;
}
::selection{ background:var(--red); color:#fff; }

.serif{ font-family:'Tinos','Times New Roman',serif; }

/* Script accent — brand font is the commercial "Beautifully Delicious Script"
   (Elena Genova / My Creative Land, licensed webfont). It is NOT free/Google-hosted,
   so it cannot be redistributed here. To activate the real font once you have the
   licensed webfont files: drop beautifully-delicious.woff2 (+.woff) into
   output/assets/fonts/ and UNCOMMENT the @font-face below. Until then the stack
   falls back to Sacramento (a close free monoline signature script). */
/*
@font-face{
  font-family:'Beautifully Delicious Script';
  src:url('fonts/beautifully-delicious.woff2') format('woff2'),
      url('fonts/beautifully-delicious.woff')  format('woff');
  font-weight:400; font-style:normal; font-display:swap;
}
*/
.script{ font-family:'Beautifully Delicious Script','Sacramento',cursive; font-weight:400; }

/* Display headings — Times-compatible serif, tight & classic.
   STOPGAP: horizontal scale (scaleX) condenses Tinos to approximate the brand's
   "Times New Roman Condensed" until the licensed condensed serif is available.
   Anchored left so headlines still align with their eyebrows/left column. */
.display{
  font-family:'Tinos','Times New Roman',serif;
  font-weight:700;
  line-height:.98;
  letter-spacing:-.012em;
  transform:scaleX(.93);
  transform-origin:left center;
}
/* centered display headings: keep the squeeze but re-anchor so they stay centered */
.text-center .display,
.display.mx-auto{ transform-origin:center center; }
.display--tight{ letter-spacing:-.02em; }

/* ---- Ledger eyebrow: the passbook / index label motif ---- */
.eyebrow{
  font-family:'Poppins',sans-serif;
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--red);
  display:inline-flex;
  align-items:center;
  gap:.6rem;
}
.eyebrow::before{
  content:"";
  width:1.9rem; height:2px;
  background:var(--red);
  display:inline-block;
}
.eyebrow--light{ color:#e9c4bf; }
.eyebrow--light::before{ background:#e9c4bf; }

/* ---- Ledger rule: thin ruled divider like an old ledger line ---- */
.ledger-rule{
  border:0;
  height:1px;
  background:var(--rule);
  position:relative;
}
.ledger-rule--maroon{ background:rgba(255,255,255,.25); }

/* ---- Buttons: soft rounded pills ---- */
.btn{
  display:inline-flex; align-items:center; gap:.55rem;
  font-weight:600; font-size:.95rem; letter-spacing:.01em;
  padding:.85rem 1.6rem;
  border-radius:999px;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background-color .25s var(--ease), color .25s var(--ease);
  cursor:pointer; white-space:nowrap; line-height:1;
}
.btn svg{ width:1.05em; height:1.05em; }
.btn-primary{ background:var(--red); color:#fff; box-shadow:0 12px 24px -12px rgba(201,32,53,.7); }
.btn-primary:hover{ background:var(--red-2); transform:translateY(-2px); box-shadow:0 18px 30px -12px rgba(128,27,21,.6); }
.btn-maroon{ background:var(--maroon); color:#fff; }
.btn-maroon:hover{ background:var(--maroon-deep); transform:translateY(-2px); }
.btn-outline{ border:1.6px solid var(--maroon); color:var(--maroon); background:transparent; }
.btn-outline:hover{ background:var(--maroon); color:#fff; transform:translateY(-2px); }
.btn-ghost-light{ border:1.6px solid rgba(255,255,255,.55); color:#fff; }
.btn-ghost-light:hover{ background:#fff; color:var(--maroon); transform:translateY(-2px); }
.btn-white{ background:#fff; color:var(--maroon); }
.btn-white:hover{ transform:translateY(-2px); box-shadow:var(--shadow-lift); }

/* ---- Cards ---- */
.card{
  background:#fff;
  border-radius:var(--r-md);
  border:1px solid rgba(40,32,33,.08);
  box-shadow:var(--shadow-soft);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.card-lift:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lift); }

/* corner tick marks — framed-ledger detail */
.ticked{ position:relative; }
.ticked::before,.ticked::after{
  content:""; position:absolute; width:12px; height:12px; pointer-events:none;
  border:2px solid var(--red); opacity:.55;
}
.ticked::before{ top:12px; left:12px; border-right:0; border-bottom:0; }
.ticked::after{ bottom:12px; right:12px; border-left:0; border-top:0; }

/* rounded photo helper */
.photo{ border-radius:var(--r-lg); overflow:hidden; display:block; }
.photo img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ---- FNB pediment mark (inline SVG) ---- */
.fnb-mark{ --ln:var(--ink); --fill:var(--red); --panel:var(--white); --ltr:var(--ink); display:block; }
.fnb-mark--white{ --ln:#fff; --fill:transparent; --panel:transparent; --ltr:#fff; }
.fnb-mark .ln{ stroke:var(--ln); }
.fnb-mark .fill{ fill:var(--fill); }
.fnb-mark .panel{ fill:var(--panel); }
.fnb-mark .ltr{ fill:var(--ltr); }

/* ---- Header ---- */
.utility-bar{ background:var(--maroon); color:#f3e4e2; font-size:.8rem; }
.utility-bar a{ color:#f3e4e2; transition:color .2s; }
.utility-bar a:hover{ color:#fff; }
.site-header{ position:sticky; top:0; z-index:60; background:rgba(254,254,254,.94); backdrop-filter:blur(10px); border-bottom:1px solid var(--rule); transition:box-shadow .3s; }
.site-header.scrolled{ box-shadow:0 10px 30px -18px rgba(40,32,33,.4); }
.nav-link{ font-weight:500; font-size:.94rem; color:var(--ink); position:relative; padding:.4rem 0; transition:color .2s; }
.nav-link::after{ content:""; position:absolute; left:0; right:100%; bottom:-2px; height:2px; background:var(--red); transition:right .3s var(--ease); }
.nav-link:hover{ color:var(--red); }
.nav-link:hover::after,.nav-link.active::after{ right:0; }
.nav-link.active{ color:var(--maroon); }

/* login dropdown */
.login-panel{ opacity:0; visibility:hidden; transform:translateY(8px); transition:.28s var(--ease); }
.login-wrap.open .login-panel{ opacity:1; visibility:visible; transform:translateY(0); }

/* mobile nav */
.mobile-nav{ max-height:0; overflow:hidden; transition:max-height .4s var(--ease); }
.mobile-nav.open{ max-height:640px; }

/* ---- Scroll reveal (progressive enhancement) ----
   Content is VISIBLE by default. Only once JS marks <html class="reveal-ready">
   do we hide-then-reveal, so a JS/observer failure never blanks the page. */
.reveal{ transition:opacity .7s var(--ease), transform .7s var(--ease); }
html.reveal-ready .reveal{ opacity:0; transform:translateY(26px); }
html.reveal-ready .reveal.is-visible{ opacity:1; transform:none; }
.reveal[data-delay="1"]{ transition-delay:.08s; }
.reveal[data-delay="2"]{ transition-delay:.16s; }
.reveal[data-delay="3"]{ transition-delay:.24s; }
.reveal[data-delay="4"]{ transition-delay:.32s; }
@media (prefers-reduced-motion:reduce){
  html.reveal-ready .reveal{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}

/* ---- Promo carousel ---- */
.promo-track{ display:flex; transition:transform .7s var(--ease); }
.promo-slide{ min-width:100%; }
.promo-dot{ width:9px; height:9px; border-radius:999px; background:rgba(255,255,255,.4); transition:.3s; }
.promo-dot.active{ background:#fff; width:26px; }

/* ---- Section band tints ---- */
.band-cream{ background:var(--cream); }
.band-cream-2{ background:var(--cream-2); }
.band-sky{ background:#edf2f3; }              /* big-Kansas-sky wash (tint of --sky) */
.band-sage{ background:#eef1ec; }             /* soft-green wash (tint of --green) */
.rule-soil{ background:var(--brown); }        /* earth-toned ledger rule for ag */
.band-maroon{ background:var(--maroon); color:var(--white); }
.band-maroon .display{ color:#fff; }

/* faint pediment watermark for maroon bands */
.pediment-watermark{ position:absolute; inset:0; overflow:hidden; pointer-events:none; opacity:.06; }

/* index number label */
.index-num{ font-family:'Tinos',serif; font-size:.85rem; letter-spacing:.15em; color:var(--red); font-weight:700; }

/* stat count-up */
.stat-num{ font-family:'Tinos',serif; font-weight:700; line-height:1; }

/* links list */
.footer-link{ color:rgba(255,255,255,.8); transition:color .2s, padding-left .2s; }
.footer-link:hover{ color:#fff; padding-left:.25rem; }

/* form fields */
.field{
  width:100%; background:#fff; border:1.5px solid var(--rule); border-radius:var(--r-sm);
  padding:.8rem 1rem; font-family:'Poppins',sans-serif; font-size:.95rem; color:var(--ink);
  transition:border-color .2s, box-shadow .2s;
}
.field:focus{ outline:none; border-color:var(--red); box-shadow:0 0 0 3px rgba(201,32,53,.12); }
label.lbl{ font-size:.8rem; font-weight:600; letter-spacing:.03em; color:var(--ink-soft); text-transform:uppercase; }

/* ---- Custom icon system (bespoke agrarian/ledger set, two-tone) ---- */
:root{ --acc:#c92035; }
.ic{ width:1.5rem; height:1.5rem; display:inline-block; vertical-align:middle; flex:none; }
.ic--sm{ width:1.05rem; height:1.05rem; }
.ic--lg{ width:1.8rem; height:1.8rem; }
.logo-lockup{ height:50px; width:auto; display:block; }
.logo-mark-white{ display:block; }
.logo-watermark{ position:absolute; opacity:.07; pointer-events:none; }

/* utility */
.link-underline{ background-image:linear-gradient(var(--red),var(--red)); background-size:0% 2px; background-repeat:no-repeat; background-position:0 100%; transition:background-size .3s var(--ease); padding-bottom:2px; }
.link-underline:hover{ background-size:100% 2px; }