/* ============================================================
   Meridian Passage — Website Styles
   Aligned to the v1.0 Brand Guide:
     · Bodoni Moda · Cormorant Garamond · Inter
     · Ink #0F222D · Parchment #EBE7D9 · Slate #355A6F · Signal #F55139
     · Signal coral is a HAIRLINE ONLY — never a fill
   ============================================================ */

/* ============================================================
   SELF-HOSTED FONTS — variable .woff2 (latin subset)
   Each file is a variable font containing all weights in the range,
   so a single file serves multiple font-weight values.
   ============================================================ */

@font-face {
  font-family: 'Bodoni Moda';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/bodoni-moda.woff2') format('woff2');
}
@font-face {
  font-family: 'Bodoni Moda';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/bodoni-moda-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('fonts/cormorant-garamond.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url('fonts/cormorant-garamond-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('fonts/inter.woff2') format('woff2');
}

:root {
  /* Brand colors — sampled from the logo */
  --ink:           #0F222D;
  --ink-700:       #182F3D;
  --ink-500:       #2A4255;

  --parchment:     #EBE7D9;
  --parchment-50:  #F5F2E8;
  --parchment-200: #DDD6C2;

  --slate:         #355A6F;
  --slate-600:     #28475A;
  --slate-300:     #6D8A9D;

  --signal:        #F55139;     /* HAIRLINE accent only — see brand guide */
  --signal-600:    #D33C26;

  /* Neutrals + text */
  --text-dark:     var(--ink);
  --text-muted:    #4A5560;
  --text-subtle:   #7A8590;
  --bg-light:      var(--parchment);
  --bg-paper:      #FFFFFF;
  --bg-soft:       var(--parchment-50);

  /* Brand fonts */
  --display: 'Bodoni Moda', 'Didot', Georgia, serif;
  --serif:   'Cormorant Garamond', 'EB Garamond', Georgia, 'Times New Roman', serif;
  --sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --max-content: 1100px;
}

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

html {
  scroll-behavior: smooth;
  overflow-y: scroll;       /* always reserve scrollbar space — prevents page shift on navigation */
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--text-dark);
  background-color: var(--bg-light);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Links — slate by default, coral underline on hover */
a {
  color: var(--slate);
  text-decoration: none;
  transition: color 0.2s ease, border-color 0.2s ease;
  border-bottom: 1px solid transparent;
}
a:hover { color: var(--slate-600); border-bottom-color: var(--signal); }

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: -0.005em;
  margin: 0;
  color: var(--ink);
}

/* ============================================================
   SITE HEADER — ink ground, wordmark in Bodoni Moda
   ============================================================ */

.site-header {
  background-color: var(--ink);
  color: var(--parchment);
}

.site-nav {
  max-width: var(--max-content);
  margin: 0 auto;
  padding: 1.5rem 4rem;                  /* 4rem horizontal inset matches the footer's 64px breathing room */
  display: flex;
  justify-content: space-between;        /* sextant on far left, nav-links cluster on far right — mirrors the footer */
  align-items: center;
  gap: 2.25rem;
  flex-wrap: wrap;
  position: relative;                    /* anchor for the inset hairline below */
}

/* Hairline below the nav — inset 4rem on each side so it lines up with the footer's bottom hairline */
.site-nav::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 4rem;
  right: 4rem;
  height: 1px;
  background: rgba(109, 138, 157, 0.25);
}

.nav-brand {
  position: relative;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  border-bottom: 1px solid transparent;   /* coral hairline appears on hover, matching the text nav items */
  padding-bottom: 3px;
  transition: border-color 0.25s ease;
}
.nav-brand:hover { border-bottom-color: var(--signal); }

.nav-sextant {
  display: block;
  height: 44px;
  width: auto;
  /* Color is baked into the SVG file (slate-300 #6D8A9D) since <img> SVGs don't pick up CSS currentColor.
     Default opacity is slightly muted to match the slate-300 nav-link default state. */
  opacity: 0.85;
  transition: opacity 0.25s ease, filter 0.25s ease;
}
.nav-brand:hover .nav-sextant {
  /* On hover, brighten + desaturate the icon to approximate the parchment
     tone that the text nav-links shift to. */
  opacity: 1;
  filter: brightness(1.45) saturate(0.45);
}

.nav-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 2.25rem;
  flex-wrap: wrap;
  flex: 0 0 calc(65% - 11px);     /* match the footer's link-column span (CE → LEGAL), tightened so "About" left-aligns with "Client Experience" in the footer */
  justify-content: space-between; /* distribute the 4 nav buttons across that width */
}

.nav-links a {
  display: inline-block;
  color: var(--slate-300);          /* muted default — brightens on hover, matching the footer-link pattern */
  font-family: var(--display);
  text-transform: uppercase;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  font-weight: 500;
  border-bottom: 1px solid transparent;
  padding-bottom: 3px;
  transition: border-color 0.25s ease, color 0.25s ease;
}
.nav-links a:hover { color: var(--parchment); border-bottom-color: var(--signal); }
.nav-links .is-current { color: var(--parchment); border-bottom-color: var(--signal); }

/* Hamburger toggle — hidden on desktop, shown below 640px via the responsive
   block at the bottom of this file. Three bars become an X when the menu opens. */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px 0;
  width: 32px;
  flex-direction: column;
  gap: 6px;
  align-items: stretch;
  position: relative;
  z-index: 70;
}
.nav-toggle-bar {
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--slate-300);
  transform-origin: center;
  transition: transform 0.3s ease, opacity 0.3s ease, background-color 0.3s ease;
}
.nav-toggle:hover .nav-toggle-bar { background-color: var(--parchment); }
body.nav-open .nav-toggle-bar { background-color: var(--parchment); }
body.nav-open .nav-toggle-bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
body.nav-open .nav-toggle-bar:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle-bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ============================================================
   HERO — ink ground with the stacked color logo
   ============================================================ */

.hero {
  max-width: var(--max-content);
  margin: 0 auto;
  padding: 3rem 2rem 6rem;
  text-align: center;
}

.hero-logo {
  display: block;
  margin: 0 auto -9rem;        /* pulls the tagline up tight to the coral rule so it reads as part of the logo lockup */
  max-width: 640px;
  width: 100%;
  height: auto;
  aspect-ratio: 1554 / 1230;   /* reserve correct height before SVG parses — prevents layout shift */
}

.hero-headline {
  font-family: var(--serif);
  font-size: clamp(2rem, 4.4vw, 3rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
  max-width: 28ch;
  margin: 0 auto 2.5rem;       /* breathing room before the trust signals so they read as a distinct beat */
  color: var(--parchment);
}
.hero-headline em { color: var(--slate-300); font-style: italic; }

.hero-subhead {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--slate-300);
  margin: 0 0 2.5rem;
  letter-spacing: 0;
  line-height: 1.5;
}

.trust-signals {
  font-family: var(--display);
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--slate-300);
  margin: 0 0 4rem;            /* tightened so the CTA sits closer to the fold */
  line-height: 2;
}
.trust-signals .dot { color: var(--signal); margin: 0 0.6rem; }

/* ----- CTA BUTTONS — slate fill, no coral fill ----- */

.cta-button {
  display: inline-block;
  background-color: var(--parchment);
  color: var(--ink);
  padding: 1rem 2.25rem;
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.8rem;
  font-weight: 600;
  border: 1px solid var(--parchment);
  border-radius: 2px;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 0 0 rgba(15, 34, 45, 0);
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.cta-button:hover {
  background-color: transparent;
  color: var(--parchment);
  border-color: var(--parchment);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(15, 34, 45, 0.22);
}

/* ============================================================
   INTRO — parchment ground
   ============================================================ */

.intro {
  padding: 6rem 2rem;
  background-color: var(--parchment);
}

.intro-content { max-width: 880px; margin: 0 auto; }   /* widened to reduce visual asymmetry with the 1100px header/footer */

.intro h2 {
  font-family: var(--serif);
  font-size: clamp(2rem, 3.5vw, 2.5rem);
  text-align: center;
  margin-bottom: 1.5rem;
  color: var(--ink);
}
.intro h2::after {
  content: "";
  display: block;
  width: 56px;
  height: 1px;
  background: var(--signal);
  margin: 1.5rem auto 0;
}

.intro p {
  font-family: var(--serif);
  font-size: 1.3rem;            /* larger type pulls line-length back into the optimal 65–70 chars at the wider container */
  line-height: 1.65;
  margin: 0 0 1.5rem;
  color: var(--text-dark);
}

.intro-cta { text-align: center; margin-top: 2.5rem; }
.intro-cta a {
  font-family: var(--display);
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.22em;
  font-weight: 500;
  color: var(--slate);
  border-bottom: 1px solid transparent;
  padding-bottom: 3px;
  transition: color 0.25s ease, border-bottom-color 0.25s ease;
}
.intro-cta a:hover {
  color: var(--ink);
  border-bottom-color: var(--signal);
}

/* Arrow inside the intro-cta link — nudges forward on hover for a
   "going somewhere" feel, the standard idiom for editorial 'learn more →'
   links without converting the link into a button. */
.intro-cta a .arrow {
  display: inline-block;
  margin-left: 0.15em;
  transition: transform 0.25s ease;
}
.intro-cta a:hover .arrow {
  transform: translateX(4px);
}

/* ============================================================
   FOOTER — ink ground, mirroring header
   ============================================================ */

.site-footer {
  background-color: var(--ink);
  color: var(--slate-300);
  padding: 4rem 2rem 3rem;
  font-size: 0.9rem;
}

.footer-content { max-width: var(--max-content); margin: 0 auto; }

.footer-grid {
  display: grid;
  grid-template-columns: auto auto auto auto;
  justify-content: space-between;       /* brand anchors the left edge, LEGAL anchors the right edge, link columns distributed between */
  gap: 4rem;                            /* minimum spacing so columns can't collide on narrow viewports */
  margin-bottom: 3.5rem;
  align-items: start;
}

/* The LEGAL column gets right-padding to match the SVG wordmark's internal left padding.
   Without this, "Privacy Policy" sits flush against the right edge while MERIDIAN has
   ~31px of empty space inside the SVG on its left. The padding restores symmetric insets. */
.footer-grid > .footer-column:last-child {
  padding-right: 4rem;                  /* visible inset on the right (~64px), symmetric with the left side after the brand padding + SVG padding */
}

.footer-brand { text-align: left; padding-left: 4rem; }   /* visible left inset symmetric with the right side (Legal column padding-right: 4rem) */

.footer-logo {
  display: block;
  max-width: 180px;            /* reduced from 242px so brand block matches the link column heights */
  width: 100%;
  height: auto;
  margin: -1rem 0 -2rem;       /* SVG has ~17% top whitespace at this size; -1rem aligns visible "MERIDIAN" with the H3 row. Bottom margin -2rem pulls the tagline tighter against the visible logo bottom. */
  aspect-ratio: 1554 / 1230;   /* reserve correct height before SVG parses */
}

.footer-tagline {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.72rem;         /* recedes below the logo — a quiet echo, not a competing element */
  color: var(--slate-300);
  letter-spacing: 0.02em;
  margin: 0 0 1rem;
  max-width: 242px;
  text-align: center;
}

.footer-address { line-height: 1.5; margin: 0 0 0.6rem; }
.footer-contact-line { margin: 0.2rem 0; font-size: 0.9rem; }

.footer-column h3 {
  font-family: var(--serif);     /* Cormorant Garamond — matches the serif heading hierarchy used in the body. The footer carries that voice down to the bottom of the page. */
  font-size: 1rem;                /* 16px — sized down from main headings, still legible and brand-consistent */
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--parchment);
  font-weight: 500;
  margin: 0 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--signal);
  display: inline-block;
}

.footer-column ul { list-style: none; padding: 0; margin: 0; font-size: 0.85rem; }
.footer-column li { margin: 0.5rem 0; }
.footer-column a { color: var(--slate-300); border-bottom: 1px solid transparent; }

.site-footer a {
  color: var(--slate-300);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.site-footer a:hover { color: var(--parchment); border-bottom-color: var(--signal); }

.footer-bottom {
  margin: 0 4rem;                       /* hairline insets match the content above (MERIDIAN on the left, "Privacy Policy" on the right) */
  border-top: 1px solid var(--ink-500);
  padding-top: 1.75rem;
  text-align: center;
  font-size: 0.8125rem;
}
.footer-copyright { margin: 0; color: var(--slate-300); }
.footer-address { margin: 0.45rem 0 0; color: var(--slate-300); font-size: 0.75rem; letter-spacing: 0.02em; }

@media (max-width: 960px) {
  .footer-grid { grid-template-columns: 1fr 1fr 1fr; justify-content: stretch; gap: 2.5rem 3rem; }
  .footer-brand { grid-column: 1 / -1; }   /* brand spans the row above the link columns */
}
@media (max-width: 540px) {
  /* Mobile footer: single centered column. The brand block, every link column,
     and the address row all align to the same vertical axis so the footer
     reads as a closing signature rather than a sprawling sitemap. */
  .footer-grid { grid-template-columns: 1fr; gap: 1.75rem; }
  .footer-brand, .footer-column { text-align: center; }
}

/* ============================================================
   APPROACH PAGE — single-column with strategic full-width moments
   ============================================================ */

/* Higher-specificity selector (.content.content--approach) so this overrides
   the base .content { display: grid } rule, which appears later in the file. */
.content.content--approach {
  display: block;                /* override the 2-column grid */
  padding-top: 0;                /* sections handle their own top spacing */
  padding-bottom: 4rem;          /* parchment band between the navy CTA block and the navy footer */
}

/* Intro at the top */
.approach-intro {
  max-width: 880px;
  margin: 0 auto 2.5rem;
  padding-top: 1.5rem;             /* tightened to 1.5rem for uniform gap from coral rule */
}

/* When the intro holds a section image (Origins page), pull the top tight so
   the image sits closer to the title block above. */
.approach-intro:has(.section-image) {
  padding-top: 0.5rem;
}

.approach-intro .lede {
  font-family: var(--serif);
  font-size: 1.4rem;
  font-style: italic;
  line-height: 1.55;
  color: var(--ink);
  margin: 0 0 2rem;
  font-weight: 400;
}

.approach-intro > p {
  font-family: var(--serif);
  font-size: 1.2rem;
  line-height: 1.7;
  margin: 0 0 1.5rem;
  color: var(--text-dark);
}

/* Sections — text content at readable width, centered */
.approach-section {
  max-width: 880px;
  margin: 0 auto;
  padding: 1rem 0;                 /* tightened from 1.5rem — stacking with paragraph bottom margins created excessive gaps between sections */
}

/* Legacy: kept for compatibility but no longer used.
   Plates (figures) live as siblings of their .approach-section so
   the section text stays at the editorial 880px reading column
   and only the figure breaks out wider. */
.approach-section--wide {
  max-width: var(--max-content);
}

.approach-section h2 {
  font-family: var(--serif);
  font-size: 1.85rem;
  font-weight: 500;
  margin: 0 0 1rem;
  color: var(--ink);
}

.approach-section h2::after {
  content: "";
  display: block;
  width: 40px;
  height: 1px;
  background: var(--signal);
  margin-top: 0.75rem;
  margin-bottom: 1rem;
}

.approach-section > p {
  font-family: var(--serif);
  font-size: 1.15rem;
  line-height: 1.7;
  margin: 0 0 1.4rem;
  color: var(--text-dark);
}

.approach-section em {
  font-style: italic;
  color: var(--slate);
}

.approach-section > ul {
  font-family: var(--serif);
  font-size: 1.1rem;
  line-height: 1.7;
  margin: 0 0 1.5rem;
  padding-left: 1.5rem;
}

.approach-section > ul > li {
  margin: 0 0 0.75rem;
}

.approach-section > ul li strong {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink);
  text-transform: none;
}

.section-lead {
  font-style: italic;
}

/* Quick facts strip — horizontal full-width row */
.facts-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin: 0 auto 1rem;
  padding: 2rem 0;
  border-top: 1px solid var(--parchment-200);
  border-bottom: 1px solid var(--parchment-200);
  max-width: var(--max-content);
}

.fact {
  text-align: center;
  padding: 0.25rem 1rem;
  border-right: 1px solid var(--parchment-200);
}

.fact:last-child { border-right: none; }

.fact-num {
  display: block;
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 0.4rem;
  letter-spacing: -0.01em;
}

.fact-label {
  display: block;
  font-family: var(--display);
  font-size: 0.68rem;
  letter-spacing: 0.16em;          /* tightened from 0.24em — was too airy and made longer labels wrap */
  text-transform: uppercase;
  color: var(--slate);
  font-weight: 500;
}

/* Step grid (4-step process) — full content width 2x2 */
.step-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-top: 2rem;
}

.step-card {
  position: relative;
  background-color: var(--bg-soft);
  padding: 2.5rem 2.25rem;         /* symmetric top/bottom padding now that the prose is tighter */
  border-top: 2px solid var(--signal);
}

.step-num {
  position: absolute;
  top: 1.25rem;
  right: 1.75rem;
  font-family: var(--serif);
  font-size: 3.5rem;
  font-style: italic;
  font-weight: 500;
  color: var(--slate-300);
  line-height: 1;
  letter-spacing: -0.02em;
}

.step-card h3 {
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 500;
  margin: 0 0 0.9rem;
  color: var(--ink);
  max-width: 75%;                /* leave room for the step number */
  letter-spacing: -0.005em;
}

.step-card p {
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.65;
  margin: 0;
  color: var(--text-dark);
}

/* ============================================================
   PLATE I — Engagement passage (5-step closed-loop diagram)
   Editorial SVG diagram that replaces the old .step-grid on the
   Approach page. The chord runs left→right through all five
   stations; the surrounding stadium carries the recursion.
   ============================================================ */

.plate {
  max-width: var(--max-content);
  margin: 0.5rem auto 1rem;
  padding: 0;
}
.plate svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.plate-caption {
  max-width: var(--max-content);
  margin: 0 auto 0;                 /* tightened: chart sits just below the hairline */
  /* Horizontal padding (110px) matches the inset of the centered hairline below,
     so the caption text starts exactly where the hairline begins. */
  padding: 0 110px 0.5rem;
  display: flex;
  justify-content: space-between;   /* harmless when only one child; meta variant still aligns right */
  align-items: baseline;
  border-bottom: none;
  /* Hairline: 880px wide (matches the principle-item bottom borders in the
     numbered-list), centered, 1px parchment. */
  background-image: linear-gradient(to right, var(--parchment-200), var(--parchment-200));
  background-repeat: no-repeat;
  background-position: center 100%;
  background-size: 880px 1px;
}
/* .plate-no is the small all-caps label that titles a plate (e.g.
   "ENGAGEMENT CYCLE"). It's the same labelling tier as .page-eyebrow
   — same family, size, tracking, weight, and color. If you change
   one, change the other so the two labels stay in sync. */
.plate-caption .plate-no {
  font-family: var(--display);
  font-size: 0.75rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--slate);
  font-weight: 500;
}
.plate-caption .plate-meta {
  font-family: var(--display);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--slate-300);
  font-weight: 500;
}

/* Italic editor's note under the plate (no UI box — just a hairline + caption) */
.editor-note {
  max-width: 720px;
  margin: 1.5rem auto 0;
  padding: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--text-muted);
  text-align: center;
}
.editor-note::before {
  content: "";
  display: block;
  width: 32px;
  height: 1px;
  background: var(--signal);
  margin: 0 auto 1rem;
}

/* SVG type classes — set once, reused across plates */
.t-numeral   { font-family: var(--serif);  font-style: italic; font-weight: 400; fill: var(--slate-300); }
.t-label     { font-family: var(--display); font-weight: 500; fill: var(--ink); text-transform: uppercase; letter-spacing: 0.26em; }
.t-descr     { font-family: var(--serif);  font-style: italic; font-weight: 400; fill: var(--text-muted); }

/* Plate I — passage track */
.axis-rule   { stroke: var(--slate-300); stroke-width: 0.75; fill: none; }
.axis-tick   { stroke: var(--ink);       stroke-width: 0.75; fill: none; }
.track       { stroke: var(--slate-300); stroke-width: 0.75; fill: none; }
.track-arrow { fill: var(--signal); stroke: none; }

/* CTA block at the bottom — dark navy panel */
.cta-block {
  margin: 1.5rem auto 0;           /* tightened — sits closer to the section above without losing a clear break */
  padding: 3rem 3rem;              /* reduced from 4.5rem now that the block holds only eyebrow + button */
  background-color: var(--ink);
  color: var(--parchment);
  text-align: center;
}

.cta-block .cta-eyebrow {
  font-family: var(--display);
  font-size: 1rem;                /* enlarged from 0.75rem so the eyebrow can carry the block on its own */
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--parchment);        /* brightened from slate-300 so it reads as the headline of the block */
  margin: 0 0 1.5rem;             /* more space below before the button */
  font-weight: 500;
}

.cta-block h2 {
  font-family: var(--serif);
  font-size: 2.25rem;
  font-weight: 500;
  margin: 0 0 1rem;
  color: var(--parchment);
  letter-spacing: -0.01em;
}

.cta-block h2::after { display: none; }

.cta-block .cta-description {
  font-family: var(--serif);
  font-size: 1.2rem;
  font-style: italic;
  color: var(--slate-300);
  margin: 0 0 2rem;
}

.cta-block .cta-button {
  background-color: var(--parchment);
  color: var(--ink);
  border-color: var(--parchment);
}

.cta-block .cta-button:hover {
  background-color: transparent;
  color: var(--parchment);
  border-color: var(--parchment);
}

@media (max-width: 760px) {
  .facts-strip { grid-template-columns: repeat(2, 1fr); padding: 1.5rem 0; }
  .fact { border-right: none; padding: 0.75rem 1rem; }
  .fact:nth-child(odd) { border-right: 1px solid var(--parchment-200); }
  .fact:last-child { grid-column: 1 / -1; border-right: none; }
  .step-grid { grid-template-columns: 1fr; }
  .cta-block { padding: 3rem 1.5rem; }
  .cta-block h2 { font-size: 1.75rem; }
}

/* ============================================================
   SUB-PAGE HEADER — parchment ground
   ============================================================ */

main { background-color: var(--parchment); }

.page-header {
  padding: 4.5rem 2rem 1.5rem;     /* bottom tightened to 1.5rem to unify gap to first content */
  text-align: center;
  background-color: var(--parchment);
}

.page-eyebrow {
  font-family: var(--display);
  font-size: 0.75rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--slate);
  margin: 0 0 1.25rem;
  font-weight: 500;
  /* Same optical nudge as .page-title so the eyebrow, title, and subtitle
     all sit on a single vertical axis below the page-rule. */
  padding-left: 0.2em;
}

.page-title {
  font-family: var(--serif);
  font-size: clamp(2.25rem, 4.5vw, 3.5rem);
  font-weight: 500;
  color: var(--ink);
  line-height: 1.1;
  margin: 0 0 0.5rem;
  letter-spacing: -0.015em;
  /* Optical-centering nudge — page titles in Bodoni tend to lean left because
     many leading caps (N, A, P, D) carry more visual weight than the trailing
     letters. A small padding-left shifts the text center ~0.1em to the right,
     bringing the word's visual center onto the page's vertical axis. */
  padding-left: 0.2em;
}

.page-title sup { font-size: 0.5em; vertical-align: super; line-height: 0; font-weight: 400; }

/* Registered marks (CFA®) — 20% smaller than the browser default for a quieter ® */
sup { font-size: 0.66em; vertical-align: super; line-height: 0; }

.page-subtitle {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--text-muted);
  letter-spacing: 0;
  text-transform: none;
  margin: 0;
  /* Same optical nudge as .page-title so all three header lines align. */
  padding-left: 0.2em;
}

.page-rule {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 2rem auto 0;
  width: 56px;
  height: 1px;
  background: var(--signal);
}
.page-rule::before,
.page-rule span { display: none; }   /* legacy diamond removed */

/* ============================================================
   CONTENT LAYOUT — two-column with sidebar
   ============================================================ */

.content {
  max-width: var(--max-content);
  margin: 0 auto;
  padding: 1.5rem 2rem 6rem;       /* top tightened to 1.5rem for uniform gap from coral rule */
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 4.5rem;
  align-items: start;
  background-color: var(--parchment);
}

.content-main p {
  font-family: var(--serif);
  font-size: 1.15rem;
  line-height: 1.7;
  margin: 0 0 1.4rem;
  color: var(--text-dark);
}

.content-main .lede {
  font-size: 1.4rem;
  line-height: 1.5;
  color: var(--ink);
  margin-bottom: 2rem;
  font-weight: 400;
  font-style: italic;
}

.content-main h2 {
  font-family: var(--serif);
  font-size: 1.85rem;
  margin: 3rem 0 1rem;
  color: var(--ink);
  font-weight: 500;
}
.content-main h2::after {
  content: "";
  display: block;
  width: 40px;
  height: 1px;
  background: var(--signal);
  margin-top: 0.75rem;
}

.content-main em { font-style: italic; color: var(--slate); }

/* Inline figure inside content — used for photo images */
.section-image {
  max-width: 75%;                  /* smaller than the full text column — gives the instrument breathing room */
  margin: 0.75rem auto 1.25rem;    /* tightened — image sits closer to the title above and the section below */
  padding: 0;
}
.section-image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1.856 / 1;         /* matches the recentered sextant-hero.jpg (6948×3744) */
  object-fit: cover;
  border-radius: 2px;
  /* No shadow — sextant floats directly on the parchment, fully blended */
}
.section-image figcaption {
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-top: 0.6rem;
  font-style: italic;
}

/* Abstract diagram — used for the SVG sextant on the About page.
   The SVG carries its own card background + border. */
.section-diagram {
  margin: 0.75rem auto 1.25rem;    /* tightened — diagram sits closer to the heading above and the prose below */
  padding: 0;
  max-width: 560px;
}
.section-diagram img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;             /* matches the SVG's 600×400 viewBox — prevents layout shift while loading */
  /* No shadow — diagram floats directly on the parchment, matching the sextant hero */
}


/* ============================================================
   ABOUT PAGE — founder section layout
   Headshot on the left, bio on the right, then highlights strip + credentials.
   ============================================================ */

/* Lede styling inside an approach-section (matches the brand serif emphasis) */
.approach-section .lede {
  font-family: var(--serif);
  font-size: 1.4rem;
  font-style: italic;
  line-height: 1.55;
  color: var(--ink);
  margin: 0 0 1.5rem;
  font-weight: 400;
}

.founder-block {
  display: grid;
  grid-template-columns: 1.2fr 1.8fr;
  gap: 3rem;
  align-items: start;
  margin: 1.5rem auto 2.5rem;
  max-width: 880px;
}

/* Left column wrapper — stacks the headshot above the vertical highlights sidebar */
.founder-side {
  display: flex;
  flex-direction: column;
}

.founder-portrait {
  margin: 0;
}
.founder-portrait img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 896 / 1152;        /* reserve correct height before the image loads — prevents layout shift */
  object-fit: cover;
  border-radius: 2px;
}
.founder-portrait figcaption {
  font-family: var(--display);
  font-weight: 500;
  text-align: center;       /* matches the centered credentials list below — both columns now read as one unified block */
  font-size: 0.88rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  margin-top: 1rem;
  line-height: 1.5;
}
.founder-portrait figcaption span {
  display: block;
  font-size: 0.78rem;
  color: var(--slate);
  letter-spacing: 0.22em;
  margin-top: 0.3rem;
  font-weight: 500;
}

.founder-bio p {
  font-family: var(--serif);
  font-size: 1.15rem;
  line-height: 1.7;
  margin: 0 0 1.4rem;
  color: var(--text-dark);
}
.founder-bio > :first-child {
  margin-top: -0.5rem;   /* trim line-height leading so the first line's cap-height aligns with the image top */
}
.founder-bio p:last-child { margin-bottom: 0; }

/* Founder highlights — vertical sidebar stacked under the headshot (reuses .fact / .fact-num / .fact-label) */
.founder-highlights {
  display: flex;
  flex-direction: column;
  margin: 1.5rem 0 0;
  padding: 0;                      /* the first .fact's own padding-top now provides the gap below the border, matching inter-fact spacing */
  border-top: 1px solid var(--parchment-200);
}
.founder-highlights .fact {
  text-align: center;
  padding: 0.9rem 0.5rem 1.2rem;   /* bottom bumped from 0.9rem to 1.2rem so the credentials column reaches a bit lower, aligning closer to the bio column on the right */
  border-right: none;
  border-bottom: 1px solid var(--parchment-200);
}
.founder-highlights .fact:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

/* Credentials — small inline caption line below the highlights */
.founder-credentials {
  font-family: var(--display);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--slate);
  text-align: center;
  margin: 1.5rem auto 0;
  padding: 0;
  font-weight: 500;
  max-width: 880px;
  line-height: 1.8;
}

@media (max-width: 760px) {
  .founder-block {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .founder-portrait {
    max-width: 260px;
    margin: 0 auto;
  }
  /* On narrow screens the .founder-side stack sits above the bio, and the highlights remain a vertical list */
  .founder-side {
    max-width: 360px;
    margin: 0 auto;
  }
}

/* ============================================================
   SIDEBAR
   ============================================================ */

.content-sidebar { font-size: 0.95rem; }

.headshot { margin: 0 0 2.5rem; padding: 0; }

.headshot-placeholder {
  aspect-ratio: 1 / 1.2;
  background-color: var(--parchment-50);
  border: 1px dashed var(--slate-300);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.headshot-image {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1.2;
  object-fit: cover;
  object-position: center top;
  border-radius: 0;
}

.headshot figcaption {
  margin-top: 1rem;
  font-family: var(--serif);
  font-size: 1.1rem;
  color: var(--ink);
  text-align: center;
}
.headshot figcaption span {
  display: block;
  font-family: var(--display);
  font-size: 0.7rem;
  color: var(--slate);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  margin-top: 0.5rem;
  font-weight: 500;
}

.sidebar-section {
  margin: 0 0 2.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--parchment-200);
}
.sidebar-section:last-child { margin-bottom: 0; }

.sidebar-section h3 {
  font-family: var(--display);
  font-size: 0.7rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--slate);
  margin: 0 0 1.25rem;
  font-weight: 500;
}

.sidebar-section ul { list-style: none; padding: 0; margin: 0; }

/* Triangular-bullet brand list */
.credentials li {
  margin-bottom: 1rem;
  line-height: 1.5;
  font-size: 0.95rem;
  padding-left: 1.4em;
  position: relative;
}
.credentials li::before {
  content: "▸";
  position: absolute;
  left: 0;
  color: var(--signal);
}
.credentials li span {
  display: block;
  color: var(--text-muted);
  font-size: 0.85rem;
  margin-top: 0.15rem;
}

.highlights-list li {
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--parchment-200);
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--text-dark);
}
.highlights-list li:last-child { border-bottom: none; }

.highlight-stat {
  font-family: var(--serif);
  color: var(--ink);
  font-weight: 600;
  font-size: 1.1rem;
  margin-right: 0.35rem;
}

.career-list li {
  display: grid;
  grid-template-columns: 5rem 1fr;
  gap: 0.5rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--parchment-200);
  font-size: 0.875rem;
  line-height: 1.4;
}
.career-list li:last-child { border-bottom: none; }
.career-list .year {
  font-family: var(--display);
  color: var(--slate);
  font-weight: 500;
  letter-spacing: 0.18em;
  font-size: 0.72rem;
  align-self: center;
}

/* ============================================================
   CONTACT PAGE BLOCKS
   ============================================================ */

.contact-methods { margin-top: 2.5rem; }

.contact-method {
  margin-bottom: 2.25rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--parchment-200);
}
.contact-method:first-child { padding-top: 0; border-top: none; }

.contact-method h2 {
  font-family: var(--display);
  font-size: 0.72rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--slate);
  margin: 0 0 0.75rem;
  font-weight: 500;
  padding-bottom: 0;
  border-bottom: none;
}
.contact-method h2::after { display: none; }

.contact-method p {
  font-family: var(--serif);
  font-size: 1.4rem;
  margin: 0;
  line-height: 1.5;
  color: var(--ink);
  font-weight: 500;
}

.contact-method a {
  display: inline-block;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease;
}
.contact-method a:hover { color: var(--ink); border-bottom-color: var(--signal); }

/* ============================================================
   APPROACH — numbered list, CTA card
   ============================================================ */

.numbered-list {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 1.4rem;       /* bottom margin matches .approach-section > p so inter-section gaps are consistent */
  counter-reset: step;
}
.numbered-list li {
  counter-increment: step;
  position: relative;
  padding: 1.6rem 0 1.5rem 3.5rem;
  border-bottom: 1px solid var(--parchment-200);
}
.numbered-list li:first-child { border-top: 1px solid var(--parchment-200); }
.numbered-list li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 1.65rem;
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 500;
  color: var(--signal);
  letter-spacing: 0.18em;
}
.numbered-list h3 {
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 500;
  margin: 0 0 0.5rem;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.numbered-list p {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.1rem;
  line-height: 1.65;
  color: var(--text-dark);
}

.quick-facts { list-style: none; padding: 0; margin: 0; }
.quick-facts li {
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--parchment-200);
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--text-dark);
}
.quick-facts li:last-child { border-bottom: none; }

.cta-card {
  background-color: var(--ink);
  color: var(--parchment);
  padding: 1.85rem 1.6rem;
  margin-top: 2.5rem;
  border-radius: 2px;
}
.cta-card-title {
  font-family: var(--serif);
  font-size: 1.3rem;
  color: var(--parchment);
  margin: 0 0 0.85rem;
  font-weight: 500;
}
.cta-card p {
  font-family: var(--serif);
  color: var(--slate-300);
  font-size: 1rem;
  line-height: 1.55;
  margin: 0 0 1.4rem;
}

.sidebar-cta-button {
  display: inline-block;
  background-color: var(--parchment);
  color: var(--ink);
  padding: 0.9rem 1.85rem;
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--parchment);
  border-radius: 2px;
  box-shadow: 0 0 0 rgba(15, 34, 45, 0);
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.sidebar-cta-button:hover {
  background-color: transparent;
  color: var(--parchment);
  border-color: var(--parchment);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(15, 34, 45, 0.22);
}

/* ============================================================
   LEGAL PAGES
   ============================================================ */

.legal-content {
  max-width: 760px;
  margin: 0 auto;
  padding: 1.5rem 2rem 6rem;       /* top tightened to 1.5rem for uniform gap from coral rule */
  background-color: var(--parchment);
}

.legal-content .lede {
  font-family: var(--serif);
  font-size: 1.4rem;
  line-height: 1.55;
  color: var(--ink);
  margin: 0 0 3rem;
  font-weight: 400;
  font-style: italic;
}

.legal-section { margin: 0 0 3rem; scroll-margin-top: 2rem; }

.legal-section h2 {
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 1.25rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--signal);
}

.legal-section h3 {
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 0.5rem;
}

.legal-section p {
  font-family: var(--serif);
  font-size: 1.1rem;
  line-height: 1.7;
  margin: 0 0 1.25rem;
  color: var(--text-dark);
}
.legal-section p:last-child { margin-bottom: 0; }

.legal-section a.text-link {
  color: var(--slate);
  border-bottom: 1px solid var(--signal);
  font-weight: 500;
}
.legal-section a.text-link:hover { color: var(--slate-600); }

.legal-actions { margin: 0 0 3rem; text-align: left; }

.download-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background-color: transparent;
  color: var(--ink);
  padding: 0.7rem 1.5rem;
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.72rem;
  font-weight: 600;
  border: 1px solid var(--ink);
  border-radius: 2px;
  text-decoration: none;
  box-shadow: 0 0 0 rgba(15, 34, 45, 0);
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.download-button:hover {
  background-color: var(--ink);
  color: var(--parchment);
  border-bottom-color: var(--ink);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(15, 34, 45, 0.22);
}
.download-button::after { content: "\2193"; font-weight: 400; margin-left: 0.1rem; }

/* Document list */
.doc-list { margin: 1.5rem 0 2rem; display: flex; flex-direction: column; gap: 1.25rem; }
.doc-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  padding: 1.5rem 1.75rem;
  background-color: var(--bg-paper);
  border: 1px solid var(--parchment-200);
  border-left: 2px solid var(--signal);
}
.doc-meta { flex: 1; }
.doc-meta p { margin: 0; font-size: 0.95rem; line-height: 1.5; }
.doc-meta p + p { margin-top: 0.4rem; }
.doc-effective {
  font-family: var(--display);
  font-size: 0.7rem !important;
  color: var(--slate);
  text-transform: uppercase;
  letter-spacing: 0.28em;
  font-weight: 500;
}

@media (max-width: 640px) {
  .doc-item { flex-direction: column; align-items: flex-start; gap: 1rem; }
}

/* Tables */
.legal-section table { width: 100%; border-collapse: collapse; margin: 0.5rem 0 0; font-size: 0.95rem; }
.info-table td { padding: 0.85rem 1rem; border-bottom: 1px solid var(--parchment-200); vertical-align: top; line-height: 1.5; }
.info-table tr:first-child td { border-top: 1px solid var(--slate-300); }
.info-table td:first-child { padding-left: 0; }
.info-table td:last-child { padding-right: 0; }

.sharing-table { margin-top: 1rem; }
.sharing-table th {
  background-color: var(--ink);
  color: var(--parchment);
  padding: 0.9rem 1rem;
  text-align: left;
  font-family: var(--display);
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-weight: 500;
}
.sharing-table th:not(:first-child) { text-align: center; }
.sharing-table td {
  padding: 1.1rem 1rem;
  border-bottom: 1px solid var(--parchment-200);
  vertical-align: top;
  line-height: 1.55;
}
.sharing-table td strong { display: block; margin-bottom: 0.35rem; color: var(--ink); font-family: var(--serif); font-size: 1.05rem; }
.sharing-table td p { margin: 0; font-size: 0.92rem; }
.sharing-table .answer-cell {
  text-align: center;
  font-family: var(--display);
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
  width: 7.5rem;
}

/* Disclaimer list — triangular bullets */
.disclaimer-list { list-style: none; padding: 0; margin: 0; }
.disclaimer-list li {
  position: relative;
  padding-left: 1.4rem;
  margin-bottom: 1rem;
  line-height: 1.65;
}
.disclaimer-list li::before {
  content: "▸";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--signal);
}

@media (max-width: 640px) {
  .legal-content { padding: 1.5rem 1.25rem 4rem; }
  .sharing-table { font-size: 0.85rem; }
  .sharing-table th, .sharing-table td { padding: 0.7rem 0.5rem; }
  .sharing-table .answer-cell { width: auto; }
}

/* ============================================================
   MOTION
   ============================================================ */

@keyframes fadeUpOnLoad {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.fade-up { opacity: 0; animation: fadeUpOnLoad 1.2s cubic-bezier(0.33, 1, 0.68, 1) forwards; }
.fade-up-1 { animation-delay: 250ms; }
.fade-up-2 { animation-delay: 500ms; }

.page-header > * { opacity: 0; animation: fadeUpOnLoad 1.2s cubic-bezier(0.33, 1, 0.68, 1) forwards; }
.page-header > *:nth-child(1) { animation-delay: 0ms; }
.page-header > *:nth-child(2) { animation-delay: 80ms; }
.page-header > *:nth-child(3) { animation-delay: 160ms; }
.page-header > *:nth-child(4) { animation-delay: 240ms; }

@media (prefers-reduced-motion: reduce) {
  .page-header > * { animation: none; opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .fade-up { animation: none; opacity: 1; transform: none; }
}

.js .hero-enter {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.95s cubic-bezier(0.16, 1, 0.3, 1) var(--enter-delay, 0ms),
              transform 0.95s cubic-bezier(0.16, 1, 0.3, 1) var(--enter-delay, 0ms);
}
.js body.loaded .hero-enter { opacity: 1; transform: translateY(0); }

/* The wordmark itself reads instantly — the brand identity should not fade in
   from invisible. The other hero children retain their staggered entrance. */
.js .hero-logo.hero-enter { opacity: 1; }

/* The hero-enter class is added to direct children of .hero by scripts.js
   for the entry animation, which sets a slow 0.95s transition. For cta-button
   elements we override with the standard 0.3s transition and a hover-state
   transform that wins on specificity even against .js body.loaded .hero-enter. */
.cta-button.hero-enter {
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.js body .cta-button.hero-enter:hover {
  transform: translateY(-2px);
}

.js .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}
.js .reveal.visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .hero-enter, .js .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ============================================================
   INSIGHTS — centered gate above, three-column "Selected notes" grid below
   ============================================================ */

.selected-notes {
  max-width: 760px;
  margin: 0 auto;
  padding: 4rem 2rem 6rem;
}

.selected-heading {
  font-family: var(--display);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--slate);
  font-weight: 500;
  text-align: center;
  margin: 0 0 2rem;
}

/* Three-card row, centered. Card width fixed so the visual weight
   stays small (matching prior sidebar size); gap and centering
   give the row its presence on the page. */
.thumbnail-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 110px);
  justify-content: center;
  gap: 1.5rem;
}

.thumbnail-item { margin: 0; }

.thumbnail-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  aspect-ratio: 3 / 4;
  background-color: var(--parchment-50);
  border: 1px solid var(--parchment-200);
  text-decoration: none;
  color: var(--ink);
  padding: 0.64rem;
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

/* Thin coral hairline at the top of each card — a quiet brand cue. */
.thumbnail-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 18%;
  right: 18%;
  height: 1px;
  background-color: var(--signal);
  opacity: 0.5;
  transition: opacity 0.3s ease, left 0.3s ease, right 0.3s ease;
}

.thumbnail-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(15, 34, 45, 0.12);
  border-color: var(--slate-300);
}

.thumbnail-card:hover::before {
  opacity: 1;
  left: 8%;
  right: 8%;
}

.thumbnail-label {
  font-family: var(--display);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--ink);
  line-height: 1;
}

.thumbnail-caption {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.55rem;
  color: var(--slate-300);
  margin-top: 0.38rem;
}

/* On narrow viewports, let the cards expand to fill 1/3 of the row. */
@media (max-width: 640px) {
  .selected-notes { padding: 3rem 1.25rem 4rem; }
  .thumbnail-list {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
  }
}

/* ============================================================
   INSIGHTS GATE — branded per-session client sign-in
   ============================================================ */

.insights-gate {
  max-width: var(--max-content);
  margin: 0 auto;
  padding: 1.5rem 2rem 0;          /* no bottom padding — the .selected-notes section below has its own top padding */
}

/* Gate-inner is now a visibly-bounded panel — a contained object on the
   page that reads as one gating step rather than three loose paragraphs. */
.gate-inner {
  max-width: 460px;
  margin: 0 auto;
  background-color: var(--parchment-50);
  border: 1px solid var(--parchment-200);
  padding: 2.25rem 2.5rem 2rem;
}

.gate-lede {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-style: italic;
  line-height: 1.55;
  color: var(--ink);
  text-align: center;
  margin: 0 0 2rem;
}

.gate-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.gate-field {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.gate-field label {
  font-family: var(--display);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--slate);
  font-weight: 500;
}

.gate-field input {
  font-family: var(--serif);
  font-size: 1.1rem;
  color: var(--ink);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--parchment-200);
  padding: 0.5rem 0;
  outline: none;
  transition: border-color 0.2s ease;
  -webkit-appearance: none;
  border-radius: 0;
}

.gate-field input:focus {
  border-bottom-color: var(--signal);
}

.gate-submit {
  align-self: center;
  margin-top: 1rem;
  background-color: var(--ink);
  color: var(--parchment);
  font-family: var(--display);
  font-size: 0.85rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 0.95rem 2.5rem;
  border: none;
  cursor: pointer;
  box-shadow: 0 0 0 rgba(15, 34, 45, 0);
  transition: background-color 0.2s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.gate-submit:hover {
  background-color: var(--slate);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(15, 34, 45, 0.22);
}

.gate-error {
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  color: var(--signal);
  font-size: 1rem;
  margin: 0.5rem 0 0;
}

/* Welcome line shown after a successful unlock */
.welcome-line {
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--slate);
  max-width: var(--max-content);
  margin: 1.5rem auto 0;
  padding: 0 2rem;
}

.welcome-line:empty {
  display: none;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Phones in any orientation. The width clause catches portrait phones;
   the height clause catches landscape phones (where width is wide but
   vertical space is tight — e.g. iPhone 14 landscape = 844×390).
   Tablets are excluded: iPad Mini landscape height is 744px,
   iPad portrait widths start at 768px. */
@media (max-width: 640px), (max-height: 500px) {
  /* ----- Mobile nav: hamburger + full-screen overlay ----- */
  .site-header { position: relative; z-index: 60; }   /* always above the overlay so sextant + hamburger stay clickable */
  .site-nav { justify-content: space-between; padding: 1.25rem 1.5rem; flex-wrap: nowrap; gap: 1rem; }
  .site-nav::after { left: 1.5rem; right: 1.5rem; }
  .nav-toggle { display: flex; }

  /* The .nav-links <ul> becomes a full-screen overlay that slides in from the right. */
  .nav-links {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--ink);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    padding: 6rem 2rem 4rem;
    margin: 0;
    flex: 1 1 auto;
    width: 100%;
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 50;
    overflow-y: auto;
  }
  body.nav-open { overflow: hidden; }
  body.nav-open .nav-links { transform: translateX(0); }

  /* In the overlay, links are bigger and centered. */
  .nav-links li { width: 100%; text-align: center; }
  .nav-links a { font-size: 1.05rem; letter-spacing: 0.32em; padding: 0.25rem 0; }

  /* ----- Page content adjustments on mobile ----- */
  .hero { padding: 2rem 1.25rem 4rem; }
  /* Pull the tagline up tight against the visible logo, the same as desktop —
     just scaled to the smaller mobile logo. The SVG carries built-in bottom
     whitespace; a negative margin-bottom absorbs it so the tagline reads
     as part of the lockup. */
  .hero-logo { margin-bottom: -4rem; }
  .intro { padding: 4rem 1.25rem; }
  /* Stack the three trust signals on their own lines, but keep
     the rhythm tight — the desktop line-height of 2 leaves too much air
     once the dots become block-level line breaks. */
  .trust-signals { line-height: 1.5; margin: 0 0 3rem; }
  .trust-signals .dot { display: block; margin: 0.1rem 0; color: transparent; line-height: 0; height: 0; }
  .content { grid-template-columns: 1fr; gap: 3rem; padding: 1.5rem 1.25rem 4rem; }
  .page-header { padding: 3rem 1.25rem 1.5rem; }

  /* ----- Mobile footer cleanup ----- */
  .footer-content { padding: 0 1.5rem; }
  .footer-grid { margin-bottom: 1.25rem; }
  .footer-brand { text-align: center; padding-left: 0; }
  .footer-logo { margin: -0.5rem auto -2rem; max-width: 150px; }
  .footer-tagline { margin: 0 auto; }
  .footer-column { padding: 0; text-align: center; }
  .footer-grid > .footer-column:last-child { padding-right: 0; }

  /* Tighter spacing inside each link column so the three sections don't sprawl. */
  .footer-column h3 { margin: 0 0 0.65rem; padding-bottom: 0.35rem; font-size: 0.95rem; }
  .footer-column ul { font-size: 0.8rem; }
  .footer-column li { margin: 0.3rem 0; }

  .footer-bottom { margin: 0; padding-top: 1.25rem; }
  .footer-copyright { font-size: 0.75rem; }
  .footer-address { font-size: 0.7rem; }
}

/* Landscape phones (iPhone in landscape, etc.) — tighter hero so the
   headline reaches the visible viewport instead of being pushed below
   the fold by a tall logo. These rules layer ON TOP of the main mobile
   block above. */
@media (max-height: 500px) and (orientation: landscape) {
  .hero { padding: 1.25rem 1.25rem 2rem; }
  .hero-logo { max-width: 360px; margin-bottom: -3rem; }
  .hero-subhead { margin: 0 0 1.25rem; }
  .hero-headline { margin: 0 auto 1.25rem; font-size: clamp(1.5rem, 3vw, 2rem); }
  .trust-signals { margin: 0 0 1.5rem; }
  .page-header { padding: 2rem 1.25rem 1rem; }
  .intro { padding: 2.5rem 1.25rem; }

  /* Footer in landscape — the wordmark floats awkwardly in the wide brand
     row at 844px, and it's redundant with the nav logo at the top of the
     page. Hide it and let the tagline anchor a much tighter brand row. */
  .footer-logo { display: none; }
  .footer-tagline { font-size: 0.72rem; margin: 0 auto; max-width: none; }
  .footer-grid { margin-bottom: 0.75rem; gap: 1.5rem 2.5rem; }
  .footer-column h3 { font-size: 0.9rem; margin: 0 0 0.5rem; padding-bottom: 0.3rem; }
  .footer-column ul { font-size: 0.75rem; }
  .footer-column li { margin: 0.2rem 0; }
  .footer-bottom { padding-top: 1rem; }
  .footer-copyright { font-size: 0.7rem; }
  .footer-address { font-size: 0.65rem; }
}

@media (max-width: 900px) and (min-width: 641px) {
  .content { grid-template-columns: 1fr; gap: 3rem; }
}

/* Contact-page response-time promise — bold italic serif with a coral
   hairline underline that spans only the text width (display: inline-block).
   Sits between the lede and the contact-list. */
.contact-promise {
  display: inline-block;
  font-family: var(--serif);
  font-size: 1.1rem;
  font-style: italic;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 2.5rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--signal);
}

/* ============================================================
   CONTACT PAGE — single-column editorial layout
   ============================================================ */

.content.content--contact {
  display: block;
  max-width: 720px;
  margin: 0 auto;
  padding: 2rem 2rem 6rem;
  background-color: var(--parchment);
}

.content--contact .lede {
  font-family: var(--serif);
  font-size: 1.4rem;
  line-height: 1.5;
  font-style: italic;
  color: var(--ink);
  margin: 0 0 1.75rem;
  font-weight: 400;
}

.contact-list {
  margin: 0;
  padding: 0;
}

.contact-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 1.5rem;
  padding: 1.5rem 0;
  border-top: 1px solid var(--parchment-200);
  align-items: baseline;
}

.contact-row:last-child {
  border-bottom: 1px solid var(--parchment-200);
}

.contact-list dt {
  font-family: var(--display);
  font-size: 0.7rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--slate);
  font-weight: 500;
}

.contact-list dd {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.2rem;
  line-height: 1.5;
  color: var(--ink);
}

.contact-list dd a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease;
}
.contact-list dd a:hover { border-bottom-color: var(--signal); }

.contact-cta {
  text-align: center;
  margin-top: 3.5rem;
}

.contact-cta p {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--text-muted);
  margin: 0 0 1.5rem;
}

.contact-cta .cta-button {
  background-color: var(--ink);
  color: var(--parchment);
  border-color: var(--ink);
}
.contact-cta .cta-button:hover {
  background-color: transparent;
  color: var(--ink);
  border-color: var(--ink);
}

@media (max-width: 540px) {
  .contact-row {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
}

/* ============================================================
   PLATE II — Cost Compounding chart
   Inline SVG on Approach page, inside principle #4
   ("Costs compound just as relentlessly as returns").
   Coral (--signal) appears as a hairline only on the delta bracket.
   ============================================================ */

.grid-rule          { stroke: var(--parchment-200); stroke-width: 1; fill: none; }
.grid-baseline      { stroke: var(--slate-300);     stroke-width: 1; fill: none; }
.curve-passive      { fill: none; stroke: var(--slate);       stroke-width: 1.5; }
.curve-active       { fill: none; stroke: var(--slate-300);   stroke-width: 1.25; stroke-dasharray: 4 4; }
.curve-gap          { fill: var(--slate-300); fill-opacity: 0.10; stroke: none; }
.delta-rule         { stroke: var(--signal); stroke-width: 1; fill: none; }
.endpoint-dot       { fill: var(--ink); }
.endpoint-dot-soft  { fill: var(--slate-300); }
.leader             { stroke: var(--slate-300); stroke-width: 0.75; fill: none; stroke-dasharray: 2 3; }

.t-axis             { font-family: var(--display); font-weight: 500; fill: var(--slate);       text-transform: uppercase; letter-spacing: 0.18em; }
.t-value            { font-family: var(--serif);   font-weight: 500; fill: var(--ink); }
.t-value-soft       { font-family: var(--serif);   font-weight: 500; fill: var(--slate-300); }
.t-eyebrow          { font-family: var(--display); font-weight: 500; fill: var(--slate);       text-transform: uppercase; letter-spacing: 0.28em; }

/* Inside a .numbered-list <li>, the plate and its caption break out of the
   3.5rem left padding (used for the leading counter) so the chart can use
   the section's full width rather than the indented column. */
.numbered-list li > .plate,
.numbered-list li > .plate-caption {
  margin-left: -3.5rem;
  margin-right: 0;
  max-width: none;
}
.numbered-list li > .plate-caption {
  margin-top: 1.75rem;
}
/* Drop the .plate's default 1rem bottom margin when it lives inside a
   principle item — the li already provides 1.5rem of padding-bottom, so the
   gap between the chart and the next principle matches the gap between any
   two adjacent principles. */
.numbered-list li > .plate {
  margin-bottom: 0;
}

/* On wide viewports, extend the in-list plate-caption to the 1100px figure
   width — matching how Plate I (a sibling figure) renders. The caption text
   sits in its 110px inset (above the 880px hairline) and the plate (chart)
   below stays at the 880px section width, centered under the caption. */
@media (min-width: 1140px) {
  .numbered-list li > .plate-caption {
    margin-left: calc(-3.5rem - 110px);
    margin-right: -110px;
    max-width: var(--max-content);
  }
}

/* A plate-caption that lives as a direct child of .content--approach is
   constrained by the article's 2rem horizontal padding. Pull it back out
   so the caption (and its 880px hairline) renders at the full 1100px width,
   matching the in-list plate-caption above. The plate (chart) itself stays
   at 880px — narrower than the caption — to match Plate II's treatment and
   the 880px reading column used elsewhere on the page. */
@media (min-width: 641px) {
  .content--approach > .plate-caption {
    margin-left: -2rem;
    margin-right: -2rem;
  }
  .content--approach > .plate {
    max-width: 880px;
  }
}