/* ═══════════════════════════════════════════════════════════════
   TRM Solutions — shared page chrome: header, navigation, footer.

   One file owns the chrome on every page. Before this existed there were
   three different navigation designs across ten pages: nine of twelve
   measured header properties differed, including the nav link typeface
   (IBM Plex Sans on five pages, IBM Plex Mono on the other five), three
   different nav gaps (30 / 36 / 40px), two logo sizes, and two CTA paddings.
   Footers had three different link sets, two typefaces and three colours.

   The homepage treatment is canonical; every value here is taken from it.
   Loaded last on every page so it wins over the per-page stylesheets that
   still exist, without those needing to be unpicked.

   Tokens are expected from the page's own :root. Fallbacks are supplied so
   this file is safe on any page whose token set is incomplete.
   ═══════════════════════════════════════════════════════════════ */

/* ── Header ──────────────────────────────────────────────────────
   Deliberately does NOT set position, background or border on .nav.
   index.html uses position:fixed with a hero that pads to clear it; the
   site.css pages use position:sticky in normal flow. Forcing either would
   shift layout on half the site. This file unifies the design system
   values: dimensions, typography, spacing and colour. Page-level layout
   mechanics stay with the page. */
.nav { z-index: 100; }

.nav-inner {
  max-width: var(--container-max, 1200px);
  margin: 0 auto;
  padding: 0 48px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  height: 88px;
}

/* ── Logo ── */
.logo { display: flex; align-items: center; gap: 4px; text-decoration: none; flex-shrink: 0; }

.logo-text {
  font-family: var(--font-body, 'IBM Plex Sans', system-ui, sans-serif);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: 5px;
  color: var(--white, #f2f6ff);
  text-transform: uppercase;
}

.logo-dot {
  width: 8px; height: 8px;
  background: var(--blue, #3b8bff);
  border-radius: 50%;
  margin-left: 2px;
  flex-shrink: 0;
}

/* ── Nav links ──
   Eight labels (Resources sits after Tools). The bar is the 1200px column,
   48px of padding each side, logo and assessment control fixed at the ends.
   1px of tracking on 13px uppercase made the eight labels one run of type,
   and it spent ~60px that the gaps needed. Tracking is 0 so that space
   returns to the row. 26px is the largest gap that still keeps the logo
   flush with the headline and the control flush with the hero card at
   1280 and above. Below 1200px the column shrinks and that gap cannot
   hold, so the links fold into the drawer instead of wrapping or colliding. */
.nav-center { display: flex; gap: 26px; }

.nav-center a {
  font-family: var(--font-body, 'IBM Plex Sans', system-ui, sans-serif);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--text-secondary, #7688a8);
  text-decoration: none;
  padding: 4px 0;
  white-space: nowrap;
  transition: color var(--motion-duration, 340ms) var(--motion-ease, ease-out);
}

.nav-center a:hover,
.nav-center a[aria-current="page"] { color: var(--white, #f2f6ff); }

/* ── Nav CTA ── */
.nav-cta {
  flex-shrink: 0;
  font-family: var(--font-body, 'IBM Plex Sans', system-ui, sans-serif);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 12px 32px;
  border-radius: 6px;
  background: var(--blue, #3b8bff);
  color: #04091a;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: none;
  transition: background-color var(--motion-duration, 340ms) var(--motion-ease, ease-out);
}
.nav-cta:hover {
  background: var(--blue-bright, #5ea3ff);
}
.nav-cta:active { box-shadow: none; }

/* One label. The control used to carry "Readiness assessment" and
   "Assessment" together, and both were readable as one string. "Assessment"
   is the label at every width, short enough for a 390px header. */
@media (max-width: 640px) {
  /* "READINESS ASSESSMENT" took 52% of a 390px header, crowded the logo and
     read as more important than the brand. Shorter label, lighter treatment,
     so the hierarchy is logo, then CTA, then menu. */
  /* !important is required, not decorative: index.html carries
     `.nav-cta { color: var(--midnight) !important }` and an !important padding
     and font-size inside its own media query. Without matching that weight the
     label rendered near-black on a transparent button, i.e. invisible. */
  /* The border here was `var(--blue-border, rgba(59,139,255,0.35))`. The token
     was unset on the five pages that load site.css, so the 0.35 fallback was
     what actually painted, and the ruling is that the canonical 0.12 wins. But
     0.12 is a surface hairline, not a control edge: rendered at 375 the CTA
     stopped reading as a button and sat weaker than the hamburger beside it,
     which inverts the hierarchy this block exists to set (logo, CTA, menu).
     So the presence is carried by a fill instead of a heavier edge — a wash
     well below the desktop treatment's solid --blue, which keeps the mobile
     downgrade intact. Hover moves the border to --blue-border-hover, which is
     what that token is for, rather than inventing a second fill alpha. */
  .nav-cta {
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.6px !important;
    padding: 9px 12px !important;
    box-shadow: none !important;
    background: var(--blue-mid) !important;
    color: var(--blue-bright) !important;
    border: 1px solid var(--blue-border) !important;
  }
  .nav-cta:hover {
    background: var(--blue-mid) !important;
    border-color: var(--blue-border-hover) !important;
    transform: none !important;
    box-shadow: none !important;
  }
  .logo-text { font-size: 20px; letter-spacing: 2.5px; }
  .nav-inner { gap: 8px; }
}

/* ── Skip link ─────────────────────────────────────────────────── */
.skip-link {
  position: absolute;
  left: clamp(20px, 5vw, 48px);
  top: 0;
  z-index: 10001;
  transform: translateY(-120%);
  padding: 10px 16px;
  background: var(--paper, #f4f1ea);
  color: var(--ink, #1a1f2b);
  font-family: var(--font-body, 'IBM Plex Sans', system-ui, sans-serif);
  font-size: var(--t-14, 14px);
  font-weight: 600;
  line-height: 1.35;
  text-decoration: none;
  border-radius: 0 0 8px 8px;
}
.skip-link:focus {
  transform: none;
  top: 8px;
}

/* ── Footer ──────────────────────────────────────────────────────
   One grid on every page. Row 1 is three columns (Company, Who we serve,
   Legal). A rule, then copyright and LinkedIn on one meta row. A second
   rule, then the independence disclaimer, left-aligned to the same edge.
   The old flex row gave the social block flex-basis 100% and justify-end,
   which painted LinkedIn alone on the right under an empty band.

   Type uses the token scale only (--t-11 labels and disclaimer, --t-13
   links and meta). Line-heights are the ratios named in tokens.css.
   Vertical rhythm between the three zones is --footer-gap on both sides
   of each rule, measured edge to edge of the line boxes. */
.site-footer,
body > footer {
  --footer-gap: 28px;
  padding: 0;
  border-top: 1px solid var(--blue-border, rgba(59, 139, 255, 0.12));
  background: var(--midnight, #030816);
  text-align: left;
}

.site-footer .footer-inner {
  max-width: var(--container-max, 1200px);
  margin: 0 auto;
  padding: 48px clamp(20px, 5vw, 48px);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  text-align: left;
  /* The meta row switches from inline to stacked against this box, not the
     viewport, so a 900px guess cannot leave a one-line copyright beside an
     empty social row. */
  container-type: inline-size;
  container-name: footer;
}

.site-footer .footer-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 48px;
  row-gap: var(--footer-gap);
  margin: 0;
  padding: 0;
  /* Page styles target `nav` for the header. This element is also a nav,
     and an unscoped `position: fixed` (about) pins the columns to the
     viewport. Reset every property that header rule sets. */
  position: static;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  z-index: auto;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 0;
}

.site-footer .footer-col-label {
  margin: 0 0 12px;
  font-family: var(--font-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: var(--t-11, 11px);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary, #7688a8);
}

.site-footer .footer-links,
.site-footer .footer-social {
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-footer .footer-links li,
.site-footer .footer-social li {
  margin: 0;
  padding: 0;
  line-height: 1.35;
}

.site-footer .footer-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 8px;
}

.site-footer .footer-links a,
.site-footer .footer-social a,
.site-footer .footer-copy,
.site-footer .footer-copy a {
  font-family: var(--font-body, 'IBM Plex Sans', system-ui, sans-serif);
  font-size: var(--t-13, 13px);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: normal;
  text-transform: none;
  color: var(--text-muted, #7684a0);
  text-decoration: none;
}

.site-footer .footer-links a {
  display: flex;
  align-items: center;
  min-height: 0;
  padding: 0;
  white-space: nowrap;
  transition: color 0.3s;
}
.site-footer .footer-links a:hover,
.site-footer .footer-social a:hover,
.site-footer .footer-copy a:hover { color: var(--white, #f2f6ff); }

.site-footer .footer-copy a {
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

/* Equal space on both sides of the rule, so the three zones share one rhythm. */
.site-footer .footer-rule {
  height: 0;
  margin: var(--footer-gap) 0;
  border: 0;
  border-top: 1px solid var(--blue-border, rgba(59, 139, 255, 0.12));
}

.site-footer .footer-meta {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  column-gap: 32px;
  row-gap: var(--footer-gap);
}

.site-footer .footer-copy {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  flex: 0 0 auto;
  column-gap: 0.65em;
  row-gap: 0;
  margin: 0;
  max-width: 100%;
  min-width: 0;
}
.site-footer .footer-copy > span,
.site-footer .footer-copy > a {
  white-space: nowrap;
}

.site-footer .footer-social {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
  margin: 0;
}
.site-footer .footer-social a {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  white-space: nowrap;
  line-height: 1.35;
  transition: color 0.3s;
}
.site-footer .footer-social svg {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  display: block;
  fill: currentColor;
  /* Measured at 13px / 1.35: centering the 16px mark in the line box
     already lands it on the cap-height center (within a quarter pixel).
     A translate pushed it off that center, so none is applied. */
}

/* Stack only when the copyright (482px) and both labels (256px) cannot
   share a row with the 32px gap. 776px leaves a few pixels of slack so a
   subpixel wrap cannot drop the email onto its own line. */
@container footer (max-width: 776px) {
  .site-footer .footer-meta { flex-wrap: wrap; }
  .site-footer .footer-copy,
  .site-footer .footer-social { flex: 1 1 100%; }
  .site-footer .footer-social { justify-content: flex-start; }
}

.site-footer .footer-disclaimer {
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  text-align: left;
  color: var(--text-muted, #7684a0);
}
.site-footer .footer-disclaimer p {
  max-width: var(--measure-body, 54ch);
  margin: 0;
  font-family: var(--font-body, 'IBM Plex Sans', system-ui, sans-serif);
  font-size: var(--t-11, 11px);
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: normal;
  text-transform: none;
  text-align: left;
  color: var(--text-muted, #7684a0);
}

@media (max-width: 900px) {
  .site-footer .footer-cols { column-gap: 28px; }
}

@media (max-width: 640px) {
  .site-footer .footer-inner { padding-top: 36px; padding-bottom: 36px; }
  .site-footer .footer-cols { grid-template-columns: 1fr; row-gap: var(--footer-gap); }
}

/* ── Responsive ────────────────────────────────────────────────── */
/* ── Mobile hamburger ────────────────────────────────────────────────────────
   Same defect as the drawer below, and left behind when that one was fixed.
   The box styles for this button lived only in site.css, while chrome.css
   carried the media query that sets `display: flex` on it. 404.html loads
   chrome.css without site.css, so its hamburger had no width, height, border
   or flex rules at all: measured, it rendered 4x4 at 375, an unusable menu
   button on the one page a lost reader most needs navigation, and 4x4 again at
   1440 where it should not be visible at all. The button is chrome; its styles
   belong with the rest of the chrome. site.css still declares these and loads
   first, so pages using both are unaffected. */
.nav-hamburger {
  display: none;
  /* Without flex-shrink:0 the nav's flex layout squeezes this to 20px at
     375px, half the intended tap target. */
  flex-shrink: 0;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px; height: 40px;
  background: transparent;
  border: 1px solid var(--blue-border);
  border-radius: 8px;
  cursor: pointer;
  padding: 0;
  transition: border-color 0.2s;
}
.nav-hamburger:hover { border-color: var(--blue-border-hover); }
.nav-hamburger span {
  display: block;
  width: 18px; height: 2px;
  background: var(--text-secondary);
  border-radius: 2px;
  transition: all 0.3s cubic-bezier(0.16,1,0.3,1);
}
.nav-hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.is-open span:nth-child(2) { opacity: 0; }
.nav-hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }


@media (max-width: 1024px) {
  .nav-inner { padding: 0 24px; gap: 18px; }
  .nav-center { gap: 24px; }
  .nav-center a { font-size: 12px; letter-spacing: 0.5px; }
  .nav-cta { padding: 10px 20px; font-size: 11px; letter-spacing: 1px; }
}

@media (max-width: 900px) {
  .nav-center { gap: 18px; }
  .nav-center a { font-size: 11px; }
  .nav-cta { padding: 9px 16px; font-size: 10px; }
}

@media (max-width: 1199px) {
  .nav-inner { padding: 0 24px; gap: 16px; }
  .nav-center { display: none; }
  .nav-hamburger { display: flex; }
  /* With the link row gone, space-between had three items left (logo, the
     assessment control, the menu) and parked the control in the middle of
     the bar. The hero card stayed on the right, so the two no longer shared
     an edge and the card ran off the window. Keep the control against the
     menu. */
  .nav-cta { margin-left: auto; }
}

@media (max-width: 768px) {
  .nav-inner { padding: 0 20px; gap: 10px; height: 72px; }
  .nav-center { display: none; }
  .nav-hamburger { display: flex; }
  /* Drawer display is declared after the base .mobile-drawer rule. A
     display:block here is the same specificity as that later display:none,
     so the later rule wins and an open drawer never paints. */
  /* Without this the row totals more than the viewport and pushes the
     hamburger off screen. */
  .nav-cta { padding: 10px 14px; font-size: 11px; letter-spacing: 1px; }
  .logo-text { font-size: 20px; letter-spacing: 3px; }
}

/* ── Page title parity ──────────────────────────────────────────
   The display serif rendered at weight 400 on about/privacy/terms/
   disclaimer and 500 on the homepage and the site.css pages, so headings
   looked lighter on half the site. 500 is canonical. */
h1, h2, h3, h4,
.about-hero h1, .doc h1, .doc h2, .doc h3 { font-weight: 500; }

/* ── Buttons ────────────────────────────────────────────────────
   Complete definitions, not just geometry: about.html and the legal pages
   do not load site.css, so a shared button must stand on its own here.
   Geometry previously differed by 1-2px between the homepage (17px 30px)
   and the site.css pages (16px 28px). */
.btn-solid {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 17px 30px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-family: var(--font-body, 'IBM Plex Sans', system-ui, sans-serif);
  font-size: 15px;
  font-weight: 600;
  background: var(--blue, #3b8bff);
  color: #04091a;
  text-decoration: none;
  transition: background-color var(--motion-duration, 340ms) var(--motion-ease, ease-out);
}
.btn-solid:hover { background: var(--blue-bright, #5ea3ff); }
.btn-solid:active { background: var(--blue, #3b8bff); }

.btn-text {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 4px;
  /* Set explicitly because this class is used on <button> as well as <a>.
     On a <button> with no background the UA paints its own default button
     face, which rendered a grey slab behind the bundle link in the purchase
     dialog on every page. A text button has no background by definition. */
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: var(--font-body, 'IBM Plex Sans', system-ui, sans-serif);
  font-size: 15px;
  font-weight: 500;
  color: var(--text-bright, #dce4f5);
  text-decoration: underline;
  text-decoration-color: rgba(150, 175, 220, 0.35);
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
  transition: color 0.2s, text-decoration-color 0.2s;
}
.btn-text:hover { color: var(--white, #f2f6ff); text-decoration-color: var(--text-secondary, #7688a8); }

/* ── Mobile section rhythm ───────────────────────────────────────
   index.html set --section-pad to 80px below 768px, which raised it above the
   clamp's own 60px floor and produced roughly a full viewport of empty space
   between sections at 390px. The other pages were at 60px, so the site did not
   even agree with itself on mobile.

   One rhythm for every page: 104px maximum on desktop (the clamp), 56px on
   narrow screens, so the gap between two sections is 112px rather than 160px.
   Heroes keep their own padding, which has to clear the fixed header. */
@media (max-width: 768px) {
  :root { --section-pad: 56px; }
  section:not(.hero):not(.page-hero):not(.about-hero):not(.about-body) {
    padding-top: 56px;
    padding-bottom: 56px;
  }
}


/* ── Footer line length ──────────────────────────────────────────────────────
   Measured at 82 real characters per line on index at 1440. The footer note is
   11px legal text and the last thing a diligence reader scans. */
/* Footer measure lives on .footer-disclaimer p. A cap on every footer
   paragraph squeezed the copyright line and left LinkedIn beside a short
   column. */


/* ── Mobile drawer ───────────────────────────────────────────────────────────
   These lived only in site.css, while chrome.css carried the media query that
   sets `display: block` on the drawer. Any page loading chrome.css WITHOUT
   site.css therefore had a drawer with no containment rules, and 404.html
   rendered its links inline down the page as soon as it was given the shared
   header. The drawer is chrome; its styles belong with the rest of the chrome.

   display:none is the desktop default. It must not follow a mobile
   display:block of equal specificity: this file used to do exactly that, so
   the later display:none won on phones too. Opening the drawer only raises
   opacity, which never paints an element that is display:none. The mobile
   display:block query is therefore AFTER this rule. Desktop does not match
   that query, so the drawer stays hidden there even if .is-open is present.
   site.css loads first and has the same split; this file loads last, so the
   query below is the one that actually wins. */
.mobile-drawer {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 99;
  background: rgba(3,8,22,0.97);
  backdrop-filter: blur(24px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.16,1,0.3,1);
}
.mobile-drawer.is-open { opacity: 1; pointer-events: auto; }
.mobile-drawer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* safe center keeps the list centered when it fits, and starts at the top
     when it doesn't, so the first links are not clipped on a short phone. */
  justify-content: safe center;
  height: 100%;
  gap: 0;
  padding: 88px 24px 28px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.mobile-drawer-inner a {
  font-size: var(--t-16, 16px);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  text-decoration: none;
  padding: 8px 16px;
  border-radius: 8px;
  width: 100%;
  max-width: 280px;
  text-align: center;
  transition: color var(--motion-duration, 340ms) var(--motion-ease, ease-out), background-color var(--motion-duration, 340ms) var(--motion-ease, ease-out);
}
.mobile-drawer-inner a:hover { color: var(--white); background: rgba(59,139,255,0.08); }
.mobile-drawer-cta {
  margin-top: 16px;
  background: linear-gradient(135deg, var(--blue), #2468d6) !important;
  color: #fff !important;
  box-shadow: 0 4px 20px var(--blue-glow);
  font-size: var(--t-15, 15px) !important;
}

@media (max-width: 1199px) {
  .mobile-drawer { display: block; }
}

/* ── Quiet motion ───────────────────────────────────────────────────────────
   Short ease-out. State changes are 340ms. Hero and opening blocks rise 8px
   and stay opaque, so they can be read before JavaScript. The page is settled
   inside a second. Buttons do not move; the arrow may travel 2px. Cards take
   one surface step and a 1px inset edge. The assessment dialog fades and
   rises 8px, and it does not scale. prefers-reduced-motion drops the travel. */

@keyframes trm-rise {
  from { transform: translateY(8px); }
  to { transform: translateY(0); }
}

@keyframes trm-dialog {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.hero-eyebrow,
.page-hero .eyebrow {
  animation: trm-rise var(--motion-duration, 340ms) var(--motion-ease, ease-out) both;
}
.hero h1,
.page-hero h1 {
  opacity: 1;
  animation: trm-rise var(--motion-duration, 340ms) var(--motion-ease, ease-out) 140ms both;
}
.hero-description,
.page-hero .lede {
  opacity: 1;
  animation: trm-rise var(--motion-duration, 340ms) var(--motion-ease, ease-out) 280ms both;
}
.hero-actions,
.page-hero .actions {
  opacity: 1;
  animation: trm-rise var(--motion-duration, 340ms) var(--motion-ease, ease-out) 420ms both;
}
.hero-snapshot,
.page-hero .hero-panel,
.page-hero .hero-aside {
  opacity: 1;
  animation: trm-rise var(--motion-duration, 340ms) var(--motion-ease, ease-out) 560ms both;
}

.btn-arrow {
  display: inline-block;
  transition: transform var(--motion-duration, 340ms) var(--motion-ease, ease-out);
}
.btn-solid:hover .btn-arrow,
.btn-hero:hover .btn-arrow,
.btn-hero--primary:hover .btn-arrow,
.form-submit:hover .btn-arrow,
.intake-launch-btn:hover > span {
  animation: none;
  transform: translateX(var(--motion-arrow, 2px));
}

.btn-solid:hover,
.btn-solid:active,
.btn-hero:hover,
.btn-hero--primary:hover,
.btn-hero--outline:hover,
.nav-cta:hover,
.nav-cta:active,
.intake-launch-btn:hover,
.form-submit:hover,
.intake-btn-next:hover,
.intake-btn-back:hover {
  transform: none;
}

.reveal,
.reveal.is-in,
.reveal.vis {
  opacity: 1;
  transform: none;
}

.grid-bg::before { animation: none; }
.snap-card::after { animation: none; }
.snap-ring-fill {
  animation: none;
  stroke-dashoffset: 49.26;
}
.snap-domain-fill {
  animation: none;
  width: var(--pct);
}

.intake-overlay,
.intake-overlay.open {
  background: rgba(3, 8, 22, 0.94);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.intake-overlay.open {
  opacity: 1;
  visibility: visible;
}
.intake-modal {
  opacity: 1;
  transform: none;
}
.intake-overlay.open .intake-modal {
  animation: trm-dialog var(--motion-duration, 340ms) var(--motion-ease, ease-out) backwards;
}

@media (prefers-reduced-motion: reduce) {
  .hero-eyebrow,
  .hero h1,
  .hero-description,
  .hero-actions,
  .hero-snapshot,
  .page-hero .eyebrow,
  .page-hero h1,
  .page-hero .lede,
  .page-hero .actions,
  .page-hero .hero-panel,
  .page-hero .hero-aside,
  .intake-overlay.open .intake-modal,
  .btn-solid:hover .btn-arrow,
  .btn-hero:hover .btn-arrow,
  .btn-hero--primary:hover .btn-arrow,
  .form-submit:hover .btn-arrow,
  .intake-launch-btn:hover > span {
    animation: none !important;
    transform: none !important;
  }
}