/* Homepage layout, patterned on apple.com: centred product hero, full-bleed tiles,
   a horizontal card gallery, a dark numbers band and a centred sign-off. Loads after apple.css. */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--a-nav); }
body.apple-page { margin: 0; overflow-x: clip; }
:where(.apple-page) img { max-width: 100%; display: block; }
:where(.apple-page) :where(h1, h2, h3, h4, p, figure, dl, dd, ol, ul) { margin: 0; }
:where(.apple-page) :where(ol, ul) { list-style: none; padding: 0; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 10000; padding: 8px 14px; border-radius: 980px; background: var(--a-ink); color: #fff; }
.skip-link:focus { top: 8px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.a-section-head { width: var(--a-content); margin: 0 auto; text-align: center; }
.a-section-head .a-intro { margin-top: 18px; }
.a-section-head--left { text-align: left; width: min(var(--a-content-wide), calc(100% - 2 * var(--a-gutter))); }

/* ---------- Hero ---------- */
.a-hero { padding: 72px 0 0; text-align: center; background: var(--a-bg); }
.a-hero-copy { width: var(--a-content); margin: 0 auto; }
.a-hero .a-eyebrow { color: var(--a-ink); margin-bottom: 12px; }
.a-hero .a-display { max-width: 11em; margin: 0 auto; }
.a-hero .a-subhead { margin: 18px auto 0; max-width: 28ch; }
.a-hero-note { margin: 14px auto 0; max-width: 46ch; color: var(--a-ink-2); }
.a-hero-visual { position: relative; width: min(520px, 84vw); margin: 44px auto 0; }
/* The circle sits behind; the cutout rises out of its top, and is clipped by the circle below its centre. */
.a-portrait { position: relative; aspect-ratio: 1; margin-top: 30%; }
.a-portrait::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 50% 30%, #fff 0, var(--a-bg-alt) 70%); }
.a-portrait picture {
  position: absolute; left: 0; right: 0; bottom: 0; height: 130%; display: block;
  -webkit-mask: linear-gradient(#000 0 0) top center / 64% 30% no-repeat, radial-gradient(closest-side, #000 99.4%, transparent 100%) bottom / 100% 76.93% no-repeat;
          mask: linear-gradient(#000 0 0) top center / 64% 30% no-repeat, radial-gradient(closest-side, #000 99.4%, transparent 100%) bottom / 100% 76.93% no-repeat;
}
.a-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.a-awards { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 28px; margin-top: 22px; font-size: var(--a-small-size); line-height: var(--a-small-lh); letter-spacing: var(--a-small-ls); color: var(--a-ink-2); }
.a-awards strong { color: var(--a-ink); font-weight: 600; }
.a-brands { width: var(--a-content); margin: 60px auto 0; padding: 26px 0 64px; border-top: 1px solid var(--a-rule); }
.a-brands p { font-size: var(--a-small-size); color: var(--a-ink-2); }
.a-brands ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 40px; margin-top: 12px; }
.a-brands a { font-family: var(--a-font-display); font-size: var(--a-subhead-size); line-height: 1.2; font-weight: 600; letter-spacing: -.01em; color: var(--a-ink-3); text-decoration: none; transition: color .3s var(--a-ease); }
.a-brands a:hover { color: var(--a-ink); }

/* ---------- Tiles ---------- */
.a-tiles { padding: 100px 0 12px; background: var(--a-bg-alt); }
.a-tiles > .a-section-head { margin-bottom: 52px; }
.a-tile {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  height: 580px; padding: 52px 24px 0;
  background: var(--a-bg-dark); color: #f5f5f7;
}
.a-tile--hero { height: 692px; margin: 0 12px; border-radius: var(--a-radius-lg); padding-top: 60px; }
.a-tile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 12px; }
.a-tile-grid .a-tile { border-radius: var(--a-radius-lg); }
.a-tile-media { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--a-ease); }
.a-tile::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.38) 34%, rgba(0,0,0,0) 62%); }
.a-tile:hover .a-tile-media { transform: scale(1.03); }
.a-tile-copy { max-width: 620px; }
.a-tile-eyebrow { font-size: var(--a-small-size); line-height: var(--a-small-lh); letter-spacing: var(--a-small-ls); font-weight: 600; opacity: .86; margin-bottom: 6px; }
.a-tile-headline { font-size: var(--a-tile-size); line-height: var(--a-tile-lh); letter-spacing: var(--a-tile-ls); font-weight: 600; }
.a-tile--hero .a-tile-headline { font-size: var(--a-headline-size); line-height: var(--a-headline-lh); letter-spacing: var(--a-headline-ls); }
.a-tile-subhead { margin-top: 6px; font-family: var(--a-font-display); font-size: var(--a-eyebrow-size); line-height: var(--a-eyebrow-lh); letter-spacing: var(--a-eyebrow-ls); }
.a-tile--hero .a-tile-subhead { font-size: var(--a-subhead-size); line-height: var(--a-subhead-lh); letter-spacing: var(--a-subhead-ls); }
.a-tile .a-ctas { margin-top: 18px; gap: 12px 26px; }
.a-tile .a-button { padding: 8px 16px; font-size: 14px; line-height: 1.2858; letter-spacing: -.016em; }
.a-tile--hero .a-button { padding: 11px 21px; font-size: 17px; }
.a-tile--dark .a-link { color: var(--a-link-dark); }
.a-tile-badge { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); padding: 7px 14px; border-radius: 980px; background: rgba(0,0,0,.42); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); font-size: 12px; letter-spacing: -.01em; color: #f5f5f7; white-space: nowrap; }
.a-tile--light { background: #fff; color: var(--a-ink); }
.a-tile--light::before { background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,.9) 30%, rgba(255,255,255,0) 58%); }
.a-more { text-align: center; padding: 28px 0 88px; }

/* ---------- Card gallery ---------- */
.a-gallery-section { padding: 100px 0 110px; background: var(--a-bg); overflow: hidden; }
.a-gallery { position: relative; margin-top: 40px; }
.a-gallery-track {
  display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding: 4px var(--a-gutter) 24px; scroll-padding-inline: var(--a-gutter);
  scrollbar-width: none; overscroll-behavior-x: contain;
}
@media (min-width: 1069px) { .a-gallery-track { padding-inline: max(var(--a-gutter), calc((100vw - var(--a-content-wide)) / 2)); scroll-padding-inline: max(var(--a-gutter), calc((100vw - var(--a-content-wide)) / 2)); } }
.a-gallery-track::-webkit-scrollbar { display: none; }
.a-gallery-track:focus-visible { outline: 2px solid var(--a-blue); outline-offset: -2px; }
.a-card {
  flex: 0 0 min(372px, 80vw); min-height: 480px; scroll-snap-align: start;
  display: flex; flex-direction: column; padding: 34px 32px;
  border-radius: var(--a-radius-lg); background: var(--a-bg-alt); color: var(--a-ink);
  transition: transform .5s var(--a-ease), box-shadow .5s var(--a-ease);
}
.a-card:hover { transform: scale(1.012); box-shadow: 2px 4px 12px rgba(0,0,0,.08); }
.a-card--blue { background: var(--a-blue); color: #fff; }
.a-card--dark { background: var(--a-bg-dark-alt); color: #f5f5f7; }
.a-card-eyebrow { font-size: var(--a-small-size); line-height: var(--a-small-lh); letter-spacing: var(--a-small-ls); font-weight: 600; opacity: .8; }
.a-card-headline { margin-top: 10px; font-size: var(--a-card-size); line-height: 1.1429; letter-spacing: .007em; font-weight: 600; }
.a-card-body { margin-top: auto; font-size: var(--a-body-size); line-height: var(--a-body-lh); opacity: .86; }
.a-paddles { display: flex; justify-content: flex-end; gap: 18px; width: min(var(--a-content-wide), calc(100% - 2 * var(--a-gutter))); margin: 4px auto 0; }
.a-paddle { width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: rgba(210,210,215,.64); color: rgba(0,0,0,.56); cursor: pointer; transition: background .2s, color .2s, opacity .2s; }
.a-paddle:hover { background: rgba(223,223,227,.7); color: rgba(0,0,0,.64); }
.a-paddle:disabled { opacity: .36; cursor: default; }
.a-paddle svg { display: block; }

.a-steps { margin-top: 110px; }
.a-steps-grid { width: var(--a-content); margin: 56px auto 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.a-steps-grid li { padding-top: 22px; border-top: 1px solid var(--a-rule); }
.a-step-num { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--a-ink); color: #fff; font-size: 14px; font-weight: 600; }
.a-steps-grid h4 { margin-top: 18px; font-size: var(--a-eyebrow-size); line-height: var(--a-eyebrow-lh); letter-spacing: var(--a-eyebrow-ls); font-weight: 600; }
.a-steps-grid p { margin-top: 6px; color: var(--a-ink-2); }

/* ---------- Stats band ---------- */
.a-stats { padding: 110px 0 100px; background: var(--a-bg-dark); color: #f5f5f7; }
.a-stats .a-intro { color: var(--a-ink-3); }
.a-stats-grid { width: min(var(--a-content-wide), calc(100% - 2 * var(--a-gutter))); margin: 72px auto 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 48px 32px; text-align: center; }
.a-stats-grid dt {
  font-family: var(--a-font-display); font-size: clamp(44px, 4.6vw, 72px); line-height: 1.05; letter-spacing: var(--a-hero-ls); font-weight: 600;
  background: linear-gradient(180deg, #fff 30%, #8593ff 120%); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.a-stats-grid dd { margin-top: 14px; font-size: var(--a-body-size); line-height: var(--a-body-lh); color: #f5f5f7; font-weight: 600; }
.a-stats-grid dd span { display: block; font-weight: 400; color: var(--a-ink-3); }
.a-footnote { width: var(--a-content); margin: 64px auto 0; text-align: center; font-size: var(--a-micro-size); line-height: var(--a-micro-lh); color: var(--a-ink-3); }

/* ---------- Feature (about) ---------- */
.a-feature { padding: 120px 0; background: var(--a-bg); }
.a-feature-inner { width: var(--a-content); margin: 0 auto; display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center; }
.a-feature-copy .a-eyebrow { color: var(--a-ink-2); margin-bottom: 10px; }
.a-feature-copy .a-intro { margin-top: 22px; }
.a-intro--ink { color: var(--a-ink); }
.a-feature-copy .a-body { margin-top: 16px; color: var(--a-ink-2); }
.a-feature-copy .a-ctas { margin-top: 24px; }
.a-feature-media img { width: 100%; height: auto; border-radius: var(--a-radius-lg); }
.a-feature-media figcaption { margin-top: 12px; font-size: var(--a-micro-size); color: var(--a-ink-2); }

/* ---------- Contact ---------- */
.a-contact { padding: 120px 0 130px; background: var(--a-bg-alt); }
.a-display--md { font-size: var(--a-headline-size); line-height: var(--a-headline-lh); letter-spacing: var(--a-headline-ls); }
@media (min-width: 1069px) { .a-display--md { font-size: var(--a-hero-size); line-height: var(--a-hero-lh); letter-spacing: var(--a-hero-ls); } }
.a-contact .a-subhead { margin: 18px auto 0; max-width: 26ch; color: var(--a-ink); }
.a-form { width: min(692px, calc(100% - 2 * var(--a-gutter))); margin: 56px auto 0; padding: 40px; border-radius: var(--a-radius-lg); background: #fff; text-align: center; }
.a-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 28px; text-align: left; }
.a-field { position: relative; display: block; }
.a-field--wide { grid-column: 1 / -1; }
.a-field :is(input, textarea) {
  width: 100%; min-height: 56px; padding: 26px 16px 8px; border: 1px solid var(--a-ink-3); border-radius: 12px;
  background: #fff; color: var(--a-ink); font: inherit; font-size: 17px; letter-spacing: -.022em; resize: vertical;
  transition: border-color .2s, box-shadow .2s;
}
.a-field textarea { min-height: 140px; }
.a-field :is(input, textarea):focus { outline: 0; border-color: var(--a-blue); box-shadow: 0 0 0 4px rgba(41,68,255,.18); }
.a-field span { position: absolute; left: 17px; top: 17px; color: var(--a-ink-2); font-size: 17px; line-height: 1.2; pointer-events: none; transition: transform .2s var(--a-ease), font-size .2s var(--a-ease), top .2s var(--a-ease); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(100% - 34px); }
.a-field :is(input, textarea):is(:focus, :not(:placeholder-shown)) + span { top: 8px; font-size: 12px; }
.a-form-status:not(:empty) { margin-top: 18px; font-size: var(--a-small-size); color: var(--a-ink); }
.a-form-alt { margin-top: 22px; font-size: var(--a-small-size); line-height: var(--a-small-lh); color: var(--a-ink-2); }
.a-form-alt .a-link { font-size: inherit; }
.a-form-alt .a-link::after { display: none; }
.a-form-alt a { color: var(--a-link); text-decoration: none; }
.a-form-privacy { margin-top: 10px; font-size: var(--a-micro-size); color: var(--a-ink-3); }

/* ---------- Footer directory (homepage) ---------- */
.a-footer-inner { width: min(var(--a-content), calc(100% - 44px)); margin: 0 auto; padding-top: 17px; }
.a-footer-note { padding-bottom: 12px; border-bottom: 1px solid var(--a-rule); color: var(--a-ink-2); }
.a-footer-directory { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding: 20px 0 22px; }
.a-footer .a-footer-directory .cfx-footer-nav.cfx-footer-nav { width: auto; margin: 0; padding: 0; border: 0; gap: 0; }
.a-footer .cfx-footer-links { flex-direction: column; gap: 0; }
.a-footer .cfx-footer-nav .cfx-footer-links a { line-height: 1.34; padding: 4px 0; }
.a-footer-col h3, .a-footer .cfx-footer-label { font-family: var(--a-font-text); font-size: 12px; line-height: 1.34; font-weight: 600; letter-spacing: -.01em; color: var(--a-ink); margin-bottom: 8px; }
.a-footer-col li { padding: 4px 0; }
.a-footer .footer-inner.a-footer-legal { width: 100%; border-top: 1px solid var(--a-rule); }

/* ---------- Medium ---------- */
@media (max-width: 1068px) {
  .a-tile--hero { height: 600px; }
  .a-tile { height: 500px; }
  .a-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .a-feature-inner { gap: 40px; }
}
/* ---------- Small ---------- */
@media (max-width: 734px) {
  .a-hero { padding-top: 48px; }
  .a-brands ul { gap: 6px 22px; }
  .a-tiles { padding-top: 72px; }
  .a-tile-grid { grid-template-columns: 1fr; }
  .a-tile--hero { height: 560px; margin: 0 12px; padding-top: 44px; }
  .a-tile { height: 480px; padding-top: 44px; }
  .a-gallery-section, .a-feature, .a-contact { padding: 80px 0; }
  .a-card { min-height: 420px; padding: 28px 26px; }
  .a-steps { margin-top: 80px; }
  .a-steps-grid { grid-template-columns: 1fr; gap: 28px; margin-top: 40px; }
  .a-stats { padding: 80px 0; }
  .a-stats-grid { gap: 40px 16px; margin-top: 48px; }
  .a-feature-inner { grid-template-columns: 1fr; }
  .a-feature-media { order: -1; }
  .a-form { padding: 24px 18px; }
  .a-form-grid { grid-template-columns: 1fr; }
  .a-footer-directory { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .a-tile-media, .a-card { transition: none; }
  .a-tile:hover .a-tile-media, .a-card:hover { transform: none; }
}

/* Bottom-anchored tile: the artwork carries its own lockup, so the copy sits below it. */
.a-tile--bottom { justify-content: flex-end; padding: 0 24px 48px; }
.a-tile--bottom::before { background: linear-gradient(0deg, rgba(0,0,0,.86) 0%, rgba(0,0,0,.5) 26%, rgba(0,0,0,0) 50%); }
.a-tile--bottom .a-tile-media { object-position: 50% 30%; }
.a-tile--bottom .a-tile-subhead { margin-top: 8px; }
.a-tile--light.a-tile--bottom::before { background: linear-gradient(0deg, #fff 0%, rgba(255,255,255,.88) 30%, rgba(255,255,255,0) 56%); }
.a-tile-grid .a-tile--bottom { padding-bottom: 40px; }
.a-fineprint { margin-top: 18px; font-size: var(--a-micro-size); line-height: var(--a-micro-lh); letter-spacing: var(--a-micro-ls); color: var(--a-ink-3); }

/* ---------- "Call me when…" cards with illustrations ----------
   Soft tints drawn from the illustrations' own palette; no strokes, only shade. */
.a-card { position: relative; min-height: 540px; overflow: hidden; box-shadow: inset 0 -80px 120px -60px rgba(0, 0, 0, .05); }
.a-card--sky   { background: linear-gradient(170deg, #f1f3ff 0%, #e3e8ff 100%); }
.a-card--cream { background: linear-gradient(170deg, #faf8f3 0%, #efeadf 100%); }
.a-card--peach { background: linear-gradient(170deg, #fdf3ec 0%, #f6e1d3 100%); }
.a-card--mist  { background: linear-gradient(170deg, #f5f5f7 0%, #e8e8ed 100%); }
.a-card .a-card-eyebrow { color: var(--a-blue); opacity: 1; }
.a-card .a-card-body { margin-top: 12px; color: var(--a-ink-2); opacity: 1; }
.a-card-art {
  display: block; margin: auto auto -6px; width: auto; max-width: 88%; max-height: 250px; object-fit: contain;
  filter: drop-shadow(0 18px 22px rgba(20, 30, 90, .14));
  transition: transform .7s var(--a-ease), filter .7s var(--a-ease);
}
.a-card--sky .a-card-art   { max-width: 96%; transform: translateX(-4%); }
.a-card--peach .a-card-art { transform: rotate(-4deg); }
.a-card--mist .a-card-art  { transform: translateX(6%); }
.a-card:hover .a-card-art { transform: translateY(-10px) scale(1.04); filter: drop-shadow(0 28px 26px rgba(20, 30, 90, .18)); }
.a-card--peach:hover .a-card-art { transform: translateY(-14px) rotate(-1deg) scale(1.04); }
.a-card:hover { transform: none; box-shadow: inset 0 -80px 120px -60px rgba(0, 0, 0, .07); }
@media (max-width: 734px) {
  .a-card { min-height: 460px; }
  .a-card-art { max-height: 200px; }
}
@media (prefers-reduced-motion: reduce) {
  .a-card-art { transition: none; }
  .a-card:hover .a-card-art { transform: none; }
}

/* ---------- Work tiles: subtle blur under the words ----------
   A blurred copy of the tile image (added by apple.js), masked to the text band. */
.a-tile-blur {
  position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; pointer-events: none;
  filter: blur(9px); transform: scale(1.04);
  -webkit-mask: linear-gradient(0deg, #000 0%, #000 30%, transparent 52%); mask: linear-gradient(0deg, #000 0%, #000 30%, transparent 52%);
}
.a-tile--bottom .a-tile-media { z-index: -3; }
.a-tile--bottom::before { z-index: 0; }
.a-tile--bottom .a-tile-copy { position: relative; z-index: 1; }
.a-tile--bottom .a-tile-badge { z-index: 1; }

/* ---------- No strokes: fields and dividers become shade ---------- */
.a-field :is(input, textarea) { border: 0; background: var(--a-bg-alt); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .06); }
.a-field :is(input, textarea):hover { background: #eeeef1; }
.a-field :is(input, textarea):focus { background: #fff; box-shadow: 0 0 0 4px rgba(41, 68, 255, .2), 0 2px 10px rgba(0, 0, 0, .06); }
.a-brands { border-top: 0; background: linear-gradient(180deg, var(--a-bg-alt) 0, rgba(245, 245, 247, 0) 70%); border-radius: var(--a-radius-lg); }
.a-steps-grid li { border-top: 0; padding: 26px 24px 28px; border-radius: var(--a-radius); background: var(--a-bg-alt); }
.a-footer-note, .a-footer .footer-inner.a-footer-legal { border: 0; }
.a-tile:hover .a-tile-blur { transform: scale(1.07); transition: transform 1.2s var(--a-ease); }

/* First and last cards keep their original colours: CFX blue and dark grey. */
.a-card--sky {
  background: radial-gradient(ellipse 70% 42% at 50% 82%, rgba(255, 255, 255, .28) 0%, rgba(255, 255, 255, 0) 70%), linear-gradient(170deg, #3d56ff 0%, var(--a-blue) 60%, #1f36e6 100%);
  color: #fff;
}
.a-card--sky :is(.a-card-eyebrow, .a-card-body) { color: rgba(255, 255, 255, .82); }
.a-card--sky .a-card-art { filter: drop-shadow(0 18px 24px rgba(8, 14, 70, .45)) brightness(1.08) saturate(1.05); }
.a-card--sky:hover .a-card-art { filter: drop-shadow(0 28px 30px rgba(8, 14, 70, .5)) brightness(1.1) saturate(1.05); }
.a-card--mist {
  background: radial-gradient(ellipse 70% 42% at 50% 84%, rgba(255, 255, 255, .1) 0%, rgba(255, 255, 255, 0) 70%), linear-gradient(170deg, #232326 0%, var(--a-bg-dark-alt) 100%);
  color: #f5f5f7;
}
.a-card--mist .a-card-eyebrow { color: var(--a-link-dark); }
.a-card--mist .a-card-body { color: #a1a1a6; }
.a-card--mist .a-card-art { filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .55)); }
.a-card--mist:hover .a-card-art { filter: drop-shadow(0 28px 30px rgba(0, 0, 0, .6)); }

/* ---------- Living illustrations ----------
   Each illustration is the same image stacked in layers, each layer clipped to one
   part (spring, pump handle, bubble, clapper arm), so parts can move on their own.
   .is-playing is added by apple.js when the card scrolls into view and on hover. */
.a-art {
  position: relative; display: block; flex: none;
  width: min(88%, calc(250px * var(--ar))); aspect-ratio: var(--ar); max-width: none; max-height: none;
  margin: auto auto -6px; object-fit: initial;
}
.a-art .a-art-layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; max-width: none; }
.a-card:hover .a-card-art, .a-card--peach:hover .a-card-art { transform: none; }
.a-card--sky .a-art { width: min(80%, calc(260px * var(--ar))); }
.a-card--cream .a-art { width: min(96%, calc(240px * var(--ar))); }
.a-card--peach .a-art { transform: none; }
.a-card--mist .a-art { transform: translateX(5%); }
@media (max-width: 734px) { .a-art { width: min(82%, calc(200px * var(--ar))); } }

/* 1. Pitch fix: the big idea springs out of the deck. */
.a-art--spring .a-art-layer--top  { clip-path: polygon(0 0, 100% 0, 100% 59%, 60% 59%, 56% 65%, 48% 69%, 37% 68%, 35% 62%, 33% 57%, 0 57%); transform-origin: 46% 66%; }
.a-art--spring .a-art-layer--base { clip-path: polygon(0 57%, 33% 57%, 35% 62%, 37% 68%, 48% 69%, 56% 65%, 60% 59%, 100% 59%, 100% 100%, 0 100%); }
.a-art--spring.is-playing .a-art-layer--top { animation: cfx-spring 1.6s cubic-bezier(.3, .7, .4, 1) both; }
.a-art--spring.is-playing .a-art-layer--base { animation: cfx-deck 1.6s ease-out both; transform-origin: 50% 100%; }
@keyframes cfx-spring {
  0%   { transform: translateY(0) scale(1, 1); }
  16%  { transform: translateY(3%) scale(1.04, .86); }
  36%  { transform: translateY(-9%) scale(.96, 1.08) rotate(-4deg); }
  54%  { transform: translateY(2%) scale(1.03, .95) rotate(2deg); }
  70%  { transform: translateY(-3%) scale(.99, 1.02) rotate(-1deg); }
  84%  { transform: translateY(1%) scale(1.01, .99); }
  100% { transform: translateY(0) scale(1, 1); }
}
@keyframes cfx-deck { 0%, 100% { transform: none; } 16% { transform: scaleY(.97); } 36% { transform: scaleY(1.01); } }

/* 2. Campaign fix: pumping life back into flat work. */
.a-art--pump .a-art-layer--handle { clip-path: polygon(0 31%, 27% 31%, 27% 49.5%, 0 49.5%); }
.a-art--pump .a-art-layer--base   { clip-path: polygon(0 49.5%, 27% 49.5%, 27% 72%, 100% 72%, 100% 100%, 0 100%); }
.a-art--pump .a-art-layer--bubble { clip-path: polygon(27% 0, 100% 0, 100% 72%, 27% 72%); transform-origin: 51% 70%; }
.a-art--pump.is-playing .a-art-layer--handle { animation: cfx-pump-handle 2.2s ease-in-out both; }
.a-art--pump.is-playing .a-art-layer--bubble { animation: cfx-pump-bubble 2.2s cubic-bezier(.3, .6, .4, 1) both; }
@keyframes cfx-pump-handle {
  0%, 100% { transform: translateY(0); }
  10%, 38%, 66% { transform: translateY(0); }
  22%, 50%, 78% { transform: translateY(7.5%); }
}
@keyframes cfx-pump-bubble {
  0%   { transform: scale(.55, .42) rotate(-3deg); }
  10%  { transform: scale(.55, .42) rotate(-3deg); }
  24%  { transform: scale(.72, .64) rotate(-2deg); }
  38%  { transform: scale(.7, .62) rotate(-2deg); }
  52%  { transform: scale(.88, .84) rotate(-1deg); }
  66%  { transform: scale(.86, .82); }
  82%  { transform: scale(1.04, 1.05) rotate(1deg); }
  91%  { transform: scale(.98, .98); }
  100% { transform: scale(1, 1); }
}

/* 3. Creative cover: a director's chair parachuting in. */
.a-art--chute .a-art-layer--all { transform-origin: 50% 0; }
.a-art--chute.is-playing .a-art-layer--all { animation: cfx-chute 2.4s cubic-bezier(.25, .7, .35, 1) both; }
@keyframes cfx-chute {
  0%   { transform: translateY(-48%) rotate(-7deg); opacity: 0; }
  12%  { opacity: 1; }
  34%  { transform: translateY(-26%) rotate(6deg); }
  58%  { transform: translateY(-8%) rotate(-4deg); }
  78%  { transform: translateY(1.5%) rotate(1.5deg) scaleY(.98); }
  90%  { transform: translateY(-.5%) rotate(-.5deg); }
  100% { transform: translateY(0) rotate(0); opacity: 1; }
}

/* 4. Run the project: creative direction taking the wheel. */
.a-art--kart .a-art-layer--arm  { clip-path: polygon(19% 12%, 74% -2%, 78% 0, 78% 11%, 28% 26%, 21% 17%); transform-origin: 18% 22%; }
.a-art--kart .a-art-layer--base { clip-path: polygon(0 17%, 21% 17%, 28% 26%, 78% 11%, 78% 0, 100% 0, 100% 100%, 0 100%); }
.a-art--kart.is-playing { animation: cfx-kart-drive 2.2s cubic-bezier(.2, .7, .3, 1) both; }
.a-art--kart.is-playing .a-art-layer--arm { animation: cfx-kart-clap 2.2s ease-in-out both; }
@keyframes cfx-kart-drive {
  0%   { transform: translateX(-70%) rotate(0); opacity: 0; }
  10%  { opacity: 1; }
  45%  { transform: translateX(8%) rotate(1.5deg); }
  56%  { transform: translateX(3%) rotate(-2deg) translateY(-1%); }
  66%  { transform: translateX(5%) rotate(1deg); }
  76%  { transform: translateX(5%) rotate(0) translateY(0); }
  100% { transform: translateX(5%); opacity: 1; }
}
@keyframes cfx-kart-clap {
  0%, 74% { transform: rotate(0); }
  84%  { transform: rotate(13deg); }
  90%  { transform: rotate(11deg); }
  100% { transform: rotate(0); }
}

@media (prefers-reduced-motion: reduce) {
  .a-art.is-playing, .a-art.is-playing .a-art-layer { animation: none !important; }
}

/* ---------- Portrait dome ----------
   A half circle with softly rounded base corners, the same width, tone and corner
   radius as the "15+ years of work for" tab below it, so the two read as a pair.
   The photo is cut across the middle by the dome's flat base; the head rises above
   the curve. */
.a-hero-visual { width: var(--a-content); margin: 56px auto 0; }
.a-portrait {
  position: relative; aspect-ratio: 2 / 1; margin-top: 25%;
}
.a-portrait::before {
  content: ""; position: absolute; inset: 0;
  border-radius: 50% 50% var(--a-radius-lg) var(--a-radius-lg) / 100% 100% var(--a-radius-lg) var(--a-radius-lg);
  background: linear-gradient(180deg, #fbfbfd 0%, var(--a-bg-alt) 100%);
}
.a-portrait picture {
  position: absolute; left: 0; right: 0; bottom: 0; height: 150%; display: block;
  /* Visible area = the dome (lower two thirds of this box) + a column above it for the head. */
  -webkit-mask:
    linear-gradient(#000 0 0) 50% 0 / 54% 38% no-repeat,
    radial-gradient(ellipse 50% 66.667% at 50% 100%, #000 99.6%, transparent 100%) 0 0 / 100% 100% no-repeat;
          mask:
    linear-gradient(#000 0 0) 50% 0 / 54% 38% no-repeat,
    radial-gradient(ellipse 50% 66.667% at 50% 100%, #000 99.6%, transparent 100%) 0 0 / 100% 100% no-repeat;
}
.a-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
/* The tab directly beneath, book-matched to the dome's base. */
.a-hero .a-brands {
  margin: 12px auto 0; padding: 26px 24px 28px; border-radius: var(--a-radius-lg);
  background: linear-gradient(180deg, var(--a-bg-alt) 0%, #fbfbfd 100%);
}
.a-hero .a-brands .a-awards { margin-top: 16px; }
.a-hero { padding-bottom: 72px; }
@media (max-width: 734px) {
  .a-hero-visual { width: calc(100% - 24px); }
  .a-hero .a-brands { width: calc(100% - 24px); padding: 22px 16px 24px; border-radius: 22px; }
  .a-portrait::before { border-radius: 50% 50% 22px 22px / 100% 100% 22px 22px; }
}

/* Portrait dome, v2 (matches the supplied mock): a larger cutout set right of centre,
   shoulders reaching the dome's edge, head rising well above the curve. */
.a-portrait picture { overflow: visible; }
.a-portrait img {
  position: absolute; left: -4%; top: 2%; width: 110%; height: auto; max-width: none; object-fit: initial;
}
.a-portrait picture {
  -webkit-mask:
    linear-gradient(#000 0 0) 62.9% 0 / 38% 36% no-repeat,
    radial-gradient(ellipse 50% 66.667% at 50% 100%, #000 99.6%, transparent 100%) 0 0 / 100% 100% no-repeat;
          mask:
    linear-gradient(#000 0 0) 62.9% 0 / 38% 36% no-repeat,
    radial-gradient(ellipse 50% 66.667% at 50% 100%, #000 99.6%, transparent 100%) 0 0 / 100% 100% no-repeat;
}
.a-portrait::before { background: linear-gradient(180deg, #fafafc 0%, #f2f2f5 100%); }
.a-hero > .a-awards { margin: 30px auto 0; }
.a-hero .a-brands {
  margin-top: 40px; padding: 30px 24px 36px;
  background: linear-gradient(180deg, #ececf0 0%, #f5f5f7 45%, #fff 100%);
}
@media (max-width: 734px) { .a-hero > .a-awards { margin-top: 20px; } .a-hero .a-brands { margin-top: 24px; } }
/* Scale measured against the mock: head ≈ 28% of the dome's width, centred ≈ 59% across,
   hair ≈ 18% of the width above the curve. */
.a-portrait img { left: -24%; top: -10.3%; width: 155%; }
.a-portrait picture {
  -webkit-mask:
    linear-gradient(#000 0 0) 66.7% 0 / 40% 56% no-repeat,
    radial-gradient(ellipse 50% 66.667% at 50% 100%, #000 99.6%, transparent 100%) 0 0 / 100% 100% no-repeat;
          mask:
    linear-gradient(#000 0 0) 66.7% 0 / 40% 56% no-repeat,
    radial-gradient(ellipse 50% 66.667% at 50% 100%, #000 99.6%, transparent 100%) 0 0 / 100% 100% no-repeat;
}
.a-portrait picture { overflow: clip; }

/* Portrait dome, v3: image back at its natural size (dome width), head revealed by a
   full-width band above the dome down to just below the chin, so the curve never
   clips the face at any width. Original, subtle shading. */
.a-portrait picture {
  height: 150%;
  -webkit-mask:
    linear-gradient(#000 0 0) 0 0 / 100% 52% no-repeat,
    radial-gradient(ellipse 50% 66.667% at 50% 100%, #000 99.6%, transparent 100%) 0 0 / 100% 100% no-repeat;
          mask:
    linear-gradient(#000 0 0) 0 0 / 100% 52% no-repeat,
    radial-gradient(ellipse 50% 66.667% at 50% 100%, #000 99.6%, transparent 100%) 0 0 / 100% 100% no-repeat;
}
.a-portrait img { position: static; left: auto; top: auto; width: 100%; height: 100%; max-width: 100%; object-fit: cover; object-position: 50% 0; }
.a-portrait::before { background: linear-gradient(180deg, #fbfbfd 0%, var(--a-bg-alt) 100%); }
.a-hero .a-brands { background: linear-gradient(180deg, var(--a-bg-alt) 0%, #fbfbfd 100%); }
/* Tab fades from the grey tone at the top to nothing before it reaches its base. */
.a-hero .a-brands { background: linear-gradient(180deg, var(--a-bg-alt) 0%, rgba(245, 245, 247, 0) 82%); }

/* Pitch fix, v2: the seam sits where the spring meets the asterisk. The coil stays
   planted in the deck and stretches from its base; the asterisk rides on top, moving
   by exactly the coil's stretch so the two stay joined. */
.a-art--spring .a-art-layer--top  { clip-path: polygon(0 0, 100% 0, 100% 59%, 60% 59%, 58% 47%, 37% 47%, 35% 57%, 0 57%); transform-origin: 47% 32%; }
.a-art--spring .a-art-layer--coil { clip-path: polygon(37% 47%, 58% 47%, 60% 59%, 56% 65%, 48% 69%, 37% 68%, 35% 62%, 35% 57%); transform-origin: 47% 68%; }
.a-art--spring .a-art-layer--base { clip-path: polygon(0 57%, 35% 57%, 35% 62%, 37% 68%, 48% 69%, 56% 65%, 60% 59%, 100% 59%, 100% 100%, 0 100%); }
.a-art--spring.is-playing .a-art-layer--top  { animation: cfx-idea 1.6s cubic-bezier(.3, .7, .4, 1) both; }
.a-art--spring.is-playing .a-art-layer--coil { animation: cfx-coil 1.6s cubic-bezier(.3, .7, .4, 1) both; }
.a-art--spring.is-playing .a-art-layer--base { animation: cfx-deck 1.6s ease-out both; transform-origin: 50% 100%; }
/* Coil spans ~21% of the art's height, so asterisk offset = (scaleY - 1) × 21%. */
@keyframes cfx-coil {
  0%   { transform: scaleY(1); }
  16%  { transform: scaleY(.8); }
  36%  { transform: scaleY(1.55); }
  54%  { transform: scaleY(.92); }
  70%  { transform: scaleY(1.18); }
  84%  { transform: scaleY(.97); }
  100% { transform: scaleY(1); }
}
@keyframes cfx-idea {
  0%   { transform: translateY(0); }
  16%  { transform: translateY(4.2%) scale(1.03, .97); }
  36%  { transform: translateY(-11.6%) rotate(-5deg); }
  54%  { transform: translateY(1.7%) rotate(2deg); }
  70%  { transform: translateY(-3.8%) rotate(-1deg); }
  84%  { transform: translateY(.6%); }
  100% { transform: translateY(0); }
}

/* Pitch fix, v3: built from separate artwork layers (stack, top card, coil, asterisk).
   The coil stretches from its base in the card; the asterisk rides it, lifts clear at
   the peak (the idea springing out), then lands back on the coil. */
.a-art--spring :is(.a-art-layer--deck, .a-art-layer--card, .a-art-layer--coil, .a-art-layer--idea) { clip-path: none; }
.a-art--spring .a-art-layer--coil { transform-origin: 47% 70.5%; }
.a-art--spring .a-art-layer--idea { transform-origin: 50% 30%; }
.a-art--spring.is-playing .a-art-layer--coil { animation: cfx-coil-v3 1.9s cubic-bezier(.3, .7, .4, 1) both; }
.a-art--spring.is-playing .a-art-layer--idea { animation: cfx-idea-v3 1.9s cubic-bezier(.3, .7, .4, 1) both; }
/* Coil spans ~25% of the art's height: while attached, asterisk offset = (scaleY − 1) × 25%. */
@keyframes cfx-coil-v3 {
  0%   { transform: scaleY(1); }
  14%  { transform: scaleY(.82); }
  30%  { transform: scaleY(1.4); }
  42%  { transform: scaleY(1.02); }
  58%  { transform: scaleY(.88); }
  72%  { transform: scaleY(1.08); }
  86%  { transform: scaleY(.98); }
  100% { transform: scaleY(1); }
}
@keyframes cfx-idea-v3 {
  0%   { transform: translateY(0); }
  14%  { transform: translateY(4.5%) scale(1.03, .97); }
  30%  { transform: translateY(-10%) rotate(-3deg); }
  42%  { transform: translateY(-19%) rotate(-8deg); }
  52%  { transform: translateY(-5%) rotate(2deg); }
  58%  { transform: translateY(3%) scale(1.03, .97) rotate(1deg); }
  72%  { transform: translateY(-2%) rotate(-1deg); }
  86%  { transform: translateY(.5%); }
  100% { transform: translateY(0); }
}

/* Run the project: the kart faces front-left, so it drives in from the right. */
@keyframes cfx-kart-drive {
  0%   { transform: translateX(75%) rotate(0); opacity: 0; }
  10%  { opacity: 1; }
  45%  { transform: translateX(2%) rotate(-1.5deg); }
  56%  { transform: translateX(7%) rotate(2deg) translateY(-1%); }
  66%  { transform: translateX(5%) rotate(-1deg); }
  76%  { transform: translateX(5%) rotate(0) translateY(0); }
  100% { transform: translateX(5%); opacity: 1; }
}
/* Lower peak so the asterisk stays clear of the card copy. */
@keyframes cfx-idea-v3 {
  0%   { transform: translateY(0); }
  14%  { transform: translateY(4.5%) scale(1.03, .97); }
  30%  { transform: translateY(-9%) rotate(-3deg); }
  42%  { transform: translateY(-13%) rotate(-7deg); }
  52%  { transform: translateY(-4%) rotate(2deg); }
  58%  { transform: translateY(3%) scale(1.03, .97) rotate(1deg); }
  72%  { transform: translateY(-2%) rotate(-1deg); }
  86%  { transform: translateY(.5%); }
  100% { transform: translateY(0); }
}
@keyframes cfx-coil-v3 {
  0%   { transform: scaleY(1); }
  14%  { transform: scaleY(.82); }
  30%  { transform: scaleY(1.36); }
  42%  { transform: scaleY(1.02); }
  58%  { transform: scaleY(.88); }
  72%  { transform: scaleY(1.08); }
  86%  { transform: scaleY(.98); }
  100% { transform: scaleY(1); }
}
.a-card { min-height: 580px; }
@media (max-width: 734px) { .a-card { min-height: 500px; } }
@keyframes cfx-idea-v3 {
  0%   { transform: translateY(0); }
  14%  { transform: translateY(4.5%) scale(1.03, .97); }
  30%  { transform: translateY(-8%) rotate(-3deg); }
  42%  { transform: translateY(-11%) rotate(-7deg); }
  52%  { transform: translateY(-3%) rotate(2deg); }
  58%  { transform: translateY(3%) scale(1.03, .97) rotate(1deg); }
  72%  { transform: translateY(-2%) rotate(-1deg); }
  86%  { transform: translateY(.5%); }
  100% { transform: translateY(0); }
}
@media (max-width: 734px) { .a-card { min-height: 530px; } }

/* The portrait is never wider than the awards line beneath it: the group's single
   column is sized by the awards text, and the dome fills that column. */
.a-hero-portrait-group { display: grid; width: fit-content; max-width: calc(100% - 24px); margin: 56px auto 0; }
.a-hero-portrait-group .a-hero-visual { width: auto; margin: 0; }
.a-hero-portrait-group .a-awards { margin: 28px 0 0; white-space: nowrap; }
@media (max-width: 734px) {
  .a-hero-portrait-group { width: calc(100% - 24px); }
  .a-hero-portrait-group .a-awards { white-space: normal; }
}

/* Portrait sinks into the dome on scroll: the photo holds its place on screen while the
   dome rises past it, so it disappears through the dome's flat base. "2025 · Awards &
   Recognitions" fades in inside the dome. --sink (0–1) is set by apple.js. */
.a-hero-portrait-group { width: min(340px, calc(100% - 24px)); }
.a-hero-portrait-group .a-awards { display: grid; gap: 4px; justify-items: center; white-space: normal; }
.a-hero-portrait-group .a-awards span { display: block; }
.a-portrait { --sink: 0; --sink-px: 0px; }
.a-portrait img { transform: translate3d(0, var(--sink-px), 0); will-change: transform; }
.a-portrait-note {
  position: absolute; inset: auto 0 0; height: 100%; margin: 0; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding-top: 18%;
  text-align: center; pointer-events: none;
  opacity: clamp(0, calc((var(--sink) - .6) * 2.5), 1);
  transform: translateY(calc((1 - clamp(0, calc((var(--sink) - .6) * 2.5), 1)) * 10px));
}
.a-portrait-year {
  font-family: var(--a-font-display); font-size: clamp(44px, 16cqw, 64px); line-height: 1; font-weight: 600;
  letter-spacing: -.02em; font-stretch: var(--w-display); color: var(--a-ink);
}
.a-portrait-label { font-size: var(--a-body-size); line-height: 1.3; letter-spacing: -.022em; color: var(--a-ink-2); }
.a-portrait { container-type: inline-size; }
@media (prefers-reduced-motion: reduce) {
  .a-portrait img { transform: none; }
  .a-portrait-note { display: none; }
}

/* Awards on one line again; the portrait takes the awards line's width, as before. */
.a-hero-portrait-group { width: fit-content; max-width: calc(100% - 24px); }
.a-hero-portrait-group .a-awards { display: flex; flex-wrap: nowrap; justify-content: center; gap: 0 22px; white-space: nowrap; }
@media (max-width: 734px) {
  .a-hero-portrait-group { width: calc(100% - 24px); }
  .a-hero-portrait-group .a-awards { flex-wrap: wrap; white-space: normal; gap: 4px 16px; }
}
/* "2025" in white, lifted off the light dome with a soft shadow so it stays legible. */
.a-portrait-year { color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .12), 0 8px 24px rgba(29, 29, 31, .18); }
.a-portrait-year { text-shadow: none; }
/* The dome is always exactly the awards line's width. On phones the line scales down to
   stay on one line (never below 12px); the dome follows it. */
@media (max-width: 734px) {
  .a-hero-portrait-group { width: fit-content; max-width: calc(100% - 24px); }
  .a-hero-portrait-group .a-awards { flex-wrap: nowrap; white-space: nowrap; gap: 0 14px; font-size: clamp(12px, calc((100vw - 24px) / 27.8), 14px); }
}
@media (max-width: 356px) {
  .a-hero-portrait-group { width: calc(100% - 24px); }
  .a-hero-portrait-group .a-awards { flex-wrap: wrap; white-space: normal; }
}
@media (max-width: 360px) {
  .a-stats-grid { gap: 36px 10px; width: calc(100% - 24px); }
  .a-stats-grid dt { font-size: 36px; }
}
/* Layering inside the dome: tint, then the caption, then the photo in front of it. */
.a-portrait { isolation: isolate; }
.a-portrait::before { z-index: 0; }
.a-portrait-note { z-index: 1; }
.a-portrait picture { z-index: 2; }
/* "15+ years of work for" appears at exactly the rate the portrait disappears.
   Without JavaScript (or with reduced motion) --sink is unset and the tab simply shows. */
.a-hero .a-brands { opacity: var(--sink, 1); transform: translateY(calc((1 - var(--sink, 1)) * 18px)); }
@media (prefers-reduced-motion: reduce) { .a-hero .a-brands { opacity: 1; transform: none; } }

/* Availability line: directly under the nav, aligned to the left edge of the CFX logo
   (same container widths as .nav-inner at every breakpoint). */
.a-availability {
  width: min(var(--a-content-wide), calc(100% - 44px)); margin: 8px auto 0; padding: 0;
  font-size: 11px; line-height: 1.4; letter-spacing: -.005em; color: var(--a-ink-2); text-align: left;
}
@media (max-width: 600px) { .a-availability { width: calc(100% - 32px); } }
@media (max-width: 360px) { .a-availability { width: calc(100% - 24px); } }
.a-hero { padding-top: 56px; }
/* All caps, with a touch of positive tracking so capitals at 11px stay open and legible. */
.a-availability { text-transform: uppercase; letter-spacing: .04em; }
/* Availability line now sits in the hero, centred under the subhead. */
.a-availability--hero { width: auto; margin: 16px auto 0; text-align: center; font-size: 12px; color: var(--a-ink-2); }
.a-hero { padding-top: 72px; }
@media (max-width: 734px) { .a-hero { padding-top: 48px; } }

/* Portrait tiles on phones: the photo keeps to the top so the face stays clear of the copy,
   and the tile below fades into the photo's own backdrop colour (--tile-fill). */
@media (max-width: 734px) {
  .a-tile--portrait { background: var(--tile-fill, #000); }
  .a-tile--portrait :is(.a-tile-media, .a-tile-blur) {
    inset: 0 0 auto; height: 72%; object-position: 50% 12%;
    -webkit-mask: linear-gradient(180deg, #000 0%, #000 72%, transparent 100%); mask: linear-gradient(180deg, #000 0%, #000 72%, transparent 100%);
  }
  .a-tile--portrait .a-tile-blur { display: none; }
}

/* Tiles and card carousel keep to the site measure, like every other block. */
.a-tile--hero { width: var(--a-measure); margin: 0 auto; }
.a-tile-grid { width: var(--a-measure); margin: 0 auto; padding: 12px 0; }
.a-gallery { width: var(--a-measure); margin-inline: auto; overflow: hidden; border-radius: var(--a-radius-lg); }
.a-gallery-track { padding-inline: 0 !important; scroll-padding-inline: 0 !important; }
.a-paddles { width: var(--a-measure); }

/* Hero queen: the scroll sequence replaces the portrait. She sits under the buttons and
   scrolls with the page, turning as she crosses the screen, and the brands panel rises over
   the lowest fifth of her frame, so her shoulders always meet it or tuck behind it. */
/* Space from the buttons to the top of her hair: 75px on desktop, 65px on phones. Each frame
   has a clear strip above the hair (~3.7% of its height), which the margin allows for. */
.a-queen-stage { position: relative; width: var(--a-content); margin: calc(75px - var(--queen-w) * 1402 / 1122 * .037) auto 0; }
/* Her width is set on the hero so the brands panel's overlap follows it. She is never taller
   than two thirds of the screen, so short or mid-size displays show her whole, not oversized. */
.a-hero { --queen-w: min(640px, var(--a-content), 66svh * 1122 / 1402); }
.a-queen { --queen-max-width: 100%; align-self: stretch; }
.a-queen > img { display: block; width: var(--queen-w); height: auto; margin: 0 auto; }
.a-queen .queen-scroll__pin { width: var(--queen-w); height: auto; aspect-ratio: 1122 / 1402; margin-inline: auto; }
.a-hero .a-queen-stage + .a-brands {
  position: relative; z-index: 2; margin-top: calc(var(--queen-w) * 1402 / 1122 * -.2);
  background: linear-gradient(180deg, rgba(236, 236, 240, .72) 0%, rgba(245, 245, 247, .78) 45%, #fff 100%);
  -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
}
/* Phones: her shoulders can run off both sides of a narrow screen (up to 119% of its width). */
@media (max-width: 734px) {
  .a-queen-stage { width: 100%; margin-top: calc(65px - var(--queen-w) * 1402 / 1122 * .037); overflow-x: clip; }
  .a-hero { --queen-w: min(119vw, 66svh * 1122 / 1402); }
  .a-queen .queen-scroll__pin, .a-queen > img { margin-left: calc(50% - var(--queen-w) / 2); margin-right: 0; }
}

/* The hero holds still once its bottom (the brands panel) reaches the foot of the screen,
   and the work section slides up over it. The hold ends with the work section (both sit in
   .a-hero-hold), so the hero never shows behind later sections. --hero-h is set by apple.js. */
.a-hero { position: sticky; z-index: 0; top: min(0px, calc(100svh - var(--hero-h, 100svh))); }
.a-hero ~ .a-tiles { position: relative; z-index: 1; box-shadow: 0 -24px 48px rgba(0, 0, 0, .06); }
@media (prefers-reduced-motion: reduce) { .a-hero { position: relative; top: auto; } }

/* Results count up on first view (apple.js). Tabular digits and a fixed width keep them still. */
.a-stats-grid dt { font-variant-numeric: tabular-nums; }
.a-stats-grid .a-count { display: inline-block; }
.a-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Hero credential under the subhead (replaces the location line, now in the footer). */
.a-hero-award { display: grid; justify-items: center; margin: 16px auto 0; text-align: center; font-size: var(--a-small-size); line-height: var(--a-small-lh); color: var(--a-ink-2); }
/* The two awards take turns in one line: each holds for about 3.5s, then cross-fades. */
.a-hero-award > span { grid-area: 1 / 1; white-space: nowrap; opacity: 0; animation: a-award-turn 7s var(--a-ease) infinite; }
.a-hero-award > span:nth-child(2) { animation-delay: 3.5s; }
.a-hero-award > span:first-child { animation-delay: -.6s; }
@keyframes a-award-turn {
  0% { opacity: 0; translate: 0 6px; }
  8%, 44% { opacity: 1; translate: 0 0; }
  52%, 100% { opacity: 0; translate: 0 -6px; }
}
@media (prefers-reduced-motion: reduce) {
  .a-hero-award { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 20px; }
  .a-hero-award > span { opacity: 1; animation: none; }
}
.a-hero-award strong { color: var(--a-ink); font-weight: 600; }