/* ============================================================================
   Montis Financial — WARM MODERNIST / Organic Minimal · production prototype
   The LOCKED design system shared by Options A, B, and C. Options differ in
   copy and formatting only — never in these tokens, shapes, or type.

   Discipline (do not relax):
   - border-radius appears ONLY on imagery (.photo, .vthumb) and the primary
     CTA (.btn). Everything else is square + hairline.
   - Gold is one accent thread: gold-ink for small text/numerals, raw gold for
     decorative rules and underlines only — never body text, never a flood.
   - No second hue, no shadows-as-depth, no gradients, no navy section floods:
     warmth comes from cream/paper band alternation and hairlines.
   - Type: Lora (display, 500/600) + Work Sans (body, 400–600), self-hosted.
   ========================================================================== */

:root {
  --cream:    #F6F1E7;
  --warm:     #EFE7D6;
  --navy:     #0A2342;
  --navy-2:   #0d2c53;
  --slate:    #55606E;
  --gold:     #C4A24C;
  --gold-ink: #7C5A16;
  --hair:     #DCD2BE;
  --rule:     #C2B294;   /* stronger than the hairline: visible box borders */
  --radius:   8px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 90px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--cream); color: var(--navy); font-family: 'Work Sans', system-ui, sans-serif; font-size: 18px; line-height: 1.65; -webkit-font-smoothing: antialiased; }
p { margin: 0 0 1em; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul, ol { margin: 0 0 1em; padding-left: 1.2em; }
::selection { background: var(--navy); color: var(--cream); }
:focus-visible { outline: 2px solid var(--gold-ink); outline-offset: 3px; }

h1, h2, h3 { font-family: 'Lora', Georgia, serif; font-weight: 600; margin: 0; color: var(--navy); letter-spacing: -0.01em; line-height: 1.14; }

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

/* ---- containers ---- */
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 44px; }
.wrap-wide { max-width: 1280px; margin: 0 auto; padding: 0 44px; }
.narrow { max-width: 760px; }
.narrow-c { max-width: 760px; margin-inline: auto; }
.center { text-align: center; }
@media (max-width: 640px) { .wrap, .wrap-wide { padding: 0 22px; } }

/* ---- section rhythm: cream / warm paper alternation, hairline seams ---- */
.sec { padding: 74px 0; border-top: 1px solid var(--hair); }
.sec.warm-band { background: var(--warm); }
.sec .eyebrow { margin-bottom: 12px; }
.sec h2 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); max-width: 24ch; margin-bottom: 8px; }
.sec .center h2, .center .sec h2 { margin-inline: auto; }
.sec .body { color: var(--slate); max-width: 54ch; }
.sec .body strong, .sec .body b { color: var(--navy); }
.sec .lede { font-size: 1.2rem; color: var(--navy); max-width: 44ch; }
.sec .lede.muted { color: var(--slate); }
.center .lede, .center .body { margin-inline: auto; }

.eyebrow { font-family: 'Work Sans', sans-serif; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: var(--gold-ink); margin: 0; }

/* inline links inside running copy: gold hairline underline */
p.body a, p.lede a, .article-body p a, .article-body li a, .narrow p a, .narrow-c p a { color: var(--navy); border-bottom: 1px solid var(--gold); padding-bottom: 1px; }
p.body a:hover, p.lede a:hover, .article-body p a:hover, .article-body li a:hover, .narrow p a:hover, .narrow-c p a:hover { color: var(--gold-ink); }

/* h3 subheads in plain prose sections (disclosures, long-form) */
.narrow h3, .narrow-c h3 { font-size: 1.2rem; margin: 32px 0 10px; }

/* the single decorative gold rule — one per screen, when no other gold anchor */
.rule-gold { width: 60px; height: 3px; background: var(--gold); border: 0; margin: 0 0 24px; }
.center .rule-gold { margin-inline: auto; }

/* ---- skip link + prototype banner ---- */
.skip { position: absolute; left: 12px; top: -48px; background: var(--navy); color: var(--cream); padding: 10px 16px; z-index: 100; transition: top .15s; }
.skip:focus { top: 10px; }
.proto { font-size: 12.5px; color: var(--slate); padding: 12px 44px; letter-spacing: 0.02em; border-bottom: 1px solid var(--hair); }
.proto strong { color: var(--navy); }
.proto a { color: var(--gold-ink); border-bottom: 1px solid var(--gold); }
@media (max-width: 640px) { .proto { padding: 12px 22px; } }

/* ---- header + primary nav ---- */
.site-head { position: sticky; top: 0; background: var(--cream); z-index: 40; border-bottom: 1px solid var(--hair); }
/* the header runs wider than the body column so the nav has room to breathe */
.site-head .wrap { max-width: 1660px; padding-inline: clamp(24px, 3.4vw, 64px); }
.site-head .bar { display: flex; align-items: center; justify-content: space-between; gap: clamp(18px, 2.4vw, 44px); padding: 16px 0; flex-wrap: nowrap; }
/* header items never break mid-label — the bar stays one row until the mobile menu takes over */
.site-head .nav-link, .site-head .nav-login, .site-head .btn { white-space: nowrap; }
.brand { display: block; flex: 0 0 auto; line-height: 0; }
/* Logo enlarged 2026-08-11 on Randy's instruction ("bigger and bolder"). The wordmark is a raster
   asset whose ink is already exactly brand navy #0A2342 at full opacity, so there is no contrast
   headroom — weight here comes from size. Native art is 899x298, so even the 84px cap renders at
   about a third of native and stays sharp. If the header ever stops fitting on one row, raise the
   1200px breakpoint rather than shrinking this back. */
.brand img { display: block; width: auto; height: clamp(52px, 5vw, 84px); }

.nav-primary { display: flex; align-items: center; gap: clamp(15px, 1.75vw, 26px); list-style: none; margin: 0; padding: 0; }
.nav-item { position: relative; }
.nav-link { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; color: var(--navy); padding: 8px 0; border-bottom: 2px solid transparent; }
.nav-link:hover, .nav-link.active { color: var(--gold-ink); }
.nav-link.active { border-bottom-color: var(--gold); }
.caret { width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); }

.dropdown { position: absolute; top: 100%; left: -18px; min-width: 300px; background: var(--cream); border: 1px solid var(--hair); list-style: none; margin: 0; padding: 8px 0; display: none; z-index: 50; }
.nav-item.has-dropdown:hover > .dropdown,
.nav-item.has-dropdown:focus-within > .dropdown,
.dropdown.open { display: block; }
.dropdown a { display: block; padding: 10px 18px; font-size: 14.5px; color: var(--navy); }
.dropdown a small { display: block; font-size: 12.5px; color: var(--slate); margin-top: 1px; }
.dropdown a:hover, .dropdown a:focus-visible { background: var(--warm); color: var(--gold-ink); }

.nav-utility { display: flex; align-items: center; gap: clamp(12px, 1.3vw, 20px); flex: 0 0 auto; }
.nav-login { font-size: 14.5px; font-weight: 500; color: var(--navy); border-bottom: 2px solid var(--gold); padding-bottom: 2px; }
.nav-login:hover { color: var(--gold-ink); }

.nav-toggle { display: none; background: none; border: 1px solid var(--hair); width: 44px; height: 44px; padding: 0; cursor: pointer; }
.nav-toggle span { display: block; width: 20px; height: 2px; background: var(--navy); margin: 4px auto; }
.mobile-cta { display: none; }

/* ---- buttons + text links ---- */
/* .btn is the ONE rounded element besides imagery */
.btn { display: inline-flex; align-items: center; gap: 9px; font-family: 'Work Sans', sans-serif; font-size: 15px; font-weight: 600; padding: 12px 24px; background: var(--navy); color: var(--cream); border: 1px solid var(--navy); border-radius: var(--radius); cursor: pointer; }
.btn:hover { background: var(--navy-2); }
.btn .arrow { color: var(--gold); }
/* quiet secondary action: square, hairline — deliberately NOT rounded */
.btn-line { display: inline-flex; align-items: center; gap: 9px; font-family: 'Work Sans', sans-serif; font-size: 15px; font-weight: 600; padding: 12px 24px; background: transparent; color: var(--navy); border: 1px solid var(--navy); cursor: pointer; }
.btn-line:hover { background: var(--warm); color: var(--navy); }
.btn-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.btn-row.center { justify-content: center; }

.tlink { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; font-size: 15px; color: var(--navy); border-bottom: 2px solid var(--gold); padding-bottom: 3px; }
.tlink .ar { color: var(--gold-ink); transition: transform .2s ease; }
.tlink:hover .ar { transform: translateX(5px); }

/* ---- breadcrumb ---- */
.crumbs { font-size: 13px; color: var(--slate); margin: 0 0 18px; }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.crumbs li + li::before { content: "/"; color: var(--hair); margin-right: 8px; }
.crumbs a { color: var(--slate); border-bottom: 1px solid var(--hair); }
.crumbs a:hover { color: var(--gold-ink); border-bottom-color: var(--gold); }

/* ---- interior page head: left-aligned, hairline seam, roomy ---- */
.page-head { padding: 64px 0 58px; }
.page-head h1 { font-size: clamp(2.2rem, 4.6vw, 3.4rem); max-width: 20ch; margin: 14px 0 18px; }
.page-head .lede { font-size: 1.18rem; color: var(--slate); max-width: 54ch; margin-bottom: 28px; }
.page-head .btn-row { margin-top: 4px; }

/* Three page heads carry a .lede AND .body paragraphs under it: Advisor
   Partnerships, Who We Serve, In the Press. `.sec .body` never reaches inside a
   .page-head, so those paragraphs have no measure at all and run the full wrap,
   while the .lede directly above them stops at 54ch -- one block, two widths,
   and the .lede reads as truncated beside them. Randy chose to widen rather
   than cap, 2026-09-22. `is-wide` is opt-in so the page heads that carry a
   .lede alone -- most of the site, and all of it signed off -- do not move. */
.page-head.is-wide .lede { max-width: none; }


/* ---- home hero: asymmetric photo-left (the committed hero) ---- */
.hero { padding: 70px 0; }
.hero .grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }
.hero .photo img { aspect-ratio: 4/5; }
.hero h1 { font-size: clamp(2.4rem, 5vw, 4rem); margin: 18px 0 20px; max-width: 15ch; }
.hero .lede { font-size: 1.18rem; color: var(--slate); max-width: 44ch; margin-bottom: 28px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }
@media (max-width: 860px) { .hero .grid { grid-template-columns: 1fr; gap: 30px; } .hero .photo { order: 2; } .hero .photo img { aspect-ratio: 16/10; } }

/* ---- interior page head, opening on a photograph -------------------------
   Round 4: Option A adopts Option C's opening frame and nothing else of C.
   The brief was that clicking onto a page should put you in front of an image
   immediately, while everything below the title stays A's document layout --
   its splits, its band alternation, its inline photography.

   The one thing A cannot do that C does is BORROW the page's body photograph
   for the frame. C consumes it and then runs that section as type only; A is
   keeping its body intact, so a borrowed frame would show the same scene twice
   inside a screen of scrolling. Every hero here is a scene no other page uses,
   which preserves the shot list's own invariant: each photograph appears
   exactly once across the site.

   Only the eyebrow and the title sit on the picture. The standfirst lands on
   paper below it, for the reason option-c.css sets out at length: several page
   heads in the approved copy run long, and long copy climbs out of the dark
   foot of the scrim into the bright part of the frame, where cream type fails.
   Splitting the head keeps the photograph a photograph. */
/* The frame and the scrim are siblings stacked in one grid cell rather than
   the scrim being nested inside the figure, and that is a constraint from the
   variant build rather than a stylistic choice: _tools/variant_model.py lifts
   a whole `figure.photo` out as an opaque block, so anything inside the figure
   is invisible to Options B and C. Nesting the title there would have dropped
   the h1 from both variants and silently reprinted it inside B's image band. */
.is-bleed {
  padding: 0 0 clamp(34px, 4vw, 52px);
  display: grid; grid-template-columns: minmax(0, 1fr);
}
.is-bleed .ph-frame {
  grid-area: 1 / 1;
  position: relative;
  margin: 0;
  /* Shorter than C's 50vw. C opens at up to 900px because the full-bleed
     frame IS C's architecture and the page is a sequence of them; in A the
     frame is an overture to a document, and at C's height it stopped reading
     as an opening and started reading as the page. Sized off the width so one
     2:1 source serves every screen, capped at 62vh so it cannot eat a short
     laptop screen whole, floored at 340px so the title still has room. */
  min-height: min(clamp(430px, 50vw, 900px), 86vh);
  background: var(--navy);
  overflow: hidden;
}
.is-bleed .ph-frame > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 0;
}
/* Atmosphere, not legibility: settles the frame against the cream below it. */
.is-bleed .ph-frame::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top,
              rgba(10, 35, 66, 0.28) 0%,
              rgba(10, 35, 66, 0.18) 55%,
              rgba(10, 35, 66, 0.14) 100%);
}
/* Legibility, and attached to the copy rather than to the frame so its height
   follows the title rather than guessing at it. The 0.70 / 0.64 stops are
   option-c.css's, carried over unchanged and for the same reason -- they were
   SOLVED against a white frame with cream type, not sampled off the delivered
   images, so they hold for photography nobody has taken yet. Do not re-reason
   these numbers; re-measure them with _tools/check_contrast.py, which now
   samples Option A as well as Option C. */
.is-bleed .ph-scrim {
  grid-area: 1 / 1; align-self: end;
  position: relative; width: 100%; z-index: 2;
}
.is-bleed .ph-scrim::before {
  content: "";
  position: absolute; inset: -64px 0 -1px;
  background: linear-gradient(to top,
              rgba(10, 35, 66, 0.70) 0%,
              rgba(10, 35, 66, 0.64) 82%,
              rgba(10, 35, 66, 0) 100%);
}
/* width:100% is load-bearing on a flex child: .wrap takes its width from
   max-width plus auto margins, which a flex item ignores in favour of
   shrink-to-fit, and the title then drifts to the middle of the frame. */
.is-bleed .ph-scrim > .wrap {
  position: relative; z-index: 1; width: 100%;
  padding-block: clamp(38px, 5vw, 66px);
}
.is-bleed .ph-copy { max-width: 40ch; }
/* Cream, not gold, and this is the only place in Option A where the gold
   thread gives way. Gold measures about 2.4:1 on a bright frame and needs the
   scrim near 0.90 to clear AA, at which point there is no photograph left --
   the state that was rejected in C. Cream clears the same bar at 0.66. Gold
   keeps the eyebrow on every page that opens on paper, which is most of them. */
.is-bleed .ph-copy .eyebrow,
.is-bleed .ph-copy h1 { color: var(--cream); }
.is-bleed .ph-copy h1 { margin: 14px 0 0; }
.is-bleed .ph-copy .crumbs,
.is-bleed .ph-copy .crumbs a { color: rgba(246, 241, 231, 0.82); }
.is-bleed .ph-copy .crumbs a { border-bottom-color: rgba(246, 241, 231, 0.4); }
.is-bleed .ph-copy .crumbs a:hover { color: var(--cream); border-bottom-color: var(--cream); }
.is-bleed .ph-copy .crumbs li + li::before { color: rgba(246, 241, 231, 0.45); }
/* The credit rides in the frame's corner rather than under it, so the picture
   stays edge to edge. Same wording and same stand-in badge as A's inline
   figures -- the badge is a compliance affordance, not decoration, so it does
   not get dropped just because the frame got bigger. */
.is-bleed .ph-credit {
  position: absolute; right: 0; bottom: 0; z-index: 3;
  display: flex; align-items: center; gap: 10px;
  margin: 0; padding: 10px 16px;
  font-size: 12px; color: rgba(246, 241, 231, 0.9);
}
.is-bleed .ph-credit .standin { border-color: rgba(196, 162, 76, 0.75); color: rgba(246, 241, 231, 0.92); }
/* width:100% for the same reason .ph-scrim > .wrap needs it: .wrap sizes
   itself from max-width plus auto margins, and a grid item with auto margins
   shrinks to fit its contents instead. Without this the standfirst set its own
   column width and then centred it, so the title held the page grid and the
   sentence beneath it floated 220px to the right of the title's left edge. */
.is-bleed > .wrap { grid-area: 2 / 1; width: 100%; padding-top: clamp(30px, 3.6vw, 46px); }
/* Only when it is the last thing in the head. Who We Serve follows its
   standfirst with three body paragraphs and a button, and zeroing the
   margin unconditionally ran the first of them straight into it. */
.is-bleed .lede:last-child { margin-bottom: 0; }

/* There is deliberately no type-only variant of this frame.
   Round 4 gave the seven pages with no photograph a navy band at the frame's
   proportions, so the site would not open two different ways. It read as more
   out of place than the plain cream head it replaced -- a band of flat colour
   where a picture belongs announces the missing picture, where the reviewed
   page head simply opens the page. So those seven went back to `.page-head`
   unchanged, and the rule is now the simpler one: a page opens on a
   photograph if it has one, and on its page head if it does not.

   Contact and Advisor Partnerships become `.is-bleed` when s22-office-entrance
   and s23-advisors-talking are shot. Nothing else is waiting on photography. */

/* On a phone a vw-driven frame is taller than it is wide, so both variants
   drop to a fixed band. */
@media (max-width: 700px) {
  .is-bleed .ph-frame { min-height: 340px; }
  /* The credit moves to the top corner rather than the bottom one. The title
     is bottom-aligned and at this width runs to two or three lines, so a
     bottom-right credit sat on top of it -- "Durable Portfolios" and "Built to
     hold through more than one kind of weather" printed over each other. The
     frame is empty at the top on every page, so that is where it goes. */
  .is-bleed .ph-credit {
    top: 0; bottom: auto;
    font-size: 11px; padding: 8px 12px;
  }
}

/* ---- stats: hairline row, Lora figures ---- */
.stats { display: flex; flex-wrap: wrap; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.stats .s { padding: 24px 40px 24px 0; margin-right: 40px; border-right: 1px solid var(--hair); }
.stats .s:last-child { border-right: 0; margin-right: 0; }
.stats .fig { font-family: 'Lora', serif; font-weight: 600; font-size: 1.9rem; color: var(--navy); }
.stats .cap { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate); margin-top: 4px; max-width: 26ch; }
@media (max-width: 620px) { .stats .s { padding: 18px 22px 18px 0; margin-right: 22px; } }
/* The AUM figure is the one statistic that is only true on a date, so it wears
   an asterisk and the date sits under the rule. Kept as real text rather than a
   ::after so it survives copy-paste into a compliance review. */
.stats .fig-star { font-size: 0.62em; vertical-align: super; line-height: 0; color: var(--gold-ink); margin-left: 1px; }
.stats-note { font-size: 12.5px; color: var(--slate); margin: 10px 0 0; }

/* ---- imagery: the 8px radius lives here (on the img, so captions clear it) ----
   height:auto is required so the CSS aspect-ratio wins over each <img>'s HTML
   height attribute; without it the box takes the literal height px and the
   photo is cropped to a wrong, too-tall shape. */
.photo { margin: 0; }
.photo img { width: 100%; height: auto; object-fit: cover; display: block; border-radius: var(--radius); }
.figcap { font-size: 12.5px; color: var(--slate); margin-top: 10px; display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.standin { border: 1px solid var(--gold); padding: 1px 8px; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold-ink); }

/* ---- two-column split ---- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 54px; align-items: center; }
.split.rev > .photo, .split.rev > figure { order: 2; }
.split .photo img { aspect-ratio: 5/4; }
.split.top { align-items: start; }
@media (max-width: 820px) { .split { grid-template-columns: 1fr; gap: 28px; } .split.rev > .photo, .split.rev > figure { order: 0; } }

/* ---- trio: numbered hairline columns (never a card grid) ---- */
.trio { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 40px; border-top: 1px solid var(--hair); }
.trio .col { padding: 30px 30px 30px 0; border-right: 1px solid var(--hair); }
.trio .col:last-child { border-right: 0; padding-right: 0; }
.trio .n { font-family: 'Lora', serif; color: var(--gold-ink); font-size: 1.6rem; }
.trio .k { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; color: var(--gold-ink); }
.trio .col h3 { font-size: 1.25rem; margin: 10px 0 8px; }
.trio .col p { color: var(--slate); font-size: 0.98rem; margin: 0; }
@media (max-width: 780px) { .trio { grid-template-columns: 1fr; } .trio .col { border-right: 0; border-bottom: 1px solid var(--hair); padding: 26px 0; } .trio .col:last-child { border-bottom: 0; } }

/* ---- numbered row list (doors / audiences / indexes) ---- */
.rlist { border-top: 1px solid var(--hair); margin-top: 20px; }
.rrow { display: grid; grid-template-columns: 60px 1fr auto; gap: 24px; padding: 26px 0; border-bottom: 1px solid var(--hair); align-items: baseline; color: var(--navy); }
.rrow .n { font-family: 'Lora', serif; color: var(--gold-ink); font-size: 1.4rem; }
.rrow h3 { font-size: 1.4rem; }
.rrow p { margin: 6px 0 0; color: var(--slate); max-width: 56ch; }
.rrow .ar { color: var(--gold-ink); align-self: center; font-size: 22px; }
a.rrow:hover h3 { color: var(--gold-ink); }
@media (max-width: 620px) { .rrow { grid-template-columns: 40px 1fr; } .rrow .ar { display: none; } }

/* ---- hairline definition lists ---- */
.svc { list-style: none; margin: 34px 0 0; padding: 0; border-top: 1px solid var(--hair); max-width: 760px; }
.svc li { padding: 16px 0; border-bottom: 1px solid var(--hair); color: var(--navy); font-size: 1.08rem; }
.svc li b { font-weight: 600; }
.svc li span { color: var(--slate); }
.svc li a { border-bottom: 2px solid var(--gold); padding-bottom: 2px; }
.svc li a:hover { color: var(--gold-ink); }

/* check-list: square gold tick, hairline rows */
.ticks { list-style: none; margin: 24px 0 0; padding: 0; }
.ticks li { position: relative; padding: 12px 0 12px 30px; border-bottom: 1px solid var(--hair); color: var(--slate); font-size: 1rem; }
.ticks li:first-child { border-top: 1px solid var(--hair); }
.ticks li::before { content: ""; position: absolute; left: 2px; top: 1.35em; width: 12px; height: 3px; background: var(--gold); }
.ticks li b, .ticks li strong { color: var(--navy); font-weight: 600; }

/* ---- pull quote: warm band, gold rule, Lora italic ---- */
.quote { text-align: center; }
.quote figure { margin: 0 auto; max-width: 44ch; }
.quote .rule-gold { margin: 0 auto 24px; }
.quote blockquote { margin: 0; font-family: 'Lora', serif; font-weight: 500; font-style: italic; font-size: clamp(1.6rem, 3.4vw, 2.4rem); line-height: 1.25; color: var(--navy); }
.quote figcaption { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--slate); margin-top: 22px; }
/* A firm statement in the pull-quote slot. Roman, not italic, and not a
   <blockquote> -- because nothing here was said by anybody. Version B needed a
   callout in this position whose sentence has no approved speaker, and an
   italic blockquote with no attribution reads as a quotation someone forgot to
   credit. See "PROPOSED CALLOUT - ATTRIBUTION REQUIRED" in the Version B brief. */
.quote .statement { margin: 0; font-family: 'Lora', serif; font-weight: 500; font-size: clamp(1.45rem, 3vw, 2.05rem); line-height: 1.3; color: var(--navy); }

/* ---- numbered steps (process) ---- */
.steps { list-style: none; margin: 36px 0 0; padding: 0; counter-reset: step; max-width: 760px; }
.steps .step { counter-increment: step; position: relative; padding: 26px 0 26px 84px; border-top: 1px solid var(--hair); }
.steps .step:last-child { border-bottom: 1px solid var(--hair); }
.steps .step::before { content: counter(step, decimal-leading-zero); position: absolute; left: 0; top: 24px; font-family: 'Lora', serif; font-size: 1.6rem; color: var(--gold-ink); }
.steps .step h3, .steps .step h4 { font-size: 1.25rem; margin-bottom: 6px; }
.steps .step p { color: var(--slate); margin-bottom: 0; }
.steps .step .ticks { max-width: 620px; }
@media (max-width: 560px) { .steps .step { padding-left: 56px; } }

/* ---- compare: two hairline panels, gold seam marks the Montis way ---- */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--hair); margin-top: 36px; }
.compare .neg, .compare .pos { padding: 34px 36px; }
.compare .neg { border-right: 1px solid var(--hair); }
.compare .pos { background: var(--warm); border-top: 3px solid var(--gold); margin-top: -1px; }
.compare .neg .k { color: var(--slate); }
.compare .pos .k { color: var(--gold-ink); }
.compare .k { display: block; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; margin-bottom: 10px; }
.compare h3 { font-size: 1.2rem; margin-bottom: 14px; }
.compare ul { list-style: none; margin: 0; padding: 0; }
.compare li { padding: 9px 0; border-bottom: 1px solid var(--hair); color: var(--slate); font-size: 0.98rem; }
.compare li:last-child { border-bottom: 0; }
.compare li b, .compare li strong { color: var(--navy); }
@media (max-width: 760px) { .compare { grid-template-columns: 1fr; } .compare .neg { border-right: 0; border-bottom: 1px solid var(--hair); } .compare .pos { border-top: 3px solid var(--gold); } }

/* ---- tiles: hairline-gap grid (the disciplined "card") ---- */
/* content boxes read as separate cards with a visible border (per review) */
.tiles { display: grid; gap: 20px; margin-top: 36px; }
.tiles.cols-2 { grid-template-columns: repeat(2, 1fr); }
.tiles.cols-3 { grid-template-columns: repeat(3, 1fr); }
.tiles.cols-4 { grid-template-columns: repeat(4, 1fr); }
.tile { background: var(--cream); border: 2px solid var(--rule); padding: 28px; display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
.warm-band .tile { background: var(--warm); }
a.tile:hover { border-color: var(--gold); }
.tile .k { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; color: var(--gold-ink); margin-bottom: 12px; }
.tile h3 { font-size: 1.25rem; margin-bottom: 8px; }
.tile p { color: var(--slate); font-size: 0.98rem; margin-bottom: 0; }
.tile p + p, .tile .tlink { margin-top: 14px; }
.tile .btn, .tile .btn-line { margin-top: 18px; }
a.tile:hover h3 { color: var(--gold-ink); }
@media (max-width: 900px) { .tiles.cols-3, .tiles.cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .tiles.cols-2, .tiles.cols-3, .tiles.cols-4 { grid-template-columns: 1fr; } }

/* ---- people ---- */
.people { display: grid; grid-template-columns: repeat(4, 1fr); gap: 34px 28px; margin-top: 40px; }
.person .ini { aspect-ratio: 4/5; background: var(--warm); border: 1px solid var(--hair); display: flex; align-items: center; justify-content: center; font-family: 'Lora', serif; font-size: 2.6rem; font-weight: 500; color: var(--navy); }
.warm-band .person .ini { background: var(--cream); }
.person h3 { font-size: 1.15rem; margin: 14px 0 2px; }
.person .role { font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold-ink); font-weight: 600; }
.person p { color: var(--slate); font-size: 0.95rem; margin: 8px 0 0; }
@media (max-width: 980px) { .people { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .people { grid-template-columns: 1fr; } }

/* real headshots: person card links to a bio page */
a.person { color: inherit; display: block; }
.person .photo { margin-bottom: 14px; }
.person .photo img { aspect-ratio: 5/7; }
.person .role { min-height: 2.5em; }
.person .tlink { font-size: 13.5px; margin-top: 10px; border-bottom-width: 2px; }
a.person:hover h3, a.person:hover .tlink { color: var(--gold-ink); }

/* bio page: portrait + prose */
.bio-split { grid-template-columns: 0.72fr 1fr; align-items: start; column-gap: 60px; }
.bio-split .photo img { aspect-ratio: 5/7; }
.bio-split .body { max-width: 62ch; }
.bio-split .body:first-child { margin-top: 0; }
@media (max-width: 820px) { .bio-split { grid-template-columns: 1fr; } .bio-split .photo { max-width: 320px; } }

/* ---- data table ---- */
.tbl-wrap { overflow-x: auto; margin-top: 30px; border: 1px solid var(--hair); }
table.data { width: 100%; border-collapse: collapse; font-size: 0.98rem; min-width: 420px; }
table.data th { font-family: 'Work Sans', sans-serif; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; color: var(--gold-ink); text-align: left; padding: 14px 20px; background: var(--warm); border-bottom: 1px solid var(--hair); }
.warm-band table.data th { background: var(--cream); }
table.data td { padding: 14px 20px; border-bottom: 1px solid var(--hair); color: var(--slate); }
table.data td:first-child { color: var(--navy); font-weight: 500; }
table.data tr:last-child td { border-bottom: 0; }

/* ---- fee panel ---- */
.fee-panel { border: 1px solid var(--hair); border-top: 3px solid var(--gold); background: var(--warm); padding: 36px; max-width: 420px; }
.sec.warm-band .fee-panel { background: var(--cream); }
.fee-panel .k { display: block; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; color: var(--gold-ink); margin-bottom: 14px; }
.fee-panel .amt { font-family: 'Lora', serif; font-weight: 600; font-size: 3rem; color: var(--navy); line-height: 1; }
.fee-panel p { color: var(--slate); font-size: 0.95rem; margin: 14px 0 0; }

/* ---- note box (prototype/compliance callouts) ---- */
.note-box { border: 1px solid var(--hair); background: var(--warm); padding: 22px 26px; margin-top: 34px; max-width: 760px; }
.sec.warm-band .note-box { background: var(--cream); }
.note-box .k { display: block; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; color: var(--gold-ink); margin-bottom: 8px; }
.note-box p { font-size: 0.92rem; color: var(--slate); margin: 0; }
.note-box a { border-bottom: 1px solid var(--gold); color: var(--navy); }
.note-box a:hover { color: var(--gold-ink); }

/* ---- chips ---- */
.chip { display: inline-block; border: 1px solid var(--gold); padding: 2px 10px; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; color: var(--gold-ink); }

/* ---- posts (articles/insights) ---- */
.posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px 28px; margin-top: 40px; }
.post { display: block; color: var(--navy); }
.post .photo { margin-bottom: 16px; }
.post .photo img { aspect-ratio: 16/9; }
.post .chip { margin-bottom: 10px; }
.post h3 { font-size: 1.25rem; line-height: 1.25; }
.post p { color: var(--slate); font-size: 0.95rem; margin: 8px 0 0; }
.post .date { display: block; font-size: 13px; color: var(--slate); margin-top: 10px; }
.post:hover h3 { color: var(--gold-ink); }
@media (max-width: 900px) { .posts { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .posts { grid-template-columns: 1fr; } }

/* index rows for insights (title + date, hairline) */
.more { border-top: 1px solid var(--hair); margin-top: 30px; }
.more a { display: grid; grid-template-columns: 1fr auto; gap: 20px; padding: 26px 0; border-bottom: 1px solid var(--hair); align-items: baseline; color: var(--navy); }
.more .cat { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-ink); font-weight: 600; display: block; margin-bottom: 8px; }
.more h3 { font-size: 1.35rem; }
.more p { color: var(--slate); font-size: 0.95rem; margin: 6px 0 0; max-width: 62ch; }
.more .date { color: var(--slate); font-size: 13px; white-space: nowrap; }
.more a:hover h3 { color: var(--gold-ink); }
@media (max-width: 600px) { .more a { grid-template-columns: 1fr; gap: 4px; } }

/* ---- video ---- */
.vthumb { position: relative; display: block; width: 100%; aspect-ratio: 16/9; background: var(--navy); border-radius: var(--radius); overflow: hidden; cursor: pointer; border: 0; padding: 0; }
.vthumb .vt-title { position: absolute; left: 22px; bottom: 20px; right: 90px; text-align: left; font-family: 'Lora', serif; font-weight: 500; font-size: 1.1rem; color: var(--cream); line-height: 1.3; }
.vthumb .play { position: absolute; left: 22px; top: 20px; width: 44px; height: 44px; border: 1px solid var(--gold); color: var(--cream); display: flex; align-items: center; justify-content: center; font-size: 15px; }
.vthumb .dur { position: absolute; right: 16px; bottom: 16px; font-size: 12px; letter-spacing: 0.06em; color: var(--cream); border: 1px solid rgba(246, 241, 231, 0.45); padding: 2px 8px; }
.vthumb:hover .play, .vthumb:focus-visible .play { background: var(--gold); color: var(--navy); }
/* a real broadcast still sits behind the play affordance; the navy scrim keeps
   the overlaid title and play button readable over any frame */
.vthumb.has-still img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vthumb.has-still::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10, 35, 66, 0.94) 0%, rgba(10, 35, 66, 0.72) 26%, rgba(10, 35, 66, 0.30) 58%, rgba(10, 35, 66, 0.36) 100%); }
.vthumb.has-still .play, .vthumb.has-still .vt-title, .vthumb.has-still .dur { z-index: 2; }

.video-feature { display: grid; grid-template-columns: 1.1fr 1fr; gap: 54px; align-items: center; }
@media (max-width: 820px) { .video-feature { grid-template-columns: 1fr; gap: 28px; } }

.video-filter { display: flex; flex-wrap: wrap; gap: 10px; margin: 30px 0 0; }
.video-filter button { font-family: 'Work Sans', sans-serif; font-size: 13.5px; font-weight: 600; letter-spacing: 0.04em; padding: 9px 18px; background: transparent; color: var(--navy); border: 1px solid var(--hair); cursor: pointer; }
.video-filter button:hover { border-color: var(--navy); }
.video-filter button.active { background: var(--navy); color: var(--cream); border-color: var(--navy); }

.video-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px 28px; margin-top: 34px; }
.video-card { display: flex; flex-direction: column; align-items: flex-start; background: none; border: 0; padding: 0; text-align: left; font: inherit; color: var(--navy); cursor: pointer; }
.video-card .vthumb { margin-bottom: 14px; }
.video-card .chip { margin-bottom: 10px; }
.video-card h3 { font-size: 1.15rem; line-height: 1.3; }
.video-card p { color: var(--slate); font-size: 0.95rem; margin: 8px 0 0; }
.video-card .date { font-size: 13px; color: var(--slate); margin-top: 10px; }
.video-card:hover h3 { color: var(--gold-ink); }
.video-card.is-hidden { display: none; }
.person.is-hidden { display: none; }
.team-filter { margin: 6px 0 0; }
/* people who sit in more than one department carry a small tag for each */
.person-depts { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.dept-tag { font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; color: var(--gold-ink); border: 1px solid var(--hair); padding: 2px 7px; }
@media (max-width: 900px) { .video-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .video-grid { grid-template-columns: 1fr; } }

/* ---- three-generations comparison: separate boxes, ticked traits, Montis highlighted ---- */
.gen-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 36px; align-items: start; }
.gen { background: var(--cream); border: 2px solid var(--rule); padding: 28px 26px; height: 100%; }
.warm-band .gen { background: var(--warm); }
.gen .k { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; color: var(--slate); margin: 0 0 8px; }
.gen h3 { font-size: 1.25rem; margin-bottom: 12px; }
.gen > p { color: var(--slate); font-size: 0.97rem; }
.marks { list-style: none; margin: 18px 0 0; padding: 18px 0 0; border-top: 1px solid var(--hair); }
.marks li { position: relative; padding: 7px 0 7px 26px; font-size: 0.94rem; color: var(--slate); }
.marks li::before { position: absolute; left: 0; top: 7px; font-weight: 700; }
.marks li.yes::before { content: "\2713"; color: var(--gold-ink); }
.marks li.no::before { content: "\2715"; color: #9B3B2F; }
/* the Montis box is deliberately the odd one out */
.gen.is-montis { background: var(--navy); border-color: var(--navy); }
.gen.is-montis .k { color: var(--gold); }
.gen.is-montis h3 { color: var(--cream); }
.gen.is-montis > p { color: rgba(246, 241, 231, 0.82); }
.gen.is-montis .marks { border-top-color: rgba(246, 241, 231, 0.25); }
.gen.is-montis .marks li { color: rgba(246, 241, 231, 0.9); }
.gen.is-montis .marks li.yes::before { color: var(--gold); }
@media (max-width: 900px) { .gen-grid { grid-template-columns: 1fr; } }

/* ---- quarterly report, as a page ---- */
.nl-body > * + * { margin-top: 20px; }
.nl-body h2 { font-size: 1.5rem; margin: 46px 0 0; }
.nl-bullets { list-style: none; margin: 0; padding: 0; }
.nl-bullets li { position: relative; padding: 10px 0 10px 26px; border-bottom: 1px solid var(--hair); color: var(--slate); }
.nl-bullets li:first-child { border-top: 1px solid var(--hair); }
.nl-bullets li::before { content: ""; position: absolute; left: 2px; top: 1.15em; width: 10px; height: 2px; background: var(--gold); }
.tbl-wrap { overflow-x: auto; margin-top: 26px; }
.tbl { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.tbl th, .tbl td { text-align: right; padding: 11px 12px; border-bottom: 1px solid var(--hair); white-space: nowrap; }
.tbl thead th { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-ink); font-weight: 600; border-bottom: 1px solid var(--navy); }
.tbl th[scope="row"], .tbl thead th:first-child { text-align: left; white-space: normal; font-weight: 500; color: var(--navy); }
.tbl tbody tr:hover { background: var(--warm); }
.warm-band .tbl tbody tr:hover { background: var(--cream); }
.tbl-src { font-size: 12.5px; color: var(--slate); margin-top: 8px; }
.nl-fig { margin: 34px 0; }
.nl-fig img { width: 100%; height: auto; border: 1px solid var(--hair); border-radius: var(--radius); }
.nl-fig figcaption { font-size: 12.5px; color: var(--slate); margin-top: 8px; }
.nl-quote { font-family: 'Lora', serif; font-size: 1.35rem; line-height: 1.5; color: var(--navy); border-left: 3px solid var(--gold); padding: 4px 0 4px 24px; margin: 34px 0; }
.nl-sign { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--hair); font-weight: 600; color: var(--navy); }
.nl-sign span { display: block; font-weight: 400; font-size: 0.92rem; color: var(--slate); margin-top: 2px; }
.nl-disc { margin-top: 44px; border-top: 1px solid var(--hair); padding-top: 18px; }
.nl-disc summary { cursor: pointer; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; color: var(--gold-ink); }
.nl-disc p { font-size: 12.5px; line-height: 1.7; color: var(--slate); margin-top: 14px; }

/* ---- quarterly newsletter archive ---- */
.nl-latest { margin-top: 34px; }
.nl-h { font-size: 1.15rem; margin: 44px 0 0; }
.nl-list { margin-top: 14px; border-top: 1px solid var(--hair); }
.nl-row { display: grid; grid-template-columns: 78px 1fr auto; gap: 20px; align-items: baseline; padding: 15px 0; border-bottom: 1px solid var(--hair); color: var(--navy); }
.nl-row:hover { background: var(--warm); }
.warm-band .nl-row:hover { background: var(--cream); }
.nl-row .nl-q { font-family: 'Lora', serif; font-size: 1rem; color: var(--gold-ink); }
.nl-row .nl-t { font-size: 1rem; }
.nl-row:hover .nl-t { color: var(--gold-ink); }
.nl-row .nl-d { font-size: 13px; color: var(--slate); white-space: nowrap; }
.tag-pdf { font-size: 10.5px; letter-spacing: 0.08em; font-weight: 600; color: var(--slate); border: 1px solid var(--hair); padding: 1px 6px; margin-left: 8px; vertical-align: 1px; }
@media (max-width: 640px) {
  .nl-row { grid-template-columns: 62px 1fr; }
  .nl-row .nl-d { grid-column: 2; white-space: normal; }
}

/* ---- lightbox ---- */
.lightbox { position: fixed; inset: 0; background: rgba(10, 35, 66, 0.88); display: none; align-items: center; justify-content: center; z-index: 90; padding: 24px; }
.lightbox.open { display: flex; }
.lightbox .panel { background: var(--cream); border: 1px solid var(--hair); max-width: 760px; width: 100%; padding: 44px; position: relative; }
.lightbox .frame { aspect-ratio: 16/9; background: var(--navy); display: flex; align-items: center; justify-content: center; color: var(--cream); font-size: 0.95rem; margin-bottom: 22px; }
/* a real embedded player fills the frame edge to edge */
.lightbox .frame.has-player { display: block; }
.lightbox .frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.lightbox h3 { font-size: 1.4rem; margin-bottom: 6px; }
.lightbox .meta { color: var(--slate); font-size: 0.95rem; }
.lightbox-close { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; background: none; border: 1px solid var(--hair); color: var(--navy); font-size: 18px; cursor: pointer; }
.lightbox-close:hover { border-color: var(--navy); }

/* ---- article ---- */
.article-head { padding: 64px 0 34px; }
.article-head h1 { font-size: clamp(2rem, 4.2vw, 3rem); max-width: 24ch; margin: 16px 0 14px; }
.article-meta { font-size: 14px; color: var(--slate); display: flex; flex-wrap: wrap; gap: 8px 18px; }
.article-body { max-width: 720px; }
.article-body p { color: var(--slate); }
.article-body p strong, .article-body p b { color: var(--navy); }
.article-body h2 { font-size: 1.6rem; margin: 44px 0 14px; }
.article-body h3 { font-size: 1.2rem; margin: 32px 0 10px; }
.article-body blockquote { margin: 34px 0; padding: 4px 0 4px 26px; border-left: 3px solid var(--gold); font-family: 'Lora', serif; font-style: italic; font-size: 1.25rem; color: var(--navy); line-height: 1.5; }
.article-body .drop::first-letter { font-family: 'Lora', serif; font-weight: 600; font-size: 3.4em; float: left; line-height: 0.82; padding: 6px 10px 0 0; color: var(--navy); }
.disclosure-block { border: 1px solid var(--hair); background: var(--warm); padding: 22px 26px; margin-top: 44px; font-size: 0.85rem; line-height: 1.5; color: var(--slate); }
.disclosure-block p { font-size: inherit; color: inherit; margin: 0 0 0.7em; }
.disclosure-block p:last-child { margin-bottom: 0; }
.disclosure-block a { border-bottom: 1px solid var(--gold); color: var(--navy); }
.sec.warm-band .disclosure-block { background: var(--cream); }

/* ---- forms ---- */
.form { display: grid; gap: 18px; }
.form label { display: block; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; color: var(--navy); margin-bottom: 6px; }
.form input, .form select, .form textarea { width: 100%; font: inherit; font-size: 16px; color: var(--navy); background: var(--cream); border: 1px solid var(--hair); padding: 12px 14px; }
.warm-band .form input, .warm-band .form select, .warm-band .form textarea { background: var(--cream); }
.form input:focus-visible, .form select:focus-visible, .form textarea:focus-visible { outline: 2px solid var(--gold-ink); outline-offset: 1px; border-color: var(--gold-ink); }
.form .hint { font-size: 0.85rem; color: var(--slate); margin: 6px 0 0; }
.form .hint a { border-bottom: 1px solid var(--gold); }

/* ---- jump links ---- */
.jump { font-size: 0.98rem; color: var(--slate); }
.jump a { font-weight: 600; color: var(--navy); border-bottom: 2px solid var(--gold); padding-bottom: 2px; margin: 0 6px; white-space: nowrap; }
.jump a:hover { color: var(--gold-ink); }

/* ---- CTA band ---- */
.cta { text-align: center; }
.cta h2 { font-size: clamp(2rem, 4vw, 3rem); max-width: 20ch; margin: 0 auto 16px; }
.cta .lede { color: var(--slate); max-width: 46ch; margin: 0 auto 28px; font-size: 1.15rem; }
.cta .btn-row { justify-content: center; }

/* ---- entry callout (side panel) ---- */
.entry { border: 1px solid var(--hair); border-top: 3px solid var(--gold); background: var(--warm); padding: 34px 36px; }
.sec.warm-band .entry { background: var(--cream); }
.entry .k { display: block; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; color: var(--gold-ink); margin-bottom: 12px; }
.entry h3 { font-size: 1.3rem; margin-bottom: 10px; }
.entry p { color: var(--slate); font-size: 0.98rem; }
.entry .btn, .entry .btn-line { margin-top: 6px; }

/* ---- footer ---- */
.site-foot { border-top: 1px solid var(--hair); background: var(--warm); padding: 54px 0 44px; }
.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.2fr; gap: 30px; }
.foot-brand .nm { font-family: 'Lora', serif; font-weight: 600; font-size: 22px; color: var(--navy); }
.foot-brand p { color: var(--slate); font-size: 0.95rem; max-width: 34ch; margin-top: 12px; }
.foot-h { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-ink); margin: 0 0 14px; font-weight: 600; }
.foot-col ul { list-style: none; margin: 0; padding: 0; }
.foot-col li { margin-bottom: 10px; }
.foot-col a { font-size: 0.95rem; color: var(--navy); }
.foot-col a:hover { color: var(--gold-ink); }
.foot-contact p { font-size: 0.95rem; color: var(--slate); margin: 0 0 10px; }
.foot-contact a { color: var(--navy); border-bottom: 2px solid var(--gold); padding-bottom: 2px; }
.legal { border-top: 1px solid var(--hair); margin-top: 40px; padding-top: 24px; }
.legal p { font-size: 12.5px; color: var(--slate); line-height: 1.7; max-width: 110ch; }
.legal .links { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 14px; align-items: center; }
.legal .links a { font-size: 12.5px; color: var(--navy); font-weight: 500; }
.legal .links a:hover { color: var(--gold-ink); }
.legal .copy { font-size: 12.5px; color: var(--slate); margin-left: auto; }
@media (max-width: 720px) { .foot-grid { grid-template-columns: 1fr 1fr; } .foot-brand { grid-column: 1/3; } .legal .copy { margin-left: 0; width: 100%; margin-top: 8px; } }

/* ---- reveal motion (js-gated; reduced-motion safe) ---- */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } }

/* ---- mobile nav ---- */
/* mid-range laptops: tighten the bar so the full nav still fits on one row */
@media (max-width: 1500px) {
  .site-head .bar { gap: 20px; }
  .nav-primary { gap: 14px; }
  .nav-link { font-size: 14px; }
  .nav-login { font-size: 13.5px; }
  .site-head .btn { font-size: 14px; padding: 11px 18px; }
  .brand img { height: 58px; }
}

@media (max-width: 1200px) {
  .nav-toggle { display: block; }
  .nav-primary { display: none; }
  .nav-utility { display: none; }
  .mobile-cta { display: block; }
  .site-head .bar { flex-wrap: wrap; }
  .nav-primary.open { display: flex; order: 3; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 0; border-top: 1px solid var(--hair); margin-top: 14px; padding-top: 6px; }
  .nav-primary.open .nav-link { display: flex; justify-content: space-between; width: 100%; padding: 13px 0; border-bottom: 1px solid var(--hair); font-size: 1.05rem; }
  .nav-primary.open .dropdown { position: static; min-width: 0; border: 0; border-bottom: 1px solid var(--hair); padding: 0 0 8px; background: transparent; }
  .nav-primary.open .dropdown a { padding: 9px 0 9px 18px; }
  .nav-primary.open .mobile-cta { padding: 16px 0 8px; }
  .nav-item.has-dropdown:hover > .dropdown { display: none; }
  .nav-item.has-dropdown:focus-within > .dropdown { display: none; }
  .nav-primary.open .dropdown.open { display: block; }
}