/* Home page (approved upgrade preview v7, 30 Oct 2026), in the live site's colours and fonts.
   This file loads on the home page only. Glass sits on the floating parts only: header, photo captions, phone bar.
   Every loop uses transform or opacity, so nothing on the page shifts. */
html { overflow-x: hidden; }
body.apc-call-first { overflow-x: hidden; }
/* clip keeps the sticky header working; older iPhones fall back to hidden above */
@supports (overflow: clip) { body.apc-call-first { overflow-x: clip; } }

.apc-call-first {
  --cf-bg: #f8f5ef;
  --cf-ink: #253532;
  --cf-deep: #073734;
  --cf-muted: #5b6b68;
  --cf-teal: #0f766e;
  --cf-bright: #2dd4bf;
  --cf-coral: #e8997a;
  --cf-mint: #e6f4f1;
  --cf-line: rgba(7, 55, 52, .11);
  --cf-on-dark: #afc6c1;
  --cf-card: #fff;
  --cf-glass: rgba(255, 255, 255, .8);
  --cf-ease: cubic-bezier(.22, 1, .36, 1);
  margin: 0;
  background: var(--cf-bg) !important;
  color: var(--cf-ink);
}

/* Glass, with a solid fallback for old browsers and for readers who ask for less transparency */
.apc-call-first .cf-tag, .apc-call-first .cf-bar, html body.apc-v2.apc-call-first .apc-shell-inner {
  background: var(--cf-glass);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  backdrop-filter: blur(18px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, .85);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 8px 28px rgba(7, 55, 52, .09);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .apc-call-first .cf-tag, .apc-call-first .cf-bar, html body.apc-v2.apc-call-first .apc-shell-inner { background: #fff; }
}
@media (prefers-reduced-transparency: reduce) {
  .apc-call-first .cf-tag, .apc-call-first .cf-bar, html body.apc-v2.apc-call-first .apc-shell-inner {
    background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none;
  }
}

/* Header: the same links and menu as every page, as a floating glass bar */
html body.apc-v2.apc-call-first .apc-site-header {
  padding: 10px 16px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html body.apc-v2.apc-call-first .apc-shell-inner {
  width: min(100%, 1040px);
  min-height: 60px;
  padding: 6px 8px 6px 18px;
  border-radius: 30px;
}
html body.apc-v2.apc-call-first .apc-shell-logo img { height: 40px; width: auto; }
@media (max-width: 760px) {
  html body.apc-v2.apc-call-first .apc-shell-logo img { height: 34px; }
}

/* The shared layer makes each home section a full screen with snapping; this page uses plain bands. */
.apc-call-first main > section {
  display: block !important;
  min-height: 0 !important;
  height: auto !important;
  scroll-snap-align: none !important;
  scroll-snap-stop: normal !important;
}
.apc-call-first .cf-wrap { width: min(1120px, calc(100% - 40px)); margin-inline: auto; }
.apc-call-first main :is(h1, h2, h3) {
  font-family: 'DM Serif Display', Georgia, serif;
  font-weight: 400;
  color: var(--cf-deep);
  line-height: 1.08;
  letter-spacing: -.02em;
  text-wrap: balance;
  overflow-wrap: break-word;
  margin: 0;
  max-width: none;
}
.apc-call-first main h2 { font-size: clamp(2.125rem, 4.8vw, 3.625rem); }
.apc-call-first main p { margin: 0; max-width: none; }
.apc-call-first main :focus-visible { outline: 3px solid var(--cf-teal); outline-offset: 3px; border-radius: 8px; }
.apc-call-first .cf-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Buttons: one solid teal action with a white arrow circle, shrinks a little when pressed */
.apc-call-first .cf-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 56px; padding: 9px 9px 9px 26px; border-radius: 999px;
  background: var(--cf-teal); color: #fff !important; text-decoration: none !important;
  font: 600 1rem/1.2 'DM Sans', system-ui, sans-serif; white-space: nowrap;
  box-shadow: 0 1px 2px rgba(7, 55, 52, .12), 0 8px 22px rgba(15, 118, 110, .25);
  transition: transform 160ms var(--cf-ease), background 200ms ease;
}
.apc-call-first .cf-btn i {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  background: #fff; color: var(--cf-teal); font-style: normal; transition: transform 300ms var(--cf-ease);
}
.apc-call-first .cf-btn:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .apc-call-first .cf-btn:hover { background: var(--cf-deep); }
  .apc-call-first .cf-btn:hover i { transform: translateX(2px) rotate(-45deg); }
}

/* Hero */
.apc-call-first .cf-hero { padding-block: 44px 0; text-align: center; }
.apc-call-first .cf-hero h1 { font-size: clamp(2.875rem, 7.4vw, 6.125rem); line-height: 1; letter-spacing: -.03em; text-wrap: initial; }
/* Every word sits in the same grid cell, so the line never changes width while the words change. */
.apc-call-first .cf-rot { display: inline-grid; justify-items: center; }
.apc-call-first .cf-rot .cf-w { grid-area: 1 / 1; white-space: nowrap; opacity: 0; }
.apc-call-first .cf-rot .cf-w1 { opacity: 1; }
.apc-call-first .cf-rot i { position: relative; display: inline-block; isolation: isolate; font-style: normal; }
.apc-call-first .cf-rot i::after {
  content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 68%; height: 18%;
  background: rgba(232, 153, 122, .55); transform-origin: left; transform: scaleX(1);
}
/* With the script: 8 words x 2.6 s, looping. The offset of .7 s lets the first word start already in place. */
.apc-call-first .cf-loop .cf-rot .cf-w, .apc-call-first .cf-loop .cf-rot i::after {
  animation: cf-word 20.8s var(--cf-ease) var(--cf-at) infinite both;
}
.apc-call-first .cf-loop .cf-rot i::after { animation-name: cf-under; }
.apc-call-first .cf-w1 { --cf-at: -.7s; }
.apc-call-first .cf-w2 { --cf-at: 1.9s; }
.apc-call-first .cf-w3 { --cf-at: 4.5s; }
.apc-call-first .cf-w4 { --cf-at: 7.1s; }
.apc-call-first .cf-w5 { --cf-at: 9.7s; }
.apc-call-first .cf-w6 { --cf-at: 12.3s; }
.apc-call-first .cf-w7 { --cf-at: 14.9s; }
.apc-call-first .cf-w8 { --cf-at: 17.5s; }
@keyframes cf-word {
  0% { opacity: 0; transform: translateY(.38em); filter: blur(8px); }
  3.4%, 12.5% { opacity: 1; transform: none; filter: none; }
  15.9%, 100% { opacity: 0; transform: translateY(-.38em); filter: blur(8px); }
}
@keyframes cf-under {
  0%, 3.4% { transform: scaleX(0); }
  8%, 100% { transform: scaleX(1); }
}
@keyframes cf-word-fade {
  0% { opacity: 0; }
  3.4%, 12.5% { opacity: 1; }
  15.9%, 100% { opacity: 0; }
}
/* Pause stops the headline word and the photo captions together. */
.apc-call-first .cf-paused :is(.cf-w, .cf-mark, .cf-ring, .cf-tag), .apc-call-first .cf-paused .cf-rot i::after { animation-play-state: paused !important; }
.apc-call-first .cf-pause {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 12px; padding: 0 16px;
  border: 1px solid var(--cf-line); border-radius: 999px; background: transparent; color: var(--cf-muted);
  font: inherit; font-size: 1rem; cursor: pointer; transition: transform 160ms var(--cf-ease);
}
html:not(.cf-js) .apc-call-first .cf-pause { display: none; }
.apc-call-first .cf-pause:active { transform: scale(.97); }
.apc-call-first .cf-pause svg { width: 14px; height: 14px; fill: currentColor; flex-shrink: 0; }
.apc-call-first .cf-pause .cf-ico-play, .apc-call-first .cf-paused .cf-pause .cf-ico-pause { display: none; }
.apc-call-first .cf-paused .cf-pause .cf-ico-play { display: block; }
.apc-call-first .cf-lede { margin: 18px auto 0 !important; max-width: 32rem !important; font-size: 1.1875rem; color: var(--cf-muted); text-wrap: balance; }
.apc-call-first .cf-cta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 24px; margin-top: 26px; }
.apc-call-first .cf-qc { color: var(--cf-muted); text-decoration: underline; text-decoration-color: rgba(7, 55, 52, .3); text-underline-offset: 4px; }
.apc-call-first .cf-qc:hover { text-decoration-color: currentColor; }
.apc-call-first .cf-under { margin-top: 14px !important; color: var(--cf-muted); font-size: 1rem; }

/* Hero photo with its three noticed details */
.apc-call-first .cf-photo {
  position: relative; max-width: 960px; margin: 44px auto 0; aspect-ratio: 3 / 2; overflow: hidden;
  border: 8px solid #fff; border-radius: 40px; background: #fff9f1; box-shadow: 0 30px 80px rgba(7, 55, 52, .18);
}
.apc-call-first .cf-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* The dots use the photo's own coordinates and crop with it, so they stay on the hand, paper and arm. */
.apc-call-first .cf-marks { position: absolute; inset: 0; width: 100%; height: 100%; }
.apc-call-first .cf-mark { opacity: 0; }
.apc-call-first .cf-pip { fill: var(--cf-coral); stroke: #fff; stroke-width: 3; }
.apc-call-first .cf-ring { fill: none; stroke: #fff; stroke-width: 2; transform-box: fill-box; transform-origin: center; }
.apc-call-first .cf-loop .cf-ring { animation: cf-ring 1.5s ease-out infinite; }
.apc-call-first .cf-tag {
  position: absolute; left: 50%; bottom: 16px; translate: -50% 0; opacity: 0; padding: 8px 16px; border-radius: 999px;
  color: var(--cf-deep); font-weight: 600; font-size: 1rem; line-height: 1.3; white-space: nowrap; pointer-events: none;
}
/* One 9 s loop: each detail about 1.5 s, the last one holds, then everything fades and it restarts. */
.apc-call-first .cf-loop :is(.cf-d1, .cf-d2) { animation: cf-detail 9s ease var(--cf-at) infinite both; }
.apc-call-first .cf-loop .cf-d3 { animation: cf-detail-last 9s ease var(--cf-at) infinite both; }
.apc-call-first .cf-d1 { --cf-at: .4s; }
.apc-call-first .cf-d2 { --cf-at: 1.9s; }
.apc-call-first .cf-d3 { --cf-at: 3.4s; }
@keyframes cf-detail { 0% { opacity: 0; } 3.5%, 13.5% { opacity: 1; } 16.5%, 100% { opacity: 0; } }
@keyframes cf-detail-last { 0% { opacity: 0; } 3.5%, 46% { opacity: 1; } 54%, 100% { opacity: 0; } }
@keyframes cf-ring { from { transform: scale(1); opacity: .8; } to { transform: scale(3.2); opacity: 0; } }

@media (max-width: 700px) {
  .apc-call-first .cf-hero { padding-block: 12px 0; }
  .apc-call-first .cf-hero h1 { font-size: min(10.4vw, 2.75rem); }
  .apc-call-first .cf-pause { margin-top: 6px; }
  .apc-call-first .cf-lede { margin-top: 8px !important; font-size: 1.0625rem; }
  .apc-call-first .cf-cta { margin-top: 12px; gap: 6px; flex-direction: column; }
  .apc-call-first .cf-btn { min-height: 50px; }
  .apc-call-first .cf-under { display: none; }
  .apc-call-first .cf-photo { margin-top: 14px; aspect-ratio: 4 / 3; border-width: 5px; border-radius: 26px; }
  .apc-call-first .cf-tag { bottom: 8px; padding: 5px 12px; }
}

/* Load sequence: content is there from the first paint; this only eases it in */
.apc-call-first .cf-rise { animation: cf-rise 760ms var(--cf-ease) both; }
.apc-call-first .cf-rise-1 { animation-delay: 60ms; }
.apc-call-first .cf-rise-2 { animation-delay: 120ms; }
.apc-call-first .cf-rise-3 { animation-delay: 180ms; }
@keyframes cf-rise { from { transform: translateY(22px); opacity: .01; } }

/* Bands */
.apc-call-first .cf-band { padding-block: 104px; text-align: center; }
.apc-call-first .cf-side { margin-top: 14px !important; font-size: 1rem; color: var(--cf-teal); font-weight: 600; }
@media (max-width: 700px) { .apc-call-first .cf-band { padding-block: 72px; } }

/* On the call */
.apc-call-first .cf-call { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 48px 0 0; padding: 0; list-style: none; }
.apc-call-first .cf-call li {
  position: relative; min-width: 0; margin: 0; padding: 30px 28px; overflow: hidden; border-radius: 32px; background: var(--cf-card);
  text-align: left; list-style: none; box-shadow: 0 4px 18px rgba(7, 55, 52, .06);
  transition: transform 350ms var(--cf-ease), box-shadow 350ms var(--cf-ease);
}
@media (hover: hover) and (pointer: fine) { .apc-call-first .cf-call li:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(7, 55, 52, .1); } }
.apc-call-first .cf-num { position: absolute; right: 22px; top: 16px; font: 400 4rem/.9 'DM Serif Display', Georgia, serif; color: var(--cf-mint); }
.apc-call-first .cf-call h3 { position: relative; padding-right: 44px; font-size: 1.625rem; line-height: 1.15; }
.apc-call-first .cf-call p { position: relative; margin-top: 8px !important; color: var(--cf-muted); }
@media (max-width: 820px) { .apc-call-first .cf-call { grid-template-columns: minmax(0, 1fr); max-width: 460px; margin-inline: auto; } }

/* Pathway Programme sheet; the reviews panel rises over its bottom edge */
.apc-call-first .cf-sheet { padding-block: 104px 176px; border-radius: 56px 56px 0 0; background: var(--cf-deep); color: #d7e6e2; }
.apc-call-first .cf-sheet h2 { color: #fff9f1 !important; }
.apc-call-first .cf-sheet .cf-side { color: var(--cf-bright); }
.apc-call-first .cf-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; margin: 60px 0 0; padding: 0; list-style: none; }
.apc-call-first .cf-step { min-width: 0; margin: 0; border-radius: 20px; list-style: none; cursor: pointer; transition: opacity 600ms var(--cf-ease); }
.apc-call-first .cf-steps.cf-live .cf-step:not(.cf-on) { opacity: .34; }
.apc-call-first .cf-step-n {
  display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto; border-radius: 50%;
  background: #0b4642; border: 1px solid rgba(45, 212, 191, .35); color: #fff9f1; font: 400 1.5rem/1 'DM Serif Display', Georgia, serif;
  transition: background 500ms var(--cf-ease), color 500ms var(--cf-ease), transform 500ms var(--cf-ease), box-shadow 500ms var(--cf-ease);
}
.apc-call-first .cf-live .cf-on .cf-step-n { background: var(--cf-bright); color: var(--cf-deep); transform: scale(1.15); box-shadow: 0 0 0 8px rgba(45, 212, 191, .16); }
/* Reduce Motion: the fade stays, the number does not grow. !important because the shared layer flattens transitions. */
.apc-call-first .cf-calm .cf-on .cf-step-n { transform: none; }
.apc-call-first .cf-calm .cf-step { transition-duration: 600ms !important; }
.apc-call-first .cf-calm .cf-step-n { transition-duration: 500ms !important; }
.apc-call-first .cf-step b { display: block; margin-top: 18px; color: var(--cf-bright); font-size: 1rem; font-weight: 600; }
.apc-call-first .cf-step h3 { margin-top: 4px; color: #fff9f1 !important; font-size: 1.625rem; }
.apc-call-first .cf-step p { margin: 6px auto 0 !important; max-width: 21ch !important; color: var(--cf-on-dark); }
.apc-call-first .cf-keep { margin: 52px auto 0 !important; max-width: 36rem !important; color: var(--cf-on-dark); }
@media (max-width: 820px) {
  .apc-call-first .cf-sheet { padding-block: 72px 128px; border-radius: 40px 40px 0 0; }
  .apc-call-first .cf-steps { grid-template-columns: minmax(0, 1fr); gap: 28px; max-width: 420px; margin: 44px auto 0; }
  .apc-call-first .cf-step { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 18px; align-items: start; text-align: left; }
  .apc-call-first .cf-step-n { margin: 0; }
  .apc-call-first .cf-step b { margin-top: 4px; }
  .apc-call-first .cf-step p { margin-left: 0 !important; max-width: none !important; }
}

/* What parents say */
.apc-call-first .cf-say { position: relative; margin-top: -56px; padding-block: 104px 88px; border-radius: 56px 56px 0 0; background: var(--cf-bg); }
.apc-call-first .cf-car { max-width: 860px; margin: 44px auto 0; }
.apc-call-first .cf-track {
  position: relative; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  -webkit-overflow-scrolling: touch; border-radius: 36px; background: var(--cf-card); box-shadow: 0 8px 30px rgba(7, 55, 52, .07);
}
.apc-call-first .cf-track::-webkit-scrollbar { display: none; }
.apc-call-first .cf-q {
  flex: 0 0 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; min-width: 0; min-height: 340px;
  margin: 0; padding: 44px 48px 36px; scroll-snap-align: center;
}
.apc-call-first .cf-q blockquote { margin: 0; max-width: 34ch; font: 400 clamp(1.3125rem, 2.6vw, 1.875rem)/1.3 'DM Serif Display', Georgia, serif; color: var(--cf-deep); }
.apc-call-first .cf-q blockquote::before { content: "\201C"; display: block; margin-bottom: 6px; font-size: 5rem; line-height: .55; color: var(--cf-coral); }
.apc-call-first .cf-q figcaption { display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; font-size: 1rem; color: var(--cf-muted); }
.apc-call-first .cf-avatar { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--cf-mint); color: var(--cf-teal); font-weight: 700; }
.apc-call-first .cf-ctrl { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 22px; }
.apc-call-first .cf-arw {
  width: 48px; height: 48px; border: 1px solid var(--cf-line); border-radius: 50%; background: var(--cf-card); color: var(--cf-deep);
  font-size: 1.125rem; cursor: pointer; transition: background 200ms ease, transform 160ms var(--cf-ease);
}
.apc-call-first .cf-arw:hover { background: var(--cf-mint); }
.apc-call-first .cf-arw:active { transform: scale(.94); }
.apc-call-first .cf-rdots { display: flex; }
.apc-call-first .cf-rdots button { display: grid; place-items: center; width: 26px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; }
.apc-call-first .cf-rdots button::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: rgba(7, 55, 52, .28); transition: transform 300ms var(--cf-ease), background 300ms ease; }
.apc-call-first .cf-rdots button.cf-on::before { background: var(--cf-teal); transform: scale(1.5); }
.apc-call-first .cf-pr { margin-top: 24px !important; color: var(--cf-muted); }
@media (max-width: 700px) {
  .apc-call-first .cf-say { margin-top: -40px; padding-block: 72px; border-radius: 40px 40px 0 0; }
  .apc-call-first .cf-track { border-radius: 28px; }
  .apc-call-first .cf-q { min-height: 380px; padding: 32px 22px 28px; }
}

/* Meet CJ */
.apc-call-first .cf-meet {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 28px; align-items: center; max-width: 960px; margin: 56px auto 0; padding: 24px 28px;
  border-radius: 32px; background: var(--cf-card); text-align: left; box-shadow: 0 4px 18px rgba(7, 55, 52, .06);
}
.apc-call-first .cf-meet img { display: block; width: 96px; height: 96px; border: 4px solid #fff; border-radius: 50%; object-fit: cover; box-shadow: 0 10px 26px rgba(7, 55, 52, .14); }
.apc-call-first .cf-meet h3 { font-size: 1.625rem; }
.apc-call-first .cf-meet p { margin-top: 6px !important; color: var(--cf-muted); }
.apc-call-first .cf-more { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--cf-teal); font-weight: 600; text-decoration: none; white-space: nowrap; }
.apc-call-first .cf-more:hover { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 760px) { .apc-call-first .cf-meet { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 12px; text-align: center; } }

/* Questions */
.apc-call-first .cf-faq-band { padding-block: 24px 0; }
.apc-call-first .cf-faq { max-width: 760px; margin: 44px auto 0; text-align: left; }
.apc-call-first .cf-faq details { margin: 0 0 10px; padding: 0 22px; border-radius: 22px; background: var(--cf-card); box-shadow: 0 2px 10px rgba(7, 55, 52, .04); }
.apc-call-first .cf-faq summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 46px; padding: 16px 0; cursor: pointer; list-style: none; font-size: 1.0625rem; font-weight: 500; color: var(--cf-ink); }
.apc-call-first .cf-faq summary::-webkit-details-marker { display: none; }
.apc-call-first .cf-faq summary::after {
  content: "+"; flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--cf-mint); color: var(--cf-teal); font-size: 1.25rem; line-height: 1; transition: transform 300ms var(--cf-ease);
}
.apc-call-first .cf-faq details[open] summary::after { transform: rotate(45deg); }
.apc-call-first .cf-faq details p, .apc-call-first .cf-faq details ul { margin: 0 0 20px !important; color: var(--cf-muted); }
.apc-call-first .cf-faq details ul { padding-left: 20px; }
.apc-call-first .cf-faq details a { color: var(--cf-teal); text-decoration: underline; text-underline-offset: 3px; }

/* Final card: a line draws itself behind the words, holds, fades and repeats */
.apc-call-first .cf-final { position: relative; isolation: isolate; overflow: hidden; margin: 48px 0 96px; padding: 80px 28px; border-radius: 44px; background: var(--cf-deep); text-align: center; }
.apc-call-first .cf-final h2 { color: #fff9f1 !important; }
.apc-call-first .cf-final p { margin: 14px auto 0 !important; max-width: 30rem !important; color: var(--cf-on-dark); }
.apc-call-first .cf-final svg { position: absolute; z-index: -1; left: 0; bottom: 0; width: 100%; height: 55%; opacity: .5; }
.apc-call-first .cf-final path { fill: none; stroke: var(--cf-bright); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; animation: cf-loopline 10s ease-out infinite; }
@keyframes cf-loopline {
  0% { stroke-dashoffset: 1; opacity: 1; }
  40%, 80% { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}
.apc-call-first .cf-final .cf-cta { margin-top: 26px; }
.apc-call-first .cf-final .cf-btn { background: var(--cf-bright); color: var(--cf-deep) !important; }
.apc-call-first .cf-final .cf-btn i { background: var(--cf-deep); color: var(--cf-bright); }
@media (max-width: 700px) { .apc-call-first .cf-final { margin-bottom: 72px; padding: 56px 22px; border-radius: 32px; } }

/* Phone call bar: slides up once the hero has gone; visible from the start without the script */
.apc-call-first .cf-bar { display: none; }
@media (max-width: 700px) {
  .apc-call-first .cf-bar {
    position: fixed; z-index: 190; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 8px 8px 20px; border-radius: 999px;
    transition: transform 500ms var(--cf-ease), visibility 500ms;
  }
  .cf-js .apc-call-first .cf-bar:not(.cf-show) { transform: translateY(160%); visibility: hidden; }
  .apc-call-first .cf-bar p { margin: 0; color: var(--cf-muted); font-size: .9375rem; line-height: 1.3; }
  .apc-call-first .cf-bar b { display: block; color: var(--cf-ink); font-size: 1rem; font-weight: 600; }
  .apc-call-first .cf-bar .cf-btn { min-height: 46px; padding: 4px 4px 4px 18px; }
  /* Room under the footer so the bar never covers its last lines */
  .apc-call-first > footer { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important; }
}

/* Reduced motion: the word still changes and the captions still take turns, by plain fade only.
   No slide, blur, pulse, lift, drawn line or growing step number.
   !important because the shared layer switches every animation off under this setting. */
@media (prefers-reduced-motion: reduce) {
  .apc-call-first .cf-final path { stroke-dashoffset: 0; }
  .apc-call-first .cf-ring { display: none; }
  .apc-call-first .cf-loop .cf-rot .cf-w { animation: cf-word-fade 20.8s ease var(--cf-at) infinite both !important; }
  .apc-call-first .cf-loop :is(.cf-d1, .cf-d2) { animation: cf-detail 9s ease var(--cf-at) infinite both !important; }
  .apc-call-first .cf-loop .cf-d3 { animation: cf-detail-last 9s ease var(--cf-at) infinite both !important; }
  .apc-call-first .cf-call li:hover { transform: none; }
}