/* ==========================================================================
   Bridge Bookkeeping Inc. — stylesheet v3 "Serif Wash"
   Revamp built from 21st.dev references: Centered Serif Hero
   (felipemenezes098/hero-01) and How It Works Timeline (7ovr/how-it-works-2),
   translated to static CSS. EB Garamond + Lato; navy carries authority;
   the logo's blue (#337cbe) is the wash + interactive hue. CTAs are navy
   pills. Earlier designs preserved in git (v1 editorial, v2 trust).
   ========================================================================== */

:root {
  /* Palette — Banking/Traditional Finance (ui-ux-pro-max colors.csv) */
  --primary:        #0f172a;
  --secondary:      #1e3a8a;
  --brand-blue:     #337cbe;   /* from Logo.jpg — links & highlights */
  --accent:         #a16207;   /* gold — CTAs only */
  --accent-hover:   #854f05;
  --background:     #f8fafc;
  --foreground:     #0f172a;
  --card:           #ffffff;
  --muted:          #e8ecf1;
  --muted-fg:       #475569;
  --border:         #e2e8f0;
  --ring:           #1e3a8a;

  /* Type */
  --font-heading: 'EB Garamond', Georgia, serif;
  --font-body: 'Lato', -apple-system, "Segoe UI", Arial, sans-serif;

  /* Shape & depth */
  --radius: 14px;
  --radius-sm: 10px;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .05), 0 2px 10px rgba(15, 23, 42, .04);
  --shadow-md: 0 2px 6px rgba(15, 23, 42, .06), 0 14px 32px rgba(15, 23, 42, .09);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--background);
  color: var(--muted-fg);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--secondary); text-underline-offset: 3px; }
a:hover { color: var(--brand-blue); }

/* Accessible & Ethical style: strong visible focus everywhere */
:focus-visible {
  outline: 3px solid var(--ring);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--primary); color: #fff;
  padding: .8rem 1.4rem; z-index: 2000;
  font-weight: 700; font-size: .9rem;
  text-decoration: none;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }

/* ------------------------------------------------------------------ nav --- */

nav.site-nav {
  background: rgba(255, 255, 255, .94);
  backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid var(--border);
  padding: .8rem 2.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  position: sticky;
  top: 0;
  z-index: 100;
}

.logo-link { display: inline-flex; align-items: center; }
.logo-link img { height: 56px; width: auto; }

.nav-links {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 2.25rem;
}

.nav-links a {
  font-weight: 600;
  font-size: .98rem;
  color: var(--foreground);
  text-decoration: none;
  padding: .5rem 0;
  border-bottom: 2px solid transparent;
  transition: color .2s, border-color .2s;
}
.nav-links a:hover { color: var(--secondary); }
.nav-links a[aria-current="page"] { color: var(--secondary); border-bottom-color: var(--secondary); }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--foreground);
  padding: .6rem .7rem;
  cursor: pointer;
  min-width: 44px; min-height: 44px;
  align-items: center; justify-content: center;
}

@media (max-width: 900px) {
  nav.site-nav { padding: .7rem 1.25rem; flex-wrap: wrap; }
  .nav-toggle { display: inline-flex; }
  .nav-menu {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    padding-top: .75rem;
  }
  .nav-menu[data-open="true"] { display: flex; }
  .nav-links { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-links a {
    display: block;
    padding: .95rem .25rem;
    border-bottom: 1px solid var(--border);
  }
  .nav-links a[aria-current="page"] { border-bottom-color: var(--border); }
}

/* ------------------------------------------------------------ shared bits --- */

.overline {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--secondary);
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: .9rem;
}
.overline::after {
  content: '';
  flex: 1;
  max-width: 56px;
  height: 2px;
  border-radius: 2px;
  background: var(--brand-blue);
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--secondary);
  color: #fff;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .01em;
  padding: .95rem 2.1rem;
  min-height: 48px;
  text-decoration: none;
  border: none;
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
  transition: background .2s, transform .2s, box-shadow .2s;
  white-space: nowrap;
  cursor: pointer;
}
.btn-primary:hover { background: var(--brand-blue); color: #fff; transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-primary:active { transform: translateY(0); }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--secondary);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  padding: .95rem 2.1rem;
  min-height: 48px;
  text-decoration: none;
  border: 2px solid var(--secondary);
  border-radius: 999px;
  transition: background .2s, color .2s;
  white-space: nowrap;
  cursor: pointer;
}
.btn-secondary:hover { background: var(--secondary); color: #fff; }

.btn-row { display: flex; flex-wrap: wrap; gap: 1rem; }

/* --------------------------------------------------------------- masthead --- */

/* Split masthead — retained for About, where the blueprint vignette carries
   the page. Wash and type match the centered .hero so the two read as one
   family. */
.masthead {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  min-height: 68vh;
  overflow: hidden;
  background:
    radial-gradient(56% 62% at 22% 4%, rgba(51, 124, 190, .18) 0%, rgba(51, 124, 190, 0) 72%),
    radial-gradient(34% 40% at 6% 34%, rgba(30, 58, 138, .10) 0%, rgba(30, 58, 138, 0) 70%),
    var(--background);
  border-bottom: 1px solid var(--border);
}
.masthead--short { min-height: 0; }

.masthead-text {
  padding: clamp(3rem, 7vw, 5.5rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.masthead-text h1 {
  font-family: var(--font-heading);
  font-size: clamp(2.7rem, 5vw, 4.6rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--foreground);
  margin-bottom: 1.5rem;
}
.masthead-text h1 em { font-style: italic; color: var(--secondary); }

.masthead-lead {
  font-size: 1.2rem;
  color: var(--muted-fg);
  max-width: 520px;
  line-height: 1.8;
}

.masthead .btn-row { margin-top: 2.25rem; }

/* Right-hand masthead panel — navy authority block */
.masthead-side {
  background: var(--primary);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: 3rem;
}

.photo-placeholder {
  position: absolute;
  inset: 0;
  background: linear-gradient(155deg, #0f172a 0%, #1c2f55 55%, #0f172a 100%);
}

/* Blueprint grid behind the bridge drawing */
.photo-placeholder--blueprint {
  background:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(155deg, #0f172a 0%, #1c2f55 55%, #0f172a 100%);
}

.photo-monogram {
  font-family: var(--font-heading);
  font-size: 14rem;
  font-weight: 700;
  color: rgba(255,255,255,0.05);
  user-select: none;
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}

.masthead-side .real-photo {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

.vignette-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.photo-caption {
  position: relative;
  z-index: 2;
  border-left: 3px solid var(--brand-blue);
  padding-left: 1.5rem;
}
.photo-caption strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.5rem;
  color: #fff;
  font-weight: 600;
  margin-bottom: 0.25rem;
}
.photo-caption span {
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}

/* Ledger vignette (home masthead) */
.ledger-card { position: relative; z-index: 2; width: 100%; }
.ledger-card table {
  width: 100%;
  border-collapse: collapse;
  font-size: .92rem;
  color: rgba(255,255,255,0.72);
}
.ledger-card caption {
  text-align: left;
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 600;
  color: #fff;
  padding-bottom: 1rem;
}
.ledger-card td {
  padding: .8rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.ledger-card td:last-child { text-align: right; color: #fff; font-weight: 700; }
.ledger-card tr.total td {
  border-bottom: none;
  border-top: 2px solid var(--brand-blue);
  color: #9cc3e8;
  font-weight: 700;
  padding-top: 1rem;
}

/* ---------------------------------------------------- hero (serif wash) ---
   Adapted from 21st.dev hero-01: centered serif headline over a soft
   radial wash, pill CTAs, and a floating "software cloud" of chips. --- */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--background);
  border-bottom: 1px solid var(--border);
}

.hero-wash {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(56% 48% at 50% 0%, rgba(51, 124, 190, .18) 0%, rgba(51, 124, 190, 0) 72%),
    radial-gradient(34% 30% at 18% 10%, rgba(30, 58, 138, .10) 0%, rgba(30, 58, 138, 0) 70%),
    radial-gradient(38% 34% at 82% 6%, rgba(51, 124, 190, .12) 0%, rgba(51, 124, 190, 0) 70%);
}

.hero-inner {
  max-width: 880px;
  margin: 0 auto;
  padding: clamp(4rem, 9vw, 7rem) clamp(1.25rem, 4vw, 2.5rem) clamp(3.5rem, 7vw, 5.5rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hero-eyebrow {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--secondary);
  margin-bottom: 1.75rem;
}

.hero-inner h1 {
  font-family: var(--font-heading);
  font-size: clamp(2.9rem, 6vw, 5rem);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.015em;
  color: var(--foreground);
  text-wrap: balance;
  margin-bottom: 1.5rem;
}
.hero-inner h1 em { font-style: italic; color: var(--secondary); }

.hero-lead {
  font-size: 1.18rem;
  color: var(--muted-fg);
  line-height: 1.8;
  max-width: 620px;
  text-wrap: balance;
}

.hero-cta { margin-top: 2.25rem; justify-content: center; }

.hero-cloud { margin-top: 3.25rem; }

.hero-cloud-caption {
  display: block;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted-fg);
  margin-bottom: 1.1rem;
}

.chip-row {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .7rem;
  margin-bottom: .7rem;
}
.chip-row:last-child { margin-bottom: 0; }

.chip-row li {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
  padding: .55rem 1.15rem;
  font-size: .92rem;
  font-weight: 600;
  color: var(--foreground);
  white-space: nowrap;
}

/* staggered blur-reveal, as in the source component */
@keyframes heroIn {
  from { opacity: 0; transform: translateY(14px); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
.hero-inner > * { animation: heroIn .55s cubic-bezier(.22, 1, .36, 1) backwards; }
.hero-inner > :nth-child(1) { animation-delay: .05s; }
.hero-inner > :nth-child(2) { animation-delay: .15s; }
.hero-inner > :nth-child(3) { animation-delay: .25s; }
.hero-inner > :nth-child(4) { animation-delay: .35s; }
.hero-inner > :nth-child(5) { animation-delay: .45s; }

/* compact variant for sub-page headers */
.hero--page .hero-inner { padding-block: clamp(3rem, 6.5vw, 5rem) clamp(2.75rem, 5vw, 4rem); }
.hero--page .hero-inner h1 { font-size: clamp(2.5rem, 4.5vw, 4.2rem); }

/* ================================================== scroll expansion hero ===
   Adapted from the 21st.dev "Scroll media expansion hero" pattern
   (arunachalam/scroll-expansion-hero) — rebuilt in vanilla CSS/JS and
   driven by the brand's blueprint drawing instead of video.

   --p (0 to 1) is the expansion progress. It DEFAULTS TO 1, so with no JS,
   or with reduced motion, the hero renders fully expanded and static rather
   than collapsing to an unreadable card. main.js only ever lowers it.
   ========================================================================= */

.sx {
  --p: 1;
  position: relative;
  height: 240vh;                 /* scroll runway */
  background: var(--primary);
}

.sx-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: var(--primary);
}

/* Blurred backdrop — the same drawing, pushed out of focus behind the card */
.sx-backdrop {
  position: absolute;
  inset: -6%;
  opacity: calc(0.55 * (1 - var(--p)));
  filter: blur(18px) saturate(115%);
  transform: scale(calc(1.12 - 0.12 * var(--p)));
  pointer-events: none;
}

.sx-frame {
  position: relative;
  width: calc(340px + (100vw - 340px) * var(--p));
  height: calc(440px + (100vh - 440px) * var(--p));
  border-radius: calc(18px * (1 - var(--p)));
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, calc(0.45 * (1 - var(--p))));
  will-change: width, height;
}

.sx-art { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Blueprint annotations only earn their place once there's room for them */
.sx-annotate { opacity: calc(max(0, (var(--p) - 0.45)) / 0.55); }

.sx-copy {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem clamp(1.25rem, 5vw, 3rem);
  color: #fff;
}

/* Held back until the frame is wide enough to set it on one line */
.sx-eyebrow {
  font-size: clamp(.68rem, 1.4vw, .8rem);
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #9cc3e8;
  margin-bottom: 1.1rem;
  white-space: nowrap;
  opacity: calc(max(0, (var(--p) - 0.5)) / 0.5);
}

.sx-copy h1 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.015em;
  /* grows with the frame so it never overflows the small card */
  font-size: calc(1.6rem + 2.6 * (var(--p) * 1rem));
  text-wrap: balance;
  max-width: 16ch;
}
.sx-copy h1 em { font-style: italic; color: #9cc3e8; }

.sx-lead {
  margin-top: 1.4rem;
  max-width: 46ch;
  font-size: 1.1rem;
  line-height: 1.75;
  color: rgba(255,255,255,.8);
  opacity: calc(max(0, (var(--p) - 0.55)) / 0.45);
}

.sx-cta {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  opacity: calc(max(0, (var(--p) - 0.62)) / 0.38);
}
.sx-cta .btn-secondary { color: #fff; border-color: rgba(255,255,255,.55); }
.sx-cta .btn-secondary:hover { background: #fff; color: var(--primary); }

/* Scroll cue — only present while there's still something to expand */
.sx-cue {
  position: absolute;
  left: 50%;
  bottom: 2.2rem;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .55rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255,255,255,.62);
  opacity: calc(1 - var(--p) / 0.3);
  pointer-events: none;
}
.sx-cue span { display: block; width: 1px; height: 34px; background: linear-gradient(rgba(255,255,255,.5), transparent); }

/* Software chips, relocated out of the old hero to sit under this one */
.tools-strip {
  background: var(--background);
  border-bottom: 1px solid var(--border);
  padding: clamp(2.25rem, 4vw, 3rem) clamp(1.25rem, 4vw, 2.5rem);
  text-align: center;
}
.tools-strip .hero-cloud { margin-top: 0; }

@media (max-width: 700px) {
  .sx { height: 190vh; }
  .sx-frame {
    width: calc(80vw + (100vw - 80vw) * var(--p));
    height: calc(58vh + (100vh - 58vh) * var(--p));
  }
  .sx-copy h1 { font-size: calc(1.5rem + 1.5 * (var(--p) * 1rem)); }
  .sx-lead { font-size: 1rem; }
}

/* Anyone who asked for less motion gets a plain, fully-open hero. */
@media (prefers-reduced-motion: reduce) {
  .sx { height: auto; }
  .sx-stage { position: static; height: auto; min-height: 82vh; }
  .sx-frame { width: 100%; height: auto; min-height: 82vh; border-radius: 0; box-shadow: none; }
  .sx-backdrop, .sx-cue { display: none; }
}

/* -------------------------------------------------- steps (how it works) ---
   Adapted from 21st.dev how-it-works-2: vertical timeline with bordered
   icon squares, a connecting hairline, and bold step titles. --- */

.steps {
  list-style: none;
  max-width: 680px;
  margin-top: 2.25rem;
}

.step { display: flex; gap: 1.5rem; }

.step-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: none;
}

.step-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: none;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  color: var(--secondary);
}
.step-icon svg { width: 20px; height: 20px; }

.step-line {
  width: 1px;
  flex: 1;
  margin-top: .35rem;
  background: var(--border);
}

.step-body { padding-bottom: 2.5rem; }
.step:last-child .step-body { padding-bottom: 0; }

.step-kicker {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brand-blue);
  display: block;
  margin: .15rem 0 .3rem;
}

.step-body h3 {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--foreground);
  margin-bottom: .4rem;
}

.step-body p {
  font-size: 1rem;
  color: var(--muted-fg);
  line-height: 1.75;
  max-width: 520px;
}

/* ------------------------------------------------------------------ stats --- */

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--primary);
  border-bottom: 1px solid var(--border);
}

.stat {
  padding: 2.75rem 3rem;
  border-right: 1px solid rgba(255,255,255,0.09);
  animation: statIn 0.5s ease forwards;
  opacity: 0;
}
.stat:nth-child(1) { animation-delay: 0.1s; }
.stat:nth-child(2) { animation-delay: 0.25s; }
.stat:nth-child(3) { animation-delay: 0.4s; }
.stat:nth-child(4) { animation-delay: 0.55s; border-right: none; }

@keyframes statIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.stat-num {
  font-family: var(--font-heading);
  font-size: 3.1rem;
  font-weight: 700;
  color: #fff;
  line-height: 1;
  margin-bottom: 0.6rem;
}
.stat-num em { font-style: normal; color: #9cc3e8; }

.stat-label {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  line-height: 1.6;
}

/* ------------------------------------------------------- content sections --- */

.section {
  display: block;
  border-bottom: 1px solid var(--border);
}
.section:nth-of-type(even) { background: #fff; }

.section-label {
  max-width: 1160px;
  margin: 0 auto;
  padding: clamp(3rem, 6vw, 4.5rem) clamp(1.25rem, 4vw, 2.5rem) 0;
  display: flex;
  align-items: center;
  gap: .9rem;
}

.section-label .chapter-num {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--secondary);
  background: #fff;
  border: 1px solid var(--brand-blue);
  width: 40px; height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: none;
}

.section-label .chapter {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--secondary);
}

.section-body {
  max-width: 1160px;
  margin: 0 auto;
  padding: 1.5rem clamp(1.25rem, 4vw, 2.5rem) clamp(3rem, 6vw, 4.5rem);
}

.section-body h2,
.section-heading {
  font-family: var(--font-heading);
  font-size: clamp(1.9rem, 3vw, 2.7rem);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--foreground);
  margin-bottom: 1.5rem;
}
.section-body h2 em, .section-heading em { font-style: italic; color: var(--secondary); }

.section-body > p {
  font-size: 1.07rem;
  color: var(--muted-fg);
  line-height: 1.85;
  margin-bottom: 1.4rem;
  max-width: 720px;
}
.section-body > p:last-child { margin-bottom: 0; }

.pull-quote {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1.4rem;
  line-height: 1.55;
  color: var(--foreground);
  background: #fff;
  border-left: 4px solid var(--brand-blue);
  border-radius: 0 var(--radius) var(--radius) 0;
  box-shadow: var(--shadow-sm);
  padding: 1.5rem 2rem;
  margin: 2.25rem 0;
  max-width: 640px;
}
.section:nth-of-type(even) .pull-quote { background: var(--background); }

/* ------------------------------------------------------------ card grids --- */

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 2rem;
}
.card-grid--2 { grid-template-columns: repeat(2, 1fr); }

.entry {
  /* ledger-paper: faint accounting grid on card stock, dashed rule border */
  background:
    linear-gradient(rgba(51, 124, 190, .04) 1px, transparent 1px) 0 0 / 100% 28px,
    linear-gradient(90deg, rgba(51, 124, 190, .04) 1px, transparent 1px) 0 0 / 28px 100%,
    var(--card);
  border: 1px dashed #c3d3e4;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 2rem 1.9rem;
  text-decoration: none;
  color: inherit;
  display: block;
  transition: box-shadow .2s, transform .2s, border-color .2s;
}
a.entry { cursor: pointer; }
a.entry:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
  border-color: var(--brand-blue);
  border-style: solid;
}

.entry-num {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand-blue);
  display: block;
  margin-bottom: 1rem;
}

.entry h3 {
  font-family: var(--font-heading);
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--foreground);
  margin-bottom: 0.65rem;
}

.entry p {
  font-size: .98rem;
  color: var(--muted-fg);
  line-height: 1.75;
}

.entry .entry-more {
  display: inline-block;
  margin-top: 1.25rem;
  font-size: .9rem;
  font-weight: 700;
  color: var(--secondary);
  border-bottom: 2px solid var(--brand-blue);
  padding-bottom: 2px;
  transition: color .2s;
}
a.entry:hover .entry-more { color: var(--brand-blue); }

/* --------------------------------------------------------------- lists --- */

.ledger-list { list-style: none; max-width: 720px; margin-top: .5rem; }
.ledger-list li {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: .9rem;
  align-items: start;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--border);
  font-size: 1.02rem;
  color: var(--muted-fg);
}
.ledger-list li::before {
  content: '✓';
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  margin-top: .1rem;
  border-radius: 50%;
  background: rgba(51, 124, 190, .12);
  color: var(--secondary);
  font-weight: 700;
  font-size: .85rem;
}
.ledger-list li:last-child { border-bottom: none; }
.ledger-list strong { color: var(--foreground); }

/* -------------------------------------------------------------- timeline --- */

.timeline-section {
  background: #fff;
  border-bottom: 1px solid var(--border);
  padding: clamp(3rem, 6vw, 5rem) clamp(1.25rem, 4vw, 2.5rem);
}

.timeline-header { max-width: 1160px; margin: 0 auto 3rem; }
.timeline-header h2 {
  font-family: var(--font-heading);
  font-size: clamp(1.9rem, 3vw, 2.6rem);
  font-weight: 700;
  color: var(--foreground);
}
.timeline-header h2 em { font-style: italic; color: var(--secondary); }

.timeline {
  display: flex;
  flex-direction: column;
  position: relative;
  max-width: 820px;
  margin: 0 auto 0 0;
}
@media (min-width: 1200px) { .timeline { margin-left: calc((100% - 1160px) / 2); } }
.timeline::before {
  content: '';
  position: absolute;
  left: 96px;
  top: 0; bottom: 0;
  width: 2px;
  border-radius: 2px;
  background: var(--border);
}

.timeline-item {
  display: grid;
  grid-template-columns: 96px 1fr;
  position: relative;
}

.timeline-year {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-fg);
  padding: 1.6rem 2rem 1.6rem 0;
  text-align: right;
  position: relative;
  z-index: 1;
}

.timeline-content {
  padding: 1.5rem 0 1.5rem 2.5rem;
  position: relative;
  border-bottom: 1px solid var(--border);
}
.timeline-content::before {
  content: '';
  position: absolute;
  left: -5px; top: 1.95rem;
  width: 12px; height: 12px;
  background: #fff;
  border: 2px solid var(--muted-fg);
  border-radius: 50%;
}
.timeline-item:last-child .timeline-content { border-bottom: none; }

.timeline-content strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--foreground);
  margin-bottom: 0.35rem;
}

.timeline-content p {
  font-size: .98rem;
  color: var(--muted-fg);
  line-height: 1.75;
  max-width: 560px;
}

.timeline-item.milestone .timeline-content::before {
  background: var(--secondary);
  border-color: var(--secondary);
  width: 14px; height: 14px;
  left: -6px;
}
.timeline-item.milestone .timeline-content strong { color: var(--secondary); }

/* ------------------------------------------------------------ philosophy --- */

.philosophy {
  background: linear-gradient(155deg, #0f172a 0%, #16254a 60%, #0f172a 100%);
  padding: clamp(4rem, 8vw, 6.5rem) clamp(1.25rem, 4vw, 2.5rem);
  position: relative;
  overflow: hidden;
}
.philosophy::after {
  content: '"';
  position: absolute;
  right: 2rem; bottom: -5rem;
  font-family: var(--font-heading);
  font-size: 28rem;
  color: rgba(255,255,255,0.035);
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
}

.philosophy-inner { max-width: 860px; margin: 0 auto; }

.philosophy .overline { color: #9cc3e8; }
.philosophy .overline::after { background: rgba(156, 195, 232, .45); }

.philosophy h2 {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 3.6vw, 3.3rem);
  color: #fff;
  font-weight: 700;
  line-height: 1.22;
  margin-bottom: 1.75rem;
}
.philosophy h2 em { font-style: italic; color: #9cc3e8; }

.philosophy p {
  color: rgba(255,255,255,0.72);
  font-size: 1.08rem;
  line-height: 1.85;
  margin-bottom: 1.4rem;
  max-width: 720px;
}

.philosophy .highlight {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1.4rem;
  color: #fff;
  border-top: 1px solid rgba(255,255,255,0.14);
  padding-top: 1.75rem;
  margin-top: 2rem;
  max-width: 700px;
}

.philosophy .btn-primary { margin-top: 2.25rem; }

/* ------------------------------------------------------------- cta strip --- */

.cta-strip {
  max-width: 1160px;
  margin: 0 auto;
  padding: clamp(3rem, 6vw, 5rem) clamp(1.25rem, 4vw, 2.5rem);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 3rem;
}

.cta-strip h3 {
  font-family: var(--font-heading);
  font-size: clamp(1.7rem, 2.6vw, 2.5rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--foreground);
}
.cta-strip h3 em { font-style: italic; color: var(--secondary); }

.cta-strip p {
  margin-top: 0.75rem;
  color: var(--muted-fg);
  font-size: 1.02rem;
}

/* ----------------------------------------------------------------- forms --- */

.form-grid { display: grid; gap: 1.5rem; max-width: 660px; }

.field label {
  display: block;
  font-size: .95rem;
  font-weight: 700;
  color: var(--foreground);
  margin-bottom: 0.45rem;
}
.field .hint { color: var(--muted-fg); font-weight: 400; font-size: .88rem; }

.field input,
.field select,
.field textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--foreground);
  background: var(--card);
  border: 1px solid #cbd5e1;
  border-radius: var(--radius-sm);
  padding: .8rem .95rem;
  min-height: 48px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--secondary);
  box-shadow: 0 0 0 3px rgba(30, 58, 138, .18);
}

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }

.form-note {
  font-size: .88rem;
  color: var(--muted-fg);
  line-height: 1.7;
}

.hp { position: absolute; left: -9999px; }

/* ------------------------------------------------------------ contact list --- */

.contact-rows { list-style: none; max-width: 520px; }
.contact-rows li {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 1.5rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--border);
  align-items: baseline;
}
.contact-rows .k {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-blue);
}
.contact-rows .v { font-size: 1.05rem; color: var(--foreground); font-weight: 600; }
.contact-rows .v a { color: var(--secondary); }

/* ------------------------------------------------------------------- faq --- */

.faq { max-width: 760px; display: grid; gap: 1rem; margin-top: 2rem; }
.faq details {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 1.3rem 1.6rem;
  transition: box-shadow .2s;
}
.faq details[open] { box-shadow: var(--shadow-md); }
.faq summary {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--foreground);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  min-height: 32px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+';
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--brand-blue);
  flex: none;
  line-height: 1;
}
.faq details[open] summary::after { content: '−'; }
.faq details > p {
  margin-top: 1rem;
  font-size: 1rem;
  color: var(--muted-fg);
  line-height: 1.8;
}

/* ---------------------------------------------------------------- footer --- */

footer.site-footer {
  background: var(--primary);
  color: rgba(255,255,255,0.55);
  padding: 2.5rem 3rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

footer.site-footer .foot-brand {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
}
footer.site-footer .foot-brand span { color: #9cc3e8; }

footer.site-footer p { font-size: .88rem; }

footer.site-footer nav a {
  font-size: .92rem;
  font-weight: 600;
  color: rgba(255,255,255,0.7);
  text-decoration: none;
  margin-left: 1.5rem;
}
footer.site-footer nav a:hover { color: #fff; text-decoration: underline; }

/* ------------------------------------------------------------- animations --- */

.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .stat { animation: none; opacity: 1; }
  .hero-inner > * { animation: none; }
  .btn-primary:hover { transform: none; }
  a.entry:hover { transform: none; }
}

/* -------------------------------------------------------------- responsive --- */

@media (max-width: 900px) {
  .masthead { grid-template-columns: 1fr; min-height: 0; }
  .masthead-side { min-height: 420px; }
  /* Blueprint annotations are too small to read when the panel goes wide —
     show just the drawing. */
  .vignette-svg text { display: none; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stat { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.09); padding: 2rem; }
  .card-grid, .card-grid--2 { grid-template-columns: 1fr; }
  .timeline::before { left: 76px; }
  .timeline-item { grid-template-columns: 76px 1fr; }
  .timeline-content { padding-left: 1.75rem; }
  .cta-strip { grid-template-columns: 1fr; gap: 1.75rem; }
  .field-row { grid-template-columns: 1fr; }
  .step { gap: 1.1rem; }
  .chip-row { gap: .55rem; }
  .chip-row li { font-size: .86rem; padding: .5rem .95rem; }
  footer.site-footer { flex-direction: column; text-align: center; padding: 2rem 1.5rem; }
  footer.site-footer nav a { margin: 0 .75rem; }
}

@media (min-width: 901px) and (max-width: 1100px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
}