/* ============================================
   Ancaire — Shared Styles (v2.0 light theme)
   ============================================ */

@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/instrument-sans-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/instrument-sans-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/instrument-sans-600.woff2') format('woff2');
}

:root {
  color-scheme: light;

  --bg: #ffffff;
  --bg-2: #f1f4f2;
  --ink: #1a1a1a;
  --ink-dim: #4f5b54;
  --ink-faint: #9aa6a0;
  --accent: #14463d;
  --accent-text: #487d46;
  --accent-bright: #88c050;
  --accent-dark: #0e352e;
  --accent-glow: rgba(20, 70, 61, 0.18);
  --grid: rgba(31, 39, 35, 0.020);
  --rule: rgba(31, 39, 35, 0.10);
  --rule-strong: rgba(31, 39, 35, 0.18);

  /* v2.0 — Card surface tokens for consistent box weighting across pages */
  --surface-card: #f1f4f2;
  --surface-card-elev: #ffffff;
  --shadow-card: 0 2px 12px rgba(31, 39, 35, 0.06);
  --shadow-card-hover: 0 8px 32px rgba(31, 39, 35, 0.10);

  /* v1.1 compatibility — alias for legacy --ink-soft references in thank-you/submission-error */
  --ink-soft: #4f5b54;
}

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

html, body {
  color-scheme: light;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 450;
  font-feature-settings: "ss01", "ss02";
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* overflow-x: clip (not hidden) prevents horizontal bleed from full-width
     bands WITHOUT turning the page into a scroll container — `hidden` would
     break position: sticky on the topbar. */
  overflow-x: clip;
}

a { color: inherit; text-decoration: none; }

/* Background grid + grain */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 64px 64px;
  pointer-events: none;
  z-index: 0;
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: radial-gradient(ellipse at 20% 0%, rgba(20, 70, 61, 0.08), transparent 50%),
                    radial-gradient(ellipse at 80% 100%, rgba(80, 130, 200, 0.06), transparent 50%);
  pointer-events: none;
  z-index: 0;
}

/* Layout shell */
.shell {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  max-width: 1400px;
  margin: 0 auto;
  padding: 32px 48px;
  display: flex;
  flex-direction: column;
}

/* ============================================
   Top bar / Navigation
   ============================================ */
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'Instrument Sans', sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--ink-dim);
  padding-bottom: 24px;
  animation: fadeIn 1s ease 0.2s both;
  /* Frozen row: the topbar stays pinned as the page scrolls beneath it.
     The tinted background + bottom border are painted by a ::before that
     spans the FULL viewport width (100vw, centered) rather than the shell
     edges — otherwise on ultrawide monitors (viewport wider than the 1400px
     shell) the background would stop at the shell boundary, leaving bare
     gaps on each side. The topbar's content stays aligned to the shell. */
  position: sticky;
  top: 0;
  z-index: 100;
  margin: -32px 0 0;
  padding: 32px 0 24px;
}
.topbar::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  z-index: -1;
  background: rgba(252, 250, 247, 0.88);
  border-bottom: 1px solid var(--rule);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  backdrop-filter: saturate(140%) blur(12px);
  pointer-events: none;
}

.topbar .left {
  display: flex;
  gap: 14px;
  align-items: center;
}

.topbar .brand-link {
  display: inline-flex;
  align-items: center;
  color: var(--ink);
  text-decoration: none;
  transition: opacity 0.2s ease;
}
.topbar .brand-link:hover { opacity: 0.85; }
.topbar .brand-link:hover .topbar-logo { transform: rotate(-3deg) scale(1.05); }

.topbar .topbar-logo {
  width: 40px;
  height: 40px;
  display: block;
  flex-shrink: 0;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  filter: drop-shadow(0 0 14px rgba(20, 70, 61, 0.20));
  animation: logoBreath 4s ease-in-out infinite;
}

@keyframes logoBreath {
  0%, 100% { filter: drop-shadow(0 0 12px rgba(20, 70, 61, 0.18)); }
  50% { filter: drop-shadow(0 0 20px rgba(20, 70, 61, 0.32)); }
}

.topbar nav {
  display: flex;
  gap: 28px;
  align-items: center;
  flex-wrap: nowrap;
  white-space: nowrap;
}

.topbar nav a {
  color: var(--ink-dim);
  position: relative;
  padding: 4px 0;
  transition: color 0.2s ease;
}
.topbar nav a:hover { color: var(--ink); }
.topbar nav a.active {
  color: var(--accent-text);
  font-weight: 600;
}
.topbar nav a.active::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--accent);
  border-radius: 1px;
}

/* Utility link in topbar (Client Portal) — visually distinct from primary nav */
.topbar nav a.utility-link {
  margin-left: 14px;
  padding-left: 20px;
  border-left: 1px solid var(--rule);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--ink-dim);
  opacity: 0.75;
  transition: opacity 0.2s ease, color 0.2s ease;
}
.topbar nav a.utility-link:hover {
  opacity: 1;
  color: var(--accent-text);
}
.topbar nav a.utility-link::after {
  display: none;
}
@media (max-width: 900px) {
  .topbar nav a.utility-link {
    margin-left: 0;
    padding-left: 0;
    border-left: none;
    width: 100%;
  }
}

/* LinkedIn icon in the topbar. Two instances: one inside nav (desktop), one
   standalone (mobile, shown only when the inline nav is hidden). */
.topbar-linkedin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Hybrid treatment: a muted blue-slate at rest (a nod to LinkedIn's blue,
     desaturated so it sits with the brand palette), warming to the brand
     accent orange on hover. Reads as a blend of both identities. */
  color: #4a6b9c;
  transition: color 0.2s ease, transform 0.2s ease;
}
.topbar-linkedin:hover {
  color: var(--accent-text);
  transform: translateY(-1px);
}
.topbar nav a.topbar-linkedin {
  margin-left: 16px;
  padding-left: 18px;
  border-left: 1px solid var(--rule);
}
.topbar nav a.topbar-linkedin::after { display: none; }
/* The standalone (mobile) instance is hidden by default; revealed when nav hides. */
.topbar-linkedin-mobile {
  display: none;
  margin-left: 14px;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.85); }
}

/* ============================================
   Footer
   ============================================ */
.footer {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  min-height: 320px;
  padding: 32px 48px;
  margin-top: auto;
  margin-left: calc((100vw - 100%) / -2);
  margin-right: calc((100vw - 100%) / -2);
  font-family: 'Instrument Sans', sans-serif;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--ink);
  background-color: var(--bg);
  background-image: image-set(
    url('assets/philadelphia-skyline-footer.webp') type('image/webp'),
    url('assets/philadelphia-skyline-footer.jpg') type('image/jpeg')
  );
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  overflow: hidden;
  animation: fadeIn 1s ease 1.4s both;
}
/* Scrim layer for foreground text legibility against the engraving */
.footer::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.85) 0%,
    rgba(255, 255, 255, 0.55) 50%,
    rgba(255, 255, 255, 0.80) 100%);
  z-index: 1;
  pointer-events: none;
}
/* Top fade — blends footer into the page bg above (no abrupt edge) */
.footer::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(180deg, var(--bg) 0%, rgba(255, 255, 255, 0) 100%);
  z-index: 1;
  pointer-events: none;
}
.footer > * { position: relative; z-index: 2; }
.footer .copyright { color: var(--ink); }
.footer .right { display: flex; gap: 20px; align-items: center; }
.footer .ip-notice { color: var(--accent-text); }
.footer .footer-privacy-link {
  color: var(--ink-dim);
  border-bottom: 1px dotted rgba(31, 39, 35, 0.30);
  transition: color 0.2s ease, border-color 0.2s ease;
}
.footer .footer-privacy-link:hover {
  color: var(--accent-text);
  border-bottom-color: var(--accent-text);
}
.footer .footer-phone a {
  color: var(--ink);
  border-bottom: 1px dotted rgba(31, 39, 35, 0.30);
  transition: color 0.2s ease, border-color 0.2s ease;
}
.footer .footer-phone a:hover {
  color: var(--accent-text);
  border-color: var(--accent-text);
}
@media (max-width: 700px) {
  .footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    min-height: 280px;
    padding: 32px 24px;
  }
}

/* ============================================
   Common page elements
   ============================================ */
.page-header {
  padding: 64px 0 48px;
  border-bottom: 1px solid var(--rule);
  animation: slideUp 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 0.3s both;
}

.eyebrow {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--accent-text);
  margin-bottom: 24px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.eyebrow::before {
  content: '';
  display: block;
  width: 32px;
  height: 1px;
  background: var(--accent);
}

.page-title {
  font-size: clamp(48px, 7vw, 96px);
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: -0.04em;
  margin-bottom: 24px;
}
.page-title em {
  font-style: italic;
  color: var(--accent-text);
  font-weight: 400;
}

.page-lede {
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.5;
  color: var(--ink);
  max-width: 680px;
}

.section {
  padding: 64px 0;
  border-bottom: 1px solid var(--rule);
}
.section:last-of-type { border-bottom: none; }

.section-label {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--ink-faint);
  margin-bottom: 32px;
}

.prose {
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink);
  max-width: 680px;
}
.prose p { margin-bottom: 20px; }
.prose p:last-child { margin-bottom: 0; }
.prose em { color: var(--accent-text); font-style: italic; }
.prose strong { font-weight: 600; }

/* ============================================
   Offering tables — used on practice pages to articulate offerings
   in a scannable grid. Monospace uppercase headers (matching section
   labels), navy hairline rules, subtle row tint, accent-tinted first
   column. Wrapped in .offering-table-wrap for horizontal scroll on
   narrow viewports so wide tables never break the layout.
   ============================================ */
.offering-table-wrap {
  margin: 8px 0 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.offering-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.5;
  min-width: 560px;
}
.offering-table thead th {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--accent-text);
  text-align: left;
  padding: 0 18px 12px;
  border-bottom: 1px solid var(--rule-strong);
  vertical-align: bottom;
}
.offering-table tbody td {
  padding: 16px 18px;
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
  vertical-align: top;
}
.offering-table tbody tr:last-child td { border-bottom: none; }
.offering-table tbody tr:nth-child(even) td { background: var(--surface-card); }
.offering-table tbody td:first-child {
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}
.offering-table .ot-stage {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--accent-text);
  white-space: nowrap;
}
.offering-table-note {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: 12px;
}
@media (max-width: 600px) {
  .offering-table { font-size: 13px; }
  .offering-table thead th { padding: 0 12px 10px; }
  .offering-table tbody td { padding: 13px 12px; }
}

/* ============================================
   Buttons
   ============================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  font-family: 'Instrument Sans', sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: all 0.25s ease;
}
.btn:hover {
  border-color: var(--accent-text);
  color: var(--accent-text);
  transform: translateX(4px);
}
.btn.primary {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}
.btn.primary:hover {
  background: transparent;
  color: var(--accent-text);
  transform: translateX(4px);
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Instrument Sans', sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--ink-dim);
  padding: 32px 0 0;
  transition: all 0.2s ease;
}
.back-link:hover { color: var(--accent-text); transform: translateX(-4px); }

/* Top-of-page back link — compact, unobtrusive mirror of the footer back-link
   so users can navigate up without scrolling to the bottom. Sits just inside
   <main>, above the page hero. Smaller and quieter than the footer version. */
.back-link-top {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Instrument Sans', sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-dim);
  text-decoration: none;
  padding: 24px 0 0;
  opacity: 0.75;
  transition: opacity 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.back-link-top:hover {
  opacity: 1;
  color: var(--accent-text);
  transform: translateX(-3px);
}

/* ============================================
   Collapsible sections (Framework + About pages)
   Progressive disclosure: sections collapse by default to a teaser, expand
   on click. Eyebrow (section-label) stays visible; a subdued teaser sentence
   previews the content. JS-driven (accordion.js) as progressive enhancement —
   without JS, sections render fully open.
   ============================================ */
[data-collapsible] {
  cursor: pointer;
}
.section-toggle {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.section-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 6px;
  border-radius: 2px;
}
.section-toggle-head {
  flex: 1;
  min-width: 0;
}
/* Inside the collapsed head, the eyebrow and title sit tight to the teaser —
   neutralize their default bottom margins so spacing is controlled here. */
.section-toggle-head .section-label,
.section-toggle-head .team-note-eyebrow,
.section-toggle-head .block-eyebrow {
  margin-bottom: 0;
}
.section-toggle-head .team-note-title,
.section-toggle-head h2,
.section-toggle-head h3 {
  margin: 8px 0 0;
}
.section-teaser {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 15px;
  font-style: italic;
  line-height: 1.5;
  color: var(--ink-dim);
  margin-top: 10px;
  max-width: 620px;
  transition: opacity 0.3s ease, max-height 0.4s ease, margin 0.4s ease;
}
.is-open .section-teaser {
  opacity: 0;
  max-height: 0;
  margin-top: 0;
  overflow: hidden;
  pointer-events: none;
}
/* Explicit expand prompt — accent-colored and non-italic so it reads as an
   actionable affordance ("Expand to read…") rather than a passive teaser. */
.section-teaser-prompt {
  font-style: normal;
  font-family: 'Instrument Sans', sans-serif;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--accent-text);
  font-weight: 600;
}
.section-teaser-prompt::after {
  content: ' \2304';
}
.section-chevron {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-text);
  font-size: 18px;
  line-height: 1;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
  margin-top: -2px;
}
.is-open .section-chevron {
  transform: rotate(180deg);
}
.section-body {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.35s ease, margin 0.4s ease;
  margin-top: 0;
}
.is-open .section-body {
  opacity: 1;
  margin-top: 28px;
  /* max-height set inline by JS to the measured content height */
}

/* Page-level expand/collapse-all control */
.expand-all-bar {
  display: flex;
  justify-content: flex-end;
  padding: 8px 0 0;
  margin-bottom: -8px;
}
.expand-all-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: 1px solid var(--rule-strong);
  border-radius: 3px;
  padding: 8px 14px;
  font-family: 'Instrument Sans', sans-serif;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-dim);
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.expand-all-btn:hover {
  border-color: var(--accent-text);
  color: var(--accent-text);
}
.expand-all-btn .eab-icon {
  color: var(--accent-text);
  font-size: 13px;
  transition: transform 0.3s ease;
}
.expand-all-btn.all-open .eab-icon {
  transform: rotate(180deg);
}

/* ============================================
   Scroll progress indicator (vertical, right edge)
   ============================================ */
.scroll-progress {
  position: fixed;
  top: 0;
  right: 0;
  width: 6px;
  height: 100vh;
  background: rgba(31, 39, 35, 0.08);
  z-index: 200;
  pointer-events: none;
}
.scroll-progress-fill {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 0;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent-glow);
  transition: height 0.08s linear;
}
@media (max-width: 600px) {
  .scroll-progress { width: 4px; }
}

/* ============================================
   Animations
   ============================================ */
@keyframes slideUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ============================================
   Mascot
   ============================================ */
#mascot {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 100;
  cursor: pointer;
  opacity: 0;
  transform: translateY(20px) scale(0.9);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
  filter: drop-shadow(0 4px 20px rgba(20, 70, 61, 0.25));
}
#mascot.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
#mascot:hover {
  transform: translateY(-4px) scale(1.05);
}
#mascot canvas {
  display: block;
  width: 96px;
  height: 96px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

#mascot-bubble {
  position: absolute;
  bottom: 100%;
  right: 0;
  margin-bottom: 12px;
  padding: 10px 14px;
  background: var(--bg-2);
  border: 1px solid var(--rule);
  font-family: 'Instrument Sans', sans-serif;
  font-size: 11px;
  color: var(--ink);
  letter-spacing: 0.05em;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
  max-width: 240px;
  white-space: normal;
  width: max-content;
}
#mascot-bubble::after {
  content: '';
  position: absolute;
  top: 100%;
  right: 24px;
  border: 6px solid transparent;
  border-top-color: var(--bg-2);
}
#mascot-bubble.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 900px) {
  .shell { padding: 20px 24px; }
  .topbar { font-size: 10px; gap: 12px; margin: -20px 0 0; padding: 20px 0 18px; }
  .topbar nav { gap: 18px; }
  .footer { flex-direction: column; gap: 12px; align-items: flex-start; }
  .footer .right { flex-wrap: wrap; }
  #mascot canvas { width: 72px; height: 72px; }
}

/* Mid-width tier: between the mobile breakpoint (800px) and full desktop, the
   no-wrap nav needs progressively tighter spacing so "Client Portal" and the
   LinkedIn icon stay on one line instead of wrapping. */
@media (max-width: 1150px) and (min-width: 801px) {
  .topbar nav { gap: 18px; font-size: 10px; letter-spacing: 0.1em; }
  .topbar nav a.utility-link { margin-left: 10px; padding-left: 12px; font-size: 9px; letter-spacing: 0.12em; }
  .topbar nav a.topbar-linkedin { margin-left: 10px; padding-left: 12px; }
  .topbar nav a.topbar-linkedin svg { width: 16px; height: 16px; }
}
@media (max-width: 960px) and (min-width: 801px) {
  .topbar nav { gap: 13px; }
  .topbar nav a.utility-link { margin-left: 8px; padding-left: 10px; }
}

/* v1.2 backlog item 1.1 — On phones and small tablets:
   hide inline nav, hamburger drawer becomes the only nav. Hamburger floats right
   to follow universal mobile UI convention (logo left, menu right). */
@media (max-width: 800px) {
  .topbar nav { display: none; }
  .topbar .menu-toggle { display: inline-flex; }
  /* With the inline nav hidden, the topbar is logo + hamburger (left) and the
     LinkedIn icon (right). The hamburger no longer needs margin-left:auto
     because the LinkedIn icon anchors the right via space-between. */
  .topbar-linkedin-mobile { display: inline-flex !important; }
}

@media (max-width: 540px) {
  .shell { padding: 16px 20px; }
  .topbar { margin: -16px 0 0; padding: 16px 0 16px; }
  .topbar .topbar-logo { width: 36px; height: 36px; }
}

/* ============================================
   Side navigation drawer
   ============================================ */
.menu-toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-right: 8px;
  background: var(--accent);
  border: none;
  color: #ffffff;
  cursor: pointer;
  padding: 0;
  border-radius: 6px;
  box-shadow: 0 0 0 0 var(--accent-glow);
  transition: transform 0.2s ease, box-shadow 0.25s ease;
}
.menu-toggle:hover,
.menu-toggle:focus-visible {
  transform: scale(1.08);
  box-shadow: 0 0 16px 2px var(--accent-glow);
  outline: none;
}
.menu-toggle:active {
  transform: scale(1.02);
}
.menu-toggle .icon-line {
  display: block;
  width: 16px;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
  margin: 2px 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Show menu toggle on desktop too — power-user navigation */
@media (min-width: 541px) {
  .menu-toggle { display: inline-flex; }
}

/* Drawer */
#sitemap-drawer {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 300px;
  max-width: 85vw;
  background: var(--bg);
  border-right: 1px solid var(--rule-strong);
  z-index: 200;
  transform: translateX(-100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  box-shadow: 4px 0 40px rgba(31, 39, 35, 0.18);
}
#sitemap-drawer.open { transform: translateX(0); }

#sitemap-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 20, 25, 0.35);
  backdrop-filter: blur(2px);
  z-index: 199;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
#sitemap-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}

#sitemap-drawer .drawer-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid var(--rule-strong);
}
#sitemap-drawer .drawer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
  font-family: 'Instrument Sans', sans-serif;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
#sitemap-drawer .drawer-brand img { width: 22px; height: 22px; }
#sitemap-drawer .drawer-close {
  width: 28px;
  height: 28px;
  background: transparent;
  border: 1px solid var(--rule-strong);
  color: var(--ink-dim);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 0;
  transition: all 0.2s ease;
}
#sitemap-drawer .drawer-close:hover {
  border-color: var(--accent-text);
  color: var(--accent-text);
}

#sitemap-drawer .drawer-eyebrow {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--ink-dim);
  font-weight: 600;
  padding: 24px 24px 8px;
}

#sitemap-drawer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
#sitemap-drawer .nav-section {
  padding: 0 12px 8px;
}
#sitemap-drawer .nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 14px;
  min-height: 48px;
  box-sizing: border-box;
  color: var(--ink);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  border-radius: 2px;
  transition: background 0.2s ease, color 0.2s ease, padding 0.2s ease;
}
/* For parent rows with children, the whole row is an expand target; only the
   label text navigates. Make the label feel like the distinct link it is. */
#sitemap-drawer .nav-link[data-toggle] {
  cursor: pointer;
}
#sitemap-drawer .nav-link[data-toggle] .nav-label {
  cursor: pointer;
}
#sitemap-drawer .nav-link .nav-label {
  flex: 0 1 auto;
}
#sitemap-drawer .nav-link:hover {
  background: rgba(20, 70, 61, 0.08);
  color: var(--accent-text);
  padding-left: 18px;
}
#sitemap-drawer .nav-link.active {
  color: var(--accent-text);
  background: rgba(20, 70, 61, 0.10);
}
#sitemap-drawer .nav-link.active::before {
  content: '';
  display: block;
  width: 3px;
  height: 14px;
  background: var(--accent);
  margin-right: 10px;
  margin-left: -13px;
}
/* The arrow is the visual expand affordance — enlarged. The full-row hit area
   for toggling is handled in JS (any click outside the text label toggles), so
   the arrow itself stays a clean glyph that rotates cleanly on its own center. */
#sitemap-drawer .nav-link .arrow {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 18px;
  line-height: 1;
  color: var(--ink-faint);
  padding: 6px;
  margin: -6px;
  transition: transform 0.25s ease, color 0.25s ease;
}
#sitemap-drawer .nav-link:hover .arrow,
#sitemap-drawer .nav-link.expanded .arrow {
  color: var(--accent-text);
  transform: rotate(90deg);
}

#sitemap-drawer .sub-nav {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
  padding-left: 14px;
  border-left: 1px solid var(--rule-strong);
  margin-left: 22px;
}
#sitemap-drawer .sub-nav.expanded {
  max-height: 440px;
}
#sitemap-drawer .sub-link {
  display: block;
  padding: 8px 14px;
  color: var(--ink-dim);
  text-decoration: none;
  font-size: 13px;
  font-family: 'Newsreader', serif;
  font-weight: 400;
  border-radius: 2px;
  transition: color 0.2s ease, padding 0.2s ease;
}
#sitemap-drawer .sub-link:hover {
  color: var(--accent-text);
  padding-left: 18px;
}
#sitemap-drawer .sub-link.active {
  color: var(--accent-text);
}

#sitemap-drawer .drawer-foot {
  margin-top: auto;
  padding: 24px;
  border-top: 1px solid var(--rule-strong);
  font-family: 'Instrument Sans', sans-serif;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-faint);
}
#sitemap-drawer .drawer-foot .accent {
  color: var(--accent-text);
  margin-top: 6px;
  display: block;
}

/* ============================================
   Privacy notice bar (slim, bottom, dismissible)
   ============================================ */
.privacy-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 150; /* above page content + sticky topbar (100); below drawer (199/200) */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  padding: 14px 24px;
  background: rgba(26, 37, 64, 0.96); /* deep ink, like the drawer/footer tone */
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  backdrop-filter: saturate(140%) blur(10px);
  border-top: 1px solid rgba(20, 70, 61, 0.35);
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.12);
  transform: translateY(100%);
  opacity: 0;
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.32s ease;
}
.privacy-bar.is-visible {
  transform: translateY(0);
  opacity: 1;
}
.privacy-bar.is-dismissing {
  transform: translateY(100%);
  opacity: 0;
}
.privacy-bar-text {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 12.5px;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.82);
  margin: 0;
  max-width: 760px;
}
.privacy-bar-text a {
  color: var(--accent-text);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
  white-space: nowrap;
}
.privacy-bar-text a:hover { border-bottom-color: var(--accent-text); }
.privacy-bar-dismiss {
  flex-shrink: 0;
  font-family: 'Instrument Sans', sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #fff;
  background: var(--accent);
  border: none;
  border-radius: 3px;
  padding: 9px 20px;
  min-height: 38px;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.privacy-bar-dismiss:hover {
  background: #ff8a52;
  transform: translateY(-1px);
}
.privacy-bar-dismiss:active { transform: translateY(0); }

/* On phones: keep the bar readable and the button full-reach. Lift the mascot
   so the bar doesn't sit on top of it while the bar is showing. */
@media (max-width: 600px) {
  .privacy-bar {
    gap: 12px;
    padding: 12px 16px;
    justify-content: space-between;
    flex-wrap: nowrap;
  }
  .privacy-bar-text { font-size: 11.5px; }
  .privacy-bar-dismiss { padding: 8px 14px; letter-spacing: 0.1em; }
}