/* Amantyle look a, "The tilted tile": this look's own styles, loaded only when it is the shown look (the page's e2Styles). The shared base is
   e2-amantyle.css; everything is scoped under a bx-* / ha-* / sa-* class. Markup: src/_includes/e2/amantyle/hero-a.njk and sig-a.njk;
   behaviour: e2-amantyle-a.js. Ink on her cream paper is slate; teal is a fill and a graphic colour only (3.4:1 on cream), never body text.
   Hero: ha-. Signature (the pinned story, then the Tilt finale): sa-. */

/* ====================================================================================================================================== */
/* ---------- Hero: the wall, the tile, the lockup ---------- */
/* The band is a size container, and .ha__world inside it is a box with the still's own 2400x1357 aspect, sized like object-fit: cover and
   shifted so the gap's centre (--cx, --cy, fractions of the still) lands at (--gx, --gy) of the band. Every child of the world is placed in
   percentages of it, so the tile can never drift off the gap, at any width. The clamps keep the world covering the band. */
.ha {
  --gx: .64; --gy: .37; --z: 1;
  display: block; min-height: 0; padding: 0; height: clamp(440px, calc(100svh - var(--header-h) - 24px), 760px);
  overflow: hidden; isolation: isolate; container-type: size; background: #1d5550; color: var(--bx-cream);
}
.ha__world {
  --bw: calc(max(100cqw, 100cqh * 2400 / 1357) * var(--z));
  --bh: calc(var(--bw) * 1357 / 2400);
  position: absolute; width: var(--bw); height: var(--bh);
  left: clamp(calc(100cqw - var(--bw)), calc(var(--gx) * 100cqw - var(--cx) * var(--bw)), 0px);
  top: clamp(calc(100cqh - var(--bh)), calc(var(--gy) * 100cqh - var(--cy) * var(--bh)), 0px);
}
.ha__poster, .ha__video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: fill; }
.ha__video { opacity: 0; transition: opacity .6s ease; }
.ha__video.is-on { opacity: 1; }

/* The tile window is exactly the gap's rectangle; inside it the 3D tile is cropped (its bottom edge on the gap's bottom edge). The top and
   sides get a little shade, as a tile set into a recess gets from the tiles around it. */
.ha__tile {
  position: absolute; left: var(--gl); top: var(--gt); width: var(--gw); height: var(--gh); overflow: hidden; border-radius: 5% / 3.4%;
  transform-origin: 50% 50%; will-change: transform;
}
.ha__tile img { position: absolute; max-width: none; height: auto; }
.ha__tile::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 .9cqw .7cqw -.5cqw rgba(8, 26, 24, .55), inset 0 -2px 0 rgba(255, 255, 255, .16), inset 0 0 0 1px rgba(8, 26, 24, .35);
}
/* a glint that crosses the glaze once, when the tile has landed */
.ha__tile::before {
  content: ""; position: absolute; z-index: 1; top: -20%; bottom: -20%; left: -60%; width: 45%; pointer-events: none; opacity: 0;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .6), transparent); transform: skewX(-14deg) translateX(0);
}
.ha__tile.is-glint::before { animation: ha-glint .8s ease-out both; }
@keyframes ha-glint { 0% { opacity: 0; transform: skewX(-14deg) translateX(0); } 15% { opacity: 1; } 100% { opacity: 0; transform: skewX(-14deg) translateX(520%); } }

/* The lockup: left on a desktop (the tile keeps the right), bottom on a phone. A soft slate scrim sits between it and the glossy wall. */
.ha__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(44, 51, 51, .86) 0%, rgba(51, 70, 70, .6) 34%, rgba(51, 70, 70, 0) 68%), linear-gradient(0deg, rgba(44, 51, 51, .35), rgba(44, 51, 51, 0) 40%);
}
.ha__lock {
  position: absolute; z-index: 2; left: clamp(20px, 6cqw, 96px); top: 50%; translate: 0 -50%; width: min(40cqw, 560px);
  filter: drop-shadow(0 2px 14px rgba(20, 36, 36, .35));
}
.ha__lockbox { position: relative; display: block; aspect-ratio: 857 / 380; }
.ha__part { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }

/* Armed (JS, motion allowed): the tile and the lockup wait off-stage until the band is in view. Without JS they are simply shown. */
.ha.is-armed .ha__tile { opacity: 0; }
.ha.is-armed .ha__part { opacity: 0; }
.ha.is-armed .ha__scrim { opacity: .25; }

.ha__replay {
  position: absolute; z-index: 3; right: clamp(16px, 3cqw, 40px); bottom: clamp(16px, 3cqh, 32px); display: none; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 18px 0 14px; border-radius: 999px; font: 500 14px/1 var(--bx-font); color: var(--bx-cream);
  background: rgba(44, 51, 51, .55); border: 1.5px solid rgba(242, 235, 219, .7); cursor: pointer; backdrop-filter: blur(6px);
  transition: background-color .2s ease, color .2s ease, opacity .3s ease;
}
.ha.has-motion .ha__replay { display: inline-flex; }
.ha.has-motion.is-armed .ha__replay { opacity: 0; pointer-events: none; }
.ha__replay:hover { background: var(--bx-cream); color: var(--bx-slate); }
.ha__replay:focus-visible { outline: 3px solid var(--bx-cream); outline-offset: 3px; }

@media (max-width: 700px) {
  .ha { --gx: .56; --gy: .27; --z: 1.5; height: min(580px, 80svh); }
  .ha__scrim { background: linear-gradient(0deg, rgba(44, 51, 51, .9) 0%, rgba(51, 70, 70, .62) 38%, rgba(51, 70, 70, 0) 66%); }
  .ha__lock { left: 50%; top: auto; bottom: 9%; translate: -50% 0; width: min(78cqw, 340px); }
  .ha__replay { right: 12px; bottom: auto; top: 12px; }
}

/* ====================================================================================================================================== */
/* ---------- Signature: the pinned story ---------- */
.bx-sig--a.sa {
  --sa-slate: var(--bx-slate); --sa-teal: var(--bx-teal); --sa-line: color-mix(in srgb, var(--bx-slate) 16%, transparent);
  display: block; padding: 0; background: var(--bx-cream); color: var(--bx-slate); font-family: var(--bx-font);
}
.sa-eyebrow { font-family: var(--mono); font-size: 12px; font-weight: 500; line-height: 1.4; letter-spacing: .08em; text-transform: uppercase; color: var(--bx-slate); }
.sa-title { font-family: var(--bx-font); font-weight: 600; font-size: clamp(28px, 3.2vw, 44px); line-height: 1.05; letter-spacing: -.035em; }

.sa-story { position: relative; }
.sa-sticky { position: relative; }
.sa-in { max-width: var(--max); margin-inline: auto; padding: clamp(56px, 8vw, 104px) var(--pad); display: grid; gap: clamp(28px, 4vw, 48px); }
.sa-head { display: grid; gap: 10px; }

/* the steps, as a list (the rail while pinned) */
.sa-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.sa-step { display: flex; gap: 14px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--sa-line); }
.sa-step__n {
  flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--bx-slate);
  font-family: var(--mono); font-size: 12px; font-weight: 500; color: var(--bx-slate); transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.sa-step__t { display: grid; gap: 4px; font-size: 14px; line-height: 1.45; }
.sa-step__t b { font-weight: 600; font-size: 15px; line-height: 1.3; }
.sa-step__t span { max-width: 38ch; }

/* ---------- The stage: the three figures ---------- */
.sa-stage {
  --t: 0; --slide: 1; --xf: 1; --ty: 1; --br: 1; --cap: 1; --fx: 0; --fy: 0; --fr: 12.9; --fs: 1; --fo: 0; --flat: 1;
  --sw: 0; --mk: 1; --mkf: 1; --sl: 1; --mkc: 1; --pt: 1; --pcap: 1; --cl: 0;
  position: relative; container: sastage / inline-size; display: grid; gap: clamp(48px, 7vw, 88px);
}
.sa-sc { position: relative; margin: 0; display: grid; justify-items: center; align-content: center; gap: 22px; width: 100%; }
.sa-mask {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: var(--c, var(--bx-slate));
  -webkit-mask: var(--m) 0 0 / 100% 100% no-repeat; mask: var(--m) 0 0 / 100% 100% no-repeat;
}

/* the name: everything inside .sa-w is placed in percentages of the new wordmark's own canvas (1131 x 236) */
.sa-w { position: relative; width: min(100%, 940px); aspect-ratio: 1131 / 236; container-type: inline-size; margin-bottom: clamp(100px, 16vw, 150px); }
.sa-before { display: grid; justify-items: start; gap: 10px; width: min(100%, 940px); }
.sa-before__logo { position: relative; display: block; width: min(300px, 70%); aspect-ratio: 544 / 184; }
.sa-before__logo img { position: absolute; inset: 0; width: 100%; height: 100%; }
.sa-before figcaption { font-size: 14px; line-height: 1.4; }

.sa-old { position: absolute; opacity: calc(1 - var(--xf)); transform: translate(calc((1 - var(--slide)) * var(--shift, 0%)), calc((1 - var(--slide)) * -8%)); }
.sa-old__box { position: relative; display: block; aspect-ratio: 544 / 184; }
.sa-old__box > img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }

/* "trading company" as square cells, each showing its own piece of the logo; they tumble down and fade with a little stagger */
.sa-cells { position: absolute; display: none; grid-template-columns: repeat(var(--cols), 1fr); grid-template-rows: repeat(var(--rows), 1fr); }
.sa.is-breaking .sa-cells { display: grid; }
.sa.is-breaking .sa-old__trading { visibility: hidden; }
.sa-cell {
  --k: clamp(0, calc((var(--t) - var(--d, 0)) / (1 - var(--d, 0))), 1);
  display: block; background-image: var(--src); background-repeat: no-repeat; background-position: var(--px) var(--py);
  background-size: calc(100% * var(--cols) * var(--tw) / var(--rw)) calc(100% * var(--rows) * var(--th) / var(--rh));
  transform: translate(calc(var(--dx, 0) * var(--k) * 1cqw), calc(var(--fy, 20) * var(--k) * var(--k) * 1cqw)) rotate(calc(var(--r, 0) * var(--k) * 1deg));
  opacity: calc(1 - clamp(0, calc((var(--k) - .5) / .5), 1));
  /* a tile surface that only appears once a cell starts to move, so the intact line is seamless and each piece then reads as a little tile */
  background-color: rgba(255, 255, 255, calc(var(--k) * .94)); border-radius: calc(var(--k) * 3px);
  box-shadow: 0 0 0 1px rgba(51, 70, 70, calc(var(--k) * .16)), 0 3px 8px rgba(51, 70, 70, calc(var(--k) * .14));
}
.sa.is-breaking.is-moving .sa-cell { will-change: transform, opacity; }

/* the new name, masked in slate so it takes her slate exactly */
.sa-m--aman { opacity: var(--xf); transform: translateY(calc((1 - var(--xf)) * 7%)); }
.sa-m--tye { opacity: var(--ty); transform: translateX(calc((1 - var(--ty)) * 9%)); }
.sa-m--l { opacity: var(--flat); }

/* the 3D tile, falling to the l: its box is placed so that the tile's centroid is the l's centroid (--fx, --fy, --fr, --fs come from the scroll) */
.sa-tile {
  position: absolute; aspect-ratio: 1; pointer-events: none; opacity: var(--fo);
  transform: translate(calc(var(--fx) * 1cqw), calc(var(--fy) * max(160px, calc(50vh - 76px)))) rotate(calc(var(--fr) * 1deg)) scale(var(--fs));
  filter: drop-shadow(0 1.1cqw 1.2cqw rgba(30, 44, 44, .28));
}
.sa-tile img { display: block; width: 100%; height: auto; max-width: none; }

/* her two bracket captions, as thin lines: they draw outwards from the middle, then the words arrive */
.sa-br { position: absolute; top: calc(100% + 12px); }
.sa-br__line { display: block; position: relative; height: 34px; clip-path: inset(0 calc((1 - var(--br)) * 50%) 0 calc((1 - var(--br)) * 50%)); }
.sa-br__line::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 11px; border: 1.5px solid var(--sa-teal); border-top: 0; }
.sa-br__line::after { content: ""; position: absolute; left: 50%; top: 11px; bottom: 0; width: 1.5px; margin-left: -.75px; background: var(--sa-teal); }
.sa-br__txt { margin: 4px 0 0; max-width: 36ch; font-size: clamp(13px, 1.75cqw, 18px); line-height: 1.35; opacity: var(--cap); transform: translateY(calc((1 - var(--cap)) * 8px)); }

/* the mark: the slate house, and its teal tile tilting into the slot (starts upright, ends at her angle) */
.sa-mk { position: relative; width: clamp(170px, 27cqw, 320px); opacity: var(--mkf); transform: scale(calc(.9 + var(--mk) * .1)); }
.sa-mk__slot {
  opacity: clamp(0, calc(var(--sl) * 10), 1);
  transform: translateY(calc((1 - min(var(--sl), 1)) * -95%)) rotate(calc((var(--sl) - 1) * var(--lang) * 1deg));
}
.sa-mk__cap { position: relative; margin: 0; padding-top: 30px; max-width: 30ch; text-align: center; font-size: clamp(14px, 1.9cqw, 18px); line-height: 1.4; opacity: calc(var(--mkc) * var(--mkf)); transform: translateY(calc((1 - var(--mkc)) * 8px)); }
.sa-mk__cap::before { content: ""; position: absolute; left: 50%; top: 0; width: 1.5px; height: 22px; margin-left: -.75px; background: var(--sa-teal); }

/* the pattern: her dark pattern, revealed from the middle outwards; the mark multiplies into it */
.sa-pat {
  display: block; position: relative; width: min(100%, 780px); aspect-ratio: 1626 / 914; overflow: hidden; border-radius: 18px; background: var(--bx-slate);
  clip-path: inset(calc((1 - var(--pt)) * 50%) calc((1 - var(--pt)) * 50%) round calc(18px + (1 - var(--pt)) * 60px));
}
.sa-pat img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.sa-pat__cap { margin: 0; text-align: center; font-size: clamp(14px, 1.9cqw, 18px); line-height: 1.4; opacity: var(--pcap); }
.sa-clones { position: absolute; inset: 0; pointer-events: none; }
.sa-clone {
  position: absolute; left: 50%; top: 42%; width: clamp(34px, 6.5cqw, 76px); aspect-ratio: 181 / 188;
  transform: translate(calc(-50% + var(--tx) * var(--cl) * 1cqw), calc(-50% + var(--ty) * var(--cl) * .55cqw)) rotate(calc(var(--tr) * var(--cl) * 3deg)) scale(calc(.5 + var(--cl) * .5));
  opacity: calc(clamp(0, calc(var(--cl) * 4), 1) * (1 - clamp(0, calc((var(--pt) - .45) * 2.2), 1)));
}
.sa-clone b { display: block; position: absolute; left: 0; top: 0; width: 100%; height: 115.4%; background: var(--c); -webkit-mask: var(--m) 0 0 / 100% 100% no-repeat; mask: var(--m) 0 0 / 100% 100% no-repeat; }

/* ---------- Pinned (JS adds .is-live; without it, with reduced motion, or in print, the story is just a list and three figures) ---------- */
.sa.is-live .sa-story { height: 200vh; height: 200svh; }   /* trimmed from 300 when A and C became one page (the user: both stories, shorter) */
.sa.is-live .sa-sticky { position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h)); height: calc(100svh - var(--header-h)); overflow: hidden; }
.sa.is-live .sa-in {
  height: 100%; padding-block: clamp(20px, 3.4vh, 40px); gap: 0 clamp(32px, 5vw, 72px); align-content: stretch;
  grid-template-columns: minmax(230px, 290px) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "head stage" "steps stage";
}
.sa.is-live .sa-head { grid-area: head; align-self: start; padding-bottom: 20px; }
.sa.is-live .sa-steps { grid-area: steps; align-self: start; }
.sa.is-live .sa-step__t span { display: none; }
.sa.is-live .sa-step.is-on .sa-step__t span { display: block; }
.sa.is-live .sa-step { color: color-mix(in srgb, var(--bx-slate) 80%, var(--bx-cream)); }
.sa.is-live .sa-step.is-on { color: var(--bx-slate); }
.sa.is-live .sa-step.is-on .sa-step__n { background: var(--sa-teal); border-color: var(--sa-teal); color: #fff; }
.sa.is-live .sa-stage { grid-area: stage; height: 100%; display: grid; overflow: clip; gap: 0; align-items: center; justify-items: center; }
.sa.is-live .sa-sc { grid-area: 1 / 1; height: 100%; pointer-events: none; }
.sa.is-live .sa-before { display: none; }
.sa.is-live .sa-sc--word { opacity: calc(1 - var(--sw)); transform: scale(calc(1 - var(--sw) * .06)); }
.sa.is-live .sa-sc--mark { opacity: var(--mk); position: relative; }
.sa.is-live .sa-sc--pat { align-content: center; }

@media (max-width: 700px) {
  .sa.is-live .sa-story { height: 170vh; height: 170svh; }
  .sa.is-live .sa-in { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr); grid-template-areas: "head" "steps" "stage"; padding-block: 16px; }
  .sa.is-live .sa-head { padding-bottom: 8px; }
  .sa.is-live .sa-step:not(.is-on) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; padding: 0; border: 0; }
  .sa.is-live .sa-step { padding: 8px 0 12px; }
  .sa.is-live .sa-w { margin-bottom: 118px; }
  .sa-br__txt { font-size: 12.5px; }
}

/* ====================================================================================================================================== */
/* ---------- The finish: straighten the l ---------- */
.sa-tilt { border-top: 1px solid var(--sa-line); }
.sa-tilt__in {
  max-width: var(--max); margin-inline: auto; padding: clamp(56px, 8vw, 112px) var(--pad); display: grid; gap: 28px clamp(32px, 5vw, 72px);
  grid-template-columns: minmax(230px, 290px) minmax(0, 1fr); grid-template-areas: "txt fig" "ctl fig" "live fig"; align-items: start;
}
.sa-tilt__txt { grid-area: txt; display: grid; gap: 10px; }
.sa-tilt__h { margin: 0; font-weight: 600; font-size: clamp(26px, 2.6vw, 36px); line-height: 1.08; letter-spacing: -.03em; }
.sa-tilt__p { margin: 0; font-size: 15px; line-height: 1.5; max-width: 34ch; }
.sa-tilt__fig { grid-area: fig; grid-row: 1 / 4; margin: 0; display: grid; place-items: center; padding: clamp(28px, 6vw, 80px); border-radius: 28px; background: #fff; box-shadow: 0 0 0 1px var(--sa-line); }
.sa-lk { position: relative; width: min(100%, 640px); }
.sa-lk__slot, .sa-lk__l { transition: transform .12s linear; }
.sa-lk__slot { right: auto; bottom: auto; }
.sa-tilt__ctl { grid-area: ctl; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px 14px; align-items: center; }
.sa-tilt__lab { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.sa-tilt__out { min-width: 4.2ch; font-family: var(--mono); font-size: 14px; font-variant-numeric: tabular-nums; text-align: right; }
.sa-tilt__ctl .sa-btn { grid-column: 1 / -1; justify-self: start; }
.sa-tilt__live { grid-area: live; margin: 0; max-width: 34ch; min-height: 3em; font-size: 15px; line-height: 1.5; font-weight: 500; }
.sa-btn {
  min-height: 44px; padding: 0 22px; border-radius: 999px; font: 500 14px/1 var(--bx-font); color: var(--bx-slate); background: transparent;
  border: 1.5px solid var(--bx-slate); cursor: pointer; transition: background-color .2s ease, color .2s ease;
}
.sa-btn:hover { background: var(--bx-slate); color: var(--bx-cream); }
.sa-btn:focus-visible, .sa-range:focus-visible { outline: 3px solid var(--sa-teal); outline-offset: 3px; }

.sa-range { width: 100%; height: 44px; margin: 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; }
.sa-range::-webkit-slider-runnable-track { height: 6px; border-radius: 99px; background: color-mix(in srgb, var(--bx-slate) 28%, transparent); }
.sa-range::-moz-range-track { height: 6px; border-radius: 99px; background: color-mix(in srgb, var(--bx-slate) 28%, transparent); }
.sa-range::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: -11px; border-radius: 50%; background: var(--sa-teal); border: 3px solid #fff; box-shadow: 0 0 0 1.5px var(--bx-slate), 0 3px 8px rgba(30, 44, 44, .3); }
.sa-range::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--sa-teal); border: 3px solid #fff; box-shadow: 0 0 0 1.5px var(--bx-slate), 0 3px 8px rgba(30, 44, 44, .3); }

@media (max-width: 800px) {
  .sa-tilt__in { grid-template-columns: minmax(0, 1fr); grid-template-areas: "txt" "fig" "ctl" "live"; }
  .sa-tilt__fig { grid-row: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .ha__tile.is-glint::before { animation: none; }
  .sa-lk__slot, .sa-lk__l { transition: none; }
}