/* shared/nav-strong.css
 *
 * Also acts as a TYPOGRAPHY + SPACING calm-down layer. Sam: "fonts too big,
 * alignment + spacing fucked". The previous scales (h1 clamp(56,12vw,210),
 * h2 clamp(40,7vw,108), section clamp(72,9vw,144)) were billboard-loud at
 * tablet+ widths and pushy on mobile. New scale is editorial-fund-grade,
 * not magazine-cover.
 *
 * AND a NAV UNIFIER — Sam: "every page navigation is changing and its not
 * at all good". Pages historically used different nav classes (.topbar /
 * .mlh-topbar / .pay-subnav / .nav-tabs / .nav-menu / .crumb). Below we
 * force ALL of them to a single visual specification so the user sees the
 * same bar on every page, regardless of underlying HTML class names.
 */

html {
  scrollbar-gutter: stable;
}

:root {
  --mlh-header-height: 72px;
  --mlh-header-height-mobile: 58px;
}

/* ───────── UNIFIED CAMERON-PORTAL NAV ─────────
 * Containers — every variant gets the same bar height, padding, paper bg,
 * hairline-bottom, sticky behaviour, mono uppercase font scale.
 */
.topbar,
.mlh-topbar,
.pay-subnav {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 100 !important;
  display: flex !important;
  align-items: center !important;
  gap: clamp(0.8rem, 2vw, 2rem) !important;
  height: var(--mlh-header-height) !important;
  min-height: var(--mlh-header-height) !important;
  padding: 0 var(--outer) !important;
  background: var(--paper) !important;
  border-bottom: 1px solid var(--rule) !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
}

/* Inner nav containers — center the menu items */
.topbar .nav-menu,
.mlh-topbar .nav,
.mlh-topbar .crumb,
.mlh-topbar .actions,
.pay-subnav,
.nav-tabs {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: clamp(0.9rem, 1.8vw, 1.8rem) !important;
  align-items: center !important;
  flex: 1 !important;
  justify-content: center !important;
}

/* Brand on the left — Wave 3 (2026-05-10): unified to display serif so the
 * "Modern Lao Homes" wordmark reads identically across cameron, public, and
 * any legacy .topbar/.mlh-topbar pages. */
.topbar .nav-brand,
.mlh-topbar .brand {
  flex: 0 0 auto !important;
  font-family: var(--font-display) !important;
  font-size: clamp(15px, 1.6vw, 18px) !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
  color: var(--ink) !important;
  white-space: nowrap !important;
}

/* Account/sign-out cluster on the right */
.topbar .nav-right,
.mlh-topbar .actions {
  flex: 0 0 auto !important;
  justify-content: flex-end !important;
}
.nav-user {
  font-family: var(--font-mono) !important;
  font-size: 10.5px !important;
  letter-spacing: 0.18em !important;
  color: var(--ink) !important;
}
.nav-signout,
.topbar-signout {
  font-family: var(--font-mono) !important;
  font-size: 10.5px !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: var(--subtle) !important;
  border-bottom: 1px solid var(--gold) !important;
  padding: 0 0 2px !important;
  transition: color 200ms ease, border-color 200ms ease !important;
}
.nav-signout:hover,
.topbar-signout:hover { color: var(--accent) !important; }

/* Mobile <=900px — collapse nav menu, keep brand + sign-out only */
@media (max-width: 900px) {
  .topbar .nav-menu,
  .mlh-topbar .nav,
  .mlh-topbar .crumb,
  .pay-subnav.is-secondary,
  .nav-tabs {
    display: none !important;
  }
  .topbar,
  .mlh-topbar,
  .pay-subnav {
    justify-content: space-between !important;
    height: var(--mlh-header-height-mobile) !important;
    min-height: var(--mlh-header-height-mobile) !important;
    padding: 0 var(--outer) !important;
  }
  /* Show hamburger if present */
  .nav-hamburger { display: inline-flex !important; }
}

/* === END LEGACY NAV UNIFIER === */


/* ═══════════════════════════════════════════════════════════════════════
   CANONICAL .cam-nav — single nav structure used by every cameron page.
   Replaced .topbar / .mlh-topbar / .pay-subnav etc. with one HTML shape.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Header is FIXED, not sticky ──
 * Sam's complaint #1 (2026-05-10): "menu flickering and changes positions
 * moves up and down not fixed". `position: sticky` shifts when ANY parent has
 * overflow or transform — every page-level hero we use either does (clip
 * for parallax) or is `min-height: 86vh` which makes the sticky boundary
 * jump on viewport-height changes (URL bar collapse/expand on mobile).
 *
 * Switching to `position: fixed` eliminates the parent-chain dependency
 * entirely. body padding-top compensates for the now-detached header height.
 */
.cam-nav {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 100 !important;
  display: grid !important;
  grid-template-columns: 240px 660px 306px !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: clamp(1rem, 2vw, 2rem) !important;
  width: 100% !important;
  box-sizing: border-box !important;
  min-height: var(--mlh-header-height) !important;
  height: var(--mlh-header-height) !important;
  padding: 0 var(--outer) !important;
  background: var(--paper) !important;
  border-bottom: 1px solid var(--rule) !important;
}

/* Body padding compensates for fixed header height — but ONLY on pages whose
 * top-of-body header is .cam-nav or .pub-header (both `position: fixed`).
 *
 * Wave 3 fix (2026-05-10): the previous global `body { padding-top: 56px }`
 * pushed the LANDING page's full-bleed dark hero down by 52–56px because
 * `.lp-cover-row` is an OVERLAY inside the hero, NOT a top-of-body fixed bar.
 * Sam saw that as a paper-colored white strip at the top of clients homepage.
 *
 * cam-nav.js now adds `mlh-fixed-nav` to <body> when (and only when) it finds
 * a real top-of-body fixed header. Landing pages don't get the class.
 * To opt out manually, also accept the legacy `no-fixed-pad` class. */
body.mlh-fixed-nav { padding-top: var(--mlh-header-height); }
body:has(> .cam-nav),
body:has(> .pub-header) { padding-top: var(--mlh-header-height); }
@media (max-width: 900px) { body.mlh-fixed-nav { padding-top: var(--mlh-header-height-mobile); } }
@media (max-width: 900px) {
  body:has(> .cam-nav),
  body:has(> .pub-header) { padding-top: var(--mlh-header-height-mobile); }
}
body.mlh-fixed-nav.no-fixed-pad,
body.no-fixed-pad { padding-top: 0; }

/* ── Icon-injection flicker fix ──
 * cam-nav.js injects an <svg> into each [data-nav] link AFTER DOMContentLoaded.
 * Without this placeholder, the link reflows when the SVG arrives — Sam saw
 * the nav jump between page loads. The ::before reserves the icon's slot
 * (matches icon-sm: ~14×12, with an inline gap). Once the JS-injected
 * <svg> is present, :has(svg) collapses the placeholder so the real icon
 * occupies the same space without doubling it. :has() is supported in all
 * modern browsers (2026).
 *
 * Wave 2A (2026-05-10): expanded to all 6 cameron data-nav values now that
 * NAV_ICONS covers overview + proposal too. Sam's complaint #2 was that some
 * menu items had icons and others did not — the placeholder + late-injection
 * pattern made that visible during page load. Now uniform.
 */
.cam-nav .cam-link[data-nav]::before {
  content: none;
}

/* Wordmark — must match .pub-header .pub-wordmark exactly. Sam's Wave 3
 * complaint: cameron pages were rendering the brand in IBM Plex Mono UPPERCASE
 * letter-spaced (looked like a tech caption), public pages used EB Garamond
 * display serif (the actual wordmark treatment used on the landing too).
 * Single source of truth = display serif, mixed case. */
.cam-nav .cam-brand {
  justify-self: start;
  font-family: var(--font-display);
  font-size: clamp(15px, 1.6vw, 18px);
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  transition: color 200ms ease;
}
.cam-nav .cam-brand:hover { color: var(--accent); text-decoration: none; }
/* Cam-nav brand is text-only ("Modern Lao Homes") — no logo image except on landing. */

.cam-nav .cam-menu,
.cam-nav .cam-links {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0;
  align-items: center;
  justify-content: center;
  width: 660px;
  max-width: 100%;
}
.cam-nav .cam-menu a,
.cam-nav .cam-link {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  height: 38px;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--subtle);
  text-decoration: none;
  padding: 10px 8px 9px;
  border-bottom: 2px solid transparent;
  background: transparent;
  transition: color 160ms ease, border-color 160ms ease, background-color 160ms ease;
  white-space: nowrap;
  text-align: center;
  justify-content: center;
}

.cam-nav .cam-link .icon,
.cam-nav .cam-link svg {
  flex: 0 0 14px;
  width: 14px;
  height: 12px;
  margin-right: 0.4em;
}
.cam-nav .cam-menu a:hover,
.cam-nav .cam-link:hover {
  color: var(--ink);
  border-bottom-color: var(--gold);
  background: var(--paper-warm);
  text-decoration: none;
}
.cam-nav .cam-menu a[aria-current="page"],
.cam-nav .cam-link[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--gold);
  font-weight: 600;
  background: linear-gradient(180deg, transparent 0%, transparent 55%, rgba(212, 175, 55, 0.18) 55%, rgba(212, 175, 55, 0.18) 100%);
}

.cam-nav .cam-side {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: clamp(0.6rem, 1vw, 1rem);
  justify-content: flex-end;
  width: 306px;
  min-width: 306px;
  max-width: 306px;
}
.cam-nav .cam-user {
  font-family: var(--font-sans, 'Inter', system-ui, sans-serif);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  white-space: nowrap;
  transition: color 160ms ease, border-color 160ms ease;
}
.cam-nav .cam-user:hover {
  color: var(--ink);
  border-bottom-color: var(--gold);
  text-decoration: none;
}
.cam-nav .cam-user:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
}
.cam-nav .cam-out {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  border: 1px solid var(--ink);
  padding: 8px 14px;
  text-decoration: none;
  transition: color 160ms ease, border-color 160ms ease, background-color 160ms ease;
}

@media (max-width: 1520px) {
  .cam-nav .cam-user {
    display: none;
  }
  .cam-nav .cam-side {
    gap: clamp(0.45rem, 0.8vw, 0.75rem);
  }
}

@media (max-width: 1320px) {
  .cam-nav {
    grid-template-columns: 190px minmax(0, 1fr) 270px !important;
    gap: clamp(0.55rem, 1.2vw, 1rem) !important;
  }
  .cam-nav .cam-menu,
  .cam-nav .cam-links {
    gap: 0;
    width: auto;
  }
  .cam-nav .cam-link,
  .cam-nav .cam-menu a {
    padding-left: 6px;
    padding-right: 6px;
  }
  .cam-nav .cam-side {
    width: 270px;
    min-width: 270px;
    max-width: 270px;
  }
}

/* Cameron first-viewport normalizer.
 * The client pages intentionally have different content, but the opening
 * image/cover height should not jump when the user switches between menu
 * items. Keep document covers pinned to the same header-relative viewport.
 */
.cover,
.contract-cover {
  height: calc(100vh - var(--mlh-header-height)) !important;
  min-height: calc(100vh - var(--mlh-header-height)) !important;
}

.pay-welcome,
.welcome#brief-welcome {
  height: calc(100vh - var(--mlh-header-height)) !important;
  min-height: calc(100vh - var(--mlh-header-height)) !important;
}

.welcome.shell {
  display: grid !important;
  grid-template-columns: minmax(320px, 0.56fr) minmax(360px, 0.44fr) !important;
  gap: clamp(2rem, 6vw, 6rem) !important;
  align-items: end !important;
  height: calc(100vh - var(--mlh-header-height)) !important;
  min-height: calc(100vh - var(--mlh-header-height)) !important;
  padding-top: clamp(3rem, 7vw, 7rem) !important;
  padding-bottom: clamp(2rem, 5vw, 5rem) !important;
}

.welcome.shell > .welcome-copy {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

.welcome.shell > .welcome-banner {
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: stretch !important;
  aspect-ratio: auto !important;
  max-height: none !important;
  min-height: clamp(300px, 38vw, 520px) !important;
  height: 100% !important;
  border-left: 1px solid var(--rule) !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  padding-left: clamp(1rem, 3vw, 2rem) !important;
}

.page-hero {
  aspect-ratio: 21 / 9;
  max-height: min(420px, calc(100vh - var(--mlh-header-height) - 11rem)) !important;
}

main.shell:has(> .page-hero) {
  max-width: min(96rem, 100%);
  display: grid;
  grid-template-columns: minmax(320px, 0.42fr) minmax(420px, 0.58fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  min-height: calc(100vh - var(--mlh-header-height));
  padding-top: clamp(2rem, 4vw, 4rem) !important;
  padding-bottom: clamp(2rem, 4vw, 4rem) !important;
}

main.shell:has(> .sign-welcome) {
  max-width: min(96rem, 100%);
  padding-top: 0 !important;
}

.sign-welcome {
  display: grid;
  grid-template-columns: minmax(320px, 0.42fr) minmax(420px, 0.58fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  min-height: calc(100vh - var(--mlh-header-height));
  padding-top: clamp(2rem, 4vw, 4rem);
  padding-bottom: clamp(2rem, 4vw, 4rem);
}

.sign-welcome > .page-hero {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  aspect-ratio: 4 / 3;
  max-height: min(620px, calc(100vh - var(--mlh-header-height) - 5rem)) !important;
  border-top: 0;
  border-bottom: 0;
  border-left: 1px solid var(--rule);
  padding-left: clamp(1rem, 2.4vw, 2rem);
}

.sign-welcome > .page-mast {
  grid-column: 1;
  grid-row: 1;
  padding-top: 0 !important;
}

main.shell:has(> .page-hero) > .page-hero {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  aspect-ratio: 4 / 3;
  max-height: min(620px, calc(100vh - var(--mlh-header-height) - 5rem)) !important;
  border-top: 0;
  border-bottom: 0;
  border-left: 1px solid var(--rule);
  padding-left: clamp(1rem, 2.4vw, 2rem);
}

main.shell:has(> .page-hero) > .page-mast {
  grid-column: 1;
  grid-row: 1;
  padding-top: 0 !important;
}

main.shell:has(> .page-hero) > .rule,
main.shell:has(> .page-hero) > .section,
main.shell:has(> .page-hero) > footer {
  grid-column: 1 / -1;
}

@media (max-width: 900px) {
  .cover,
  .contract-cover,
  .pay-welcome,
  .welcome#brief-welcome {
    height: auto !important;
    min-height: auto !important;
  }
  .welcome#brief-welcome .welcome-visual {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-left: 0 !important;
    padding-left: 0 !important;
  }
  .page-hero {
    max-height: 260px !important;
  }
  .welcome.shell {
    display: flex !important;
    height: auto !important;
    min-height: auto !important;
    padding-top: clamp(2.75rem, 12vw, 4rem) !important;
    padding-bottom: clamp(2.75rem, 10vw, 4rem) !important;
  }
  .welcome.shell > .welcome-banner {
    order: -1 !important;
    aspect-ratio: 4 / 3 !important;
    max-height: 260px !important;
    min-height: 0 !important;
    height: auto !important;
    border-left: 0 !important;
    border-top: 1px solid var(--rule-strong) !important;
    border-bottom: 1px solid var(--rule-strong) !important;
    padding-left: 0 !important;
  }
  main.shell:has(> .page-hero) {
    display: block;
    min-height: auto;
  }
  main.shell:has(> .sign-welcome) {
    padding-top: clamp(2.5rem, 6vw, 5rem) !important;
  }
  .sign-welcome {
    display: block;
    min-height: auto;
    padding-top: 0;
    padding-bottom: 0;
  }
  .sign-welcome > .page-hero {
    margin: 0 auto clamp(2rem, 4vw, 3.4rem);
    aspect-ratio: 16 / 9;
    border-left: 0;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    padding-left: 0;
  }
  main.shell:has(> .page-hero) > .page-hero {
    margin: 0 auto clamp(2rem, 4vw, 3.4rem);
    aspect-ratio: 16 / 9;
    border-left: 0;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    padding-left: 0;
  }
}
.cam-nav .cam-out:hover {
  color: var(--paper);
  border-color: var(--gold);
  background: var(--gold);
  text-decoration: none;
}
.cam-nav .cam-out:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
}

/* Hamburger — hidden on desktop */
.cam-nav .cam-burger {
  display: none;
  width: 40px;
  height: 40px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0;
}
.cam-nav .cam-burger span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--ink);
  transition: transform 200ms ease, opacity 200ms ease;
}

/* MOBILE — collapse menu, show burger + brand only */
@media (max-width: 900px) {
  .cam-nav {
    grid-template-columns: 1fr auto;
    min-height: var(--mlh-header-height-mobile) !important;
    height: var(--mlh-header-height-mobile) !important;
    padding: 0 var(--outer);
  }
  .cam-nav .cam-menu,
  .cam-nav .cam-links { display: none; }
  .cam-nav .cam-side { display: none !important; }
  .cam-nav .cam-side .cam-user { display: none; }
  .cam-nav .cam-burger { display: flex; }
}

/* Mobile fullscreen overlay */
.cam-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 5vw, 3rem) var(--outer);
}
.cam-overlay[hidden] { display: none; }
.cam-overlay-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--rule);
}
.cam-overlay-brand {
  font-family: var(--font-display);
  font-size: clamp(18px, 6vw, 24px);
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--ink);
}
.cam-overlay-close {
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
}
.cam-overlay-list {
  display: flex;
  flex-direction: column;
  margin-top: 1.5rem;
}
.cam-overlay-list a {
  padding: 1.4rem 0;
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-display);
  font-size: clamp(28px, 6vw, 40px);
  line-height: 1.1;
  color: var(--ink);
  text-decoration: none;
  transition: color 160ms ease, padding-left 160ms ease;
}
.cam-overlay-list a:hover { color: var(--accent); padding-left: 1rem; }
.cam-overlay-list a[aria-current="page"] {
  color: var(--accent);
  font-style: italic;
  border-left: 3px solid var(--gold);
  padding-left: 1rem;
}
.cam-overlay-foot {
  margin-top: auto;
  padding-top: 2rem;
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--subtle);
}
.cam-overlay-foot a {
  color: var(--ink);
  border: 1px solid var(--rule-strong);
  padding: 9px 11px;
  text-decoration: none;
  transition: color 200ms ease, border-color 200ms ease, background-color 200ms ease;
}
.cam-overlay-foot a:hover {
  border-color: var(--gold);
  background: var(--paper-warm);
  color: var(--accent);
  text-decoration: none;
}
@media (min-width: 901px) {
  .cam-overlay { display: none !important; }
}

:root {
  /* Tighter section rhythm — was clamp(72,9vw,144) */
  --section: clamp(48px, 6vw, 96px) !important;
}

/* Landing-class hero (lp-cover) — was clamp(56,12vw,210). Calm down. */
.lp-cover-h1 {
  font-size: clamp(40px, 8vw, 96px) !important;
  line-height: 0.95 !important;
  letter-spacing: -0.01em !important;
}
.lp-cover-sub { font-size: clamp(16px, 1.6vw, 22px) !important; line-height: 1.45 !important; }
.lp-cover-eyebrow { font-size: 10px !important; letter-spacing: 0.2em !important; }
.lp-cover-mid { max-width: 28ch !important; padding-bottom: 2.4rem !important; }

/* Editorial section h2 — was clamp(40,7vw,108). Drop the cap. */
.lp-h2 {
  font-size: clamp(30px, 4.6vw, 60px) !important;
  line-height: 1.0 !important;
  margin: 0 0 1.4rem !important;
}

/* Section page padding — drop from var(--section) above */
.lp-page { padding: clamp(48px, 6vw, 96px) var(--outer) !important; }

/* Featured projects h3 — was clamp(34,4.6vw,68) */
.lp-feat-h3 { font-size: clamp(28px, 4vw, 48px) !important; line-height: 1.0 !important; margin: 0 0 1rem !important; }

/* Eyebrows — make consistent compact */
.lp-eyebrow,
.eyebrow,
.cover-eyebrow,
.section-tag { font-size: 10px !important; letter-spacing: 0.2em !important; }

/* Cameron dashboard welcome — was clamp(48,11vw,168). Drop. */
.welcome h1 { font-size: clamp(40px, 7vw, 88px) !important; line-height: 0.96 !important; }
.welcome .subline { font-size: clamp(16px, 1.6vw, 22px) !important; }

/* Section heads on dashboard */
.sec-head h2 { font-size: clamp(28px, 4.4vw, 56px) !important; line-height: 1.0 !important; }

/* Payment page welcome */
.pay-welcome h1 { font-size: clamp(40px, 7vw, 88px) !important; line-height: 0.96 !important; }
.pay-welcome .subline { font-size: clamp(16px, 1.6vw, 22px) !important; }
.pay-section .sec-head h2 { font-size: clamp(28px, 4.2vw, 52px) !important; line-height: 1.02 !important; }

/* Contract / proposal cover spread */
.contract-cover h1.cover-title,
.cover-title { font-size: clamp(36px, 6.5vw, 80px) !important; line-height: 0.96 !important; }
.contract-cover .cover-sub,
.cover-sub { font-size: clamp(15px, 1.5vw, 20px) !important; }

/* Generic page section heading inside long docs */
.csec h2,
.section-title { font-size: clamp(24px, 3.4vw, 40px) !important; line-height: 1.05 !important; }

/* Tighter portfolio-tile captions */
.lp-tile .lp-tile-meta .lp-tile-title { font-size: clamp(15px, 1.5vw, 18px) !important; }

/* === SHARED nav-strong rules below — unchanged from earlier ===
 * Stronger hover + active state for ALL nav menus across the portal.
 * Applies to every nav variant the various pages use:
 *   .nav-menu a (cameron dashboard)
 *   .nav-tabs a (proposal)
 *   .mlh-topbar .nav a + .mlh-topbar .crumb a (contract / brief / sign)
 *   .pay-subnav a (payment)
 *   .topbar .nav a (landing)
 *   .nav-overlay-list a (mobile overlays)
 * Uses !important to defeat older inline / cascade rules — Sam said the
 * current active/hover state is invisible.
 */

/* — DEFAULT (non-active) — make hover unmistakable — */
.nav-menu a,
.nav-tabs a,
.mlh-topbar .nav a,
.mlh-topbar .crumb a,
.pay-subnav a,
.topbar .nav a {
  color: var(--subtle) !important;
  border-bottom: 2px solid transparent !important;
  padding-bottom: 4px !important;
  transition: color 160ms ease, border-color 160ms ease, background-color 160ms ease !important;
}

/* — HOVER — gold underline + ink text — */
.nav-menu a:hover,
.nav-tabs a:hover,
.mlh-topbar .nav a:hover,
.mlh-topbar .crumb a:hover,
.pay-subnav a:hover,
.topbar .nav a:hover {
  color: var(--ink) !important;
  border-bottom-color: var(--gold) !important;
  text-decoration: none !important;
}

/* — ACTIVE / CURRENT page — solid gold underline + accent color + slight bg — */
.nav-menu a[aria-current="page"],
.nav-menu a.is-active,
.nav-menu a.is-current,
.nav-tabs a.is-current,
.nav-tabs a[aria-current="page"],
.mlh-topbar .nav a[aria-current="page"],
.mlh-topbar .nav a.is-current,
.mlh-topbar .crumb a.active,
.mlh-topbar .crumb a[aria-current="page"],
.pay-subnav a.is-current,
.pay-subnav a[aria-current="page"],
.topbar .nav a.is-active,
.topbar .nav a[aria-current="page"] {
  color: var(--accent) !important;
  border-bottom: 2px solid var(--gold) !important;
  font-weight: 600 !important;
  background-image: linear-gradient(var(--paper-warm), var(--paper-warm)) !important;
  background-repeat: no-repeat !important;
  background-position: 0 100% !important;
  background-size: 100% 0 !important;
}

/* — FOCUS-VISIBLE — keyboard navigation indicator — */
.nav-menu a:focus-visible,
.nav-tabs a:focus-visible,
.mlh-topbar .nav a:focus-visible,
.mlh-topbar .crumb a:focus-visible,
.pay-subnav a:focus-visible,
.topbar .nav a:focus-visible {
  outline: 2px solid var(--gold) !important;
  outline-offset: 4px !important;
}

/* — Mobile overlay nav (dashboard hamburger menu) — */
.nav-overlay-list a {
  border-bottom: 1px solid var(--rule) !important;
  padding: 1.4rem 0 !important;
  transition: color 160ms ease, padding-left 160ms ease, background-color 160ms ease !important;
}
.nav-overlay-list a:hover {
  color: var(--accent) !important;
  padding-left: 1rem !important;
  background-color: var(--paper-warm) !important;
}
.nav-overlay-list a[aria-current="page"] {
  color: var(--accent) !important;
  font-style: italic !important;
  background-color: var(--paper-warm) !important;
  border-left: 3px solid var(--gold) !important;
  padding-left: 1rem !important;
}

/* — QR tab switcher on payment page — — */
.qr-tab[aria-selected="true"],
.qr-tab.is-current {
  color: var(--gold) !important;
  border-bottom: 2px solid var(--gold) !important;
  font-weight: 600 !important;
}
.qr-tab:hover:not(.is-current) {
  color: var(--paper) !important;
  border-bottom-color: rgba(212,175,55,0.5) !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   CANONICAL .pub-header — single nav structure used by every PUBLIC page
   (signin, profile, process, projects, contact, privacy, terms, /docs/*).
   Identical 5-link nav + text-only wordmark on every page. Logo image
   appears only on the landing /index.html (its hero has its own .lp-mark).
   Per-page nav CSS overrides (.proj-nav, .pub-topbar, .signin-header, the
   privacy .pub-header inline rules, lp-cover-row in non-landing heroes)
   should be removed in favour of these rules.
   ═══════════════════════════════════════════════════════════════════════ */

.pub-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 100;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(0.8rem, 2vw, 2rem);
  min-height: var(--mlh-header-height);
  height: var(--mlh-header-height);
  padding: 0 var(--outer);
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  backdrop-filter: blur(8px);
}

.pub-header .pub-wordmark {
  font-family: var(--font-display);
  font-size: clamp(15px, 1.6vw, 18px);
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  transition: color 200ms ease;
}
.pub-header .pub-wordmark:hover { color: var(--accent); text-decoration: none; }

.pub-header .pub-nav {
  display: flex;
  gap: clamp(0.9rem, 1.8vw, 1.8rem);
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.pub-header .pub-nav a {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--subtle);
  text-decoration: none;
  padding: 10px 6px 9px;
  border-bottom: 2px solid transparent;
  transition: color 160ms ease, border-color 160ms ease;
  white-space: nowrap;
}
.pub-header .pub-nav a:hover {
  color: var(--ink);
  border-bottom-color: var(--gold);
  text-decoration: none;
}
.pub-header .pub-nav a[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--gold);
  font-weight: 600;
}
.pub-header .pub-nav a:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
}

.pub-header .pub-signin {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--gold);
  padding: 0 0 2px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  transition: color 200ms ease, border-color 200ms ease;
}
.pub-header .pub-signin:hover { color: var(--accent); border-bottom-color: var(--accent); }
.pub-header .pub-signin .icon { vertical-align: -2px; }

@media (max-width: 900px) {
  .pub-header {
    grid-template-columns: auto auto;
    gap: 0.8rem;
    min-height: var(--mlh-header-height-mobile);
    height: var(--mlh-header-height-mobile);
    padding: 0 1rem;
  }
  .pub-header .pub-nav { display: none; }
  .pub-header .pub-wordmark { font-size: 14px; }
  /* Sign-in moves into the mobile overlay foot so the burger has room. */
  .pub-header .pub-signin { display: none; }
}


/* ═══════════════════════════════════════════════════════════════════════
   MOBILE BURGER + FULL-SCREEN OVERLAY
   Sam's complaints #3 + #4 (2026-05-10): "in mobile view the menu never
   shows up" / "you cant see which sections are clickable". Wave 2A injects
   a burger button + overlay via cam-nav.js into BOTH .cam-nav and
   .pub-header, so HTML pages don't need any markup changes.
   The button is unmistakable: bordered rectangle, "MENU" label, 3 lines.
   ═══════════════════════════════════════════════════════════════════════ */

.mlh-burger {
  display: none;            /* shown by media queries below */
  align-items: center;
  gap: 0.5rem;
  padding: 8px 12px;
  background: var(--paper);
  border: 1px solid var(--ink);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  position: absolute;
  right: var(--outer);
  top: 50%;
  transform: translateY(-50%);
  z-index: 110;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.mlh-burger:hover {
  background: var(--gold, #C4A35A);
  color: var(--paper);
  border-color: var(--gold, #C4A35A);
}
.mlh-burger:focus-visible {
  outline: 2px solid var(--gold, #C4A35A);
  outline-offset: 3px;
}
.mlh-burger-lines {
  display: inline-flex;
  flex-direction: column;
  gap: 3px;
}
.mlh-burger-lines i {
  display: block;
  width: 18px;
  height: 1.5px;
  background: currentColor;
}
.mlh-burger-label { font-size: 11px; }

/* Header acts as a positioning context for the absolutely-placed burger. */
.cam-nav,
.pub-header { position: fixed; }  /* already declared above with !important; this keeps the cascade explicit */

@media (max-width: 900px) {
  /* Reserve space on the right edge of cam-nav so the absolute burger
     doesn't overlap the cam-side links it replaces. */
  .cam-nav { padding-right: calc(var(--outer) + 110px) !important; }
  .cam-nav .mlh-burger { display: inline-flex; }
}
@media (max-width: 900px) {
  .pub-header { padding-right: calc(1rem + 110px) !important; }
  .pub-header .mlh-burger { display: inline-flex; }
}

/* Landing-page hero header (.lp-cover-row) — dark background, so the burger
   needs an inverted treatment (transparent paper-tinted bg, gold border, paper
   text) instead of the default paper/ink combo used on cam-nav and pub-header. */
.lp-cover-row { position: relative; }
.lp-cover-row .mlh-burger {
  background: rgba(244, 240, 232, 0.08);
  border-color: rgba(244, 240, 232, 0.55);
  color: var(--paper, #F4F0E8);
  position: absolute;
  right: 0;
  backdrop-filter: blur(4px);
}
.lp-cover-row .mlh-burger:hover {
  background: var(--gold, #C4A35A);
  color: var(--ink, #171B18);
  border-color: var(--gold, #C4A35A);
}
@media (max-width: 900px) {
  .lp-cover-row .mlh-burger { display: inline-flex; }
}

/* — Full-screen overlay — paper, big serif links, NOT centered — */
.mlh-mobile-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  padding: clamp(1.4rem, 5vw, 3rem) var(--outer);
  overflow-y: auto;
}
.mlh-mobile-overlay[hidden] { display: none; }

.mlh-mobile-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--rule);
}
.mlh-mobile-brand {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--ink);
}
.mlh-mobile-close {
  background: transparent;
  border: 1px solid var(--ink);
  padding: 8px 14px;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  transition: background 160ms ease, color 160ms ease;
}
.mlh-mobile-close:hover { background: var(--ink); color: var(--paper); }

.mlh-mobile-list {
  display: flex;
  flex-direction: column;
  margin-top: 1.5rem;
}
.mlh-mobile-list a {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 1.4rem 0;
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-display, 'EB Garamond', 'Cormorant Garamond', serif);
  font-size: clamp(28px, 6vw, 40px);
  line-height: 1.05;
  color: var(--ink);
  text-decoration: none;
  transition: color 160ms ease, padding-left 160ms ease;
}
.mlh-mobile-list a:hover {
  color: var(--accent, #8A6A3B);
  padding-left: 0.8rem;
}
.mlh-mobile-list a[aria-current="page"] {
  color: var(--accent, #8A6A3B);
  font-style: italic;
  border-left: 3px solid var(--gold, #C4A35A);
  padding-left: 1rem;
}
.mlh-mobile-list a .icon {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
}
.mlh-mobile-link-label { flex: 1; }

.mlh-mobile-foot {
  margin-top: auto;
  padding-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  border-top: 1px solid var(--rule);
}
.mlh-mobile-action {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  border: 1px solid var(--ink);
  padding: 10px 14px;
  text-decoration: none;
  transition: background 160ms ease, color 160ms ease;
}
.mlh-mobile-action:hover { background: var(--ink); color: var(--paper); }

/* On desktop, the overlay must never be visible even if hidden attribute is missing. */
@media (min-width: 901px) {
  .cam-nav .mlh-burger { display: none !important; }
}
@media (min-width: 901px) {
  .pub-header .mlh-burger { display: none !important; }
}