body { margin: 0; background: var(--surface); }
.wrap { max-width: var(--container); margin: 0 auto; padding-inline: var(--space-4); }
@media (min-width: 720px) { .wrap { padding-inline: var(--space-6); } }
.ph { background: #fff2a8; color: #021e30; padding: 0 .25em; border-radius: 3px; font-weight: inherit; }
/* Phones (2026-10-04, owner's review on dev.acoonline.ca: "too crowded, content moves when scrolling").
   - cards lift on hover only where there is a real pointer; on touch screens every tap is a hover, so they twitched
   - section tabs: two rows of three, nothing scrolls (2026-10-08, owner: the swipeable single row made the whole
     screen move sideways on phones; it replaced an untidy wrap on 2026-10-04)
   - program pages: no floating button, the pinned header already shows the same "Talk to an advisor" button
   - preview banner: one line */
@media (hover: none) { .aa-tile:hover { transform: none; } }
@media (max-width: 640px) {
  .aa-tablist { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 0 var(--space-3); }
  .aa-tab { text-align: left; }
  body:has(.aa-tabs) .aa-fab { display: none; }
  }
/* Phones, advisor form (2026-10-04, owner: "the form still moves around on mobile"). A centred box re-centres every
   time its height or the screen's changes (keyboard, bot check, messages), so on phones it is a full-screen panel
   pinned to the top, with no rise animation, and scrolling inside it never carries over to the page behind.
   FORM_JS also leaves the cursor out of the first field on touch screens, so the keyboard waits for a tap. */
@media (max-width: 640px) {
  .aa-dialog { width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0; animation: none; }
  .aa-dialog .aa-card { height: 100%; max-height: 100%; border-radius: 0; border: 0; box-sizing: border-box; overscroll-behavior: contain; align-content: start; overflow-x: hidden; }
}
/* iPhone, form opened on a program page (owner, 2026-10-04: moved there, not from the home page): Safari widens a
   dropdown to fit its chosen text, and a grid item may not shrink below its content, so the long program name made
   the form wider than the screen and draggable sideways. Fields may now shrink to their column. */
.aa-card .aa-field, .aa-card .aa-field select { min-width: 0; max-width: 100%; }
.aa-dialog .aa-card, .aa-card .aa-field { grid-template-columns: minmax(0, 1fr); }
.aa-card .aa-row2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 480px) { .aa-card .aa-row2 { grid-template-columns: minmax(0, 1fr); } }
.aa-card .aa-field select { text-overflow: ellipsis; }

.hero-grid { display: grid; gap: var(--space-6); padding-block: var(--space-8) var(--space-12); position: relative; z-index: 1; }
.hero-copy { display: grid; gap: var(--space-3); align-content: start; }
.hero-copy .aa-lead { margin: 0; font-size: 18px; line-height: 28px; color: var(--ink-muted); max-width: 90ch; }
/* Ad visitors (2026-10-16, after 242 ad visits and no form leads): on a program page opened from an ad the form sits
   in the hero, under the summary, instead of behind "Talk to an advisor" (FORM_JS moves the same form here). Its
   heading reads "Apply now" like the ads; the hero's own advisor button goes, the header's scrolls to the form.
   Same fields and the same consent wording, set a size smaller. Everyone else still gets the pop-up. */
.hero-form { max-width: 560px; margin-top: var(--space-2); }
.hero-form .aa-card { padding: var(--space-4); }
.hero-form .aa-dialog-close { display: none; }
.hero-form .aa-consent { font-size: 13px; line-height: 19px; }
.form-inline .hero-copy .aa-cta-row [data-open-advisor] { display: none; }
@media (max-width: 480px) { .hero-form .aa-card { padding: var(--space-3); } }
@media (max-width: 860px) { .hero-grid { padding-block: var(--space-6) var(--space-8); } }

.band { padding-block: var(--space-16); }
.band.alt { background: var(--surface-alt); }
.stack { display: grid; gap: var(--space-8); }
/* Phones, shorter home page (2026-10-04, same review; about 8,150 px at 390 px wide before). Same words, less room:
   tighter bands, headings and boxes, and two "show all" buttons (programs, questions) wired in SHOW_ALL_JS.
   Without JavaScript nothing is hidden. */
@media (max-width: 640px) {
  .band { padding-block: var(--space-8); }
  .stack { gap: var(--space-6); }
  .aa-section-head h2 { font-size: 24px; line-height: 30px; }
  .aa-section-head p { font-size: 16px; line-height: 24px; }
  .aa-cardgrid, .offices { gap: var(--space-3); }
  .aa-tile, .offices address, .aa-disclosure { padding: var(--space-4); }
  .aa-tile { gap: var(--space-2); }
  .steps { gap: var(--space-4); }
  .aa-faq.is-short > details:nth-child(n+5) { display: none; }
  .aa-faq.is-short + .show-all { display: inline-flex; }
  /* programs: first two per province while both filters say "All"; a chosen filter shows every match */
  #programs:not(:has(.prog-filter option:checked:not([id$="-all"]))) .is-short > .aa-tile:nth-child(n+3) { display: none; }
  #programs:not(:has(.prog-filter option:checked:not([id$="-all"]))) .is-short + .show-all { display: inline-flex; }
}
.show-all { display: none; justify-self: start; }
.prose { max-width: var(--measure); font-size: 16px; line-height: 26px; color: var(--ink); }
.prose p { margin: 0 0 var(--space-3); }
.prose a { color: var(--link); }
.cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); }
@media (max-width: 760px) { .cols { grid-template-columns: 1fr; } }
.list-title { margin: 0 0 var(--space-3); font-size: 20px; line-height: 28px; font-weight: 600; }
.ticks { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-2); }
.ticks li { display: grid; grid-template-columns: 14px 1fr; gap: var(--space-2); font-size: 16px; line-height: 24px; color: var(--ink); }
.ticks li::before { content: ""; width: 8px; height: 8px; margin-top: 8px; border: 2px solid var(--signal); border-radius: 2px; }
.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-raised); }
table.courses { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 22px; }
table.courses th { text-align: left; font: 500 12px/16px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--link); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); }
table.courses td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); vertical-align: top; }
table.courses tr:last-child td { border-bottom: 0; }
table.courses td.mono { font-family: var(--font-mono); color: var(--link); white-space: nowrap; font-variant-numeric: tabular-nums; }
.office { display: grid; gap: var(--space-1); font-size: 16px; line-height: 24px; }
.office b { font-weight: 600; }
.office .mono { font-family: var(--font-mono); font-size: 15px; }

.site-foot { padding-block: var(--space-12) var(--space-8); /* the extra room for the floating button went with it */ background: var(--surface); color: var(--ink); border-top: 1px solid var(--line); }
/* footer columns (2026-10-09): brand and disclosure, programs, services, contact; a bottom bar for the legal links */
.site-foot .foot-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: var(--space-8); align-items: start; }
.foot-brand { display: grid; gap: var(--space-4); }
.foot-h { margin: 0 0 var(--space-3); font: 600 13px/16px var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.foot-col ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-2); font-size: 14px; line-height: 20px; }
.site-foot .foot-col a { text-decoration: none; color: var(--ink-muted); }
.site-foot .foot-col a:hover { color: var(--link); text-decoration: underline; }
.site-foot .foot-contact { margin-bottom: var(--space-3); }
.foot-bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3) var(--space-6); margin-top: var(--space-8);
  padding-top: var(--space-6); border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-subtle); }
@media (max-width: 960px) { .site-foot .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.site-foot img { height: 36px; width: auto; }
.site-foot p { margin: 0 0 var(--space-3); color: var(--ink-muted); font-size: 14px; line-height: 22px; max-width: var(--measure); }
.site-foot .links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); font-size: 14px; }
.site-foot a { color: var(--link); }
@media (max-width: 640px) { .site-foot .foot-grid { grid-template-columns: 1fr; gap: var(--space-6); } }
.form-msg { font-size: 14px; line-height: 22px; margin: 0; }
.form-msg.err { color: var(--danger); }
.form-msg.ok { color: var(--success); }
.form-msg:empty { display: none; }
.booking { display: grid; gap: var(--space-2); }
.booking[hidden] { display: none; }
.booking p, .thanks-msg { font-size: 16px; line-height: 24px; margin: 0; }
/* booking pages (/book/ontario …): a short hero, then the province's GHL booking group at nearly full height */
.book-hero { padding-block: var(--space-8); }
.book-band { padding-block: var(--space-6); }
.book-frame { width: 100%; height: max(680px, calc(100dvh - 120px)); border: 0; overflow: hidden; display: block; background: #fff; border-radius: var(--radius-lg); }
/* theme switch: the icon shows the CURRENT mode, sun in light mode, moon in dark mode (root data-theme, else the
   system setting). Project owner, 2026-10-09: the other way round (icon of the mode you switch to) read as switched. */
.aa-topbar .aa-theme-toggle { width: 36px; height: 36px; border-radius: 50%; }
.aa-theme-toggle:hover { background: rgba(255,255,255,.12); }
.aa-theme-toggle svg { display: block; }
.aa-theme-toggle .i-moon { display: none; }
:root[data-theme="dark"] .aa-theme-toggle .i-moon { display: block; }
:root[data-theme="dark"] .aa-theme-toggle .i-sun { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .aa-theme-toggle .i-moon { display: block; }
  :root:not([data-theme="light"]) .aa-theme-toggle .i-sun { display: none; }
}
/* Services drop-down in the top navigation: <details>, so it opens by click or keyboard without script */
.nav-menu { position: relative; }
.nav-menu summary { list-style: none; cursor: pointer; color: var(--ink-muted); font-size: 15px; font-weight: 500; }
.nav-menu summary::-webkit-details-marker { display: none; }
.nav-menu summary::after { content: " ▾"; font-size: 12px; }
.nav-menu[open] summary, .nav-menu summary:hover { color: var(--ink); }
.nav-menu-list { position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%); min-width: 280px; display: grid; gap: 2px;
  padding: var(--space-2); background: var(--surface-raised); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 12px 32px rgba(0,0,0,.35); }
.nav-menu-list a { padding: 10px 12px; border-radius: 6px; white-space: nowrap; }
.nav-menu-list a:hover { background: rgba(255,255,255,.06); }
/* Phones: a menu button in place of the hidden top links (and of "Find your program") */
.nav-burger { display: none; position: relative; }
.nav-burger summary { list-style: none; cursor: pointer; width: 44px; height: 44px; display: grid; place-content: center; gap: 5px;
  border: 1px solid var(--line); border-radius: 8px; }
.nav-burger summary::-webkit-details-marker { display: none; }
.nav-burger summary span { display: block; width: 20px; height: 2px; background: var(--ink); border-radius: 1px; }
.nav-burger-list { position: absolute; right: 0; top: calc(100% + 10px); width: min(300px, calc(100vw - 32px)); display: grid; gap: 2px;
  padding: var(--space-2); background: var(--surface-raised); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 12px 32px rgba(0,0,0,.35); }
.nav-burger-list a { padding: 12px; border-radius: 6px; color: var(--ink); text-decoration: none; font-size: 16px; }
.nav-burger-list a:hover { background: rgba(255,255,255,.06); }
.nav-burger-h { margin: var(--space-2) 12px 2px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.aa-nav .aa-btn { white-space: nowrap; }
/* phones: the buttons in a button row stack at full width, so they line up at the same size */
@media (max-width: 480px) { .aa-cta-row .aa-btn { flex: 1 1 100%; justify-content: center; } }
@media (max-width: 860px) { .aa-nav-in { gap: var(--space-3); } }
@media (max-width: 400px) { .aa-nav img { height: 40px; } .aa-nav .aa-btn { padding: 0 var(--space-3); } .nav-burger summary { width: 40px; height: 40px; } }
/* Phones, header with "Talk to an advisor" (2026-10-09, owner: the button pushed the menu off the screen). The header
   needed about 342px; these steps make logo, button and menu fit down to 300px wide (320px phones with large text).
   The menu button never shrinks. */
.nav-burger { flex: none; }
@media (max-width: 420px) {
  .aa-nav-in { gap: var(--space-2); }
  .aa-nav img { height: 34px; width: auto; }
  .aa-nav .aa-nav-cta .aa-btn { min-height: 40px; padding: 0 10px; font-size: 14px; }
}
@media (max-width: 350px) {
  .aa-nav img { height: 28px; }
  .aa-nav .aa-nav-cta .aa-btn { padding: 0 8px; font-size: 13px; }
}
@media (max-width: 860px) { .nav-burger { display: block; } .aa-nav-cta.is-wide-only { display: none; } .aa-nav-cta { margin-left: auto; } }
@media (max-width: 860px) { .aa-nav-cta:not(.is-wide-only) + .nav-burger { margin-left: 0; } .aa-nav-cta.is-wide-only + .nav-burger { margin-left: auto; } }
.aa-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.aa-ts:has(iframe) { margin: var(--space-1, 8px) 0; } /* Turnstile: takes space only when Cloudflare shows the check */

/* home */
.slogan { margin: 0; font: 600 20px/28px var(--font-display, inherit); color: var(--ink); text-align: center; }
.who { margin: 0; font-size: 18px; line-height: 28px; color: var(--ink); max-width: 90ch; }
.who b { font-weight: 600; }
a.aa-tile { text-decoration: none; color: var(--ink); }
a.aa-tile:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.prov-group { display: grid; gap: var(--space-3); }
/* two dropdowns side by side, also on phones; the design system's form fields */
.prog-filter { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); max-width: 560px; }
.prog-filter .aa-field { min-width: 0; }
.prog-filter select { cursor: pointer; }
.prog-none { display: none; margin: 0; color: var(--ink-muted); }
@supports not selector(:has(*)) { .prog-filter { display: none; } }
.prov-h { margin: 0; font-family: var(--font-display); font-size: 24px; line-height: 30px; font-weight: 500; }
.aa-tile h4 { margin: 0; font-family: var(--font-display); font-size: 20px; line-height: 26px; font-weight: 500; text-wrap: balance; }
.tp { display: grid; gap: var(--space-8); }
.tp-sec h2 { margin: 0 0 var(--space-3); font-family: var(--font-display); font-size: 26px; line-height: 32px; font-weight: 500; }
.tp-sec p:last-child { margin-bottom: 0; }
.tp-sec .ticks { margin-top: var(--space-3); }
/* staff pages (/staff/*): tables, numbered steps, sub-headings */
.staff .tp-sec h3 { margin: var(--space-5) 0 var(--space-2); font-family: var(--font-display); font-size: 19px; line-height: 26px; font-weight: 600; }
.staff .how-steps { margin: 0 0 var(--space-3); padding-left: 1.5em; list-style: decimal; }
.staff .how-steps li { margin: 0 0 var(--space-2); padding-left: 0.25em; font-size: 16px; line-height: 26px; }
.staff .how-steps li::marker { color: var(--link); font-weight: 600; }
.staff .ticks li { display: block; position: relative; padding-left: 22px; }  /* the site's grid version splits inline <strong> into cells */
.staff .ticks li::before { position: absolute; left: 0; top: 0; }
.staff .how { width: 100%; border-collapse: collapse; margin: var(--space-3) 0; font-size: 15px; line-height: 22px; }
.staff .how th, .staff .how td { padding: 10px 12px; border-top: 1px solid var(--line); text-align: left; vertical-align: top; }
.staff .how th { font-family: var(--font-display); font-weight: 600; color: var(--ink-muted); font-size: 13px; letter-spacing: 0.02em; text-transform: uppercase; }
.staff .how tr:last-child td { border-bottom: 1px solid var(--line); }
.staff .how td:first-child { white-space: nowrap; }
.staff .how.two td:first-child { white-space: normal; width: 42%; }  /* two-column question/answer tables */
.staff code { font-family: var(--font-display); font-size: 0.95em; padding: 1px 6px; border-radius: 6px; background: var(--surface-tint); color: var(--ink); }
.staff .aa-notice { margin: var(--space-3) 0; }
.staff figure.shot { margin: var(--space-3) 0 var(--space-5); }
.staff figure.shot img { display: block; width: 100%; max-width: 720px; height: auto; border: 1px solid var(--line); border-radius: var(--radius-md, 8px); box-shadow: 0 2px 10px rgba(2, 30, 48, .08); }
.staff figure.shot figcaption { margin-top: var(--space-2); max-width: 720px; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.staff .how-steps ul.ticks { margin: var(--space-2) 0 0; }
@media (max-width: 640px) { .staff .how td:first-child { white-space: normal; } .staff .how th, .staff .how td { padding: 8px 6px; } }
.tp-updated { margin: 0; font-size: 14px; color: var(--ink-muted); }
.prog-by { margin: 0; font-size: 15px; line-height: 22px; color: var(--ink-muted); }
.prog-go { margin-top: auto; font-weight: 600; color: var(--link); }
.steps { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); counter-reset: step; }
.steps li { counter-increment: step; display: grid; gap: var(--space-2); font-size: 16px; line-height: 24px; color: var(--ink-muted); }
.steps li::before { content: counter(step, decimal-leading-zero); font: 500 13px/16px var(--font-mono); letter-spacing: .14em; color: var(--link); }
.steps b { color: var(--ink); font-weight: 600; font-size: 18px; line-height: 26px; }
@media (max-width: 760px) { .steps { grid-template-columns: 1fr; } }
.offices { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: var(--space-4); }
.offices address { font-style: normal; display: grid; gap: var(--space-1); align-content: start; padding: var(--space-6); background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); font-size: 15px; line-height: 22px; color: var(--ink-muted); }
.offices address b { color: var(--ink); font-size: 16px; font-weight: 600; }
.offices address .tag { font: 500 12px/16px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--link); }
.offices a { color: var(--link); }
.cta-band { display: grid; gap: var(--space-4); justify-items: start; }
.aa-tile p { margin: 0; font-size: 15px; line-height: 22px; color: var(--ink-muted); }

/* ---- Visual pass, 2026-10-09 (project owner: "more modern and sleek", items 1-7; no wording changed) ---- */
/* 1. reading width ~68 characters (tokens.json measure) and a larger hero heading */
.hero-copy .aa-lead, .who { max-width: var(--measure); }
/* hero heading: 36px (was 44px; 56px, then 40px on 2026-10-09, project owner: "too big", "little smaller") */
.aa-hero h1 { font-size: clamp(30px, 1.2vw + 20px, 36px); line-height: 1.15; }
@media (max-width: 640px) { .aa-hero h1 { font-size: 28px; line-height: 34px; } }
/* 2. alternate bands read as a change of section: stronger surface-alt (tokens.json) and a hairline edge */
/* Section breaks: the hero's gradient line (cyan to orange, fading out at both ends) at every change of section
   (project owner, 2026-10-09; a plain 1px line before). Bands alternate, so each alternate band draws the line on
   its top and bottom edge and every boundary gets exactly one; the footer draws its own unless an alternate band
   just did. Lines inside components (FAQ rows, tables, cards, the pinned header and tab bar) stay plain. */
.band.alt, .site-foot { position: relative; }
.band.alt::before, .band.alt::after, .site-foot::before { content: ""; position: absolute; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--signal) 30%, var(--cta) 70%, transparent); pointer-events: none; }
.band.alt::before, .site-foot::before { top: 0; }
.band.alt::after { bottom: 0; }
.site-foot { border-top: 0; }
main:has(> .band.alt:last-child) + .site-foot::before { display: none; }
.aa-disclosure:has(.slogan) { max-width: none; } /* the slogan strip spans the cards above it, not the reading width */
/* 3. quieter section labels: sans, small caps-style, no dash (monospace with a dash until 2026-10-09) */
.aa-eyebrow { font-family: var(--font-sans); font-size: 13px; font-weight: 600; letter-spacing: .08em; }
.aa-eyebrow::before { display: none; }
.steps li::before, .offices address .tag { font-family: var(--font-sans); font-weight: 600; letter-spacing: .08em; }
.steps li::before { font-size: 14px; }
/* Consistency pass, 2026-10-09 (project owner: items 1-4 of the font and colour check) */
/* 1. every section label looks like the hero's: .aa-section-head p (18px, grey) used to override it in section intros */
.aa-section-head .aa-eyebrow { font-size: 13px; line-height: 16px; color: var(--link); }
/* 2. the privacy link in every form's notice uses the site's link colour (was the browser's default blue/purple) */
.aa-notice a { color: var(--link); }
/* 3. one text family: the former monospace labels and figures are Outfit (tokens.json), with even-width digits and
      the tighter spacing of the other labels */
.aa-fact dt, .aa-wage-figs span, table.courses th, .aa-tile-code { letter-spacing: .08em; font-weight: 600; }
.aa-wage-figs b, table.courses td.mono, .office .mono, .offices a { font-variant-numeric: tabular-nums; }
.aa-wage-figs b { font-weight: 600; letter-spacing: -.01em; }
/* 4. text pages (About, Services, Privacy): section headings at the same size as the home and program pages */
.tp-sec h2 { font-size: 30px; line-height: 36px; }
@media (max-width: 640px) { .tp-sec h2 { font-size: 24px; line-height: 30px; } }
/* 4. program cards: area icon and label, a coloured top edge, lift and shadow on hover (pointer devices only).
      Since 2026-10-09 every card shares the look (feature cards, course modules, office cards); only cards that
      are links lift on hover. */
.aa-tile, .offices address { position: relative; overflow: hidden; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.aa-tile::before, .offices address::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--signal), var(--cta)); }
.aa-tile:not(a):hover { transform: none; border-color: var(--line); }
.offices address { background-color: var(--surface-raised); background-image: radial-gradient(circle at 100% 0%, var(--card-glow), transparent 55%); gap: var(--space-2); }
.offices address .prog-icon { margin-bottom: var(--space-1); }
.aa-tabpanel .offices { grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); } /* program contact: longer names and addresses */
.prog-top { display: flex; align-items: center; gap: var(--space-2); }
.prog-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--surface-tint); color: var(--link); flex: none; }
.prog-card .aa-tile-code { font-family: var(--font-sans); font-size: 13px; font-weight: 600; letter-spacing: .06em; }
@media (hover: hover) { a.aa-tile:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(2, 30, 48, .18); } }
/* (Not on any page since 2026-10-09: "Talk to an advisor" became the header's main button everywhere, so the floating
   copy was dropped. These rules and the script in THEME_JS do nothing without it; kept in case it comes back.)
   6. the floating "Talk to an advisor" button: smaller; with JavaScript it shows only after the hero and hides while
      another advisor button is on screen (the next-step band, the contact section, the footer). Without JavaScript
      it is always there, as before. */
.aa-fab { min-height: 44px; padding: 0 var(--space-4); font-size: 15px; transition: opacity .2s ease, transform .2s ease; }
.js .aa-fab:not(.is-on) { opacity: 0; transform: translateY(12px); pointer-events: none; }
/* 7. sections fade in as they scroll into view: only with JavaScript and when the visitor hasn't asked for less motion */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
  .js .reveal.is-in { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .aa-fab, .aa-tile, .offices address { transition: none; } a.aa-tile:hover { transform: none; } }