/* GENERATED by chrome/build-chrome.mjs — do not hand-edit.
   Sources: css/styles.css (nav/drawer rules) + chrome/footer.css (footer). */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300..800&display=swap');
:root { --white: #FFFFFF; --mist: #F8F9FC; --sky: #ECEEF8; --sky-deep: #C9D0E4; --slate-mist: #D5D9E5; --slate: #5A5F6D; --ink: #1A1D24; --mute: #9AA0AD; --line: rgba(26, 29, 36, .10); --line-soft: rgba(26, 29, 36, .06); --orange: #F48847; --orange-deep: #E4762F; --orange-soft: #FFAD73; --orange-tint: #FFE9D8; --orange-grad: linear-gradient(90deg, #E57A3F 0%, #F48847 77%, #FFAD73 100%); --navy: #17263A; --navy-raised: #22324A; --navy-line: #2E415C; --success: #3D8A5C; --font-sans: 'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; --tracking-tight: -.02em; --tracking-caps: .14em; --container-max: 1240px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 999px; --curtain-r: clamp(18px, 3vw, 32px); --footer-h: 0px; --shadow-sm: 0 1px 2px rgba(26,29,36,.06), 0 3px 8px rgba(26,29,36,.06); --shadow-card: 0 1px 2px rgba(26,29,36,.06), 0 6px 14px rgba(26,29,36,.07), 0 18px 36px rgba(26,29,36,.08); --shadow-hover: 0 2px 4px rgba(26,29,36,.08), 0 12px 24px rgba(26,29,36,.10), 0 32px 56px rgba(26,29,36,.12); --shadow-float: 0 30px 64px rgba(26,29,36,.16); --shadow-focus: 0 0 0 4px rgba(244,136,71,.22); --shadow-glow: 0 1px 2px rgba(26,29,36,.06), 0 8px 18px rgba(244,136,71,.28); --ease-out: cubic-bezier(.2, .7, .2, 1); --ease-reveal: cubic-bezier(.16, 1, .3, 1); --spring-med: 450ms linear(0, 0.2403, 0.6293, 0.9102, 1.0407, 1.0679, 1.0494, 1.0232, 1.005, 0.9968, 0.9954, 0.9968, 0.9986, 0.9997, 1); --spring-snap: 300ms linear(0, 0.3601, 0.7689, 0.9599, 1.0117, 1.0133, 1.0062, 1.0017, 1.0001, 1); --spring-pop: 550ms linear(0, 0.1753, 0.5154, 0.8278, 1.0297, 1.1163, 1.1211, 1.0857, 1.0422, 1.0084, 0.9897, 0.9841, 0.9864, 0.9917, 0.9968, 1.0002, 1.0018, 1); --dur-fast: 180ms; --dur-med: 240ms; --dur-slow: 400ms; }
:is(.topbar,.drawer,#ark-footer) .container { max-width: var(--container-max); margin: 0 auto; padding-inline: clamp(20px, 4vw, 32px); }
:is(.topbar,.drawer,#ark-footer) .btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 26px; border: 1px solid transparent; border-radius: var(--radius-pill); font-weight: 600; font-size: 14px; line-height: 1.3; white-space: nowrap; overflow: hidden; transition: transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out); }
:is(.topbar,.drawer,#ark-footer) .btn::before { content: ''; position: absolute; inset: 0; background: linear-gradient(120deg, transparent, rgba(255,255,255,.45), transparent); transform: translateX(-150%) skewX(-12deg); transition: transform 700ms ease; }
:is(.topbar,.drawer,#ark-footer) .btn:hover::before { transform: translateX(150%) skewX(-12deg); }
:is(.topbar,.drawer,#ark-footer) .btn:hover { transform: translateY(-4px); }
:is(.topbar,.drawer,#ark-footer) .btn:active { transform: translateY(-1px); }
:is(.topbar,.drawer,#ark-footer) .btn-primary { background: var(--orange-grad); color: var(--white); box-shadow: var(--shadow-glow); }
:is(.topbar,.drawer,#ark-footer) .btn-primary:hover { box-shadow: 0 15px 30px rgba(244,136,71,.4); filter: brightness(1.02); }
:is(.topbar,.drawer,#ark-footer) .btn-ghost { background: var(--white); color: var(--ink); border-color: var(--line); }
:is(.topbar,.drawer,#ark-footer) .btn-ghost:hover { color: var(--orange-deep); border-color: var(--orange-deep); box-shadow: var(--shadow-sm); }
:is(.topbar,.drawer,#ark-footer) .btn-ghost-dark { background: rgba(255,255,255,.06); color: var(--white); border-color: var(--navy-line); backdrop-filter: blur(4px); }
:is(.topbar,.drawer,#ark-footer) .btn-ghost-dark:hover { border-color: var(--orange-soft); color: var(--orange-soft); }
:is(.topbar,.drawer,#ark-footer) .btn-lg { padding: 16px 32px; font-size: 16px; }
:is(.topbar,.drawer,#ark-footer) .btn-row { display: flex; gap: 12px; flex-wrap: wrap; }
.topbar { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.88); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line-soft); }
.topbar__inner { padding: 12px clamp(20px, 2.5vw, 40px); display: flex; align-items: center; gap: 24px; }
.nav { margin-right: 8px; }
.brand { display: flex; align-items: center; flex: none; }
.brand img { height: 30px; width: auto; }
.nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav-pill { position: relative; padding: 8px 16px; border-radius: var(--radius-pill); font-size: 14px; font-weight: 600; color: var(--slate); white-space: nowrap; transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.nav-pill::after { content: ''; position: absolute; left: 16px; bottom: 2px; width: 26px; height: 3px; border-radius: 2px; background: var(--slate-mist); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-med) var(--ease-out); }
.nav-pill:hover { color: var(--ink); }
.nav-pill:hover::after { transform: scaleX(1); }
.nav-pill.is-active { color: var(--ink); font-weight: 800; }
.nav-pill.is-active::after { background: linear-gradient(90deg, #E57A3F, #FFAD73); transform: scaleX(1); }
.nav-drop { position: relative; }
.nav-drop__btn { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; cursor: pointer; font-family: inherit; }
.nav-drop__btn svg { width: 11px; height: 11px; transition: transform var(--dur-fast) var(--ease-out); }
.nav-drop:hover .nav-drop__btn svg, .nav-drop:focus-within .nav-drop__btn svg, .nav-drop.is-open .nav-drop__btn svg { transform: rotate(180deg); }
.nav-drop__menu { position: absolute; top: 100%; right: 0; margin-top: 10px; min-width: 176px; background: var(--white); border: 1px solid var(--line-soft); border-radius: 14px; box-shadow: var(--shadow-float); padding: 8px; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .18s var(--ease-out), transform .18s var(--ease-out), visibility .18s; }
.nav-drop__menu::before { content: ''; position: absolute; top: -12px; left: 0; right: 0; height: 12px; }
.nav-drop:hover .nav-drop__menu, .nav-drop:focus-within .nav-drop__menu, .nav-drop.is-open .nav-drop__menu { opacity: 1; visibility: visible; transform: none; }
.nav-drop__menu a { display: block; padding: 9px 14px; border-radius: 9px; font-size: 14px; font-weight: 600; color: var(--slate); }
.nav-drop__menu a:hover { background: var(--sky); color: var(--ink); }
.topbar__cta { display: flex; gap: 10px; flex: none; }
.topbar__cta .btn { padding: 10px 20px; }
.nav-toggle { display: none; align-items: center; justify-content: center; padding: 3px; background: none; border: 0; margin-left: auto; }
.nav-toggle svg { display: block; }
.nav-toggle svg rect { fill: var(--ink); }
.drawer { position: fixed; inset: 0 0 0 auto; width: min(320px, 86vw); background: rgba(248,249,252,.78); -webkit-backdrop-filter: blur(24px) saturate(1.25); backdrop-filter: blur(24px) saturate(1.25); z-index: 70; box-shadow: var(--shadow-float); transform: translateX(105%); transition: transform .65s cubic-bezier(.18,1.24,.32,1); padding: 18px 24px calc(16px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 4px; overflow-y: auto; overflow-x: hidden; }
.drawer.is-open { transform: translateX(0); }
.drawer .nav-pill { display: block; padding: clamp(7px, 1.3vh, 12px) 16px; font-size: 16px; }
.drawer .nav-pill::after { bottom: 3px; }
.drawer__head { display: flex; align-items: center; justify-content: flex-end; margin-bottom: clamp(4px, 1vh, 12px); min-height: 34px; }
.drawer__close { background: none; border: 0; font-size: 26px; line-height: 1; color: var(--slate); padding: 6px 10px; margin-right: -6px; }
.drawer .btn { margin-top: clamp(4px, 1vh, 8px); padding-top: clamp(10px, 1.5vh, 13px); padding-bottom: clamp(10px, 1.5vh, 13px); }
.drawer .btn-ghost { background: rgba(255,255,255,.7); }
.drawer .nav-pill, .drawer .btn, .drawer .socials { opacity: 0; transform: translateX(28px); transition: opacity .4s var(--ease-out), transform .5s var(--ease-out); }
.drawer.is-open .nav-pill, .drawer.is-open .btn, .drawer.is-open .socials { opacity: 1; transform: none; transition-delay: calc(.08s + var(--i, 0) * .045s); }
.drawer__foot { flex: 1 0 auto; display: flex; flex-direction: column; align-items: center; }
.drawmark { display: block; pointer-events: none; flex: none; width: clamp(72px, 12.5vh, 126px); height: auto; aspect-ratio: 1; margin: auto 0; }
.drawmark path { stroke: var(--orange); stroke-width: .7; fill: url(#markgrad); fill-opacity: 0; stroke-dasharray: 1; stroke-dashoffset: 1; }
.drawer.is-open .drawmark path { animation: markDraw 1s var(--ease-out) forwards, markFill .6s ease forwards; }
.drawer.is-open .drawmark path:nth-of-type(1) { animation-delay: .35s, 1.15s; }
.drawer.is-open .drawmark path:nth-of-type(2) { animation-delay: .5s, 1.25s; }
.drawer.is-open .drawmark path:nth-of-type(3) { animation-delay: .65s, 1.35s; }
.drawer.is-open .drawmark path:nth-of-type(4) { animation-delay: .8s, 1.45s; }
.drawer .socials { display: flex; justify-content: center; align-items: center; gap: 14px; }
.drawer .socials a { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--slate-mist); background: rgba(255,255,255,.7); color: var(--slate); }
.drawer .socials svg { width: 18px; height: 18px; display: block; }
.scrim { position: fixed; inset: 0; background: rgba(23,38,58,.44); -webkit-backdrop-filter: blur(14px) saturate(1.05); backdrop-filter: blur(14px) saturate(1.05); z-index: 60; opacity: 0; pointer-events: none; transition: opacity .45s var(--ease-out); }
.scrim.is-open { opacity: 1; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) {
  .drawer { transition-duration: .01s; }
  .drawer .nav-pill, .drawer .btn, .drawer .socials { opacity: 1; transform: none; transition: none; }
  .drawmark path { fill-opacity: 1; stroke-opacity: 0; animation: none !important; }
}
:is(.topbar,.drawer,#ark-footer) .socials { display: flex; gap: 8px; }
:is(.topbar,.drawer,#ark-footer) .socials a { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--line); color: var(--slate); transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--spring-snap); }
:is(.topbar,.drawer,#ark-footer) .socials a:hover { color: var(--orange-deep); border-color: var(--orange-deep); transform: translateY(-2px); }
:is(.topbar,.drawer,#ark-footer) .socials svg { width: 16px; height: 16px; }
@media (max-width: 1320px) and (min-width: 1025px) {
  .topbar__inner { gap: 12px; }
  .nav { gap: 0; margin-right: 0; }
  .nav-pill { padding: 8px 10px; font-size: 13.5px; }
  .nav-pill::after { left: 10px; }
  .topbar__cta { gap: 8px; }
  .topbar__cta .btn { padding: 9px 14px; font-size: 13.5px; }
  .brand img { height: 26px; }
}
@media (max-width: 1024px) {
  .nav { display: none; }
  .nav-toggle { display: flex; }
  .topbar__cta { display: none; }
}
@media (max-width: 720px) {
  .topbar__inner { gap: 8px; padding-block: 10px; }
  .brand img { width: min(132px, 34vw); height: auto; }
  .nav-toggle { padding: 0; }
}
@keyframes markDraw { to { stroke-dashoffset: 0; }  }
@keyframes markFill { to { fill-opacity: 1; stroke-opacity: 0; }  }

/* ============================================================
   Chrome-only rules — YOOtheme page integration
   ============================================================ */

/* Baseline: chrome must not inherit YOOtheme/UIkit typography or spacing */
.topbar, .drawer, .footer { font-family: 'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; line-height: 1.5; color: var(--ink); }
.topbar *, .drawer *, .footer * { box-sizing: border-box; }
.topbar a, .drawer a, .footer a { text-decoration: none; }
.topbar a:hover, .drawer a:hover, .footer a:hover { text-decoration: none; }
.footer h4, .footer p, .footer ul, .footer small { margin: 0; padding: 0; }
.topbar button, .drawer button { font: inherit; cursor: pointer; }

/* Retire the old YOOtheme header/footer while the chrome is active.
   The chrome footer is echoed at wp_footer (outside .tm-page), so the
   .tm-page>footer selector can only ever hit the old one. */
.tm-header, .tm-header-mobile, .tm-toolbar, .tm-page > footer { display: none !important; }

/* The old design also painted a 5.6px orange-gradient border-bottom on
   .tm-page as a pre-footer accent — clashes with the chrome footer. */
.tm-page { border-bottom: 0 !important; }

/* Searchbar Pro sticky pill docks under the chrome navbar (same values as
   the homepage: navbar is 73px tall, 59px on phones). Expanded state keeps
   the vendor z-index — it owns a focus scrim (see 2026-07 incident). */
.hrtk-sbp-search-bar-host__shell.is-sticky { top: 73px !important; }
.hrtk-sbp-search-bar-host__shell.is-sticky.is-compressed { z-index: 40 !important; }
@media (max-width: 720px) {
  .hrtk-sbp-search-bar-host__shell.is-sticky { top: 59px !important; }
}

/* ============================================================
   ARK sitewide footer — production styles.
   Distilled from chrome/footer-v2-rise.html (variant V2 "Rise and
   Stagger", curtain-lift edition, TILT hover on the CTA card).
   Concatenated into chrome.css (plugin root, next to assets/), so
   relative urls resolve one level up, same as the demo.

   Relies on the ARK :root tokens already defined in chrome.css.
   Locally defined token (not in the standard set): --ease-house.

   Class hooks (toggled by footer-engine.js):
     html.ark-curtain        curtain engaged (footer pinned, sheet lifts)
     html.ark-curtain-top    tall footer: top-pinned two-stage variant
     .ark-sheet              added to the page content wrapper
     .footer.st1/.st2/.st3   reveal-progress stagger stages
     .cta-band.is-live       tilt tracking (fast transition)
     .cta-band.is-returning  tilt spring-back (house bezier)
   Default (no JS / not engaged / reduced motion): plain in-flow
   static footer, fully visible.
   ============================================================ */

.footer {
  position: relative;
  background: var(--white);
  overflow: hidden;
  padding: clamp(40px, 6vw, 72px) 0 32px;
  font-size: 16px;
  /* ARK springy overshoot; not part of the shared :root token set */
  --ease-house: cubic-bezier(.18, 1.24, .32, 1);
}

/* Giant watermark A-mark, faint; footer-engine drives its parallax */
.footer__watermark {
  position: absolute; z-index: 0;
  right: clamp(-140px, -8vw, -40px);
  bottom: -120px;
  width: clamp(420px, 52vw, 760px);
  height: auto; aspect-ratio: 1;
  opacity: .05;
  pointer-events: none;
  will-change: transform;
}
.footer__watermark path { fill: url(#markgradf); }

/* Depth layer: engine counter-translates this while being uncovered */
.footer__inner { position: relative; z-index: 1; will-change: transform; }

/* ---------- CTA card ---------- */
.footer .cta-band {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--sky) 0%, var(--mist) 82%);
  border: 1px solid var(--line-soft);
  border-radius: clamp(20px, 2.6vw, 32px);
  padding: clamp(30px, 4.5vw, 52px) clamp(24px, 4vw, 56px);
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(20px, 3vw, 40px); flex-wrap: wrap;
  margin-bottom: clamp(44px, 6vw, 72px);
}
.footer .cta-band > * { position: relative; z-index: 1; }
.footer .cta-band .eyebrow {
  display: block; font-size: 12px; font-weight: 700;
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--orange-deep); margin-bottom: 12px;
}
.footer .cta-band h3 {
  margin: 0 0 10px; font-weight: 800; letter-spacing: var(--tracking-tight);
  font-size: clamp(24px, 3.2vw, 36px); line-height: 1.15; text-wrap: balance;
  color: var(--ink);
}
.footer .cta-band p { margin: 0; color: var(--slate); max-width: 52ch; font-size: 15.5px; }
.footer .btn .arrow { display: inline-block; transition: transform var(--dur-med) var(--ease-house); }
.footer .btn:hover .arrow { transform: translateX(4px); }

/* Tilt hover: sliding specular highlight (the 3D lean itself is driven
   by footer-engine.js through --rx/--ry, consumed in the entrance
   rules below). Pointer-fine devices only. */
@media (hover: hover) and (pointer: fine) {
  html.ark-curtain .footer .cta-band::after {
    content: '';
    position: absolute; inset: 0; z-index: 0; border-radius: inherit;
    background: radial-gradient(200px circle at var(--sx, 50%) var(--sy, 50%), rgba(255,255,255,.6), rgba(255,255,255,0) 62%);
    opacity: 0;
    transition: opacity .35s ease;
    pointer-events: none;
  }
  html.ark-curtain .footer .cta-band:hover::after { opacity: .85; }
}

/* ---------- Link grid ---------- */
.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: clamp(24px, 4vw, 48px);
  margin-bottom: clamp(36px, 5vw, 56px);
}
.footer__logo-row { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }

/* Wordmark sheen: masked shine sweep riding the logo letterforms */
.footer .wordmark-sheen { position: relative; display: inline-block; }
.footer .wordmark-sheen img { height: 30px; width: auto; display: block; }
.footer .wordmark-sheen::after {
  content: ""; position: absolute; inset: 0;
  -webkit-mask-image: url(../assets/img/logo.svg); mask-image: url(../assets/img/logo.svg);
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  background: linear-gradient(105deg, rgba(255,255,255,0) 42%, rgba(255,255,255,.9) 50%, rgba(255,255,255,0) 58%);
  background-size: 250% 100%; background-repeat: no-repeat;
  animation: wmSheenPass 5.6s linear infinite;
  pointer-events: none;
}
@keyframes wmSheenPass {
  0%, 22% { background-position: 115% 0; }
  50%, 100% { background-position: -15% 0; }
}

.footer__brand p { margin: 0 0 20px; font-size: 14px; max-width: 34ch; color: var(--slate); }
.footer__contact { display: flex; flex-direction: column; gap: 10px; }
.footer__contact span { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--slate); }
.footer__contact svg { width: 15px; height: 15px; flex: none; color: var(--orange-deep); }
.footer__contact a { transition: color var(--dur-fast) var(--ease-out); }
.footer__contact a:hover { color: var(--orange-deep); }

.footer h4 {
  margin: 0 0 16px; font-size: 12px; font-weight: 700;
  letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--mute);
}
.footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.footer ul a {
  position: relative; display: inline-block; padding-bottom: 2px;
  font-size: 14.5px; font-weight: 600; color: var(--slate);
  transition: color var(--dur-fast) var(--ease-out);
}
/* Gradient underline slide-in (homepage nav-pill ::after pattern) */
.footer ul a::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, #E57A3F, #FFAD73);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-med) var(--ease-out);
}
.footer ul a:hover { color: var(--ink); }
.footer ul a:hover::after { transform: scaleX(1); }

/* ---------- Base bar ---------- */
.footer__base {
  border-top: 1px solid var(--line-soft); padding-top: 24px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.footer__base small { color: var(--mute); font-size: 13px; }
.footer .socials { display: flex; gap: 8px; }
.footer .socials a {
  width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid var(--line); color: var(--slate);
  background: var(--white);
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform .45s var(--ease-house);
}
.footer .socials a:hover { color: var(--orange-deep); border-color: var(--orange-deep); transform: translateY(-2px); }
.footer .socials svg { width: 16px; height: 16px; }

/* ============================================================
   Curtain treatment (engaged by footer-engine.js only)
   ============================================================ */
html.ark-curtain .ark-sheet {
  position: relative; z-index: 2;
  background: var(--white);
  border-radius: 0 0 var(--curtain-r) var(--curtain-r);
  box-shadow: 0 18px 40px rgba(26,29,36,.14), 0 40px 90px rgba(26,29,36,.12);
}
html.ark-curtain .footer {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 0;
}
/* Tall footer (taller than the viewport, i.e. real phones): pinned
   TOP-aligned; the engine translates it up during reveal stage 2. */
html.ark-curtain.ark-curtain-top .footer {
  bottom: auto; top: 0;
}

/* ---------- Rise and Stagger entrance states ----------
   Hidden states exist only while the curtain is engaged, so the
   default footer (no JS / engine bailed) is fully visible. Stages
   st1 (CTA card) / st2 (columns) / st3 (base bar) are toggled from
   reveal progress by the engine. */
html.ark-curtain .cta-band {
  opacity: 0; transform: translateY(56px);
  transition: transform .9s var(--ease-house), opacity .5s ease;
}
html.ark-curtain .f-col {
  opacity: 0; transform: translateY(30px) scale(.985);
  transition: transform .75s var(--ease-house), opacity .45s ease;
  transition-delay: calc(var(--i, 0) * .08s), calc(var(--i, 0) * .08s);
}
html.ark-curtain .footer__base {
  opacity: 0;
  transition: opacity .7s ease .12s;
}
/* Shown CTA transform composes the tilt vars (0deg = visually
   identity) so the tilt can drive it without fighting the entrance. */
html.ark-curtain .footer.st1 .cta-band {
  opacity: 1;
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
}
html.ark-curtain .footer.st2 .f-col { opacity: 1; transform: none; }
html.ark-curtain .footer.st3 .footer__base { opacity: 1; }
/* While tilting, transitions get out of the way (the engine lerp
   supplies the smoothing); on leave the engine swaps is-live for
   is-returning to hand the spring-back to the house bezier. */
html.ark-curtain .cta-band.is-live { transition: transform .06s linear, opacity .5s ease; }
html.ark-curtain .cta-band.is-returning { transition: transform .7s var(--ease-house), opacity .5s ease; }

/* ---------- Responsive grid ---------- */
@media (max-width: 1024px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

/* ---------- Compact mobile footer ---------- */
@media (max-width: 720px) {
  .footer { padding: 24px 0 14px; }
  .footer__watermark { width: 340px; right: -90px; bottom: -60px; }

  /* CTA card condenses */
  .footer .cta-band {
    flex-direction: column; align-items: flex-start;
    padding: 22px 20px; gap: 14px;
    border-radius: 18px; margin-bottom: 24px;
  }
  .footer .cta-band .eyebrow { font-size: 11px; margin-bottom: 8px; }
  .footer .cta-band h3 { font-size: 20px; margin-bottom: 6px; }
  .footer .cta-band p { font-size: 13.5px; line-height: 1.45; }
  .footer .cta-band .btn { width: 100%; padding: 13px 24px; font-size: 15px; }

  /* Brand full-width on top, Browse + Support side by side,
     Company below as a 2-across list */
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 20px 16px; margin-bottom: 20px; }
  .footer__brand { grid-column: 1 / -1; }
  .footer__grid nav[aria-label="Company"] { grid-column: 1 / -1; }
  .footer__grid nav[aria-label="Company"] ul { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 16px; }

  .footer__logo-row { margin-bottom: 10px; }
  .footer .wordmark-sheen img { height: 24px; }
  .footer__brand p { font-size: 13px; margin-bottom: 10px; max-width: none; }

  /* Contact strip condenses to one wrapped row of small items */
  .footer__contact { flex-direction: row; flex-wrap: wrap; gap: 6px 16px; }
  .footer__contact span { font-size: 12.5px; gap: 6px; }
  .footer__contact svg { width: 13px; height: 13px; }

  .footer h4 { font-size: 11px; margin-bottom: 10px; }
  .footer ul { gap: 7px; }
  .footer ul a { font-size: 13.5px; }

  /* Base bar: single row, smaller chips */
  .footer__base { padding-top: 14px; gap: 10px; flex-wrap: nowrap; }
  .footer__base small { font-size: 11.5px; }
  .footer__base .rights { display: none; }
  .footer .socials { gap: 6px; }
  .footer .socials a { width: 30px; height: 30px; }
  .footer .socials svg { width: 13px; height: 13px; }
}
@media (max-width: 480px) {
  .footer .cta-band p { display: none; }
  .footer .cta-band h3 { margin-bottom: 0; }
}

/* ---------- Reduced motion ----------
   footer-engine.js never engages the curtain under reduced motion,
   so these are belt-and-braces: everything visible, nothing animated. */
@media (prefers-reduced-motion: reduce) {
  .footer .cta-band, .footer .f-col, .footer__base {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
  .footer .cta-band::before, .footer .cta-band::after { display: none !important; }
  .footer .wordmark-sheen::after { animation: none; opacity: 0; }
  .footer__watermark { transform: none !important; }
  .footer__inner { transform: none !important; }
  .footer .btn, .footer .btn::before, .footer .socials a, .footer ul a::after { transition: none !important; }
}