/* Aquifer Capital — component styles. Every color, font and measure is a token from tokens.css. Revised September 2026. */
body { margin: 0; font-family: var(--font-frankruhl); background: var(--surface); color: var(--ink); }
.aq-row { display: flex; flex-wrap: wrap; gap: var(--space-6); align-items: center; padding: var(--space-4); }
.aq-stack { display: flex; flex-direction: column; gap: var(--space-6); padding: var(--space-4); }
.aq-panel { background: var(--surface-panel); color: var(--on-panel); padding: var(--space-4); }

/* Logo */
.aq-logo { display: inline-block; vertical-align: middle; overflow: visible; }

/* Section divider: the navy band with the ghosted icon */
.aq-divider { position: relative; overflow: hidden; background: var(--pms-280); color: var(--white); min-height: 200px; display: flex; align-items: center; justify-content: center; padding: var(--space-12) var(--space-8); box-sizing: border-box; }
.aq-divider-mark { position: absolute; left: -6%; top: -30%; height: 170%; width: auto; fill: var(--watermark-on-navy); pointer-events: none; }
.aq-divider-row { position: relative; display: flex; align-items: center; gap: var(--space-4); }
.aq-divider-num { flex: none; width: 40px; height: 40px; border-radius: var(--radius-full); background: var(--pms-2925); color: var(--pms-280); font: 400 18px/40px var(--font-frankruhl); text-align: center; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
.aq-divider-title { margin: 0; font: 700 40px/44px var(--font-raleway); letter-spacing: 0.06em; text-transform: uppercase; color: var(--white); }

/* Page label: subject in ink, qualifier in accent */
.aq-pagelabel { display: flex; flex-direction: column; gap: 0; margin: 0; font: 400 25px/34px var(--font-frankruhl); letter-spacing: 0.045em; color: var(--ink); }
.aq-pagelabel-q { color: var(--accent); }

/* Eyebrow */
.aq-eyebrow { margin: 0; font: 700 12px/16px var(--font-raleway); letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-navy); }

/* Call-out */
.aq-callout { margin: 0; font: 700 32px/40px var(--font-raleway); letter-spacing: 0.1em; text-transform: uppercase; text-wrap: balance; color: var(--ink); }
.aq-callout-navy { color: var(--ink-navy); }
.aq-callout-accent { color: var(--accent); }
.aq-callout-white { color: var(--white); }

/* Pull quote */
.aq-pullquote { margin: 0; color: var(--ink); }
.aq-pullquote blockquote { margin: 0; font: italic 400 16px/26px var(--font-raleway); letter-spacing: 0.08em; text-transform: uppercase; }
.aq-pullquote figcaption { margin-top: var(--space-2); font: 400 14px/22px var(--font-frankruhl); letter-spacing: 0.02em; color: var(--ink-muted); }

/* Numbering */
.aq-numbering { list-style: none; margin: 0; padding: 0; font: 400 17px/28px var(--font-frankruhl); color: var(--ink); }
.aq-numbering li { display: flex; gap: var(--space-2); }
.aq-num { flex: none; letter-spacing: 0.05em; font-variant-numeric: tabular-nums; color: var(--ink-navy); }
.aq-numbering-accent .aq-num { color: var(--accent); }

/* Button */
.aq-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); box-sizing: border-box; min-height: 40px; padding: var(--space-3) var(--space-6); border: 1px solid var(--ink-navy); border-radius: var(--radius-none); background: var(--ink-navy); color: var(--surface); font: 600 12px/16px var(--font-raleway); letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; }
.aq-btn:hover { background: var(--control-hover); border-color: var(--control-hover); color: var(--on-control-hover); }
.aq-btn-secondary { background: transparent; color: var(--ink-navy); }
.aq-btn-secondary:hover { background: var(--ink-navy); color: var(--surface); border-color: var(--ink-navy); }
.aq-btn:focus-visible { outline: 2px solid transparent; outline-offset: 2px; box-shadow: var(--focus-ring); }
.aq-btn[disabled], .aq-btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }

/* Rule */
.aq-rule { border: 0; border-top: 1px solid var(--line); margin: var(--space-4) 0; width: 100%; }
.aq-rule-short { width: var(--space-12); margin-left: auto; margin-right: auto; }
.aq-rule-left { margin-left: 0; }

/* Header: lock-up 02 and tracked caps, in the color of the band it opens onto: navy (aq-header-navy) above a Hero or any
   navy opening, white only on a page that opens on white. The navy tone re-scopes the theme tokens as the Hero does. */
.aq-header { position: relative; background: var(--surface); color: var(--ink-navy); border-bottom: 1px solid var(--line); }
.aq-header-navy { --surface: var(--pms-280); --ink: var(--white); --ink-navy: var(--white); --ink-muted: var(--muted-on-navy); --link: var(--white); --line: var(--pms-7534); --focus-ring: 0 0 0 2px var(--pms-280), 0 0 0 4px var(--pms-2925); }
.aq-header-sticky { position: sticky; top: 0; z-index: 100; }
.aq-header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); max-width: 1160px; margin: 0 auto; padding: var(--space-4) var(--space-8); min-height: 72px; box-sizing: border-box; }
.aq-header-logo { display: flex; align-items: center; flex: none; transition: opacity 0.15s ease, visibility 0s linear 0s; }
/* The lock-up steps aside while a Hero's lock-up is in view (.is-hidden, set by the component or a page script); it shows
   by default, so a page with scripts off or without a Hero shows it */
.aq-header-logo.is-hidden { opacity: 0; visibility: hidden; transition: opacity 0.15s ease, visibility 0s linear 0.15s; }
.aq-header-nav ul { display: flex; align-items: center; gap: var(--space-8); list-style: none; margin: 0; padding: 0; }
.aq-header-nav a { display: inline-block; font: 700 12px/16px var(--font-raleway); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-navy); text-decoration: none; padding: var(--space-1) 0; border-bottom: 2px solid transparent; white-space: nowrap; transition: border-color 0.15s ease; }
.aq-header-nav a:hover, .aq-header-nav a.is-active { border-bottom-color: var(--accent); }
.aq-header-nav a:focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring); }
.aq-header-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; padding: var(--space-2); cursor: pointer; }
.aq-header-toggle span { display: block; width: 22px; height: 2px; background: var(--ink-navy); }
.aq-header-toggle:focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring); }
/* The navigation collapses to the menu button below 800px, where the lock-up and five links no longer fit */
@media (max-width: 800px) {
  .aq-header-toggle { display: flex; }
  .aq-header-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--surface); border-bottom: 1px solid var(--line); padding: var(--space-6) var(--space-8); }
  .aq-header-open .aq-header-nav { display: block; }
  .aq-header-nav ul { flex-direction: column; align-items: flex-start; gap: var(--space-4); }
}
@media (max-width: 640px) {
  .aq-header-inner { padding-left: var(--space-4); padding-right: var(--space-4); }
  .aq-header-nav { padding: var(--space-6) var(--space-4); }
}

/* Hero: always navy, in both themes; re-scopes the theme tokens for anything dropped inside */
.aq-hero { --surface: var(--pms-280); --ink: var(--white); --ink-navy: var(--white); --ink-muted: var(--muted-on-navy); --link: var(--white); --control-hover: var(--pms-7534); --on-control-hover: var(--pms-280); --line: var(--pms-7534);
  position: relative; overflow: hidden; background: var(--pms-280); color: var(--white); padding: var(--space-16) var(--space-8); min-height: 480px; display: flex; align-items: center; box-sizing: border-box; }
/* The ghosted icon: 140% of the band, anchored to its bottom (with 140% that puts its top at -18%), and capped by the
   width the left-aligned copy leaves free (the lead ends about 480px in), so it never sits behind the copy */
.aq-hero-mark { --mark-h: min(140%, 60vw, 100vw - 500px); position: absolute; right: -6%; bottom: calc(-0.157 * var(--mark-h)); height: var(--mark-h); width: auto; fill: var(--watermark-on-navy); pointer-events: none; }
.aq-hero-inner { position: relative; width: 100%; max-width: 1160px; margin: 0 auto; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-6); }
.aq-hero-center .aq-hero-inner { align-items: center; text-align: center; }
.aq-hero-logo { margin-bottom: var(--space-2); }
.aq-hero-eyebrow { margin: 0; font: 700 12px/16px var(--font-raleway); letter-spacing: 0.22em; text-transform: uppercase; color: var(--pms-7534); }
.aq-hero-title { margin: 0; font: 300 36px/44px var(--font-raleway); letter-spacing: 0.01em; color: var(--white); max-width: 22ch; text-wrap: balance; }
.aq-hero-title strong { font-weight: 600; }
.aq-hero-rule { border: 0; border-top: 3px solid var(--accent); width: var(--space-12); margin: 0; } /* the title bar */
.aq-hero-lead { margin: 0; font: 400 17px/28px var(--font-frankruhl); color: var(--muted-on-navy); max-width: 52ch; }
.aq-hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-2); }
@media (max-width: 640px) { .aq-hero { padding: var(--space-12) var(--space-4); min-height: 0; } .aq-hero-title { font-size: 28px; line-height: 36px; } .aq-hero-mark { display: none; } }

/* Section header: an eyebrow, the headline, the title bar and a one-sentence standfirst, centered at the top of a band.
   The title bar is the one accent bar: 48 × 3px of accent, here and in the Hero. */
.aq-section-head { max-width: 640px; margin: 0 auto var(--space-12); text-align: center; }
.aq-section-eyebrow { display: block; margin: 0 0 var(--space-3); font: 700 12px/16px var(--font-raleway); letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-navy); }
.aq-section-title { margin: 0; font: 700 32px/40px var(--font-raleway); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-navy); text-wrap: balance; }
.aq-titlebar { width: var(--space-12); border: 0; border-top: 3px solid var(--accent); margin: var(--space-6) auto; }
.aq-section-standfirst { max-width: 60ch; margin: 0 auto; font: 400 17px/28px var(--font-frankruhl); color: var(--ink); }
[data-theme="dark"] .aq-section-eyebrow, .aq-hero .aq-section-eyebrow, .aq-footer .aq-section-eyebrow { color: var(--pms-7534); }

/* Card: square, a stone hairline, two-digit numbering; the rule variant carries a 3px stone top border instead.
   Copy in body-compact (16/24) under an optional lede; box cards take space-10 inside, space-6 under 640px. */
.aq-card { box-sizing: border-box; display: flex; flex-direction: column; gap: var(--space-3); background: var(--surface); color: var(--ink); border-radius: var(--radius-none); }
.aq-card-box { border: 1px solid var(--line); padding: var(--space-10); }
.aq-card-rule { border-top: 3px solid var(--line); padding: var(--space-8) 0 0; }
.aq-card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.aq-card-num { font: 400 17px/28px var(--font-frankruhl); letter-spacing: 0.05em; font-variant-numeric: tabular-nums; color: var(--ink-navy); }
.aq-card-icon { display: inline-flex; width: 48px; height: 48px; color: var(--accent); }
.aq-card-icon svg, .aq-card-icon img { width: 100%; height: 100%; }
.aq-card-title { margin: 0; font: 600 14px/20px var(--font-raleway); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-navy); text-wrap: balance; }
.aq-card-title a { color: inherit; text-decoration: none; }
.aq-card-title a:hover { text-decoration: underline; text-underline-offset: 3px; }
.aq-card-title a:focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring); }
.aq-card-body { font: 400 16px/24px var(--font-frankruhl); color: var(--ink); }
.aq-card-body p { margin: 0 0 var(--space-3); }
.aq-card-body p:last-child { margin-bottom: 0; }
.aq-card-lede { font: 500 17px/24px var(--font-frankruhl); color: var(--ink-navy); }
@media (max-width: 640px) { .aq-card-box { padding: var(--space-6); } }

/* Footer: always midnight; contact groups above, copyright and legal links below a stone hairline. When it is the page's
   Contact section (aq-footer-contact) it opens with a section header and the band's full top padding. */
.aq-footer { --surface: var(--pms-296); --ink: var(--white); --ink-navy: var(--white); --ink-muted: var(--muted-on-navy); --link: var(--white); --control-hover: var(--pms-7534); --on-control-hover: var(--pms-296); --line: var(--pms-7534);
  background: var(--pms-296); color: var(--white); padding: var(--space-12) var(--space-8) var(--space-8); box-sizing: border-box; }
.aq-footer-contact { padding-top: var(--space-24); }
.aq-footer-groups { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-12) var(--space-16); text-align: center; max-width: 1160px; margin: 0 auto var(--space-12); }
.aq-footer-heading { margin: 0 0 var(--space-2); font: 700 12px/16px var(--font-raleway); letter-spacing: 0.18em; text-transform: uppercase; color: var(--pms-7534); }
.aq-footer-group p { margin: 0; font: 400 14px/24px var(--font-frankruhl); color: var(--white); }
.aq-footer-group a { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }
.aq-footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-3); max-width: 1160px; margin: 0 auto; border-top: 1px solid var(--pms-7534); padding-top: var(--space-6); font: 400 14px/22px var(--font-frankruhl); color: var(--muted-on-navy); }
.aq-footer-links { display: flex; flex-wrap: wrap; gap: var(--space-6); }
.aq-footer-links a { font: 700 12px/16px var(--font-raleway); letter-spacing: 0.14em; text-transform: uppercase; color: var(--white); text-decoration: none; border-bottom: 2px solid transparent; transition: border-color 0.15s ease; }
.aq-footer-links a:hover { border-bottom-color: var(--pms-7534); }
.aq-footer-links a:focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring); }
@media (max-width: 640px) { .aq-footer { padding: var(--space-8) var(--space-4) var(--space-6); } .aq-footer-contact { padding-top: var(--space-16); } .aq-footer-bottom { flex-direction: column; text-align: center; } }

/* Raleway ships old-style figures; every Raleway setting takes lining figures. This rule comes after the component
   rules because a font shorthand resets font-feature-settings: placed before them it was silently undone. */
.aq-divider-title, .aq-callout, .aq-pullquote blockquote, .aq-btn, .aq-header-nav a, .aq-hero-eyebrow, .aq-hero-title,
.aq-section-eyebrow, .aq-section-title, .aq-card-title, .aq-footer-heading, .aq-footer-links a, .aq-eyebrow { font-feature-settings: "lnum" 1; }

/* Collateral sheets */
.aq-sheet { position: relative; overflow: hidden; box-sizing: border-box; border: 1px solid var(--line); background: var(--white); color: var(--pms-296); }
.aq-sheet-navy { background: var(--pms-280); border-color: var(--pms-280); color: var(--white); }
.aq-sheet-text { position: absolute; margin: 0; white-space: nowrap; }
.aq-sheet-name { font-family: var(--font-blair); font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; color: var(--pms-280); }
.aq-sheet-title { font-family: var(--font-mercury); font-style: italic; letter-spacing: 0.02em; color: var(--pms-2925); }
.aq-sheet-detail { font-family: var(--font-mercury); text-transform: uppercase; letter-spacing: 0.01em; color: var(--pms-296); }
.aq-sheet-url { font-family: var(--font-blair); font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; color: var(--pms-2925); }
.aq-sheet-rule { position: absolute; border: 0; border-top: 0.5px solid var(--pms-7534); margin: 0; }

/* Motion: nothing moves for people who asked it not to */
@media (prefers-reduced-motion: reduce) {
  .aq-btn, .aq-header-nav a, .aq-header-logo, .aq-header-logo.is-hidden, .aq-footer-links a { transition: none; }
}