/* ==========================================================================
   jacra.id, the Bali in facets design
   One stylesheet for the entry gate, Jacra Technology (dusk turning into night)
   and Jacra Marketing (dawn turning into morning). Every illustration is inline
   SVG drawn for the site. Brand faces and the brand gold.
   Motion lives behind the .motion class, which the head script only sets when
   the reader has not asked for less motion; without it every page is still.
   Writing rule for this file too: no em dash, no en dash.
   ========================================================================== */

/* ---------- fonts ---------- */
/* Plus Jakarta Sans, drawn by Tokotype in Jakarta (SIL Open Font License, PlusJakartaSans-OFL.txt beside
   it): one variable family for headings and text, the same face as Jacra's back office */
@font-face {
    font-family: "Plus Jakarta Sans";
    src: url("../fonts/PlusJakartaSans.woff2") format("woff2");
    font-weight: 200 800;
    font-display: swap;
}

/* one page slides into the next where the browser can, unless the reader asked for less motion */
@media (prefers-reduced-motion: no-preference) {
    @view-transition {
        navigation: auto;
    }
}

/* ---------- tokens ---------- */
:root {
    color-scheme: dark;
    --night-0: #080a17;
    --night-1: #0c0e20;
    --night-2: #141733;
    --night-3: #1d2e45;
    --violet: #273e60;
    --mauve: #3f547c;
    --rose: #b75d7c;
    --coral: #ec8a6c;
    --peach: #f3a06a;
    --gold: #fdbf14;
    --gold-strong: #f2b200;
    --gold-soft: #ffd66b;
    --gold-pale: #ffe9b0;
    --gold-ink: #5f3e00;
    --ink: #1c1f26;
    --ink-soft: #3d4350;
    --white: #ffffff;
    --stone: #f2f2ef;

    --display: "Plus Jakarta Sans", "Helvetica Neue", Arial, sans-serif;
    --text: "Plus Jakarta Sans", system-ui, "Segoe UI", Arial, sans-serif;
    --step-small: 0.9375rem;
    --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
    --step-lead: clamp(1.125rem, 1.02rem + 0.5vw, 1.4375rem);
    --step-head: clamp(2.25rem, 1.3rem + 3.2vw, 4.25rem);
    --gutter: clamp(16px, 4.5vw, 56px);
    --max: 1280px;
    --head-h: 76px;
    --section: clamp(4.5rem, 2rem + 7vw, 9rem);
    --ground: clamp(110px, 13vw, 210px);
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

    /* night tone by default; day sections swap these */
    --fg: #f3f3f1;
    --fg-soft: #c8d0dd;
    --fg-mute: #a4b0c2;
    --line: rgba(243, 243, 241, 0.14);
    --card: rgba(12, 14, 32, 0.52);
    --card-hi: rgba(29, 46, 69, 0.66);
    --accent: var(--gold-soft);
    --ghost: rgba(243, 243, 241, 0.42);
}
.tone-day,
.sec--day {
    --fg: #1c1f26;
    --fg-soft: #3d4350;
    --fg-mute: #4a505c;
    --line: rgba(28, 31, 38, 0.13);
    --card: rgba(255, 255, 255, 0.7);
    --card-hi: rgba(255, 255, 255, 0.9);
    --accent: var(--gold-ink);
    --ghost: rgba(28, 31, 38, 0.42);
    color-scheme: light;
}

/* ---------- base ---------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-padding-top: calc(var(--head-h) + 16px);
}
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}
body {
    margin: 0;
    min-height: 100vh;
    background: var(--page-bg, var(--night-1));
    color: var(--fg);
    font: 400 var(--step-body)/1.6 var(--text);
    overflow-x: clip;
    -webkit-font-smoothing: antialiased;
}
:root[lang="en"] [lang="id"],
:root[lang="id"] [lang="en"] {
    display: none;
}
img,
svg {
    display: block;
    max-width: 100%;
}
a {
    color: inherit;
}
h1,
h2,
h3,
h4 {
    margin: 0;
    font-family: var(--display);
    font-weight: 400;
    line-height: 1.08;
    text-wrap: balance;
}
p {
    margin: 0;
}
ul,
ol,
dl,
dd {
    margin: 0;
    padding: 0;
    list-style: none;
}
table {
    border-collapse: collapse;
}
/* an element the script hides stays hidden, whatever display its class gives it */
[hidden] {
    display: none !important;
}
.sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
.wrap {
    position: relative;
    width: 100%;
    max-width: calc(var(--max) + var(--gutter) * 2);
    margin-inline: auto;
    padding-inline: var(--gutter);
}
.skip {
    position: fixed;
    z-index: 100;
    top: 12px;
    left: 12px;
    padding: 12px 18px;
    border-radius: 999px;
    background: var(--gold);
    color: var(--ink);
    font-weight: 600;
    text-decoration: none;
    transform: translateY(-160%);
}
.skip:focus {
    transform: none;
}
:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
}
.sec--day :focus-visible,
.tone-day :focus-visible,
[data-team="mkt"] .foot :focus-visible {
    outline-color: var(--ink);
}
/* over the dawn the ground runs from pale gold to deep violet, so the ring there is ink on a pale halo */
[data-team="mkt"] .hero__in :focus-visible {
    outline-color: var(--ink);
    box-shadow: 0 0 0 3px rgba(255, 246, 236, 0.92);
}
.js .nav.is-open :focus-visible {
    outline-color: var(--gold);
}
.ico {
    flex: none;
    width: 1.15em;
    height: 1.15em;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.ico--big {
    width: 28px;
    height: 28px;
    stroke-width: 1.4;
}
.tnum {
    font-variant-numeric: tabular-nums;
}

/* ---------- small type ---------- */
.eyebrow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
    color: var(--accent);
    font: 600 0.78rem/1.3 var(--text);
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.eyebrow__no {
    padding: 5px 9px;
    border: 1px solid currentColor;
    border-radius: 999px;
    font: 600 0.72rem/1 var(--text);
    letter-spacing: 0.06em;
}
.sec-head {
    display: grid;
    gap: 18px;
    max-width: 50rem;
    margin-bottom: clamp(36px, 5vw, 68px);
}
.sec-head--center {
    margin-inline: auto;
    justify-items: center;
    text-align: center;
}
/* a head with a scene beside it: the words on the left, a round window on the right */
.sec-head--art {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: clamp(28px, 5vw, 80px);
    max-width: none;
}
.sec-head__text {
    display: grid;
    gap: 18px;
    max-width: 50rem;
}
.sec-art {
    display: block;
    width: clamp(220px, 24vw, 340px);
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 0 0 1px rgba(253, 191, 20, 0.55), 0 0 0 12px rgba(255, 255, 255, 0.04), 0 34px 80px -30px rgba(0, 0, 0, 0.6);
}
.sec-art__svg {
    width: 100%;
    height: 100%;
}
.sec-art:has(.cst) {
    overflow: visible;
    border-radius: 0;
    box-shadow: none;
}
.cst {
    width: 100%;
    height: 100%;
    overflow: visible;
}
.cst__mark {
    opacity: 0.15;
}
.cst__lines path {
    fill: none;
    stroke: var(--gold);
    stroke-width: 2.4;
    stroke-opacity: 0.75;
    stroke-linecap: round;
}
.cst__stars circle.cst__star {
    fill: #fff5d6;
}
.cst__stars .cst__star--big {
    fill: var(--gold-pale);
}
/* a wide scene that opens a section */
.banner {
    overflow: hidden;
    margin-bottom: clamp(28px, 4vw, 48px);
    border-radius: 28px;
    box-shadow: 0 30px 80px -40px rgba(0, 0, 0, 0.7), 0 0 0 1px var(--line);
}
.banner__svg {
    width: 100%;
    height: auto;
    aspect-ratio: 1600 / 520;
}
.sec-head h2 {
    font-size: var(--step-head);
    font-weight: 300;
    letter-spacing: -0.02em;
}
.sec-head__sub {
    display: block;
    max-width: 44rem;
    color: var(--fg-soft);
    font-size: var(--step-lead);
    line-height: 1.5;
}
.note {
    color: var(--fg-mute);
    font-size: 0.95rem;
}
.sec > .wrap > .note {
    max-width: 52rem;
    margin-top: clamp(22px, 2.6vw, 34px);
    padding: 14px 18px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--card);
    color: var(--fg-soft);
}

/* ---------- buttons and links ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    padding: 12px 22px;
    border: 1px solid transparent;
    border-radius: 999px;
    font: 600 0.8rem/1.2 var(--text);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.btn .ico {
    transition: transform 0.25s var(--ease);
}
.btn:hover .ico {
    transform: translateX(3px);
}
.btn--gold {
    background: var(--gold);
    color: var(--ink);
    box-shadow: 0 10px 30px -14px rgba(253, 191, 20, 0.8);
}
.btn--gold:hover {
    background: var(--gold-soft);
}
.motion .btn--gold:hover {
    transform: translateY(-2px);
}
.btn--ghost {
    border-color: var(--ghost);
    color: var(--fg);
}
.btn--ghost:hover {
    border-color: var(--gold);
}
.link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 3px;
    border-bottom: 1px solid currentColor;
    color: var(--accent);
    font-weight: 600;
    text-decoration: none;
}
.link .ico {
    transition: transform 0.25s var(--ease);
}
.link:hover .ico {
    transform: translateX(3px);
}
.actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 20px;
}

/* ==========================================================================
   header of the team pages
   ========================================================================== */
.head {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 50;
    height: var(--head-h);
    color: var(--fg);
}
/* the glass lives on a pseudo element: a backdrop filter on the header itself
   would become the containing block of the fixed phone menu and squash it */
.head::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(10, 17, 26, 0.74);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
    opacity: 0;
    transition: opacity 0.35s var(--ease), background-color 0.35s var(--ease);
}
.head.is-scrolled::before,
:root.menu-open .head::before,
:root:not(.js) .head::before {
    opacity: 1;
}
.head.tone-day::before {
    background: rgba(255, 250, 243, 0.82);
}
.head__in {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    height: 100%;
}
.brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: inherit;
    text-decoration: none;
}
.brand__mark {
    flex: none;
    width: 30px;
    height: 34px;
    background: var(--gold);
    -webkit-mask: url("../img/jacra-mark.png") center / contain no-repeat;
    mask: url("../img/jacra-mark.png") center / contain no-repeat;
}
.tone-day .brand__mark {
    background: var(--ink);
}
.brand__text {
    display: grid;
    gap: 4px;
}
.brand__name {
    font: 700 1.2rem/1 var(--display);
    letter-spacing: 0.22em;
    text-transform: uppercase;
}
.brand__sub {
    color: var(--fg-soft);
    font: 600 0.62rem/1 var(--text);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    white-space: nowrap;
}
.nav ul {
    display: flex;
    gap: clamp(16px, 2vw, 30px);
}
.nav ul a {
    display: inline-block;
    padding-block: 8px;
    color: var(--fg-soft);
    font: 500 0.94rem/1.2 var(--text);
    text-decoration: none;
    transition: color 0.2s var(--ease);
}
.nav ul a:hover,
.nav ul a[aria-current="true"] {
    color: var(--fg);
}
.nav ul a[aria-current="true"] {
    text-decoration: underline;
    text-decoration-color: var(--gold);
    text-decoration-thickness: 2px;
    text-underline-offset: 8px;
}
.nav__cta {
    display: none;
}
.head__end {
    display: flex;
    align-items: center;
    gap: 12px;
}
/* the other team, one tap away */
.swap {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 6px 14px 6px 8px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--fg);
    font: 600 0.74rem/1 var(--text);
    letter-spacing: 0.08em;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color 0.25s var(--ease);
}
.swap:hover {
    border-color: var(--gold);
}
.swap__dot {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gold-soft), var(--coral));
    color: var(--ink);
}
.swap--tech .swap__dot {
    background: linear-gradient(135deg, #273e60, #3d4d74);
    color: var(--gold-pale);
}
.swap__dot .ico {
    width: 15px;
    height: 15px;
}
.lang {
    display: none;
    align-items: center;
}
.js .lang {
    display: flex;
}
.lang__btn {
    min-width: 44px;
    min-height: 44px;
    padding: 0 6px;
    border: 0;
    background: none;
    color: var(--fg-soft);
    font: 600 0.8rem/1 var(--text);
    letter-spacing: 0.12em;
    cursor: pointer;
}
.lang__btn[aria-pressed="true"] {
    color: var(--fg);
    text-decoration: underline;
    text-decoration-color: var(--gold);
    text-decoration-thickness: 2px;
    text-underline-offset: 7px;
}
.lang__sep {
    width: 1px;
    height: 14px;
    background: var(--line);
}
.head__cta {
    min-height: 44px;
    padding: 10px 18px;
}
.menu {
    display: none;
}

/* ==========================================================================
   hero of the team pages: pinned while the gate opens and the cloud rises
   ========================================================================== */
.hero {
    position: relative;
    z-index: 1;
}
.motion .hero[data-hero] {
    height: 185vh;
    height: calc(clamp(640px, 100svh, 1180px) + max(85vh, 520px));
}
.hero__pin {
    position: relative;
    isolation: isolate;
    display: flex;
    height: 100vh;
    height: 100svh;
    min-height: 640px;
    max-height: 1180px;
    overflow: hidden;
    background: var(--night-1);
}
.motion .hero[data-hero] .hero__pin {
    position: sticky;
    top: 0;
}
.scene {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
}
.scene__world {
    position: absolute;
    inset: 0;
    transform-origin: 50% 70%;
}
.layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.edge {
    position: absolute;
    bottom: 0;
    width: clamp(340px, 46vw, 900px);
    height: auto;
    aspect-ratio: 800 / 640;
}
.edge--l {
    left: 0;
}
.edge--r {
    right: 0;
}
.gate {
    position: absolute;
    bottom: 0;
    width: auto;
    height: min(70%, 57vw, 820px);
    aspect-ratio: 340 / 880;
}
.gate--l {
    left: 0;
    transform: scaleX(-1);
}
.gate--r {
    right: 0;
}
.scene::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 16%;
    background: linear-gradient(rgba(12, 14, 32, 0), var(--hero-foot, var(--night-1)));
    pointer-events: none;
}
.hero__pin::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0 0 auto 0;
    height: 64%;
    background: radial-gradient(ellipse 62% 70% at 50% 20%, rgba(9, 16, 26, 0.55), rgba(9, 16, 26, 0) 70%);
    pointer-events: none;
}
/* the cloud that rises at the end of the pinned run */
.veil {
    position: absolute;
    z-index: 3;
    inset: auto 0 0 0;
    height: 66%;
    pointer-events: none;
    transform: translate3d(0, 102%, 0);
}
.veil svg {
    width: 100%;
    height: 46%;
    color: var(--veil, var(--night-1));
}
/* below its tops the cloud clears from its own colour into the colour at the top of the first chapter's sky
   (--sky-join), easing in and out, so no line shows where the hero ends and the chapter's sky goes on from it */
.veil::before,
.veil::after {
    content: "";
    position: absolute;
    inset: 45% 0 0 0;
}
.veil::before {
    background: var(--sky-join, var(--veil, var(--night-1)));
}
.veil::after {
    background: var(--veil, var(--night-1));
    -webkit-mask-image: linear-gradient(#000000, rgba(0, 0, 0, 0.97) 10%, rgba(0, 0, 0, 0.9) 20%, rgba(0, 0, 0, 0.78) 30%, rgba(0, 0, 0, 0.65) 40%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0.35) 60%, rgba(0, 0, 0, 0.22) 70%, rgba(0, 0, 0, 0.1) 80%, rgba(0, 0, 0, 0.03) 90%, rgba(0, 0, 0, 0));
    mask-image: linear-gradient(#000000, rgba(0, 0, 0, 0.97) 10%, rgba(0, 0, 0, 0.9) 20%, rgba(0, 0, 0, 0.78) 30%, rgba(0, 0, 0, 0.65) 40%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0.35) 60%, rgba(0, 0, 0, 0.22) 70%, rgba(0, 0, 0, 0.1) 80%, rgba(0, 0, 0, 0.03) 90%, rgba(0, 0, 0, 0));
}
/* without motion the cloud never rises, so the hero's own foot meets the chapter instead */
:root:not(.motion) .scene::after {
    background: linear-gradient(rgba(12, 14, 32, 0), var(--sky-join, var(--hero-foot, var(--night-1))));
}
.hero__in {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding-top: calc(var(--head-h) + clamp(20px, 5vh, 60px));
    padding-bottom: clamp(20px, 4.5vh, 52px);
    text-align: center;
}
.hero__eyebrow {
    justify-content: center;
    color: var(--gold-soft);
    text-shadow: 0 1px 12px rgba(8, 10, 23, 0.8);
    text-wrap: balance;
}
.hero__title {
    max-width: 16ch;
    margin-top: clamp(12px, 2.4vh, 24px);
    color: #f3f3f1;
    font: 700 clamp(3rem, 1rem + 6.4vw, 7rem)/0.94 var(--display);
    letter-spacing: -0.02em;
    text-shadow: 0 8px 46px rgba(8, 10, 23, 0.55);
}
.hero__lead {
    max-width: 38rem;
    margin-top: clamp(14px, 2.2vh, 24px);
    color: #f3f3f1;
    font-size: var(--step-lead);
    line-height: 1.5;
    text-shadow: 0 1px 14px rgba(8, 10, 23, 0.9);
    text-wrap: balance;
}
/* Marketing's headline is a sentence (brief of 31 October 2026), so it runs smaller than a name */
.hero__title--long {
    max-width: 19ch;
    font-size: clamp(2.3rem, 1rem + 4.3vw, 5.1rem);
    line-height: 1.02;
}
/* the starting prices under the buttons, on frosted daylight like the facts below them */
.hero__from {
    margin-top: 14px;
    padding: 7px 16px;
    border-radius: 16px;
    background: rgba(255, 252, 247, 0.86);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: var(--ink);
    font: 500 0.92rem/1.4 var(--text);
    text-wrap: balance;
}
.hero__lead + .hero__lead {
    margin-top: 10px;
}
/* Marketing's morning: the words that need a ground sit on frosted daylight in ink, like the cards below; a
   dark glass over the dawn colours turned muddy */
[data-team="mkt"] .hero__lead {
    padding: 12px 20px;
    border-radius: 18px;
    background: rgba(255, 252, 247, 0.86);
    color: var(--ink);
    text-shadow: none;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.hero__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: clamp(18px, 3vh, 30px);
}
.hero__actions .btn--ghost {
    border-color: rgba(243, 243, 241, 0.5);
    color: #f3f3f1;
    background: rgba(12, 14, 32, 0.45);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
[data-team="mkt"] .hero__actions .btn--ghost {
    border-color: rgba(255, 252, 247, 0.9);
    background: rgba(255, 252, 247, 0.86);
    color: var(--ink);
}
[data-team="mkt"] .hero__more {
    padding: 10px 18px;
    border-radius: 999px;
    background: rgba(255, 252, 247, 0.86);
    color: var(--ink);
    text-shadow: none;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.hero__facts {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    max-width: 62rem;
    margin-top: auto;
    padding-top: 22px;
}
.hero__facts li {
    padding: 9px 16px;
    border: 1px solid rgba(243, 243, 241, 0.2);
    border-radius: 999px;
    background: rgba(12, 14, 32, 0.66);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: #f3f3f1;
    font: 500 0.88rem/1.3 var(--text);
}
[data-team="mkt"] .hero__facts li {
    border-color: rgba(255, 252, 247, 0.9);
    background: rgba(255, 252, 247, 0.86);
    color: var(--ink);
}
.hero__more {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    margin-top: 12px;
    padding: 10px;
    color: #f3f3f1;
    font: 600 0.74rem/1 var(--text);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-decoration: none;
    text-shadow: 0 1px 10px rgba(8, 10, 23, 0.8);
}
.hero__j {
    color: var(--gold);
    text-shadow: 0 0 46px rgba(253, 191, 20, 0.5), 0 8px 46px rgba(8, 10, 23, 0.4);
}

/* ---------- herons and petals ---------- */
.herons {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.heron {
    position: absolute;
    width: 64px;
    height: auto;
    overflow: visible;
    transform: scaleX(-1);
}
.heron path {
    fill: #fbf3ee;
}
.heron .heron__far {
    fill: #d8c3d6;
}
.heron .heron__legs {
    fill: none;
    stroke: #fbf3ee;
    stroke-width: 1.4;
    stroke-linecap: round;
}
.heron--1 { top: 67%; left: 60%; width: 76px; }
.heron--2 { top: 69%; left: 66%; width: 62px; }
.heron--3 { top: 66%; left: 69%; width: 54px; }
.heron--4 { top: 69.5%; left: 73%; width: 66px; }
.heron--5 { top: 67.5%; left: 78%; width: 48px; }
.gate-screen .heron--1 { top: 5%; width: 52px; }
.gate-screen .heron--2 { top: 7%; width: 44px; }
.gate-screen .heron--3 { top: 4%; width: 38px; }
.gate-screen .heron--4 { top: 8%; width: 46px; }
.gate-screen .heron--5 { top: 6%; width: 34px; }
.petals {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.petal {
    position: absolute;
    top: 12%;
    width: 24px;
    height: 24px;
    opacity: 0;
}
.petal--1 { left: 12%; width: 28px; height: 28px; }
.petal--2 { left: 30%; width: 20px; height: 20px; }
.petal--3 { left: 48%; width: 26px; height: 26px; }
.petal--4 { left: 63%; width: 18px; height: 18px; }
.petal--5 { left: 76%; width: 30px; height: 30px; }
.petal--6 { left: 88%; width: 22px; height: 22px; }
.petal--7 { left: 96%; width: 18px; height: 18px; }

/* ==========================================================================
   sections: each one its own sky, from the land above to its own horizon
   ========================================================================== */
.sec {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    overflow: clip;
    padding-block: var(--section) calc(var(--section) * 0.6 + var(--ground));
    background: linear-gradient(180deg, var(--sky-a, var(--night-1)) 0%, var(--sky-m, var(--night-2)) 66%, var(--sky-b, var(--night-3)) 100%);
    color: var(--fg);
}
/* with the script on, sections far off screen are not laid out until they come near; a jump to a section
   lays the page out in full first (bali.js adds .cv-off), so it lands where it should */
.js .sec,
.js .foot {
    content-visibility: auto;
    contain-intrinsic-size: auto 1200px;
}
.cv-off .sec,
.cv-off .foot {
    content-visibility: visible;
}
.sec__sky {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}
.sec__sky svg {
    position: sticky;
    top: 0;
    width: 100%;
    height: 100vh;
}
.sec__ground {
    position: absolute;
    inset: auto 0 -30px 0;
    z-index: -1;
    height: calc(var(--ground) + 30px);
    pointer-events: none;
}
.sec__ground svg {
    width: 100%;
    height: 100%;
}
.sec::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: auto 0 0 0;
    height: 44px;
    background: linear-gradient(rgba(12, 14, 32, 0), var(--sky-next, rgba(12, 14, 32, 0)));
    pointer-events: none;
}

/* ==========================================================================
   chapters: a section that is a place. Its drawing, the stage, stays on screen
   while the words pass over it, and each beat of the words changes the drawing:
   a light comes on, the camera turns to what the words are about. bali.js names
   the current beat (data-beat) and every beat passed so far (data-seen) on the
   section, and sets .ch-ready on the root once it does. A chapter's own sheet
   draws its states from those, under .motion.ch-ready only: without them the
   drawing shows its last state, every light on.
   ========================================================================== */
.ch {
    --panel: rgba(9, 16, 26, 0.86);
    --cut: 24px;
    padding-block: 0 calc(var(--section) * 0.35 + var(--ground));
}
.ch.sec--day {
    --panel: rgba(255, 251, 244, 0.92);
}
.ch__stage {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}
/* the first chapter takes the hero over: the top of its drawing opens out of the colour the hero ends in, so
   the join stays exact across the width even where the drawing has a glow or rays at one side; it is short, so
   a cloud drawn near the top of the chapter is not dimmed */
.hero + .ch > .ch__stage::after {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 24px;
    background: var(--sky-join, var(--veil, var(--night-1)));
    -webkit-mask-image: linear-gradient(#000000, rgba(0, 0, 0, 0));
    mask-image: linear-gradient(#000000, rgba(0, 0, 0, 0));
}
.ch__frame {
    position: relative;
    height: 100vh;
    overflow: hidden;
    container-type: size;
}
/* the camera: a strip as wide as the drawing at this height. --u is the share of the drawing's width it
   looks at, --s where on screen that point should sit, --pan how far it may follow (wide screens show the
   whole drawing and barely move), --zoom how close it comes. It never shows past the drawing's edges. */
.ch__cam {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: max(100cqw, 100cqh * var(--aspect, 1.7778));
    transform: translateX(-50%) translateX(clamp((100cqw - 100%) / 2, ((var(--s, 0.5) - 0.5) * 100cqw + (0.5 - var(--u, 0.5)) * 100%) * var(--pan, 1), (100% - 100cqw) / 2)) scale(var(--zoom, 1));
    transform-origin: var(--zx, 50%) var(--zy, 100%);
}
.ly {
    position: absolute;
    inset: 0;
}
.ly > svg {
    display: block;
    width: 100%;
    height: 100%;
}
.ch__head {
    display: grid;
    align-content: end;
    gap: clamp(14px, 2.2vh, 24px);
    min-height: 100vh;
    min-height: 100svh;
    max-width: 48rem;
    padding-block: calc(var(--head-h) + 8vh) clamp(56px, 14vh, 160px);
}
.ch__title {
    font: 650 clamp(2.75rem, 1rem + 5.2vw, 6.25rem)/0.95 var(--display);
    letter-spacing: -0.028em;
    text-wrap: balance;
}
.ch__lead {
    max-width: 36rem;
    color: var(--fg);
    font-size: var(--step-lead);
    line-height: 1.5;
    text-wrap: pretty;
}
.ch:not(.sec--day) :is(.ch__title, .ch__lead) {
    text-shadow: 0 2px 28px rgba(6, 11, 18, 0.75);
}
.ch.sec--day :is(.ch__title, .ch__lead) {
    text-shadow: 0 1px 22px rgba(255, 249, 240, 0.9);
}
.beats {
    display: grid;
    gap: 36px;
    padding-bottom: clamp(24px, 4vw, 56px);
}
/* a beat is a panel cut like a facet; the small facet at its corner turns gold while it is the current one */
.beat {
    position: relative;
    isolation: isolate;
    display: grid;
    align-content: start;
    gap: 14px;
    width: min(100%, 35rem);
    padding: clamp(24px, 3vw, 38px);
}
.beat::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--panel);
    clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
}
.beat::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: var(--cut);
    height: var(--cut);
    background: var(--gold);
    clip-path: polygon(0 0, 100% 0, 100% 100%);
    opacity: 0.32;
    transition: opacity 0.6s var(--ease);
}
.beat.is-on::after,
:root:not(.ch-ready) .beat::after {
    opacity: 1;
}
.beat--end {
    justify-self: end;
}
/* still pages: the beats are only the words, side by side where there is room */
:root:not(.motion) .beats {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 30rem), 1fr));
}
:root:not(.motion) .beat {
    width: 100%;
}
.beat__title {
    font: 600 clamp(1.5rem, 1.05rem + 1.4vw, 2.3rem)/1.06 var(--display);
    letter-spacing: -0.016em;
    text-wrap: balance;
}
.beat__text {
    color: var(--fg-soft);
}
@media (prefers-reduced-motion: no-preference) {
    /* with motion the stage holds still on screen while the words pass, and the beats stand apart so the
       drawing shows between them */
    .motion .ch__frame {
        position: sticky;
        top: 0;
    }
    .motion .beats {
        gap: max(34vh, 260px);
        padding-block: 4vh 30vh;
    }
    .motion .ch__cam {
        transition: transform 1.8s var(--ease-in-out), transform-origin 1.8s var(--ease-in-out);
    }
}
@supports (animation-timeline: view()) {
    /* a chapter's own sheet ties its scroll moves to this: contain 0% is the stage settling on screen,
       contain 100% the last of the words leaving it */
    .motion .ch {
        view-timeline: --ch block;
    }
}
.cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
    gap: clamp(14px, 1.6vw, 22px);
}
.card,
.group,
.step,
.plan,
.client-card,
.person,
.price,
.stat,
.faq__item {
    position: relative;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: var(--card);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.card {
    display: grid;
    align-content: start;
    gap: 12px;
    padding: clamp(20px, 2.2vw, 28px);
    overflow: hidden;
}
/* a soft light follows the pointer across a card */
.card::after,
.plan::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(260px circle at var(--px, 50%) var(--py, -40%), rgba(253, 191, 20, 0.14), transparent 60%);
    opacity: 0;
    transition: opacity 0.3s var(--ease);
    pointer-events: none;
}
.card:hover::after,
.plan:hover::after {
    opacity: 1;
}
.card__ico {
    width: 34px;
    height: 34px;
    color: var(--gold);
    stroke-width: 1.4;
}
.sec--day .card__ico {
    color: var(--gold-ink);
}
.card__title {
    font: 500 1.25rem/1.18 var(--display);
}
.card__text {
    color: var(--fg-soft);
    font-size: 0.98rem;
}
.card__name {
    color: var(--fg);
    font-weight: 600;
}
.card__list .card__text {
    margin-top: 2px;
    font-size: 0.93rem;
}
.feature__title {
    font: 500 1.3rem/1.2 var(--display);
}
.person__bio {
    margin-top: 4px;
    color: var(--fg-soft);
    font-size: 0.9rem;
}
.about__office {
    color: var(--fg-soft);
}
.legal {
    display: grid;
    gap: 14px;
    margin-top: 10px;
}
.switch__text {
    color: var(--fg-soft);
    font-size: var(--step-lead);
}
.card__list,
.group__list,
.plan__list,
.client-card__list {
    display: grid;
    gap: 8px;
}
.card__list li,
.group__list li,
.plan__list li {
    position: relative;
    padding-left: 20px;
    color: var(--fg-soft);
    font-size: 0.96rem;
    line-height: 1.45;
}
.card__list li::before,
.group__list li::before,
.plan__list li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 0.6em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 8px rgba(253, 191, 20, 0.7);
}
.groups {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: clamp(14px, 1.6vw, 22px);
}
.group {
    display: grid;
    align-content: start;
    gap: 14px;
    padding: clamp(22px, 2.4vw, 30px);
}
.group__title {
    font: 500 1.35rem/1.15 var(--display);
}
.group__text {
    color: var(--fg-soft);
}

/* ---------- steps: lanterns along a path ---------- */
.steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: clamp(14px, 1.6vw, 22px);
    counter-reset: step;
}
.step {
    display: grid;
    align-content: start;
    gap: 10px;
    padding: clamp(20px, 2.2vw, 28px);
}
.step__no {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid rgba(253, 191, 20, 0.5);
    color: var(--accent);
    font: 700 1rem/1 var(--display);
    transition: background-color 0.6s var(--ease), color 0.6s var(--ease), box-shadow 0.6s var(--ease);
}
.step.is-lit .step__no,
:root:not(.motion) .step__no {
    background: var(--gold);
    color: var(--ink);
    box-shadow: 0 0 0 6px rgba(253, 191, 20, 0.14), 0 0 28px rgba(253, 191, 20, 0.6);
}
.step__title {
    font: 500 1.22rem/1.2 var(--display);
}
.step__when {
    color: var(--accent);
    font: 600 0.74rem/1.3 var(--text);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.step--check {
    border-style: dashed;
}
.step__no .ico {
    width: 20px;
    height: 20px;
    stroke-width: 2;
}
.step__text--muted {
    color: var(--fg-mute);
}
.steps--program {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
}
.feature__list {
    display: grid;
    gap: 8px;
}
.feature__list li {
    position: relative;
    padding-left: 20px;
    color: var(--fg-soft);
    font-size: 0.96rem;
}
.feature__list li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 0.6em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gold);
}
.step__text {
    color: var(--fg-soft);
    font-size: 0.98rem;
}

/* ---------- plans ---------- */
.plans {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 228px), 1fr));
    gap: clamp(14px, 1.6vw, 20px);
    align-items: stretch;
}
.plan {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: clamp(20px, 2.2vw, 28px);
    overflow: hidden;
    transition: transform 0.4s var(--ease), border-color 0.3s var(--ease);
}
.plan:hover {
    border-color: rgba(253, 191, 20, 0.55);
}
.plan--feature {
    border-color: rgba(253, 191, 20, 0.7);
    background: var(--card-hi);
    box-shadow: 0 30px 70px -40px rgba(253, 191, 20, 0.6);
}
.plan__art {
    width: 76px;
    height: 76px;
    margin-bottom: 4px;
}
.plan__art svg {
    width: 100%;
    height: 100%;
}
.plan__name {
    font: 600 1.15rem/1.2 var(--display);
}
.plan__price {
    color: var(--fg);
    font: 600 clamp(1.3rem, 0.95rem + 0.85vw, 1.75rem)/1.08 var(--display);
    letter-spacing: -0.01em;
    white-space: nowrap;
}
.plan__what {
    color: var(--fg);
    font-weight: 600;
}
.plan__sub {
    margin-top: 6px;
    color: var(--fg-mute);
    font: 600 0.72rem/1.3 var(--text);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.plan__unit {
    color: var(--fg-mute);
    font-size: 0.9rem;
}
.plan__list {
    margin-top: 6px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}
.plan__cta {
    margin-top: auto;
    align-self: stretch;
    white-space: normal;
    text-align: center;
    text-wrap: balance;
}
@media (min-width: 75em) {
    .plans {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
}
.tier .tier__glow {
    transform-box: fill-box;
    transform-origin: center;
}

/* ---------- tables ---------- */
.table-wrap {
    overflow-x: auto;
    margin-top: clamp(24px, 3vw, 40px);
    border: 1px solid var(--line);
    border-radius: 22px;
    background: var(--card);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.compare {
    width: 100%;
    min-width: 720px;
    font-size: 0.95rem;
}
.compare th,
.compare td {
    padding: 13px 16px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
}
.compare thead th {
    position: sticky;
    top: 0;
    color: var(--fg);
    font: 600 0.92rem/1.3 var(--display);
}
.compare tbody th {
    color: var(--fg-soft);
    font-weight: 500;
}
.compare tbody tr:last-child th,
.compare tbody tr:last-child td {
    border-bottom: 0;
}
.compare tbody tr {
    transition: background-color 0.2s var(--ease);
}
.compare tbody tr:hover {
    background: rgba(253, 191, 20, 0.06);
}
.compare caption {
    padding: 14px 16px 6px;
    color: var(--fg-mute);
    text-align: left;
}
.compare th:first-child {
    width: 26%;
    min-width: 200px;
}
.compare thead th {
    white-space: nowrap;
}
.compare thead .plan__price {
    display: block;
    margin-top: 4px;
    font-size: 1.05rem;
}
.compare td {
    color: var(--fg-soft);
}
.compare span.yes {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 4px;
    vertical-align: -2px;
    background: var(--gold);
    box-shadow: 0 0 10px rgba(253, 191, 20, 0.55);
}
.compare td.no {
    color: var(--fg-mute);
}
.table-wrap + .groups {
    margin-top: clamp(14px, 1.6vw, 22px);
}

/* ---------- feature: text and art side by side ---------- */
.feature {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(28px, 5vw, 72px);
    align-items: center;
    margin-block: clamp(28px, 4vw, 56px);
}
.feature--flip .feature__art {
    order: -1;
}
.feature__text {
    display: grid;
    gap: 16px;
    justify-items: start;
}
.feature__text p {
    color: var(--fg-soft);
}
.feature__art {
    overflow: hidden;
    border-radius: 28px;
    box-shadow: 0 30px 80px -40px rgba(0, 0, 0, 0.7), 0 0 0 1px var(--line);
}
.feature__art .art {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
}
.feature__art .art--arc {
    aspect-ratio: 16 / 9;
}

/* ---------- prices, stats, facts ---------- */
.price-list,
.stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: clamp(12px, 1.4vw, 18px);
}
.price,
.stat {
    display: flex;
    flex-direction: column-reverse;
    gap: 8px;
    padding: clamp(18px, 2vw, 24px);
}
.price,
.stat {
    flex-direction: column;
}
.stat dd {
    order: 1;
}
.stat dt {
    order: 2;
}
.stat dd.stat__note {
    order: 3;
    color: var(--fg-soft);
    font: 400 0.92rem/1.45 var(--text);
    letter-spacing: 0;
}
.price dt {
    order: 2;
}
.price dd.tnum {
    order: 1;
}
.price .price__desc {
    order: 3;
    color: var(--fg-soft);
    font: 400 0.98rem/1.5 var(--text);
}
.price dt,
.stat dt {
    color: var(--fg-soft);
    font-size: 0.95rem;
}
.price dd,
.stat dd {
    color: var(--fg);
    font: 600 clamp(1.5rem, 1.1rem + 1vw, 2rem)/1.05 var(--display);
}
.stat dd {
    font-weight: 300;
    font-size: clamp(2.6rem, 1.6rem + 3vw, 4.4rem);
    letter-spacing: -0.03em;
}
.stat dd.stat__word {
    display: flex;
    align-items: flex-end;
    min-height: calc(clamp(2.6rem, 1.6rem + 3vw, 4.4rem) * 1.05);
    font-size: clamp(2rem, 1rem + 2.4vw, 3.4rem);
    white-space: nowrap;
}
.facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
    gap: 16px 30px;
}
.facts dt {
    color: var(--fg-mute);
    font: 600 0.72rem/1.3 var(--text);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.facts dd {
    margin-top: 4px;
    font-weight: 600;
}
.quote {
    margin: 0;
    padding: 22px 26px;
    border-left: 3px solid var(--gold);
    border-radius: 0 18px 18px 0;
    background: var(--card);
}
.quote blockquote {
    margin: 0;
}
.quote blockquote p {
    font: 400 clamp(1.2rem, 1rem + 0.8vw, 1.55rem)/1.38 var(--display);
}
.quote figcaption {
    margin-top: 10px;
    color: var(--fg-mute);
    font: 600 0.74rem/1.3 var(--text);
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

/* ---------- clients, team, faq ---------- */
.clients-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: clamp(14px, 1.6vw, 22px);
}
.client-card {
    display: grid;
    align-content: start;
    gap: 16px;
    padding: clamp(22px, 2.6vw, 34px);
}
.client-card h3 {
    font: 500 1.35rem/1.15 var(--display);
}
.client-card h4 {
    margin-top: 4px;
    color: var(--fg-mute);
    font: 600 0.74rem/1.3 var(--text);
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.client-card__list li {
    padding-block: 7px;
    border-bottom: 1px solid var(--line);
    font-weight: 500;
    line-height: 1.35;
}
.client-card--wide {
    grid-column: 1 / -1;
}
.client-card__cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
    gap: 20px 32px;
}
.person__text {
    margin-top: 4px;
    color: var(--fg-soft);
    font-size: 0.92rem;
}
.contact__value {
    font-weight: 600;
}
.nowrap {
    white-space: nowrap;
}
.compare--kpi {
    min-width: 560px;
}
.team {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
    gap: clamp(12px, 1.4vw, 18px);
}
.person {
    display: grid;
    justify-items: start;
    gap: 6px;
    padding: 20px;
}
.person__avatar {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    margin-bottom: 6px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, var(--gold-pale), var(--gold) 60%, var(--peach));
    color: var(--ink);
    font: 700 1.3rem/1 var(--display);
}
.person__name {
    font: 600 1.1rem/1.2 var(--display);
}
.person__role {
    color: var(--fg-soft);
    font-size: 0.92rem;
}
.faq {
    display: grid;
    gap: 12px;
}
.faq__item summary {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px;
    font: 500 1.08rem/1.35 var(--display);
    cursor: pointer;
    list-style: none;
}
.faq__item summary::-webkit-details-marker {
    display: none;
}
.faq__item summary::after {
    content: "+";
    color: var(--accent);
    font-size: 1.4rem;
    line-height: 1;
    transition: transform 0.3s var(--ease);
}
.faq__item[open] summary::after {
    transform: rotate(45deg);
}
.faq__a {
    padding: 0 22px 20px;
    color: var(--fg-soft);
}

/* ---------- about and map ---------- */
.mapcard {
    position: relative;
    margin: 0;
    padding: clamp(18px, 3vw, 34px);
    border-radius: 28px;
    background: radial-gradient(ellipse at 70% 30%, var(--night-3), var(--night-1));
    color: #f3f3f1;
}
.mapcard .map {
    width: 100%;
    height: auto;
}
.map-land {
    fill: #1f3450;
    stroke: var(--gold);
    stroke-width: 2.4;
    stroke-opacity: 0.8;
    stroke-linejoin: round;
}
.map-ring {
    fill: none;
    stroke: var(--gold);
    stroke-width: 3;
    transform-box: fill-box;
    transform-origin: center;
}
.map-dot {
    fill: var(--gold);
}
.mapcard figcaption {
    position: absolute;
    left: 58%;
    top: 74%;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--gold);
    color: var(--ink);
    font: 700 0.74rem/1.2 var(--text);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

/* ---------- contact ---------- */
.contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: clamp(28px, 5vw, 72px);
    align-items: start;
}
.contact__say {
    display: grid;
    justify-items: start;
    gap: 20px;
}
.contact__say > p {
    max-width: 34rem;
    color: var(--fg-soft);
    font-size: var(--step-lead);
}
.contact__list {
    display: grid;
    padding: 8px 26px;
    border: 1px solid var(--line);
    border-radius: 24px;
    background: var(--card);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
.contact__list li {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-block: 16px;
    border-bottom: 1px solid var(--line);
}
.contact__list li:last-child {
    border-bottom: 0;
}
.contact__list .ico {
    color: var(--gold);
}
.sec--day .contact__list .ico {
    color: var(--gold-ink);
}
.contact__label {
    color: var(--fg-mute);
    font: 600 0.72rem/1.3 var(--text);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.contact__list a,
.contact__list p:not(.contact__label) {
    font-weight: 600;
    overflow-wrap: anywhere;
    text-decoration: none;
}
/* the number opens WhatsApp; a plain call is the quieter line under it */
.contact__list .contact__call {
    display: table;
    margin-top: 2px;
    color: var(--fg-soft);
    font-size: 0.92rem;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ---------- switch to the other team ---------- */
.switch__in {
    display: grid;
    justify-items: center;
    gap: 20px;
    max-width: 46rem;
    margin-inline: auto;
    text-align: center;
}
.switch__in h2 {
    font: 650 clamp(2.4rem, 1rem + 4.4vw, 5.2rem)/0.98 var(--display);
    letter-spacing: -0.026em;
    text-wrap: balance;
}
.switch__in p {
    color: var(--fg-soft);
    font-size: var(--step-lead);
}

/* ---------- the second gate: the last section opens onto the other half of the day ---------- */
.portal {
    --portal-open: -6vw;
    --portal-veil: rgba(4, 5, 12, 0.6);
}
[data-team="mkt"] .portal {
    --portal-veil: rgba(255, 246, 236, 0.6);
}
.portal__pin {
    position: relative;
}
.portal__gates {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}
.portal .switch__in {
    position: relative;
}
@supports (animation-timeline: view()) {
    .motion .portal {
        height: calc(175vh + var(--ground) * 0.4);
        padding-block: 0 calc(var(--ground) * 0.4);
        view-timeline: --portal block;
    }
    /* the pin ends behind the hills: the gates stand on the land as the page moves on to the footer */
    .motion .portal .sec__ground {
        z-index: 1;
    }
    .motion .portal__pin {
        position: sticky;
        top: 0;
        display: grid;
        place-items: center;
        height: 100vh;
        height: 100svh;
    }
    .motion .portal__gates .gate--l {
        animation: portal-l linear both;
        animation-timeline: --portal;
        animation-range: contain 0% contain 62%;
    }
    .motion .portal__gates .gate--r {
        animation: portal-r linear both;
        animation-timeline: --portal;
        animation-range: contain 0% contain 62%;
    }
    .motion .portal .switch__in > * {
        animation: portal-rise linear both;
        animation-timeline: --portal;
        animation-range: contain 28% contain 70%;
    }
    .motion .portal .portal__light {
        animation: portal-light linear both;
        animation-timeline: --portal;
        animation-range: contain 0% contain 90%;
    }
    .motion .portal__pin::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        /* clear at its top edge: the section above ends on this section's own colour, and a veil there drew a line */
        background: linear-gradient(180deg, transparent, var(--portal-veil) 22%);
        pointer-events: none;
        animation: portal-veil linear both;
        animation-timeline: --portal;
        animation-range: contain 0% contain 55%;
    }
    @keyframes portal-l {
        from { translate: calc(50vw - 100%) 0; }
        to { translate: var(--portal-open) 0; }
    }
    @keyframes portal-r {
        from { translate: calc(-50vw + 100%) 0; }
        to { translate: calc(-1 * var(--portal-open)) 0; }
    }
    @keyframes portal-rise {
        from { opacity: 0; translate: 0 48px; }
        to { opacity: 1; translate: 0 0; }
    }
    @keyframes portal-light {
        from { opacity: 0.25; translate: 0 22%; }
        to { opacity: 1; translate: 0 0; }
    }
    @keyframes portal-veil {
        to { opacity: 0; }
    }

    /* drawings open like an iris as they come into view, and settle as they pass */
    .motion .sec-art:not(:has(.cst)),
    .motion .feature__art,
    .motion .banner {
        animation: iris linear both;
        animation-timeline: view();
        animation-range: entry 0% cover 42%;
    }
    .motion .sec-art:not(:has(.cst)) > svg,
    .motion .feature__art > svg,
    .motion .banner > svg {
        animation: art-zoom linear both;
        animation-timeline: view();
        animation-range: cover 0% cover 100%;
    }
    /* the footer's light rises as the page comes to its end */
    .motion .foot {
        view-timeline: --foot block;
    }
    .motion .foot :is(.foot__light, .sky-sun) {
        animation: foot-rise linear both;
        animation-timeline: --foot;
        animation-range: entry 0% entry 100%;
    }
    /* a short rise: the light sits in the band above the columns and never crosses the text */
    @keyframes foot-rise {
        from { translate: 0 12%; opacity: 0; }
        to { translate: 0 0; opacity: 1; }
    }
    @keyframes iris {
        from { clip-path: circle(10% at 50% 50%); }
        to { clip-path: circle(75% at 50% 50%); }
    }
    @keyframes art-zoom {
        from { scale: 1.16; }
        to { scale: 1; }
    }
}

/* ---------- the package finder of Technology ---------- */
.finder {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    gap: clamp(20px, 3vw, 40px);
    align-items: start;
    padding: clamp(20px, 3vw, 36px);
    border: 1px solid var(--line);
    border-radius: 28px;
    background: var(--card);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.finder__pick {
    display: grid;
    gap: 14px;
}
.finder__pick h3 {
    font: 500 1.5rem/1.15 var(--display);
}
.finder__how {
    color: var(--fg-soft);
}
.finder__list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.finder__opt {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 9px 16px 9px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: transparent;
    color: var(--fg);
    font: 500 0.95rem/1.2 var(--text);
    cursor: pointer;
    transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.finder__opt:hover {
    border-color: var(--gold);
}
.finder__opt[aria-pressed="true"] {
    border-color: var(--gold);
    background: rgba(253, 191, 20, 0.16);
}
.finder__box {
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--fg-mute);
    border-radius: 5px;
}
.finder__opt[aria-pressed="true"] .finder__box {
    border-color: var(--gold);
    background: var(--gold);
    box-shadow: inset 0 0 0 3px var(--night-1);
}
.finder__name {
    font-weight: 500;
}
.finder__from {
    color: var(--fg-mute);
    font-size: 0.78rem;
    white-space: nowrap;
}
.finder__picked {
    color: var(--fg-mute);
    font-size: 0.9rem;
}
.finder__reset {
    justify-self: start;
    border: 0;
    border-bottom: 1px solid currentColor;
    background: none;
    cursor: pointer;
    font: inherit;
}
.finder__answer {
    display: grid;
    gap: 12px;
    padding: clamp(20px, 2.4vw, 28px);
    border: 1px solid rgba(253, 191, 20, 0.45);
    border-radius: 22px;
    background: var(--card-hi);
}
.finder__verdict {
    color: var(--fg-soft);
}
.finder__answer .figure {
    font: 600 clamp(2rem, 1.4rem + 1.6vw, 2.8rem)/1 var(--display);
}
.finder__unit {
    color: var(--fg-mute);
    font-size: 0.92rem;
}
.finder__facts {
    display: grid;
    gap: 8px;
}
.finder__facts li {
    position: relative;
    padding-left: 20px;
    color: var(--fg-soft);
    font-size: 0.96rem;
}
.finder__facts li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 0.6em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gold);
}
.finder-bar {
    position: fixed;
    z-index: 40;
    left: 12px;
    right: 12px;
    bottom: 12px;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    border-radius: 16px;
    background: var(--gold);
    color: var(--ink);
    font-weight: 600;
    text-decoration: none;
}
.finder-bar[hidden] {
    display: none;
}
@media (min-width: 52.01em) {
    .finder-bar {
        display: none;
    }
}

/* ---------- the Marketing rate card and "Your list" ---------- */
.mkt-rates {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
    gap: clamp(16px, 2.4vw, 32px);
    align-items: start;
}
.mkt-menu {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr));
}
.menu__group .group__list li {
    padding-left: 0;
}
.menu__group .group__list li::before {
    display: none;
}
.mkt-pick {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: 9px 12px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.mkt-pick:hover {
    border-color: var(--line);
    background: rgba(253, 191, 20, 0.08);
}
.mkt-pick[aria-pressed="true"] {
    border-color: var(--gold);
    background: rgba(253, 191, 20, 0.18);
}
.menu__row {
    display: grid;
    grid-template-columns: minmax(45%, 1fr) auto;
    align-items: baseline;
    column-gap: 14px;
}
.menu__name {
    color: var(--fg);
    font-weight: 500;
}
.menu__price {
    justify-self: end;
    color: var(--accent);
    font-weight: 600;
    text-align: right;
}
.menu__desc {
    display: block;
    margin-top: 2px;
    color: var(--fg-mute);
    font-size: 0.88rem;
}
.menu__note {
    grid-column: 1 / -1;
}
.mkt-mix {
    position: sticky;
    top: calc(var(--head-h) + 16px);
    display: none;
    gap: 14px;
    padding: 22px;
    border: 1px solid rgba(253, 191, 20, 0.5);
    border-radius: 22px;
    background: var(--card-hi);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.js .mkt-mix {
    display: grid;
}
.mkt-mix__title {
    font: 500 1.3rem/1.2 var(--display);
}
.mkt-mix__empty,
.mkt-mix__note {
    color: var(--fg-mute);
    font-size: 0.92rem;
}
.mkt-mix__list {
    display: grid;
}
.mkt-mix__list[hidden] {
    display: none;
}
.mkt-mix__list li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "name out" "price out";
    align-items: center;
    gap: 2px 10px;
    padding-block: 9px;
    border-bottom: 1px solid var(--line);
}
.mkt-mix__name {
    grid-area: name;
    overflow-wrap: anywhere;
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.35;
}
.mkt-mix__price {
    grid-area: price;
    color: var(--accent);
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.35;
}
.mkt-mix__out {
    grid-area: out;
    min-height: 32px;
    padding: 0 6px;
    border: 0;
    background: none;
    color: var(--fg-mute);
    font: 500 0.82rem/1 var(--text);
    text-decoration: underline;
    cursor: pointer;
}
.mkt-mix__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 18px;
}
.mkt-mix__clear {
    border: 0;
    border-bottom: 1px solid currentColor;
    background: none;
    cursor: pointer;
    font: inherit;
}
.mkt-mixbar {
    position: fixed;
    z-index: 40;
    left: 12px;
    right: 12px;
    bottom: 12px;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    border-radius: 16px;
    background: var(--gold);
    color: var(--ink);
    font-weight: 600;
    text-decoration: none;
}
.mkt-mixbar[hidden] {
    display: none;
}
@media (min-width: 64.01em) {
    .mkt-mixbar {
        display: none;
    }
    .js .mkt-mix {
        display: flex;
        flex-direction: column;
        max-height: calc(100vh - var(--head-h) - 32px);
        max-height: calc(100svh - var(--head-h) - 32px);
    }
    .mkt-mix__list {
        flex: 0 1 auto;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
    }
}

/* ==========================================================================
   footer
   ========================================================================== */
.foot {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-block: clamp(56px, 7vw, 96px) 32px;
    background: var(--foot-bg, linear-gradient(180deg, #080e18, var(--night-0)));
    color: var(--fg-soft);
}
.foot__sky {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}
.foot__sky svg {
    position: absolute;
    top: 0;
    left: 50%;
    width: max(100%, 1600px);
    max-width: none;
    height: auto;
    aspect-ratio: 1600 / 420;
    transform: translateX(-50%);
}
.foot__top {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr) minmax(0, 1fr);
    gap: 40px;
    padding-bottom: 40px;
    border-bottom: 1px solid var(--line);
}
.foot__line {
    margin-top: 18px;
}
.foot h2 {
    margin-bottom: 14px;
    color: var(--fg);
    font: 600 0.74rem/1.2 var(--text);
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.foot__cols {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}
.foot__cols li {
    padding-block: 5px;
}
.foot__cols a,
.foot__reach a {
    color: var(--fg-soft);
    text-decoration: none;
    overflow-wrap: anywhere;
}
.foot__cols a:hover,
.foot__reach a:hover {
    color: var(--fg);
    text-decoration: underline;
    text-decoration-color: var(--gold);
}
.foot__reach {
    display: grid;
    align-content: start;
    gap: 8px;
}
.foot__base {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px 24px;
    padding-top: 24px;
    color: var(--fg-mute);
    font-size: 0.86rem;
}

/* ==========================================================================
   the entry gate: two halves of the day, and a choice that has to be made
   ========================================================================== */
.gate-page {
    background: var(--night-1);
}
.gate-screen {
    position: relative;
    isolation: isolate;
    display: flex;
    min-height: 100vh;
    min-height: 100svh;
    overflow: hidden;
}
.gate-screen .scene {
    position: fixed;
}
/* the dark veil over the whole drawing; the half you lean to lifts, the other sinks */
@property --sl {
    syntax: "<number>";
    inherits: false;
    initial-value: 0.5;
}
@property --sr {
    syntax: "<number>";
    inherits: false;
    initial-value: 0.4;
}
.shade {
    --sl: 0.5;
    --sr: 0.4;
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 46% 54% at 50% 54%, rgba(4, 5, 12, 0.4), rgba(4, 5, 12, 0) 72%),
        linear-gradient(90deg, rgba(4, 5, 12, var(--sl)) 0%, rgba(4, 5, 12, var(--sl)) 36%, rgba(4, 5, 12, var(--sr)) 64%, rgba(4, 5, 12, var(--sr)) 100%);
    transition: --sl 0.7s var(--ease), --sr 0.7s var(--ease);
}
:root[data-lean="tech"] .shade {
    --sl: 0.2;
    --sr: 0.8;
}
:root[data-lean="mkt"] .shade {
    --sl: 0.8;
    --sr: 0.2;
}
:root[data-going="tech"] .shade {
    --sl: 0;
    --sr: 0.97;
}
:root[data-going="mkt"] .shade {
    --sl: 0.97;
    --sr: 0;
}
.gate-ui {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100vh;
    min-height: 100svh;
}
.gate-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-block: 16px;
}
.gate-center {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(10px, 1.6vh, 18px);
    padding-block: clamp(10px, 3vh, 40px);
    text-align: center;
}
.gate-word {
    color: #f3f3f1;
    font: 800 clamp(3.6rem, 1rem + 11vw, 10rem)/0.86 var(--display);
    letter-spacing: 0.08em;
    padding-left: 0.08em;
    text-transform: uppercase;
    text-shadow: 0 8px 46px rgba(8, 10, 23, 0.55);
}
.gate-lead {
    max-width: 40rem;
    color: #f3f3f1;
    font-size: var(--step-lead);
    line-height: 1.5;
    text-wrap: balance;
}
.gate-prompt {
    margin-top: clamp(6px, 1.6vh, 18px);
    color: var(--gold-soft);
    font: 600 0.8rem/1.3 var(--text);
    letter-spacing: 0.2em;
    text-transform: uppercase;
}
.choices {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(12px, 2vw, 24px);
    width: min(100%, 960px);
    margin-top: clamp(4px, 1vh, 12px);
}
.choice {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: clamp(20px, 2.6vw, 32px);
    overflow: hidden;
    border: 1px solid rgba(243, 243, 241, 0.22);
    border-radius: 26px;
    background: rgba(10, 17, 26, 0.6);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    color: #f3f3f1;
    text-align: left;
    text-decoration: none;
    transition: transform 0.45s var(--ease), border-color 0.3s var(--ease), background-color 0.3s var(--ease), box-shadow 0.45s var(--ease);
}
.choice::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0.8;
    transition: opacity 0.45s var(--ease);
}
.choice::after {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    pointer-events: none;
}
/* each card holds its half of the day: Technology a deep blue night lit by amber lamps, Marketing a clear
   sea blue morning with the sun coming up gold */
.choice--mkt {
    background: rgba(8, 46, 74, 0.5);
}
.choice--tech::after {
    background: linear-gradient(90deg, #1b3566, #3d6db3, #f3a06a);
}
.choice--mkt::after {
    background: linear-gradient(90deg, #3fa9d6, #ff8f70, #ffd66b);
}
.choice--tech::before {
    background: radial-gradient(120% 90% at 0% 0%, rgba(38, 72, 140, 0.72), transparent 60%), radial-gradient(90% 80% at 100% 100%, rgba(243, 160, 106, 0.3), transparent 60%);
}
.choice--mkt::before {
    background: radial-gradient(120% 90% at 100% 0%, rgba(96, 178, 222, 0.55), transparent 60%), radial-gradient(90% 80% at 0% 100%, rgba(255, 196, 120, 0.42), transparent 60%);
}
.choice:hover,
.choice:focus-visible {
    border-color: var(--gold);
    box-shadow: 0 30px 80px -40px rgba(253, 191, 20, 0.7);
}
.motion .choice:hover,
.motion .choice:focus-visible {
    transform: translateY(-4px);
}
.choice:hover::before,
.choice:focus-visible::before {
    opacity: 1;
}
.choice__time {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--gold-soft);
    font: 600 0.74rem/1 var(--text);
    letter-spacing: 0.2em;
    text-transform: uppercase;
}
.choice__time .ico {
    width: 18px;
    height: 18px;
}
.choice__name {
    font: 700 clamp(1.6rem, 1.1rem + 1.6vw, 2.4rem)/1.04 var(--display);
}
.choice__what {
    color: #e2e7ef;
    font: 600 0.72rem/1.35 var(--text);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.choice__text {
    margin-bottom: 8px;
    color: #e2e7ef;
    font-size: 0.98rem;
}
.choice__go {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    padding: 12px 20px;
    border-radius: 999px;
    background: var(--gold);
    color: var(--ink);
    font: 600 0.78rem/1 var(--text);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.choice--mkt .choice__go {
    background: linear-gradient(135deg, var(--gold-soft), var(--coral));
}
.choice:hover .choice__go .ico {
    transform: translateX(4px);
}
.choice__go .ico {
    transition: transform 0.25s var(--ease);
}
/* on a phone each choice is a window onto its own half of the day (see the phone rules); wide screens see the
   whole drawing behind the cards instead */
.choice__art {
    display: none;
}
.gate-foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 18px;
    padding-block: 16px 20px;
    color: #c8d0dd;
    font-size: 0.86rem;
    text-align: center;
}
.gate-foot a {
    color: #f3f3f1;
    text-decoration: none;
}
.gate-foot a:hover {
    text-decoration: underline;
    text-decoration-color: var(--gold);
}

/* ==========================================================================
   motion: only when the reader has not asked for less of it, and only with script
   ========================================================================== */
.motion .hero__pin .scene__world,
.motion .hero__pin .layer:not(.layer--sky),
.motion .hero__pin .edge,
.motion .hero__pin .gate,
.motion .hero__in,
.motion .veil {
    will-change: transform;
}
/* the gate opens a little as the page arrives: the independent translate adds to the transform
   that the scroll writes, so the two never fight */
.motion.is-intro .hero__pin .gate--l,
.motion.is-intro .gate-screen .gate--l {
    animation: part-l 1.6s var(--ease) both;
}
.motion.is-intro .hero__pin .gate--r,
.motion.is-intro .gate-screen .gate--r {
    animation: part-r 1.6s var(--ease) both;
}
@keyframes part-l {
    from { translate: 8vw 0; }
}
@keyframes part-r {
    from { translate: -8vw 0; }
}
/* a control that takes keyboard focus inside the hero shows in full, whatever the scroll; a mouse
   click on a hero link keeps focus there too, so this only follows the keyboard */
.motion .hero__in:has(:focus-visible) {
    opacity: 1 !important;
}
.motion .hero__pin:has(:focus-visible) .veil {
    visibility: hidden;
}
.motion .hero__more .ico {
    animation: bob 2.4s var(--ease) infinite;
}
@keyframes bob {
    50% { transform: translateY(4px); }
}

/* the words rise once the script has started the intro; the title rises word by word with the entrances */
.motion .gate-screen .gate--l,
.motion .gate-screen .gate--r {
    transition: transform 1.6s var(--ease);
}
.motion.is-intro .hero__eyebrow,
.motion.is-intro .hero__lead,
.motion.is-intro .hero__actions,
.motion.is-intro .hero__facts,
.motion.is-intro .gate-center > * {
    animation: rise 1.1s var(--ease) both;
}
.motion.is-intro .hero__lead { animation-delay: 0.35s; }
.motion.is-intro .hero__actions { animation-delay: 0.5s; }
.motion.is-intro .hero__facts { animation-delay: 0.65s; }
.motion.is-intro .gate-center > :nth-child(2) { animation-delay: 0.12s; }
.motion.is-intro .gate-center > :nth-child(3) { animation-delay: 0.3s; }
.motion.is-intro .gate-center > :nth-child(4) { animation-delay: 0.45s; }
.motion.is-intro .gate-center > :nth-child(5) { animation-delay: 0.6s; }
@keyframes rise {
    from { opacity: 0; transform: translate3d(0, 26px, 0); }
}
/* the hero title comes cut into words (build.py), so it rises word by word from the first paint too */
.motion.is-intro .hero__title .split-w {
    animation: word-rise 0.9s var(--ease) both;
    animation-delay: calc(var(--w, 0) * 45ms + 0.1s);
}
@keyframes word-rise {
    from { opacity: 0; transform: translate3d(0, 0.6em, 0) rotate(2deg); }
}

.motion .heron {
    left: 0;
    animation: fly 56s linear infinite;
}
.motion .hero .heron {
    animation-name: fly-level;
}
.motion .heron--1 { animation-delay: -22s; }
.motion .heron--2 { animation-delay: -23.4s; }
.motion .heron--3 { animation-delay: -24.2s; }
.motion .heron--4 { animation-delay: -25.3s; }
.motion .heron--5 { animation-delay: -26.1s; }
@keyframes fly {
    from { transform: translate3d(108vw, 0, 0) scaleX(-1); }
    to { transform: translate3d(-12vw, -7vh, 0) scaleX(-1); }
}
@keyframes fly-level {
    from { transform: translate3d(108vw, 0, 0) scaleX(-1); }
    to { transform: translate3d(-12vw, -2vh, 0) scaleX(-1); }
}
.motion .heron__near,
.motion .heron__far {
    transform-box: fill-box;
    transform-origin: 88% 100%;
    animation: flap 0.9s ease-in-out infinite alternate;
}
.motion .heron__far {
    transform-origin: 70% 100%;
    animation-delay: -0.2s;
}
@keyframes flap {
    from { transform: rotate(10deg); }
    to { transform: rotate(-36deg); }
}
.motion .petal {
    animation: drift 24s linear infinite;
}
.motion .petal--1 { animation-duration: 26s; animation-delay: -3s; }
.motion .petal--2 { animation-duration: 21s; animation-delay: -12s; }
.motion .petal--3 { animation-duration: 28s; animation-delay: -7s; }
.motion .petal--4 { animation-duration: 19s; animation-delay: -15s; }
.motion .petal--5 { animation-duration: 25s; animation-delay: -1s; }
.motion .petal--6 { animation-duration: 23s; animation-delay: -18s; }
.motion .petal--7 { animation-duration: 30s; animation-delay: -9s; }
@keyframes drift {
    0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(0deg); }
    7% { opacity: 0.95; }
    86% { opacity: 0.9; }
    100% { opacity: 0; transform: translate3d(-18vw, 100vh, 0) rotate(460deg); }
}
.motion .tw {
    animation: twinkle 4s ease-in-out infinite;
}
.motion .tw2 {
    animation-duration: 5.2s;
    animation-delay: -1.7s;
}
.motion .tw3 {
    animation-duration: 3.4s;
    animation-delay: -2.6s;
}
@keyframes twinkle {
    50% { opacity: 0.2; }
}
.motion .sats {
    animation: sats 64s linear infinite;
}
.motion .sats--late {
    animation-delay: -30s;
    animation-duration: 80s;
}
.motion .sats--fade {
    animation-duration: 90s;
}
@keyframes sats {
    0% { opacity: 0; transform: translate(-260px, -78px); }
    8%, 86% { opacity: 1; }
    100% { opacity: 0; transform: translate(900px, 270px); }
}
.motion .sats--card,
.motion .sats--sec,
.motion .sats--tier {
    animation: sats-card 42s linear infinite;
}
.motion .sats--tier {
    animation-duration: 14s;
}
@keyframes sats-card {
    0% { opacity: 0; transform: translate(-220px, -58px); }
    10%, 84% { opacity: 1; }
    100% { opacity: 0; transform: translate(520px, 136px); }
}
.motion .sway {
    transform-box: fill-box;
    animation: sway 7.5s ease-in-out infinite;
}
.motion .palms > g:nth-of-type(2n) .sway {
    animation-duration: 9s;
    animation-delay: -3s;
}
.motion .palms > g:nth-of-type(3n) .sway {
    animation-duration: 6.4s;
    animation-delay: -1.2s;
}
@keyframes sway {
    0%, 100% { transform: rotate(-2.2deg); }
    50% { transform: rotate(2.6deg); }
}
.motion .lamp,
.motion .win__glow {
    animation: flicker 2.8s ease-in-out infinite alternate;
}
@keyframes flicker {
    from { opacity: 0.6; }
    to { opacity: 1; }
}
.motion .moon__glow,
.motion .sun__glow {
    transform-box: fill-box;
    transform-origin: center;
    animation: breathe 7s ease-in-out infinite;
}
@keyframes breathe {
    50% { transform: scale(1.06); opacity: 0.85; }
}
.motion .rays-spin {
    transform-box: view-box;
    animation: rays 120s linear infinite;
}
@keyframes rays {
    to { transform: rotate(4deg); }
}
.motion .glint {
    animation: glint 3.2s ease-in-out infinite;
}
@keyframes glint {
    50% { opacity: 0.55; }
}
.motion .waves {
    animation: waves 9s ease-in-out infinite alternate;
}
@keyframes waves {
    to { transform: translateX(-26px); }
}
.motion .boat {
    transform-box: fill-box;
    transform-origin: 50% 80%;
    animation: bob-boat 5.5s ease-in-out infinite;
}
.motion .boat:nth-child(2n) {
    animation-duration: 6.8s;
    animation-delay: -2s;
}
.motion .boat--land {
    animation: none;
}
@keyframes bob-boat {
    0%, 100% { transform: translateY(0) rotate(-0.8deg); }
    50% { transform: translateY(4px) rotate(0.9deg); }
}
.motion .mist {
    animation: mist 22s ease-in-out infinite alternate;
}
@keyframes mist {
    to { transform: translateX(160px); }
}
.motion .drift {
    animation: cloud-drift 60s linear infinite alternate;
}
@keyframes cloud-drift {
    to { transform: translateX(-120px); }
}
.motion .flock {
    animation: flock 30s linear infinite;
}
@keyframes flock {
    from { transform: translateX(140px); }
    to { transform: translateX(-1100px); }
}
.shoot {
    opacity: 0;
}
.motion .shoot {
    animation: shoot 8s ease-in infinite;
}
@keyframes shoot {
    0%, 74% { opacity: 0; transform: translate(0, 0); }
    76% { opacity: 1; }
    92%, 100% { opacity: 0; transform: translate(-260px, 104px); }
}
.motion .signal,
.motion .beam {
    animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
    50% { opacity: 0.3; }
}
.motion .beam__ring,
.motion .pin__ring,
.motion .map-ring {
    transform-box: fill-box;
    transform-origin: center;
    animation: ping 2.8s ease-out infinite;
}
.motion .pin__ring--2 {
    animation-delay: -1.4s;
}
@keyframes ping {
    from { opacity: 0.9; transform: scale(0.45); }
    to { opacity: 0; transform: scale(1.8); }
}
.motion .scooter {
    animation: ride 9s var(--ease-in-out) infinite;
}
@keyframes ride {
    0% { transform: translate(-380px, 72px); }
    45% { transform: translate(-50px, 6px); }
    55% { transform: translate(0, 0); }
    100% { transform: translate(420px, -48px); }
}
.motion .vlight {
    opacity: 0.15;
    transition: opacity 0.6s var(--ease);
}
.motion .is-in .vlight,
.motion .sec.is-lit .vlight {
    opacity: 1;
}
.motion .rec {
    animation: pulse 1.2s steps(2) infinite;
}
.motion .cst__glow {
    transform-box: fill-box;
    transform-origin: center;
    animation: breathe 4.6s ease-in-out infinite;
}
.motion .cst__lines path {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transition: stroke-dashoffset 0.9s var(--ease);
    transition-delay: calc(var(--k, 0) * 80ms);
}
.motion .is-in .cst__lines path,
:root:not(.reveal-ready) .cst__lines path {
    stroke-dashoffset: 0;
}
.motion .tier__glow {
    animation: breathe 5s ease-in-out infinite;
}
.motion .plan:hover .tier__disc {
    filter: drop-shadow(0 0 10px rgba(255, 233, 176, 0.9));
}
.arc__sun {
    transform: translate(320px, 70px);
}
.motion .arc__sun {
    transform: none;
    offset-path: path("M70 300A250 230 0 0 1 570 300");
    offset-distance: calc(var(--arc, 0) * 100%);
    offset-rotate: 0deg;
}
.motion .arc {
    stroke-dasharray: 0.012 0.02;
}
.motion .trail,
.motion .tick {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transition: stroke-dashoffset 1.6s var(--ease);
}
.motion .is-in .trail,
.motion .is-in .tick {
    stroke-dashoffset: 0;
}
.motion .map-land {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transition: stroke-dashoffset 2.4s var(--ease), fill-opacity 1.2s var(--ease) 1s;
    fill-opacity: 0;
}
.motion .is-in .map-land,
.motion .map.is-in .map-land {
    stroke-dashoffset: 0;
    fill-opacity: 1;
}
/* animations rest while their drawing is off screen; this has to beat every animation shorthand above */
.is-paused :is(.tw, .sats, .sway, .lamp, .win__glow, .moon__glow, .sun__glow, .rays-spin, .glint, .waves, .boat, .mist, .drift,
    .flock, .shoot, .signal, .beam, .beam__ring, .pin__ring, .map-ring, .scooter, .tier__glow, .heron, .heron__near, .heron__far, .petal,
    .rec, .cst__glow, .scene__world, .ch__stage *) {
    animation-play-state: paused !important;
}
/* a touch screen's browser keeps little memory for drawing (Chrome on Android 256 MB at most, at three or more
   device pixels per point), and each moving part of a drawing takes a whole layer of that memory. With the gate's
   stars, satellites, glows, lamps and palms moving, the gate needed more than that and a phone left the two
   windows blank; held still here, it fits with room to spare. The windows, the petals, the world's slow breath
   and the gate itself still move */
@media (pointer: coarse) {
    .motion .gate-screen .scene :is(.tw, .sats, .moon__glow, .sun__glow, .rays-spin, .lamp, .win__glow, .sway, .boat) {
        animation: none;
    }
    /* the same on every chapter and section sky, for the moving parts as wide as the frame: star fields, the
       big glows, rays, mist, waves, beams. At 256 MB and a 1440 px screen the night chapters of Technology
       left parts of their drawing blank without this (1 November 2026); the small moving parts stay */
    .motion :is(.ch__stage, .sec__sky) :is(.tw, .moon__glow, .sun__glow, .rays-spin, .glint, .mist, .waves, .beam, .beam__ring) {
        animation: none;
    }
}

/* ---------- entrances ---------- */
/* a gold line draws in beside each section label as its heading rises */
.sec-head .eyebrow::before {
    content: "";
    flex: none;
    width: 28px;
    height: 1.5px;
    background: currentColor;
    transform-origin: left center;
}
.motion .sec-head .eyebrow::before {
    transition: transform 0.9s var(--ease) 0.2s;
}
.motion.reveal-ready .sec-head:not(:has(h2.is-in)) .eyebrow::before {
    transform: scaleX(0);
}
/* a sweep of warm light crosses each card once as the row comes in */
.motion .card::before,
.motion .plan::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(105deg, rgba(255, 220, 140, 0) 35%, rgba(255, 220, 140, 0.16) 50%, rgba(255, 220, 140, 0) 65%);
    transform: translateX(-120%);
    pointer-events: none;
}
.motion [data-stagger].is-in > .card::before,
.motion [data-stagger].is-in > .plan::before {
    animation: shine 1.3s var(--ease) both;
    animation-delay: calc(var(--i, 0) * 90ms + 0.25s);
}
@keyframes shine {
    to { transform: translateX(120%); }
}
.motion [data-reveal],
.motion [data-stagger] > * {
    transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.motion.reveal-ready [data-reveal]:not(.is-in) {
    opacity: 0;
    transform: translate3d(0, 34px, 0);
}
.motion.reveal-ready [data-stagger]:not(.is-in) > * {
    opacity: 0;
    transform: translate3d(0, 40px, 0) scale(0.97);
}
.motion [data-stagger] > * {
    transition-delay: calc(var(--i, 0) * 80ms);
}
/* headings rise word by word */
.split-w {
    display: inline-block;
}
.motion .split-w {
    transition: transform 0.9s var(--ease), opacity 0.9s var(--ease);
    transition-delay: calc(var(--w, 0) * 45ms);
}
.motion.reveal-ready [data-split]:not(.is-in) .split-w {
    opacity: 0;
    transform: translate3d(0, 0.6em, 0) rotate(2deg);
}
/* card icons draw themselves */
.motion.reveal-ready [data-stagger]:not(.is-in) .card__ico {
    stroke-dasharray: 60;
    stroke-dashoffset: 60;
}
.motion [data-stagger] .card__ico {
    transition: stroke-dashoffset 1.4s var(--ease);
    transition-delay: calc(var(--i, 0) * 80ms + 0.3s);
}
/* cards lean toward the pointer */
.motion [data-tilt]:hover {
    transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
}
.motion.reveal-ready [data-stagger].is-in > [data-tilt] {
    transition: opacity 0.9s var(--ease), transform 0.25s var(--ease);
}

/* the entry scene breathes while the reader decides: independent scale and translate, so the lean and the
   leaving transforms still apply on top */
.motion .gate-screen .scene__world {
    animation: breathe-world 26s ease-in-out infinite alternate;
}
@keyframes breathe-world {
    to { scale: 1.035; translate: -0.8vw 0.6vh; }
}

@keyframes fact-turn {
    0% { opacity: 0; translate: 0 8px; }
    4%, 22% { opacity: 1; translate: 0 0; }
    27%, 100% { opacity: 0; translate: 0 -8px; }
}
/* the windows on a phone drift slowly while the reader decides */
.motion .choice__art {
    animation: window-drift 22s ease-in-out infinite alternate;
}
@keyframes window-drift {
    to { scale: 1.08; translate: -1.5% 1%; }
}
/* the entry: a choice taken */
.motion .gate-screen .scene__world {
    transition: transform 0.9s var(--ease);
}
.motion:root[data-lean="tech"] .gate-screen .scene__world {
    transform: translate3d(2vw, 0, 0) scale(1.02);
}
.motion:root[data-lean="mkt"] .gate-screen .scene__world {
    transform: translate3d(-2vw, 0, 0) scale(1.02);
}
.motion:root[data-lean="tech"] .gate-screen .gate--l {
    transform: translate3d(-6vw, 0, 0) scaleX(-1);
}
.motion:root[data-lean="mkt"] .gate-screen .gate--r {
    transform: translate3d(6vw, 0, 0);
}
.motion:root[data-going] .gate-ui {
    opacity: 0;
    transition: opacity 0.5s var(--ease);
}
.motion:root[data-going="tech"] .gate-screen .scene__world {
    transform: translate3d(10vw, 4vh, 0) scale(1.25);
}
.motion:root[data-going="mkt"] .gate-screen .scene__world {
    transform: translate3d(-10vw, 4vh, 0) scale(1.25);
}
.motion:root[data-going] .gate-screen .gate--l {
    transform: translate3d(-40vw, 0, 0) scaleX(-1);
}
.motion:root[data-going] .gate-screen .gate--r {
    transform: translate3d(40vw, 0, 0);
}
/* on a phone the chosen window stays and comes closer while everything else falls away */
@media (max-width: 56em) {
    .motion:root[data-going] .gate-ui {
        opacity: 1;
    }
    .motion:root[data-going] :is(.gate-top, .gate-foot, .gate-center > :not(.choices)),
    .motion:root[data-going="tech"] .choice--mkt,
    .motion:root[data-going="mkt"] .choice--tech {
        opacity: 0;
        transition: opacity 0.4s var(--ease);
    }
    .motion :is(.choice, .choice__art) {
        transition: transform 0.7s var(--ease), opacity 0.4s var(--ease);
    }
    .motion:root[data-going="tech"] .choice--tech,
    .motion:root[data-going="mkt"] .choice--mkt {
        transform: scale(1.04);
    }
    .motion:root[data-going="tech"] .choice--tech .choice__art,
    .motion:root[data-going="mkt"] .choice--mkt .choice__art {
        transform: scale(1.35);
    }
}

/* ==========================================================================
   narrower screens
   ========================================================================== */
@media (max-width: 70em) {
    .head__cta-long {
        display: none;
    }
}
@media (max-width: 64em) {
    .head__cta {
        display: none;
    }
    .feature,
    .contact-grid,
    .finder,
    .mkt-rates {
        grid-template-columns: minmax(0, 1fr);
    }
    .mkt-mix {
        position: static;
    }
    .feature--flip .feature__art {
        order: 0;
    }
    .foot__top {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
    .foot__cols {
        grid-column: 1 / -1;
        grid-row: 2;
    }
}
@media (max-width: 52em) {
    /* on a phone the five package cards say what the table says; the table returns on a wider screen */
    #compare .table-wrap {
        display: none;
    }
}
@media (max-width: 56em) {
    :root {
        --head-h: 64px;
    }
    .swap__label {
        display: none;
    }
    .swap {
        padding: 6px;
        min-width: 44px;
        min-height: 44px;
        justify-content: center;
    }
    .menu {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        min-width: 44px;
        min-height: 44px;
        padding: 0 4px;
        border: 0;
        background: none;
        color: var(--fg);
        font: 600 0.78rem/1 var(--text);
        letter-spacing: 0.14em;
        text-transform: uppercase;
        cursor: pointer;
    }
    .menu .ico {
        width: 22px;
        height: 22px;
    }
    .menu__close {
        display: none;
    }
    .menu[aria-expanded="true"] .menu__open {
        display: none;
    }
    .menu[aria-expanded="true"] .menu__close {
        display: inline;
    }
    .menu__word--close {
        display: none;
    }
    .menu[aria-expanded="true"] .menu__word--open {
        display: none;
    }
    .menu[aria-expanded="true"] .menu__word--close {
        display: inline;
    }
    .js .nav {
        position: fixed;
        z-index: 49;
        inset: var(--nav-top, var(--head-h)) 0 0 0;
        display: none;
        flex-direction: column;
        gap: 28px;
        padding: 28px var(--gutter) 40px;
        overflow-y: auto;
        border-top: 1px solid var(--line);
        background: var(--night-1);
        color: #f3f3f1;
    }
    .js .nav.is-open {
        display: flex;
    }
    .js .nav ul {
        flex-direction: column;
        gap: 4px;
    }
    .js .nav ul a {
        padding-block: 10px;
        color: #f3f3f1;
        font: 300 2rem/1.15 var(--display);
    }
    .js .nav__cta {
        display: inline-flex;
        align-self: start;
    }
    :root.menu-open {
        overflow: hidden;
    }
    :root:not(.js) .menu {
        display: none;
    }
    :root:not(.js) .head {
        position: relative;
        height: auto;
        background: var(--night-1);
    }
    :root:not(.js) .hero__in {
        padding-top: clamp(20px, 5vh, 64px);
    }
    :root:not(.js) .head__in {
        flex-wrap: wrap;
        padding-block: 10px;
    }
    :root:not(.js) .nav {
        order: 3;
        width: 100%;
    }
    :root:not(.js) .nav ul {
        flex-wrap: wrap;
        gap: 4px 18px;
    }
    .gate {
        height: min(46%, 560px);
    }
    .gate--l {
        left: -10vw;
    }
    .gate--r {
        right: -10vw;
    }
    .layer--sun .rays {
        opacity: 0.55;
    }
    .edge {
        width: 78vw;
    }
    /* on a phone the end gate is lower and opens wider, so its halves frame the words instead of crossing them */
    .portal {
        --portal-open: -58%;
    }
    .portal .gate {
        height: min(36%, 420px);
    }
    .portal .gate--l {
        left: 0;
    }
    .portal .gate--r {
        right: 0;
    }
    .hero .heron--1 { top: calc(var(--head-h) + 6px); width: 38px; }
    .hero .heron--2 { top: calc(var(--head-h) + 15px); width: 30px; }
    .hero .heron--3 { top: calc(var(--head-h) + 1px); width: 26px; }
    .hero .heron--4 { top: calc(var(--head-h) + 16px); width: 30px; }
    .hero .heron--5 { top: calc(var(--head-h) + 9px); width: 24px; }
    .gate-screen .herons {
        display: none;
    }
    .sec-head--art {
        grid-template-columns: minmax(0, 1fr);
    }
    .sec-art {
        order: -1;
        width: min(58vw, 230px);
    }
    .sec-art:has(.cst) {
        width: min(44vw, 180px);
    }
    /* the gate on a phone: each choice is a window onto its own half of the day, dusk for Technology and dawn
       for Marketing, the same drawing as the screen behind; the words sit low over a shade that deepens toward
       them, and the full sentence stays under each name while the short line goes */
    .choice {
        isolation: isolate;
        justify-content: flex-end;
        gap: 4px;
        padding: clamp(74px, 11svh, 116px) 20px 18px;
        border: 0;
        background: #0b131d;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
    .choice__go {
        margin-top: 12px;
    }
    /* the short line under the name; the sentence stays for screen readers, out of the window's way */
    .choice .choice__what {
        display: block;
        color: #eef1f8;
    }
    .choice .choice__text {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
    .gate-lead {
        font-size: 1.04rem;
    }
    .choice__art {
        display: block;
        position: absolute;
        inset: 0;
        z-index: -2;
        width: 100%;
        height: 100%;
        transform-origin: 30% 20%;
    }
    .choice--mkt .choice__art {
        transform-origin: 62% 70%;
    }
    .choice::before,
    .choice:hover::before,
    .choice:focus-visible::before {
        opacity: 1;
    }
    .choice--tech::before {
        background: linear-gradient(180deg, rgba(8, 16, 26, 0) 18%, rgba(8, 16, 26, 0.5) 46%, rgba(8, 16, 26, 0.9) 100%);
    }
    .choice--mkt::before {
        background: linear-gradient(180deg, rgba(5, 36, 58, 0) 18%, rgba(5, 36, 58, 0.5) 46%, rgba(5, 36, 58, 0.88) 100%);
    }
    .choice::after,
    .choice__time {
        display: none;
    }
    .choices {
        grid-template-columns: minmax(0, 1fr);
        max-width: 520px;
    }
    .shade {
        background: rgba(4, 5, 12, 0.58);
    }
    .motion .hero[data-hero] {
        height: 165vh;
        height: calc(clamp(640px, 100svh, 1180px) + max(65vh, 420px));
    }
    /* petals cross the words on a phone, so they fall softer there */
    .hero .petals {
        opacity: 0.55;
    }
}
@media (max-width: 40em) {
    /* on a phone the dawn sky behind Marketing's words is dark enough on its own, so the box behind the lead goes */
    [data-team="mkt"] .hero__lead {
        padding: 0;
        background: none;
        color: #f3f3f1;
        text-shadow: 0 1px 14px rgba(8, 10, 23, 0.9);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
    /* and its four facts take turns in one place instead of stacking four pills over the gate */
    .motion .hero__facts {
        display: grid;
        justify-items: center;
    }
    .motion .hero__facts li {
        grid-area: 1 / 1;
        opacity: 0;
        animation: fact-turn 14s var(--ease) infinite;
    }
    .motion .hero__facts li:nth-child(2) { animation-delay: 3.5s; }
    .motion .hero__facts li:nth-child(3) { animation-delay: 7s; }
    .motion .hero__facts li:nth-child(4) { animation-delay: 10.5s; }
    /* on a phone the moon would sit behind the words as they scroll by; the stars stay, the clouds soften */
    .sky-moon {
        display: none;
    }
    .sec__sky .drift {
        opacity: 0.45;
    }
    .head__end {
        gap: 2px;
    }
    .compare--kpi {
        min-width: 0;
    }
    .menu__label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
    .brand__sub {
        letter-spacing: 0.12em;
    }
}
@media (max-width: 25em) {
    .brand__sub {
        display: none;
    }
    .head__in {
        gap: 10px;
    }
    .hero__facts li {
        font-size: 0.8rem;
        padding: 7px 12px;
    }
    .hero__actions .btn {
        white-space: normal;
        text-wrap: balance;
    }
    .foot__cols {
        grid-template-columns: minmax(0, 1fr);
    }
    .contact__list {
        padding-inline: 18px;
    }
    .gate-word {
        letter-spacing: 0.05em;
    }
}
@media (max-width: 30em) {
    .foot__top {
        grid-template-columns: minmax(0, 1fr);
    }
    /* a long Rupiah price takes its own line under the name */
    .menu__row {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 2px;
    }
    .menu__price {
        justify-self: start;
        text-align: left;
    }
}
/* a short phone: the hero drops its scroll hint, and the gate keeps both choices on the first screen */
@media (max-width: 25em) and (max-height: 820px) {
    .hero__more {
        display: none;
    }
    .hero__in {
        padding-top: calc(var(--head-h) + 16px);
    }
    .hero__title {
        font-size: 2.6rem;
    }
    .hero__title--long {
        font-size: 2.05rem;
    }
    .hero__from {
        margin-top: 8px;
        font-size: 0.86rem;
    }
    .hero__lead {
        font-size: 1rem;
        line-height: 1.42;
    }
    [data-team="mkt"] .hero__lead {
        padding: 8px 14px;
    }
    .hero__actions {
        margin-top: 14px;
    }
    .hero__facts {
        gap: 6px;
        padding-top: 14px;
    }
    .hero__facts li {
        padding: 5px 10px;
        font-size: 0.74rem;
    }
}
/* a phone on its side: the two windows stand side by side, and the name shrinks to the height */
@media (max-width: 56em) and (max-height: 500px) and (orientation: landscape) {
    .choices {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: none;
    }
    .choice {
        padding-top: 64px;
    }
    .gate-word {
        font-size: 15vh;
    }
    .gate-lead {
        font-size: 0.95rem;
    }
}
@media (max-width: 56em) and (max-height: 760px) {
    .gate-center > .hero__eyebrow {
        display: none;
    }
    .gate-top {
        padding-block: 10px;
    }
    .gate-center {
        padding-block: 8px;
    }
    .gate-lead {
        font-size: 1rem;
    }
    .gate-prompt {
        margin-top: 0;
    }
}
@media (max-width: 56em) and (max-height: 690px) {
    .choice__what {
        display: block;
    }
    .choice__text {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}
/* a short laptop screen: the long sentence stays, the short line goes, the name follows the height */
@media (max-height: 30em) {
    .motion .hero[data-hero] {
        height: auto;
    }
    .hero__title--long {
        font-size: clamp(1.9rem, 1rem + 2.4vw, 2.7rem);
    }
    .motion .hero[data-hero] .hero__pin {
        position: relative;
    }
}
@media (max-height: 800px) and (min-width: 56.01em) {
    .choice__what {
        display: none;
    }
    .gate-lead {
        font-size: 1.05rem;
    }
    .gate-word {
        font-size: clamp(3.6rem, 15vh, 10rem);
    }
}

/* ==========================================================================
   chapter tech/services
   ========================================================================== */
/* The resort at dusk: seven groups of lights, each coming on with its beat, and the engineer riding in last.
   Without motion every light is on and the engineer stands at the gate. */
.ch--tech-services .ch__head {
    align-content: center;
}
.svc {
    display: grid;
    gap: 16px;
}
.svc__name {
    color: var(--fg);
    font-weight: 600;
}
.svc__text {
    margin-top: 3px;
    color: var(--fg-soft);
}

/* the camera: on a phone it turns to the part of the resort each beat is about; on a wide screen the whole
   resort is in view and it only leans a little toward it */
.ch--tech-services {
    --u: 0.27;
    --zy: 84%;
}
.ch--tech-services[data-beat] {
    --zoom: 1.08;
}
.ch--tech-services[data-beat="net"] { --u: 0.66; --zx: 66%; }
.ch--tech-services[data-beat="srv"] { --u: 0.74; --zx: 74%; }
.ch--tech-services[data-beat="pc"] { --u: 0.62; --zx: 62%; }
.ch--tech-services[data-beat="sec"] { --u: 0.47; --zx: 46%; }
.ch--tech-services[data-beat="prop"] { --u: 0.87; --zx: 86%; }
.ch--tech-services[data-beat="web"] { --u: 0.93; --zx: 94%; }
.ch--tech-services[data-beat="eos"] { --u: 0.52; --zx: 50%; }
@media (min-width: 56.01em) {
    .ch--tech-services {
        --s: 0.62;
        --pan: 0.35;
    }
    .ch--tech-services[data-beat] {
        --zoom: 1.05;
    }
}

/* ---- lights: off until their beat has been reached, then on with a flicker, as a bulb catches */
.ch--tech-services .z {
    transition: opacity 0.8s var(--ease);
}
.motion.ch-ready .ch--tech-services:not([data-seen~="net"]) .z-net,
.motion.ch-ready .ch--tech-services:not([data-seen~="srv"]) .z-srv,
.motion.ch-ready .ch--tech-services:not([data-seen~="pc"]) .z-pc,
.motion.ch-ready .ch--tech-services:not([data-seen~="sec"]) .z-sec,
.motion.ch-ready .ch--tech-services:not([data-seen~="prop"]) .z-prop,
.motion.ch-ready .ch--tech-services:not([data-seen~="web"]) .z-web,
.motion.ch-ready .ch--tech-services:not([data-seen~="eos"]) .z-eos {
    opacity: 0;
}
.motion.ch-ready .ch--tech-services[data-seen~="net"] .z-net,
.motion.ch-ready .ch--tech-services[data-seen~="srv"] .z-srv,
.motion.ch-ready .ch--tech-services[data-seen~="pc"] .z-pc,
.motion.ch-ready .ch--tech-services[data-seen~="sec"] .z-sec,
.motion.ch-ready .ch--tech-services[data-seen~="prop"] .z-prop,
.motion.ch-ready .ch--tech-services[data-seen~="web"] .z-web {
    animation: svc-on 1.2s var(--ease) both;
}
@keyframes svc-on {
    0% { opacity: 0; }
    10% { opacity: 0.9; }
    16% { opacity: 0.2; }
    26% { opacity: 1; }
    100% { opacity: 1; }
}
/* the engineer: the scooter rides in along the road from the right and stops at the gate, then the rider walks in */
.ch--tech-services .scoot,
.ch--tech-services .eng {
    transition: transform 2.4s var(--ease), opacity 1.2s var(--ease);
}
.ch--tech-services .eng {
    transition-delay: 0.9s;
}
.motion.ch-ready .ch--tech-services:not([data-seen~="eos"]) .scoot {
    transform: translateX(780px);
}
.motion.ch-ready .ch--tech-services:not([data-seen~="eos"]) .eng {
    transform: translateX(60px);
    opacity: 0;
}

/* ---- the life of the place, only with motion, resting while the section is off screen */
.ch--tech-services .wave,
.ch--tech-services .cone {
    transform-box: view-box;
}
.motion .ch--tech-services .wave {
    transform-origin: 1067px 714px;
    animation: svc-wave 3.4s var(--ease) infinite both;
}
.motion .ch--tech-services .wave--2 { animation-delay: 0.45s; }
.motion .ch--tech-services .wave--3 { animation-delay: 0.9s; }
.motion .ch--tech-services .wave--4 { animation-delay: 1.35s; }
@keyframes svc-wave {
    0% { opacity: 0; scale: 0.7; }
    30% { opacity: 0.85; }
    100% { opacity: 0; scale: 1.12; }
}
.motion .ch--tech-services .blink {
    animation: svc-blink 1.3s steps(1) infinite;
}
.motion .ch--tech-services .blink:nth-of-type(3n) {
    animation-duration: 0.8s;
}
.motion .ch--tech-services .blink:nth-of-type(4n + 1) {
    animation-duration: 2.1s;
}
@keyframes svc-blink {
    50% { opacity: 0.25; }
}
.motion .ch--tech-services .tv {
    animation: svc-tv 2.8s steps(1) infinite;
}
.motion .ch--tech-services .tv + .tv {
    animation-delay: -1.3s;
}
@keyframes svc-tv {
    0% { opacity: 1; }
    18% { opacity: 0.62; }
    31% { opacity: 0.95; }
    47% { opacity: 0.7; }
    66% { opacity: 1; }
    82% { opacity: 0.55; }
}
.motion .ch--tech-services .cone {
    transform-origin: 782px 664px;
    animation: svc-sweep 7s ease-in-out infinite alternate;
}
@keyframes svc-sweep {
    from { rotate: -10deg; }
    to { rotate: 9deg; }
}
.motion .ch--tech-services .lantern {
    animation: svc-lamp 3.8s ease-in-out infinite alternate;
}
@keyframes svc-lamp {
    to { opacity: 0.78; }
}
.motion .ch--tech-services .shimmer path {
    animation: svc-shim 3.2s ease-in-out infinite alternate;
}
.motion .ch--tech-services .shimmer path:nth-child(2n) {
    animation-delay: -1.6s;
}
@keyframes svc-shim {
    to { translate: 7px 0; opacity: 0.35; }
}
.motion .ch--tech-services .fly1 { animation: svc-fly 9s ease-in-out infinite alternate; }
.motion .ch--tech-services .fly2 { animation: svc-fly 11s ease-in-out -4s infinite alternate-reverse; }
.motion .ch--tech-services .fly3 { animation: svc-fly 13s ease-in-out -7s infinite alternate; }
@keyframes svc-fly {
    0% { translate: 0 0; opacity: 0.2; }
    35% { opacity: 1; }
    60% { opacity: 0.4; }
    100% { translate: 22px -16px; opacity: 0.9; }
}

/* ---- night falls while the section is read: the glow of the dusk sinks, the stars come out, the moon climbs */
@supports (animation-timeline: view()) {
    .motion .ch--tech-services .ly--glow {
        animation: svc-dusk linear both;
        animation-timeline: --ch;
        animation-range: contain 0% contain 100%;
    }
    .motion .ch--tech-services .ly--stars {
        animation: svc-stars linear both;
        animation-timeline: --ch;
        animation-range: contain 0% contain 70%;
    }
    .motion .ch--tech-services .ly--moon {
        animation: svc-moon linear both;
        animation-timeline: --ch;
        animation-range: contain 0% contain 100%;
    }
    @keyframes svc-dusk {
        to { opacity: 0.3; }
    }
    @keyframes svc-stars {
        from { opacity: 0.35; }
    }
    @keyframes svc-moon {
        to { translate: 0 -5%; }
    }
}

/* ==========================================================================
   chapter tech/how-it-works
   ========================================================================== */
/* The hill at blue hour: a stepped path climbs past four lamps on bamboo poles to the bale on the top, the
   lamps catch one beat at a time, and before the figures 24 marks light round the moon. Without motion every
   light is on, the scooter waits at the foot of the path and the ring is whole. */
.ch--tech-how-it-works .ch__head {
    align-content: start;
}

/* the figures: one band of four, two by two on a phone */
.ch--tech-how-it-works .hw-band {
    width: min(100%, 54rem);
    margin-top: 36px;
}
.ch--tech-how-it-works .hw-figs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 26px clamp(18px, 2vw, 30px);
}
.ch--tech-how-it-works .hw-fig {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ch--tech-how-it-works .hw-fig dd {
    order: 1;
    color: var(--fg);
    font: 550 clamp(3rem, 2.1rem + 2.6vw, 4.75rem)/0.92 var(--display);
    letter-spacing: -0.03em;
}
/* the hours of the day take the gold of the lamps */
.ch--tech-how-it-works .hw-fig:first-child dd {
    color: var(--gold);
}
.ch--tech-how-it-works .hw-fig dt {
    order: 2;
    color: var(--fg-soft);
    font-size: 1rem;
    line-height: 1.45;
    text-wrap: pretty;
}
/* up to about 1200 px wide the band keeps to the left, so the lit bale stands clear beside it */
@media (min-width: 56.01em) and (max-width: 75em) {
    .ch--tech-how-it-works .hw-band {
        width: min(100%, 40rem);
    }
}
@media (max-width: 40em) {
    .ch--tech-how-it-works .hw-figs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px 18px;
    }
}
/* the mark of the hours carries no words: it only names the moment the ring lights, in the bare stretch of
   drawing between the last step and the figures */
.ch--tech-how-it-works .hw-mark {
    width: 100%;
    height: 0;
    padding: 0;
}
.ch--tech-how-it-works .hw-mark::before,
.ch--tech-how-it-works .hw-mark::after {
    content: none;
}
@media (prefers-reduced-motion: no-preference) {
    /* the hours come a little after the last step, the figures a screen after that */
    .motion .ch--tech-how-it-works .beats {
        padding-bottom: 0;
    }
    .motion .ch--tech-how-it-works .hw-mark {
        margin-top: max(12vh, 90px);
    }
    .motion .ch--tech-how-it-works .hw-band {
        margin-block: max(30vh, 230px) 30vh;
    }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 56em) {
    /* on a phone the next panel waits below the screen, so the lower half of the frame is the drawing's; the
       hours light once the last panel has gone, and the figures come up only after the ring is whole */
    .motion .ch--tech-how-it-works .beats {
        gap: max(56vh, 300px);
    }
    .motion .ch--tech-how-it-works .hw-mark {
        margin-top: max(27vh, 120px);
    }
    .motion .ch--tech-how-it-works .hw-band {
        margin-block: max(48vh, 220px) 40vh;
    }
}
:root:not(.motion) .ch--tech-how-it-works .hw-z-walk {
    display: none;
}
/* a still page: the picture fades into the section at its foot, and the panels start a little below it */
:root:not(.motion) .ch--tech-how-it-works .ch__frame {
    -webkit-mask-image: linear-gradient(#000000 calc(100% - 60px), transparent);
    mask-image: linear-gradient(#000000 calc(100% - 60px), transparent);
}
:root:not(.motion) .ch--tech-how-it-works .beats {
    margin-top: 32px;
}

/* the camera: on a phone it climbs the path with the lamps, one lamp per beat, then looks up to the moon and
   closes in on it, so the moon holds still while the land falls away below; on a wide screen the whole hill is
   in view and it only leans along the climb */
.ch--tech-how-it-works {
    --u: 0.47;
    --zy: 72%;
}
.ch--tech-how-it-works[data-beat] {
    --zoom: 1.1;
}
.ch--tech-how-it-works[data-beat="call"] { --u: 0.45; --zx: 42%; }
.ch--tech-how-it-works[data-beat="remote"] { --u: 0.55; --zx: 54%; }
.ch--tech-how-it-works[data-beat="visits"] { --u: 0.625; --zx: 62.5%; }
.ch--tech-how-it-works[data-beat="report"] { --u: 0.77; --zx: 78%; }
.ch--tech-how-it-works:is([data-beat="hours"], [data-beat="stats"]) { --u: 0.8; --zx: 81%; --zy: 24%; --zoom: 1.06; }
@media (min-width: 56.01em) {
    .ch--tech-how-it-works {
        --s: 0.66;
        --pan: 1;
        --zy: 84%;
    }
    .ch--tech-how-it-works[data-beat] {
        --zoom: 1.07;
    }
    .ch--tech-how-it-works:is([data-beat="hours"], [data-beat="stats"]) {
        --zy: 24%;
        --zoom: 1.03;
    }
}
/* up to about 1280 px wide the first picture still holds the whole climb, from the house to the bale under
   the moon */
@media (min-width: 56.01em) and (max-width: 80em) {
    .ch--tech-how-it-works:not([data-beat]) {
        --u: 0.7;
    }
}
/* on an upright phone the land sinks at the end of the climb, so the lit bale stands clear: below the panel
   at the last step, and in the strip below the band of figures at the end. The panels and the band keep their
   size in pixels while the drawing scales with the screen, so each sink is part pixels, part screen. */
@media (prefers-reduced-motion: no-preference) and (max-width: 56em) and (orientation: portrait) {
    .motion .ch--tech-how-it-works :is(.ly--far, .ly--vale, .ly--hill, .ly--near, .ly--moon) > svg {
        transition: transform 1.8s var(--ease-in-out);
    }
    .motion.ch-ready .ch--tech-how-it-works:is([data-beat="report"], [data-beat="hours"]) .ly--far > svg {
        transform: translateY(4%);
    }
    .motion.ch-ready .ch--tech-how-it-works:is([data-beat="report"], [data-beat="hours"]) .ly--vale > svg {
        transform: translateY(6%);
    }
    .motion.ch-ready .ch--tech-how-it-works[data-beat="report"] :is(.ly--hill, .ly--near) > svg {
        transform: translateY(max(4%, 450px - 45.4%));
    }
    .motion.ch-ready .ch--tech-how-it-works[data-beat="hours"] :is(.ly--hill, .ly--near) > svg {
        transform: translateY(8.3%);
    }
    .motion.ch-ready .ch--tech-how-it-works[data-beat="stats"] .ly--far > svg {
        transform: translateY(calc(181px - 8.5%));
    }
    .motion.ch-ready .ch--tech-how-it-works[data-beat="stats"] .ly--vale > svg {
        transform: translateY(calc(254px - 12%));
    }
    .motion.ch-ready .ch--tech-how-it-works[data-beat="stats"] :is(.ly--hill, .ly--near) > svg {
        transform: translateY(calc(363px - 17.1%));
    }
    /* as the figures come up the camera draws back a little and the moon rises clear of them, its ring whole
       between the header and the band */
    .motion .ch--tech-how-it-works .ly--moon > svg {
        transform-origin: 81.25% 23.9%;
    }
    .motion.ch-ready .ch--tech-how-it-works[data-beat="stats"] {
        --zoom: 1;
    }
    .motion.ch-ready .ch--tech-how-it-works[data-beat="stats"] .ly--moon > svg {
        transform: translateY(-3.2%) scale(0.9);
    }
}

/* ---- the lights of each beat: off until it has been reached, then on with a flicker, as an oil lamp catches */
.ch--tech-how-it-works .hw-z {
    transition: opacity 0.8s var(--ease);
}
.motion.ch-ready .ch--tech-how-it-works:not([data-seen~="call"]) :is(.hw-z-call, .hw-z-arc1, .hw-z-l1, .hw-z-pool1),
.motion.ch-ready .ch--tech-how-it-works:not([data-seen~="remote"]) :is(.hw-z-arc2, .hw-z-l2, .hw-z-pool2),
.motion.ch-ready .ch--tech-how-it-works:not([data-seen~="visits"]) :is(.hw-z-l3, .hw-z-pool3, .hw-z-v1, .hw-z-v2, .hw-z-walk),
.motion.ch-ready .ch--tech-how-it-works:not([data-seen~="report"]) :is(.hw-z-l4, .hw-z-pool4, .hw-z-bale) {
    opacity: 0;
}
.motion.ch-ready .ch--tech-how-it-works[data-seen~="call"] :is(.hw-z-call, .hw-z-l1, .hw-z-pool1),
.motion.ch-ready .ch--tech-how-it-works[data-seen~="remote"] :is(.hw-z-l2, .hw-z-pool2),
.motion.ch-ready .ch--tech-how-it-works[data-seen~="visits"] :is(.hw-z-l3, .hw-z-pool3, .hw-z-v1, .hw-z-v2),
.motion.ch-ready .ch--tech-how-it-works[data-seen~="report"] :is(.hw-z-l4, .hw-z-pool4, .hw-z-bale) {
    animation: hw-on 1.2s var(--ease) both;
}
/* a lamp catches once the signal has reached it; the second stone of the week a moment after the first */
.motion.ch-ready .ch--tech-how-it-works[data-seen] :is(.hw-z-l1, .hw-z-pool1) { animation-delay: 1s; }
.motion.ch-ready .ch--tech-how-it-works[data-seen] :is(.hw-z-l2, .hw-z-pool2) { animation-delay: 0.9s; }
.motion.ch-ready .ch--tech-how-it-works[data-seen] .hw-z-v1 { animation-delay: 0.7s; }
.motion.ch-ready .ch--tech-how-it-works[data-seen] .hw-z-v2 { animation-delay: 1.8s; }
.motion.ch-ready .ch--tech-how-it-works[data-seen] .hw-z-bale { animation-delay: 0.6s; }
.motion.ch-ready .ch--tech-how-it-works .hw-z-walk {
    transition-delay: 2.4s;
}
.ch--tech-how-it-works .hw-ping {
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
}
.motion.ch-ready .ch--tech-how-it-works[data-seen~="call"] .hw-z-l1 .hw-ping,
.motion.ch-ready .ch--tech-how-it-works[data-seen~="remote"] .hw-z-l2 .hw-ping,
.motion.ch-ready .ch--tech-how-it-works[data-seen~="visits"] .hw-z-l3 .hw-ping,
.motion.ch-ready .ch--tech-how-it-works[data-seen~="report"] :is(.hw-z-l4, .hw-z-bale) .hw-ping {
    animation: hw-ping 1.6s var(--ease) both;
}
.motion.ch-ready .ch--tech-how-it-works[data-seen] .hw-z-l1 .hw-ping { animation-delay: 1.2s; }
.motion.ch-ready .ch--tech-how-it-works[data-seen] .hw-z-l2 .hw-ping { animation-delay: 1.1s; }
.motion.ch-ready .ch--tech-how-it-works[data-seen] .hw-z-l3 .hw-ping { animation-delay: 0.2s; }
.motion.ch-ready .ch--tech-how-it-works[data-seen] .hw-z-l4 .hw-ping { animation-delay: 0.2s; }
.motion.ch-ready .ch--tech-how-it-works[data-seen] .hw-z-bale .hw-ping { animation-delay: 0.9s; }
@keyframes hw-ping {
    0% { opacity: 0; scale: 0.4; }
    18% { opacity: 0.85; }
    100% { opacity: 0; scale: 2.4; }
}
@keyframes hw-on {
    0% { opacity: 0; }
    12% { opacity: 0.85; }
    20% { opacity: 0.25; }
    32% { opacity: 1; }
    44% { opacity: 0.7; }
    100% { opacity: 1; }
}
/* the signals draw themselves from where they start, carry a few small lights along, then rest as a faint
   trail, so the hill is not repainted for nothing once the lamp has caught */
.ch--tech-how-it-works .hw-arc {
    stroke-dasharray: 1 1;
    transition: stroke-dashoffset 1.1s var(--ease-in-out);
}
.motion.ch-ready .ch--tech-how-it-works:not([data-seen~="call"]) .hw-arc--call,
.motion.ch-ready .ch--tech-how-it-works:not([data-seen~="remote"]) .hw-arc--remote {
    stroke-dashoffset: 1;
}
.ch--tech-how-it-works :is(.hw-z-arc1, .hw-z-arc2) {
    transition-duration: 0.3s;
}
.motion.ch-ready .ch--tech-how-it-works .hw-pulse {
    opacity: 0;
}
.motion.ch-ready .ch--tech-how-it-works[data-seen~="call"] .hw-z-arc1 .hw-pulse,
.motion.ch-ready .ch--tech-how-it-works[data-seen~="remote"] .hw-z-arc2 .hw-pulse {
    animation: hw-pulse 1.4s linear 1s 3, hw-trail 5.2s ease 1s both;
}
@keyframes hw-pulse {
    to { stroke-dashoffset: -0.082; }
}
@keyframes hw-trail {
    0% { opacity: 0; }
    10%, 78% { opacity: 1; }
    100% { opacity: 0.3; }
}
/* the engineer rides in along the road from the right and stops at the foot of the path */
.ch--tech-how-it-works .hw-scoot {
    transition: transform 2.8s var(--ease);
}
.motion.ch-ready .ch--tech-how-it-works:not([data-seen~="remote"]) .hw-scoot {
    transform: translateX(880px);
}
/* the hours: a hand runs once round the moon and the ring lights behind it */
.ch--tech-how-it-works .hw-sweep {
    transition: stroke-dashoffset 2.6s linear;
}
.motion.ch-ready .ch--tech-how-it-works:not([data-seen~="hours"]) .hw-sweep {
    stroke-dashoffset: 1;
}
.ch--tech-how-it-works .hw-hand {
    opacity: 0;
    transform-box: view-box;
}
.motion.ch-ready .ch--tech-how-it-works[data-seen~="hours"] .hw-hand {
    animation: hw-hand 2.6s linear both;
}
@keyframes hw-hand {
    0% { opacity: 0; rotate: 0deg; }
    6%, 90% { opacity: 1; }
    100% { opacity: 0; rotate: 360deg; }
}

/* ---- the life of the place, only with motion, resting while the section is off screen */
.ch--tech-how-it-works :is(.hw-pole, .hw-wave) {
    transform-box: view-box;
}
.motion .ch--tech-how-it-works .hw-pole {
    animation: hw-sway 6.4s ease-in-out infinite alternate;
}
.motion .ch--tech-how-it-works .hw-pole--2 { animation-duration: 7.3s; animation-delay: -2.1s; }
.motion .ch--tech-how-it-works .hw-pole--3 { animation-duration: 5.8s; animation-delay: -3.7s; }
.motion .ch--tech-how-it-works .hw-pole--4 { animation-duration: 6.9s; animation-delay: -1.3s; }
@keyframes hw-sway {
    from { rotate: -0.9deg; }
    to { rotate: 1.1deg; }
}
.motion .ch--tech-how-it-works .hw-flame {
    animation: hw-flicker 2.7s ease-in-out infinite alternate;
}
.motion .ch--tech-how-it-works .hw-pole--2 .hw-flame { animation-duration: 3.2s; animation-delay: -1.1s; }
.motion .ch--tech-how-it-works .hw-pole--3 .hw-flame { animation-duration: 2.3s; animation-delay: -0.6s; }
.motion .ch--tech-how-it-works .hw-pole--4 .hw-flame { animation-duration: 2.9s; animation-delay: -1.9s; }
@keyframes hw-flicker {
    0% { opacity: 1; }
    35% { opacity: 0.8; }
    55% { opacity: 0.96; }
    100% { opacity: 0.74; }
}
.ch--tech-how-it-works .hw-wave {
    transform-origin: 622px 709px;
}
.motion .ch--tech-how-it-works .hw-wave {
    animation: hw-wave 2.8s var(--ease) infinite both;
}
.motion .ch--tech-how-it-works .hw-wave--2 { animation-delay: 0.5s; }
.motion .ch--tech-how-it-works .hw-wave--3 { animation-delay: 1s; }
@keyframes hw-wave {
    0% { opacity: 0; scale: 0.6; }
    30% { opacity: 0.9; }
    100% { opacity: 0; scale: 1.15; }
}
/* the days of the week pass along the seven stones, one stone a day */
.motion .ch--tech-how-it-works .hw-day {
    animation: hw-walk 7s steps(7, jump-none) infinite;
}
@keyframes hw-walk {
    to { translate: 186px -14.4px; }
}
.motion .ch--tech-how-it-works .hw-lantern {
    animation: hw-flicker 3.4s ease-in-out infinite alternate;
}
.motion .ch--tech-how-it-works .hw-porch {
    animation: hw-flicker 2.2s ease-in-out -0.8s infinite alternate;
}
/* egrets fly home across the sky; they start halfway, so the reader meets them over the hill */
.motion .ch--tech-how-it-works .hw-flock {
    animation: hw-flock 36s linear -16s infinite;
}
@keyframes hw-flock {
    from { translate: 960px 0; }
    to { translate: -1080px -46px; }
}
.motion .ch--tech-how-it-works .hw-village {
    animation: hw-village 5.2s ease-in-out infinite alternate;
}
@keyframes hw-village {
    to { opacity: 0.55; }
}
.motion .ch--tech-how-it-works .hw-mist {
    animation: hw-mist 28s ease-in-out infinite alternate;
}
@keyframes hw-mist {
    to { translate: 280px 0; }
}
.motion .ch--tech-how-it-works .hw-fly1 { animation: hw-fly 9s ease-in-out infinite alternate; }
.motion .ch--tech-how-it-works .hw-fly2 { animation: hw-fly 11s ease-in-out -4s infinite alternate-reverse; }
.motion .ch--tech-how-it-works .hw-fly3 { animation: hw-fly 13s ease-in-out -7s infinite alternate; }
@keyframes hw-fly {
    0% { translate: 0 0; opacity: 0.2; }
    35% { opacity: 1; }
    60% { opacity: 0.4; }
    100% { translate: 24px -14px; opacity: 0.9; }
}

/* the moon's halo may reach past the top of its canvas when the moon is moved; let it, the frame clips */
.ch--tech-how-it-works .ly--moon > svg {
    overflow: visible;
}
/* a phone on its side sees the drawing whole but cut at the top: the moon comes down beside the hill, the
   zoom is gentler, and the panels keep to the left so the hill and its lamps stay clear on the right */
@media (orientation: landscape) and (max-height: 32em) {
    .ch--tech-how-it-works .ly--moon > svg {
        transform: translate(-10%, 24%);
    }
    .ch--tech-how-it-works[data-beat] {
        --zoom: 1.04;
    }
    /* the drawing fills the width, so the camera cannot pan: at the first step it closes in from the left
       edge instead, which carries the first lamp out from behind the panel */
    .ch--tech-how-it-works[data-beat="call"] {
        --zoom: 1.1;
        --zx: 0%;
    }
    .motion .ch--tech-how-it-works .beats .beat {
        width: min(100%, 25rem);
    }
}

/* ---- the camera rises up the hill while the section is read: the land sinks, the nearer the farther, the
   sky and the moon stay; the dusk fades and more stars come out */
@supports (animation-timeline: view()) {
    .motion .ch--tech-how-it-works .ly--far { animation: hw-sink-1 linear both; }
    .motion .ch--tech-how-it-works .ly--vale { animation: hw-sink-2 linear both; }
    .motion .ch--tech-how-it-works .ly--hill { animation: hw-sink-3 linear both; }
    .motion .ch--tech-how-it-works .ly--near { animation: hw-sink-4 linear both; }
    .motion .ch--tech-how-it-works .ly--glow { animation: hw-dusk linear both; }
    .motion .ch--tech-how-it-works .ly--more { animation: hw-stars linear both; }
    .motion .ch--tech-how-it-works :is(.ly--far, .ly--vale, .ly--hill, .ly--near, .ly--glow, .ly--more) {
        animation-timeline: --ch;
        animation-range: contain 0% contain 100%;
    }
    @keyframes hw-sink-1 {
        to { translate: 0 2%; }
    }
    @keyframes hw-sink-2 {
        to { translate: 0 4.5%; }
    }
    @keyframes hw-sink-3 {
        to { translate: 0 8%; }
    }
    @keyframes hw-sink-4 {
        to { translate: 0 11%; }
    }
    @keyframes hw-dusk {
        to { opacity: 0.4; }
    }
    @keyframes hw-stars {
        from { opacity: 0.15; }
    }
}

/* ---- a touch screen: this chapter moves the most layers of any, and at 256 MB and a 1440 px screen it left parts
   of its drawing blank. There the land holds still while the section is read, the dusk and the stars stay as
   they are, and the mist, the village lights and the fireflies rest; the beats, the camera, the lanterns, the
   poles, the walker and the waves still move */
@media (pointer: coarse) {
    .motion .ch--tech-how-it-works :is(.ly--far, .ly--vale, .ly--hill, .ly--near, .ly--glow, .ly--more),
    .motion .ch--tech-how-it-works :is(.hw-mist, .hw-village, .hw-fly) {
        animation: none;
    }
}

/* ==========================================================================
   chapter tech/packages
   ========================================================================== */
/* The sea at night from a beach. The moon waxes one phase with each package, from a thin crescent low over the
   water at the opening to the full moon high above it, and its path on the sea widens and brightens with it;
   while the finder is in use the moon shows the package the finder names. The state of the drawing lives in
   custom properties on the section: the plain values are the last state (full moon, widest path), the states
   further down set the earlier ones, under .motion.ch-ready only. */
.ch--tech-packages {
    --pk-my: -60px;      /* how far the moon sits below its drawn place (it is drawn for a wide screen) */
    --pk-drop: 288px;    /* how much lower it sits at the opening, before the first package lifts it */
    --pk-shade: 0;       /* the dark ellipse cut out of the lit half: near 1 a thin crescent, 0 a half moon */
    --pk-fill: 1;        /* the lit ellipse over the dark half: 0 a half moon, 1 the full moon */
    --pk-glow: 1;
    --pk-co: 1;          /* the tight glow around the disc, only once the moon is more than a crescent */
    --pk-gx: 0px;        /* the glow leans toward the lit limb while the moon is thin */
    --pk-path: 1;        /* the path on the sea, and one band of it per package */
    --pk-w1: 1;
    --pk-w2: 1;
    --pk-w3: 1;
    --pk-w4: 1;
    --pk-w5: 1;
    /* the camera: on a phone it keeps the moon a little right of the middle, with Nusa Penida's cliff at the
       left; each package brings it a little closer, about the moon */
    --u: 0.65;
    --s: 0.56;
    --zx: 65%;
    --zy: 19%;
    --zoom: 1.12;
}
.ch--tech-packages .ch__head {
    align-content: start;
}

/* ---- the moon and its light */
.ch--tech-packages .pk-moon {
    translate: 0 var(--pk-my);
}
.ch--tech-packages :is(.pk-shade, .pk-fill) {
    transform-box: fill-box;
    transform-origin: center;
}
.ch--tech-packages .pk-shade {
    scale: var(--pk-shade) 1;
}
.ch--tech-packages .pk-fill {
    scale: var(--pk-fill) 1;
}
.ch--tech-packages .pk-glow {
    opacity: var(--pk-glow);
    translate: var(--pk-gx) 0;
}
.ch--tech-packages .pk-corona {
    opacity: var(--pk-co);
}
.ch--tech-packages .ly--glade {
    opacity: var(--pk-path);
}
.ch--tech-packages .pk-g1 { opacity: var(--pk-w1); }
.ch--tech-packages .pk-g2 { opacity: var(--pk-w2); }
.ch--tech-packages .pk-g3 { opacity: var(--pk-w3); }
.ch--tech-packages .pk-g4 { opacity: var(--pk-w4); }
.ch--tech-packages .pk-g5 { opacity: var(--pk-w5); }
.ch--tech-packages :is(.pk-sheen, .pk-wet) {
    opacity: var(--pk-glow);
}
.motion .ch--tech-packages :is(.pk-moon, .pk-rise) {
    transition: translate 2.4s var(--ease-in-out);
}
.motion .ch--tech-packages :is(.pk-shade, .pk-fill) {
    transition: scale 1.9s var(--ease-in-out);
}
.motion .ch--tech-packages :is(.pk-glow, .pk-corona, .ly--glade, .pk-g, .pk-sheen, .pk-wet) {
    transition: opacity 1.6s var(--ease), translate 1.9s var(--ease-in-out);
}

/* ---- the states. The opening: a thin crescent low over the sea, a thread of light under it */
.motion.ch-ready .ch--tech-packages:not([data-beat]) {
    --pk-my: -24px;
    --pk-shade: 0.9;
    --pk-fill: 0;
    --pk-glow: 0.32;
    --pk-co: 0;
    --pk-gx: 36px;
    --pk-path: 0.5;
    --pk-w1: 0;
    --pk-w2: 0;
    --pk-w3: 0;
    --pk-w4: 0;
    --pk-w5: 0;
    --u: 0.65;
    --zy: 55%;
    --zoom: 1;
}
.motion.ch-ready .ch--tech-packages:not([data-beat]) .pk-rise {
    translate: 0 var(--pk-drop);
}
/* one phase per package; the finder, while the reader is still above the packages, borrows the phase of the
   package its answer names (the highest one picked wins, being the later rule). The :has() sits inside :is(),
   so a browser without it drops only that half of each rule, never the package states */
.motion.ch-ready .ch--tech-packages[data-beat="p1"],
.motion.ch-ready .ch--tech-packages:not([data-beat]):is(:has(.finder__opt[data-pkg="1"][aria-pressed="true"])) {
    --pk-shade: 0.72;
    --pk-fill: 0;
    --pk-glow: 0.46;
    --pk-co: 0.12;
    --pk-gx: 28px;
    --pk-path: 0.64;
    --pk-w1: 1;
    --pk-w2: 0;
    --pk-w3: 0;
    --pk-w4: 0;
    --pk-w5: 0;
}
.motion.ch-ready .ch--tech-packages[data-beat="p2"],
.motion.ch-ready .ch--tech-packages:not([data-beat]):is(:has(.finder__opt[data-pkg="2"][aria-pressed="true"])) {
    --pk-shade: 0.36;
    --pk-fill: 0;
    --pk-glow: 0.6;
    --pk-co: 0.36;
    --pk-gx: 18px;
    --pk-path: 0.76;
    --pk-w1: 1;
    --pk-w2: 1;
    --pk-w3: 0;
    --pk-w4: 0;
    --pk-w5: 0;
}
.motion.ch-ready .ch--tech-packages[data-beat="p3"],
.motion.ch-ready .ch--tech-packages:not([data-beat]):is(:has(.finder__opt[data-pkg="3"][aria-pressed="true"])) {
    --pk-shade: 0;
    --pk-fill: 0;
    --pk-glow: 0.72;
    --pk-co: 0.6;
    --pk-gx: 9px;
    --pk-path: 0.85;
    --pk-w1: 1;
    --pk-w2: 1;
    --pk-w3: 1;
    --pk-w4: 0;
    --pk-w5: 0;
}
.motion.ch-ready .ch--tech-packages[data-beat="p4"],
.motion.ch-ready .ch--tech-packages:not([data-beat]):is(:has(.finder__opt[data-pkg="4"][aria-pressed="true"])) {
    --pk-shade: 0;
    --pk-fill: 0.52;
    --pk-glow: 0.86;
    --pk-co: 0.82;
    --pk-gx: 3px;
    --pk-path: 0.93;
    --pk-w1: 1;
    --pk-w2: 1;
    --pk-w3: 1;
    --pk-w4: 1;
    --pk-w5: 0;
}
.motion.ch-ready .ch--tech-packages[data-beat="p5"],
.motion.ch-ready .ch--tech-packages:not([data-beat]):is(:has(.finder__opt[data-pkg="5"][aria-pressed="true"])) {
    --pk-shade: 0;
    --pk-fill: 1;
    --pk-glow: 1;
    --pk-co: 1;
    --pk-gx: 0px;
    --pk-path: 1;
    --pk-w1: 1;
    --pk-w2: 1;
    --pk-w3: 1;
    --pk-w4: 1;
    --pk-w5: 1;
}
/* where the moon stands for each package, and the camera coming closer to it. On a phone the moon keeps to the
   band between the header and the panel that has just taken over, and the path shows under the panel */
.motion.ch-ready .ch--tech-packages[data-beat="p1"] { --pk-my: -24px; --zoom: 1.03; --u: 0.655; }
.motion.ch-ready .ch--tech-packages[data-beat="p2"] { --pk-my: -34px; --zoom: 1.06; --u: 0.64; }
.motion.ch-ready .ch--tech-packages[data-beat="p3"] { --pk-my: -44px; --zoom: 1.08; --u: 0.66; }
.motion.ch-ready .ch--tech-packages[data-beat="p4"] { --pk-my: -52px; --zoom: 1.1; --u: 0.645; }
/* a still page shows the full moon low over the water, under the opening words */
:root:not(.motion) .ch--tech-packages {
    --pk-my: 236px;
}

/* a wide screen sees the whole drawing: the moon stands at the right of the words and climbs one step a package */
@media (min-width: 56.25em) {
    .ch--tech-packages {
        --pk-my: 48px;
        --pk-drop: 110px;
        --s: 0.85;
        --pan: 0.3;
        --zy: 38%;
        --zoom: 1.06;
    }
    .motion.ch-ready .ch--tech-packages:not([data-beat]) { --pk-my: 154px; --zy: 54%; --zoom: 1; }
    .motion.ch-ready .ch--tech-packages[data-beat="p1"] { --pk-my: 154px; --zoom: 1.015; }
    .motion.ch-ready .ch--tech-packages[data-beat="p2"] { --pk-my: 126px; --zoom: 1.025; }
    .motion.ch-ready .ch--tech-packages[data-beat="p3"] { --pk-my: 100px; --zoom: 1.035; }
    .motion.ch-ready .ch--tech-packages[data-beat="p4"] { --pk-my: 74px; --zoom: 1.045; }
    :root:not(.motion) .ch--tech-packages {
        --pk-my: 48px;
    }
}
/* a wide and short window loses the top of the drawing: the moon stays clear of the header */
@media (min-width: 56.25em) and (min-aspect-ratio: 41/20) {
    .ch--tech-packages { --pk-my: 88px; }
    .motion.ch-ready .ch--tech-packages[data-beat="p2"] { --pk-my: 142px; }
    .motion.ch-ready .ch--tech-packages[data-beat="p3"] { --pk-my: 124px; }
    .motion.ch-ready .ch--tech-packages[data-beat="p4"] { --pk-my: 106px; }
    :root:not(.motion) .ch--tech-packages { --pk-my: 88px; }
}
@media (min-width: 56.25em) and (min-aspect-ratio: 23/10) {
    .ch--tech-packages { --pk-my: 150px; }
    .motion.ch-ready .ch--tech-packages:not([data-beat]) { --pk-my: 190px; --pk-drop: 74px; }
    .motion.ch-ready .ch--tech-packages[data-beat="p1"] { --pk-my: 190px; }
    .motion.ch-ready .ch--tech-packages[data-beat="p2"] { --pk-my: 180px; }
    .motion.ch-ready .ch--tech-packages[data-beat="p3"] { --pk-my: 170px; }
    .motion.ch-ready .ch--tech-packages[data-beat="p4"] { --pk-my: 160px; }
    :root:not(.motion) .ch--tech-packages { --pk-my: 150px; }
}

/* a phone on its side shows only the lower part of the drawing, and the drawing fits its width, so the camera
   cannot pan: it comes closer about the left edge instead, which carries the moon clear of the panels to the right */
@media (orientation: landscape) and (max-height: 31.25em) {
    .ch--tech-packages {
        --pk-my: 158px;
        --pk-drop: 40px;
        --zx: 0%;
        --zy: 24%;
        --zoom: 1.42;
    }
    .motion.ch-ready .ch--tech-packages:not([data-beat]) { --pk-my: 238px; --zy: 24%; --zoom: 1.3; }
    .motion.ch-ready .ch--tech-packages[data-beat="p1"] { --pk-my: 238px; --zoom: 1.34; }
    .motion.ch-ready .ch--tech-packages[data-beat="p2"] { --pk-my: 218px; --zoom: 1.36; }
    .motion.ch-ready .ch--tech-packages[data-beat="p3"] { --pk-my: 198px; --zoom: 1.38; }
    .motion.ch-ready .ch--tech-packages[data-beat="p4"] { --pk-my: 178px; --zoom: 1.4; }
    :root:not(.motion) .ch--tech-packages {
        --pk-my: 158px;
    }
}

/* ---- the moonrise: where scroll timelines exist, the first package lifts the moon out of the low sky as its
   panel rises to the reading line, so the reader's thumb raises it; elsewhere it rises when the panel arrives */
@supports (animation-timeline: view()) and (timeline-scope: --pk) {
    .motion .ch--tech-packages {
        timeline-scope: --pk-rise;
    }
    .motion .ch--tech-packages .beat[data-beat="p1"] {
        view-timeline: --pk-rise block;
    }
    .motion.ch-ready .ch--tech-packages .pk-rise {
        animation: pk-rise linear both;
        animation-timeline: --pk-rise;
        animation-range: cover 0% cover 68vh;
    }
    @media (min-width: 56.25em) {
        .motion.ch-ready .ch--tech-packages .pk-rise {
            animation-range: cover 0% cover 48vh;
        }
    }
    @keyframes pk-rise {
        from { translate: 0 var(--pk-drop); }
        to { translate: 0 0; }
    }
}

/* ---- the life of the place, only with motion; it rests while the section is off screen */
.motion .ch--tech-packages .pk-sh--a {
    animation: pk-shim 3.4s ease-in-out infinite alternate;
}
.motion .ch--tech-packages .pk-sh--b {
    animation: pk-shim 4.6s ease-in-out -2.3s infinite alternate-reverse;
}
@keyframes pk-shim {
    to { opacity: 0.38; translate: 5px 0; }
}
.motion .ch--tech-packages .pk-vil--1 {
    animation: pk-vil 2.6s steps(2) infinite;
}
.motion .ch--tech-packages .pk-vil--2 {
    animation: pk-vil 3.8s steps(2) -1.3s infinite;
}
@keyframes pk-vil {
    50% { opacity: 0.45; }
}
.motion .ch--tech-packages .pk-foam--1 {
    animation: pk-wash 7s ease-in-out infinite;
}
.motion .ch--tech-packages .pk-foam--2 {
    animation: pk-wash 7s ease-in-out -3.5s infinite;
}
@keyframes pk-wash {
    0%, 100% { translate: 0 0; opacity: 1; }
    45% { translate: 0 -5px; opacity: 0.45; }
}
.ch--tech-packages :is(.pk-refl, .pk-breathe) {
    transform-box: fill-box;
    transform-origin: center;
}
.motion .ch--tech-packages .pk-refl {
    animation: pk-refl 2.2s ease-in-out infinite alternate;
}
@keyframes pk-refl {
    to { opacity: 0.55; scale: 1.2 1; }
}
.motion .ch--tech-packages .pk-breathe {
    animation: pk-breathe 8s ease-in-out infinite;
}
@keyframes pk-breathe {
    50% { scale: 1.05; }
}

/* ---- as the section is read the last of the dusk goes, the stars come out, the near beach slides a little
   against the far sea, and a boat sails across */
@supports (animation-timeline: view()) {
    .motion .ch--tech-packages .ly--dusk {
        animation: pk-dusk linear both;
        animation-timeline: --ch;
        animation-range: contain 0% contain 100%;
    }
    .motion .ch--tech-packages .ly--stars {
        animation: pk-stars linear both;
        animation-timeline: --ch;
        animation-range: contain 0% contain 55%;
    }
    .motion .ch--tech-packages .ly--beach {
        animation: pk-near linear both;
        animation-timeline: --ch;
        animation-range: contain 0% contain 100%;
    }
    /* the jukung under sail crosses the moon's path while the packages are read */
    .motion .ch--tech-packages .pk-sail {
        animation: pk-sail linear both;
        animation-timeline: --ch;
        animation-range: contain 10% contain 90%;
    }
    @keyframes pk-sail {
        from { translate: -90px 0; }
        to { translate: 110px 0; }
    }
    @keyframes pk-dusk {
        to { opacity: 0.2; }
    }
    @keyframes pk-stars {
        from { opacity: 0.45; }
    }
    @keyframes pk-near {
        from { translate: 0 1.2%; }
        to { translate: 0 -0.6%; }
    }
}

/* ==== the words ============================================================================================ */
/* a panel cut like the beats, used by the finder and the table */
.ch--tech-packages :is(.finder__pick, .finder__answer, .pk-table) {
    position: relative;
    isolation: isolate;
}
.ch--tech-packages :is(.finder__pick, .finder__answer, .pk-table)::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--panel);
    clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
}
.ch--tech-packages :is(.finder__answer, .pk-table)::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: var(--cut);
    height: var(--cut);
    background: var(--gold);
    clip-path: polygon(0 0, 100% 0, 100% 100%);
}

/* ---- the finder: the picks on one stone, the answer on a lighter one beside or under it */
.ch--tech-packages .finder {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    max-width: 42rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
.ch--tech-packages .finder__pick {
    gap: 16px;
    align-content: start;
    padding: clamp(22px, 3vw, 40px) clamp(18px, 3vw, 40px);
}
.ch--tech-packages .finder__title {
    font: 600 clamp(1.65rem, 1.15rem + 1.5vw, 2.4rem)/1.06 var(--display);
    letter-spacing: -0.018em;
}
.ch--tech-packages .finder__how {
    color: var(--fg-soft);
    font-size: 1.0625rem;
    line-height: 1.5;
}
.ch--tech-packages .finder__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 8.6rem), 1fr));
    gap: 8px;
    margin-top: 4px;
}
.ch--tech-packages .finder__list li {
    display: flex;
}
@media (min-width: 40em) {
    .ch--tech-packages .finder__list {
        grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
    }
}
/* a chip is a small cut stone: the box and the name, and under them the moon of the package it needs */
.ch--tech-packages .finder__opt {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    align-content: start;
    align-items: start;
    gap: 5px 9px;
    width: 100%;
    min-height: 60px;
    padding: 11px 10px 12px;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--fg);
    font: 600 1rem/1.25 var(--text);
    text-align: left;
    -webkit-tap-highlight-color: transparent;
}
.ch--tech-packages .finder__opt::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(243, 243, 241, 0.07);
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
    transition: background-color 0.25s var(--ease);
}
.ch--tech-packages .finder__opt:hover::before {
    background: rgba(243, 243, 241, 0.12);
}
.ch--tech-packages .finder__opt[aria-pressed="true"]::before {
    background: rgba(253, 191, 20, 0.22);
}
.ch--tech-packages .finder__box {
    position: relative;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    border: 1.5px solid var(--fg-mute);
    border-radius: 4px;
    transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.ch--tech-packages .finder__opt[aria-pressed="true"] .finder__box {
    border-color: var(--gold);
    background: var(--gold);
    box-shadow: none;
}
.ch--tech-packages .finder__opt[aria-pressed="true"] .finder__box::after {
    content: "";
    position: absolute;
    left: 5.5px;
    top: 1.5px;
    width: 5px;
    height: 10px;
    border: solid var(--ink);
    border-width: 0 2px 2px 0;
    rotate: 40deg;
}
.ch--tech-packages .finder__name {
    font-weight: 600;
}
/* the label runs under the box and the name, its moon centred under the box and its words under the name */
.ch--tech-packages .finder__from {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    align-items: center;
    column-gap: 9px;
    color: var(--fg-mute);
    font: 500 0.875rem/1.3 var(--text);
    white-space: normal;
}
/* the moon of the package an option needs, as in the panels below: a crescent for Package 1 to full for 5 */
.ch--tech-packages .finder__from::before {
    content: "";
    justify-self: center;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #374e6f;
    box-shadow: inset -3px 0 0 #ffe9b0;
}
.ch--tech-packages [data-pkg="2"] .finder__from::before {
    box-shadow: inset -4.5px 0 0 #ffe9b0;
}
.ch--tech-packages [data-pkg="3"] .finder__from::before {
    background: linear-gradient(90deg, #374e6f 50%, #ffe9b0 50%);
    box-shadow: none;
}
.ch--tech-packages [data-pkg="4"] .finder__from::before {
    background: #ffe9b0;
    box-shadow: inset 3px 0 0 #374e6f;
}
.ch--tech-packages [data-pkg="5"] .finder__from::before {
    background: #ffe9b0;
    box-shadow: 0 0 8px rgba(255, 233, 176, 0.65);
}
/* the narrowest phones keep each label on one line */
@media (max-width: 24em) {
    .ch--tech-packages .finder__pick {
        padding-inline: 14px;
    }
    .ch--tech-packages .finder__opt {
        padding-inline: 9px;
    }
    .ch--tech-packages .finder__from {
        font-size: 0.84375rem;
    }
}
.ch--tech-packages .finder__reset {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 2px;
    border: 0;
    color: var(--accent);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 5px;
}
.ch--tech-packages .finder__answer {
    --panel: rgba(28, 45, 69, 0.95);
    gap: 14px;
    padding: clamp(22px, 3vw, 40px) clamp(18px, 3vw, 40px);
    border: 0;
    border-radius: 0;
    background: none;
}
.ch--tech-packages .finder__verdict {
    color: var(--fg);
    font-size: 1.0625rem;
    line-height: 1.45;
}
.ch--tech-packages .finder__answer .figure {
    color: #fff6dc;
    font: 650 clamp(2.6rem, 1.4rem + 4.4vw, 3.4rem)/0.95 var(--display);
    letter-spacing: -0.03em;
    white-space: nowrap;
}
.ch--tech-packages :is(.finder__unit, .finder__picked) {
    color: var(--fg-soft);
    font-size: 1rem;
    line-height: 1.45;
}
.ch--tech-packages .finder__facts li {
    color: var(--fg-soft);
    font-size: 1rem;
    line-height: 1.45;
}
.ch--tech-packages .finder__answer .actions {
    gap: 6px 22px;
    margin-top: 6px;
}
.ch--tech-packages .finder__answer .actions .btn {
    flex: 1 1 100%;
    white-space: normal;
}
.ch--tech-packages .finder__answer .link-go {
    min-height: 44px;
    padding-bottom: 0;
    border-bottom: 0;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 5px;
}
/* a new answer rises into place, its price first */
.motion .ch--tech-packages .finder__answer.answer-swap > * {
    animation: pk-swap 0.6s var(--ease) both;
}
.motion .ch--tech-packages .finder__answer.answer-swap > .figure {
    animation-delay: 0.05s;
}
.motion .ch--tech-packages .finder__answer.answer-swap > :nth-child(n + 3) {
    animation-delay: 0.12s;
}
@keyframes pk-swap {
    from { opacity: 0; translate: 0 10px; }
}
@media (min-width: 64.01em) {
    .ch--tech-packages .finder {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
        max-width: 56rem;
        align-items: start;
    }
    .ch--tech-packages .finder__answer {
        padding-inline: 34px;
    }
    .ch--tech-packages .finder__answer .actions .btn {
        flex: 0 1 auto;
    }
}

/* ---- the packages, one beat each */
.ch--tech-packages .beat {
    width: min(100%, 34rem);
    padding: clamp(18px, 2.6vw, 36px) clamp(18px, 2.8vw, 38px);
}
.ch--tech-packages .pkg__in {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    grid-template-areas: "art name" "art price" "unit unit" "list list" "cta cta";
    column-gap: 14px;
    align-items: center;
}
.ch--tech-packages .pkg__art {
    grid-area: art;
    align-self: center;
    width: 100%;
    aspect-ratio: 1;
}
.ch--tech-packages .pkg__art svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}
.ch--tech-packages .pkg__name {
    grid-area: name;
    align-self: end;
    font: 600 1.5rem/1.1 var(--display);
    letter-spacing: -0.012em;
}
.ch--tech-packages .pkg__price {
    grid-area: price;
    align-self: start;
    margin-top: 2px;
    color: #fff6dc;
    font: 650 clamp(2.25rem, 1.5rem + 3vw, 3.6rem)/1 var(--display);
    letter-spacing: -0.03em;
    white-space: nowrap;
}
.ch--tech-packages .pkg__unit {
    grid-area: unit;
    margin-top: 6px;
    color: var(--fg-soft);
    font-size: 1rem;
    line-height: 1.45;
}
.ch--tech-packages .pkg__list {
    grid-area: list;
    display: grid;
    gap: 4px;
    margin-top: 12px;
}
.ch--tech-packages .pkg__list li {
    position: relative;
    padding-left: 17px;
    color: var(--fg);
    font-size: 1rem;
    line-height: 1.4;
}
.ch--tech-packages .pkg__list li::before {
    content: "";
    position: absolute;
    left: 1px;
    top: 0.58em;
    width: 6px;
    height: 6px;
    background: var(--gold);
    rotate: 45deg;
}
.ch--tech-packages .pkg__cta {
    grid-area: cta;
    margin-top: 16px;
    white-space: normal;
    text-align: center;
}
@media (min-width: 56.25em) {
    /* the price is sized by its own panel, which is narrower when the five stand side by side on a still page */
    .ch--tech-packages .beat {
        container-type: inline-size;
    }
    .ch--tech-packages .pkg__price {
        font-size: clamp(1.9rem, 16.1cqi - 1.06rem, 3.6rem);
    }
    .ch--tech-packages .pkg__in {
        grid-template-columns: 86px minmax(0, 1fr);
        column-gap: 20px;
    }
    .ch--tech-packages .pkg__name {
        font-size: 1.65rem;
    }
    .ch--tech-packages .pkg__list {
        gap: 7px;
        margin-top: 16px;
    }
    .ch--tech-packages .pkg__list li {
        font-size: 1.0625rem;
        line-height: 1.45;
    }
    .ch--tech-packages .pkg__cta {
        justify-self: start;
        margin-top: 22px;
    }
}

/* ---- the full comparison, on a night stone with its own cut, narrow enough to leave the full moon beside it */
.ch--tech-packages .pk-table {
    --panel: rgba(10, 18, 28, 0.95);
    max-width: 53rem;
    padding: clamp(8px, 1.4vw, 22px);
}
.ch--tech-packages .table-wrap {
    margin: 0;
    border: 0;
    border-radius: 0;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
.ch--tech-packages .compare {
    font-size: 1rem;
}
.ch--tech-packages .compare :is(th, td) {
    padding: 12px;
}
.ch--tech-packages .compare th:first-child {
    width: auto;
    min-width: 10.5rem;
}
.ch--tech-packages .compare caption {
    padding: 10px 14px 16px;
    color: var(--fg-soft);
    line-height: 1.45;
}
/* the header row keeps the stone's tone when it sticks over the rows */
.ch--tech-packages .compare thead th {
    z-index: 1;
    background: #0d1621;
    color: var(--fg);
}
.ch--tech-packages .compare thead .plan__price {
    color: #fff6dc;
    font-size: 1rem;
}
.ch--tech-packages .compare tbody th {
    color: var(--fg);
}
.ch--tech-packages .compare span.yes {
    border-radius: 3px;
    rotate: 45deg;
    scale: 0.8;
}
/* a phone: the table scrolls inside its own region, its header and its first column stay in view */
@media (max-width: 52em) {
    .ch--tech-packages #compare .table-wrap {
        display: block;
        max-height: min(78svh, 46rem);
        overflow: auto;
    }
    .ch--tech-packages .compare {
        font-size: 0.9375rem;
    }
    .ch--tech-packages .compare :is(th, td) {
        padding: 10px 12px;
    }
    .ch--tech-packages .compare th:first-child {
        position: sticky;
        left: 0;
        z-index: 1;
        width: 9rem;
        min-width: 9rem;
        background: #0d1621;
    }
    .ch--tech-packages .compare thead th:first-child {
        z-index: 2;
    }
    .ch--tech-packages .compare caption {
        position: sticky;
        left: 0;
        max-width: calc(100vw - var(--gutter) * 2 - 16px);
    }
}
/* a wide screen has room for the whole table: the region stops scrolling, so the header row sticks under the
   page header while the rows pass */
@media (min-width: 64em) {
    .ch--tech-packages .table-wrap {
        overflow: visible;
    }
    .ch--tech-packages .compare thead th {
        top: var(--head-h);
    }
}

/* ---- spacing with motion: the moon gets the screen to itself before the first package rises, the packages
   follow each other closely, and the table comes after a last look at the full moon */
@media (prefers-reduced-motion: no-preference) {
    .motion .ch--tech-packages .finder {
        margin-bottom: max(42vh, 220px);
    }
    /* on a phone the crescent sits just under the opening words: the finder waits a little before it covers it */
    @media (max-width: 56.24em) and (orientation: portrait) {
        .motion .ch--tech-packages .finder {
            margin-top: 10vh;
        }
    }
    .motion .ch--tech-packages .beats {
        gap: max(26vh, 150px);
        padding-block: 4vh 40vh;
    }
}
/* without motion the five stand side by side where there is room */
:root:not(.motion) .ch--tech-packages .beats {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
    margin-block: clamp(36px, 5vw, 64px);
}

/* a phone on its side: the words fit the short screen, the moon keeps clear of them */
@media (orientation: landscape) and (max-height: 31.25em) {
    .ch--tech-packages .ch__head {
        max-width: 28rem;
    }
    .ch--tech-packages .finder {
        max-width: 38rem;
    }
    /* a panel in two columns, so a package fits the short screen: the name, the price and the button on the
       left, the list on the right */
    .ch--tech-packages .beat {
        width: min(100%, 40rem);
        padding: 16px 20px;
    }
    .ch--tech-packages .pkg__in {
        grid-template-columns: 40px minmax(0, 9.8rem) minmax(0, 1fr);
        grid-template-rows: auto auto auto auto 1fr;
        grid-template-areas: "art name list" "art price list" "unit unit list" "cta cta list" ". . list";
        column-gap: 12px;
        align-items: start;
    }
    .ch--tech-packages .pkg__name {
        font-size: 1.25rem;
    }
    .ch--tech-packages .pkg__price {
        font-size: 1.6rem;
    }
    .ch--tech-packages .pkg__unit {
        font-size: 0.9375rem;
    }
    .ch--tech-packages .pkg__list {
        align-self: start;
        margin: 0 0 0 10px;
        gap: 3px;
    }
    .ch--tech-packages .pkg__list li {
        font-size: 1rem;
        line-height: 1.32;
    }
    .ch--tech-packages .pkg__cta {
        justify-self: stretch;
        margin-top: 12px;
        min-height: 44px;
        padding-inline: 14px;
    }
}

/* ==========================================================================
   chapter tech/starlink
   ========================================================================== */
/* The villa on the sea cliffs under the Milky Way: dark but for one lamp, then linked to the passing train of
   satellites one dish at a time, until both buildings are lit. Without motion everything is on. */

/* ---- the camera: on a phone it starts on the Milky Way rising beside the headland, then comes to the villa and
   tilts up to the sky when a beam goes up; on a wide screen the whole headland is in view and it only leans */
.ch--tech-starlink {
    --u: 0.62;
    --zx: 62%;
    --zy: 100%;
    --pad: clamp(22px, 3vw, 38px);
    --panel: rgba(9, 16, 26, 0.9);
}
.ch--tech-starlink[data-beat="need"] { --u: 0.7; --zoom: 1.14; --zx: 66%; --zy: 0%; }
.ch--tech-starlink[data-beat="one"] { --u: 0.68; --zoom: 1.15; --zx: 66%; --zy: 0%; }
.ch--tech-starlink[data-beat="one-get"] { --u: 0.72; --zoom: 1.05; --zx: 70%; --zy: 100%; }
.ch--tech-starlink[data-beat="two"] { --u: 0.8; --zoom: 1.15; --zx: 80%; --zy: 0%; }
.ch--tech-starlink[data-beat="two-get"] { --u: 0.76; --zoom: 1.06; --zx: 76%; --zy: 100%; }
@media (min-width: 56.01em) {
    .ch--tech-starlink {
        --s: 0.6;
        --pan: 0.35;
        --u: 0.5;
    }
    .ch--tech-starlink[data-beat] { --s: 0.66; --u: 0.76; --zoom: 1.03; --zx: 74%; --zy: 70%; }
    .ch--tech-starlink[data-beat="one"],
    .ch--tech-starlink[data-beat="two"] { --zy: 40%; --zoom: 1.04; }
    .ch--tech-starlink[data-beat="need"] { --zoom: 1.07; --zx: 66%; --zy: 64%; }
}

/* ---- the opening: on a phone the words sit in the dark sky above the villa; on a wide screen low over the sea */
.ch--tech-starlink .ch__head {
    align-content: start;
    padding-top: calc(var(--head-h) + 5vh);
}
.ch--tech-starlink .ch__title {
    font-size: clamp(2.5rem, 1rem + 5.2vw, 6.25rem);
}
.ch--tech-starlink .ch__lead {
    font-size: clamp(1.0625rem, 1rem + 0.5vw, 1.4375rem);
}
@media (min-width: 56.01em) {
    .ch--tech-starlink .ch__head {
        align-content: end;
        padding-top: calc(var(--head-h) + 8vh);
    }
}

/* ---- the panels */
.ch--tech-starlink .beat {
    padding: var(--pad);
}
.ch--tech-starlink .sl-need {
    gap: 22px;
}
.ch--tech-starlink .sl-need__text {
    color: var(--fg);
    font-size: var(--step-lead);
    line-height: 1.42;
    text-wrap: pretty;
}
.ch--tech-starlink .sl-ask {
    justify-self: start;
}
.ch--tech-starlink .sl-pkg {
    display: grid;
    gap: 14px;
}
.ch--tech-starlink .sl-pkg__head {
    gap: 6px;
}
.ch--tech-starlink .sl-price {
    margin-top: 8px;
    color: var(--fg);
    font: 650 clamp(2.5rem, 1.7rem + 2.4vw, 3.75rem)/1 var(--display);
    letter-spacing: -0.025em;
    white-space: nowrap;
}
.ch--tech-starlink .sl-unit {
    color: var(--fg-soft);
}
.ch--tech-starlink .sl-what {
    margin-top: 10px;
    color: var(--gold-soft);
    font: 600 clamp(1.125rem, 1rem + 0.4vw, 1.3rem)/1.3 var(--display);
}
.ch--tech-starlink .sl-pkg__get {
    gap: 14px;
}
.ch--tech-starlink .sl-sub {
    color: var(--fg);
    font: 600 clamp(1.25rem, 1.05rem + 0.6vw, 1.6rem)/1.15 var(--display);
}
.ch--tech-starlink .sl-list {
    display: grid;
    gap: 7px;
}
.ch--tech-starlink .sl-list li {
    position: relative;
    padding-left: 22px;
    color: var(--fg);
    font-size: 1rem;
    line-height: 1.45;
}
/* each item marked with a small gold facet */
.ch--tech-starlink .sl-list li::before {
    content: "";
    position: absolute;
    left: 3px;
    top: 0.52em;
    width: 7px;
    height: 7px;
    background: var(--gold);
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
@media (min-width: 56.01em) {
    .ch--tech-starlink .sl-list li {
        font-size: 1.0625rem;
    }
}
/* on a phone the package and what it brings are two beats: the list waits a little below the reading line,
   so the villa above it is clear when its windows come on */
@media (max-width: 56em) {
    .ch--tech-starlink .sl-ask {
        justify-self: stretch;
        min-height: 52px;
    }
    .motion .ch--tech-starlink .sl-pkg {
        gap: 200px;
    }
    .motion .ch--tech-starlink .sl-pkg__get {
        --lead: 36vh;
        padding-top: calc(var(--lead) + var(--pad));
    }
    .motion .ch--tech-starlink .sl-pkg__get::before {
        top: var(--lead);
    }
    .motion .ch--tech-starlink .sl-pkg__get::after {
        top: var(--lead);
    }
}
/* the smallest phones: the long lists sit a little closer, the text stays at full size */
@media (max-width: 23em) {
    .ch--tech-starlink .sl-pkg__get {
        --pad: 18px;
    }
    .ch--tech-starlink .sl-list {
        gap: 5px;
    }
    .ch--tech-starlink .sl-list li {
        line-height: 1.4;
    }
}
/* a phone on its side: the list runs in three balanced columns so the panel fits the short screen */
@media (max-width: 56em) and (max-height: 500px) and (orientation: landscape) {
    .ch--tech-starlink .beat {
        width: min(100%, 27rem);
    }
    .ch--tech-starlink .sl-pkg__get {
        --pad: 18px;
        gap: 10px;
        width: min(100%, 52rem);
    }
    .ch--tech-starlink .sl-sub {
        font-size: 1.2rem;
    }
    /* balanced columns pack the list tighter than a grid, in the same reading order */
    .ch--tech-starlink .sl-list {
        display: block;
        columns: 3;
        column-gap: 20px;
    }
    .ch--tech-starlink .sl-list li {
        margin-bottom: 6px;
        break-inside: avoid;
    }
    .ch--tech-starlink .ch__head {
        align-content: end;
        padding-block: calc(var(--head-h) + 12px) 28px;
    }
}
/* still pages on a phone: the finished picture stands on its own above the words, wide enough to hold the
   Milky Way, the villa and both beams, so no beam or satellite crosses the title */
@media (max-width: 56em) {
    :root:not(.motion) .ch--tech-starlink {
        --u: 0.66;
    }
    :root:not(.motion) .ch--tech-starlink .ch__frame {
        height: 58vh;
    }
    :root:not(.motion) .ch--tech-starlink .ch__head {
        min-height: 0;
        padding-block: calc(58vh + 28px) 40px;
    }
}
/* a still picture fades into the section below it instead of ending on a hard edge */
:root:not(.motion) .ch--tech-starlink .ch__frame::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 16%;
    background: linear-gradient(rgba(21, 31, 46, 0), var(--sky-a, #172333));
}
/* still pages: the need, then the two packages side by side, each as one card of two facets */
:root:not(.motion) .ch--tech-starlink .beats {
    grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 52em) {
    :root:not(.motion) .ch--tech-starlink .beats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    :root:not(.motion) .ch--tech-starlink .sl-need {
        grid-column: 1 / -1;
        max-width: 44rem;
    }
}
:root:not(.motion) .ch--tech-starlink .sl-pkg {
    align-content: start;
    gap: 8px;
}

/* ---- the light of each beat: off until its beat has been reached, then on with a flicker, as a lamp catches.
   The lamp and the red box of the start only show between the first beat and the villa being lit. */
.ch--tech-starlink .z {
    transition: opacity 0.8s var(--ease);
}
.ch--tech-starlink .z-need {
    opacity: 0;
}
.motion.ch-ready .ch--tech-starlink[data-seen~="need"]:not([data-seen~="one-get"]) .z-need {
    opacity: 1;
}
.motion.ch-ready .ch--tech-starlink:not([data-seen~="one"]) .z-one,
.motion.ch-ready .ch--tech-starlink:not([data-seen~="one-get"]) .z-one-get,
.motion.ch-ready .ch--tech-starlink:not([data-seen~="two"]) .z-two,
.motion.ch-ready .ch--tech-starlink:not([data-seen~="two-get"]) .z-two-get {
    opacity: 0;
}
.motion.ch-ready .ch--tech-starlink[data-seen~="one"] .z-one,
.motion.ch-ready .ch--tech-starlink[data-seen~="one-get"] .z-one-get,
.motion.ch-ready .ch--tech-starlink[data-seen~="two"] .z-two,
.motion.ch-ready .ch--tech-starlink[data-seen~="two-get"] .z-two-get {
    animation: slk-on 1.2s var(--ease) both;
}
@keyframes slk-on {
    0% { opacity: 0; }
    10% { opacity: 0.9; }
    16% { opacity: 0.2; }
    26% { opacity: 1; }
    100% { opacity: 1; }
}
/* a beam grows from its dish up to the satellite */
.ch--tech-starlink .slk-grow {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    transition: transform 1.6s var(--ease);
}
.motion.ch-ready .ch--tech-starlink:not([data-seen~="one"]) .z-one .slk-grow,
.motion.ch-ready .ch--tech-starlink:not([data-seen~="two"]) .z-two .slk-grow {
    transform: scale(1, 0);
}

/* ---- the life of the place, only with motion, resting while the section is off screen */
.motion .ch--tech-starlink .slk-flow {
    animation: slk-flow 1.5s linear infinite;
}
@keyframes slk-flow {
    to { stroke-dashoffset: 32; }
}
.ch--tech-starlink .slk-wave,
.ch--tech-starlink .slk-lost-arc {
    transform-box: fill-box;
    transform-origin: 50% 200%;
}
.motion .ch--tech-starlink .slk-wave {
    animation: slk-wave 3.4s var(--ease) infinite both;
}
.motion .ch--tech-starlink .slk-wave:nth-child(2) { animation-delay: 0.45s; }
.motion .ch--tech-starlink .slk-wave:nth-child(3) { animation-delay: 0.9s; }
.motion .ch--tech-starlink .slk-wave:nth-child(4) { animation-delay: 1.35s; }
@keyframes slk-wave {
    0% { opacity: 0; scale: 0.7; }
    30% { opacity: 0.9; }
    100% { opacity: 0; scale: 1.14; }
}
/* the signal of the start tries, weaker at each ring, and dies away */
.ch--tech-starlink .slk-lost-arc:nth-child(2) { --pk: 0.55; }
.ch--tech-starlink .slk-lost-arc:nth-child(3) { --pk: 0.22; }
.motion .ch--tech-starlink .slk-lost-arc {
    animation: slk-lost 2.8s ease-out infinite both;
}
.motion .ch--tech-starlink .slk-lost-arc:nth-child(2) { animation-delay: 0.25s; }
.motion .ch--tech-starlink .slk-lost-arc:nth-child(3) { animation-delay: 0.5s; }
@keyframes slk-lost {
    0% { opacity: 0; scale: 0.7; }
    14% { opacity: var(--pk, 0.95); }
    32% { opacity: 0.05; scale: 0.92; }
    42%, 100% { opacity: 0; scale: 0.95; }
}
.motion .ch--tech-starlink .slk-blink {
    animation: slk-blink 1.3s steps(1) infinite;
}
.motion .ch--tech-starlink .slk-blink:nth-of-type(2n) {
    animation-duration: 0.9s;
}
@keyframes slk-blink {
    50% { opacity: 0.2; }
}
.motion .ch--tech-starlink .slk-flame {
    animation: slk-flame 2.2s ease-in-out infinite;
}
/* the phone held up to the sky flickers as it searches */
.motion .ch--tech-starlink .slk-search {
    animation: slk-search 1.9s steps(1) infinite;
}
@keyframes slk-search {
    0%, 100% { opacity: 1; }
    30% { opacity: 0.45; }
    55% { opacity: 0.9; }
    70% { opacity: 0.3; }
}
@keyframes slk-flame {
    0%, 100% { opacity: 1; }
    20% { opacity: 0.7; }
    34% { opacity: 0.95; }
    52% { opacity: 0.6; }
    70% { opacity: 0.9; }
}
.motion .ch--tech-starlink .slk-surf {
    animation: slk-surf 4.2s ease-in-out infinite;
}
@keyframes slk-surf {
    50% { opacity: 0.45; }
}
.motion .ch--tech-starlink .slk-wash {
    animation: slk-wash 6s ease-in-out infinite alternate;
}
@keyframes slk-wash {
    to { translate: -9px 3px; opacity: 0.4; }
}
.motion .ch--tech-starlink .slk-surf-far {
    animation: slk-surf 5.6s ease-in-out infinite;
}
.motion .ch--tech-starlink .slk-glint {
    animation: slk-glint 3.6s ease-in-out infinite alternate;
}
@keyframes slk-glint {
    to { opacity: 0.55; translate: 4px 0; }
}
.ch--tech-starlink .slk-boat {
    transform-box: fill-box;
    transform-origin: 50% 80%;
}
.motion .ch--tech-starlink .slk-boat {
    animation: slk-bob 5.4s ease-in-out infinite;
}
.motion .ch--tech-starlink .slk-boat2 {
    animation-duration: 6.6s;
    animation-delay: -2.2s;
}
@keyframes slk-bob {
    0%, 100% { transform: translateY(0) rotate(-1deg); }
    50% { transform: translateY(2px) rotate(1deg); }
}

/* ---- the scroll moves: the train crosses the sky as the chapter is read, each beam turns to follow its
   satellite (the keyframes come from the geometry in starlink.py), and the Milky Way rises and brightens */
@supports (animation-timeline: view()) {
    .motion .ch--tech-starlink .slk-train {
        animation: slk-train linear both;
        animation-timeline: --ch;
        animation-range: contain 0% contain 100%;
    }
    .motion .ch--tech-starlink .slk-aim1,
    .motion .ch--tech-starlink .slk-aim2 {
        transform-box: fill-box;
        transform-origin: 50% 100%;
        animation: slk-aim1 linear both;
        animation-timeline: --ch;
        animation-range: contain 0% contain 100%;
    }
    .motion .ch--tech-starlink .slk-aim2 {
        animation-name: slk-aim2;
    }
    .motion .ch--tech-starlink .slk-milky {
        animation: slk-milky linear both;
        animation-timeline: --ch;
        animation-range: contain 0% contain 62%;
    }
    /* the core rises out of the sea as it brightens; the sea in front hides what is still below the horizon */
    @keyframes slk-milky {
        from { opacity: 0.7; transform: translateY(40px); }
    }
    /* the train comes into the sky once the chapter has begun, so it never crosses the opening words */
    @keyframes slk-train {
        0% { transform: translate(-264.5px, -31.9px); opacity: 0; }
        8% { opacity: 0; }
        16% { opacity: 1; }
        100% { transform: translate(92.9px, 11.2px); }
    }
    @keyframes slk-aim1 {
        0% { transform: rotate(-21.64deg) scale(1, 1.095); }
        10% { transform: rotate(-16.46deg) scale(1, 1.047); }
        20% { transform: rotate(-10.85deg) scale(1, 1.010); }
        30% { transform: rotate(-4.86deg) scale(1, 0.982); }
        40% { transform: rotate(1.41deg) scale(1, 0.966); }
        50% { transform: rotate(7.80deg) scale(1, 0.962); }
        60% { transform: rotate(14.17deg) scale(1, 0.970); }
        70% { transform: rotate(20.37deg) scale(1, 0.989); }
        80% { transform: rotate(26.26deg) scale(1, 1.020); }
        90% { transform: rotate(31.76deg) scale(1, 1.060); }
        100% { transform: rotate(36.80deg) scale(1, 1.110); }
    }
    @keyframes slk-aim2 {
        0% { transform: rotate(-43.76deg) scale(1, 1.464); }
        10% { transform: rotate(-41.06deg) scale(1, 1.386); }
        20% { transform: rotate(-38.05deg) scale(1, 1.312); }
        30% { transform: rotate(-34.69deg) scale(1, 1.241); }
        40% { transform: rotate(-30.94deg) scale(1, 1.175); }
        50% { transform: rotate(-26.76deg) scale(1, 1.115); }
        60% { transform: rotate(-22.14deg) scale(1, 1.062); }
        70% { transform: rotate(-17.06deg) scale(1, 1.016); }
        80% { transform: rotate(-11.55deg) scale(1, 0.979); }
        90% { transform: rotate(-5.67deg) scale(1, 0.951); }
        100% { transform: rotate(0.50deg) scale(1, 0.934); }
    }
}

/* ==========================================================================
   chapter tech/per-issue
   ========================================================================== */
/* The engineer's night ride: the scooter leaves the Jacra office and rides the road through the village to the
   villa as the page scrolls, lighting the houses it passes; then the villa lights (visit), a signal arcs from the
   office's mast to the villa (remote), and the whole village comes on (work). Without motion everything is lit,
   the scooter stands at the villa and the engineer at its gate. */
.ch--tech-per-issue .ch__head {
    align-content: start;
}
/* the two prices that follow are announced under the lead, after a small gold facet */
.ch--tech-per-issue .pi-two {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: clamp(2px, 1vh, 10px);
    color: var(--fg);
    font: 600 clamp(1.3rem, 1.05rem + 0.8vw, 1.75rem)/1.1 var(--display);
    letter-spacing: -0.01em;
    text-shadow: 0 2px 24px rgba(6, 11, 18, 0.8);
}
.ch--tech-per-issue .pi-two::before {
    content: "";
    flex: none;
    width: 14px;
    height: 14px;
    background: var(--gold);
    clip-path: polygon(0 0, 100% 0, 100% 100%);
}

/* ---- the panels: a price at figure scale, its line and its button; then the twelve things, two to a row. With
   motion they stand narrow over the drawing; a still page lays them out in the engine's grid. */
.motion .ch--tech-per-issue .beat {
    width: min(100%, 30rem);
}
.motion .ch--tech-per-issue .pi-work {
    width: min(100%, 38rem);
}
.ch--tech-per-issue .pi-price__dl {
    display: grid;
    gap: 8px;
    margin: 0;
}
.ch--tech-per-issue .pi-price__dl dd {
    margin: 0;
}
.ch--tech-per-issue .pi-price__fig {
    color: var(--gold-pale);
    font: 500 clamp(2.75rem, 1.9rem + 2.6vw, 4.25rem)/1 var(--display);
    letter-spacing: -0.035em;
    white-space: nowrap;
}
.ch--tech-per-issue .pi-price__desc {
    color: var(--fg);
}
.ch--tech-per-issue .pi-price .btn {
    justify-self: start;
    margin-top: 6px;
}
.ch--tech-per-issue .pi-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px 22px;
    margin-top: 2px;
}
.ch--tech-per-issue .pi-list li {
    position: relative;
    padding-left: 20px;
    color: var(--fg);
    font-size: 1.0625rem;
    line-height: 1.35;
}
@media (max-width: 40em) {
    .ch--tech-per-issue .pi-list {
        display: flex;
        flex-wrap: wrap;
        gap: 7px 16px;
    }
    .ch--tech-per-issue .pi-list li {
        padding-left: 16px;
        font-size: 1rem;
        white-space: nowrap;
    }
}
.ch--tech-per-issue .pi-list li::before {
    content: "";
    position: absolute;
    top: 0.42em;
    left: 1px;
    width: 9px;
    height: 9px;
    background: var(--gold);
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

/* ---- the camera. The engine's camera stays centred (no --u); this chapter steers two layers inside it instead,
   so the phone can follow the scooter continuously: .pi-follow tracks the scooter along the ride with the
   scroll (--f0 to --f10, written by the drawing), and .pi-pan turns from the villa, where the ride ends, to
   what a later beat is about (--pi-to). Both stop at the drawing's edges. The zoom is the engine's. */
.ch--tech-per-issue {
    --pi-lo: calc(50cqw - 50%);
    --pi-hi: calc(50% - 50cqw);
    /* where the ride ends: when the first price reaches the reading line on a wide screen */
    --pi-ride: 52vh;
}
.ch--tech-per-issue .pi-pan,
.ch--tech-per-issue .pi-follow {
    position: absolute;
    inset: 0;
}
.ch--tech-per-issue .pi-follow {
    translate: clamp(var(--pi-lo), (0.5 - var(--f10)) * 100%, var(--pi-hi)) 0;
}
.ch--tech-per-issue .pi-pan {
    translate: calc(clamp(var(--pi-lo), (0.5 - var(--pi-to, var(--f10))) * 100%, var(--pi-hi)) - clamp(var(--pi-lo), (0.5 - var(--f10)) * 100%, var(--pi-hi))) 0;
}
.motion .ch--tech-per-issue .pi-pan {
    transition: translate 1.8s var(--ease-in-out);
}
/* a still page shows the finished picture behind its opening words: the office, the lit village and the arc over
   them, the moon out of the way of the title */
:root:not(.motion) .ch--tech-per-issue {
    --zoom: 1;
}
:root:not(.motion) .ch--tech-per-issue .pi-follow {
    translate: clamp(var(--pi-lo), (0.5 - 0.555) * 100%, var(--pi-hi)) 0;
}
/* phones: the camera comes close on the office and stays close while it follows the ride, so the scooter is the star;
   then it frames the villa as the engineer walks in, the office while it works remotely, and the village once it is
   all lit. Each beat's change sits low on the screen, under its panel. */
.ch--tech-per-issue {
    --zoom: 1.14;
    --zx: 50%;
    --zy: 80%;
}
.ch--tech-per-issue[data-beat="visit"] {
    --zoom: 1.36;
    --zx: 55%;
    --zy: 30%;
}
.ch--tech-per-issue[data-beat="remote"] {
    --pi-to: 0.49;
    --zoom: 1.2;
    --zx: 50%;
    --zy: 80%;
}
.ch--tech-per-issue[data-beat="work"] {
    --pi-to: 0.664;
    --zoom: 1.08;
    --zx: 50%;
    --zy: 55%;
}
/* a phone gives the ride a screen of its own between the words and the first price, so no panel crosses the road
   while the scooter is on it; the ride ends as that price comes up from the foot of the screen */
@media (max-width: 899.98px) {
    .ch--tech-per-issue {
        --pi-ride: 85vh;
    }
}
@media (max-width: 899.98px) and (prefers-reduced-motion: no-preference) {
    .motion .ch--tech-per-issue .beats {
        padding-top: 70vh;
    }
}
/* wide screens see the whole valley with the words on its left: the camera only leans toward each beat. For the
   remote session it settles where the office's mast and the villa's antenna are both in view, right of the panel. */
@media (min-width: 900px) {
    .ch--tech-per-issue {
        --zoom: 1;
    }
    .ch--tech-per-issue[data-beat="visit"] {
        --zoom: 1.15;
        --zx: 88%;
        --zy: 62%;
    }
    .ch--tech-per-issue[data-beat="remote"] {
        --pi-to: 0.523;
        --zoom: 1;
    }
    .ch--tech-per-issue[data-beat="work"] {
        --pi-to: 0.6;
        --zoom: 1.04;
        --zx: 66%;
        --zy: 72%;
    }
}

/* between a tablet and a laptop the office and the villa no longer both fit beside the panel: the remote session is
   seen where it lands, the arc coming in over the valley to the villa's antenna and its screen */
@media (min-width: 900px) and (max-width: 1279.98px) {
    .ch--tech-per-issue[data-beat="remote"] {
        --pi-to: 0.7;
    }
}
/* a phone on its side sees the whole valley at once and has little height: the panels narrow so the drawing shows
   beside them, the twelve things go three to a row so their panel fits the screen, and the camera only leans */
@media (max-width: 899.98px) and (orientation: landscape) and (max-height: 500px) {
    .ch--tech-per-issue {
        --zoom: 1.04;
        --zy: 90%;
    }
    .ch--tech-per-issue[data-beat="visit"] {
        --zoom: 1.1;
        --zx: 92%;
        --zy: 62%;
    }
    .ch--tech-per-issue[data-beat="remote"] {
        --zoom: 1;
    }
    .ch--tech-per-issue[data-beat="work"] {
        --zoom: 1.04;
        --zx: 70%;
        --zy: 70%;
    }
    .ch--tech-per-issue .beat {
        gap: 8px;
        padding: 18px 22px;
    }
    .motion .ch--tech-per-issue .beat {
        width: min(100%, 22rem);
    }
    .motion .ch--tech-per-issue .pi-work {
        width: min(100%, 42rem);
    }
    .ch--tech-per-issue .pi-price__fig {
        font-size: 2.6rem;
    }
    .ch--tech-per-issue .pi-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 5px 16px;
    }
}

/* ---- lights: dark until their beat, then they catch with a flicker, as a lamp does. The houses along the road
   come on as the scooter passes them (below, with the scroll). */
.ch--tech-per-issue .pi-z {
    transition: opacity 0.8s var(--ease);
}
.motion.ch-ready .ch--tech-per-issue:not([data-seen~="visit"]) .pi-z--visit,
.motion.ch-ready .ch--tech-per-issue:not([data-seen~="remote"]) .pi-z--remote,
.motion.ch-ready .ch--tech-per-issue:not([data-seen~="work"]) .pi-z--work {
    opacity: 0;
}
.motion.ch-ready .ch--tech-per-issue[data-seen~="visit"] .pi-z--visit,
.motion.ch-ready .ch--tech-per-issue[data-seen~="work"] .pi-z--work {
    animation: pi-catch 1.3s var(--ease) both;
    animation-delay: var(--d, 0s);
}
@keyframes pi-catch {
    0% { opacity: 0; }
    10% { opacity: 0.9; }
    16% { opacity: 0.25; }
    28% { opacity: 1; }
    100% { opacity: 1; }
}

/* ---- the scooter: it stands at the villa gate (the end of the road) unless the scroll rides it there, sized by
   its depth; its rider has gone in and its light is off once the visit has begun */
.ch--tech-per-issue .pi-scoot {
    offset-rotate: 0deg;
    offset-distance: 100%;
}
.ch--tech-per-issue .pi-scoot__in {
    scale: var(--k10);
}
.ch--tech-per-issue .pi-beam {
    transform-origin: 19.5px -28px;
    rotate: calc(var(--a10) * 0.7);
}
.ch--tech-per-issue .pi-rider,
.ch--tech-per-issue .pi-head {
    opacity: 0;
    transition: opacity 0.5s var(--ease) 0.3s;
}
.motion.ch-ready .ch--tech-per-issue:not([data-seen~="visit"]) :is(.pi-rider, .pi-head) {
    opacity: 1;
    transition-delay: 0s;
}
/* the engineer gets off and walks in at the gate */
.ch--tech-per-issue .pi-eng {
    transition: translate 2.2s var(--ease), opacity 0.5s var(--ease) 0.3s;
}
.motion.ch-ready .ch--tech-per-issue:not([data-seen~="visit"]) .pi-eng {
    translate: -26px 6px;
    opacity: 0;
    transition-delay: 0s;
}

/* ---- the signal: the arc draws itself from the mast to the villa, pulses run along it, rings spread at both ends */
.ch--tech-per-issue .pi-arc {
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
    stroke-opacity: 0.7;
}
.motion.ch-ready .ch--tech-per-issue:not([data-seen~="remote"]) .pi-arc {
    stroke-dashoffset: 1;
}
.motion .ch--tech-per-issue .pi-arc {
    transition: stroke-dashoffset 1.6s var(--ease-in-out) 0.2s;
}
.ch--tech-per-issue .pi-pulse {
    offset-rotate: 0deg;
    offset-distance: 56%;
}
.ch--tech-per-issue .pi-pulse--2 {
    display: none;
}
.motion .ch--tech-per-issue[data-seen~="remote"] .pi-pulse {
    display: inline;
    animation: pi-pulse 2.6s linear 1.2s infinite both;
}
.motion .ch--tech-per-issue[data-seen~="remote"] .pi-pulse--2 {
    animation-delay: 2.5s;
}
@keyframes pi-pulse {
    0% { offset-distance: 0%; opacity: 0; }
    8% { opacity: 1; }
    90% { opacity: 1; }
    100% { offset-distance: 100%; opacity: 0; }
}
.ch--tech-per-issue :is(.pi-ring, .pi-rin) {
    transform-box: view-box;
    transform-origin: 808px 572px;
}
.ch--tech-per-issue .pi-rin {
    transform-origin: 1494px 433px;
}
.motion .ch--tech-per-issue[data-seen~="remote"] :is(.pi-ring, .pi-rin) {
    animation: pi-ring 2.6s var(--ease) infinite both;
}
.motion .ch--tech-per-issue .pi-ring--2,
.motion .ch--tech-per-issue .pi-rin--2 {
    animation-delay: 0.35s;
}
.motion .ch--tech-per-issue .pi-ring--3,
.motion .ch--tech-per-issue .pi-rin--3 {
    animation-delay: 0.7s;
}
@keyframes pi-ring {
    0% { opacity: 0; scale: 0.6; }
    30% { opacity: 0.9; }
    100% { opacity: 0; scale: 1.15; }
}

/* ---- the life of the place, only with motion, resting while the section is off screen */
.motion .ch--tech-per-issue .pi-beacon {
    animation: pi-blink 1.6s steps(1) infinite;
}
@keyframes pi-blink {
    50% { opacity: 0.2; }
}
.motion .ch--tech-per-issue .pi-tv {
    animation: pi-tv 2.8s steps(1) infinite;
}
@keyframes pi-tv {
    0% { opacity: 1; }
    22% { opacity: 0.6; }
    38% { opacity: 0.95; }
    61% { opacity: 0.7; }
    80% { opacity: 1; }
}
.motion .ch--tech-per-issue .pi-shim {
    animation: pi-shim 3.6s ease-in-out infinite alternate;
}
.motion .ch--tech-per-issue .pi-shim--2 {
    animation-duration: 2.6s;
    animation-delay: -1.3s;
}
@keyframes pi-shim {
    to { translate: 6px 0; opacity: 0.45; }
}
.motion .ch--tech-per-issue .pi-mist {
    animation: pi-mist 28s ease-in-out infinite alternate;
}
@keyframes pi-mist {
    to { translate: 150px 0; }
}
.motion .ch--tech-per-issue .pi-fly1 { animation: pi-fly 9s ease-in-out infinite alternate; }
.motion .ch--tech-per-issue .pi-fly2 { animation: pi-fly 11s ease-in-out -4s infinite alternate-reverse; }
.motion .ch--tech-per-issue .pi-fly3 { animation: pi-fly 13s ease-in-out -7s infinite alternate; }
@keyframes pi-fly {
    0% { translate: 0 0; opacity: 0.2; }
    35% { opacity: 1; }
    60% { opacity: 0.4; }
    100% { translate: 22px -14px; opacity: 0.9; }
}

/* ---- with the scroll: the ride, the camera that follows it, the houses it passes, and the moon climbing */
@supports (animation-timeline: view()) {
    /* the page's scroll padding would otherwise inset this timeline by the header, starting the ride before the
       stage has settled; without it, contain 0% is the section's top meeting the top of the screen */
    .motion .ch--tech-per-issue {
        view-timeline-inset: 0px;
    }
    .motion .ch--tech-per-issue .pi-follow {
        animation: pi-follow linear both;
    }
    .motion .ch--tech-per-issue .pi-scoot {
        animation: pi-ride linear both;
    }
    .motion .ch--tech-per-issue .pi-scoot__in {
        animation: pi-size linear both;
    }
    .motion .ch--tech-per-issue .pi-beam {
        animation: pi-aim linear both;
    }
    .motion .ch--tech-per-issue :is(.pi-follow, .pi-scoot, .pi-scoot__in, .pi-beam) {
        animation-timeline: --ch;
        animation-range: contain 0% contain var(--pi-ride);
    }
    .motion .ch--tech-per-issue .pi-z--ride {
        animation: pi-pass linear both;
        animation-timeline: --ch;
        animation-range: contain calc(var(--pi-ride) * var(--at)) contain calc(var(--pi-ride) * var(--at) + 3vh);
    }
    .motion .ch--tech-per-issue .ly--moon {
        animation: pi-moon linear both;
        animation-timeline: --ch;
        animation-range: contain 0% contain 100%;
    }
    @keyframes pi-ride {
        from { offset-distance: 0%; }
        to { offset-distance: 100%; }
    }
    @keyframes pi-follow {
        0% { translate: clamp(var(--pi-lo), (0.5 - var(--f0)) * 100%, var(--pi-hi)) 0; }
        10% { translate: clamp(var(--pi-lo), (0.5 - var(--f1)) * 100%, var(--pi-hi)) 0; }
        20% { translate: clamp(var(--pi-lo), (0.5 - var(--f2)) * 100%, var(--pi-hi)) 0; }
        30% { translate: clamp(var(--pi-lo), (0.5 - var(--f3)) * 100%, var(--pi-hi)) 0; }
        40% { translate: clamp(var(--pi-lo), (0.5 - var(--f4)) * 100%, var(--pi-hi)) 0; }
        50% { translate: clamp(var(--pi-lo), (0.5 - var(--f5)) * 100%, var(--pi-hi)) 0; }
        60% { translate: clamp(var(--pi-lo), (0.5 - var(--f6)) * 100%, var(--pi-hi)) 0; }
        70% { translate: clamp(var(--pi-lo), (0.5 - var(--f7)) * 100%, var(--pi-hi)) 0; }
        80% { translate: clamp(var(--pi-lo), (0.5 - var(--f8)) * 100%, var(--pi-hi)) 0; }
        90% { translate: clamp(var(--pi-lo), (0.5 - var(--f9)) * 100%, var(--pi-hi)) 0; }
        100% { translate: clamp(var(--pi-lo), (0.5 - var(--f10)) * 100%, var(--pi-hi)) 0; }
    }
    @keyframes pi-size {
        0% { scale: var(--k0); }
        10% { scale: var(--k1); }
        20% { scale: var(--k2); }
        30% { scale: var(--k3); }
        40% { scale: var(--k4); }
        50% { scale: var(--k5); }
        60% { scale: var(--k6); }
        70% { scale: var(--k7); }
        80% { scale: var(--k8); }
        90% { scale: var(--k9); }
        100% { scale: var(--k10); }
    }
    @keyframes pi-aim {
        0% { rotate: calc(var(--a0) * 0.7); }
        10% { rotate: calc(var(--a1) * 0.7); }
        20% { rotate: calc(var(--a2) * 0.7); }
        30% { rotate: calc(var(--a3) * 0.7); }
        40% { rotate: calc(var(--a4) * 0.7); }
        50% { rotate: calc(var(--a5) * 0.7); }
        60% { rotate: calc(var(--a6) * 0.7); }
        70% { rotate: calc(var(--a7) * 0.7); }
        80% { rotate: calc(var(--a8) * 0.7); }
        90% { rotate: calc(var(--a9) * 0.7); }
        100% { rotate: calc(var(--a10) * 0.7); }
    }
    @keyframes pi-pass {
        0% { opacity: 0; }
        40% { opacity: 0.9; }
        55% { opacity: 0.3; }
        100% { opacity: 1; }
    }
    @keyframes pi-moon {
        from { translate: 0 2%; }
        to { translate: 0 -4%; }
    }
}

/* ==========================================================================
   chapter tech/clients
   ========================================================================== */
/* The bay at night: eighteen fishing lamps, one for every client, lit group by group as their names pass, until
   the whole bay glows under the temple and the moon. Without motion every lamp is lit. */
.ch--tech-clients .ch__head {
    align-content: start;
}
.motion .ch--tech-clients .beat {
    width: min(100%, 31rem);
}
/* the names are the content: a manifest in the display face, one name to a line, each with its own lamp */
.ch--tech-clients .bay-names {
    display: grid;
    gap: 6px;
}
.ch--tech-clients .bay-names li {
    position: relative;
    padding-left: 30px;
    color: var(--fg);
    font: 500 clamp(1.3rem, 1.06rem + 0.85vw, 1.8rem)/1.18 var(--display);
    font-stretch: 88%;
    letter-spacing: -0.01em;
}
.ch--tech-clients .bay-names li::before,
.ch--tech-clients .bay-names li::after {
    content: "";
    position: absolute;
    top: 0.59em;
    left: 0;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    border-radius: 50%;
}
.ch--tech-clients .bay-names li::before {
    background: radial-gradient(circle, rgba(255, 214, 107, 0.42) 0 3px, rgba(255, 214, 107, 0) 4px);
}
.ch--tech-clients .bay-names li::after {
    background: radial-gradient(circle, #fff6dc 0 2.5px, #ffd66b 3.5px, rgba(253, 191, 20, 0.38) 5px, rgba(253, 191, 20, 0) 10px);
    transition: opacity 0.8s var(--ease);
}

/* after the last names the whole bay, every lamp lit, holds the screen for a while before the section ends */
@media (prefers-reduced-motion: no-preference) {
    .motion .ch--tech-clients .beats {
        padding-bottom: 100vh;
    }
}
/* on a phone each beat has the lower half of the screen to itself while its lamps catch: the next panel is
   still below the screen then */
@media (max-width: 56em) and (prefers-reduced-motion: no-preference) {
    .motion .ch--tech-clients .beats {
        gap: max(50vh, 380px);
    }
}
/* a phone on its side sees the whole bay at once: the words move right of the temple, over the open sky, the
   moon rises above the frame, its path still on the water, and the panels pack tighter to fit the short screen */
@media (orientation: landscape) and (max-height: 30em) {
    .ch--tech-clients .ch__head {
        max-width: min(26rem, 54%);
        margin-left: auto;
        padding-bottom: 32px;
    }
    .ch--tech-clients .ch__title {
        font-size: 2.6rem;
    }
    .ch--tech-clients .ch__lead {
        font-size: 1.0625rem;
    }
    .ch--tech-clients .bay-moon {
        translate: 0 -64px;
    }
    .motion .ch--tech-clients .beat {
        width: min(100%, 24rem);
        gap: 10px;
        padding: 18px 22px;
    }
    .ch--tech-clients .beat__title {
        font-size: 1.4rem;
    }
    .ch--tech-clients .bay-names {
        gap: 2px;
    }
    .ch--tech-clients .bay-names li {
        font-size: 1.12rem;
    }
}

/* the camera: on a phone it starts close on the temple, then turns to the part of the bay each group is in; on
   a wide screen the whole bay is in view and it only leans toward it, the group on the side away from its panel */
.ch--tech-clients {
    --u: 0.2;
    --zoom: 1.12;
    --zx: 20%;
    --zy: 0%;
}
.ch--tech-clients[data-beat] {
    --zoom: 1.1;
    --zy: 66%;
}
.ch--tech-clients[data-beat="hotels"] { --u: 0.3; --zx: 30%; }
.ch--tech-clients[data-beat="villas"] { --u: 0.72; --zx: 72%; }
.ch--tech-clients[data-beat="dining"] { --u: 0.49; --zx: 49%; }
.ch--tech-clients[data-beat="industry"] { --u: 0.62; --zx: 62%; --zoom: 1; }
@media (min-width: 56.01em) {
    .ch--tech-clients {
        --s: 0.62;
        --pan: 0.3;
        --zoom: 1;
    }
    .ch--tech-clients[data-beat] {
        --zoom: 1.05;
    }
    .ch--tech-clients[data-beat="hotels"] { --s: 0.36; }
    .ch--tech-clients[data-beat="villas"] { --s: 0.66; }
    .ch--tech-clients[data-beat="dining"] { --s: 0.38; }
    .ch--tech-clients[data-beat="industry"] { --s: 0.64; }
}

/* ---- lamps: dark until their group's beat, then each catches in turn, as a pressure lamp does, and its light
   runs down the water toward the hill. The lamp beside each name in the panel catches with it. The states set
   the animation by its longhands, so the delay each lamp takes from its own class still holds. */
.ch--tech-clients .bay-z {
    transition: opacity 0.8s var(--ease);
}
.ch--tech-clients .bay-water {
    transform-box: fill-box;
    transform-origin: 50% 0;
}
.motion.ch-ready .ch--tech-clients:not([data-seen~="hotels"]) .bay-z--hotels,
.motion.ch-ready .ch--tech-clients:not([data-seen~="villas"]) .bay-z--villas,
.motion.ch-ready .ch--tech-clients:not([data-seen~="dining"]) .bay-z--dining,
.motion.ch-ready .ch--tech-clients:not([data-seen~="industry"]) .bay-z--industry,
.motion.ch-ready .ch--tech-clients:not([data-seen~="hotels"]) [data-beat="hotels"] li::after,
.motion.ch-ready .ch--tech-clients:not([data-seen~="villas"]) [data-beat="villas"] li::after,
.motion.ch-ready .ch--tech-clients:not([data-seen~="dining"]) [data-beat="dining"] li::after,
.motion.ch-ready .ch--tech-clients:not([data-seen~="industry"]) [data-beat="industry"] li::after {
    opacity: 0;
}
.motion.ch-ready .ch--tech-clients[data-seen~="hotels"] .bay-z--hotels,
.motion.ch-ready .ch--tech-clients[data-seen~="villas"] .bay-z--villas,
.motion.ch-ready .ch--tech-clients[data-seen~="dining"] .bay-z--dining,
.motion.ch-ready .ch--tech-clients[data-seen~="industry"] .bay-z--industry {
    animation-name: bay-on;
    animation-duration: 1.5s;
    animation-timing-function: var(--ease);
    animation-fill-mode: both;
}
.motion.ch-ready .ch--tech-clients[data-seen~="hotels"] .bay-water.bay-z--hotels,
.motion.ch-ready .ch--tech-clients[data-seen~="villas"] .bay-water.bay-z--villas,
.motion.ch-ready .ch--tech-clients[data-seen~="dining"] .bay-water.bay-z--dining,
.motion.ch-ready .ch--tech-clients[data-seen~="industry"] .bay-water.bay-z--industry {
    animation-name: bay-pour;
    animation-duration: 2s;
}
.motion.ch-ready .ch--tech-clients[data-seen~="hotels"] [data-beat="hotels"] li::after,
.motion.ch-ready .ch--tech-clients[data-seen~="villas"] [data-beat="villas"] li::after,
.motion.ch-ready .ch--tech-clients[data-seen~="dining"] [data-beat="dining"] li::after,
.motion.ch-ready .ch--tech-clients[data-seen~="industry"] [data-beat="industry"] li::after {
    animation-name: bay-on;
    animation-duration: 1.5s;
    animation-timing-function: var(--ease);
    animation-fill-mode: both;
}
.ch--tech-clients .bay-d1,
.ch--tech-clients .bay-names li:nth-child(2)::after { animation-delay: 0.28s; }
.ch--tech-clients .bay-d2,
.ch--tech-clients .bay-names li:nth-child(3)::after { animation-delay: 0.56s; }
.ch--tech-clients .bay-d3,
.ch--tech-clients .bay-names li:nth-child(4)::after { animation-delay: 0.84s; }
.ch--tech-clients .bay-d4,
.ch--tech-clients .bay-names li:nth-child(5)::after { animation-delay: 1.12s; }
.ch--tech-clients .bay-d5,
.ch--tech-clients .bay-names li:nth-child(6)::after { animation-delay: 1.4s; }
.ch--tech-clients .bay-d6,
.ch--tech-clients .bay-names li:nth-child(7)::after { animation-delay: 1.68s; }
@keyframes bay-on {
    0% { opacity: 0; }
    8% { opacity: 0.9; }
    14% { opacity: 0.15; }
    24% { opacity: 1; }
    32% { opacity: 0.5; }
    46%, 100% { opacity: 1; }
}
@keyframes bay-pour {
    0%, 14% { opacity: 0; scale: 1 0.05; }
    40% { opacity: 1; }
    100% { opacity: 1; scale: 1 1; }
}
/* the last group lit, the whole bay warms, slowly, after its lamps have caught */
.motion.ch-ready .ch--tech-clients[data-seen~="industry"] .bay-glow.bay-z--industry {
    animation-name: bay-warm;
    animation-duration: 3.4s;
    animation-delay: 0.6s;
}
@keyframes bay-warm {
    from { opacity: 0; }
}
/* the ring of light a lamp sends over the water as it catches, seen only once, and only with motion */
.ch--tech-clients .bay-ring {
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
}
.motion.ch-ready .ch--tech-clients[data-seen~="hotels"] .bay-ring--hotels,
.motion.ch-ready .ch--tech-clients[data-seen~="villas"] .bay-ring--villas,
.motion.ch-ready .ch--tech-clients[data-seen~="dining"] .bay-ring--dining,
.motion.ch-ready .ch--tech-clients[data-seen~="industry"] .bay-ring--industry {
    animation-name: bay-ring;
    animation-duration: 2.6s;
    animation-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1);
    animation-fill-mode: both;
}
@keyframes bay-ring {
    0%, 10% { opacity: 0; scale: 0.3; }
    20% { opacity: 0.85; }
    70%, 100% { opacity: 0; scale: 2.2; }
}

/* ---- the life of the bay, only with motion, resting while the section is off screen */
.ch--tech-clients :is(.bay-bob, .bay-shim) {
    transform-box: fill-box;
}
.motion .ch--tech-clients .bay-bob {
    transform-origin: 50% 90%;
    animation: bay-bob 5.6s ease-in-out infinite;
}
.motion .ch--tech-clients .bay-bob2 { animation-duration: 6.9s; animation-delay: -2.3s; }
.motion .ch--tech-clients .bay-bob3 { animation-duration: 4.8s; animation-delay: -3.9s; }
@keyframes bay-bob {
    0%, 100% { translate: 0 0; rotate: -1.3deg; }
    50% { translate: 0 2.4px; rotate: 1.5deg; }
}
.motion .ch--tech-clients .bay-shim {
    transform-origin: 50% 0;
    animation: bay-shim 2.6s ease-in-out infinite alternate;
}
.motion .ch--tech-clients .bay-shim2 { animation-duration: 3.3s; animation-delay: -1.2s; }
.motion .ch--tech-clients .bay-shim3 { animation-duration: 2.2s; animation-delay: -0.7s; }
@keyframes bay-shim {
    0% { scale: 1 1; opacity: 1; }
    50% { scale: 0.7 1.04; opacity: 0.7; }
    100% { scale: 1.14 0.96; opacity: 0.95; }
}
.motion .ch--tech-clients .bay-gl {
    animation: bay-glint 3.4s ease-in-out infinite alternate;
}
.motion .ch--tech-clients .bay-gl2 { animation-duration: 2.7s; animation-delay: -1.1s; }
.motion .ch--tech-clients .bay-gl3 { animation-duration: 4.1s; animation-delay: -2.2s; }
@keyframes bay-glint {
    to { opacity: 0.3; }
}
.ch--tech-clients .bay-spark {
    opacity: 0.3;
}
.motion .ch--tech-clients .bay-spark {
    animation: bay-spark 3.2s ease-in-out infinite;
}
.motion .ch--tech-clients .bay-spark2 { animation-duration: 4.1s; animation-delay: -1.4s; }
.motion .ch--tech-clients .bay-spark3 { animation-duration: 2.7s; animation-delay: -2.2s; }
@keyframes bay-spark {
    0%, 100% { opacity: 0.04; }
    50% { opacity: 0.8; }
}
.motion .ch--tech-clients .bay-swell {
    animation: bay-swell 11s ease-in-out infinite alternate;
}
.motion .ch--tech-clients .bay-swell2 {
    animation-duration: 14s;
    animation-direction: alternate-reverse;
}
@keyframes bay-swell {
    to { translate: -24px 0; }
}
.motion .ch--tech-clients .bay-surf {
    animation: bay-surf 4.4s ease-in-out infinite;
}
.motion .ch--tech-clients .bay-surf2 {
    animation-delay: -2.2s;
}
@keyframes bay-surf {
    0%, 100% { opacity: 0.12; translate: 4px 0; }
    45% { opacity: 0.9; translate: 0 0; }
}
.motion .ch--tech-clients .bay-shrine {
    animation: bay-shrine 2.4s ease-in-out infinite alternate;
}
@keyframes bay-shrine {
    to { opacity: 0.55; }
}

/* ---- the night goes on while the section is read: the moon climbs, the haze over the horizon thins, the stars
   come out and the moon's path on the water brightens; and the eye rises over the bay, the hill we stand on
   sinking below it faster than the boats */
@supports (animation-timeline: view()) {
    .motion .ch--tech-clients :is(.ly--moon, .ly--haze, .ly--stars, .ly--path, .ly--fore, .ly--boats) {
        animation: bay-climb linear both;
        animation-timeline: --ch;
        animation-range: contain 0% contain 100%;
    }
    .motion .ch--tech-clients .ly--haze { animation-name: bay-thin; }
    .motion .ch--tech-clients .ly--stars { animation-name: bay-stars; animation-range: contain 0% contain 70%; }
    .motion .ch--tech-clients .ly--path { animation-name: bay-path; animation-range: contain 0% contain 60%; }
    .motion .ch--tech-clients .ly--fore { animation-name: bay-sink; }
    .motion .ch--tech-clients .ly--boats { animation-name: bay-settle; }
    @keyframes bay-climb {
        to { translate: 0 -3.5%; }
    }
    @keyframes bay-sink {
        to { translate: 0 3.5%; }
    }
    @keyframes bay-settle {
        to { translate: 0 1%; }
    }
    @keyframes bay-thin {
        to { opacity: 0.3; }
    }
    @keyframes bay-stars {
        from { opacity: 0.45; }
    }
    @keyframes bay-path {
        from { opacity: 0.6; }
    }
}

/* ==========================================================================
   chapter tech/team
   ========================================================================== */
/* The deepest part of the night: the J of the mark rises over a meru, one star for each person. At every beat
   the dome of stars rises a step, that beat's stars come up and bloom, and gold lines draw to them from the stars
   named before; on the last beat the camera draws back to the whole J, a light runs through it and a scooter sets
   off for a site. Without motion the J stands whole and lit, the dome at its last place. */

/* ---- the words: names as titles, each with a small gold star; the role in gold, the bio in full ink. The panels
   are a shade denser than elsewhere, so the gold lines of the J passing behind them do not show through the words. */
.ch--tech-team {
    --panel: rgba(9, 16, 26, 0.9);
}
.ch--tech-team .crew {
    display: grid;
    gap: 22px 28px;
}
.ch--tech-team .crew__name {
    display: flex;
    align-items: center;
    gap: 0.36em;
    font: 600 clamp(1.5rem, 1.12rem + 1vw, 2.05rem)/1.05 var(--display);
    letter-spacing: -0.012em;
}
.ch--tech-team .crew__name::before {
    content: "";
    flex: none;
    width: 0.46em;
    height: 0.46em;
    background: var(--gold-soft);
    clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
}
.ch--tech-team .crew__role {
    margin-top: 6px;
    color: var(--accent);
    font-weight: 500;
    line-height: 1.38;
}
.ch--tech-team .crew__bio {
    margin-top: 10px;
    line-height: 1.55;
}
/* the note closes the team on a beat of its own, one sentence a little larger than the bios */
.ch--tech-team .crew__note {
    font-size: clamp(1.0625rem, 0.98rem + 0.32vw, 1.25rem);
    line-height: 1.55;
    text-wrap: pretty;
}
/* on a phone the panels stay compact, so the stars of their beat rise clear below them: two or three people
   stand in rows, the role beside the name where it fits */
@media (max-width: 40em) {
    .ch--tech-team .beat {
        padding: 22px 20px 24px;
    }
    .ch--tech-team .crew--rows {
        row-gap: 14px;
    }
    .ch--tech-team .crew--rows .crew__p {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 2px 14px;
    }
    .ch--tech-team .crew--rows .crew__role {
        margin-top: 0;
    }
    .ch--tech-team .crew__bio {
        margin-top: 6px;
        line-height: 1.5;
    }
}
@media (min-width: 40.01em) {
    .ch--tech-team .crew--rows {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .ch--tech-team .crew--three {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 24px 22px;
    }
}
@media (min-width: 56.01em) {
    .ch--tech-team .beat:is([data-beat="jacky"], [data-beat="irene"], [data-beat="site"]) {
        width: min(100%, 27rem);
    }
    .ch--tech-team .beat[data-beat="remote"] {
        width: min(100%, 21rem);
    }
    .ch--tech-team .beat[data-beat="leads"] {
        width: min(100%, 31rem);
    }
}

/* ---- the opening screen: on a phone the title sits high, so the meru and the core of the Milky Way stand clear
   below it; on a wide screen it stands low on the left, over the dark of the ridge */
@media (max-width: 56em) {
    .ch--tech-team .ch__head {
        align-content: start;
    }
    /* the stars of a beat rise below its panel, so the beats stand further apart: the next panel stays below the
       frame while they rise */
    .motion .ch--tech-team .beats {
        gap: max(54vh, 380px);
        padding-bottom: max(72vh, 420px);
    }
}

/* ---- the camera, last state first: the whole J. On a phone it opens on the meru and the Milky Way, then holds
   each beat's stars in the clear two fifths below its panel: close on Jacky, closer on the head of the J, down
   the stem, closer again on the loop, and back for the whole J. --rise carries the dome lower, in units of the
   drawing: far down for the opening, a step higher at every beat until the head of the J clears the top of the
   panels, and back a little for the whole J, its head behind the last panel until the words leave. */
.ch--tech-team {
    --u: 0.6;
    --zx: 60%;
    --zy: 74%;
}
.motion.ch-ready .ch--tech-team:not([data-beat]) {
    --u: 0.77;
    --rise: 560;
}
.ch--tech-team[data-beat="jacky"] {
    --u: 0.695;
    --zoom: 1.1;
    --zx: 65.2%;
    --zy: 68.7%;
    --rise: 300;
}
.ch--tech-team[data-beat="irene"] {
    --u: 0.69;
    --zoom: 1.12;
    --zx: 68.6%;
    --zy: 65.9%;
    --rise: 250;
}
.ch--tech-team[data-beat="remote"] {
    --u: 0.69;
    --zoom: 1.08;
    --zx: 64.1%;
    --zy: 70.4%;
    --rise: 150;
}
.ch--tech-team[data-beat="leads"] {
    --u: 0.606;
    --zoom: 1.06;
    --zx: 58.4%;
    --zy: 64.7%;
    --rise: -110;
}
.ch--tech-team[data-beat="field"] {
    --u: 0.55;
    --zoom: 1.1;
    --zx: 52.9%;
    --zy: 65.4%;
    --rise: -110;
}
.ch--tech-team[data-beat="site"] {
    --u: 0.598;
    --rise: -46;
}
/* a wide screen shows nearly the whole drawing, with the words on the left: the J is drawn a fifth larger about its
   centre and stands a little higher, so it holds the sky over the meru; the camera opens on the meru, comes close
   to each beat's stars in the clear sky right of the words, and draws back for the last */
@media (min-width: 56.01em) {
    .ch--tech-team {
        --u: 0.53;
        --s: 0.64;
        --pan: 0.3;
        --rise: -60;
    }
    .ch--tech-team .ly--j {
        scale: 1.2;
        transform-origin: 60.25% 60.1%;
    }
    .motion.ch-ready .ch--tech-team:not([data-beat]) {
        --u: 0.7;
        --zoom: 1.05;
        --zx: 78%;
        --zy: 92%;
    }
    .ch--tech-team[data-beat="jacky"] {
        --u: 0.6;
        --zoom: 1.12;
        --zx: 66.2%;
        --zy: 54%;
        --rise: 213;
    }
    .ch--tech-team[data-beat="irene"] {
        --u: 0.6;
        --zoom: 1.14;
        --zx: 70.2%;
        --zy: 50%;
        --rise: 146;
    }
    .ch--tech-team[data-beat="remote"] {
        --u: 0.58;
        --zoom: 1.1;
        --zx: 65.5%;
        --zy: 48%;
        --rise: 59;
    }
    .ch--tech-team[data-beat="leads"] {
        --u: 0.56;
        --zoom: 1.08;
        --zx: 58%;
        --zy: 69.6%;
        --rise: -96;
    }
    .ch--tech-team[data-beat="field"] {
        --u: 0.55;
        --zoom: 1.08;
        --zx: 52.1%;
        --zy: 69.2%;
        --rise: -108;
    }
    .ch--tech-team[data-beat="site"] {
        --u: 0.53;
        --zoom: 1;
        --rise: -95;
    }
}
/* a tablet gives the words a narrower column and sets the camera further left, so the loop of the J and its
   names stay clear of the words */
@media (min-width: 56.01em) and (max-width: 75em) {
    .ch--tech-team,
    .ch--tech-team[data-beat] {
        --u: 0.48;
    }
    .motion.ch-ready .ch--tech-team:not([data-beat]) {
        --u: 0.6;
    }
    .ch--tech-team .beat {
        width: min(100%, 28rem);
    }
}
/* a phone on its side shows the drawing's whole width, so the camera cannot turn: it comes a little closer from
   the left instead, which moves the J clear of the words on the left */
@media (max-width: 56em) and (orientation: landscape) {
    .ch--tech-team,
    .ch--tech-team[data-beat],
    .motion.ch-ready .ch--tech-team:not([data-beat]) {
        --zoom: 1.12;
        --zx: 0%;
        --zy: 30%;
    }
    .ch--tech-team .beat {
        width: min(100%, 26rem);
    }
}

/* ---- the dome of the sky: stars, the moon and the J, drawn at their last place and carried by --rise; a unit of
   the dome is a share of the drawing's width, as the drawing is */
.ch--tech-team :is(.ly--dome, .ly--milky) svg {
    overflow: visible;
}
.ch--tech-team .ly--dome {
    translate: 0 calc(var(--rise, 0) * max(0.0625cqw, 0.11111cqh));
}
.motion .ch--tech-team .ly--dome {
    transition: translate 2.2s var(--ease-in-out);
}
/* a wide screen shorter than the drawing loses the top of its sky, and with it the head of the J would pass under
   the header: the dome comes down by most of what is cut, and where the cut is deep the J is drawn a little smaller */
@media (min-width: 56.01em) {
    .ch--tech-team .ly--dome {
        translate: 0 calc(var(--rise, 0) * max(0.0625cqw, 0.11111cqh) + max(0px, 56.25cqw - 100cqh) * 0.74);
    }
}
@media (min-width: 56.01em) and (min-aspect-ratio: 2/1) {
    .ch--tech-team .ly--j {
        scale: 1.05;
    }
}

/* ---- the J: lines in gold, drawn as a beat names their stars, the point of the pen running ahead of each */
.ch--tech-team .tm-ln path,
.ch--tech-team .tm-run path {
    fill: none;
    stroke-dasharray: 1;
    stroke-linecap: round;
}
.ch--tech-team .tm-ln__glow path {
    stroke: #fdbf14;
    stroke-width: 7;
    stroke-opacity: 0.15;
}
.ch--tech-team .tm-ln__core path {
    stroke: #ffd66b;
    stroke-width: 2;
    stroke-opacity: 0.94;
}
.ch--tech-team .tm-ln__spark path,
.ch--tech-team .tm-run__core {
    stroke: #fff8e4;
    stroke-width: 3.4;
}
.ch--tech-team .tm-run__glow {
    stroke: #ffd66b;
    stroke-width: 13;
    stroke-opacity: 0.3;
}
.ch--tech-team .tm-ln__spark path,
.ch--tech-team .tm-run path {
    stroke-dasharray: 0.06 2;
    stroke-dashoffset: 0.06;
    opacity: 0;
}
.ch--tech-team .tm-run path {
    stroke-dasharray: 0.045 2;
    stroke-dashoffset: 0.045;
}
.ch--tech-team .tm-c {
    fill: #fff3d6;
    opacity: 0.85;
}
.ch--tech-team .tm-core {
    fill: #fff8e4;
}
.ch--tech-team .tm-spk {
    fill: #ffe7a6;
}
.ch--tech-team .tm-bloom {
    opacity: 0;
}
.ch--tech-team :is(.tm-pz, .tm-bloom, .tm-s, .tm-glow, .tm-spk) {
    transform-box: fill-box;
    transform-origin: center;
}
/* each name beside its star, with a soft dark edge so it reads over the glow of the star */
.ch--tech-team .tm-name {
    fill: #fff1d6;
    font: 600 18px/1 var(--text);
    letter-spacing: 0.01em;
    dominant-baseline: central;
    paint-order: stroke;
    stroke: #060e18;
    stroke-opacity: 0.75;
    stroke-width: 5px;
    stroke-linejoin: round;
}
/* on a phone the stars of the people are drawn larger and the lines a little stronger, so the J reads in its
   narrow frame; the palm by the meru goes, so the meru stands alone. A still phone frame shows the J whole, and
   its panels carry the names. */
@media (max-width: 56em) {
    .ch--tech-team .tm-pz {
        scale: 1.2;
    }
    .ch--tech-team .tm-ln__core path {
        stroke-width: 2.5;
    }
    .ch--tech-team .tm-ln__glow path {
        stroke-width: 9;
    }
    .ch--tech-team .tm-name {
        font-size: 20px;
    }
    .ch--tech-team .tm-palm,
    :root:not(.motion) .ch--tech-team .tm-name {
        display: none;
    }
}
/* the moon balances the opening of a wide sky; where the words take more of the width it would pass behind them,
   so there the sky opens without it */
@media (max-width: 75em) {
    .ch--tech-team .tm-moon {
        display: none;
    }
}

/* ---- the states, only with motion: a star waits as one more faint star of the sky until its beat */
.motion .ch--tech-team .tm-ln :is(.tm-ln__glow, .tm-ln__core) path {
    transition: stroke-dashoffset 0.6s var(--ease) var(--d, 0s), opacity 0.2s linear var(--d, 0s);
}
.motion .ch--tech-team .tm-c,
.motion .ch--tech-team .tm-p :is(.tm-glow, .tm-spk, .tm-name) {
    transition: opacity 0.9s var(--ease) var(--d, 0s);
}
.motion.ch-ready .ch--tech-team:not([data-seen~="irene"]) .tm-ln--irene path,
.motion.ch-ready .ch--tech-team:not([data-seen~="remote"]) .tm-ln--remote path,
.motion.ch-ready .ch--tech-team:not([data-seen~="leads"]) .tm-ln--leads path,
.motion.ch-ready .ch--tech-team:not([data-seen~="field"]) .tm-ln--field path {
    stroke-dashoffset: 1;
    opacity: 0;
    transition: none;
}
.motion.ch-ready .ch--tech-team:not([data-seen~="irene"]) .tm-c--irene,
.motion.ch-ready .ch--tech-team:not([data-seen~="remote"]) .tm-c--remote,
.motion.ch-ready .ch--tech-team:not([data-seen~="leads"]) .tm-c--leads,
.motion.ch-ready .ch--tech-team:not([data-seen~="field"]) .tm-c--field {
    opacity: 0.3;
    transition: none;
}
.motion.ch-ready .ch--tech-team:not([data-seen~="jacky"]) .tm-p--jacky .tm-s,
.motion.ch-ready .ch--tech-team:not([data-seen~="irene"]) .tm-p--irene .tm-s,
.motion.ch-ready .ch--tech-team:not([data-seen~="remote"]) .tm-p--remote .tm-s,
.motion.ch-ready .ch--tech-team:not([data-seen~="leads"]) .tm-p--leads .tm-s,
.motion.ch-ready .ch--tech-team:not([data-seen~="field"]) .tm-p--field .tm-s {
    opacity: 0.5;
    scale: 0.4;
}
.motion.ch-ready .ch--tech-team:not([data-seen~="jacky"]) .tm-p--jacky :is(.tm-glow, .tm-spk, .tm-name),
.motion.ch-ready .ch--tech-team:not([data-seen~="irene"]) .tm-p--irene :is(.tm-glow, .tm-spk, .tm-name),
.motion.ch-ready .ch--tech-team:not([data-seen~="remote"]) .tm-p--remote :is(.tm-glow, .tm-spk, .tm-name),
.motion.ch-ready .ch--tech-team:not([data-seen~="leads"]) .tm-p--leads :is(.tm-glow, .tm-spk, .tm-name),
.motion.ch-ready .ch--tech-team:not([data-seen~="field"]) .tm-p--field :is(.tm-glow, .tm-spk, .tm-name) {
    opacity: 0;
    transition: none;
}
/* on its beat a star blooms and flares as the line reaches it, then settles; the spark runs ahead of the line */
.motion.ch-ready .ch--tech-team[data-seen~="jacky"] .tm-p--jacky .tm-s,
.motion.ch-ready .ch--tech-team[data-seen~="irene"] .tm-p--irene .tm-s,
.motion.ch-ready .ch--tech-team[data-seen~="remote"] .tm-p--remote .tm-s,
.motion.ch-ready .ch--tech-team[data-seen~="leads"] .tm-p--leads .tm-s,
.motion.ch-ready .ch--tech-team[data-seen~="field"] .tm-p--field .tm-s {
    animation: tm-flare 1.7s var(--ease) var(--d, 0s) both;
}
@keyframes tm-flare {
    0% { opacity: 0.5; scale: 0.4; }
    38% { opacity: 1; scale: 1.55; }
    100% { opacity: 1; scale: 1; }
}
.motion.ch-ready .ch--tech-team[data-seen~="jacky"] .tm-p--jacky .tm-bloom,
.motion.ch-ready .ch--tech-team[data-seen~="irene"] .tm-p--irene .tm-bloom,
.motion.ch-ready .ch--tech-team[data-seen~="remote"] .tm-p--remote .tm-bloom,
.motion.ch-ready .ch--tech-team[data-seen~="leads"] .tm-p--leads .tm-bloom,
.motion.ch-ready .ch--tech-team[data-seen~="field"] .tm-p--field .tm-bloom {
    animation: tm-bloom 1.8s var(--ease) var(--d, 0s) both;
}
@keyframes tm-bloom {
    0% { opacity: 0; scale: 0.25; }
    26% { opacity: 1; }
    100% { opacity: 0; scale: 1.15; }
}
.motion.ch-ready .ch--tech-team[data-seen~="irene"] .tm-ln--irene .tm-ln__spark path,
.motion.ch-ready .ch--tech-team[data-seen~="remote"] .tm-ln--remote .tm-ln__spark path,
.motion.ch-ready .ch--tech-team[data-seen~="leads"] .tm-ln--leads .tm-ln__spark path,
.motion.ch-ready .ch--tech-team[data-seen~="field"] .tm-ln--field .tm-ln__spark path {
    animation: tm-spark 0.6s var(--ease) var(--d, 0s) both;
}
@keyframes tm-spark {
    0% { stroke-dashoffset: 0.06; opacity: 0; }
    6% { opacity: 1; }
    84% { opacity: 1; }
    100% { stroke-dashoffset: -0.94; opacity: 0; }
}
/* the last beat: a light climbs the whole J in one stroke */
.motion.ch-ready .ch--tech-team[data-seen~="site"] .tm-run path {
    animation: tm-run 3.4s var(--ease-in-out) 0.7s both;
}
@keyframes tm-run {
    0% { stroke-dashoffset: 0.045; opacity: 0; }
    4% { opacity: 1; }
    94% { opacity: 1; }
    100% { stroke-dashoffset: -0.955; opacity: 0; }
}
/* on a phone a name stands beside its star while its beat is current, and the founders' names stay on, a little
   softer, while Mesha joins them below the panel. The last beat names everyone below its panel; the founders'
   names come up at the head of the J as the last words leave it. */
@media (max-width: 56em) {
    .motion.ch-ready .ch--tech-team[data-beat] .tm-p .tm-name {
        opacity: 0;
        transition: opacity 0.5s var(--ease);
    }
    .motion.ch-ready .ch--tech-team[data-beat="jacky"] .tm-p--jacky .tm-name,
    .motion.ch-ready .ch--tech-team[data-beat="irene"] .tm-p--irene .tm-name,
    .motion.ch-ready .ch--tech-team[data-beat="remote"] .tm-p--remote .tm-name,
    .motion.ch-ready .ch--tech-team[data-beat="leads"] .tm-p--leads .tm-name,
    .motion.ch-ready .ch--tech-team[data-beat="field"] .tm-p--field .tm-name {
        opacity: 1;
        transition: opacity 0.9s var(--ease) var(--d, 0s);
    }
    .motion.ch-ready .ch--tech-team[data-beat="site"] .tm-p:not(.tm-p--jacky, .tm-p--irene) .tm-name {
        opacity: 1;
        transition: opacity 0.9s var(--ease) 0.4s;
    }
    .motion.ch-ready .ch--tech-team[data-beat="irene"] .tm-p--jacky .tm-name,
    .motion.ch-ready .ch--tech-team[data-beat="remote"] :is(.tm-p--jacky, .tm-p--irene) .tm-name {
        opacity: 0.6;
    }
}
@supports (animation-timeline: view()) {
    @media (max-width: 56em) {
        .motion.ch-ready .ch--tech-team[data-beat="site"] :is(.tm-p--jacky, .tm-p--irene) .tm-name {
            animation: tm-late linear both;
            animation-timeline: --ch;
            animation-range: contain 95.5% contain 99.5%;
        }
    }
    @keyframes tm-late {
        from { opacity: 0; }
        to { opacity: 1; }
    }
}

/* ---- the life of the night, only with motion, resting while the section is off screen */
.motion .ch--tech-team .tm-glow {
    animation: tm-breathe 5.2s ease-in-out var(--tw, 0s) infinite;
}
@keyframes tm-breathe {
    50% { scale: 1.16; }
}
.motion .ch--tech-team .tm-spk {
    animation: tm-glint 3.8s ease-in-out var(--tw, 0s) infinite;
}
@keyframes tm-glint {
    0%, 100% { scale: 1; rotate: 0deg; }
    45% { scale: 0.72; rotate: 6deg; }
}
.motion .ch--tech-team .tm-shoot {
    animation-duration: 11s;
}
.motion .ch--tech-team .tm-lamps {
    animation: tm-lamp 4.2s ease-in-out infinite alternate;
}
@keyframes tm-lamp {
    to { opacity: 0.7; }
}
.motion .ch--tech-team .tm-vl {
    animation: tm-lamp 3.1s steps(2) infinite alternate;
}
.motion .ch--tech-team .fly1 { animation: tm-fly 9s ease-in-out infinite alternate; }
.motion .ch--tech-team .fly2 { animation: tm-fly 12s ease-in-out -4s infinite alternate-reverse; }
.motion .ch--tech-team .fly3 { animation: tm-fly 14s ease-in-out -8s infinite alternate; }
@keyframes tm-fly {
    0% { translate: 0 0; opacity: 0.15; }
    35% { opacity: 1; }
    60% { opacity: 0.35; }
    100% { translate: 20px -18px; opacity: 0.9; }
}
/* with the last words, on site help, the scooter's lights come round the meru's hill and run along the saddle:
   the team on its way to a site. It is life, not a state, so a still page leaves it out. */
.ch--tech-team .tm-ride {
    opacity: 0;
}
.motion .ch--tech-team[data-seen~="site"] .tm-ride {
    animation: tm-ride 12s linear 0.8s infinite;
}
@keyframes tm-ride {
    0% { translate: 0 0; opacity: 0; }
    6% { opacity: 1; }
    80% { opacity: 1; }
    90%, 100% { translate: -380px 0; opacity: 0; }
}

/* ---- the night deepens while the section is read: the sky keeps turning between the beats, the last light
   leaves the horizon, the Milky Way grows, climbs a little and wheels over */
@supports (animation-timeline: view()) {
    /* the dome turns about a point under the J, so its stars barely drift sideways and stay in their frame */
    .motion .ch--tech-team .ly--dome {
        transform-origin: 60% 140%;
        animation: tm-turn linear both;
        animation-timeline: --ch;
        animation-range: contain 0% contain 100%;
    }
    @keyframes tm-turn {
        from { rotate: -0.8deg; }
    }
    .motion .ch--tech-team .ly--air {
        animation: tm-air linear both;
        animation-timeline: --ch;
        animation-range: contain 0% contain 100%;
    }
    /* the Milky Way wheels about its core behind the meru as the hours of the section pass, from leaning right to
       leaning left over the J, as the sky turns through two and a half hours of the night */
    .motion .ch--tech-team .ly--milky {
        transform-origin: 78.9% 82.7%;
        animation: tm-milky linear both;
        animation-timeline: --ch;
        animation-range: contain 0% contain 100%;
    }
    @keyframes tm-air {
        to { opacity: 0.35; }
    }
    @keyframes tm-milky {
        from { opacity: 0.72; translate: 0 34px; }
        to { rotate: -36deg; }
    }
}

/* ---- a still page: the drawing is a picture behind the opening screen, and its foot fades into the section so
   the panels below begin on the same night */
:root:not(.motion) .ch--tech-team .ch__frame::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 16%;
    background: linear-gradient(rgba(13, 21, 31, 0), var(--sky-a));
    pointer-events: none;
}

/* ==========================================================================
   chapter tech/about
   ========================================================================== */
/* Bali from above at night: the island tilted toward us under the moon over Agung. Each beat lights a part of it;
   without motion every light is on, the coast is traced and the boats are out. */
.ch--tech-about .ch__head {
    align-content: start;
}
.ch--tech-about .beat__text {
    color: var(--fg);
    font: 400 clamp(1.125rem, 1.02rem + 0.4vw, 1.3125rem)/1.55 var(--display);
    text-wrap: pretty;
}
.ch--tech-about .about__office {
    color: var(--fg);
}
/* the words before a value read as plain words, not as small capitals over it */
.ch--tech-about .about__label {
    display: block;
    margin-bottom: 6px;
    color: var(--fg-soft);
    font: 500 1rem/1.4 var(--text);
}
.ch--tech-about .about__addr {
    display: block;
    font: 500 clamp(1.3125rem, 1.08rem + 0.8vw, 1.75rem)/1.3 var(--display);
    letter-spacing: -0.01em;
    text-wrap: balance;
}
.ch--tech-about .facts {
    grid-template-columns: 1fr;
    gap: 16px;
}
.ch--tech-about .facts dt {
    color: var(--fg-soft);
    font: 500 0.9375rem/1.35 var(--text);
    letter-spacing: 0;
    text-transform: none;
}
.ch--tech-about .facts dd {
    margin-top: 3px;
    color: var(--fg);
    font: 600 clamp(1.125rem, 1.02rem + 0.4vw, 1.3125rem)/1.35 var(--display);
}
.ch--tech-about .facts dd.tnum {
    font-size: clamp(1.625rem, 1.2rem + 1.3vw, 2.25rem);
    letter-spacing: 0.01em;
}
.ch--tech-about .group__list {
    gap: 12px;
}
.ch--tech-about .group__list li {
    color: var(--fg);
    font-size: 1.0625rem;
    line-height: 1.5;
}
.ch--tech-about .ab-tag text {
    font-family: var(--display);
}
/* on a phone the opening words rise past the moon: a close shade under each letter keeps them readable there */
.ch--tech-about:not(.sec--day) :is(.ch__title, .ch__lead) {
    text-shadow: 0 1px 3px rgba(6, 11, 18, 0.7), 0 2px 28px rgba(6, 11, 18, 0.75);
}

/* the camera. A still page looks at Denpasar and its lights under the words. With motion a phone opens on
   the moon over Agung, crosses the plains as the towns light up, comes close over Denpasar, steps back for
   the whole south coast and the moon, then goes east to the lighthouse and the boats. A zoom from the foot of
   the frame lifts its subject; one from higher up (the vision) lowers it, clear of a tall panel. On a wide
   screen the whole island stays in view and the camera only leans toward each part. */
.ch--tech-about {
    --u: 0.64;
    --zx: 64%;
    --zy: 100%;
}
@media (max-width: 56em) {
    .ch--tech-about .ch__head {
        padding-top: calc(var(--head-h) + 4vh);
    }
    /* with motion the opening is the moon over Agung: the words sit low, over the dark strait, and leave the
       sky to the moon */
    .motion .ch--tech-about {
        --u: 0.745;
    }
    .motion .ch--tech-about .ch__head {
        align-content: end;
        padding-top: calc(var(--head-h) + 8vh);
    }
    /* compact on a phone, never small: the longest panel leaves the boats in view below it */
    .ch--tech-about .beat {
        gap: 12px;
        padding: 22px;
    }
    .ch--tech-about .group__list {
        gap: 10px;
    }
    .ch--tech-about .group__list li {
        font-size: 1rem;
    }
}
.ch--tech-about[data-beat="found"] { --u: 0.63; --zoom: 1.05; --zx: 63%; }
.ch--tech-about[data-beat="office"] { --u: 0.661; --zoom: 1.15; --zx: 66.1%; }
.ch--tech-about[data-beat="legal"] { --u: 0.74; --zoom: 1; }
.ch--tech-about[data-beat="vision"] { --u: 0.84; --zoom: 1.1; --zx: 80.6%; --zy: 30%; }
.ch--tech-about[data-beat="mission"] { --u: 0.82; --zoom: 1; --zx: 82%; }
@media (min-width: 56.01em) {
    .ch--tech-about {
        --u: 0.7;
        --s: 0.64;
        --pan: 0.3;
    }
    /* a wide screen moves less but still travels: closer over the plains, close over Denpasar with the moon kept
       clear of the bar, back for the whole island, in toward the lighthouse, and a little in over the fleets */
    .ch--tech-about[data-beat="found"] { --zoom: 1.04; }
    .ch--tech-about[data-beat="office"] { --zoom: 1.1; --zy: 40%; }
    .ch--tech-about[data-beat="vision"] { --zoom: 1.08; }
    .ch--tech-about[data-beat="mission"] { --zoom: 1.04; --zy: 100%; }
}

/* ---- the beats: each part stays dark until its beat has been reached */
.ch--tech-about .z {
    transition: opacity 0.9s var(--ease);
}
.motion.ch-ready .ch--tech-about:not([data-seen~="found"]) .zf,
.motion.ch-ready .ch--tech-about:not([data-seen~="office"]) .z-office,
.motion.ch-ready .ch--tech-about:not([data-seen~="legal"]) .z-legal,
.motion.ch-ready .ch--tech-about:not([data-seen~="vision"]) .z-vision,
.motion.ch-ready .ch--tech-about:not([data-seen~="mission"]) .ab-boat {
    opacity: 0;
}
/* found: the towns come on from west to east, each as a bulb catches, and the roads after them */
.ch--tech-about .zf--2 { --d: 0.22s; }
.ch--tech-about .zf--3 { --d: 0.44s; }
.ch--tech-about .zf--4 { --d: 0.66s; }
.ch--tech-about .zf--5 { --d: 0.88s; }
.motion.ch-ready .ch--tech-about[data-seen~="found"] .zf {
    animation: ab-on 1.3s var(--ease) var(--d, 0s) both;
}
@keyframes ab-on {
    0% { opacity: 0; }
    12% { opacity: 0.85; }
    20% { opacity: 0.25; }
    34% { opacity: 1; }
    100% { opacity: 1; }
}
/* office: the pin drops onto Denpasar */
.ch--tech-about .ab-pin,
.ch--tech-about .ab-tag {
    transition: transform 1s var(--ease) 0.2s, opacity 0.8s var(--ease) 0.2s;
}
.motion.ch-ready .ch--tech-about:not([data-seen~="office"]) .ab-pin {
    transform: translateY(-22px);
}
/* the name of the town shows while the camera is over it, never cut by the edge of a phone */
.motion.ch-ready .ch--tech-about:not([data-beat="office"]):not([data-beat="legal"]) .ab-tag {
    opacity: 0;
}
/* legal: the coast draws itself around the island in moonlight, a fine bright line over a soft wide one */
.ch--tech-about .ab-coast {
    fill: none;
    stroke: #dce9ff;
    stroke-opacity: 0.68;
    stroke-width: 3.4;
    stroke-linejoin: round;
}
.ch--tech-about .ab-coast--glow {
    stroke: #8fb6f0;
    stroke-opacity: 0.2;
    stroke-width: 11;
}
.motion .ch--tech-about .ab-coast {
    stroke-dasharray: 1;
    transition: stroke-dashoffset 2.8s var(--ease-in-out) 0.2s;
}
.motion.ch-ready .ch--tech-about:not([data-seen~="legal"]) .ab-coast {
    stroke-dashoffset: 1;
}
/* vision: the lamp catches, then the beam sweeps the strait */
.motion.ch-ready .ch--tech-about[data-seen~="vision"] .ab-lantern {
    animation: ab-on 1.2s var(--ease) both;
}
/* mission: the boats light their lamps one after another, fleet after fleet, from Sanur out to sea */
.ch--tech-about .ab-boat {
    transition: opacity 0.7s var(--ease);
    transition-delay: calc(var(--i, 0) * 0.11s);
}

/* a still page keeps no satellites: standing still they read as a dotted line across the sky */
:root:not(.motion) .ch--tech-about .sats {
    opacity: 0;
}

/* ---- the life of the island, only with motion, resting while the section is off screen */
.ch--tech-about .ab-sweep {
    transform-box: fill-box;
    transform-origin: 0% 50%;
}
.motion .ch--tech-about .ab-sweep {
    animation: ab-sweep 8.5s ease-in-out infinite alternate;
}
@keyframes ab-sweep {
    from { transform: rotate(-17deg); }
    to { transform: rotate(19deg); }
}
.motion .ch--tech-about .ab-bloom {
    animation: ab-bloom 4.6s ease-in-out infinite alternate;
}
@keyframes ab-bloom {
    to { opacity: 0.7; }
}
.motion .ch--tech-about .ab-glint {
    animation: ab-glint 3.4s ease-in-out infinite alternate;
}
.motion .ch--tech-about .ab-glint + .ab-glint {
    animation-delay: -1.7s;
}
@keyframes ab-glint {
    to { opacity: 0.4; translate: 6px 0; }
}
/* the lights of Denpasar and its neighbours breathe a little, as a city does from far off */
.motion .ch--tech-about .zf--3 .ab-dots {
    animation: ab-city 3.2s ease-in-out infinite alternate;
}
@keyframes ab-city {
    to { opacity: 0.74; }
}
/* each fleet's lamps rise and fall a little with the swell, out of step with the others */
.motion .ch--tech-about .ab-fleet {
    animation: ab-swell 3.8s ease-in-out infinite alternate;
}
.motion .ch--tech-about .ab-fleet--2 {
    animation-delay: -1.3s;
}
.motion .ch--tech-about .ab-fleet--3 {
    animation-delay: -2.5s;
}
@keyframes ab-swell {
    to { opacity: 0.7; }
}

/* ---- the night deepens while the section is read: the moon climbs, the sky turns westward and the Milky Way
   grows. Each is a whole layer, so the phone moves them without painting the drawing again */
.ch--tech-about .ly--stars svg {
    overflow: visible;
}
@supports (animation-timeline: view()) {
    .motion .ch--tech-about .ly--moon {
        animation: ab-rise linear both;
        animation-timeline: --ch;
        animation-range: contain 0% contain 100%;
    }
    .motion .ch--tech-about .ly--stars {
        transform-origin: 50% 170%;
        animation: ab-turn linear both;
        animation-timeline: --ch;
        animation-range: contain 0% contain 100%;
    }
    .motion .ch--tech-about .ly--milky {
        animation: ab-deep linear both;
        animation-timeline: --ch;
        animation-range: contain 0% contain 60%;
    }
    @keyframes ab-rise {
        from { translate: 0 2.5%; }
        to { translate: 0 -3.5%; }
    }
    @keyframes ab-turn {
        from { rotate: 1.4deg; }
        to { rotate: -2.2deg; }
    }
    @keyframes ab-deep {
        from { opacity: 0.4; }
    }
}

/* ==========================================================================
   chapter tech/contact
   ========================================================================== */
/* The bay in the deepest night: the fishermen's lamps come on boat after boat, then the bale where Jacky
   answers his phone, and last the first line of dawn behind the island. Without motion every lamp is lit and
   the dawn has come. */
.ch--tech-contact .ch__head {
    align-content: center;
}
@media (min-width: 56.01em) {
    /* on a wide screen the words sit a little higher, in the sky, clear of the palms and the bale */
    .ch--tech-contact .ch__head {
        padding-bottom: 30vh;
    }
}

/* ---- the panels: the ways to reach us, large and easy for a thumb */
.ch--tech-contact .beat {
    width: min(100%, 33rem);
}
@media (min-width: 40.01em) {
    .ch--tech-contact .beat {
        width: fit-content;
        min-width: min(100%, 24rem);
        max-width: 100%;
    }
}
@media (prefers-reduced-motion: no-preference) {
    /* the panels are short: they stand further apart, so only one is on screen when its light comes on, and
       the last one leaves room after it, so the drawing holds still while the dawn comes */
    .motion .ch--tech-contact .beats {
        gap: max(58vh, 400px);
        padding-bottom: 62vh;
    }
}
.ch--tech-contact .ctc-acts {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 14px;
}
.ch--tech-contact .ctc-acts .btn {
    min-height: 58px;
    padding: 15px 26px;
    font-size: 0.9375rem;
    letter-spacing: 0.08em;
}
.ch--tech-contact .ctc-acts .ctc-ico {
    width: 1.35em;
    height: 1.35em;
}
.ch--tech-contact .ctc-acts .btn:hover .ctc-ico {
    transform: none;
}
.ch--tech-contact .ctc-value {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    color: var(--fg);
    font: 600 clamp(1.75rem, 1.2rem + 2vw, 2.5rem)/1.1 var(--display);
    letter-spacing: -0.012em;
    text-decoration: underline;
    text-decoration-color: rgba(253, 191, 20, 0.7);
    text-decoration-thickness: 2px;
    text-underline-offset: 9px;
    white-space: nowrap;
    transition: color 0.25s var(--ease), text-decoration-color 0.25s var(--ease);
}
.ch--tech-contact .ctc-value:hover {
    color: var(--gold-soft);
    text-decoration-color: var(--gold);
}
@media (max-width: 40em) {
    .ch--tech-contact .beat {
        padding: 24px 20px 26px;
    }
    .ch--tech-contact .ctc-acts {
        display: grid;
    }
    .ch--tech-contact .ctc-acts .btn {
        justify-content: flex-start;
        width: 100%;
    }
    .ch--tech-contact .ctc-acts .btn > .ico:last-child {
        margin-left: auto;
    }
}
/* a still page: the panels lie on the plain night below the picture, so they take a lighter tone to stand
   out from it, and stand side by side where there is room */
:root:not(.motion) .ch--tech-contact {
    --panel: rgba(29, 47, 69, 0.8);
}
:root:not(.motion) .ch--tech-contact .beats {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
}

/* the strip of land at the foot of the section rises over the beach as the section leaves: its palms would
   stand in front of the bale, and the beach has palms of its own */
.ch--tech-contact .sec__ground .palms {
    display: none;
}

/* the camera: on a phone it looks at the moon over the bay, then closes in on the boats as their lamps come
   on, keeping the moon clear of the header, crosses the bay to the bale, and turns to the island where the
   dawn begins, with the moon left out of the frame rather than cut by it; on a wide screen the whole bay is
   in view and it only leans a little */
.ch--tech-contact {
    --u: 0.58;
    --zy: 72%;
}
.ch--tech-contact[data-beat="go"] { --u: 0.6; --zx: 60%; --zy: 44%; --zoom: 1.1; }
.ch--tech-contact[data-beat="phone"] { --u: 0.19; --zx: 19%; --zy: 84%; --zoom: 1.14; }
.ch--tech-contact[data-beat="mail"] { --u: 0.72; --zx: 72%; --zy: 60%; --zoom: 1.08; }
@media (min-width: 56.01em) {
    .ch--tech-contact {
        --s: 0.62;
        --pan: 0.35;
    }
    .ch--tech-contact[data-beat] {
        --zoom: 1.04;
    }
}

/* ---- lights: dark until their beat has been reached. The lamps catch with a flicker, boat after boat from
   the nearest out to the farthest; the dawn comes slowly, its line spreading from where the sun will rise */
.ch--tech-contact .z {
    transition: opacity 0.9s var(--ease);
}
.motion.ch-ready .ch--tech-contact:not([data-seen~="go"]) .z-go,
.motion.ch-ready .ch--tech-contact:not([data-seen~="phone"]) .z-phone,
.motion.ch-ready .ch--tech-contact:not([data-seen~="mail"]) .z-mail {
    opacity: 0;
}
.motion.ch-ready .ch--tech-contact[data-seen~="go"] .z-go,
.motion.ch-ready .ch--tech-contact[data-seen~="phone"] .z-phone {
    animation: ctc-on 1.3s var(--ease) both;
}
.motion.ch-ready .ch--tech-contact[data-seen~="go"] .k2 { animation-delay: 0.4s; }
.motion.ch-ready .ch--tech-contact[data-seen~="go"] .k3 { animation-delay: 0.8s; }
.motion.ch-ready .ch--tech-contact[data-seen~="go"] .k4 { animation-delay: 1.15s; }
.motion.ch-ready .ch--tech-contact[data-seen~="go"] .k5 { animation-delay: 1.45s; }
.motion.ch-ready .ch--tech-contact[data-seen~="go"] .k6 { animation-delay: 1.75s; }
.motion.ch-ready .ch--tech-contact[data-seen~="go"] .k7 { animation-delay: 2.05s; }
/* each reflection runs down the water from its boat as the lamp catches */
.ch--tech-contact .ctc-water {
    transform-box: fill-box;
    transform-origin: 50% 0;
}
.motion.ch-ready .ch--tech-contact[data-seen~="go"] .ctc-water {
    animation-name: ctc-unroll;
    animation-duration: 1.9s;
}
@keyframes ctc-unroll {
    0% { opacity: 0; scale: 1 0.12; }
    22% { opacity: 1; }
    100% { opacity: 1; scale: 1 1; }
}
.motion.ch-ready .ch--tech-contact[data-seen~="mail"] .z-mail {
    animation: ctc-dawn 3.2s var(--ease) both;
}
.ch--tech-contact .ctc-line {
    transform-box: view-box;
    transform-origin: 1262px 586px;
}
.motion.ch-ready .ch--tech-contact[data-seen~="mail"] .ctc-line {
    animation: ctc-spread 3.6s var(--ease) both;
}
/* the morning star comes out over the dawn, and keeps a slow twinkle */
.ch--tech-contact .ctc-venus {
    transform-box: fill-box;
    transform-origin: center;
}
.motion .ch--tech-contact .ctc-venus {
    animation: ctc-venus 4.6s ease-in-out infinite alternate;
}
@keyframes ctc-venus {
    to { scale: 0.82; opacity: 0.7; }
}
@keyframes ctc-on {
    0% { opacity: 0; }
    12% { opacity: 0.9; }
    18% { opacity: 0.25; }
    30% { opacity: 1; }
    100% { opacity: 1; }
}
@keyframes ctc-dawn {
    from { opacity: 0; }
}
@keyframes ctc-spread {
    from { scale: 0.12 1; }
}

/* ---- the life of the bay, only with motion, resting while the section is off screen */
.motion .ch--tech-contact .ctc-glint {
    animation-delay: -1.6s;
}
.ch--tech-contact .ctc-refl {
    transform-box: fill-box;
    transform-origin: 50% 0;
}
.motion .ch--tech-contact .ctc-refl {
    animation: ctc-refl 2.4s ease-in-out infinite alternate;
}
.motion .ch--tech-contact :is(.k2, .k4) .ctc-refl {
    animation-duration: 3.1s;
}
@keyframes ctc-refl {
    to { scale: 1.3 1.06; opacity: 0.6; }
}
/* the far reflections only glimmer: one group spans half the bay, so it must not stretch */
.motion .ch--tech-contact .ctc-refl-far {
    animation: ctc-glimmer 2.8s ease-in-out infinite alternate;
}
.motion .ch--tech-contact .k6 .ctc-refl-far {
    animation-delay: -1.3s;
}
@keyframes ctc-glimmer {
    to { opacity: 0.45; }
}
/* the birds of the first light drift across the glow and fade into the dark beyond it */
.motion .ch--tech-contact .ctc-flock {
    animation: ctc-flock 17s linear infinite;
}
@keyframes ctc-flock {
    0% { translate: 150px 6px; opacity: 0; }
    14% { opacity: 1; }
    80% { opacity: 1; }
    100% { translate: -230px -12px; opacity: 0; }
}
.motion .ch--tech-contact .ctc-dawnsea {
    animation: glint 3.6s ease-in-out infinite;
}
.motion .ch--tech-contact .ctc-foam {
    animation: ctc-foam 6.5s ease-in-out infinite alternate;
}
@keyframes ctc-foam {
    to { translate: -10px 2.5px; opacity: 0.55; }
}
.motion .ch--tech-contact .ctc-screen {
    animation: ctc-screen 3.4s ease-in-out infinite alternate;
}
@keyframes ctc-screen {
    to { opacity: 0.6; }
}
.motion .ch--tech-contact .ctc-fly1 { animation: ctc-fly 9s ease-in-out infinite alternate; }
.motion .ch--tech-contact .ctc-fly2 { animation: ctc-fly 11s ease-in-out -4s infinite alternate-reverse; }
.motion .ch--tech-contact .ctc-fly3 { animation: ctc-fly 13s ease-in-out -7s infinite alternate; }
@keyframes ctc-fly {
    0% { translate: 0 0; opacity: 0.2; }
    35% { opacity: 1; }
    60% { opacity: 0.4; }
    100% { translate: 20px -14px; opacity: 0.9; }
}

/* ---- the end of the night while the section is read: the moon climbs on, the boats drift across the bay,
   the stars thin out toward the end, and once the dawn has come it rises a little */
@supports (animation-timeline: view()) {
    .motion .ch--tech-contact .ly--moon {
        animation: ctc-moon linear both;
        animation-timeline: --ch;
        animation-range: contain 0% contain 100%;
    }
    .motion .ch--tech-contact .ly--boats {
        animation: ctc-drift linear both;
        animation-timeline: --ch;
        animation-range: contain 0% contain 100%;
    }
    .motion .ch--tech-contact .ly--stars {
        animation: ctc-stars linear both;
        animation-timeline: --ch;
        animation-range: contain 50% contain 100%;
    }
    .motion .ch--tech-contact .ly--dawn {
        transform-origin: 50% 65.5%;
        animation: ctc-rise linear both;
        animation-timeline: --ch;
        animation-range: contain 55% contain 100%;
    }
    @keyframes ctc-moon {
        to { translate: 0 -4%; }
    }
    @keyframes ctc-drift {
        from { translate: -1.2% 0; }
        to { translate: 1.2% 0; }
    }
    @keyframes ctc-stars {
        to { opacity: 0.55; }
    }
    @keyframes ctc-rise {
        from { scale: 1 0.7; }
    }
}

/* ==========================================================================
   chapter mkt/problems
   ========================================================================== */
/* The way to a villa at sunrise: six places on it where guests get lost, each set right as the morning reaches
   it. Without motion every place is set right: the gold ways, the page loaded, the mist lifted, five stars, the
   light of the answer on the villa, the inquiries pinned. */
.ch--mkt-problems {
    --prb-at: 1.1s;
    --prb-load: 1.9s;
}
.ch--mkt-problems .ch__head {
    align-content: start;
}
.ch--mkt-problems .problem__fix {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: var(--fg);
}
.ch--mkt-problems .problem__fix .ico {
    flex: none;
    margin-top: 0.24em;
    color: #c98f00;
    stroke-width: 2;
}
@media (min-width: 56.01em) {
    .ch--mkt-problems .beat--end {
        width: min(100%, 31rem);
    }
}
@media (max-width: 40em) {
    .ch--mkt-problems .beat {
        gap: 12px;
        padding: 22px 22px 24px;
    }
}

/* with motion the stage covers the section's own sky, and its land runs down to the section's foot, where it
   hazes into the next sky: the shared strip of ground stays behind it */
.motion .ch--mkt-problems > .sec__sky {
    display: none;
}
.motion .ch--mkt-problems > .sec__ground {
    z-index: -2;
}
/* without motion the drawing is a still picture behind the opening screen; its foot fades into the morning, and
   the words stand on the clear sky down to the next section */
:root:not(.motion) .ch--mkt-problems .ch__frame::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 22%;
    background: linear-gradient(rgba(171, 204, 219, 0), var(--sky-m, #abccdb));
}
:root:not(.motion) .ch--mkt-problems > .sec__ground {
    display: none;
}

/* ---- the camera. A phone opens on the hollow under the sun, then goes to each place along the way and comes
   close, the place in the clear part of the frame below the words; a wide screen keeps the whole valley in view,
   drifts along the road with the story and leans in to each place. --zy is the height of the place in the frame,
   the same share on every screen because the drawing always fills the frame's height. The map pin and the house
   stand high, so their zoom grows from the top of the frame and brings them down, clear of the words. */
.ch--mkt-problems {
    --u: 0.5;
    --zx: 50%;
    --zy: 100%;
    --zoom: 1.06;
}
.ch--mkt-problems[data-beat="ota"] { --u: 0.15; --zx: 15%; --zy: 74%; --zoom: 1.12; }
.ch--mkt-problems[data-beat="slow"] { --u: 0.335; --zx: 33.5%; --zy: 67%; --zoom: 1.1; }
.ch--mkt-problems[data-beat="channel"] { --u: 0.512; --zx: 51.2%; --zy: 71%; --zoom: 1.14; }
.ch--mkt-problems[data-beat="reviews"] { --u: 0.625; --zx: 62.5%; --zy: 0%; --zoom: 1.1; }
.ch--mkt-problems[data-beat="ai"] { --u: 0.795; --zx: 79.5%; --zy: 30%; --zoom: 1.08; }
.ch--mkt-problems[data-beat="inquiry"] { --u: 0.93; --zx: 89%; --zy: 74%; --zoom: 1.1; }
/* a still phone shows one picture: the gold ways out of the hollow up to the gate, its pin and its five stars */
@media (max-width: 56em) {
    :root:not(.motion) .ch--mkt-problems {
        --u: 0.553;
        --zx: 55.3%;
        --zoom: 1;
    }
}
@media (min-width: 56.01em) {
    /* the opening looks a little right of the middle, so the garden at the end of the way is whole */
    .ch--mkt-problems {
        --u: 0.667;
        --s: 0.5;
        --pan: 0.15;
        --zoom: 1;
    }
    .ch--mkt-problems[data-beat] {
        --zoom: 1.1;
    }
}

/* ---- the morning reaching each place: a pool of sun opens on it as its words arrive */
.ch--mkt-problems .prb-sunlit {
    transition: opacity 1.6s var(--ease) calc(var(--prb-at) - 0.4s);
}
.motion.ch-ready .ch--mkt-problems:not([data-seen~="ota"]) .prb-sunlit--1,
.motion.ch-ready .ch--mkt-problems:not([data-seen~="slow"]) .prb-sunlit--2,
.motion.ch-ready .ch--mkt-problems:not([data-seen~="channel"]) .prb-sunlit--3,
.motion.ch-ready .ch--mkt-problems:not([data-seen~="reviews"]) .prb-sunlit--4,
.motion.ch-ready .ch--mkt-problems:not([data-seen~="ai"]) .prb-sunlit--5,
.motion.ch-ready .ch--mkt-problems:not([data-seen~="inquiry"]) .prb-sunlit--6 {
    opacity: 0;
    transition-duration: 0.5s;
    transition-delay: 0s;
}

/* ---- 1. the toll: the way past it opens in gold and the guests take it; the coins stop */
.ch--mkt-problems .prb-trace {
    stroke-dasharray: 1 1;
    stroke-dashoffset: 0;
}
.ch--mkt-problems .prb-trace--1 {
    transition: stroke-dashoffset 1.3s var(--ease-in-out) var(--prb-at);
}
.ch--mkt-problems .prb-direct__bed {
    transition: opacity 0.8s var(--ease) var(--prb-at);
}
.ch--mkt-problems .prb-queue,
.ch--mkt-problems .prb-coins,
.ch--mkt-problems .prb-booth-lit {
    transition: opacity 0.6s var(--ease) var(--prb-at);
}
.ch--mkt-problems .prb-coins {
    opacity: 0;
}
.ch--mkt-problems .prb-booth-lit {
    opacity: 0.3;
}
.ch--mkt-problems .prb-queue {
    opacity: 0;
}
.ch--mkt-problems .prb-free > g {
    transition: opacity 0.9s var(--ease) calc(var(--prb-at) + 0.5s), translate 1.4s var(--ease) calc(var(--prb-at) + 0.5s);
}
.ch--mkt-problems .prb-free > g + g {
    transition-delay: calc(var(--prb-at) + 0.8s);
}
.motion.ch-ready .ch--mkt-problems:not([data-seen~="ota"]) .prb-trace--1 {
    stroke-dashoffset: 1;
    transition-duration: 0.5s;
    transition-delay: 0s;
}
.motion.ch-ready .ch--mkt-problems:not([data-seen~="ota"]) .prb-direct__bed {
    opacity: 0.3;
    transition-delay: 0s;
}
.motion.ch-ready .ch--mkt-problems:not([data-seen~="ota"]) :is(.prb-queue, .prb-coins, .prb-booth-lit) {
    opacity: 1;
    transition-delay: 0s;
}
.motion.ch-ready .ch--mkt-problems:not([data-seen~="ota"]) .prb-free > g {
    opacity: 0;
    translate: -26px 10px;
    transition-delay: 0s;
}

/* ---- 2. the phone: the guest's screen comes up out of the phone with its words, spins a while, then the page
   fills, top to bottom */
.ch--mkt-problems .prb-phone {
    transition: opacity 0.45s var(--ease) 0.25s, scale 0.8s var(--ease) 0.25s;
}
.motion.ch-ready .ch--mkt-problems:not([data-seen~="slow"]) .prb-phone {
    opacity: 0;
    scale: 0.3;
    transition-duration: 0.3s;
    transition-delay: 0s;
}
.ch--mkt-problems :is(.prb-wait, .prb-phone__cool, .prb-phone__warm) {
    transition: opacity 0.5s var(--ease) var(--prb-load);
}
.ch--mkt-problems :is(.prb-wait, .prb-phone__cool) {
    opacity: 0;
}
.ch--mkt-problems .prb-pg {
    transition: opacity 0.5s var(--ease) calc(var(--prb-load) + 0.2s), translate 0.6s var(--ease) calc(var(--prb-load) + 0.2s);
}
.ch--mkt-problems .prb-pg--2 { transition-delay: calc(var(--prb-load) + 0.38s); }
.ch--mkt-problems .prb-pg--3 { transition-delay: calc(var(--prb-load) + 0.52s); }
.ch--mkt-problems .prb-pg--4 { transition-delay: calc(var(--prb-load) + 0.7s); }
.motion.ch-ready .ch--mkt-problems:not([data-seen~="slow"]) :is(.prb-wait, .prb-phone__cool) {
    opacity: 1;
    transition-delay: 0s;
}
.motion.ch-ready .ch--mkt-problems:not([data-seen~="slow"]) .prb-phone__warm {
    opacity: 0;
    transition-delay: 0s;
}
.motion.ch-ready .ch--mkt-problems:not([data-seen~="slow"]) .prb-pg {
    opacity: 0;
    translate: 0 6px;
    transition-delay: 0s;
}

/* ---- 3. the hollow: the mist lifts, the three ways show in gold and run on to the front desk, whose lamp comes on */
.ch--mkt-problems .prb-hmist {
    opacity: 0.14;
    translate: 0 -54px;
    transition: opacity 1.8s var(--ease) calc(var(--prb-at) - 0.3s), translate 2.2s var(--ease) calc(var(--prb-at) - 0.3s);
}
.ch--mkt-problems .prb-trace--3 {
    transition: stroke-dashoffset 1.1s var(--ease-in-out) calc(var(--prb-at) + 0.3s);
}
.ch--mkt-problems .prb-way--2 { transition-delay: calc(var(--prb-at) + 0.45s); }
.ch--mkt-problems .prb-way--3 { transition-delay: calc(var(--prb-at) + 0.6s); }
.ch--mkt-problems .prb-way--4 {
    transition-duration: 1.4s;
    transition-delay: calc(var(--prb-at) + 1.3s);
}
.ch--mkt-problems :is(.prb-src, .prb-armg) {
    transition: opacity 0.5s var(--ease) calc(var(--prb-at) + 0.3s);
}
.ch--mkt-problems .prb-armg--2 { transition-delay: calc(var(--prb-at) + 0.45s); }
.ch--mkt-problems .prb-armg--3 { transition-delay: calc(var(--prb-at) + 0.6s); }
.ch--mkt-problems .prb-lamp {
    transition: opacity 0.8s var(--ease) calc(var(--prb-at) + 2.3s);
}
.motion.ch-ready .ch--mkt-problems:not([data-seen~="channel"]) .prb-hmist {
    opacity: 1;
    translate: none;
    transition-duration: 0.8s;
    transition-delay: 0s;
}
.motion.ch-ready .ch--mkt-problems:not([data-seen~="channel"]) .prb-trace--3 {
    stroke-dashoffset: 1;
    transition-duration: 0.5s;
    transition-delay: 0s;
}
.motion.ch-ready .ch--mkt-problems:not([data-seen~="channel"]) :is(.prb-src, .prb-armg) {
    opacity: 0;
    transition-delay: 0s;
}
.motion.ch-ready .ch--mkt-problems:not([data-seen~="channel"]) .prb-lamp {
    opacity: 0.12;
    transition-delay: 0s;
}

/* ---- 4. the map: the pin drops over the gate, grey, with one star; then it turns gold and rings, the stars fill
   one by one, guests come up to the gate */
.ch--mkt-problems .prb-map__in {
    transition: opacity 0.4s var(--ease) 0.3s, translate 0.7s var(--ease) 0.3s;
}
.motion.ch-ready .ch--mkt-problems:not([data-seen~="reviews"]) .prb-map__in {
    opacity: 0;
    translate: 0 -22px;
    transition-duration: 0.3s;
    transition-delay: 0s;
}
.ch--mkt-problems :is(.prb-pin__grey, .prb-pin__gold, .prb-rings) {
    transition: opacity 0.6s var(--ease) var(--prb-at);
}
.ch--mkt-problems .prb-pin__grey {
    opacity: 0;
}
.ch--mkt-problems .prb-star {
    transform-box: fill-box;
    transform-origin: center;
    transition: opacity 0.35s var(--ease) calc(var(--prb-at) + 0.2s), scale 0.5s var(--ease) calc(var(--prb-at) + 0.2s);
}
.ch--mkt-problems .prb-star--3 { transition-delay: calc(var(--prb-at) + 0.36s); }
.ch--mkt-problems .prb-star--4 { transition-delay: calc(var(--prb-at) + 0.52s); }
.ch--mkt-problems .prb-star--5 { transition-delay: calc(var(--prb-at) + 0.68s); }
.ch--mkt-problems .prb-come {
    transition: opacity 0.9s var(--ease) calc(var(--prb-at) + 0.6s), translate 1.6s var(--ease) calc(var(--prb-at) + 0.6s);
}
.ch--mkt-problems .prb-come--2 { transition-delay: calc(var(--prb-at) + 0.85s); }
.ch--mkt-problems .prb-come--3 { transition-delay: calc(var(--prb-at) + 1.1s); }
.motion.ch-ready .ch--mkt-problems:not([data-seen~="reviews"]) .prb-pin__grey {
    opacity: 1;
    transition-delay: 0s;
}
.motion.ch-ready .ch--mkt-problems:not([data-seen~="reviews"]) :is(.prb-pin__gold, .prb-rings) {
    opacity: 0;
    transition-delay: 0s;
}
.motion.ch-ready .ch--mkt-problems:not([data-seen~="reviews"]) .prb-star {
    opacity: 0;
    scale: 0.3;
    transition-delay: 0s;
}
.motion.ch-ready .ch--mkt-problems:not([data-seen~="reviews"]) .prb-come {
    opacity: 0;
    translate: -40px 6px;
    transition-delay: 0s;
}

/* ---- 5. the answer: its light swings from the far ridge to this villa, which lights up */
.ch--mkt-problems .prb-beam {
    transform-box: view-box;
    transform-origin: 1300px 252px;
    rotate: 1.12deg;
    scale: 1 0.785;
    transition: rotate 2s var(--ease-in-out) calc(var(--prb-at) - 0.3s), scale 2s var(--ease-in-out) calc(var(--prb-at) - 0.3s);
}
.ch--mkt-problems :is(.prb-rivals, .prb-shade) {
    opacity: 0;
    transition: opacity 0.8s var(--ease) calc(var(--prb-at) + 0.2s);
}
.ch--mkt-problems :is(.prb-cited, .prb-win-on) {
    transition: opacity 0.9s var(--ease) calc(var(--prb-at) + 1.1s);
}
.ch--mkt-problems .prb-win-off {
    opacity: 0;
    transition: opacity 0.9s var(--ease) calc(var(--prb-at) + 1.1s);
}
.ch--mkt-problems .prb-cite {
    transform-box: fill-box;
    transform-origin: center;
    transition: scale 0.7s var(--ease) calc(var(--prb-at) + 1.4s), rotate 0.7s var(--ease) calc(var(--prb-at) + 1.4s);
}
.motion.ch-ready .ch--mkt-problems:not([data-seen~="ai"]) .prb-beam {
    rotate: 34.12deg;
    scale: 1 0.545;
    transition-duration: 0.8s;
    transition-delay: 0s;
}
.motion.ch-ready .ch--mkt-problems:not([data-seen~="ai"]) :is(.prb-rivals, .prb-shade, .prb-win-off) {
    opacity: 1;
    transition-delay: 0s;
}
.motion.ch-ready .ch--mkt-problems:not([data-seen~="ai"]) :is(.prb-cited, .prb-win-on) {
    opacity: 0;
    transition-delay: 0s;
}
.motion.ch-ready .ch--mkt-problems:not([data-seen~="ai"]) .prb-cite {
    scale: 0;
    rotate: -60deg;
    transition-delay: 0s;
}

/* ---- 6. the garden: the notes blowing away are caught, one by one, and pinned on the board */
.ch--mkt-problems :is(.prb-fly, .prb-board-lit) {
    transition: opacity 0.5s var(--ease) var(--prb-at);
}
.ch--mkt-problems .prb-fly {
    opacity: 0;
}
.ch--mkt-problems .prb-catch {
    transition: opacity 0.5s var(--ease) calc(var(--prb-at) + 0.2s), translate 1s var(--ease) calc(var(--prb-at) + 0.2s),
        rotate 1s var(--ease) calc(var(--prb-at) + 0.2s);
}
.ch--mkt-problems .prb-catch--2 { transition-delay: calc(var(--prb-at) + 0.38s); }
.ch--mkt-problems .prb-catch--3 { transition-delay: calc(var(--prb-at) + 0.56s); }
.ch--mkt-problems .prb-catch--4 { transition-delay: calc(var(--prb-at) + 0.74s); }
.ch--mkt-problems .prb-catch--5 { transition-delay: calc(var(--prb-at) + 0.92s); }
.motion.ch-ready .ch--mkt-problems:not([data-seen~="inquiry"]) .prb-fly {
    opacity: 1;
    transition-delay: 0s;
}
.motion.ch-ready .ch--mkt-problems:not([data-seen~="inquiry"]) .prb-board-lit {
    opacity: 0;
    transition-delay: 0s;
}
.motion.ch-ready .ch--mkt-problems:not([data-seen~="inquiry"]) .prb-catch {
    opacity: 0;
    translate: 70px -56px;
    rotate: 40deg;
    transition-delay: 0s;
}

/* ---- the life of the place, only with motion, resting while the section is off screen */
.ch--mkt-problems .prb-walk {
    transform-box: fill-box;
    transform-origin: 50% 100%;
}
.motion .ch--mkt-problems .prb-walk {
    animation: prb-walk 17s linear infinite;
}
/* down the road into the hollow, smaller as they go, gone into the mist */
@keyframes prb-walk {
    0% { translate: 0 0; scale: 1; opacity: 0; }
    6% { opacity: 1; }
    25% { translate: 56.5px -15.9px; scale: 0.942; }
    50% { translate: 114px -33.4px; scale: 0.877; }
    75% { translate: 179.8px -56.5px; scale: 0.792; }
    88% { opacity: 1; }
    100% { translate: 227.5px -72.8px; scale: 0.732; opacity: 0; }
}
.ch--mkt-problems .prb-rays {
    transform-box: view-box;
    transform-origin: 800px 470px;
}
.motion .ch--mkt-problems .prb-rays {
    animation: prb-rays 34s ease-in-out infinite alternate;
}
@keyframes prb-rays {
    from { rotate: -3deg; }
    to { rotate: 4deg; opacity: 0.75; }
}
.motion .ch--mkt-problems .prb-drift2 {
    animation-duration: 74s;
    animation-delay: -20s;
}
.motion .ch--mkt-problems .prb-drift3 {
    animation-duration: 90s;
    animation-delay: -45s;
}
.ch--mkt-problems .prb-coin {
    opacity: 0;
}
.motion .ch--mkt-problems .prb-coin {
    animation: prb-coin 2.4s var(--ease) infinite;
}
.motion .ch--mkt-problems .prb-coin--2 { animation-delay: -0.8s; }
.motion .ch--mkt-problems .prb-coin--3 { animation-delay: -1.6s; }
@keyframes prb-coin {
    0% { opacity: 0; translate: -26px 22px; }
    12% { opacity: 1; }
    45% { translate: -10px -12px; }
    78% { opacity: 1; translate: 0 2px; }
    100% { opacity: 0; translate: 0 10px; }
}
.ch--mkt-problems :is(.prb-puff, .prb-spark, .prb-src__ring, .prb-note) {
    transform-box: fill-box;
    transform-origin: center;
}
.ch--mkt-problems .prb-puff {
    opacity: 0;
}
.motion .ch--mkt-problems .prb-puff {
    animation: prb-puff 6s linear infinite;
}
.motion .ch--mkt-problems .prb-puff--2 { animation-delay: -2s; }
.motion .ch--mkt-problems .prb-puff--3 { animation-delay: -4s; }
@keyframes prb-puff {
    0% { opacity: 0; translate: 0 0; scale: 0.6; }
    15% { opacity: 0.55; }
    100% { opacity: 0; translate: 14px -56px; scale: 2.2; }
}
.motion .ch--mkt-problems .prb-spin {
    animation: prb-spin 1s steps(8) infinite;
}
@keyframes prb-spin {
    to { rotate: 360deg; }
}
.motion .ch--mkt-problems .prb-hmist__drift {
    animation: prb-hmist 11s ease-in-out infinite alternate;
}
@keyframes prb-hmist {
    to { translate: 26px 3px; }
}
.motion .ch--mkt-problems .prb-src__ring {
    animation: prb-ring 2.6s var(--ease) infinite;
}
.motion .ch--mkt-problems .prb-src--2 .prb-src__ring { animation-delay: -0.9s; }
.motion .ch--mkt-problems .prb-src--3 .prb-src__ring { animation-delay: -1.8s; }
@keyframes prb-ring {
    from { opacity: 0.9; scale: 0.4; }
    to { opacity: 0; scale: 1.7; }
}
.motion .ch--mkt-problems .prb-spark {
    animation: prb-twinkle 3.6s ease-in-out infinite;
}
@keyframes prb-twinkle {
    50% { scale: 1.14; opacity: 0.82; }
}
.ch--mkt-problems .prb-note {
    opacity: 0;
}
.motion .ch--mkt-problems .prb-note {
    animation: prb-note 6.5s linear infinite;
}
.motion .ch--mkt-problems .prb-note--2 { animation-delay: -1.3s; }
.motion .ch--mkt-problems .prb-note--3 { animation-delay: -2.6s; }
.motion .ch--mkt-problems .prb-note--4 { animation-delay: -3.9s; }
.motion .ch--mkt-problems .prb-note--5 { animation-delay: -5.2s; }
@keyframes prb-note {
    0% { opacity: 0; translate: 0 0; rotate: 0deg; }
    8% { opacity: 1; }
    40% { translate: 60px -48px; rotate: 60deg; }
    70% { opacity: 0.9; translate: 104px -110px; rotate: 140deg; }
    100% { opacity: 0; translate: 170px -190px; rotate: 250deg; }
}

/* ---- the morning goes on while the section is read: the sun climbs, the mist in the far valley thins */
@supports (animation-timeline: view()) {
    .motion .ch--mkt-problems .ly--sun {
        animation: prb-climb linear both;
        animation-timeline: --ch;
        animation-range: contain 0% contain 100%;
    }
    .motion .ch--mkt-problems .ly--mist {
        animation: prb-thin linear both;
        animation-timeline: --ch;
        animation-range: contain 0% contain 80%;
    }
    @keyframes prb-climb {
        to { translate: 0 -7%; }
    }
    @keyframes prb-thin {
        to { opacity: 0.3; translate: 0 -2%; }
    }
}

/* ==========================================================================
   chapter mkt/direct-booking
   ========================================================================== */
/* The undagi raise a bale at sunrise: the platform course by course, the steps, the path to the gate whose doors
   open, the pillars, the roof from the eaves up, then a second pavilion, the garden and the first guests walking in,
   and at the end the blessing. Without motion the bale stands finished and blessed, the guests at its steps. */
.ch--mkt-direct-booking .ch__head {
    align-content: start;
}

/* ---- the words. A package is one large panel: its price, then its list in two parts, each part a beat that
   builds the next piece of the bale. On a phone the parts stand apart, so the drawing stays clear under each. */
.ch--mkt-direct-booking .beat {
    --panel: rgba(247, 251, 252, 0.95);
    width: min(100%, 34rem);
}
.ch--mkt-direct-booking .dbp-pkg {
    display: grid;
}
/* the facet cuts of a part: a joined package is cut only at its top right and its bottom left */
.ch--mkt-direct-booking .dbp-pkg > .beat {
    --tc: 0px;
    --bc: 0px;
}
.ch--mkt-direct-booking .dbp-pkg > .beat:first-child {
    --tc: var(--cut);
}
.ch--mkt-direct-booking .dbp-pkg > .beat:last-child {
    --bc: var(--cut);
}
.ch--mkt-direct-booking .dbp-pkg > .beat::before {
    clip-path: polygon(0 0, calc(100% - var(--tc)) 0, 100% var(--tc), 100% 100%, var(--bc) 100%, 0 calc(100% - var(--bc)));
}
/* joined parts overlap by a pixel, so no seam of the drawing shows between them */
.ch--mkt-direct-booking .dbp-pkg > .beat:not(:last-child)::before {
    bottom: -1px;
}
.ch--mkt-direct-booking .dbp-pkg > .beat:not(:first-child) {
    padding-top: 5px;
}
.ch--mkt-direct-booking .dbp-pkg > .beat:not(:last-child) {
    padding-bottom: 5px;
}
/* the price closes its part with room to breathe; the two halves of the list run on at the list's own rhythm */
.ch--mkt-direct-booking .dbp-pkg > .dbp-card {
    padding-bottom: 20px;
}
.ch--mkt-direct-booking .dbp-more::after {
    display: none;
}
/* the gold facet of a joined package lights while any of its parts is being read */
.ch--mkt-direct-booking .dbp-pkg:has(.is-on) .dbp-card::after {
    opacity: 1;
}
/* the list starts under a fine rule, so the price stands on its own */
.ch--mkt-direct-booking .dbp-card + .dbp-more {
    padding-top: 0;
}
.ch--mkt-direct-booking .dbp-card + .dbp-more > .dbp-run + * {
    padding-top: 20px;
    border-top: 1px solid var(--line);
}
.ch--mkt-direct-booking .dbp-run {
    display: none;
}
@media (max-width: 56em) {
    .motion .ch--mkt-direct-booking .dbp-pkg {
        gap: max(34vh, 260px);
    }
    .motion .ch--mkt-direct-booking .dbp-pkg > .beat {
        --tc: var(--cut);
        --bc: var(--cut);
        padding: 22px 22px 24px;
    }
    .motion .ch--mkt-direct-booking .dbp-pkg > .beat::before {
        bottom: 0;
    }
    .motion .ch--mkt-direct-booking .dbp-more::after {
        display: block;
    }
    .motion .ch--mkt-direct-booking .dbp-card + .dbp-more > .dbp-run + * {
        padding-top: 0;
        border-top: 0;
    }
    /* apart from its price, a part says whose list it is */
    .motion .ch--mkt-direct-booking .dbp-run {
        display: block;
        margin-bottom: -2px;
        font: 650 1.5rem/1.1 var(--display);
        letter-spacing: -0.016em;
    }
    .motion .ch--mkt-direct-booking .dbp-pkg--rec .dbp-run {
        color: var(--gold-ink);
    }
}
.ch--mkt-direct-booking .dbp-card {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 14px;
}
.ch--mkt-direct-booking .dbp-card > * {
    grid-column: 1 / -1;
}
.ch--mkt-direct-booking .dbp-card > .dbp-name {
    grid-column: 1;
    grid-row: 1;
}
.ch--mkt-direct-booking .dbp-name {
    font: 650 clamp(2rem, 1.5rem + 1.6vw, 2.75rem)/1.04 var(--display);
    letter-spacing: -0.025em;
}
/* Growth is the one we recommend: a gold tag beside its name, a warmer panel and its gold facet always lit */
.ch--mkt-direct-booking .dbp-card > .dbp-tag {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    padding: 9px 13px 9px 16px;
    background: var(--gold);
    color: var(--ink);
    font: 700 clamp(0.8rem, 0.74rem + 0.2vw, 0.9rem)/1 var(--text);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px);
}
.ch--mkt-direct-booking .dbp-pkg--rec .beat {
    --panel: rgba(255, 245, 214, 0.95);
}
.ch--mkt-direct-booking .dbp-pkg--rec .beat::after {
    opacity: 1;
}
.ch--mkt-direct-booking .dbp-sub {
    color: var(--fg-soft);
    font-size: 1.0625rem;
    font-weight: 500;
}
.ch--mkt-direct-booking .dbp-price {
    margin-top: 12px;
    font: 650 clamp(2.75rem, 2rem + 2.6vw, 4rem)/1 var(--display);
    letter-spacing: -0.035em;
    white-space: nowrap;
}
.ch--mkt-direct-booking .dbp-cur {
    margin-right: 0.08em;
    color: var(--gold-ink);
    font-size: 0.46em;
    letter-spacing: 0;
    vertical-align: 0.9em;
}
.ch--mkt-direct-booking .dbp-unit {
    color: var(--fg-soft);
    font-size: 1rem;
}
.ch--mkt-direct-booking .dbp-plus {
    color: var(--fg);
    font-size: 1.0625rem;
    font-weight: 650;
}
.ch--mkt-direct-booking .dbp-list {
    display: grid;
    gap: 10px;
}
.ch--mkt-direct-booking .dbp-list li {
    position: relative;
    padding-left: 26px;
    color: var(--fg);
    font-size: 1.0625rem;
    line-height: 1.45;
}
/* each line marked with a small gold facet */
.ch--mkt-direct-booking .dbp-list li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 0.45em;
    width: 11px;
    height: 11px;
    background: var(--gold);
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.ch--mkt-direct-booking .dbp-cta {
    margin-top: 8px;
    width: 100%;
    min-height: 48px;
    white-space: normal;
    text-align: center;
}
.ch--mkt-direct-booking .dbp-note__text {
    color: var(--fg);
    font-size: 1.0625rem;
    line-height: 1.55;
}
.ch--mkt-direct-booking .dbp-n {
    display: block;
}
.ch--mkt-direct-booking .dbp-n + .dbp-n {
    margin-top: 10px;
}
.ch--mkt-direct-booking .dbp-note strong {
    font-weight: 700;
}

/* still pages: the two packages side by side, each one panel, and the note under them */
:root:not(.motion) .ch--mkt-direct-booking .beats {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
    align-items: start;
}
:root:not(.motion) .ch--mkt-direct-booking .dbp-note {
    grid-column: 1 / -1;
    width: min(100%, 46rem);
}
/* without motion the drawing is a still picture behind the opening screen; its foot fades into the morning */
:root:not(.motion) .ch--mkt-direct-booking .ch__frame::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 18%;
    background: linear-gradient(rgba(178, 209, 223, 0), var(--sky-m, #b2d1df));
}
/* with motion the garden itself reaches the foot of the section: the strip of far land would lie across the lawn,
   so the lawn melts into the next morning sky instead */
.motion .ch--mkt-direct-booking .sec__ground {
    display: none;
}
.motion .ch--mkt-direct-booking::after {
    height: clamp(90px, 16vh, 170px);
}

/* ---- the camera: on a phone it starts in the yard, turns to the plot, follows the path to the gate, comes back
   to the bale as it rises and goes over to the pavilion and the guests; on a wide screen the whole garden is in
   view and it leans a little toward each part */
.ch--mkt-direct-booking {
    --u: 0.43;
    --zx: 43%;
    --zy: 100%;
    --zoom: 1;
}
.ch--mkt-direct-booking[data-beat="platform"] { --u: 0.59; --zx: 59%; --zoom: 1.1; }
.ch--mkt-direct-booking[data-beat="steps"] { --u: 0.59; --zx: 59%; --zoom: 1.15; }
.ch--mkt-direct-booking[data-beat="path"] { --u: 0.67; --zx: 67%; --zy: 40%; --zoom: 1.04; }
.ch--mkt-direct-booking[data-beat="pillars"] { --u: 0.61; --zx: 61%; --zoom: 1.03; }
.ch--mkt-direct-booking[data-beat="roof"] { --u: 0.59; --zx: 59%; --zoom: 1; }
.ch--mkt-direct-booking[data-beat="expand"] { --u: 0.805; --zx: 80%; --zoom: 1.06; }
.ch--mkt-direct-booking[data-beat="bless"] { --u: 0.62; --zx: 62%; --zoom: 1.03; }
/* the still picture shows the finished garden, a little closer, with the words held a touch higher over the sky */
:root:not(.motion) .ch--mkt-direct-booking {
    --u: 0.62;
    --zx: 62%;
    --zy: 0%;
    --zoom: 1.04;
}
:root:not(.motion) .ch--mkt-direct-booking .ch__head {
    padding-top: calc(var(--head-h) + 3vh);
}
/* a narrow still screen shows the finished roof and the palms right under the words, so a veil of the morning
   sky keeps them clear; a phone on its side has the same veil, from the left, while the words stand over the wall */
@media (max-width: 56em) {
    :root:not(.motion) .ch--mkt-direct-booking .ch__head {
        position: relative;
        isolation: isolate;
    }
    :root:not(.motion) .ch--mkt-direct-booking .ch__head::before {
        content: "";
        position: absolute;
        z-index: -1;
        inset: calc(var(--head-h) - 8px) calc(var(--gutter) * -1) auto;
        height: 24rem;
        background: linear-gradient(rgba(226, 239, 243, 0.92) 0%, rgba(226, 239, 243, 0.9) 72%, rgba(226, 239, 243, 0) 100%);
        pointer-events: none;
    }
}
@media (max-height: 500px) and (min-aspect-ratio: 16/9) {
    .ch--mkt-direct-booking .ch__head {
        position: relative;
        isolation: isolate;
    }
    .ch--mkt-direct-booking .ch__head::before,
    :root:not(.motion) .ch--mkt-direct-booking .ch__head::before {
        content: "";
        position: absolute;
        z-index: -1;
        inset: calc(var(--head-h) - 8px) -40vw 22px -40vw;
        height: auto;
        background: linear-gradient(90deg, rgba(226, 239, 243, 0.94) 0%, rgba(226, 239, 243, 0.9) 55%, rgba(226, 239, 243, 0) 82%);
        pointer-events: none;
    }
}
@media (min-width: 56.01em) {
    .ch--mkt-direct-booking {
        --s: 0.66;
        --pan: 0.3;
        --u: 0.6;
        --zx: 60%;
    }
    .ch--mkt-direct-booking[data-beat] { --zoom: 1.03; }
    .ch--mkt-direct-booking[data-beat="platform"],
    .ch--mkt-direct-booking[data-beat="steps"] { --u: 0.58; --zx: 59%; --zoom: 1.05; }
    .ch--mkt-direct-booking[data-beat="path"] { --u: 0.66; --zx: 68%; --zy: 100%; }
    .ch--mkt-direct-booking[data-beat="pillars"],
    .ch--mkt-direct-booking[data-beat="roof"] { --u: 0.6; --zx: 60%; --zoom: 1.02; }
    .ch--mkt-direct-booking[data-beat="expand"] { --u: 0.72; --zx: 80%; }
    .ch--mkt-direct-booking[data-beat="bless"] { --u: 0.64; --zx: 62%; }
}
/* a screen a little wider than a tablet: the panels take more of it, so the camera keeps the bale to the right */
@media (min-width: 56.01em) and (max-width: 75em) {
    .ch--mkt-direct-booking {
        --s: 0.76;
        --pan: 0.85;
    }
}

/* ---- Foundation. The platform: three courses settling in turn over the cords, and its shadow on the lawn */
.ch--mkt-direct-booking .dbp-course {
    transition: transform 0.9s var(--ease), opacity 0.6s var(--ease);
}
.ch--mkt-direct-booking .dbp-course.k2 {
    transition-delay: 0.35s;
}
.ch--mkt-direct-booking .dbp-course.k3 {
    transition-delay: 0.7s;
}
.motion.ch-ready .ch--mkt-direct-booking:not([data-seen~="platform"]) .dbp-course {
    opacity: 0;
    transform: translateY(18px);
    transition-duration: 0.4s;
    transition-delay: 0s;
}
.ch--mkt-direct-booking .dbp-cords {
    opacity: 0;
    transition: opacity 0.6s var(--ease) 1.1s;
}
.motion.ch-ready .ch--mkt-direct-booking:not([data-seen~="platform"]) .dbp-cords {
    opacity: 1;
    transition-delay: 0s;
}
/* every shadow comes with what throws it */
.ch--mkt-direct-booking .dbp-sh {
    transition: opacity 1s var(--ease) 0.6s;
}
.ch--mkt-direct-booking .dbp-sh--roof {
    transition-delay: 1.5s;
}
.motion.ch-ready .ch--mkt-direct-booking:not([data-seen~="platform"]) .dbp-sh--plat,
.motion.ch-ready .ch--mkt-direct-booking:not([data-seen~="pillars"]) .dbp-sh--saka,
.motion.ch-ready .ch--mkt-direct-booking:not([data-seen~="roof"]) .dbp-sh--roof,
.motion.ch-ready .ch--mkt-direct-booking:not([data-seen~="expand"]) .dbp-sh--pv {
    opacity: 0;
    transition-delay: 0s;
}
/* the yard empties as the bale takes what it holds */
.ch--mkt-direct-booking .dbp-yard {
    opacity: 0;
    transition: opacity 0.6s var(--ease);
}
.ch--mkt-direct-booking .dbp-y-bricks {
    transition-delay: 0.35s;
}
.motion.ch-ready .ch--mkt-direct-booking:not([data-seen~="platform"]) :is(.dbp-y-top, .dbp-y-bricks),
.motion.ch-ready .ch--mkt-direct-booking:not([data-seen~="steps"]) .dbp-y-low,
.motion.ch-ready .ch--mkt-direct-booking:not([data-seen~="pillars"]) .dbp-y-bamboo,
.motion.ch-ready .ch--mkt-direct-booking:not([data-seen~="roof"]) .dbp-y-thatch {
    opacity: 1;
    transition-delay: 0s;
}
/* the steps, from the bottom one up, and the two posts beside them */
.ch--mkt-direct-booking .dbp-step {
    transition: transform 0.7s var(--ease) calc(var(--i) * 0.22s), opacity 0.5s var(--ease) calc(var(--i) * 0.22s);
}
.motion.ch-ready .ch--mkt-direct-booking:not([data-seen~="steps"]) .dbp-step {
    opacity: 0;
    transform: translateY(12px);
    transition-delay: 0s;
}
/* the path: stone after stone from the steps to the gate, then its doors swing open and the morning falls in */
.ch--mkt-direct-booking .dbp-ps {
    transform-box: fill-box;
    transform-origin: 50% 70%;
    transition: transform 0.5s var(--ease) calc(0.2s + var(--i) * 0.11s), opacity 0.4s var(--ease) calc(0.2s + var(--i) * 0.11s);
}
.motion.ch-ready .ch--mkt-direct-booking:not([data-seen~="path"]) .dbp-ps {
    opacity: 0;
    transform: scale(0.4);
    transition-delay: 0s;
}
.ch--mkt-direct-booking .dbp-door {
    transform-box: fill-box;
    transform: scaleX(0.16);
    transition: transform 1.1s var(--ease-in-out) 1.5s;
}
.ch--mkt-direct-booking .dbp-door--l {
    transform-origin: 0 50%;
}
.ch--mkt-direct-booking .dbp-door--r {
    transform-origin: 100% 50%;
}
.motion.ch-ready .ch--mkt-direct-booking:not([data-seen~="path"]) .dbp-door {
    transform: none;
    transition-duration: 0.5s;
    transition-delay: 0s;
}
.ch--mkt-direct-booking .dbp-shaft {
    transition: opacity 1.2s var(--ease) 2.1s;
}
.motion.ch-ready .ch--mkt-direct-booking:not([data-seen~="path"]) .dbp-shaft {
    opacity: 0;
    transition-delay: 0s;
}

/* ---- Growth. The pillars rise from the floor one after another, and the beam settles on them */
.ch--mkt-direct-booking .dbp-saka {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    transition: transform 0.8s var(--ease) calc(var(--i) * 0.14s), opacity 0.3s linear calc(var(--i) * 0.14s);
}
.motion.ch-ready .ch--mkt-direct-booking:not([data-seen~="pillars"]) .dbp-saka {
    opacity: 0;
    transform: scaleY(0);
    transition-delay: 0s;
}
.ch--mkt-direct-booking .dbp-beam {
    transition: transform 0.7s var(--ease) 0.9s, opacity 0.5s var(--ease) 0.9s;
}
.motion.ch-ready .ch--mkt-direct-booking:not([data-seen~="pillars"]) .dbp-beam {
    opacity: 0;
    transform: translateY(-14px);
    transition-delay: 0s;
}
/* the roof: the bamboo frame, then the thatch laid from the eaves up, then the crown */
.ch--mkt-direct-booking .dbp-frame {
    transition: opacity 0.6s var(--ease);
}
.motion.ch-ready .ch--mkt-direct-booking:not([data-seen~="roof"]) .dbp-frame {
    opacity: 0;
}
.ch--mkt-direct-booking .dbp-th {
    transition: transform 0.8s var(--ease) 0.6s, opacity 0.6s var(--ease) 0.6s;
}
.ch--mkt-direct-booking .dbp-th.k2 {
    transition-delay: 1s;
}
.ch--mkt-direct-booking .dbp-th.k3 {
    transition-delay: 1.4s;
}
.motion.ch-ready .ch--mkt-direct-booking:not([data-seen~="roof"]) .dbp-th {
    opacity: 0;
    transform: translateY(-16px);
    transition-delay: 0s;
}
.ch--mkt-direct-booking .dbp-crown {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    transition: transform 0.6s var(--ease) 1.9s, opacity 0.4s var(--ease) 1.9s;
}
.motion.ch-ready .ch--mkt-direct-booking:not([data-seen~="roof"]) .dbp-crown {
    opacity: 0;
    transform: scaleY(0);
    transition-delay: 0s;
}
/* the expansion: the second pavilion rises, the bare earth turns to lawn, the bushes grow and flower */
.ch--mkt-direct-booking .dbp-pv {
    transition: transform 0.8s var(--ease), opacity 0.5s var(--ease);
}
.ch--mkt-direct-booking .dbp-pv.k2 {
    transition-delay: 0.3s;
}
.ch--mkt-direct-booking .dbp-pv.k3 {
    transition-delay: 0.6s;
}
.motion.ch-ready .ch--mkt-direct-booking:not([data-seen~="expand"]) .dbp-pv {
    opacity: 0;
    transform: translateY(14px);
    transition-delay: 0s;
}
.ch--mkt-direct-booking .dbp-garden {
    transition: opacity 1.4s var(--ease) 0.2s;
}
.motion.ch-ready .ch--mkt-direct-booking:not([data-seen~="expand"]) .dbp-garden {
    opacity: 0;
    transition-delay: 0s;
}
.ch--mkt-direct-booking .dbp-shrub {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    transition: transform 0.9s var(--ease) calc(0.6s + var(--i) * 0.12s), opacity 0.5s var(--ease) calc(0.6s + var(--i) * 0.12s);
}
.motion.ch-ready .ch--mkt-direct-booking:not([data-seen~="expand"]) .dbp-shrub {
    opacity: 0;
    transform: scale(0.3);
    transition-delay: 0s;
}
.ch--mkt-direct-booking .dbp-bloom {
    transition: opacity 0.8s var(--ease) 1.4s;
}
.ch--mkt-direct-booking .dbp-bed {
    transition: opacity 0.8s var(--ease) 0.5s;
}
.motion.ch-ready .ch--mkt-direct-booking:not([data-seen~="expand"]) :is(.dbp-bloom, .dbp-bed) {
    opacity: 0;
    transition-delay: 0s;
}
.ch--mkt-direct-booking .dbp-flies {
    transition: opacity 0.8s var(--ease) 1.8s;
}
.motion.ch-ready .ch--mkt-direct-booking:not([data-seen~="expand"]) .dbp-flies {
    opacity: 0;
    transition-delay: 0s;
}
/* the guests come in by the gate and walk the path straight to the bale */
.ch--mkt-direct-booking .dbp-guests {
    transform: var(--g2);
    transition: transform 2.6s var(--ease-in-out), opacity 0.8s var(--ease);
}
.motion.ch-ready .ch--mkt-direct-booking:not([data-seen~="expand"]) .dbp-guests {
    opacity: 0;
    transform: var(--g0);
    transition-duration: 0.4s;
}
.motion.ch-ready .ch--mkt-direct-booking[data-beat="expand"] .dbp-guests {
    transform: var(--g1);
    transition-delay: 0.9s;
}
.motion .ch--mkt-direct-booking[data-beat="expand"] .dbp-walk {
    animation: dbp-walk 0.5s ease-in-out 0.9s 7 alternate;
}
.motion .ch--mkt-direct-booking[data-beat="expand"] .dbp-walk--2 {
    animation-delay: 1.15s;
}
@keyframes dbp-walk {
    to { translate: 0 -1.6px; }
}

/* ---- the people: the worker goes where the work is, a second one climbs the ladder for the pillars and the
   roof, and at the end the builder prays over the new bale while the worker rests */
.ch--mkt-direct-booking :is(.dbp-wa, .dbp-wb, .dbp-mb) {
    transition: opacity 0.5s var(--ease);
}
.ch--mkt-direct-booking :is(.dbp-wa, .dbp-wb, .dbp-mb--rod) {
    opacity: 0;
}
.ch--mkt-direct-booking .dbp-a-sit {
    opacity: 1;
}
.motion.ch-ready .ch--mkt-direct-booking .dbp-a-sit {
    opacity: 0;
}
.motion.ch-ready .ch--mkt-direct-booking:not([data-beat]) .dbp-a-carry,
.motion.ch-ready .ch--mkt-direct-booking[data-beat="platform"] .dbp-a-platform,
.motion.ch-ready .ch--mkt-direct-booking[data-beat="steps"] .dbp-a-steps,
.motion.ch-ready .ch--mkt-direct-booking[data-beat="path"] .dbp-a-path,
.motion.ch-ready .ch--mkt-direct-booking:is([data-beat="pillars"], [data-beat="roof"]) :is(.dbp-a-lift, .dbp-wb),
.motion.ch-ready .ch--mkt-direct-booking:is([data-beat="expand"], [data-beat="bless"]) .dbp-a-sit {
    opacity: 1;
    transition-delay: 0.35s;
}
.motion.ch-ready .ch--mkt-direct-booking:not([data-seen~="bless"]) .dbp-mb--rod {
    opacity: 1;
}
.motion.ch-ready .ch--mkt-direct-booking:not([data-seen~="bless"]) .dbp-mb--pray {
    opacity: 0;
}

/* ---- the blessing: cloth wound round the pillars one after another, the painted cloth unrolled along the eave,
   the offering tower set on the floor, the canang smoking on the step, and the penjor raised outside the gate */
.ch--mkt-direct-booking .dbp-wrap {
    transform-box: fill-box;
    transform-origin: 50% 0;
    transition: transform 0.7s var(--ease) calc(0.3s + var(--i) * 0.18s), opacity 0.4s var(--ease) calc(0.3s + var(--i) * 0.18s);
}
.motion.ch-ready .ch--mkt-direct-booking:not([data-seen~="bless"]) .dbp-wrap {
    opacity: 0;
    transform: scaleY(0.1);
    transition-delay: 0s;
}
.ch--mkt-direct-booking .dbp-ider {
    transform-box: fill-box;
    transform-origin: 0 50%;
    transition: transform 1.3s var(--ease-in-out) 1s, opacity 0.3s linear 1s;
}
.motion.ch-ready .ch--mkt-direct-booking:not([data-seen~="bless"]) .dbp-ider {
    opacity: 0;
    transform: scaleX(0);
    transition-delay: 0s;
}
.ch--mkt-direct-booking .dbp-geb {
    transition: transform 0.8s var(--ease) 1.3s, opacity 0.6s var(--ease) 1.3s;
}
.motion.ch-ready .ch--mkt-direct-booking:not([data-seen~="bless"]) .dbp-geb {
    opacity: 0;
    transform: translateY(-12px);
    transition-delay: 0s;
}
.ch--mkt-direct-booking .dbp-offer {
    transition: opacity 0.8s var(--ease) 1.8s;
}
.motion.ch-ready .ch--mkt-direct-booking:not([data-seen~="bless"]) .dbp-offer {
    opacity: 0;
    transition-delay: 0s;
}
.ch--mkt-direct-booking .dbp-flag {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    transition: transform 1.2s var(--ease) 0.2s, opacity 0.4s var(--ease) 0.2s;
}
.ch--mkt-direct-booking .dbp-flag--2 {
    transition-delay: 0.5s;
}
.motion.ch-ready .ch--mkt-direct-booking:not([data-seen~="bless"]) .dbp-flag {
    opacity: 0;
    transform: scaleY(0.12);
    transition-delay: 0s;
}
.ch--mkt-direct-booking :is(.dbp-samp, .dbp-smoke) {
    transform-box: fill-box;
}
.ch--mkt-direct-booking .dbp-samp {
    transform-origin: 50% 0;
}
.motion .ch--mkt-direct-booking .dbp-samp {
    animation: dbp-swing 3.8s ease-in-out infinite alternate;
}
.motion .ch--mkt-direct-booking .dbp-flag--2 .dbp-samp {
    animation-duration: 4.6s;
    animation-delay: -1.8s;
}
@keyframes dbp-swing {
    from { rotate: -6deg; }
    to { rotate: 7deg; }
}
/* the incense: two soft wisps rising in turn */
.ch--mkt-direct-booking .dbp-smoke {
    transform-origin: 50% 100%;
}
.motion .ch--mkt-direct-booking .dbp-smoke {
    animation: dbp-smoke 4.4s ease-in-out infinite;
}
.motion .ch--mkt-direct-booking .dbp-smoke--2 {
    animation-delay: -2.2s;
}
@keyframes dbp-smoke {
    0% { opacity: 0; translate: 0 8px; scale: 0.7 0.6; }
    25% { opacity: 1; }
    100% { opacity: 0; translate: 3px -18px; scale: 1.3 1.1; }
}

/* ---- the life of the place, only with motion, resting while the section is off screen */
.ch--mkt-direct-booking .dbp-rays {
    transform-box: view-box;
    transform-origin: 1400px 330px;
}
.motion .ch--mkt-direct-booking .dbp-rays {
    animation: dbp-rays 26s ease-in-out infinite alternate;
}
@keyframes dbp-rays {
    to { rotate: -4deg; opacity: 0.55; }
}
.motion .ch--mkt-direct-booking .dbp-drift2 {
    animation-duration: 84s;
    animation-delay: -40s;
}
.motion .ch--mkt-direct-booking .dbp-fly {
    animation: dbp-fly 7s ease-in-out infinite;
}
.motion .ch--mkt-direct-booking .dbp-fly--2 {
    animation-duration: 9s;
    animation-delay: -3s;
}
.ch--mkt-direct-booking .dbp-fly path {
    transform-box: fill-box;
    transform-origin: center;
}
.motion .ch--mkt-direct-booking .dbp-fly path {
    animation: dbp-flap 0.22s ease-in-out infinite alternate;
}
@keyframes dbp-fly {
    25% { translate: 18px -12px; }
    50% { translate: 34px 4px; }
    75% { translate: 12px 10px; }
}
@keyframes dbp-flap {
    to { scale: 0.3 1; }
}

/* ---- the morning clears while the section is read: the sun climbs, the haze over the far land lifts, the light
   warms and every shadow on the lawn draws in toward what throws it */
@supports (animation-timeline: view()) {
    .motion .ch--mkt-direct-booking .ly--sun {
        animation: dbp-climb linear both;
        animation-timeline: --ch;
        animation-range: contain 0% contain 100%;
    }
    .motion .ch--mkt-direct-booking .ly--mist {
        animation: dbp-lift linear both;
        animation-timeline: --ch;
        animation-range: contain 0% contain 80%;
    }
    .motion .ch--mkt-direct-booking .ly--light {
        animation: dbp-warm linear both;
        animation-timeline: --ch;
        animation-range: contain 0% contain 100%;
    }
    .motion .ch--mkt-direct-booking .dbp-sh {
        animation: dbp-short linear both;
        animation-timeline: --ch;
        animation-range: contain 0% contain 100%;
    }
    @keyframes dbp-climb {
        to { translate: 0 -6%; }
    }
    @keyframes dbp-lift {
        to { opacity: 0.25; translate: 0 -2%; }
    }
    @keyframes dbp-warm {
        from { opacity: 0.55; }
    }
    @keyframes dbp-short {
        to { scale: 0.72; }
    }
}

/* ==========================================================================
   chapter mkt/calculator
   ========================================================================== */
/* The villa's spring in the morning: ten spouts, each a tenth of the bookings. The property starts the water,
   the OTAs' gutter takes their share to the side basin, which lets the commission fall into the ravine, and
   what is moved to direct pours back into the pool, gold. mkt-ota.js writes the visitor's shares on the section
   (--ota-occ, --ota-share, --ota-comm, --ota-shift, each 0 to 1); the values here are the worked example, for a
   page without script. Without motion the drawing shows its last state: that example. */
.ch--mkt-calculator {
    --ota-occ: 0.65;
    --ota-share: 0.6;
    --ota-comm: 0.18;
    --ota-shift: 0.1;
    /* the share of the bookings the OTAs bring, before and after the share moved to direct */
    --cal-a: var(--ota-share);
    --cal-s: calc(var(--ota-share) * (1 - var(--ota-shift)));
}
.ch--mkt-calculator .ch__head {
    align-content: start;
}
/* with motion the stage carries the sky; the section's own sky only shows behind a still page */
.motion .ch--mkt-calculator > .sec__sky {
    display: none;
}

/* ---- the calculator: each beat a short ledger, the numbers typed on the right, its result in a band of gold */
.ch--mkt-calculator .beat {
    gap: 14px;
    width: min(100%, 31rem);
}
.ch--mkt-calculator .ota__field {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 8.75rem;
    align-items: center;
    gap: 14px;
}
.ch--mkt-calculator .ota__field label {
    color: var(--fg);
    font-size: 1rem;
    line-height: 1.35;
}
.ch--mkt-calculator .ota__field input {
    width: 100%;
    min-height: 48px;
    padding: 10px 12px;
    border: 1px solid rgba(28, 31, 38, 0.3);
    border-radius: 12px;
    background: #ffffff;
    color: var(--fg);
    font: 650 1.125rem/1.2 var(--text);
    font-variant-numeric: tabular-nums;
    text-align: right;
    transition: border-color 0.2s var(--ease);
}
.ch--mkt-calculator .ota__field input:hover {
    border-color: rgba(28, 31, 38, 0.55);
}
.ch--mkt-calculator .ota__field input:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
    border-color: var(--ink);
}
/* the result: the bottom of the panel in a band of gold, cut with the panel's corner */
.ch--mkt-calculator .ota__out {
    --pad: clamp(24px, 3vw, 38px);
    display: grid;
    gap: 12px;
    margin: 4px calc(var(--pad) * -1) calc(var(--pad-b, var(--pad)) * -1);
    padding: 16px var(--pad) calc(var(--pad-b, var(--pad)) - 4px);
    background: rgba(253, 191, 20, 0.16);
    clip-path: polygon(0 0, 100% 0, 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
}
.ch--mkt-calculator .ota__out div {
    display: grid;
    gap: 2px;
}
.ch--mkt-calculator .ota__out dt {
    color: var(--fg-soft);
    font-size: 1rem;
    font-weight: 600;
}
.ch--mkt-calculator .ota__out dd {
    color: var(--fg);
    font: 650 clamp(1.75rem, 1.35rem + 1.2vw, 2.3rem)/1.08 var(--display);
    letter-spacing: -0.012em;
}
.ch--mkt-calculator .ota__save dd {
    color: var(--accent);
    font-size: clamp(2.1rem, 1.5rem + 1.9vw, 3rem);
}
.ch--mkt-calculator .ota__month dd {
    font-size: clamp(1.3rem, 1.1rem + 0.7vw, 1.6rem);
}
.ch--mkt-calculator .ota__note {
    color: var(--fg-soft);
    font-size: 1rem;
    line-height: 1.5;
}
.ch--mkt-calculator .ota__ask {
    color: var(--fg);
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.4;
}
.ch--mkt-calculator .ota__cta {
    justify-self: start;
    white-space: normal;
    text-align: center;
}
@media (max-width: 40em) {
    .ch--mkt-calculator .beat {
        width: 100%;
    }
    .ch--mkt-calculator .ota__field {
        grid-template-columns: minmax(0, 1fr) 8.5rem;
        gap: 12px;
    }
    .ch--mkt-calculator .ota__cta {
        justify-self: stretch;
    }
}
/* a small phone: a narrower number column leaves the labels two lines at most, and the button one */
@media (max-width: 23.75em) {
    .ch--mkt-calculator .ota__field {
        grid-template-columns: minmax(0, 1fr) 7.5rem;
    }
    .ch--mkt-calculator .ota__cta {
        padding-inline: 14px;
        letter-spacing: 0.05em;
    }
}
/* a phone on its side: the panels stay within the screen */
@media (max-height: 500px) and (min-aspect-ratio: 4/3) {
    .ch--mkt-calculator .beat {
        gap: 10px;
        padding: 18px 24px;
    }
    .ch--mkt-calculator .ota__out {
        --pad: 24px;
        --pad-b: 18px;
        gap: 6px;
        padding-top: 10px;
    }
    .ch--mkt-calculator .ota__out dd {
        font-size: 1.5rem;
    }
    .ch--mkt-calculator .ota__save dd {
        font-size: 1.8rem;
    }
}

/* without motion the drawing is a still picture behind the opening screen; its foot fades into the morning */
:root:not(.motion) .ch--mkt-calculator .ch__frame::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 16%;
    background: linear-gradient(rgba(187, 215, 227, 0), var(--sky-m, #bbd7e3));
}

/* ---- the camera. On a phone it starts on the shrine and its spouts; each beat it comes closer and looks a
   little higher, so that what changes sits below the words that have just taken over: the spouts as they start,
   the OTAs' basin, the spout that comes back in gold, and last breakfast on the pool by the bale. On a wide screen
   the whole place is in view and it only leans toward each. */
.ch--mkt-calculator {
    --u: 0.53;
    --zx: 53%;
    --zy: 100%;
    --zoom: 1;
}
.ch--mkt-calculator[data-beat="property"] { --u: 0.5; --zx: 50%; --zy: 30%; --zoom: 1.12; }
.ch--mkt-calculator[data-beat="ota"] { --u: 0.78; --zx: 78%; --zy: 80%; --zoom: 1.05; }
.ch--mkt-calculator[data-beat="direct"] { --u: 0.527; --zx: 53%; --zy: 50%; --zoom: 1.16; }
.ch--mkt-calculator[data-beat="ask"] { --u: 0.37; --zx: 37%; --zy: 72%; --zoom: 1.12; }
@media (min-width: 56.01em) {
    .ch--mkt-calculator {
        --u: 0.5;
        --zx: 50%;
        --zy: 80%;
        --s: 0.56;
        --pan: 0.4;
    }
    .ch--mkt-calculator[data-beat] { --u: 0.5; --zoom: 1.04; --zy: 80%; }
    .ch--mkt-calculator[data-beat="property"] { --zx: 60%; }
    .ch--mkt-calculator[data-beat="ota"] { --zx: 81%; --zoom: 1.06; }
    .ch--mkt-calculator[data-beat="direct"] { --zx: 53%; --zoom: 1.08; }
    .ch--mkt-calculator[data-beat="ask"] { --zx: 34%; --s: 0.6; }
}

/* ---- the states. Before a beat is reached its part is undone; the plain rules below are the last state. */
.motion.ch-ready .ch--mkt-calculator:not([data-seen~="direct"]) {
    --cal-s: var(--cal-a);
}
.motion.ch-ready .ch--mkt-calculator:not([data-seen~="ota"]) {
    --cal-a: 0;
    --cal-s: 0;
}

/* the spouts: 1 while the OTAs' gutter takes this one's water, now (--c) and before any moved to direct (--c0) */
.ch--mkt-calculator .cal-k {
    --c: clamp(0, (var(--cal-s) * 10 - var(--k) - 0.5) * 7 + 0.5, 1);
    --c0: clamp(0, (var(--cal-a) * 10 - var(--k) - 0.5) * 7 + 0.5, 1);
}
/* the water pours in from the mouths, left to right, as strong as the rooms are full */
.ch--mkt-calculator :is(.cal-jet, .cal-fall) {
    stroke-width: calc(7px * (0.4 + 0.6 * var(--ota-occ)));
    stroke-linecap: butt;
    stroke-dasharray: 1 1;
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 0.5s var(--ease-in-out) calc(var(--i) * 0.09s), stroke-width 0.7s var(--ease);
}
.ch--mkt-calculator .cal-fall {
    transition-delay: calc(0.4s + var(--i) * 0.09s), 0s;
}
.motion.ch-ready .ch--mkt-calculator:not([data-seen~="property"]) :is(.cal-jet, .cal-fall) {
    stroke-dashoffset: 1;
    transition-duration: 0.3s, 0.7s;
    transition-delay: 0s, 0s;
}
.ch--mkt-calculator .cal-hl {
    stroke-width: 1.7px;
    stroke-dasharray: 3 11;
    opacity: 0.85;
    transition: opacity 0.6s var(--ease) calc(0.7s + var(--i, 0) * 0.09s);
}
.motion.ch-ready .ch--mkt-calculator:not([data-seen~="property"]) :is(.cal-hl, .cal-refl, .cal-foam) {
    opacity: 0;
    transition-delay: 0s;
}
.ch--mkt-calculator .cal-foam {
    transition: opacity 0.5s var(--ease) calc(0.55s + var(--i) * 0.09s);
}
.ch--mkt-calculator .cal-refl {
    transition: opacity 0.6s var(--ease) 0.8s;
}
/* a spout the gutter takes stops short of the pool and splashes into the cane instead */
.ch--mkt-calculator .cal-low {
    opacity: calc(1 - var(--c));
    transition: opacity 0.35s var(--ease) calc(0.2s + var(--k) * 0.17s);
}
.ch--mkt-calculator .cal-catch {
    opacity: var(--c);
    transition: opacity 0.35s var(--ease) calc(0.2s + var(--k) * 0.17s);
}
/* ...and one the gutter lets go pours back into the pool in gold: the saving */
.ch--mkt-calculator .cal-gold {
    opacity: calc(var(--c0) - var(--c));
    transition: opacity 1s var(--ease) 0.9s;
}
.ch--mkt-calculator .cal-star {
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
}
.motion.ch-ready .ch--mkt-calculator[data-seen~="direct"] .cal-star {
    animation: cal-star 1.5s var(--ease) 1.3s both;
}
@keyframes cal-star {
    0% { opacity: 0; scale: 0.2; rotate: -30deg; }
    35% { opacity: 1; scale: 1.15; }
    100% { opacity: 0; scale: 0.5; rotate: 45deg; }
}
/* as it lands, two rings of gold spread out over the villa's water, once */
.ch--mkt-calculator .cal-gwave {
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
}
.motion.ch-ready .ch--mkt-calculator[data-seen~="direct"] .cal-gwave {
    animation: cal-gwave 3s cubic-bezier(0.25, 0.6, 0.5, 1) 1.5s both;
}
.motion.ch-ready .ch--mkt-calculator[data-seen~="direct"] .cal-gwave2 {
    animation-delay: 2.1s;
}
@keyframes cal-gwave {
    0% { opacity: 0; scale: 0.12; }
    12% { opacity: 1; }
    100% { opacity: 0; scale: 1; }
}

/* the OTAs' gutter slides in from the right under the spouts they bring, and draws back by what moves to direct */
.ch--mkt-calculator .cal-gutter {
    transform: translateX(calc((1 - var(--cal-s)) * 560px));
    transition: transform 1.4s var(--ease-in-out);
}
.ch--mkt-calculator :is(.cal-gate, .cal-ota) {
    opacity: clamp(0, var(--cal-s) * 30, 1);
    transition: opacity 0.5s var(--ease);
}
/* its water runs on into the basin, which fills; most goes back to the pool, the commission over the edge */
.ch--mkt-calculator :is(.cal-in, .cal-ret, .cal-run) {
    stroke-dasharray: 1 1;
    stroke-dashoffset: calc(1 - min(1, var(--cal-s) * 30));
    stroke-linecap: butt;
}
.ch--mkt-calculator .cal-in {
    transition: stroke-dashoffset 0.5s var(--ease) 1.1s;
}
.ch--mkt-calculator .cal-bw {
    opacity: clamp(0, var(--cal-s) * 30, 1);
    transition: opacity 0.9s var(--ease) 1.4s;
}
.ch--mkt-calculator .cal-ret {
    stroke-width: calc(var(--cal-s) * (1 - var(--ota-comm)) * 22px);
    transition: stroke-dashoffset 0.5s var(--ease) 1.9s, stroke-width 0.9s var(--ease) 0.3s;
}
.ch--mkt-calculator .cal-run {
    stroke-width: calc(var(--cal-s) * var(--ota-comm) * 80px);
    transition: stroke-dashoffset 0.9s var(--ease-in-out) 2.1s, stroke-width 0.9s var(--ease) 0.3s;
}

/* breakfast floats out across the pool with the last beat */
.ch--mkt-calculator .cal-tray {
    transition: transform 2.6s var(--ease), opacity 1s var(--ease);
}
.motion.ch-ready .ch--mkt-calculator:not([data-seen~="ask"]) .cal-tray {
    transform: translate(-150px, -24px);
    opacity: 0;
    transition-duration: 0.6s;
}

/* ---- the life of the place, only with motion, resting while the section is off screen */
.motion .ch--mkt-calculator .cal-pours,
.motion .ch--mkt-calculator .cal-ota {
    animation: cal-drop 0.7s linear infinite;
}
@keyframes cal-drop {
    to { stroke-dashoffset: -14; }
}
.motion .ch--mkt-calculator .cal-flow {
    animation: cal-flow 1.1s linear infinite;
}
@keyframes cal-flow {
    to { stroke-dashoffset: -24; }
}
.ch--mkt-calculator :is(.cal-ring, .cal-bob, .cal-float) {
    transform-box: fill-box;
    transform-origin: center;
}
.motion .ch--mkt-calculator .cal-ring {
    animation: cal-ring 1.6s var(--ease) infinite;
    animation-delay: calc(var(--i, 3) * -0.37s);
}
@keyframes cal-ring {
    from { opacity: 0.95; scale: 0.45; }
    to { opacity: 0; scale: 1.35; }
}
.motion.ch-ready .ch--mkt-calculator:not([data-seen~="property"]) .cal-ring {
    animation: none;
    opacity: 0;
}
.motion .ch--mkt-calculator .cal-caus {
    animation: cal-caus 9s ease-in-out infinite alternate;
}
@keyframes cal-caus {
    to { translate: 14px 2px; }
}
.motion .ch--mkt-calculator .cal-float {
    animation: cal-float 4.6s ease-in-out infinite;
}
@keyframes cal-float {
    0%, 100% { translate: 0 0; rotate: -1deg; }
    50% { translate: 0 1.6px; rotate: 1.2deg; }
}
.motion .ch--mkt-calculator .cal-bob {
    animation: cal-bob 4.6s ease-in-out infinite;
}
@keyframes cal-bob {
    50% { scale: 1.08; opacity: 0.6; }
}
.motion .ch--mkt-calculator :is(.cal-smoke, .cal-steam) {
    animation: cal-smoke 5s ease-in-out infinite;
}
.motion .ch--mkt-calculator .cal-steam {
    animation-duration: 3.6s;
    animation-delay: -1.4s;
}
@keyframes cal-smoke {
    0% { opacity: 0; translate: 0 4px; }
    30% { opacity: 1; }
    100% { opacity: 0; translate: 3px -12px; }
}
.motion .ch--mkt-calculator :is(.cal-glitter, .cal-twinkle) {
    animation: cal-twinkle 2.4s ease-in-out infinite;
}
.motion .ch--mkt-calculator .cal-twinkle {
    animation-duration: 3.4s;
    animation-delay: -1.2s;
}
@keyframes cal-twinkle {
    50% { opacity: 0.15; }
}
.motion .ch--mkt-calculator .cal-petals {
    animation: cal-petals 16s ease-in-out infinite alternate;
}
@keyframes cal-petals {
    to { translate: 18px 3px; }
}
.motion .ch--mkt-calculator .cal-glint2 {
    animation-delay: -1.6s;
}
.motion .ch--mkt-calculator .cal-beams {
    animation: cal-beams 9s ease-in-out infinite alternate;
}
@keyframes cal-beams {
    to { opacity: 0.45; }
}
.ch--mkt-calculator .cal-rays {
    transform-box: view-box;
    transform-origin: 1300px 222px;
}
.motion .ch--mkt-calculator .cal-rays {
    animation: cal-rays 28s ease-in-out infinite alternate;
}
@keyframes cal-rays {
    to { rotate: 5deg; opacity: 0.7; }
}
.motion .ch--mkt-calculator .cal-drift2 {
    animation-duration: 84s;
    animation-delay: -34s;
}
.ch--mkt-calculator .cal-leaves {
    transform-box: view-box;
    transform-origin: -30px 930px;
}
.motion .ch--mkt-calculator .cal-leaves {
    animation: cal-leaves 7s ease-in-out infinite alternate;
}
@keyframes cal-leaves {
    to { rotate: 1.6deg; }
}

/* the pool's light wanders on the foot of the wall */
.motion .ch--mkt-calculator .cal-wallc {
    animation: cal-wallc 6s ease-in-out infinite alternate;
}
@keyframes cal-wallc {
    0% { translate: -7px 0; opacity: 0.5; }
    50% { opacity: 1; }
    100% { translate: 8px 1px; opacity: 0.65; }
}
.ch--mkt-calculator .cal-sweep {
    transform-box: view-box;
    transform-origin: 1300px 222px;
}

/* ---- the morning goes on while the section is read: the sun climbs, its beams turn across the court, the
   flowers float across the pool, the mist in the ravine lifts */
@supports (animation-timeline: view()) {
    .motion .ch--mkt-calculator .ly--sun {
        animation: cal-climb linear both;
        animation-timeline: --ch;
        animation-range: contain 0% contain 100%;
    }
    .motion .ch--mkt-calculator .ly--mist {
        animation: cal-lift linear both;
        animation-timeline: --ch;
        animation-range: contain 0% contain 90%;
    }
    /* the sun's beams turn across the court, and the flowers float across the pool */
    .motion .ch--mkt-calculator :is(.cal-sweep, .cal-carry) {
        animation: cal-sweep linear both;
        animation-timeline: --ch;
        animation-range: contain 0% contain 100%;
    }
    .motion .ch--mkt-calculator .cal-carry {
        animation-name: cal-carry;
    }
    @keyframes cal-sweep {
        from { rotate: 5deg; }
        to { rotate: -6deg; }
    }
    @keyframes cal-carry {
        to { translate: 64px 2px; }
    }
    @keyframes cal-climb {
        to { translate: 0 -5%; }
    }
    @keyframes cal-lift {
        to { opacity: 0.25; translate: 0 -3%; }
    }
}

/* ==========================================================================
   chapter mkt/how-we-work
   ========================================================================== */
/* The subak in the morning: four beats lift four gates, the water runs down the channel to each one and its
   field turns green. Without motion every gate is open and every field is green. */
.ch--mkt-how-we-work .ch__head {
    align-content: start;
}
.ch--mkt-how-we-work .beat {
    gap: 12px;
}
.ch--mkt-how-we-work .beat__text {
    color: var(--fg);
}
.ch--mkt-how-we-work .beat__text--muted {
    color: var(--fg-soft);
}
/* a phone on its side shows only the foot of the drawing, so the words would stand on the temple: a band of the
   morning sky behind them keeps them on a calm ground */
@media (max-height: 500px) and (min-aspect-ratio: 16/9) {
    .ch--mkt-how-we-work .ch__head {
        position: relative;
        isolation: isolate;
    }
    .ch--mkt-how-we-work .ch__head::before {
        content: "";
        position: absolute;
        z-index: -1;
        inset: calc(var(--head-h) - 8px) -40vw 22px -40vw;
        background: linear-gradient(90deg, rgba(188, 216, 228, 0.94) 0%, rgba(188, 216, 228, 0.9) 55%, rgba(188, 216, 228, 0) 82%);
        pointer-events: none;
    }
}

/* without motion the drawing is a still picture behind the opening screen; its foot fades into the morning */
:root:not(.motion) .ch--mkt-how-we-work .ch__frame::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 18%;
    background: linear-gradient(rgba(187, 215, 227, 0), var(--sky-m, #bbd7e3));
}

/* the camera: on a phone it starts at the temple and follows the water down from gate to gate, coming closer;
   on a wide screen the whole hillside is in view and it leans toward each gate */
.ch--mkt-how-we-work {
    --u: 0.22;
    --zx: 22%;
    --zy: 0%;
    --zoom: 1.08;
}
.ch--mkt-how-we-work[data-beat] {
    --zoom: 1.15;
}
.ch--mkt-how-we-work[data-beat="audit"] { --u: 0.52; --zx: 52%; --zy: 0%; }
.ch--mkt-how-we-work[data-beat="strategy"] { --u: 0.65; --zx: 65%; --zy: 10%; }
.ch--mkt-how-we-work[data-beat="execute"] { --u: 0.775; --zx: 77%; --zy: 45%; }
.ch--mkt-how-we-work[data-beat="optimise"] { --u: 0.9; --zx: 90%; --zy: 100%; }
@media (min-width: 56.01em) {
    .ch--mkt-how-we-work {
        --u: 0.5;
        --zx: 50%;
        --zy: 64%;
        --zoom: 1;
    }
    .ch--mkt-how-we-work[data-beat] {
        --s: 0.7;
        --zoom: 1.05;
    }
    .ch--mkt-how-we-work[data-beat="audit"] { --zy: 64%; --zoom: 1.05; }
    .ch--mkt-how-we-work[data-beat="strategy"] { --zy: 69%; }
    .ch--mkt-how-we-work[data-beat="execute"] { --zy: 75%; }
    .ch--mkt-how-we-work[data-beat="optimise"] { --zy: 81%; }
}

/* ---- the water: each stretch runs down the channel when its step is reached, and stops at the next gate */
.ch--mkt-how-we-work .hww-w {
    stroke-dasharray: 1 1;
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 1.2s var(--ease-in-out);
}
.ch--mkt-how-we-work .hww-w.k1 {
    transition-duration: 1.7s;
}
/* past the last gate the water runs on out of the picture once that gate is open */
.ch--mkt-how-we-work .hww-w.k5 {
    transition-delay: 1.5s;
}
.motion.ch-ready .ch--mkt-how-we-work:not([data-seen~="audit"]) .hww-w.k1,
.motion.ch-ready .ch--mkt-how-we-work:not([data-seen~="strategy"]) .hww-w.k2,
.motion.ch-ready .ch--mkt-how-we-work:not([data-seen~="execute"]) .hww-w.k3,
.motion.ch-ready .ch--mkt-how-we-work:not([data-seen~="optimise"]) :is(.hww-w.k4, .hww-w.k5) {
    stroke-dashoffset: 1;
    transition-duration: 0.6s;
    transition-delay: 0s;
}
/* the light running down the water, once it is there */
.ch--mkt-how-we-work .hww-flow {
    opacity: 0.85;
    transition: opacity 0.8s var(--ease) 1.1s;
}
.motion.ch-ready .ch--mkt-how-we-work:not([data-seen~="audit"]) .hww-flow.k1,
.motion.ch-ready .ch--mkt-how-we-work:not([data-seen~="strategy"]) .hww-flow.k2,
.motion.ch-ready .ch--mkt-how-we-work:not([data-seen~="execute"]) .hww-flow.k3,
.motion.ch-ready .ch--mkt-how-we-work:not([data-seen~="optimise"]) :is(.hww-flow.k4, .hww-flow.k5) {
    opacity: 0;
    transition-delay: 0s;
    animation: none;
}

/* ---- the gates: the board lifts as the water reaches it */
.ch--mkt-how-we-work .hww-board {
    transform: translateY(var(--lift));
    transition: transform 0.8s var(--ease) 0.8s;
}
.ch--mkt-how-we-work .hww-board.k1 {
    transition-delay: 1.3s;
}
.motion.ch-ready .ch--mkt-how-we-work:not([data-seen~="audit"]) .hww-board.k1,
.motion.ch-ready .ch--mkt-how-we-work:not([data-seen~="strategy"]) .hww-board.k2,
.motion.ch-ready .ch--mkt-how-we-work:not([data-seen~="execute"]) .hww-board.k3,
.motion.ch-ready .ch--mkt-how-we-work:not([data-seen~="optimise"]) .hww-board.k4 {
    transform: none;
    transition-delay: 0s;
}
/* ...and the water pours over the bund into the field below */
.ch--mkt-how-we-work .hww-spill {
    --at: 1.2s;
    transition: opacity 0.5s var(--ease) var(--at);
}
.ch--mkt-how-we-work .hww-spill.k1 {
    --at: 1.7s;
}
.ch--mkt-how-we-work .hww-spill path {
    stroke-dasharray: 1 1;
    transition: stroke-dashoffset 0.6s var(--ease) var(--at);
}
.motion.ch-ready .ch--mkt-how-we-work:not([data-seen~="audit"]) .hww-spill.k1,
.motion.ch-ready .ch--mkt-how-we-work:not([data-seen~="strategy"]) .hww-spill.k2,
.motion.ch-ready .ch--mkt-how-we-work:not([data-seen~="execute"]) .hww-spill.k3,
.motion.ch-ready .ch--mkt-how-we-work:not([data-seen~="optimise"]) .hww-spill.k4 {
    --at: 0s;
    opacity: 0;
}
.motion.ch-ready .ch--mkt-how-we-work:not([data-seen~="audit"]) .hww-spill.k1 path,
.motion.ch-ready .ch--mkt-how-we-work:not([data-seen~="strategy"]) .hww-spill.k2 path,
.motion.ch-ready .ch--mkt-how-we-work:not([data-seen~="execute"]) .hww-spill.k3 path,
.motion.ch-ready .ch--mkt-how-we-work:not([data-seen~="optimise"]) .hww-spill.k4 path {
    stroke-dashoffset: 1;
}
/* rings spread only once the water falls */
.motion.ch-ready .ch--mkt-how-we-work:not([data-seen~="audit"]) .hww-spill.k1 .hww-splash,
.motion.ch-ready .ch--mkt-how-we-work:not([data-seen~="strategy"]) .hww-spill.k2 .hww-splash,
.motion.ch-ready .ch--mkt-how-we-work:not([data-seen~="execute"]) .hww-spill.k3 .hww-splash,
.motion.ch-ready .ch--mkt-how-we-work:not([data-seen~="optimise"]) .hww-spill.k4 .hww-splash {
    animation: none;
}

/* ...and the sun catches it there, once */
.ch--mkt-how-we-work .hww-star {
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
}
.motion.ch-ready .ch--mkt-how-we-work[data-seen~="audit"] .hww-star.k1,
.motion.ch-ready .ch--mkt-how-we-work[data-seen~="strategy"] .hww-star.k2,
.motion.ch-ready .ch--mkt-how-we-work[data-seen~="execute"] .hww-star.k3,
.motion.ch-ready .ch--mkt-how-we-work[data-seen~="optimise"] .hww-star.k4 {
    animation: hww-star 1.3s var(--ease) 1.3s both;
}
.motion.ch-ready .ch--mkt-how-we-work[data-seen~="audit"] .hww-star.k1 {
    animation-delay: 1.8s;
}
@keyframes hww-star {
    0% { opacity: 0; scale: 0.2; rotate: -30deg; }
    35% { opacity: 1; scale: 1.1; }
    100% { opacity: 0; scale: 0.5; rotate: 40deg; }
}

/* ---- the fields: the green comes on piece by piece, outward from the gate */
.ch--mkt-how-we-work .hww-green {
    --at: 1.5s;
    transition: opacity 1s var(--ease) calc(var(--at) + var(--d, 0) * 0.16s);
}
.ch--mkt-how-we-work .hww-green.k1 {
    --at: 2s;
}
.motion.ch-ready .ch--mkt-how-we-work:not([data-seen~="audit"]) .hww-green.k1,
.motion.ch-ready .ch--mkt-how-we-work:not([data-seen~="strategy"]) .hww-green.k2,
.motion.ch-ready .ch--mkt-how-we-work:not([data-seen~="execute"]) .hww-green.k3,
.motion.ch-ready .ch--mkt-how-we-work:not([data-seen~="optimise"]) .hww-green.k4 {
    opacity: 0;
    transition-duration: 0.5s;
    transition-delay: 0s;
}

/* ---- the farmer walks down the bank to each gate; with the last step two egrets come down into the green */
.ch--mkt-how-we-work .hww-farmer {
    transform: var(--p4);
    transition: transform 1.4s var(--ease-in-out);
}
.motion.ch-ready .ch--mkt-how-we-work:not([data-beat]) .hww-farmer { transform: var(--p0); }
.motion.ch-ready .ch--mkt-how-we-work[data-beat="audit"] .hww-farmer { transform: var(--p1); }
.motion.ch-ready .ch--mkt-how-we-work[data-beat="strategy"] .hww-farmer { transform: var(--p2); }
.motion.ch-ready .ch--mkt-how-we-work[data-beat="execute"] .hww-farmer { transform: var(--p3); }
.ch--mkt-how-we-work .hww-birds {
    transition: opacity 1s var(--ease) 2.6s;
}
.motion.ch-ready .ch--mkt-how-we-work:not([data-seen~="optimise"]) .hww-birds {
    opacity: 0;
    transition-delay: 0s;
}

/* ---- the life of the place, only with motion, resting while the section is off screen */
.motion .ch--mkt-how-we-work .hww-flow {
    animation: hww-flow 1.1s linear infinite;
}
@keyframes hww-flow {
    to { stroke-dashoffset: -28; }
}
.motion .ch--mkt-how-we-work .hww-fall {
    animation: hww-fall 0.6s linear infinite;
}
@keyframes hww-fall {
    to { stroke-dashoffset: -10; }
}
.ch--mkt-how-we-work :is(.hww-ring, .hww-splash, .hww-prop, .hww-petal) {
    transform-box: fill-box;
    transform-origin: center;
}
.motion .ch--mkt-how-we-work :is(.hww-ring, .hww-splash) {
    animation: hww-ring 1.8s var(--ease) infinite;
}
.motion .ch--mkt-how-we-work .hww-ring--2 { animation-delay: -0.6s; }
.motion .ch--mkt-how-we-work .hww-ring--3 { animation-delay: -1.2s; }
@keyframes hww-ring {
    from { opacity: 0.9; scale: 0.4; }
    to { opacity: 0; scale: 1.4; }
}
.motion .ch--mkt-how-we-work .hww-prop {
    animation: hww-spin 2.6s linear infinite;
}
@keyframes hww-spin {
    to { rotate: 360deg; }
}
.ch--mkt-how-we-work .hww-rays {
    transform-box: view-box;
    transform-origin: 1330px 236px;
}
.motion .ch--mkt-how-we-work .hww-rays {
    animation: hww-rays 26s ease-in-out infinite alternate;
}
@keyframes hww-rays {
    to { rotate: 6deg; opacity: 0.7; }
}
.ch--mkt-how-we-work .hww-kite {
    transform-box: fill-box;
    transform-origin: 70% 60%;
}
.motion .ch--mkt-how-we-work .hww-kite {
    animation: hww-kite 6s ease-in-out infinite alternate;
}
@keyframes hww-kite {
    0% { rotate: -4deg; translate: 0 0; }
    50% { translate: -6px 5px; }
    100% { rotate: 5deg; translate: 4px -4px; }
}
/* cloud shadows: still in the picture without motion, crossing the slope with it */
.motion .ch--mkt-how-we-work .hww-shade {
    animation: hww-shade 38s linear infinite;
}
.motion .ch--mkt-how-we-work .hww-shade--2 {
    animation-duration: 52s;
    animation-delay: -30s;
}
@keyframes hww-shade {
    0% { translate: 340px 0; opacity: 0; }
    12% { opacity: 1; }
    88% { opacity: 1; }
    100% { translate: -1500px 40px; opacity: 0; }
}
.motion .ch--mkt-how-we-work .hww-drift2 {
    animation-duration: 80s;
    animation-delay: -30s;
}
.ch--mkt-how-we-work .hww-petal {
    opacity: 0;
}
.motion .ch--mkt-how-we-work .hww-petal {
    animation: hww-petal 11s linear infinite;
}
.motion .ch--mkt-how-we-work .hww-petal--2 { animation-duration: 14s; animation-delay: -5s; }
.motion .ch--mkt-how-we-work .hww-petal--3 { animation-duration: 12.5s; animation-delay: -9s; }
@keyframes hww-petal {
    0% { opacity: 0; translate: 0 0; rotate: 0deg; }
    8% { opacity: 1; }
    40% { translate: -18px 70px; }
    70% { opacity: 0.9; translate: 10px 130px; }
    100% { opacity: 0; translate: -24px 200px; rotate: 400deg; }
}

/* ---- the morning clears while the section is read: the sun climbs, the mist in the valley lifts */
@supports (animation-timeline: view()) {
    .motion .ch--mkt-how-we-work .ly--sun {
        animation: hww-climb linear both;
        animation-timeline: --ch;
        animation-range: contain 0% contain 100%;
    }
    .motion .ch--mkt-how-we-work .ly--mist {
        animation: hww-lift linear both;
        animation-timeline: --ch;
        animation-range: contain 0% contain 80%;
    }
    @keyframes hww-climb {
        to { translate: 0 -5%; }
    }
    @keyframes hww-lift {
        to { opacity: 0.2; translate: 0 -2%; }
    }
}

/* ==========================================================================
   chapter mkt/program
   ========================================================================== */
/* The year at sea: each phase sends the sun along its path to its months and lights them, and the path behind
   the sun turns gold. Without motion the year is complete: every month lit, the checkpoints ringed, the sail up,
   the sun at month 12 with its rays open. */
.ch--mkt-program {
    --pg-ease: cubic-bezier(0.37, 0, 0.63, 1);
}
/* a touch denser than the shared day panel: the gold path and its numbers must not show through the words */
.ch--mkt-program.sec--day {
    --panel: rgba(247, 251, 252, 0.96);
}
.ch--mkt-program .ch__head {
    align-content: start;
}

/* ---- the words: the month of a phase reads like a date on a timeline */
.ch--mkt-program .pg-when {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--accent);
    font: 600 1.08rem/1.2 var(--display);
    letter-spacing: 0.01em;
    font-variant-numeric: tabular-nums;
}
.ch--mkt-program .pg-when::before {
    content: "";
    flex: none;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 0 4px rgba(253, 191, 20, 0.22);
}
.ch--mkt-program .pg-list {
    display: grid;
    gap: 9px 28px;
}
.ch--mkt-program .pg-list li {
    position: relative;
    padding-left: 22px;
    color: var(--fg);
    line-height: 1.42;
}
.ch--mkt-program .pg-list li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 0.52em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ec3f24;
}
.ch--mkt-program .pg-note {
    color: var(--fg-soft);
    font-size: 1rem;
    line-height: 1.58;
}
.ch--mkt-program .pg-ask {
    justify-self: start;
}
@media (min-width: 40em) {
    .ch--mkt-program .pg-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .ch--mkt-program [data-beat="year"] {
        width: min(100%, 46rem);
    }
}
/* on a wide screen the panels on the right stay a little narrower, so month 6 and its number stay clear of them */
@media (min-width: 56.01em) {
    .ch--mkt-program .beat--end {
        width: min(100%, 31rem);
    }
}
@media (max-width: 40em) {
    .ch--mkt-program .beat {
        gap: 12px;
        padding: 24px 22px 26px;
    }
    .ch--mkt-program .pg-ask {
        justify-self: stretch;
        white-space: normal;
        text-align: center;
    }
}

/* ---- two paths for the sun: a phone has the low one over the sea, so its stops stay below the words */
.ch--mkt-program .pg-n {
    display: none;
}
@media (max-width: 56em) {
    .ch--mkt-program .pg-w {
        display: none;
    }
    .ch--mkt-program .pg-n {
        display: inline;
    }
}
/* a phone on its side shows the whole low path just under the opening words: the words sit tighter and end above
   it, and its numbers go below the marks */
@media (max-width: 56em) and (max-height: 500px) {
    .ch--mkt-program .ch__head {
        gap: 10px;
        padding-top: calc(var(--head-h) + 10px);
    }
    .ch--mkt-program .ch__lead {
        font-size: 1rem;
        line-height: 1.45;
    }
    .ch--mkt-program .pg-n .pg-num {
        translate: 0 96px;
    }
}

/* ---- the camera: on a phone it travels with the sun from left to right and comes close as each month lights;
   a wide screen keeps the whole year in view, the right end always on screen, and only leans toward the sun */
.ch--mkt-program {
    --u: 0.27;
    --zx: 34%;
    --zy: 82.8%;
}
.ch--mkt-program[data-beat="m1"] { --u: 0.372; --zoom: 1.1; --zx: 37.2%; --zy: 78.2%; }
.ch--mkt-program[data-beat="m2"] { --u: 0.42; --zoom: 1.1; --zx: 42%; --zy: 75.1%; }
.ch--mkt-program[data-beat="m3"] { --u: 0.469; --zoom: 1.1; --zx: 46.9%; --zy: 72.9%; }
.ch--mkt-program[data-beat="m4"] { --u: 0.52; --zoom: 1.1; --zx: 52%; --zy: 71.4%; }
.ch--mkt-program[data-beat="m5"] { --u: 0.57; --zoom: 1.09; --zx: 57%; --zy: 70%; }
.ch--mkt-program[data-beat="m6"] { --u: 0.62; --zoom: 1.08; --zx: 62%; --zy: 68.5%; }
.ch--mkt-program[data-beat="m7"] { --u: 0.925; --zoom: 1.07; --zx: 92.5%; --zy: 42%; }
.ch--mkt-program[data-beat="every"] { --u: 0.84; --zoom: 1.03; --zx: 84%; --zy: 66%; }
.ch--mkt-program[data-beat="check"] { --u: 0.696; --zoom: 1; --zx: 69.6%; --zy: 67%; }
.ch--mkt-program[data-beat="year"] { --u: 0.84; --zoom: 1.03; --zx: 84%; --zy: 66%; }
/* the high stops of a phone come close from above, so the numbers clear the foot of the taller panels */
.ch--mkt-program[data-beat="costs"] { --u: 0.925; --zoom: 1.12; --zx: 92.5%; --zy: 30%; }
@media (min-width: 56.01em) {
    .ch--mkt-program,
    .ch--mkt-program[data-beat] {
        --s: 0.5;
        --pan: 1;
        --u: 0.62;
        --zoom: 1.04;
    }
    .ch--mkt-program { --zoom: 1; --zx: 35%; --zy: 82.8%; }
    .ch--mkt-program[data-beat="m1"] { --zx: 37%; --zy: 78.5%; }
    .ch--mkt-program[data-beat="m2"] { --zx: 40.9%; --zy: 71.1%; }
    .ch--mkt-program[data-beat="m3"] { --zx: 45.1%; --zy: 64.2%; }
    .ch--mkt-program[data-beat="m4"] { --zx: 50%; --zy: 58.6%; }
    .ch--mkt-program[data-beat="m5"] { --zx: 54.7%; --zy: 53%; }
    .ch--mkt-program[data-beat="m6"] { --zx: 59.4%; --zy: 47.4%; }
    .ch--mkt-program:is([data-beat="m7"], [data-beat="costs"]) { --zx: 92.5%; --zy: 33.3%; }
    .ch--mkt-program[data-beat="check"] { --zoom: 1; }
    .ch--mkt-program:is([data-beat="year"], [data-beat="every"]) { --zoom: 1.02; --zx: 70%; --zy: 45%; }
}
/* a tablet or a small laptop sees less of the drawing: its camera opens on the sunrise, so the opening words keep
   clear sky, and follows the sun with the sun kept left of the panels on the right */
@media (min-width: 56.01em) and (max-width: 75em) {
    .ch--mkt-program { --u: 0.3; }
    .ch--mkt-program[data-beat="m1"] { --u: 0.37; --s: 0.3; }
    .ch--mkt-program[data-beat="m2"] { --u: 0.409; --s: 0.3; }
    .ch--mkt-program[data-beat="m3"] { --u: 0.451; --s: 0.3; }
    .ch--mkt-program[data-beat="m4"] { --u: 0.499; --s: 0.3; }
    .ch--mkt-program[data-beat="m5"] { --u: 0.546; --s: 0.3; }
    .ch--mkt-program[data-beat="m6"] { --u: 0.594; --s: 0.3; }
}
/* a still phone shows the finished year behind its opening words: the sun at month 12 with its rays and rings,
   and no high cloud under the title */
@media (max-width: 56em) {
    :root:not(.motion) .ch--mkt-program {
        --u: 0.87;
    }
    :root:not(.motion) .ch--mkt-program .ly--clouds {
        display: none;
    }
}
/* how long the sun travels to each stop; the camera keeps the same pace, so a long sweep never leaves it */
.ch--mkt-program:is([data-beat="m2"], [data-beat="m3"], [data-beat="m4"], [data-beat="m5"], [data-beat="m6"]) { --pg-t: 1.6s; }
.ch--mkt-program[data-beat="m7"] { --pg-t: 2.8s; }
@media (prefers-reduced-motion: no-preference) {
    .motion .ch--mkt-program .ch__cam {
        transition-duration: var(--pg-t, 1.8s);
        transition-timing-function: var(--pg-ease);
    }
}

/* ---- the sun on its path, the gold behind it, the light on the water under it, the boat following */
@supports (offset-path: path("M0 0")) {
    .ch--mkt-program :is(.pg-sun, .pg-glow) {
        transform: none;
        offset-path: var(--pp);
        offset-rotate: 0deg;
        offset-distance: 100%;
    }
    .motion.ch-ready .ch--mkt-program :is(.pg-sun, .pg-glow) {
        offset-distance: 0%;
        transition: offset-distance var(--pg-t, 1.8s) var(--pg-ease);
    }
    .motion.ch-ready .ch--mkt-program[data-beat="m1"] :is(.pg-sun, .pg-glow) { offset-distance: calc(var(--f1) * 100%); }
    .motion.ch-ready .ch--mkt-program[data-beat="m2"] :is(.pg-sun, .pg-glow) { offset-distance: calc(var(--f2) * 100%); }
    .motion.ch-ready .ch--mkt-program[data-beat="m3"] :is(.pg-sun, .pg-glow) { offset-distance: calc(var(--f3) * 100%); }
    .motion.ch-ready .ch--mkt-program[data-beat="m4"] :is(.pg-sun, .pg-glow) { offset-distance: calc(var(--f4) * 100%); }
    .motion.ch-ready .ch--mkt-program[data-beat="m5"] :is(.pg-sun, .pg-glow) { offset-distance: calc(var(--f5) * 100%); }
    .motion.ch-ready .ch--mkt-program[data-beat="m6"] :is(.pg-sun, .pg-glow) { offset-distance: calc(var(--f6) * 100%); }
    .motion.ch-ready .ch--mkt-program:is([data-beat="m7"], [data-beat="every"], [data-beat="check"], [data-beat="year"], [data-beat="costs"]) :is(.pg-sun, .pg-glow) {
        offset-distance: 100%;
    }
}
.ch--mkt-program :is(.pg-trail, .pg-trail-glow) {
    stroke-dasharray: 1 2;
    stroke-dashoffset: 0;
}
.motion.ch-ready .ch--mkt-program :is(.pg-trail, .pg-trail-glow) {
    stroke-dashoffset: 1;
    transition: stroke-dashoffset var(--pg-t, 1.8s) var(--pg-ease);
}
.motion.ch-ready .ch--mkt-program[data-beat="m1"] :is(.pg-trail, .pg-trail-glow) { stroke-dashoffset: calc(1 - var(--f1)); }
.motion.ch-ready .ch--mkt-program[data-beat="m2"] :is(.pg-trail, .pg-trail-glow) { stroke-dashoffset: calc(1 - var(--f2)); }
.motion.ch-ready .ch--mkt-program[data-beat="m3"] :is(.pg-trail, .pg-trail-glow) { stroke-dashoffset: calc(1 - var(--f3)); }
.motion.ch-ready .ch--mkt-program[data-beat="m4"] :is(.pg-trail, .pg-trail-glow) { stroke-dashoffset: calc(1 - var(--f4)); }
.motion.ch-ready .ch--mkt-program[data-beat="m5"] :is(.pg-trail, .pg-trail-glow) { stroke-dashoffset: calc(1 - var(--f5)); }
.motion.ch-ready .ch--mkt-program[data-beat="m6"] :is(.pg-trail, .pg-trail-glow) { stroke-dashoffset: calc(1 - var(--f6)); }
.motion.ch-ready .ch--mkt-program:is([data-beat="m7"], [data-beat="every"], [data-beat="check"], [data-beat="year"], [data-beat="costs"]) :is(.pg-trail, .pg-trail-glow) {
    stroke-dashoffset: 0;
}
.ch--mkt-program .pg-glint {
    transform: translateX(var(--x12));
}
.motion.ch-ready .ch--mkt-program .pg-glint {
    transform: translateX(var(--x0));
    transition: transform var(--pg-t, 1.8s) var(--pg-ease);
}
.motion.ch-ready .ch--mkt-program[data-beat="m1"] .pg-glint { transform: translateX(var(--x1)); }
.motion.ch-ready .ch--mkt-program[data-beat="m2"] .pg-glint { transform: translateX(var(--x2)); }
.motion.ch-ready .ch--mkt-program[data-beat="m3"] .pg-glint { transform: translateX(var(--x3)); }
.motion.ch-ready .ch--mkt-program[data-beat="m4"] .pg-glint { transform: translateX(var(--x4)); }
.motion.ch-ready .ch--mkt-program[data-beat="m5"] .pg-glint { transform: translateX(var(--x5)); }
.motion.ch-ready .ch--mkt-program[data-beat="m6"] .pg-glint { transform: translateX(var(--x6)); }
.motion.ch-ready .ch--mkt-program:is([data-beat="m7"], [data-beat="every"], [data-beat="check"], [data-beat="year"], [data-beat="costs"]) .pg-glint {
    transform: translateX(var(--x12));
}
/* the jukung sails a little behind the sun, and slower */
.ch--mkt-program .pg-boat {
    transform: translateX(var(--b12));
}
.motion.ch-ready .ch--mkt-program .pg-boat {
    transform: translateX(var(--b0));
    transition: transform 3.2s var(--pg-ease);
}
.motion.ch-ready .ch--mkt-program[data-beat="m1"] .pg-boat { transform: translateX(var(--b1)); }
.motion.ch-ready .ch--mkt-program[data-beat="m2"] .pg-boat { transform: translateX(var(--b2)); }
.motion.ch-ready .ch--mkt-program[data-beat="m3"] .pg-boat { transform: translateX(var(--b3)); }
.motion.ch-ready .ch--mkt-program[data-beat="m4"] .pg-boat { transform: translateX(var(--b4)); }
.motion.ch-ready .ch--mkt-program[data-beat="m5"] .pg-boat { transform: translateX(var(--b5)); }
.motion.ch-ready .ch--mkt-program[data-beat="m6"] .pg-boat { transform: translateX(var(--b6)); }
.motion.ch-ready .ch--mkt-program:is([data-beat="m7"], [data-beat="every"], [data-beat="check"], [data-beat="year"], [data-beat="costs"]) .pg-boat {
    transform: translateX(var(--b12));
    transition-duration: 3.8s;
}
/* month 3 publishes: the sail goes up off its boom */
.ch--mkt-program .pg-sail {
    transform-box: fill-box;
    transform-origin: 0% 100%;
    transition: transform 1.5s var(--ease) 0.5s;
}
.motion.ch-ready .ch--mkt-program:not([data-seen~="m3"]) .pg-sail {
    transform: scaleY(0.06);
    transition-delay: 0s;
}

/* ---- the months: unlit rings ahead of the sun, gold dots behind it, each lit as the sun reaches it */
.ch--mkt-program .pg-off {
    fill: #eff7fa;
    stroke: #c96455;
    stroke-width: 2;
}
.ch--mkt-program .pg-on {
    opacity: var(--pg-on, 1);
    transition: opacity 0.7s var(--ease);
}
.ch--mkt-program .pg-num {
    fill: var(--pg-ink, #6a0e00);
    font: 700 18px var(--text);
    font-variant-numeric: tabular-nums;
    transition: fill 0.7s var(--ease);
}
.motion.ch-ready .ch--mkt-program:not([data-seen~="m1"]) .pg-mk--1,
.motion.ch-ready .ch--mkt-program:not([data-seen~="m2"]) .pg-mk--2,
.motion.ch-ready .ch--mkt-program:not([data-seen~="m3"]) .pg-mk--3,
.motion.ch-ready .ch--mkt-program:not([data-seen~="m4"]) .pg-mk--4,
.motion.ch-ready .ch--mkt-program:not([data-seen~="m5"]) .pg-mk--5,
.motion.ch-ready .ch--mkt-program:not([data-seen~="m6"]) .pg-mk--6,
.motion.ch-ready .ch--mkt-program:not([data-seen~="m7"]) :is(.pg-mk--7, .pg-mk--8, .pg-mk--9, .pg-mk--10, .pg-mk--11, .pg-mk--12) {
    --pg-on: 0;
    --pg-ink: #9d665d;
}
/* each mark lights as the sun reaches it: the delays follow the sun's easing over each sweep */
.motion.ch-ready .ch--mkt-program[data-seen~="m1"] .pg-mk--1 :is(.pg-on, .pg-num) { transition-delay: 1.45s; }
.motion.ch-ready .ch--mkt-program[data-seen~="m2"] .pg-mk--2 :is(.pg-on, .pg-num) { transition-delay: 1.25s; }
.motion.ch-ready .ch--mkt-program[data-seen~="m3"] .pg-mk--3 :is(.pg-on, .pg-num) { transition-delay: 1.25s; }
.motion.ch-ready .ch--mkt-program[data-seen~="m4"] .pg-mk--4 :is(.pg-on, .pg-num) { transition-delay: 1.25s; }
.motion.ch-ready .ch--mkt-program[data-seen~="m5"] .pg-mk--5 :is(.pg-on, .pg-num) { transition-delay: 1.25s; }
.motion.ch-ready .ch--mkt-program[data-seen~="m6"] .pg-mk--6 :is(.pg-on, .pg-num) { transition-delay: 1.25s; }
.motion.ch-ready .ch--mkt-program[data-seen~="m7"] .pg-mk--7 :is(.pg-on, .pg-num) { transition-delay: 0.75s; }
.motion.ch-ready .ch--mkt-program[data-seen~="m7"] .pg-mk--8 :is(.pg-on, .pg-num) { transition-delay: 1.1s; }
.motion.ch-ready .ch--mkt-program[data-seen~="m7"] .pg-mk--9 :is(.pg-on, .pg-num) { transition-delay: 1.4s; }
.motion.ch-ready .ch--mkt-program[data-seen~="m7"] .pg-mk--10 :is(.pg-on, .pg-num) { transition-delay: 1.7s; }
.motion.ch-ready .ch--mkt-program[data-seen~="m7"] .pg-mk--11 :is(.pg-on, .pg-num) { transition-delay: 2.05s; }
.motion.ch-ready .ch--mkt-program[data-seen~="m7"] .pg-mk--12 :is(.pg-on, .pg-num) { transition-delay: 2.55s; }

/* ---- the checkpoints: a ring drawn round months 3, 6, 9 and 12, one after another */
.ch--mkt-program .pg-ring {
    stroke-dasharray: 1 2;
    stroke-dashoffset: 0;
    transform-box: fill-box;
    transform-origin: center;
    rotate: -90deg;
    transition: stroke-dashoffset 1.1s var(--ease);
}
.motion.ch-ready .ch--mkt-program:not([data-seen~="check"]) .pg-ring {
    stroke-dashoffset: 1;
    transition-duration: 0.4s;
}
.motion.ch-ready .ch--mkt-program[data-seen~="check"] .pg-ring--3 { transition-delay: 0.3s; }
.motion.ch-ready .ch--mkt-program[data-seen~="check"] .pg-ring--6 { transition-delay: 0.65s; }
.motion.ch-ready .ch--mkt-program[data-seen~="check"] .pg-ring--9 { transition-delay: 1s; }
.motion.ch-ready .ch--mkt-program[data-seen~="check"] .pg-ring--12 { transition-delay: 1.35s; }

/* ---- what runs through the year: a light runs the whole path, again and again, and the water glitters gold */
.ch--mkt-program .pg-gold {
    transition: opacity 1.6s var(--ease);
}
.motion.ch-ready .ch--mkt-program:not([data-seen~="year"]) .pg-gold {
    opacity: 0;
    transition-duration: 0.5s;
}
.motion .ch--mkt-program :is(.pg-gold__a, .pg-gold__b) {
    animation: pg-glitter 2.6s ease-in-out infinite alternate;
}
.motion .ch--mkt-program .pg-gold__b {
    animation-delay: -1.3s;
}
@keyframes pg-glitter {
    from { opacity: 0.25; }
    to { opacity: 0.95; }
}
.ch--mkt-program .pg-pulse {
    opacity: 0;
    stroke-dasharray: 0.07 1.3;
}
.motion .ch--mkt-program[data-seen~="year"] .pg-pulse {
    opacity: 0.95;
    animation: pg-pulse 5.2s linear infinite;
}
@keyframes pg-pulse {
    from { stroke-dashoffset: 0.07; }
    to { stroke-dashoffset: -1.23; }
}
/* the last beat: the sun opens its rays */
.ch--mkt-program .pg-rays {
    transition: opacity 1.8s var(--ease);
}
.motion.ch-ready .ch--mkt-program:not([data-seen~="costs"]) .pg-rays {
    opacity: 0;
    transition-duration: 0.6s;
}
.motion .ch--mkt-program .pg-spin {
    animation: pg-spin 120s linear infinite;
}
@keyframes pg-spin {
    to { rotate: 25deg; }
}

/* ---- the life of the place, only with motion, resting while the section is off screen */
.motion .ch--mkt-program .pg-birds {
    animation: pg-fly 70s linear infinite;
}
.motion .ch--mkt-program .pg-birds--1 {
    animation-delay: -24s;
}
.motion .ch--mkt-program .pg-birds--2 {
    animation-duration: 96s;
    animation-delay: -60s;
}
@keyframes pg-fly {
    from { translate: 1720px 0; }
    to { translate: -260px -40px; }
}
.motion .ch--mkt-program .pg-mglow {
    transform-box: fill-box;
    transform-origin: center;
    animation: pg-breathe 4.6s ease-in-out infinite;
}
.motion .ch--mkt-program .pg-mk:nth-child(2n) .pg-mglow {
    animation-delay: -1.5s;
}
.motion .ch--mkt-program .pg-mk:nth-child(3n) .pg-mglow {
    animation-delay: -3s;
}
@keyframes pg-breathe {
    50% { scale: 1.18; opacity: 0.7; }
}

/* ---- the morning clears while the section is read: the haze on the horizon thins, the clouds move on */
@supports (animation-timeline: view()) {
    .motion .ch--mkt-program .pg-haze {
        animation: pg-clear linear both;
        animation-timeline: --ch;
        animation-range: contain 0% contain 100%;
    }
    .motion .ch--mkt-program .ly--clouds {
        animation: pg-clouds linear both;
        animation-timeline: --ch;
        animation-range: cover 0% cover 100%;
    }
    @keyframes pg-clear {
        to { opacity: 0.15; }
    }
    @keyframes pg-clouds {
        from { translate: 2% 0; }
        to { translate: -3% 0; }
    }
}

/* every month: a wave of light runs along the twelve marks again and again, the rhythm of the routine */
.motion.ch-ready .ch--mkt-program[data-beat="every"] .pg-mglow {
    animation: pg-wave 2.8s ease-in-out infinite;
    animation-delay: calc(var(--pg-k, 0) * 0.16s);
}
.ch--mkt-program .pg-mk--2 { --pg-k: 1; }
.ch--mkt-program .pg-mk--3 { --pg-k: 2; }
.ch--mkt-program .pg-mk--4 { --pg-k: 3; }
.ch--mkt-program .pg-mk--5 { --pg-k: 4; }
.ch--mkt-program .pg-mk--6 { --pg-k: 5; }
.ch--mkt-program .pg-mk--7 { --pg-k: 6; }
.ch--mkt-program .pg-mk--8 { --pg-k: 7; }
.ch--mkt-program .pg-mk--9 { --pg-k: 8; }
.ch--mkt-program .pg-mk--10 { --pg-k: 9; }
.ch--mkt-program .pg-mk--11 { --pg-k: 10; }
.ch--mkt-program .pg-mk--12 { --pg-k: 11; }
@keyframes pg-wave {
    0%, 60%, 100% { scale: 1; opacity: 0.75; }
    25% { scale: 1.9; opacity: 1; }
}

/* ==========================================================================
   chapter mkt/results
   ========================================================================== */
/* The villa on the ridge in the morning: the pin drops onto its lawn, a car brings a guest who walks up the path,
   the shutters swing open, the dashboard lights up in the office, the guest strolls down to the pool as the parasol
   opens, and the morning settles. Without motion the pin stands, the rooms and the screen are lit, the shutters
   are open, the guest is at the pool and the rays are out. */
/* the opening screen: the words high in the calm sky, the place below them */
.ch--mkt-results .ch__head {
    align-content: start;
    padding-top: calc(var(--head-h) + 10vh);
}
/* the stage paints the whole sky while it holds the screen; the plain section sky only shows on a still page */
.motion .ch--mkt-results > .sec__sky {
    display: none;
}
.ch--mkt-results .res-note {
    color: var(--fg);
    font-size: var(--step-lead);
    line-height: 1.5;
    text-wrap: pretty;
}

/* ---- the nine measures: one table on its own panel, its caption the panel's title */
.ch--mkt-results .res-kpi {
    position: relative;
    isolation: isolate;
    width: min(100%, 38rem);
    padding: clamp(24px, 3vw, 38px);
}
.ch--mkt-results .res-kpi::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--panel);
    clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
}
/* its gold facet is lit while one of its row groups is the current beat */
.ch--mkt-results .res-kpi::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: var(--cut);
    height: var(--cut);
    background: var(--gold);
    clip-path: polygon(0 0, 100% 0, 100% 100%);
    opacity: 0.32;
    transition: opacity 0.6s var(--ease);
}
.ch--mkt-results:is([data-beat="track"], [data-beat="maps"], [data-beat="stay"]) .res-kpi::after,
:root:not(.ch-ready) .ch--mkt-results .res-kpi::after {
    opacity: 1;
}
.ch--mkt-results .table-wrap {
    margin: 0;
    border: 0;
    border-radius: 0;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
.ch--mkt-results .compare {
    min-width: 0;
    font-size: 1rem;
}
.ch--mkt-results .compare caption {
    padding: 0 0 14px;
    color: var(--fg);
    font: 600 clamp(1.5rem, 1.05rem + 1.4vw, 2.3rem)/1.06 var(--display);
    letter-spacing: -0.016em;
    text-align: left;
    text-wrap: balance;
}
.ch--mkt-results .compare th,
.ch--mkt-results .compare td {
    padding: 11px 0;
    line-height: 1.42;
}
.ch--mkt-results .compare th:first-child {
    width: 60%;
    min-width: 0;
    padding-right: 22px;
}
.ch--mkt-results .compare thead th {
    position: static;
    padding-block: 0 9px;
    color: var(--fg-soft);
    font: 600 0.9375rem/1.3 var(--text);
    white-space: normal;
}
.ch--mkt-results .compare tbody th {
    color: var(--fg);
    font-weight: 500;
}
.ch--mkt-results .compare td {
    color: var(--fg-soft);
}
.ch--mkt-results .compare tbody tr:hover {
    background: none;
}
/* the row groups are beats, but inside the one table they are plain row groups */
.ch--mkt-results tbody.beat {
    display: table-row-group;
    position: static;
    isolation: auto;
    width: auto;
    padding: 0;
}
.ch--mkt-results tbody.beat::before,
.ch--mkt-results tbody.beat::after {
    content: none;
}
.ch--mkt-results .compare tbody:not(:last-child) tr:last-child > * {
    border-bottom: 1px solid var(--line);
}

/* ---- how we report, and what we leave alone */
.ch--mkt-results .res-facts {
    display: grid;
    gap: 16px;
}
.ch--mkt-results .res-facts dt {
    color: var(--fg);
    font-weight: 600;
    line-height: 1.4;
}
.ch--mkt-results .res-facts dd {
    margin: 2px 0 0;
    color: var(--fg-soft);
    line-height: 1.45;
}
.ch--mkt-results .res-list {
    display: grid;
    gap: 9px;
}
.ch--mkt-results .res-list li {
    position: relative;
    padding-left: 28px;
    color: var(--fg);
    line-height: 1.42;
}
/* a small cross before each: things we leave alone */
.ch--mkt-results .res-list li::before,
.ch--mkt-results .res-list li::after {
    content: "";
    position: absolute;
    left: 2px;
    top: calc(0.71em - 1px);
    width: 13px;
    height: 2px;
    border-radius: 1px;
    background: var(--gold-ink);
    rotate: 45deg;
}
.ch--mkt-results .res-list li::after {
    rotate: -45deg;
}
/* the seven lines are one panel of two lists, each a beat; inside the one panel they read as one list */
.ch--mkt-results .res-dont {
    position: relative;
    isolation: isolate;
    display: grid;
    align-content: start;
    gap: 9px;
    width: min(100%, 35rem);
    padding: clamp(24px, 3vw, 38px);
}
.ch--mkt-results .res-dont::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--panel);
    clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
}
.ch--mkt-results .res-dont::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: var(--cut);
    height: var(--cut);
    background: var(--gold);
    clip-path: polygon(0 0, 100% 0, 100% 100%);
    opacity: 0.32;
    transition: opacity 0.6s var(--ease);
}
.ch--mkt-results:is([data-beat="dont"], [data-beat="own"]) .res-dont::after,
:root:not(.ch-ready) .ch--mkt-results .res-dont::after {
    opacity: 1;
}
.ch--mkt-results .res-dont .beat__title {
    margin-bottom: 5px;
}
.ch--mkt-results .res-dont .beat {
    position: static;
    isolation: auto;
    width: auto;
    padding: 0;
    gap: 9px;
}
.ch--mkt-results .res-dont .beat::before,
.ch--mkt-results .res-dont .beat::after {
    content: none;
}

/* ---- a phone: compact panels, so the drawing below each one stays in view */
@media (max-width: 40em) {
    .ch--mkt-results .beat {
        gap: 12px;
        padding: 20px 20px 22px;
    }
    .ch--mkt-results .res-facts {
        gap: 12px;
        font-size: 1rem;
    }
    .ch--mkt-results .res-list {
        gap: 5px;
        font-size: 1rem;
    }
    .ch--mkt-results .res-list li {
        padding-left: 26px;
        line-height: 1.4;
    }
    .ch--mkt-results .res-dont {
        gap: 5px;
        padding: 20px 20px 22px;
    }
    .ch--mkt-results .res-dont .beat {
        gap: 5px;
    }
    .ch--mkt-results .res-dont .beat__title {
        margin-bottom: 7px;
    }
    .ch--mkt-results .compare thead th {
        font-size: 1rem;
    }
}

/* ---- with motion on a phone the table opens into three panels, one per row group, with the drawing between
   them: the first holds the caption and the column heads, and each panel is the beat of its rows */
@media (max-width: 56em) {
    .motion .ch--mkt-results .res-kpi {
        width: 100%;
        padding: 0;
    }
    .motion .ch--mkt-results .res-kpi::before,
    .motion .ch--mkt-results .res-kpi::after {
        content: none;
    }
    .motion .ch--mkt-results .compare {
        display: grid;
        position: relative;
        isolation: isolate;
    }
    .motion .ch--mkt-results .compare > * {
        grid-column: 1;
    }
    .motion .ch--mkt-results .compare caption {
        grid-row: 1;
        padding: 20px 20px 12px;
    }
    .motion .ch--mkt-results .compare thead {
        grid-row: 2;
        padding-inline: 20px;
    }
    .motion .ch--mkt-results tbody.beat {
        display: block;
        position: relative;
        isolation: isolate;
        padding: 0 20px 18px;
    }
    .motion .ch--mkt-results tbody.beat:nth-of-type(1) {
        grid-row: 3;
    }
    .motion .ch--mkt-results tbody.beat:nth-of-type(2) {
        grid-row: 4;
    }
    .motion .ch--mkt-results tbody.beat:nth-of-type(3) {
        grid-row: 5;
    }
    .motion .ch--mkt-results tbody.beat:nth-of-type(n + 2) {
        margin-top: max(34vh, 260px);
        padding-top: 10px;
    }
    .motion .ch--mkt-results tbody.beat:nth-of-type(n + 2)::before,
    .motion .ch--mkt-results tbody.beat:nth-of-type(n + 2)::after {
        content: "";
    }
    /* the first panel: behind the caption, the column heads and the first rows */
    .motion .ch--mkt-results .compare::before {
        content: "";
        grid-row: 1 / 4;
        grid-column: 1;
        z-index: -1;
        background: var(--panel);
        clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
    }
    .motion .ch--mkt-results .compare::after {
        content: "";
        grid-row: 1;
        grid-column: 1;
        justify-self: end;
        align-self: start;
        width: var(--cut);
        height: var(--cut);
        background: var(--gold);
        clip-path: polygon(0 0, 100% 0, 100% 100%);
        opacity: 0.32;
        transition: opacity 0.6s var(--ease);
    }
    .motion .ch--mkt-results[data-beat="track"] .compare::after {
        opacity: 1;
    }
    /* each row a grid of two columns that line up from row to row */
    .motion .ch--mkt-results .compare tr {
        display: grid;
        grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
        column-gap: 16px;
    }
    .motion .ch--mkt-results .compare :is(th, td) {
        display: block;
        width: auto;
        padding: 10px 0;
    }
    .motion .ch--mkt-results .compare thead :is(th, td) {
        padding: 0 0 8px;
        border-bottom: 1px solid var(--line);
    }
    .motion .ch--mkt-results .compare tbody tr:last-child > * {
        border-bottom: 0;
    }
    /* the seven lines open the same way: the title and the first four on one panel, the last three on the next */
    .motion .ch--mkt-results .res-dont {
        width: 100%;
        gap: 0;
        padding: 0;
    }
    .motion .ch--mkt-results .res-dont > * {
        grid-column: 1;
    }
    .motion .ch--mkt-results .res-dont::before {
        position: static;
        grid-row: 1 / 3;
        grid-column: 1;
    }
    .motion .ch--mkt-results .res-dont::after {
        position: static;
        grid-row: 1;
        grid-column: 1;
        justify-self: end;
        align-self: start;
    }
    .motion .ch--mkt-results[data-beat="own"] .res-dont::after {
        opacity: 0.32;
    }
    .motion .ch--mkt-results .res-dont .beat__title {
        grid-row: 1;
        margin: 0;
        padding: 20px 20px 12px;
    }
    .motion .ch--mkt-results .res-dont .beat[data-beat="dont"] {
        grid-row: 2;
        padding: 0 20px 22px;
    }
    .motion .ch--mkt-results .res-dont .beat[data-beat="own"] {
        grid-row: 3;
        position: relative;
        isolation: isolate;
        margin-top: max(34vh, 260px);
        padding: 22px 20px;
    }
    .motion .ch--mkt-results .res-dont .beat[data-beat="own"]::before,
    .motion .ch--mkt-results .res-dont .beat[data-beat="own"]::after {
        content: "";
    }
}

/* a still page reads its words in one column; the picture of its opening screen shows the pin and the villa
   whole, and fades into the morning at its foot */
:root:not(.motion) .ch--mkt-results .beats {
    grid-template-columns: minmax(0, 46rem);
}
:root:not(.motion) .ch--mkt-results .res-kpi {
    width: 100%;
}
:root:not(.motion) .ch--mkt-results {
    --u: 0.755;
    --zx: 75.5%;
}
:root:not(.motion) .ch--mkt-results .ch__frame::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 22%;
    background: linear-gradient(rgba(198, 222, 233, 0), var(--sky-m, #c6dee9));
}

/* ---- the camera. A phone sees a quarter of the drawing: it opens on the villa and its pool, comes to the pin,
   follows the road and the path to the gate, steps back to show the pin and the villa whole, looks into the
   office, goes down to the pool, and ends stepping back on the pin, the villa and the pool together. A zoom about
   a point high in the frame lowers the place below a long panel; about a low point it keeps the place still.
   On a wide screen the whole place is in view and it comes a little closer to each part. */
.ch--mkt-results {
    --u: 0.84;
    --zx: 84%;
    --zy: 86%;
}
.ch--mkt-results[data-beat="kpi"] { --u: 0.6875; --zx: 68.75%; --zy: 30%; --zoom: 1.12; }
.ch--mkt-results[data-beat="track"] { --u: 0.48; --zx: 48%; --zy: 80%; --zoom: 1.1; }
.ch--mkt-results[data-beat="maps"] { --u: 0.5; --zx: 50%; --zy: 80%; --zoom: 1.15; }
.ch--mkt-results[data-beat="stay"] { --u: 0.8625; --zx: 86.25%; --zy: 30%; --zoom: 1.08; }
.ch--mkt-results[data-beat="report"] { --u: 0.6375; --zx: 63.75%; --zy: 0%; --zoom: 1.15; }
.ch--mkt-results[data-beat="dont"] { --u: 0.875; --zx: 90%; --zy: 40%; --zoom: 1.15; }
.ch--mkt-results[data-beat="own"] { --u: 0.755; --zx: 75.5%; --zy: 86%; --zoom: 1; }
@media (min-width: 56.01em) {
    .ch--mkt-results {
        --s: 0.64;
        --pan: 0.3;
    }
    .ch--mkt-results[data-beat] {
        --zoom: 1.14;
    }
    .ch--mkt-results[data-beat="kpi"] { --zx: 69%; --zy: 69%; }
    .ch--mkt-results[data-beat="track"] { --zx: 47%; --zy: 79%; }
    .ch--mkt-results[data-beat="maps"] { --zx: 52%; --zy: 75%; }
    .ch--mkt-results[data-beat="stay"] { --zx: 82%; --zy: 71%; }
    .ch--mkt-results[data-beat="report"] { --zx: 63%; --zy: 69%; }
    .ch--mkt-results[data-beat="dont"] { --zx: 92%; --zy: 73%; --zoom: 1.1; }
    .ch--mkt-results[data-beat="own"] { --zx: 76%; --zy: 72%; --zoom: 1.02; }
}
/* a tablet shows three quarters of the drawing beside a wide panel: the camera leans all the way, and the panels
   are narrower, so the road and the path stay in view */
@media (min-width: 56.01em) and (max-width: 75em) {
    .ch--mkt-results {
        --s: 0.8;
        --pan: 1;
    }
    .ch--mkt-results .beat,
    .ch--mkt-results :is(.res-kpi, .res-dont) {
        width: min(100%, 31rem);
    }
}
@media (max-width: 56em) {
    .ch--mkt-results .ch__head {
        padding-top: calc(var(--head-h) + 5vh);
    }
}
/* a phone on its side sees the whole width but only the foot of the drawing: narrow panels in the phone's type keep
   the left of the screen and stay shorter than it, the camera leans the road and the path out from under them, and
   a band of the morning sky keeps the opening words on calm ground */
@media (max-height: 30em) and (orientation: landscape) {
    .ch--mkt-results .beat,
    .motion .ch--mkt-results :is(.res-kpi, .res-dont) {
        width: min(100%, 26rem);
    }
    .ch--mkt-results :is(.beat, .res-dont) {
        gap: 10px;
        padding: 18px 20px 20px;
    }
    .ch--mkt-results :is(.res-note, .res-facts, .res-list, .compare) {
        font-size: 1rem;
    }
    .ch--mkt-results .res-facts {
        gap: 10px;
    }
    .ch--mkt-results .res-list {
        gap: 5px;
    }
    .ch--mkt-results:is([data-beat="track"], [data-beat="maps"]) {
        --zx: 0%;
        --zoom: 1.15;
    }
    .ch--mkt-results .ch__head {
        position: relative;
        isolation: isolate;
    }
    .ch--mkt-results .ch__head::before {
        content: "";
        position: absolute;
        z-index: -1;
        inset: calc(var(--head-h) - 8px) -40vw 18px -40vw;
        background: linear-gradient(90deg, rgba(222, 236, 242, 0.94) 0%, rgba(222, 236, 242, 0.88) 55%, rgba(222, 236, 242, 0) 82%);
        pointer-events: none;
    }
}

/* ---- the pin: out of sight until the targets are locked, then it drops onto the lawn with a soft bounce */
.motion.ch-ready .ch--mkt-results:not([data-seen~="kpi"]) .res-pin {
    translate: 0 -780px;
    opacity: 0;
}
.motion.ch-ready .ch--mkt-results[data-seen~="kpi"] .res-pin {
    animation: res-drop 1.6s linear both;
}
@keyframes res-drop {
    0% { translate: 0 -780px; scale: 0.96 1.05; opacity: 0; animation-timing-function: cubic-bezier(0.5, 0, 0.9, 0.5); }
    8% { opacity: 1; }
    40% { translate: 0 0; scale: 1.1 0.88; animation-timing-function: cubic-bezier(0.1, 0.5, 0.4, 1); }
    56% { translate: 0 -42px; scale: 0.97 1.04; animation-timing-function: cubic-bezier(0.5, 0, 0.9, 0.5); }
    70% { translate: 0 0; scale: 1.05 0.94; animation-timing-function: cubic-bezier(0.1, 0.5, 0.4, 1); }
    82% { translate: 0 -9px; scale: 1 1.01; animation-timing-function: cubic-bezier(0.5, 0, 0.9, 0.5); }
    92%, 100% { translate: 0 0; scale: 1 1; opacity: 1; }
}
/* its shadow grows as it falls; the warm light on the lawn comes once it has landed */
.ch--mkt-results :is(.res-shadow, .res-ring) {
    transform-box: fill-box;
    transform-origin: center;
}
.motion.ch-ready .ch--mkt-results:not([data-seen~="kpi"]) .res-shadow {
    scale: 0.2;
    opacity: 0;
}
.motion.ch-ready .ch--mkt-results[data-seen~="kpi"] .res-shadow {
    animation: res-shadow 1.6s linear both;
}
@keyframes res-shadow {
    0% { scale: 0.15; opacity: 0; animation-timing-function: cubic-bezier(0.5, 0, 0.9, 0.5); }
    40% { scale: 1.14; opacity: 1; animation-timing-function: cubic-bezier(0.1, 0.5, 0.4, 1); }
    56% { scale: 0.84; animation-timing-function: cubic-bezier(0.5, 0, 0.9, 0.5); }
    70% { scale: 1.05; }
    82% { scale: 0.97; }
    92%, 100% { scale: 1; opacity: 1; }
}
.ch--mkt-results .res-found {
    transition: opacity 1.4s var(--ease) 0.6s;
}
.motion.ch-ready .ch--mkt-results:not([data-seen~="kpi"]) .res-found {
    opacity: 0;
    transition-delay: 0s;
}
/* the rings: spread twice as it lands, pulse while the reports are read, then rest */
.ch--mkt-results .res-ring {
    opacity: 0;
}
.motion.ch-ready .ch--mkt-results[data-seen~="kpi"] .res-ring {
    animation: res-ring 2.4s cubic-bezier(0.2, 0.6, 0.35, 1) 0.62s 1 forwards;
}
.motion.ch-ready .ch--mkt-results[data-seen~="kpi"] .res-ring--2 {
    animation-delay: 1.82s;
}
.motion.ch-ready .ch--mkt-results[data-beat="report"] .res-ring {
    animation-iteration-count: infinite;
}
@keyframes res-ring {
    0% { opacity: 0.95; scale: 0.4; }
    100% { opacity: 0; scale: 2.7; }
}
/* now and then a gleam runs across the pin's facets */
.ch--mkt-results .res-gleam {
    opacity: 0;
}
.motion .ch--mkt-results .res-gleam {
    animation: res-gleam 7s var(--ease-in-out) 2s infinite;
}
@keyframes res-gleam {
    0% { translate: 0 0; opacity: 0; }
    5% { opacity: 1; }
    22%, 100% { translate: 230px 0; opacity: 0; }
}

/* ---- the car: along the road from the left, a stop below the path, then on to the right once the guest is out */
.ch--mkt-results .res-car {
    opacity: 0;
    translate: 860px 0;
    transition: translate 2.6s cubic-bezier(0.55, 0, 0.85, 0.45) 1.2s, opacity 0.4s linear 3.2s;
}
.motion.ch-ready .ch--mkt-results:not([data-seen~="track"]) .res-car {
    translate: -900px 0;
    transition: translate 1.4s var(--ease-in-out), opacity 0.3s linear;
}
.motion.ch-ready .ch--mkt-results[data-seen~="track"]:not([data-seen~="maps"]) .res-car {
    translate: 0 0;
    opacity: 1;
    transition: translate 2.8s cubic-bezier(0.15, 0.6, 0.3, 1), opacity 0.3s linear;
}

/* ---- the guest: out of the car and up the path to the gate, smaller as the path goes away from us */
.ch--mkt-results .res-walker {
    opacity: 0;
    translate: 88px -42px;
    scale: 0.86;
    transition: opacity 0.6s var(--ease);
}
.motion.ch-ready .ch--mkt-results:not([data-seen~="maps"]) .res-walker {
    translate: 0 0;
    scale: 1;
}
.motion.ch-ready .ch--mkt-results[data-seen~="maps"]:not([data-seen~="stay"]) .res-walker {
    opacity: 1;
    animation: res-walk 4.2s linear 0.3s both;
}
@keyframes res-walk {
    0% { translate: 0 0; scale: 1; }
    34% { translate: 29px -15px; scale: 0.96; }
    72% { translate: 84px -31px; scale: 0.9; }
    100% { translate: 88px -42px; scale: 0.86; }
}
.ch--mkt-results .res-leg--b {
    opacity: 0;
}
.motion.ch-ready .ch--mkt-results[data-seen~="maps"]:not([data-seen~="stay"]) .res-leg--a {
    animation: res-step 0.5s steps(1) 0.3s 8;
}
.motion.ch-ready .ch--mkt-results[data-seen~="maps"]:not([data-seen~="stay"]) .res-leg--b {
    animation: res-step-b 0.5s steps(1) 0.3s 8;
}
@keyframes res-step {
    50% { opacity: 0; }
}
@keyframes res-step-b {
    0% { opacity: 0; }
    50% { opacity: 1; }
}

/* ---- the villa opens: the door leaves turn in, the window shutters swing out and fold back against the wall, the
   rooms behind them are lit, and the guest stands in the doorway with the suitcase set down */
.ch--mkt-results .res-lf {
    transform-box: fill-box;
    transition: scale 1.3s var(--ease-in-out) 0.45s;
}
.ch--mkt-results .res-lf--l {
    transform-origin: 0% 50%;
    scale: -0.42 1;
}
.ch--mkt-results .res-lf--r {
    transform-origin: 100% 50%;
    scale: -0.42 1;
}
.ch--mkt-results .res-lf--door {
    scale: 0.16 1;
    transition-delay: 0.1s;
}
.motion.ch-ready .ch--mkt-results:not([data-seen~="stay"]) .res-lf {
    scale: 1 1;
    transition-delay: 0s;
}
.ch--mkt-results .res-rooms {
    transition: opacity 1s var(--ease) 0.4s;
}
.motion.ch-ready .ch--mkt-results:not([data-seen~="stay"]) .res-rooms {
    opacity: 0;
    transition-delay: 0s;
}
.ch--mkt-results :is(.res-host, .res-case) {
    opacity: 0;
    transition: opacity 0.8s var(--ease);
}
.motion.ch-ready .ch--mkt-results[data-seen~="stay"]:not([data-seen~="dont"]) :is(.res-host, .res-case) {
    opacity: 1;
    transition-delay: 1.2s;
}
/* standing in the doorway the guest's feet are together */
.ch--mkt-results .res-h-leg--a {
    opacity: 0;
}

/* ---- down to the pool: the guest strolls along the terrace and steps down to the loungers, where the parasol opens
   and the guest lies down */
.motion.ch-ready .ch--mkt-results[data-seen~="dont"] .res-host {
    animation: res-stroll 3.4s linear 0.3s both;
}
@keyframes res-stroll {
    0% { translate: 0 0; opacity: 1; }
    20% { translate: 26px -0.8px; }
    40% { translate: 54px 0; }
    60% { translate: 82px -0.8px; }
    76% { translate: 106px 0; }
    88% { translate: 124px 9px; }
    94% { translate: 136px 17px; opacity: 1; }
    100% { translate: 142px 17px; opacity: 0; }
}
.motion.ch-ready .ch--mkt-results[data-seen~="dont"] .res-h-leg--a {
    animation: res-step 0.5s steps(1) 0.3s 6;
}
.motion.ch-ready .ch--mkt-results[data-seen~="dont"] .res-h-leg--b {
    animation: res-step-b 0.5s steps(1) 0.3s 6;
}
.ch--mkt-results .res-shade {
    transform-box: fill-box;
    transform-origin: 50% 0%;
    transition: scale 1s var(--ease) 2.6s;
}
.motion.ch-ready .ch--mkt-results:not([data-seen~="dont"]) .res-shade {
    scale: 0.14 1.5;
    transition-delay: 0s;
}

/* ---- the office: the dashboard comes on with a flicker, its bars grow one after another */
.motion.ch-ready .ch--mkt-results:not([data-seen~="report"]) .res-screen {
    opacity: 0;
}
.motion.ch-ready .ch--mkt-results[data-seen~="report"] .res-screen {
    animation: res-on 1.2s var(--ease) both;
}
@keyframes res-on {
    0% { opacity: 0; }
    10% { opacity: 0.9; }
    16% { opacity: 0.25; }
    26%, 100% { opacity: 1; }
}
.ch--mkt-results .res-bar {
    transform-box: fill-box;
    transform-origin: 50% 100%;
}
.motion.ch-ready .ch--mkt-results:not([data-seen~="report"]) .res-bar {
    scale: 1 0;
}
.motion.ch-ready .ch--mkt-results[data-seen~="report"] .res-bar {
    animation: res-bar 0.9s var(--ease) 0.5s both;
}
.motion.ch-ready .ch--mkt-results[data-seen~="report"] .res-bar--2 { animation-delay: 0.65s; }
.motion.ch-ready .ch--mkt-results[data-seen~="report"] .res-bar--3 { animation-delay: 0.8s; }
.motion.ch-ready .ch--mkt-results[data-seen~="report"] .res-bar--4 { animation-delay: 0.95s; }
.motion.ch-ready .ch--mkt-results[data-seen~="report"] .res-bar--5 { animation-delay: 1.1s; }
@keyframes res-bar {
    from { scale: 1 0; }
}

.ch--mkt-results .res-bather {
    transition: opacity 1s var(--ease) 3.3s;
}
.motion.ch-ready .ch--mkt-results:not([data-seen~="dont"]) .res-bather {
    opacity: 0;
    transition-delay: 0s;
}

/* ---- the morning settles: the camera steps back, the sun's rays open over the valley and the pin rings once more */
.ch--mkt-results .res-rays {
    transform-box: view-box;
    transform-origin: 1500px 110px;
    transition: opacity 2.2s var(--ease) 0.3s, rotate 3s var(--ease-in-out) 0.3s;
}
.motion.ch-ready .ch--mkt-results:not([data-seen~="own"]) .res-rays {
    opacity: 0;
    rotate: -9deg;
    transition: opacity 0.8s var(--ease), rotate 0.8s var(--ease);
}
.motion.ch-ready .ch--mkt-results[data-seen~="own"] .res-ring {
    animation-name: res-ring-b;
}
@keyframes res-ring-b {
    0% { opacity: 0.95; scale: 0.4; }
    100% { opacity: 0; scale: 2.7; }
}

/* ---- the life of the place, only with motion, resting while the section is off screen */
.motion .ch--mkt-results .res-shim path {
    animation: res-shim 3.4s ease-in-out infinite alternate;
}
.motion .ch--mkt-results .res-shim path:nth-child(2n) {
    animation-delay: -1.7s;
}
@keyframes res-shim {
    to { translate: 9px 0; opacity: 0.3; }
}
.motion .ch--mkt-results .res-penjor {
    animation: res-sway 6s ease-in-out infinite alternate;
}
@keyframes res-sway {
    from { rotate: -1.2deg; }
    to { rotate: 1.4deg; }
}
.motion .ch--mkt-results .res-rays path {
    transform-box: view-box;
    transform-origin: 1500px 110px;
    animation: res-turn 40s ease-in-out infinite alternate;
}
@keyframes res-turn {
    from { rotate: -3deg; }
    to { rotate: 3deg; }
}
.motion .ch--mkt-results .res-mist2 {
    animation-duration: 30s;
    animation-delay: -12s;
}
.motion .ch--mkt-results .res-drift2 {
    animation-duration: 80s;
    animation-delay: -30s;
}
/* the birds cross the valley on the right only, where no words sit on a wide screen */
.motion .ch--mkt-results .flock {
    animation: res-flock 26s linear -6s infinite;
}
@keyframes res-flock {
    0% { transform: translateX(160px); opacity: 0; }
    8%, 88% { opacity: 1; }
    100% { transform: translateX(-460px); opacity: 0; }
}

/* ---- the morning goes on while the section is read: the sun climbs, the mist in the valley lifts, the clouds
   move on and the light on the ridge grows */
@supports (animation-timeline: view()) {
    .motion .ch--mkt-results .ly--sun {
        animation: res-rise linear both;
        animation-timeline: --ch;
        animation-range: contain 0% contain 100%;
    }
    .motion .ch--mkt-results .res-haze {
        animation: res-lift linear both;
        animation-timeline: --ch;
        animation-range: contain 0% contain 80%;
    }
    .motion .ch--mkt-results .ly--clouds {
        animation: res-drift linear both;
        animation-timeline: --ch;
        animation-range: contain 0% contain 100%;
    }
    .motion .ch--mkt-results .ly--light {
        animation: res-warm linear both;
        animation-timeline: --ch;
        animation-range: contain 0% contain 100%;
    }
    @keyframes res-rise {
        from { translate: 0 4%; }
        to { translate: 0 -4%; }
    }
    @keyframes res-lift {
        to { opacity: 0.25; translate: 0 -2%; }
    }
    @keyframes res-drift {
        to { translate: -3% 0; }
    }
    @keyframes res-warm {
        from { opacity: 0.5; }
    }
}

/* ==========================================================================
   chapter mkt/rates
   ========================================================================== */
/* The morning market: every group of the rate card is a stall along the market wall. Before its beat a stall is
   closed, its parasol furled and its goods under woven covers; its beat opens it, a shaft of light falls on it,
   the seller greets the shopper as she walks over. Her basket fills with every line the visitor picks (--mix-n,
   set by mkt-mix.js). Without motion every stall is open. */
.ch--mkt-rates.sec--day {
    --panel: rgba(255, 252, 243, 0.95);
}
.ch--mkt-rates .ch__head {
    align-content: start;
}
.ch--mkt-rates .beat {
    gap: 10px;
}
/* the shared strip of land at the foot carries a boat; the boats belong to the sea chapters, not to the market */
.ch--mkt-rates .sec__ground .boat {
    display: none;
}

/* ---- the rate card: a line is a button that adds it to the list; the circle turns gold with a tick once it is in */
.ch--mkt-rates .rc-lines {
    display: grid;
    margin-inline: -12px;
}
.ch--mkt-rates .rc-lines li + li {
    border-top: 1px solid var(--line);
}
.ch--mkt-rates .mkt-pick {
    position: relative;
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    column-gap: 12px;
    align-items: start;
    min-height: 44px;
    padding: 10px 12px;
    border: 0;
    border-radius: 10px;
    line-height: 1.42;
}
.ch--mkt-rates .mkt-pick::before {
    content: "";
    grid-row: 1 / span 2;
    width: 22px;
    height: 22px;
    margin-top: 1px;
    border-radius: 50%;
    background: linear-gradient(var(--fg), var(--fg)) center / 10px 2px no-repeat, linear-gradient(var(--fg), var(--fg)) center / 2px 10px no-repeat;
    box-shadow: inset 0 0 0 1.5px rgba(28, 31, 38, 0.38);
    transition: background-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.ch--mkt-rates .mkt-pick::after {
    content: "";
    position: absolute;
    top: 14px;
    left: 20px;
    width: 6px;
    height: 11px;
    border: solid var(--ink);
    border-width: 0 2px 2px 0;
    rotate: 45deg;
    opacity: 0;
    transition: opacity 0.2s var(--ease);
}
.ch--mkt-rates .mkt-pick:hover {
    border-color: transparent;
    background: rgba(253, 191, 20, 0.1);
}
.ch--mkt-rates .mkt-pick:focus-visible {
    outline-offset: -2px;
}
.ch--mkt-rates .mkt-pick[aria-pressed="true"] {
    border-color: transparent;
    background: rgba(253, 191, 20, 0.2);
}
.ch--mkt-rates .mkt-pick[aria-pressed="true"]::before {
    background: var(--gold);
    box-shadow: none;
}
.ch--mkt-rates .mkt-pick[aria-pressed="true"]::after {
    opacity: 1;
}
/* the name and its price on one line when they fit; a long price takes its own line, still at the right */
.ch--mkt-rates .menu__row {
    grid-column: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 14px;
}
.ch--mkt-rates .menu__name {
    flex: 1 1 auto;
    color: var(--fg);
    font-weight: 500;
}
.ch--mkt-rates .menu__price {
    flex: 0 1 auto;
    margin-left: auto;
    color: var(--accent);
    font-weight: 650;
    text-align: right;
    text-wrap: balance;
    font-variant-numeric: tabular-nums;
}
.ch--mkt-rates .menu__desc {
    grid-column: 2;
    margin-top: 3px;
    color: var(--fg-soft);
    font-size: 0.94em;
    line-height: 1.45;
}
.ch--mkt-rates .menu__more {
    margin-top: 2px;
}
.ch--mkt-rates .menu__more a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--accent);
    font-weight: 600;
    text-underline-offset: 3px;
}
.ch--mkt-rates .menu__note {
    color: var(--fg-soft);
    font-size: 1rem;
    line-height: 1.6;
}
/* the beat of a panel is a marker inside it. On a phone a tall panel takes over once its foot is a little past
   the middle of the screen, so the stall it opens shows whole below it; a short panel takes over at its top, as
   usual. The panel lights its gold corner while its marker is the current beat. */
.ch--mkt-rates .rc-at {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    padding: 0;
    visibility: hidden;
    pointer-events: none;
}
.ch--mkt-rates .rc-at::before,
.ch--mkt-rates .rc-at::after {
    content: none;
}
.ch--mkt-rates .beat:has(> .rc-at.is-on)::after {
    opacity: 1;
}
/* a group in several panels: the later ones carry the group's name again for the eye only */
.ch--mkt-rates .rc-split {
    display: grid;
    gap: inherit;
}

/* ---- the visitor's list: a panel like the others; on a wide screen it stays beside the rate card */
.ch--mkt-rates .mkt-mix {
    position: relative;
    gap: 14px;
    width: min(100%, 35rem);
    padding: clamp(24px, 3vw, 32px);
    border: 0;
    border-radius: 0;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
.ch--mkt-rates .mkt-mix__title {
    font: 600 clamp(1.5rem, 1.05rem + 1.4vw, 2rem)/1.06 var(--display);
    letter-spacing: -0.016em;
}
.ch--mkt-rates :is(.mkt-mix__empty, .mkt-mix__note) {
    color: var(--fg-soft);
    font-size: 1rem;
    line-height: 1.5;
}
.ch--mkt-rates .mkt-mix__list li {
    gap: 2px 8px;
    padding-block: 8px;
}
.ch--mkt-rates .mkt-mix__name {
    color: var(--fg);
    font-size: 1rem;
}
.ch--mkt-rates .mkt-mix__price {
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
}
.ch--mkt-rates .mkt-mix__out {
    min-width: 44px;
    min-height: 44px;
    color: var(--fg-soft);
    font-size: 0.9rem;
}
.ch--mkt-rates .mkt-mix__actions .btn {
    flex: 1 1 100%;
}
.ch--mkt-rates .mkt-mix__clear {
    min-height: 44px;
    border-bottom: 0;
    color: var(--fg-soft);
    text-decoration: underline;
    text-underline-offset: 4px;
}
@media (min-width: 64.01em) {
    .ch--mkt-rates .mkt-mix {
        position: sticky;
        top: calc(var(--head-h) + 16px);
    }
    /* beside the rate card the list is live the whole time: its corner stays lit, and its marker stays out of
       reach so the walk ends at the shrine with the terms */
    .ch--mkt-rates .mkt-mix::after {
        opacity: 1;
    }
    .ch--mkt-rates .mkt-mix > .rc-at {
        top: 200vh;
    }
    /* a compact list, so it grows down over the far stalls as little as it can: the clear button beside the title,
       tighter lines */
    .ch--mkt-rates .mkt-mix {
        gap: 12px;
        padding: 26px;
    }
    .ch--mkt-rates .mkt-mix__title {
        padding-right: 7rem;
    }
    .ch--mkt-rates .mkt-mix__clear {
        position: absolute;
        top: 20px;
        right: 26px;
    }
    .ch--mkt-rates .mkt-mix__list li {
        padding-block: 5px;
    }
    .ch--mkt-rates :is(.mkt-mix__name, .mkt-mix__price) {
        font-size: 0.94rem;
        line-height: 1.32;
    }
    .ch--mkt-rates .mkt-mix__out {
        min-height: 32px;
    }
}

/* ---- the camera. A phone walks the market with the shopper: from the way in, under the banyan, to each stall in
   turn, close, the stall and the shopper low in the frame under the panel that has just taken over. A wide
   screen keeps the whole market in view and only leans toward the stall. */
.ch--mkt-rates {
    --u: 0.415;
    --zx: 41.5%;
    --zy: 100%;
    --zoom: 1.08;
}
.ch--mkt-rates[data-beat] {
    --zy: 27.6%;
}
.ch--mkt-rates[data-beat="hotel"] { --u: 0.431; --zx: 43.1%; }
.ch--mkt-rates[data-beat="seo"] { --u: 0.495; --zx: 49.5%; }
.ch--mkt-rates[data-beat="start"] { --u: 0.558; --zx: 55.8%; }
.ch--mkt-rates:is([data-beat="addons"], [data-beat="addons2"], [data-beat="addons3"]) { --u: 0.62; --zx: 62%; }
.ch--mkt-rates:is([data-beat="projects"], [data-beat="projects2"]) { --u: 0.683; --zx: 68.3%; }
.ch--mkt-rates[data-beat="content"] { --u: 0.745; --zx: 74.5%; }
.ch--mkt-rates[data-beat="consulting"] { --u: 0.813; --zx: 81.3%; }
.ch--mkt-rates[data-beat="onrequest"] { --u: 0.881; --zx: 88.1%; }
.ch--mkt-rates[data-beat="terms"] { --u: 0.944; --zx: 94.4%; }
.ch--mkt-rates[data-beat="list"] { --u: 0.874; --zx: 87.4%; }
@media (max-width: 56em) {
    /* each beat its own distance: closer on the small things a beat brings out (the scale, the garlands, the
       offerings, the hanging baskets, the two men talking), closest on her basket at the end. Each origin keeps
       her feet just above the toolbar's tenth. */
    .ch--mkt-rates:is([data-beat="seo"], [data-beat="content"], [data-beat="onrequest"]) {
        --zoom: 1.1;
        --zy: 38.8%;
    }
    .ch--mkt-rates:is([data-beat="start"], [data-beat="addons2"], [data-beat="projects2"], [data-beat="consulting"]) {
        --zoom: 1.12;
        --zy: 46.2%;
    }
    .ch--mkt-rates[data-beat="addons3"] {
        --zoom: 1.14;
        --zy: 51.5%;
    }
    .ch--mkt-rates[data-beat="list"] {
        --zoom: 1.15;
        --zy: 53.7%;
    }
}
@media (min-width: 56.01em) {
    .ch--mkt-rates {
        --s: 0.5;
        --pan: 0.35;
        --u: 0.5;
        --zx: 50%;
        --zy: 100%;
        --zoom: 1;
    }
    .ch--mkt-rates[data-beat] {
        --s: 0.62;
        --zoom: 1.14;
        --zy: 77%;
    }
}

/* ---- the stalls: closed until their beat, then the covers come off, the parasol opens and the goods come out */
.ch--mkt-rates :is(.rc-umb, .rc-fold, .rc-tw, .rc-roll) {
    transform-box: fill-box;
    transform-origin: 50% 0;
}
.ch--mkt-rates .rc-umb {
    transition: scale 0.9s cubic-bezier(0.34, 1.45, 0.64, 1) 0.15s, opacity 0.3s var(--ease) 0.15s;
}
.ch--mkt-rates .rc-fold {
    opacity: 0;
    transition: opacity 0.25s var(--ease) 0.2s;
}
.ch--mkt-rates .rc-cover {
    opacity: 0;
    translate: 0 -22px;
    transition: opacity 0.45s var(--ease) 0.35s, translate 0.8s var(--ease) 0.2s;
}
.ch--mkt-rates :is(.rc-goods, .rc-more, .rc-front) {
    transition: opacity 0.6s var(--ease) 0.75s, translate 0.8s var(--ease) 0.75s;
}
.ch--mkt-rates .rc-tw {
    transform-origin: 50% 100%;
    transition: scale 0.7s cubic-bezier(0.34, 1.4, 0.64, 1) calc(0.85s + var(--d, 0) * 0.16s);
}
.ch--mkt-rates .rc-roll {
    transition: scale 0.9s var(--ease) calc(0.85s + var(--d, 0) * 0.14s);
}
.motion.ch-ready .ch--mkt-rates:not([data-seen~="hotel"]) .rc-c--hotel .rc-umb,
.motion.ch-ready .ch--mkt-rates:not([data-seen~="seo"]) .rc-c--seo .rc-umb,
.motion.ch-ready .ch--mkt-rates:not([data-seen~="start"]) .rc-c--start .rc-umb,
.motion.ch-ready .ch--mkt-rates:not([data-seen~="addons"]) .rc-c--addons .rc-umb,
.motion.ch-ready .ch--mkt-rates:not([data-seen~="projects"]) .rc-c--projects .rc-umb,
.motion.ch-ready .ch--mkt-rates:not([data-seen~="content"]) .rc-c--content .rc-umb,
.motion.ch-ready .ch--mkt-rates:not([data-seen~="onrequest"]) .rc-c--onrequest .rc-umb,
.motion.ch-ready .ch--mkt-rates:not([data-seen~="terms"]) .rc-c--terms .rc-umb {
    scale: 0.12 0.5;
    opacity: 0;
    transition-delay: 0s;
}
.motion.ch-ready .ch--mkt-rates:not([data-seen~="hotel"]) .rc-c--hotel .rc-fold,
.motion.ch-ready .ch--mkt-rates:not([data-seen~="seo"]) .rc-c--seo .rc-fold,
.motion.ch-ready .ch--mkt-rates:not([data-seen~="start"]) .rc-c--start .rc-fold,
.motion.ch-ready .ch--mkt-rates:not([data-seen~="addons"]) .rc-c--addons .rc-fold,
.motion.ch-ready .ch--mkt-rates:not([data-seen~="projects"]) .rc-c--projects .rc-fold,
.motion.ch-ready .ch--mkt-rates:not([data-seen~="content"]) .rc-c--content .rc-fold,
.motion.ch-ready .ch--mkt-rates:not([data-seen~="onrequest"]) .rc-c--onrequest .rc-fold,
.motion.ch-ready .ch--mkt-rates:not([data-seen~="terms"]) .rc-c--terms .rc-fold {
    opacity: 1;
    transition-delay: 0s;
}
.motion.ch-ready .ch--mkt-rates:not([data-seen~="hotel"]) .rc-s--hotel .rc-cover,
.motion.ch-ready .ch--mkt-rates:not([data-seen~="start"]) .rc-s--start .rc-cover,
.motion.ch-ready .ch--mkt-rates:not([data-seen~="addons"]) .rc-s--addons .rc-cover,
.motion.ch-ready .ch--mkt-rates:not([data-seen~="projects"]) .rc-s--projects .rc-cover,
.motion.ch-ready .ch--mkt-rates:not([data-seen~="content"]) .rc-s--content .rc-cover,
.motion.ch-ready .ch--mkt-rates:not([data-seen~="onrequest"]) .rc-s--onrequest .rc-cover {
    opacity: 1;
    translate: none;
    transition-delay: 0s;
}
.motion.ch-ready .ch--mkt-rates:not([data-seen~="hotel"]) .rc-s--hotel .rc-goods,
.motion.ch-ready .ch--mkt-rates:not([data-seen~="seo"]) .rc-s--seo .rc-goods,
.motion.ch-ready .ch--mkt-rates:not([data-seen~="start"]) .rc-s--start .rc-goods,
.motion.ch-ready .ch--mkt-rates:not([data-seen~="addons"]) .rc-s--addons .rc-goods,
.motion.ch-ready .ch--mkt-rates:not([data-seen~="addons2"]) .rc-s--addons .rc-more,
.motion.ch-ready .ch--mkt-rates:not([data-seen~="addons3"]) .rc-s--addons .rc-front,
.motion.ch-ready .ch--mkt-rates:not([data-seen~="projects"]) .rc-s--projects .rc-goods,
.motion.ch-ready .ch--mkt-rates:not([data-seen~="projects2"]) .rc-s--projects .rc-more,
.motion.ch-ready .ch--mkt-rates:not([data-seen~="content"]) .rc-s--content .rc-goods,
.motion.ch-ready .ch--mkt-rates:not([data-seen~="consulting"]) .rc-s--consulting .rc-goods,
.motion.ch-ready .ch--mkt-rates:not([data-seen~="onrequest"]) .rc-s--onrequest .rc-goods,
.motion.ch-ready .ch--mkt-rates:not([data-seen~="terms"]) .rc-s--terms .rc-goods {
    opacity: 0;
    translate: 0 12px;
    transition-delay: 0s;
    transition-duration: 0.3s;
}
.motion.ch-ready .ch--mkt-rates:not([data-seen~="hotel"]) .rc-tw {
    scale: 1 0.1;
    transition-delay: 0s;
}
.motion.ch-ready .ch--mkt-rates:not([data-seen~="content"]) .rc-roll {
    scale: 1 0.06;
    transition-delay: 0s;
}

/* ---- the light of the beat: a shaft through the leaves onto the stall, warm on the wall behind it, a pool on the
   street where the shopper stands; it moves on with the beat */
.ch--mkt-rates .rc-lit {
    opacity: 0;
    transition: opacity 1.1s var(--ease);
}
.ch--mkt-rates[data-beat="hotel"] .rc-lit--hotel,
.ch--mkt-rates[data-beat="seo"] .rc-lit--seo,
.ch--mkt-rates[data-beat="start"] .rc-lit--start,
.ch--mkt-rates:is([data-beat="addons"], [data-beat="addons2"], [data-beat="addons3"]) .rc-lit--addons,
.ch--mkt-rates:is([data-beat="projects"], [data-beat="projects2"]) .rc-lit--projects,
.ch--mkt-rates[data-beat="content"] .rc-lit--content,
.ch--mkt-rates[data-beat="consulting"] .rc-lit--consulting,
.ch--mkt-rates:is([data-beat="onrequest"], [data-beat="list"]) .rc-lit--onrequest,
.ch--mkt-rates[data-beat="terms"] .rc-lit--terms {
    opacity: 1;
    transition-delay: 0.5s;
    transition-duration: 1.6s;
}

/* ---- the seller of the stall greets the shopper as she comes: an arm raised, a wave while she stays */
.ch--mkt-rates .rc-wave {
    transform-box: fill-box;
    transform-origin: 15% 0;
    transition: rotate 0.7s cubic-bezier(0.34, 1.3, 0.64, 1) 0.2s;
}
.ch--mkt-rates[data-beat="hotel"] .rc-s--hotel .rc-wave,
.ch--mkt-rates[data-beat="seo"] .rc-s--seo .rc-wave,
.ch--mkt-rates[data-beat="start"] .rc-s--start .rc-wave,
.ch--mkt-rates[data-beat="addons"] .rc-s--addons .rc-wave,
.ch--mkt-rates[data-beat="projects"] .rc-s--projects .rc-wave,
.ch--mkt-rates[data-beat="content"] .rc-s--content .rc-wave,
.ch--mkt-rates[data-beat="consulting"] .rc-s--consulting .rc-wave,
.ch--mkt-rates[data-beat="onrequest"] .rc-s--onrequest .rc-wave {
    rotate: -128deg;
    transition-delay: 1.5s;
    animation: rc-hello 0.9s ease-in-out 2.2s infinite alternate;
}
@keyframes rc-hello {
    from { transform: rotate(-8deg); }
    to { transform: rotate(14deg); }
}

/* ---- the shopper walks to the stall of each beat; still, she waits at the first stall */
.ch--mkt-rates .rc-shopper {
    transform: translateX(var(--sx, 656px));
    transition: transform 2.4s var(--ease-in-out);
}
.motion.ch-ready .ch--mkt-rates:not([data-beat]) { --sx: 640px; }
.motion.ch-ready .ch--mkt-rates[data-beat="hotel"] { --sx: 656px; }
.motion.ch-ready .ch--mkt-rates[data-beat="seo"] { --sx: 758px; }
.motion.ch-ready .ch--mkt-rates[data-beat="start"] { --sx: 858px; }
.motion.ch-ready .ch--mkt-rates:is([data-beat="addons"], [data-beat="addons2"], [data-beat="addons3"]) { --sx: 958px; }
.motion.ch-ready .ch--mkt-rates:is([data-beat="projects"], [data-beat="projects2"]) { --sx: 1058px; }
.motion.ch-ready .ch--mkt-rates[data-beat="content"] { --sx: 1158px; }
.motion.ch-ready .ch--mkt-rates[data-beat="consulting"] { --sx: 1266px; }
.motion.ch-ready .ch--mkt-rates[data-beat="onrequest"] { --sx: 1376px; }
.motion.ch-ready .ch--mkt-rates[data-beat="terms"] { --sx: 1476px; }
.motion.ch-ready .ch--mkt-rates[data-beat="list"] { --sx: 1398px; }
/* the porter who walked in with her has set down his load by the time the first stall opens */
.ch--mkt-rates .rc-porter {
    transition: opacity 0.8s var(--ease);
}
.motion.ch-ready .ch--mkt-rates[data-beat] .rc-porter {
    opacity: 0;
}
/* once she has come to a stall she reaches toward its goods; the two names take turns from stall to stall, so the
   reach plays again after every walk */
.ch--mkt-rates .rc-reach {
    transform-box: fill-box;
    transform-origin: 60% 0;
}
.motion .ch--mkt-rates:is([data-beat="hotel"], [data-beat="start"], [data-beat="projects"], [data-beat="projects2"], [data-beat="consulting"], [data-beat="terms"]) .rc-reach {
    animation: rc-reach-a 3.4s var(--ease) both;
}
.motion .ch--mkt-rates:is([data-beat="seo"], [data-beat="addons"], [data-beat="addons2"], [data-beat="addons3"], [data-beat="content"], [data-beat="onrequest"]) .rc-reach {
    animation: rc-reach-b 3.4s var(--ease) both;
}
@keyframes rc-reach-a {
    0%, 62% { rotate: 0deg; }
    82%, 100% { rotate: -58deg; }
}
@keyframes rc-reach-b {
    0%, 62% { rotate: 0deg; }
    82%, 100% { rotate: -58deg; }
}

/* ---- her basket: one thing more in it for every line on the list (mkt-mix.js writes --mix-n on the section;
   without the script the basket shows full) */
.ch--mkt-rates .rc-it {
    --on: clamp(0, calc(var(--mix-n, 10) - var(--k) + 1), 1);
    opacity: var(--on);
    translate: 0 calc((1 - var(--on)) * -14px);
}
.motion .ch--mkt-rates .rc-it {
    transition: opacity 0.3s var(--ease), translate 0.6s cubic-bezier(0.34, 1.6, 0.64, 1);
}

/* ---- the life of the market, only with motion, resting while the section is off screen */
.motion .ch--mkt-rates .rc-walk {
    animation: rc-bob 0.8s ease-in-out infinite alternate;
}
@keyframes rc-bob {
    to { translate: 0 -1.6px; }
}
.ch--mkt-rates :is(.rc-steam, .rc-wisp) {
    opacity: 0.7;
}
.motion .ch--mkt-rates .rc-steam {
    animation: rc-steam 2.8s ease-out infinite;
}
.motion .ch--mkt-rates .rc-steam--2 { animation-delay: -0.9s; }
.motion .ch--mkt-rates .rc-steam--3 { animation-delay: -1.8s; }
.motion .ch--mkt-rates .rc-steam--cup { animation-duration: 3.4s; animation-delay: -1.2s; }
.motion .ch--mkt-rates .rc-steam--cup2 { animation-duration: 3.8s; animation-delay: -2.6s; }
@keyframes rc-steam {
    0% { opacity: 0; translate: 0 8px; }
    30% { opacity: 0.85; }
    100% { opacity: 0; translate: 4px -18px; }
}
.motion .ch--mkt-rates .rc-wisp {
    animation: rc-wisp 5s ease-in-out infinite;
}
.motion .ch--mkt-rates .rc-wisp--2 {
    animation-delay: -2.5s;
}
@keyframes rc-wisp {
    0% { opacity: 0; translate: 0 6px; }
    35% { opacity: 0.8; }
    100% { opacity: 0; translate: -6px -22px; }
}
.ch--mkt-rates :is(.rc-cloth, .rc-scale, .rc-garland, .rc-hang) {
    transform-box: fill-box;
    transform-origin: 50% 0;
}
.motion .ch--mkt-rates .rc-cloth {
    animation: rc-sway 5.2s ease-in-out infinite;
}
.motion .ch--mkt-rates .rc-roll:nth-child(2n) .rc-cloth {
    animation-duration: 6.4s;
    animation-delay: -2s;
}
.motion .ch--mkt-rates .rc-roll:nth-child(3n) .rc-cloth {
    animation-duration: 4.6s;
    animation-delay: -3.1s;
}
.motion .ch--mkt-rates :is(.rc-scale, .rc-garland, .rc-hang) {
    animation: rc-sway 4.4s ease-in-out infinite;
}
.motion .ch--mkt-rates :is(.rc-garland--2, .rc-hang--2) { animation-delay: -1.4s; }
.motion .ch--mkt-rates :is(.rc-garland--3, .rc-hang--3) { animation-delay: -2.6s; animation-duration: 5.1s; }
.motion .ch--mkt-rates :is(.rc-garland--4, .rc-hang--4) { animation-delay: -0.7s; animation-duration: 3.9s; }
@keyframes rc-sway {
    0%, 100% { rotate: -2.4deg; }
    50% { rotate: 2.6deg; }
}
.ch--mkt-rates .rc-roots {
    transform-box: view-box;
    transform-origin: 980px 420px;
}
.motion .ch--mkt-rates .rc-roots {
    animation: rc-roots 9s ease-in-out infinite alternate;
}
@keyframes rc-roots {
    to { transform: skewX(1.6deg); }
}
.ch--mkt-rates .rc-crown {
    transform-box: view-box;
    transform-origin: 962px 470px;
}
.motion .ch--mkt-rates .rc-crown {
    animation: rc-crown 11s ease-in-out infinite alternate;
}
@keyframes rc-crown {
    to { rotate: 0.6deg; scale: 1.008; }
}
/* the spots of sun under the banyan shift as its leaves move */
.motion .ch--mkt-rates .rc-dapple {
    animation: rc-dapple 6s ease-in-out infinite alternate;
}
@keyframes rc-dapple {
    from { opacity: 0.55; translate: -3px 0; }
    to { opacity: 1; translate: 4px 1px; }
}
.ch--mkt-rates .rc-rays {
    transform-box: view-box;
    transform-origin: 1470px 140px;
}
.motion .ch--mkt-rates .rc-rays {
    animation: rc-rays 24s ease-in-out infinite alternate;
}
@keyframes rc-rays {
    to { rotate: -5deg; opacity: 0.7; }
}
.motion .ch--mkt-rates .rc-drift2 {
    animation-duration: 84s;
    animation-delay: -40s;
}
.ch--mkt-rates .rc-hen {
    transform-box: fill-box;
    transform-origin: 70% 90%;
}
.motion .ch--mkt-rates .rc-hen {
    animation: rc-peck 2.6s steps(1) infinite;
}
.motion .ch--mkt-rates .rc-hen--2 {
    animation-duration: 3.4s;
    animation-delay: -1.3s;
}
@keyframes rc-peck {
    0%, 60%, 100% { rotate: 0deg; }
    66%, 74% { rotate: 22deg; }
    70% { rotate: 14deg; }
}

/* ---- the morning clears while the section is read: the sun climbs, its light fills the market */
@supports (animation-timeline: view()) {
    .motion .ch--mkt-rates .ly--sun {
        animation: rc-climb linear both;
        animation-timeline: --ch;
        animation-range: contain 0% contain 100%;
    }
    .motion .ch--mkt-rates .ly--light {
        animation: rc-fill linear both;
        animation-timeline: --ch;
        animation-range: contain 0% contain 60%;
    }
    .motion .ch--mkt-rates .ly--clouds {
        animation: rc-sail linear both;
        animation-timeline: --ch;
        animation-range: contain 0% contain 100%;
    }
    @keyframes rc-climb {
        to { translate: 0 -5%; }
    }
    @keyframes rc-fill {
        from { opacity: 0.35; }
    }
    @keyframes rc-sail {
        to { translate: -3% 0; }
    }
}

/* ---- without motion the drawing is a still picture behind the opening screen, its foot fading into the morning;
   the groups stand side by side, and a group in several panels reads as one */
:root:not(.motion) .ch--mkt-rates .ch__frame::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 18%;
    background: linear-gradient(rgba(214, 230, 237, 0), var(--sky-m, #d2e6ee));
}
:root:not(.motion) .ch--mkt-rates .rc-menu {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr));
    align-items: start;
}
:root:not(.motion) .ch--mkt-rates .rc-split {
    gap: 6px;
}
:root:not(.motion) .ch--mkt-rates .rc-again {
    display: none;
}

/* ---- a narrower screen: a tall panel takes over once its foot reaches 57% of the screen, so the stall and the
   shopper below it fill the rest down to the toolbar; the panels are compact, their lines run to the edges */
@media (max-width: 56em) {
    /* a panel too tall for that takes over a little later, once its title has come up just under the header */
    .ch--mkt-rates .rc-at {
        top: max(0px, min(100% - 25vh, 32vh - var(--head-h, 64px) - 8px));
    }
    /* the next panel comes in under the toolbar's tenth only once the stall and the shopper have been seen */
    .motion .ch--mkt-rates .beats {
        gap: max(37vh, 270px);
    }
    /* room after the list, so the whole market stays on screen while the list is read */
    .motion .ch--mkt-rates .mkt-rates {
        padding-bottom: 40vh;
    }
    .ch--mkt-rates .beat {
        gap: 6px;
        padding: 20px 18px 12px;
    }
    .ch--mkt-rates .mkt-mix {
        gap: 12px;
        padding: 22px 20px 20px;
    }
    .ch--mkt-rates .rc-lines {
        margin-inline: -8px;
    }
    .ch--mkt-rates .mkt-pick {
        grid-template-columns: 20px minmax(0, 1fr);
        column-gap: 10px;
        padding: 8px;
        line-height: 1.36;
    }
    .ch--mkt-rates .mkt-pick::before {
        width: 20px;
        height: 20px;
    }
    .ch--mkt-rates .mkt-pick::after {
        top: 12px;
        left: 15px;
    }
    .ch--mkt-rates .menu__row {
        column-gap: 12px;
    }
    .ch--mkt-rates .menu__desc {
        margin-top: 1px;
        line-height: 1.38;
    }
    .ch--mkt-rates .menu__note {
        line-height: 1.5;
    }
}
/* a small phone: the panels a little tighter at their sides, so long names wrap less */
@media (max-width: 23.75em) {
    .ch--mkt-rates .beat {
        padding-inline: 15px;
    }
    .ch--mkt-rates .rc-lines {
        margin-inline: -6px;
    }
    .ch--mkt-rates .mkt-pick {
        column-gap: 9px;
        padding-inline: 6px;
    }
    .ch--mkt-rates .mkt-pick::after {
        left: 13px;
    }
}
/* a phone on its side: the opening words on a band of the morning sky; the panels keep to the left half and take
   over at their top, so the market shows beside them */
@media (max-height: 30em) and (min-aspect-ratio: 3/2) {
    .ch--mkt-rates .ch__head {
        position: relative;
        isolation: isolate;
        gap: 10px;
        padding-top: calc(var(--head-h) + 10px);
    }
    .ch--mkt-rates .ch__head::before {
        content: "";
        position: absolute;
        z-index: -1;
        inset: calc(var(--head-h) - 8px) -40vw 22px -40vw;
        background: linear-gradient(90deg, rgba(214, 230, 237, 0.94) 0%, rgba(214, 230, 237, 0.9) 55%, rgba(214, 230, 237, 0) 82%);
        pointer-events: none;
    }
    .ch--mkt-rates .ch__lead {
        font-size: 1rem;
        line-height: 1.45;
    }
    .ch--mkt-rates .beat:not(.rc-at) {
        width: min(100%, 25rem);
    }
    .ch--mkt-rates .rc-at {
        top: 0;
    }
    .ch--mkt-rates {
        --zy: 100%;
        --zoom: 1;
    }
    .ch--mkt-rates[data-beat] {
        --zoom: 1.1;
        --zy: 90%;
    }
}

/* ==========================================================================
   chapter mkt/seo-packages
   ========================================================================== */
/* The sunrise climb of Mount Batur: each package is one stop on the trail along the crest. Starter opens the warung
   at the trailhead as the climbers arrive, Plus brings them halfway up as the light pours down the slope and the
   mist lifts off the lake, Premium brings them to the summit with the sun clear of the rim and the whole caldera
   lit. Without motion the sun is up, the light lies everywhere and the climbers stand on the summit. */

/* ==== the words =========================================================================================== */
.ch--mkt-seo-packages .ch__head {
    align-content: start;
}
/* the title is long: on a phone it keeps three full lines rather than a word left alone on one; on a wide screen
   it stays a little under the usual size and starts higher, so all the opening words sit in the sky above the rim */
@media (max-width: 56em) {
    .ch--mkt-seo-packages .ch__title {
        font-size: clamp(2.25rem, 0.75rem + 7.2vw, 2.75rem);
    }
}
@media (min-width: 56.01em) {
    .ch--mkt-seo-packages .ch__head {
        padding-top: calc(var(--head-h) + 5vh);
    }
    .ch--mkt-seo-packages .ch__title {
        font-size: clamp(2.75rem, 1rem + 4.6vw, 5.6rem);
    }
}
.ch--mkt-seo-packages :is(.sp-terms, .sp-hotels) {
    max-width: 36rem;
    text-shadow: 0 1px 18px rgba(244, 249, 251, 0.95);
}
.ch--mkt-seo-packages .sp-terms {
    color: var(--fg);
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.45;
}
.ch--mkt-seo-packages .sp-hotels {
    margin-top: -6px;
}
/* the link runs as text with the arrow glued to its last word; its two lines and their padding make a tap
   target of more than 44px */
.ch--mkt-seo-packages .sp-hotels a {
    display: inline-block;
    padding-block: 6px;
    color: var(--accent);
    font-weight: 650;
    line-height: 1.45;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}
.ch--mkt-seo-packages .sp-hotels a::after {
    content: "\00a0\2192" / "";
    text-decoration: none;
}

/* ---- the packages, one beat each: the sun of the tier, the name, the price large, what is in it, the button */
.ch--mkt-seo-packages .beat {
    width: min(100%, 31rem);
    padding: 18px 20px 20px;
}
/* the price has a row of its own, the panel's full width, so the longest one stays whole on the narrowest phone */
.ch--mkt-seo-packages .sp-plan {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    grid-template-areas: "art name" "price price" "unit unit" "list list" "cta cta";
    column-gap: 12px;
    align-items: center;
}
.ch--mkt-seo-packages .sp-plan__art {
    grid-area: art;
    width: 100%;
    aspect-ratio: 1;
}
.ch--mkt-seo-packages .sp-plan__art svg {
    display: block;
    width: 100%;
    height: 100%;
}
.ch--mkt-seo-packages .sp-plan__name {
    grid-area: name;
    font: 600 1.5rem/1.1 var(--display);
    letter-spacing: -0.012em;
}
.ch--mkt-seo-packages .sp-plan__price {
    grid-area: price;
    margin-top: 8px;
    color: var(--fg);
    font: 650 clamp(2.375rem, 1.7rem + 2.2vw, 3.5rem)/1 var(--display);
    letter-spacing: -0.03em;
    white-space: nowrap;
}
.ch--mkt-seo-packages .sp-plan__unit {
    grid-area: unit;
    margin-top: 4px;
    color: var(--fg-soft);
    font-size: 1rem;
    line-height: 1.4;
}
.ch--mkt-seo-packages .sp-plan__list {
    grid-area: list;
    display: grid;
    gap: 4px;
    margin-top: 12px;
}
.ch--mkt-seo-packages .sp-plan__list li {
    position: relative;
    padding-left: 18px;
    color: var(--fg);
    font-size: 1rem;
    line-height: 1.45;
}
.ch--mkt-seo-packages .sp-plan__list li::before {
    content: "";
    position: absolute;
    left: 1px;
    top: 0.62em;
    width: 6px;
    height: 6px;
    background: var(--gold-strong);
    rotate: 45deg;
}
.ch--mkt-seo-packages .sp-plan__cta {
    grid-area: cta;
    justify-self: stretch;
    min-height: 48px;
    margin-top: 14px;
    white-space: normal;
    text-align: center;
}
/* Plus is the marked package: a warmer stone, its gold corner always lit and larger, and a second gold facet in
   the opposite corner, so it stands apart from the other two at a glance */
.ch--mkt-seo-packages .sp-pkg--feature {
    --panel: rgba(255, 245, 214, 0.96);
    --cut: 34px;
}
.ch--mkt-seo-packages .sp-pkg--feature::after {
    opacity: 1;
}
.ch--mkt-seo-packages .sp-pkg--feature .sp-plan::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: var(--cut);
    height: var(--cut);
    background: var(--gold);
    clip-path: polygon(0 0, 100% 100%, 0 100%);
}
@media (min-width: 56.01em) {
    .ch--mkt-seo-packages .beat {
        padding: 30px 32px 32px;
    }
    .ch--mkt-seo-packages .sp-plan__price {
        margin-top: 12px;
    }
    .ch--mkt-seo-packages .sp-plan__list {
        gap: 6px;
        margin-top: 16px;
    }
    .ch--mkt-seo-packages .sp-plan {
        grid-template-columns: 60px minmax(0, 1fr);
        column-gap: 16px;
    }
    .ch--mkt-seo-packages .sp-plan__name {
        font-size: 1.65rem;
    }
    .ch--mkt-seo-packages .sp-plan__list li {
        font-size: 1.0625rem;
    }
    .ch--mkt-seo-packages .sp-plan__cta {
        justify-self: start;
        padding-inline: 26px;
    }
}

/* without motion the three stand side by side where there is room, under the finished picture */
:root:not(.motion) .ch--mkt-seo-packages .beats {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 19.5rem), 1fr));
    margin-top: clamp(24px, 4vw, 48px);
}
:root:not(.motion) .ch--mkt-seo-packages .ch__frame::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 12%;
    background: linear-gradient(transparent, var(--sky-m));
}
/* a still picture shows the sun just clear of the notch, its rays soft behind the opening words; a still phone
   looks down a little, so the sun stands under those words, not behind them, and the climbers on the summit under it */
:root:not(.motion) .ch--mkt-seo-packages .sp-sun {
    transform: translateY(var(--sp-sun2));
}
:root:not(.motion) .ch--mkt-seo-packages .sp-rays {
    opacity: 0.5;
}
@media (max-width: 56em) {
    :root:not(.motion) .ch--mkt-seo-packages {
        --zoom: 1.22;
        --zy: 0%;
    }
}
/* with motion the stage covers the plain sky of the section; and after the last package the stage stays a while,
   so the summit in the full morning, the sun clear above it, is seen with no panel over the sun */
.motion .ch--mkt-seo-packages .sec__sky {
    display: none;
}
@media (prefers-reduced-motion: no-preference) {
    .motion .ch--mkt-seo-packages .beats {
        padding-bottom: 50vh;
    }
}

/* ==== the camera ========================================================================================== */
/* a phone opens on the dark summit ridge with its string of headlamps and the dawn in the notch, then goes down
   to the trailhead and climbs with the climbers, each stop low in the frame under the panel that has just taken
   over */
.ch--mkt-seo-packages {
    --u: 0.79;
    --zx: 79%;
    --zy: 0%;
    --zoom: 1.08;
}
.ch--mkt-seo-packages[data-beat="starter"] { --u: 0.528; --zx: 52.8%; --zy: 100%; --zoom: 1.12; }
.ch--mkt-seo-packages[data-beat="plus"] { --u: 0.715; --zx: 71.5%; --zy: 40%; --zoom: 1.12; }
.ch--mkt-seo-packages[data-beat="premium"] { --u: 0.79; --zx: 79%; --zy: 0%; --zoom: 1.22; }
/* a tablet held upright sees more of the drawing: each stop stands right of the panels */
@media (min-width: 40em) and (max-width: 56em) {
    .ch--mkt-seo-packages[data-beat] {
        --s: 0.74;
    }
}
/* a wide screen sees nearly the whole caldera: the camera leans toward each stop and keeps it right of the panels */
@media (min-width: 56.01em) {
    .ch--mkt-seo-packages {
        --u: 0.5;
        --s: 0.5;
        --pan: 1;
        --zx: 62%;
        --zy: 0%;
        --zoom: 1.12;
    }
    .ch--mkt-seo-packages[data-beat="starter"] { --u: 0.528; --s: 0.66; --zx: 53%; --zy: 87%; --zoom: 1.04; }
    .ch--mkt-seo-packages[data-beat="plus"] { --u: 0.7; --s: 0.7; --zx: 70%; --zy: 77%; --zoom: 1.05; }
    .ch--mkt-seo-packages[data-beat="premium"] { --u: 0.83; --s: 0.76; --zx: 83%; --zy: 68%; --zoom: 1.06; }
}

/* ==== the states: the plain rules are the last one, the earlier ones only with motion ======================= */
/* ---- the sun: under the notch at the opening, a sliver at the trailhead, just clear halfway, high at the top */
.motion .ch--mkt-seo-packages .sp-sun {
    transition: transform 2.6s var(--ease-in-out);
}
.motion.ch-ready .ch--mkt-seo-packages:not([data-beat]) .sp-sun { transform: translateY(var(--sp-sun0)); }
.motion.ch-ready .ch--mkt-seo-packages[data-beat="starter"] .sp-sun { transform: translateY(var(--sp-sun1)); }
.motion.ch-ready .ch--mkt-seo-packages[data-beat="plus"] .sp-sun { transform: translateY(var(--sp-sun2)); }
.ch--mkt-seo-packages .sp-rays {
    transition: opacity 2s var(--ease) 0.8s;
}
.motion.ch-ready .ch--mkt-seo-packages:not([data-seen~="plus"]) .sp-rays {
    opacity: 0;
    transition-delay: 0s;
}

/* ---- the shade of the rim lies on the shoulder and the blue of dawn on the far side until the sun clears the
   notch: the light takes the summit first, then pours down the slope band after band, facet by facet */
.ch--mkt-seo-packages :is(.sp-sh, .sp-dusk) {
    opacity: 0;
}
.motion .ch--mkt-seo-packages .sp-sh {
    transition: opacity 1.3s var(--ease) var(--d, 0s);
}
.motion .ch--mkt-seo-packages .sp-dusk {
    transition: opacity 2.4s var(--ease) 0.6s;
}
.motion.ch-ready .ch--mkt-seo-packages:not([data-seen~="starter"]) .sp-sh--starter,
.motion.ch-ready .ch--mkt-seo-packages:not([data-seen~="plus"]) :is(.sp-sh--plus, .sp-dusk),
.motion.ch-ready .ch--mkt-seo-packages:not([data-seen~="premium"]) .sp-sh--premium {
    opacity: 1;
    transition-delay: 0s;
}
/* ...the headlamps on the trail go out once the light is on it */
.ch--mkt-seo-packages .sp-lamps {
    opacity: 0;
}
.motion .ch--mkt-seo-packages .sp-lamps {
    transition: opacity 1.6s var(--ease) 0.9s;
}
.motion.ch-ready .ch--mkt-seo-packages:not([data-seen~="plus"]) .sp-lamps {
    opacity: 1;
    transition-delay: 0s;
}
/* ...and the morning pours in from the sun's side, the crest catching it first */
.ch--mkt-seo-packages :is(.sp-wash, .sp-rim, .sp-glit, .sp-roofrim) {
    transition: opacity 2.2s var(--ease);
}
.motion.ch-ready .ch--mkt-seo-packages:not([data-beat]) :is(.sp-wash, .sp-glit) { opacity: 0.12; }
.motion.ch-ready .ch--mkt-seo-packages:not([data-beat]) .sp-rim { opacity: 0.5; }
.motion.ch-ready .ch--mkt-seo-packages[data-beat="starter"] :is(.sp-wash, .sp-glit) { opacity: 0.25; }
.motion.ch-ready .ch--mkt-seo-packages[data-beat="starter"] .sp-rim { opacity: 0.6; }
.motion.ch-ready .ch--mkt-seo-packages[data-beat="plus"] .sp-wash { opacity: 0.6; }
.motion.ch-ready .ch--mkt-seo-packages[data-beat="plus"] .sp-rim { opacity: 0.8; }
.motion.ch-ready .ch--mkt-seo-packages:not([data-seen~="plus"]) .sp-roofrim { opacity: 0; }

/* ---- the mist in the caldera lifts once the light reaches the slope */
.ch--mkt-seo-packages .sp-mist {
    opacity: 0.18;
    transform: translateY(-18px);
}
.motion .ch--mkt-seo-packages .sp-mist {
    transition: opacity 2.6s var(--ease), transform 3s var(--ease-in-out);
}
.motion.ch-ready .ch--mkt-seo-packages:not([data-seen~="plus"]) .sp-mist {
    opacity: 1;
    transform: none;
}

/* ---- the warung: the shutter rolls up and the lamp and the counter come on as the climbers arrive */
.ch--mkt-seo-packages .sp-shutter {
    transform-box: fill-box;
    transform-origin: 50% 0;
    transform: scaleY(0.16);
}
.motion .ch--mkt-seo-packages .sp-shutter {
    transition: transform 1.1s var(--ease) 0.5s;
}
.motion.ch-ready .ch--mkt-seo-packages:not([data-seen~="starter"]) .sp-shutter {
    transform: none;
    transition-delay: 0s;
}
.motion.ch-ready .ch--mkt-seo-packages:not([data-seen~="starter"]) .sp-z--starter {
    opacity: 0;
}
.motion.ch-ready .ch--mkt-seo-packages[data-seen~="starter"] .sp-z--starter {
    animation: sp-on 1.4s var(--ease) 1.1s both;
}
@keyframes sp-on {
    0% { opacity: 0; }
    12% { opacity: 0.9; }
    20% { opacity: 0.25; }
    32% { opacity: 1; }
    100% { opacity: 1; }
}

/* ---- the climbers: they come to the trailhead, then walk the crest to each stop. The path and the share of it at
   each stop come from the drawing (--sp-path, --sp-f1, --sp-f2); --k keeps each one a step behind the one ahead */
.ch--mkt-seo-packages .sp-hk {
    transition: opacity 1s var(--ease);
}
.motion.ch-ready .ch--mkt-seo-packages:not([data-seen~="starter"]) .sp-hk {
    opacity: 0;
}
@supports (offset-path: path("M0 0")) {
    .ch--mkt-seo-packages .sp-hk {
        transform: none;
        offset-path: var(--sp-path);
        offset-rotate: 0deg;
        offset-distance: calc(100% - var(--k) * var(--sp-g));
    }
    .motion.ch-ready .ch--mkt-seo-packages .sp-hk {
        offset-distance: max(0%, calc(var(--sp-at, 0%) - var(--k) * var(--sp-g)));
        transition: offset-distance 2.9s var(--ease-in-out) calc(var(--k) * 0.14s), opacity 1s var(--ease);
    }
    .motion.ch-ready .ch--mkt-seo-packages[data-beat="starter"] .sp-hk { --sp-at: var(--sp-f1); }
    .motion.ch-ready .ch--mkt-seo-packages[data-beat="plus"] .sp-hk { --sp-at: var(--sp-f2); }
    .motion.ch-ready .ch--mkt-seo-packages[data-beat="premium"] .sp-hk { --sp-at: 100%; }
}
/* in the sun each climber throws a long shadow down the slope */
.motion .ch--mkt-seo-packages .sp-shd {
    transition: opacity 1.2s var(--ease) 1.4s;
}
.motion.ch-ready .ch--mkt-seo-packages:not([data-seen~="plus"]) .sp-shd {
    opacity: 0;
    transition-delay: 0s;
}
/* on the summit the second climber raises both arms, once there */
.ch--mkt-seo-packages .sp-arms-dn {
    opacity: 0;
}
.motion .ch--mkt-seo-packages :is(.sp-arms-up, .sp-arms-dn) {
    transition: opacity 0.3s var(--ease) 3.1s;
}
.motion.ch-ready .ch--mkt-seo-packages:not([data-seen~="premium"]) .sp-arms-up {
    opacity: 0;
    transition-delay: 0s;
}
.motion.ch-ready .ch--mkt-seo-packages:not([data-seen~="premium"]) .sp-arms-dn {
    opacity: 1;
    transition-delay: 0s;
}

/* ---- the top: the flag goes up once the climbers arrive, and the summit warms in the sun */
.motion .ch--mkt-seo-packages .sp-flag {
    transition: transform 1.6s var(--ease) 2.4s, opacity 0.6s var(--ease) 2.4s;
}
.motion.ch-ready .ch--mkt-seo-packages:not([data-seen~="premium"]) .sp-flag {
    transform: translateY(26px);
    opacity: 0;
    transition-delay: 0s;
}
.ch--mkt-seo-packages .sp-z--premium {
    transition: opacity 2s var(--ease) 1s;
}
.motion.ch-ready .ch--mkt-seo-packages:not([data-seen~="premium"]) .sp-z--premium {
    opacity: 0;
    transition-delay: 0s;
}

/* ==== the life of the place, only with motion; it rests while the section is off screen ===================== */
.ch--mkt-seo-packages :is(.sp-puff, .sp-cloth, .sp-steam) {
    transform-box: fill-box;
}
.ch--mkt-seo-packages .sp-puff {
    transform-origin: 50% 100%;
    opacity: 0;
}
.motion .ch--mkt-seo-packages .sp-puff {
    animation: sp-puff 5.2s linear infinite;
}
.motion .ch--mkt-seo-packages .sp-puff--2 { animation-delay: -2.6s; }
.motion .ch--mkt-seo-packages .sp-puff--3 { animation-delay: -1.3s; animation-duration: 6s; }
.motion .ch--mkt-seo-packages .sp-puff--4 { animation-delay: -4.3s; animation-duration: 6s; }
@keyframes sp-puff {
    0% { opacity: 0; transform: translate(0, 0) scale(0.6); }
    18% { opacity: 0.95; }
    100% { opacity: 0; transform: translate(var(--sx, 0), -58px) scale(2.1); }
}
/* a still page keeps one soft plume over each vent */
:root:not(.motion) .ch--mkt-seo-packages :is(.sp-puff--1, .sp-puff--3) {
    opacity: 0.8;
    transform: translateY(-14px) scale(1.3);
}
.motion .ch--mkt-seo-packages .sp-steam {
    transform-origin: 50% 100%;
    animation: sp-kettle 2.6s ease-in-out infinite;
}
@keyframes sp-kettle {
    0% { opacity: 0; transform: translateY(4px) scaleY(0.7); }
    40% { opacity: 1; }
    100% { opacity: 0; transform: translateY(-8px) scaleY(1.1); }
}
.ch--mkt-seo-packages .sp-cloth {
    transform-origin: 0 50%;
}
.motion .ch--mkt-seo-packages .sp-cloth {
    animation: sp-flutter 1.5s ease-in-out infinite alternate;
}
@keyframes sp-flutter {
    0% { transform: skewY(-4deg) scaleX(1); }
    100% { transform: skewY(5deg) scaleX(0.9); }
}
/* the headlamps walk up the trail: the dots of their dashes move along it, one step of the drawing at a time, so
   the large layer under them is painted ten times a second rather than every frame */
.motion .ch--mkt-seo-packages .sp-lamp {
    animation: sp-walk 24.7s steps(247) infinite;
}
@keyframes sp-walk {
    to { stroke-dashoffset: -247; }
}
.ch--mkt-seo-packages .sp-rays {
    transform-box: view-box;
    transform-origin: 1195px 430px;
}
.motion .ch--mkt-seo-packages .sp-rays > path {
    transform-box: view-box;
    transform-origin: 1195px 430px;
    animation: sp-rays 40s ease-in-out infinite alternate;
}
@keyframes sp-rays {
    to { transform: rotate(7deg); opacity: 0.75; }
}
.motion .ch--mkt-seo-packages .sp-glint2 {
    animation-delay: -1.6s;
}
.motion .ch--mkt-seo-packages .sp-drift2 {
    animation-duration: 90s;
    animation-delay: -40s;
}

/* ---- as the section is read the sun keeps climbing a little, the far side settles and the clouds drift on */
@supports (animation-timeline: view()) {
    .motion .ch--mkt-seo-packages .ly--sun {
        animation: sp-climb linear both;
        animation-timeline: --ch;
        animation-range: contain 0% contain 100%;
    }
    .motion .ch--mkt-seo-packages .ly--far {
        animation: sp-far linear both;
        animation-timeline: --ch;
        animation-range: contain 0% contain 100%;
    }
    .motion .ch--mkt-seo-packages .ly--clouds {
        animation: sp-clouds linear both;
        animation-timeline: --ch;
        animation-range: contain 0% contain 100%;
    }
    .motion .ch--mkt-seo-packages .ly--fore {
        animation: sp-near linear both;
        animation-timeline: --ch;
        animation-range: contain 0% contain 100%;
    }
    @keyframes sp-climb {
        to { translate: 0 -3%; }
    }
    @keyframes sp-far {
        from { translate: 0 0.8%; }
        to { translate: 0 -0.3%; }
    }
    @keyframes sp-clouds {
        from { translate: 3% 0; }
        to { translate: -3% 0; }
    }
    @keyframes sp-near {
        from { translate: 0 1.6%; }
        to { translate: 0 0; }
    }
}

/* ==== a phone on its side: the words fit the short screen and the stops stand right of them ================ */
@media (orientation: landscape) and (max-height: 31.25em) {
    .ch--mkt-seo-packages .ch__head {
        gap: 8px;
        max-width: 30rem;
        padding-top: calc(var(--head-h) + 8px);
    }
    .ch--mkt-seo-packages .ch__title {
        font-size: 2rem;
    }
    .ch--mkt-seo-packages .ch__lead {
        font-size: 1rem;
        line-height: 1.45;
    }
    .ch--mkt-seo-packages .sp-terms {
        font-size: 1rem;
    }
    .ch--mkt-seo-packages .beat {
        width: min(100%, 27rem);
        padding: 14px 18px 16px;
    }
    .ch--mkt-seo-packages .sp-plan {
        grid-template-columns: 36px minmax(0, 9.6rem) minmax(0, 1fr);
        grid-template-areas: "art name list" "price price list" "unit unit list" "cta cta list";
        column-gap: 12px;
        align-items: start;
    }
    .ch--mkt-seo-packages .sp-plan__name {
        align-self: center;
        font-size: 1.25rem;
    }
    .ch--mkt-seo-packages .sp-plan__price {
        margin-top: 6px;
        font-size: 1.6rem;
    }
    .ch--mkt-seo-packages .sp-plan__list {
        margin: 0 0 0 6px;
        gap: 3px;
    }
    .ch--mkt-seo-packages .sp-plan__list li {
        line-height: 1.32;
    }
    .ch--mkt-seo-packages .sp-plan__cta {
        min-height: 44px;
        margin-top: 10px;
        padding-inline: 12px;
    }
    .ch--mkt-seo-packages,
    .ch--mkt-seo-packages[data-beat] {
        --s: 0.5;
        --zy: 100%;
        --zoom: 1.04;
    }
    .ch--mkt-seo-packages[data-beat="starter"] { --zx: 53%; --zoom: 1.1; }
    .ch--mkt-seo-packages[data-beat="plus"] { --zx: 70%; --zoom: 1.12; }
    .ch--mkt-seo-packages[data-beat="premium"] { --zx: 83%; --zy: 70%; --zoom: 1.14; }
}

/* ==========================================================================
   chapter mkt/consulting
   ========================================================================== */
/* The village pavilion on a clear morning: the consultant walks along the gamelan and each instrument comes out of the
   shade into its full lacquer and gold as she hears it, she takes the empty seat at the lead drum and the players fall
   into its tempo, then the gong player comes, the gong sounds and the village comes in from both ends of the lane.
   Without motion every instrument is lit, she sits at the drum and the pavilion is full. */
.ch--mkt-consulting .ch__head {
    align-content: start;
    max-width: 62rem;
}
/* a long title takes the hero's scale for long titles: three lines on a wide screen, clear of the pavilion */
.ch--mkt-consulting .ch__title {
    max-width: 13.4em;
    font-size: clamp(2.75rem, 1rem + 4.1vw, 5.25rem);
}
.ch--mkt-consulting .ch__lead {
    max-width: 34rem;
}
/* with motion the drawing is the sky; a still page shows the section's own sky behind the words under its picture */
.motion .ch--mkt-consulting > .sec__sky {
    display: none;
}

/* ---- the words: each offer's price large, its unit beside it */
.ch--mkt-consulting .beat__text {
    color: var(--fg);
}
.ch--mkt-consulting .cs-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 12px;
    margin-top: 2px;
    color: var(--fg);
}
.ch--mkt-consulting .cs-from {
    flex-basis: 100%;
    margin-bottom: 6px;
    color: var(--fg-soft);
    font: 600 0.95rem/1.2 var(--text);
    letter-spacing: 0.02em;
}
.ch--mkt-consulting .cs-num {
    font: 650 clamp(2.15rem, 1.6rem + 1.7vw, 3.1rem)/1 var(--display);
    letter-spacing: -0.02em;
    white-space: nowrap;
}
.ch--mkt-consulting .cs-unit {
    color: var(--fg-soft);
    font-size: 1.05rem;
}
.ch--mkt-consulting .cs-cta {
    justify-self: start;
    margin-top: 6px;
}
@media (max-width: 40em) {
    .ch--mkt-consulting .cs-cta {
        justify-self: stretch;
    }
}
/* a phone on its side shows the lane under the opening words: they sit tighter, on a band of the morning sky */
@media (max-height: 500px) and (min-aspect-ratio: 16/9) {
    .ch--mkt-consulting .ch__head {
        position: relative;
        isolation: isolate;
        gap: 10px;
        max-width: 34rem;
        padding-top: calc(var(--head-h) + 14px);
    }
    .ch--mkt-consulting .ch__title {
        font-size: 2.2rem;
    }
    .ch--mkt-consulting .ch__lead {
        font-size: 1rem;
        line-height: 1.45;
    }
    .ch--mkt-consulting .ch__head::before {
        content: "";
        position: absolute;
        z-index: -1;
        inset: calc(var(--head-h) - 8px) -40vw 24px -40vw;
        background: linear-gradient(90deg, rgba(232, 241, 244, 0.94) 0%, rgba(232, 241, 244, 0.9) 55%, rgba(232, 241, 244, 0) 82%);
        pointer-events: none;
    }
}

/* a still phone shows the lane under its opening words: the consultant walks there, as when the section opens */
@media (max-width: 56em) and (max-aspect-ratio: 1/1) {
    :root:not(.motion) .ch--mkt-consulting .cs-walk {
        opacity: 1;
        transform: var(--w0);
    }
}
/* without motion the drawing is a still picture behind the opening screen; its foot fades into the morning */
:root:not(.motion) .ch--mkt-consulting .ch__frame::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 18%;
    background: linear-gradient(rgba(240, 234, 217, 0), var(--sky-m, #f0ead9));
}

/* ---- the camera: a phone opens on the lane under the words, walks with the consultant along the instruments, comes
   close on the lead drum, then steps back for the full pavilion and the village in front of it; a wide screen keeps
   the pavilion in view and leans in */
.ch--mkt-consulting {
    --u: 0.25;
    --zx: 25%;
    --zy: 100%;
}
.ch--mkt-consulting[data-beat="audit"] { --u: 0.7; --zoom: 1.08; --zx: 70%; --zy: 100%; }
.ch--mkt-consulting[data-beat="manager"] { --u: 0.775; --zoom: 1.15; --zx: 77.5%; --zy: 80%; }
.ch--mkt-consulting[data-beat="workshop"] { --u: 0.745; --zoom: 1; --zx: 74.5%; --zy: 100%; }
@media (min-width: 56.01em) {
    .ch--mkt-consulting {
        --u: 0.5;
        --zx: 72%;
        --zy: 82%;
    }
    .ch--mkt-consulting[data-beat] {
        --u: 0.6;
        --zoom: 1.05;
    }
    .ch--mkt-consulting[data-beat="audit"] { --zx: 66%; --zy: 84%; }
    .ch--mkt-consulting[data-beat="manager"] { --zx: 77%; --zy: 80%; --zoom: 1.09; }
    .ch--mkt-consulting[data-beat="workshop"] { --zx: 74%; --zy: 100%; --zoom: 1; }
}
/* a tablet or a small laptop sees less of the drawing: it opens on the lane, so the words keep clear sky, and turns
   to the pavilion with the first beat */
@media (min-width: 56.01em) and (max-width: 75em) {
    .ch--mkt-consulting { --u: 0.22; }
    .ch--mkt-consulting[data-beat] { --u: 0.72; }
}
/* the camera walks with her to the pavilion */
@media (prefers-reduced-motion: no-preference) {
    .motion .ch--mkt-consulting[data-beat="audit"] .ch__cam {
        transition-duration: 2.4s;
    }
}

/* ---- the consultant: she walks along the pavilion with the audit, then goes up to the empty seat at the drum */
.ch--mkt-consulting .cs-walk {
    opacity: 0;
    transform: var(--w2);
    transition: transform 1.3s var(--ease-in-out), opacity 0.5s var(--ease) 0.7s;
}
.motion.ch-ready .ch--mkt-consulting:not([data-seen~="manager"]) .cs-walk {
    opacity: 1;
    transform: var(--w1);
    transition: transform 2.4s cubic-bezier(0.42, 0, 0.58, 1), opacity 0.4s var(--ease);
}
.motion.ch-ready .ch--mkt-consulting:not([data-seen~="audit"]) .cs-walk {
    transform: var(--w0);
}
.ch--mkt-consulting .cs-step {
    transform-box: fill-box;
    transform-origin: 50% 100%;
}
.motion.ch-ready .ch--mkt-consulting[data-beat="audit"] .cs-step {
    animation: cs-step 0.4s ease-in-out 6 alternate;
}
@keyframes cs-step {
    to { translate: 0 -2.5px; rotate: 1.2deg; }
}
.ch--mkt-consulting .cs-lead {
    transition: opacity 0.8s var(--ease) 1s;
}
.motion.ch-ready .ch--mkt-consulting:not([data-seen~="manager"]) .cs-lead {
    opacity: 0;
    transition-duration: 0.4s;
    transition-delay: 0s;
}

/* ---- the audit: each instrument lights as she passes it */
.ch--mkt-consulting .cs-lit {
    transition: opacity 0.7s var(--ease) var(--d, 0s);
}
/* timed to her walk: the gong chime and the first metallophone as she reaches them, the lead metallophone as she
   passes it, the far one once she has stopped by the drum */
.ch--mkt-consulting .cs-lit.k1 { --d: 1.35s; }
.ch--mkt-consulting .cs-lit.k2 { --d: 1.55s; }
.ch--mkt-consulting .cs-lit.k3 { --d: 1.95s; }
.ch--mkt-consulting .cs-lit.k4 { --d: 2.3s; }
.ch--mkt-consulting .cs-lit.k5 { --d: 0.6s; }
.motion.ch-ready .ch--mkt-consulting:not([data-seen~="audit"]) .cs-lit:not(.k5),
.motion.ch-ready .ch--mkt-consulting:not([data-seen~="workshop"]) .cs-lit.k5 {
    opacity: 0;
    --d: 0s;
}
.ch--mkt-consulting .cs-lit > ellipse {
    transform-box: fill-box;
    transform-origin: center;
}
.motion.ch-ready .ch--mkt-consulting[data-seen~="audit"] .cs-lit:not(.k5) > ellipse,
.motion.ch-ready .ch--mkt-consulting[data-seen~="workshop"] .cs-lit.k5 > ellipse {
    animation: cs-bloom 1.2s var(--ease) var(--d) both;
}
@keyframes cs-bloom {
    0% { opacity: 0; scale: 0.4; }
    35% { opacity: 1; scale: 1.4; }
    100% { opacity: 1; scale: 1; }
}

/* ---- the fractional manager: the drum's beat goes out from both its heads, and every player falls into its tempo */
.ch--mkt-consulting :is(.cs-ring, .cs-gring, .cs-snd, .cs-pulse) {
    transform-box: fill-box;
    transform-origin: center;
}
/* a still page shows the sound as it spreads, each ring a little further out */
.ch--mkt-consulting .cs-ring--2 { scale: 1.5; opacity: 0.7; }
.ch--mkt-consulting .cs-ring--3 { scale: 2; opacity: 0.4; }
.ch--mkt-consulting .cs-gring--2 { scale: 2.1; opacity: 0.6; }
.ch--mkt-consulting .cs-gring--3 { scale: 3.2; opacity: 0.3; }
.motion .ch--mkt-consulting .cs-ring {
    animation: cs-ring 1.8s cubic-bezier(0.2, 0.6, 0.3, 1) infinite;
}
.motion .ch--mkt-consulting .cs-ring--2 { animation-delay: -0.6s; }
.motion .ch--mkt-consulting .cs-ring--3 { animation-delay: -1.2s; }
@keyframes cs-ring {
    0% { opacity: 0; scale: 0.85; }
    14% { opacity: 1; }
    100% { opacity: 0; scale: 2.5; }
}
/* the warm light on the drum swells with every stroke */
.motion .ch--mkt-consulting .cs-pulse {
    animation: cs-pulse 0.6s ease-out infinite;
}
@keyframes cs-pulse {
    0% { opacity: 1; scale: 1.14; }
    100% { opacity: 0.35; scale: 0.82; }
}
.ch--mkt-consulting .cs-arm {
    transform-box: fill-box;
}
.motion .ch--mkt-consulting .cs-arm {
    animation: cs-strike 0.6s ease-in-out infinite;
}
.motion .ch--mkt-consulting .cs-arm--b {
    animation-delay: -0.3s;
}
/* before anyone keeps the tempo each plays in his own */
.motion.ch-ready .ch--mkt-consulting:not([data-seen~="manager"]) .cs-arm { animation-duration: 0.83s; }
.motion.ch-ready .ch--mkt-consulting:not([data-seen~="manager"]) .cs-arm--b { animation-duration: 1.13s; }
.motion.ch-ready .ch--mkt-consulting:not([data-seen~="manager"]) .cs-row--b { animation-duration: 0.97s; }
@keyframes cs-strike {
    0%, 100% { translate: 0 0; }
    45% { translate: 0 -5px; }
}

/* ---- the workshop: the gong player takes his place, the gong sounds, the village gathers in the lane */
.ch--mkt-consulting .cs-full {
    transition: opacity 1s var(--ease) 0.4s, translate 1.5s var(--ease) 0.3s;
}
.motion.ch-ready .ch--mkt-consulting:not([data-seen~="workshop"]) .cs-full {
    opacity: 0;
    transition-duration: 0.4s;
    transition-delay: 0s;
}
/* the village comes in from both ends of the lane and stands facing the pavilion */
.ch--mkt-consulting .cs-crowd {
    transition: opacity 1.2s var(--ease) var(--cd), translate 2.2s var(--ease) var(--cd);
}
.ch--mkt-consulting .cs-crowd--l { --cd: 0.5s; --cin: -120px; }
.ch--mkt-consulting .cs-crowd--r { --cd: 0.9s; --cin: 120px; }
.motion.ch-ready .ch--mkt-consulting:not([data-seen~="workshop"]) .cs-crowd {
    opacity: 0;
    translate: var(--cin) 0;
    transition-duration: 0.4s;
    transition-delay: 0s;
}
/* one stroke of the gong every cycle, its sound going out in three rings close behind each other */
.motion .ch--mkt-consulting .cs-gring {
    animation: cs-gong 3.6s cubic-bezier(0.15, 0.6, 0.3, 1) infinite;
}
.motion .ch--mkt-consulting .cs-gring--2 { animation-delay: -3.28s; }
.motion .ch--mkt-consulting .cs-gring--3 { animation-delay: -2.96s; }
@keyframes cs-gong {
    0% { opacity: 0; scale: 0.9; }
    6% { opacity: 0.95; }
    72%, 100% { opacity: 0; scale: 5.2; }
}
.motion .ch--mkt-consulting .cs-warm > ellipse {
    animation: cs-warm 1.2s ease-in-out infinite alternate;
}
@keyframes cs-warm {
    from { opacity: 0.7; }
}

/* ---- the life of the place, only with motion, resting while the section is off screen */
.ch--mkt-consulting .cs-hen {
    transform-box: fill-box;
    transform-origin: 34% 100%;
}
.ch--mkt-consulting .cs-hen--2 {
    --pk: -1;
    transform-origin: 66% 100%;
}
.motion .ch--mkt-consulting .cs-hen {
    animation: cs-peck 3.4s ease-in-out infinite;
}
.motion .ch--mkt-consulting .cs-hen--2 {
    animation-duration: 4.3s;
    animation-delay: -1.9s;
}
@keyframes cs-peck {
    0%, 60%, 100% { rotate: 0deg; }
    68%, 80% { rotate: calc(16deg * var(--pk, 1)); }
    74% { rotate: calc(11deg * var(--pk, 1)); }
}
.motion .ch--mkt-consulting .cs-snd {
    animation: cs-snd 1.8s ease-out infinite;
}
.motion .ch--mkt-consulting .cs-snd--2 {
    animation-delay: -0.9s;
}
@keyframes cs-snd {
    0% { opacity: 0; translate: 0 6px; }
    25% { opacity: 1; }
    100% { opacity: 0; translate: 0 -16px; }
}
.ch--mkt-consulting .cs-smoke {
    transform-box: fill-box;
    transform-origin: 50% 100%;
}
.motion .ch--mkt-consulting .cs-smoke {
    animation: cs-smoke 5s ease-in-out infinite alternate;
}
.motion .ch--mkt-consulting .cs-smoke--2 {
    animation-duration: 6.2s;
    animation-delay: -2s;
}
@keyframes cs-smoke {
    from { opacity: 0.45; transform: skewX(-7deg); }
    to { opacity: 0.95; transform: skewX(9deg) translateY(-3px); }
}
.motion .ch--mkt-consulting .cs-shafts {
    animation: cs-shaft 6s ease-in-out infinite alternate;
}
@keyframes cs-shaft {
    from { opacity: 0.55; }
}
.ch--mkt-consulting .cs-rays {
    transform-box: view-box;
    transform-origin: 1392px 214px;
}
.motion .ch--mkt-consulting .cs-rays {
    animation: cs-rays 24s ease-in-out infinite alternate;
}
@keyframes cs-rays {
    to { rotate: -5deg; opacity: 0.65; }
}
.motion .ch--mkt-consulting .cs-drift2 {
    animation-duration: 80s;
    animation-delay: -30s;
}

/* ---- the morning goes on while the section is read: the sun climbs, the clouds move on */
@supports (animation-timeline: view()) {
    .motion .ch--mkt-consulting .ly--sun {
        animation: cs-climb linear both;
        animation-timeline: --ch;
        animation-range: contain 0% contain 100%;
    }
    .motion .ch--mkt-consulting .ly--clouds {
        animation: cs-move linear both;
        animation-timeline: --ch;
        animation-range: contain 0% contain 100%;
    }
    @keyframes cs-climb {
        to { translate: 0 -5%; }
    }
    /* a wide screen's ground strip rises to the villagers' shoulders as the section leaves: they and whatever else
       stands in the lane go first, so no heads or handlebars stick out of the hill */
    @media (min-width: 56.01em) {
        .motion .ch--mkt-consulting :is(.cs-crowd, .cs-street) {
            animation: cs-away linear both;
            animation-timeline: --ch;
            animation-range: exit 0% exit 12%;
        }
    }
    @keyframes cs-away {
        to { opacity: 0; }
    }
    @keyframes cs-move {
        to { translate: -3% 0; }
    }
}

/* ==========================================================================
   chapter mkt/clients
   ========================================================================== */
/* A hill village street on a festival morning. Each list of names raises its stretch of umbul-umbul, coral, then
   gold, then sea blue: the banners climb their poles and fly, their shadows fall on the lawn and the swallows resting
   on the poles take off; with the last list a family in temple white walks up the dressed street. Without motion
   every banner flies and the family stands at the last gate. */
.ch--mkt-clients .ch__head {
    align-content: start;
}
/* with motion the stage is the section's sky, so the drawn sky behind it would only cost paint; still, it stays
   behind the lists below the picture */
.motion .ch--mkt-clients > .sec__sky {
    display: none;
}
/* the strip of land at the foot of the section brings palms of its own, which would stand in the village lawn */
.ch--mkt-clients > .sec__ground .palms {
    display: none;
}

/* ---- the names: large, one to a line, like a roll of honour */
.ch--mkt-clients .beat {
    width: min(100%, 31rem);
}
.ch--mkt-clients .mcl-names {
    display: grid;
    gap: 12px;
}
.ch--mkt-clients .mcl-names li {
    color: var(--fg);
    font: 600 clamp(1.375rem, 1.1rem + 0.95vw, 1.95rem)/1.16 var(--display);
    letter-spacing: -0.014em;
    text-wrap: balance;
}
/* a phone keeps the panel short, so the banners its list raises fly clear below it */
@media (max-width: 40em) {
    .ch--mkt-clients .beat {
        padding: 20px 24px;
    }
    .ch--mkt-clients .mcl-names {
        gap: 6px;
    }
    .ch--mkt-clients .mcl-names li {
        line-height: 1.15;
    }
}
/* a small phone keeps the longest names on one line */
@media (max-width: 23.75em) {
    .ch--mkt-clients .mcl-names li {
        font-size: 1.3rem;
        letter-spacing: -0.02em;
    }
}

/* a phone on its side shows the foot of the drawing behind the opening words: a band of the morning sky keeps them
   on a calm ground */
@media (max-height: 500px) and (min-aspect-ratio: 16/9) {
    .ch--mkt-clients .ch__head {
        position: relative;
        isolation: isolate;
        gap: 8px;
        padding-top: calc(var(--head-h) + 12px);
    }
    .ch--mkt-clients .ch__head::before {
        content: "";
        position: absolute;
        z-index: -1;
        inset: calc(var(--head-h) - 8px) -40vw 26px -40vw;
        background: linear-gradient(90deg, rgba(222, 235, 240, 0.94) 0%, rgba(222, 235, 240, 0.9) 55%, rgba(222, 235, 240, 0) 82%);
        pointer-events: none;
    }
    .ch--mkt-clients .ch__title {
        font-size: clamp(1.9rem, 8vh + 0.5rem, 2.6rem);
    }
    .ch--mkt-clients .ch__lead {
        font-size: 1rem;
        line-height: 1.45;
    }
    .motion .ch--mkt-clients .beat {
        width: min(100%, 22rem);
        padding: 16px 22px;
    }
    .ch--mkt-clients .mcl-names {
        gap: 4px;
    }
    .ch--mkt-clients .mcl-names li {
        font-size: 1.2rem;
    }
}

/* without motion the drawing is a still picture behind the opening screen, framed on the last gate of the dressed
   street with the family under the banners and the sun; its foot fades into the morning */
:root:not(.motion) .ch--mkt-clients {
    --u: 0.8;
    --zx: 80%;
    --zy: 100%;
    --zoom: 1.04;
}
:root:not(.motion) .ch--mkt-clients .ch__frame::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 16%;
    background: linear-gradient(rgba(234, 236, 226, 0), var(--sky-m, #eaece2));
}

/* the camera. A phone sees a quarter of the street: it opens on the upper gate where the man sweeps, then walks down
   the street from stretch to stretch toward the sun, each stretch framed under its panel; the zoom grows from the
   foot of the picture, so the banners keep their place below the words. A wide screen sees the whole street and
   only leans toward each stretch, which always flies to the right of the panel. */
.ch--mkt-clients {
    --u: 0.294;
    --zx: 29.4%;
    --zy: 100%;
    --zoom: 1.1;
}
.ch--mkt-clients[data-beat="coral"] { --u: 0.494; --zx: 49.4%; --zoom: 1.08; }
.ch--mkt-clients[data-beat="gold"] { --u: 0.7125; --zx: 71.25%; --zoom: 1.08; }
.ch--mkt-clients[data-beat="blue"] { --u: 0.9; --zx: 100%; --zoom: 1.1; }
@media (min-width: 56.01em) {
    .ch--mkt-clients {
        --s: 0.62;
        --pan: 0.35;
        --u: 0.5;
        --zx: 50%;
        --zy: 84%;
        --zoom: 1;
    }
    .ch--mkt-clients[data-beat] {
        --zoom: 1.08;
        --zy: 100%;
    }
    .ch--mkt-clients[data-beat="coral"] { --u: 0.42; --zx: 50%; }
    .ch--mkt-clients[data-beat="gold"] { --u: 0.62; --zx: 70%; }
    .ch--mkt-clients[data-beat="blue"] { --u: 0.94; --zx: 90%; }
}

/* ---- the banners: furled at the foot of their poles until their list is reached, then hoisted and let fly, one
   after another along the stretch */
.ch--mkt-clients :is(.mcl-flag, .mcl-cloth) {
    transform-box: view-box;
    transform-origin: var(--ox) var(--oy);
}
.ch--mkt-clients .mcl-tail {
    transform-box: view-box;
    transform-origin: var(--ox) var(--ty);
}
.motion.ch-ready .ch--mkt-clients .mcl-flag {
    transition: transform 0.5s var(--ease);
}
.motion.ch-ready .ch--mkt-clients:not([data-seen~="coral"]) .mcl-flag--coral,
.motion.ch-ready .ch--mkt-clients:not([data-seen~="gold"]) .mcl-flag--gold,
.motion.ch-ready .ch--mkt-clients:not([data-seen~="blue"]) .mcl-flag--blue {
    transform: translateY(var(--d)) scale(0.22, 0.2);
}
.motion.ch-ready .ch--mkt-clients[data-seen~="coral"] .mcl-flag--coral,
.motion.ch-ready .ch--mkt-clients[data-seen~="gold"] .mcl-flag--gold,
.motion.ch-ready .ch--mkt-clients[data-seen~="blue"] .mcl-flag--blue {
    animation: mcl-hoist 1.9s var(--ease) calc(0.2s + var(--i) * 0.16s) both;
}
@keyframes mcl-hoist {
    0% { transform: translateY(var(--d)) scale(0.22, 0.2); }
    58% { transform: translateY(0) scale(0.24, 0.34); }
    100% { transform: none; }
}
/* their shadows reach the lawn once they fly */
.ch--mkt-clients .mcl-shade {
    transition: opacity 1.1s var(--ease) 1.5s;
}
.motion.ch-ready .ch--mkt-clients:not([data-seen~="coral"]) .mcl-shade--coral,
.motion.ch-ready .ch--mkt-clients:not([data-seen~="gold"]) .mcl-shade--gold,
.motion.ch-ready .ch--mkt-clients:not([data-seen~="blue"]) .mcl-shade--blue {
    opacity: 0;
    transition-delay: 0s;
}
/* the gold bud at the top of each pole catches the sun as its banner arrives */
.ch--mkt-clients .mcl-star {
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
}
.motion.ch-ready .ch--mkt-clients[data-seen~="coral"] .mcl-star--coral,
.motion.ch-ready .ch--mkt-clients[data-seen~="gold"] .mcl-star--gold,
.motion.ch-ready .ch--mkt-clients[data-seen~="blue"] .mcl-star--blue {
    animation: mcl-star 1.2s var(--ease) calc(1.25s + var(--i) * 0.16s) both;
}
@keyframes mcl-star {
    0% { opacity: 0; scale: 0.2; rotate: -30deg; }
    35% { opacity: 1; scale: 1.15; }
    100% { opacity: 0; scale: 0.5; rotate: 40deg; }
}
/* the swallows rest on the bare poles and take off as the banners come up; still, they have flown */
.ch--mkt-clients .mcl-perch {
    opacity: 0;
}
.motion.ch-ready .ch--mkt-clients:not([data-seen~="coral"]) .mcl-perch--coral,
.motion.ch-ready .ch--mkt-clients:not([data-seen~="gold"]) .mcl-perch--gold,
.motion.ch-ready .ch--mkt-clients:not([data-seen~="blue"]) .mcl-perch--blue {
    opacity: 1;
}
.motion.ch-ready .ch--mkt-clients[data-seen~="coral"] .mcl-perch--coral,
.motion.ch-ready .ch--mkt-clients[data-seen~="gold"] .mcl-perch--gold,
.motion.ch-ready .ch--mkt-clients[data-seen~="blue"] .mcl-perch--blue {
    animation: mcl-fly 1.7s cubic-bezier(0.5, 0, 0.75, 0.6) calc(0.3s + var(--i) * 0.12s) both;
}
@keyframes mcl-fly {
    0% { opacity: 1; translate: 0 0; }
    20% { translate: 12px -16px; }
    100% { opacity: 0; translate: 170px -150px; }
}
/* as a stretch is dressed, someone steps out of the gate behind it to see: a woman with her offering, then a boy
   who waves at the flags */
.ch--mkt-clients .mcl-door {
    transition: opacity 0.9s var(--ease) 1.1s, translate 0.9s var(--ease) 1.1s;
}
.motion.ch-ready .ch--mkt-clients:not([data-seen~="coral"]) .mcl-door--coral,
.motion.ch-ready .ch--mkt-clients:not([data-seen~="gold"]) .mcl-door--gold {
    opacity: 0;
    translate: 0 -5px;
    transition-delay: 0s;
}
.ch--mkt-clients .mcl-wave {
    transform-box: view-box;
}
.motion .ch--mkt-clients .mcl-wave {
    animation: mcl-wave 0.7s ease-in-out infinite alternate;
}
@keyframes mcl-wave {
    from { rotate: -14deg; }
    to { rotate: 16deg; }
}
/* with the last list the family walks up the street from its lower end, a small rise in every step */
.ch--mkt-clients .mcl-family {
    transition: translate 2.8s cubic-bezier(0.3, 0.55, 0.35, 1) 0.9s, opacity 0.9s var(--ease) 0.9s;
}
.motion.ch-ready .ch--mkt-clients:not([data-seen~="blue"]) .mcl-family {
    translate: 340px 6px;
    opacity: 0;
    transition-delay: 0s;
}
.motion.ch-ready .ch--mkt-clients[data-seen~="blue"] .mcl-gait {
    animation: mcl-step 0.4s ease-in-out 0.9s 7 alternate;
}
@keyframes mcl-step {
    to { transform: translateY(-2px); }
}

/* ---- the life of the place, only with motion, resting while the section is off screen */
.motion .ch--mkt-clients .mcl-cloth {
    animation: mcl-flutter 2.6s ease-in-out infinite alternate;
}
.motion .ch--mkt-clients .mcl-w2 {
    animation-duration: 2.1s;
    animation-delay: -0.8s;
}
.motion .ch--mkt-clients .mcl-w3 {
    animation-duration: 3s;
    animation-delay: -1.7s;
}
@keyframes mcl-flutter {
    0% { transform: skewY(-3deg) scaleX(0.95); }
    50% { transform: skewY(1deg) scaleX(1.02); }
    100% { transform: skewY(4deg) scaleX(0.97); }
}
.motion .ch--mkt-clients .mcl-tail {
    animation: mcl-swing 1.7s ease-in-out infinite alternate;
}
.motion .ch--mkt-clients .mcl-w2 .mcl-tail {
    animation-duration: 1.4s;
    animation-delay: -0.5s;
}
.motion .ch--mkt-clients .mcl-w3 .mcl-tail {
    animation-duration: 2s;
    animation-delay: -1.1s;
}
@keyframes mcl-swing {
    from { transform: rotate(-5deg); }
    to { transform: rotate(6deg); }
}
.ch--mkt-clients :is(.mcl-bamboo, .mcl-broom) {
    transform-box: view-box;
}
.motion .ch--mkt-clients .mcl-bamboo {
    animation: mcl-sway 7s ease-in-out infinite alternate;
}
.motion .ch--mkt-clients .mcl-bamboo--2 {
    animation-duration: 8.6s;
    animation-delay: -3s;
}
.motion .ch--mkt-clients .mcl-bamboo--3 {
    animation-duration: 6.2s;
    animation-delay: -1.4s;
}
@keyframes mcl-sway {
    from { rotate: -1.1deg; }
    to { rotate: 1.4deg; }
}
.motion .ch--mkt-clients .mcl-broom {
    animation: mcl-sweep 1.2s ease-in-out infinite alternate;
}
@keyframes mcl-sweep {
    from { rotate: -9deg; }
    to { rotate: 13deg; }
}
/* the dust the broom lifts, rising and settling with each stroke */
.motion .ch--mkt-clients .mcl-dust {
    animation: mcl-dust 2.4s ease-out infinite;
}
@keyframes mcl-dust {
    0%, 100% { opacity: 0; translate: 0 2px; }
    30% { opacity: 0.9; }
    70% { opacity: 0.4; translate: -6px -5px; }
}
.motion .ch--mkt-clients .mcl-smoke {
    animation: mcl-smoke 3.6s ease-in-out infinite;
}
.motion .ch--mkt-clients .mcl-smoke--2 {
    animation-delay: -1.8s;
}
@keyframes mcl-smoke {
    0% { opacity: 0; translate: 0 3px; }
    40% { opacity: 1; }
    100% { opacity: 0; translate: 3px -9px; }
}
.ch--mkt-clients .mcl-cook {
    transform-box: fill-box;
    transform-origin: center;
}
.motion .ch--mkt-clients .mcl-cook {
    animation: mcl-cook 7.5s ease-out infinite;
}
.motion .ch--mkt-clients .mcl-cook--2 {
    animation-delay: -2.5s;
}
.motion .ch--mkt-clients .mcl-cook--3 {
    animation-delay: -5s;
}
@keyframes mcl-cook {
    0% { opacity: 0; translate: 0 26px; scale: 0.6; }
    30% { opacity: 1; }
    100% { opacity: 0; translate: 34px -64px; scale: 1.45; }
}
.ch--mkt-clients .mcl-rays {
    transform-box: view-box;
    transform-origin: 1392px 278px;
}
.motion .ch--mkt-clients .mcl-rays {
    animation: mcl-rays 30s ease-in-out infinite alternate;
}
@keyframes mcl-rays {
    to { rotate: 5deg; opacity: 0.7; }
}
.motion .ch--mkt-clients .mcl-mist {
    animation: mcl-mist 26s ease-in-out infinite alternate;
}
@keyframes mcl-mist {
    to { translate: -36px 3px; }
}
.motion .ch--mkt-clients .mcl-drift2 {
    animation-duration: 80s;
    animation-delay: -30s;
}
.motion .ch--mkt-clients .mcl-drift3 {
    animation-duration: 70s;
    animation-delay: -12s;
}

/* ---- the morning goes on while the names are read: the sun climbs, the clouds drift on, the light grows */
@supports (animation-timeline: view()) {
    .motion .ch--mkt-clients .ly--sun {
        animation: mcl-climb linear both;
        animation-timeline: --ch;
        animation-range: contain 0% contain 100%;
    }
    .motion .ch--mkt-clients .ly--clouds {
        animation: mcl-drift linear both;
        animation-timeline: --ch;
        animation-range: contain 0% contain 100%;
    }
    .motion .ch--mkt-clients .ly--light {
        animation: mcl-light linear both;
        animation-timeline: --ch;
        animation-range: contain 0% contain 80%;
    }
    @keyframes mcl-climb {
        from { translate: 0 3%; }
        to { translate: 0 -3%; }
    }
    @keyframes mcl-drift {
        from { translate: 2% 0; }
        to { translate: -3% 0; }
    }
    @keyframes mcl-light {
        from { opacity: 0.45; }
    }
}

/* ==========================================================================
   chapter mkt/team
   ========================================================================== */
/* The studio in the garden, late in the morning. It opens empty; Jacky steps up to the table and the four things he
   leads light up on the screens one after another; the gate's doors swing open on a guest and Irene comes out to
   meet him; then the delivery team takes the chairs, their laptops, a tablet of colours and the ring light come on,
   and Irene brings the guest up the steps to the table. Without motion that last picture is the whole story. */
.ch--mkt-team .ch__head {
    align-content: start;
}
.ch--mkt-team .beat {
    gap: 10px;
}
/* the role reads as the line under a name, in the gold ink of the page */
.ch--mkt-team .mtm-role {
    color: var(--accent);
    font-weight: 600;
    line-height: 1.35;
}
.ch--mkt-team .beat__text {
    margin-top: 2px;
    color: var(--fg);
    line-height: 1.55;
}
/* the team closes the chapter in one sentence, a little larger than the lines about each founder */
.ch--mkt-team .mtm-crew-text {
    font-size: var(--step-lead);
    line-height: 1.5;
    text-wrap: pretty;
}
/* after the last beat the full table stays in view a little longer, before the foot of the section rises */
@media (prefers-reduced-motion: no-preference) {
    .motion .ch--mkt-team .beats {
        padding-bottom: 46vh;
    }
}
/* the section's own sky is for the page without motion: with it the drawing covers the whole section */
.motion .ch--mkt-team .sec__sky {
    display: none;
}
/* the strip of land at the foot of the section carries a boat; this chapter is a garden, so it goes */
.ch--mkt-team .sec__ground .boat {
    display: none;
}
/* without motion the drawing is a still picture behind the opening screen; its foot fades into the morning */
:root:not(.motion) .ch--mkt-team .ch__frame::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 16%;
    background: linear-gradient(rgba(227, 236, 232, 0), var(--sky-m, #e3ece8));
}

/* the camera. A phone frame is about 415 units of the drawing wide, and the table is laid out to fit one: it opens
   on the empty pavilion, from Jacky's place to the end of the table; comes close to Jacky and his four screens;
   crosses the lawn to the gate; and comes back to the table for the last beat, when everyone is at it. The zoom's
   origin sets how high the subject sits: under the panel, clear of the bottom tenth. */
.ch--mkt-team {
    --u: 0.616;
    --zx: 61.6%;
    --zy: 86%;
    --zoom: 1.02;
}
.ch--mkt-team[data-beat="jacky"] { --u: 0.597; --zx: 59.7%; --zy: 66%; --zoom: 1.12; }
.ch--mkt-team[data-beat="irene"] { --u: 0.92; --zx: 100%; --zy: 22%; --zoom: 1.12; }
/* on a wide screen the whole garden is in view; the camera leans toward each beat, right of its panel. For the
   gate and the full table it stops short of the drawing's right edge, which keeps Jacky clear of the panel */
@media (min-width: 56.01em) {
    .ch--mkt-team {
        --u: 0.55;
        --zx: 55%;
        --zy: 80%;
        --zoom: 1;
    }
    .ch--mkt-team[data-beat] {
        --s: 0.68;
    }
    .ch--mkt-team[data-beat="jacky"] { --u: 0.6; --zx: 61%; --zy: 74%; --zoom: 1.12; }
    .ch--mkt-team[data-beat="irene"] { --u: 0.687; --zx: 92%; --zy: 78%; --zoom: 1.03; }
    .ch--mkt-team[data-beat="crew"] { --u: 0.687; --zx: 70%; --zy: 82%; --zoom: 1.02; }
    /* the pavilion and the gate need about 760 units side by side; a narrower panel leaves them that */
    .ch--mkt-team .beat {
        width: min(100%, 29rem);
    }
}
/* below 1200 pixels the drawing shows less of its width: a still narrower panel, the subject further right, and
   the camera far enough right for the gate */
@media (min-width: 56.01em) and (max-width: 75em) {
    .ch--mkt-team .beat {
        width: min(100%, 19.5rem);
        padding: 24px;
    }
    .ch--mkt-team[data-beat] {
        --s: 0.74;
    }
    .ch--mkt-team:is([data-beat="irene"], [data-beat="crew"]) {
        --u: 0.779;
        --zoom: 1;
    }
}

/* ---- Jacky steps up to the end of the table, and his laptop wakes */
.ch--mkt-team .mtm-jacky {
    transition: transform 1.3s var(--ease), opacity 0.9s var(--ease);
}
.motion.ch-ready .ch--mkt-team:not([data-seen~="jacky"]) .mtm-jacky {
    transform: translateX(-52px);
    opacity: 0;
    transition-duration: 0.5s;
}
/* every lit thing comes on with the flicker of a screen waking; a beat not yet reached keeps its lights off */
.motion.ch-ready .ch--mkt-team:not([data-seen~="jacky"]) :is(.mtm-lap.k0, .mtm-scr),
.motion.ch-ready .ch--mkt-team:not([data-seen~="crew"]) :is(.mtm-lap.k1, .mtm-lap.k2, .mtm-lap.k3, .mtm-lap.k4, .mtm-ring) {
    opacity: 0;
}
.motion.ch-ready .ch--mkt-team[data-seen~="jacky"] :is(.mtm-lap.k0, .mtm-scr),
.motion.ch-ready .ch--mkt-team[data-seen~="crew"] :is(.mtm-lap.k1, .mtm-lap.k2, .mtm-lap.k3, .mtm-lap.k4, .mtm-ring) {
    animation: mtm-on 1.1s var(--ease) both;
}
.motion.ch-ready .ch--mkt-team[data-seen~="jacky"] .mtm-lap.k0 { animation-delay: 0.7s; }
.motion.ch-ready .ch--mkt-team[data-seen~="jacky"] .mtm-scr.k1 { animation-delay: 1s; }
.motion.ch-ready .ch--mkt-team[data-seen~="jacky"] .mtm-scr.k2 { animation-delay: 1.35s; }
.motion.ch-ready .ch--mkt-team[data-seen~="jacky"] .mtm-scr.k3 { animation-delay: 1.7s; }
.motion.ch-ready .ch--mkt-team[data-seen~="jacky"] .mtm-scr.k4 { animation-delay: 2.05s; }
.motion.ch-ready .ch--mkt-team[data-seen~="crew"] .mtm-lap.k1 { animation-delay: 1s; }
.motion.ch-ready .ch--mkt-team[data-seen~="crew"] .mtm-lap.k2 { animation-delay: 1.3s; }
.motion.ch-ready .ch--mkt-team[data-seen~="crew"] .mtm-lap.k3 { animation-delay: 1.6s; }
.motion.ch-ready .ch--mkt-team[data-seen~="crew"] .mtm-lap.k4 { animation-delay: 1.9s; }
.motion.ch-ready .ch--mkt-team[data-seen~="crew"] .mtm-ring { animation-delay: 2.3s; }
@keyframes mtm-on {
    0% { opacity: 0; }
    12% { opacity: 0.85; }
    20% { opacity: 0.25; }
    34% { opacity: 1; }
    100% { opacity: 1; }
}
/* ...and what each screen shows builds itself: the road map's lines of work, the tracking line, the page, the flow */
.ch--mkt-team :is(.mtm-bar, .mtm-node, .mtm-dot) {
    transform-box: fill-box;
}
.ch--mkt-team .mtm-bar {
    transform-origin: left center;
}
.ch--mkt-team :is(.mtm-node, .mtm-dot) {
    transform-origin: center;
}
.motion.ch-ready .ch--mkt-team[data-seen~="jacky"] .mtm-bar {
    animation: mtm-grow 0.9s var(--ease) calc(1.25s + var(--i) * 0.16s) both;
}
.motion.ch-ready .ch--mkt-team[data-seen~="jacky"] .mtm-line {
    stroke-dasharray: 1 1;
    animation: mtm-draw 1.3s var(--ease-in-out) 1.6s both;
}
.motion.ch-ready .ch--mkt-team[data-seen~="jacky"] .mtm-node {
    animation: mtm-pop 0.7s var(--ease) 2.6s both;
}
@keyframes mtm-grow {
    from { transform: scaleX(0); }
}
@keyframes mtm-draw {
    from { stroke-dashoffset: 1; }
    to { stroke-dashoffset: 0; }
}
@keyframes mtm-pop {
    0% { transform: scale(0); }
    70% { transform: scale(1.25); }
    100% { transform: scale(1); }
}

/* ---- the gate: its doors fold back on their hinges, the guest stands in the light of the lane, and Irene comes
   up the path to meet him with a raised hand; a glint where they meet */
.ch--mkt-team .mtm-door {
    transform-box: fill-box;
    transform: scaleX(0.14);
    transition: transform 1.2s var(--ease-in-out) 0.25s;
}
.ch--mkt-team .mtm-door--l {
    transform-origin: left center;
}
.ch--mkt-team .mtm-door--r {
    transform-origin: right center;
}
.motion.ch-ready .ch--mkt-team:not([data-seen~="irene"]) .mtm-door {
    transform: none;
    transition-duration: 0.5s;
    transition-delay: 0s;
}
/* Irene at the gate and the guest in its doorway belong to the middle beat: in the last one she brings him to the
   table, so in the plain (last) state these two have walked off toward the pavilion */
.ch--mkt-team :is(.mtm-irene, .mtm-guest) {
    opacity: 0;
    transform: translate(-64px, 22px);
    transition: transform 1.1s cubic-bezier(0.55, 0, 0.9, 0.5), opacity 0.6s var(--ease);
}
.motion.ch-ready .ch--mkt-team:not([data-seen~="irene"]) .mtm-irene {
    transform: translate(-84px, 38px);
    transition-duration: 0.5s;
}
.motion.ch-ready .ch--mkt-team:not([data-seen~="irene"]) .mtm-guest {
    transform: none;
    transition-duration: 0.3s;
}
.motion.ch-ready .ch--mkt-team[data-seen~="irene"]:not([data-seen~="crew"]) :is(.mtm-irene, .mtm-guest) {
    opacity: 1;
    transform: none;
}
.motion.ch-ready .ch--mkt-team[data-seen~="irene"]:not([data-seen~="crew"]) .mtm-irene {
    transition: transform 1.6s var(--ease-in-out) 0.5s, opacity 0.7s var(--ease) 0.5s;
}
.motion.ch-ready .ch--mkt-team[data-seen~="irene"]:not([data-seen~="crew"]) .mtm-guest {
    transition: opacity 0.6s var(--ease) 0.7s;
}
.ch--mkt-team .mtm-wave {
    transform-box: fill-box;
    transform-origin: 12% 90%;
}
.motion.ch-ready .ch--mkt-team[data-seen~="irene"] .mtm-wave {
    animation: mtm-wave 0.55s ease-in-out 2.1s 4 alternate both;
}
@keyframes mtm-wave {
    from { transform: rotate(0deg); }
    to { transform: rotate(-16deg); }
}
.ch--mkt-team .mtm-spark {
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
}
.motion.ch-ready .ch--mkt-team[data-seen~="irene"]:not([data-seen~="crew"]) .mtm-spark {
    animation: mtm-star 1.4s var(--ease) 2.3s both;
}
@keyframes mtm-star {
    0% { opacity: 0; transform: scale(0.2) rotate(-30deg); }
    35% { opacity: 1; transform: scale(1.1) rotate(0deg); }
    100% { opacity: 0; transform: scale(0.5) rotate(40deg); }
}

/* the dog by the gate looks up when the doors open, and its tail starts going */
.ch--mkt-team :is(.mtm-dog, .mtm-tail) {
    transform-box: fill-box;
    transition: transform 0.7s var(--ease) 1.4s;
}
.ch--mkt-team .mtm-dog {
    transform-origin: 10% 80%;
    transform: rotate(-24deg);
}
.ch--mkt-team .mtm-tail {
    transform-origin: 100% 90%;
}
.motion.ch-ready .ch--mkt-team:not([data-seen~="irene"]) .mtm-dog {
    transform: none;
    transition-delay: 0s;
}
.motion.ch-ready .ch--mkt-team[data-seen~="irene"] .mtm-tail {
    animation: mtm-wag 0.4s ease-in-out 1.8s infinite alternate;
}
@keyframes mtm-wag {
    to { transform: rotate(22deg); }
}

/* ---- the delivery team sits down, one chair after another, with the small settle of someone taking a seat */
.ch--mkt-team .mtm-crew {
    transition: transform 0.9s cubic-bezier(0.34, 1.5, 0.64, 1), opacity 0.6s var(--ease);
}
.ch--mkt-team .mtm-crew.k1 { transition-delay: 0.3s; }
.ch--mkt-team .mtm-crew.k2 { transition-delay: 0.6s; }
.ch--mkt-team .mtm-crew.k3 { transition-delay: 0.9s; }
.ch--mkt-team .mtm-crew.k4 { transition-delay: 1.2s; }
.motion.ch-ready .ch--mkt-team:not([data-seen~="crew"]) .mtm-crew {
    transform: translateY(-18px);
    opacity: 0;
    transition-duration: 0.4s;
    transition-delay: 0s;
}
/* ...and Irene brings the guest up the steps to the end of the table, as the camera comes back from the gate */
.ch--mkt-team .mtm-in {
    transition: transform 1.8s var(--ease-in-out) 0.5s, opacity 0.8s var(--ease) 0.5s;
}
.motion.ch-ready .ch--mkt-team:not([data-seen~="crew"]) .mtm-in {
    transform: translate(96px, 34px);
    opacity: 0;
    transition-duration: 0.4s;
    transition-delay: 0s;
}
/* once there she talks the guest through the team, her open hand rising and falling */
.ch--mkt-team .mtm-offer {
    transform-box: fill-box;
    transform-origin: 6% 30%;
}
.motion.ch-ready .ch--mkt-team[data-seen~="crew"] .mtm-offer {
    animation: mtm-talk 3s ease-in-out 2.6s infinite alternate;
}

/* ---- the life of the place, only with motion, resting while the section is off screen */
.ch--mkt-team .mtm-rays {
    transform-box: view-box;
    transform-origin: 1330px 168px;
}
.motion .ch--mkt-team .mtm-rays {
    animation: mtm-rays 28s ease-in-out infinite alternate;
}
@keyframes mtm-rays {
    to { rotate: 5deg; opacity: 0.7; }
}
.motion .ch--mkt-team .mtm-drift2 {
    animation-duration: 84s;
    animation-delay: -30s;
}
.ch--mkt-team .mtm-steam {
    opacity: 0.45;
}
.motion .ch--mkt-team .mtm-steam {
    animation: mtm-steam 3.4s ease-out infinite;
}
.motion .ch--mkt-team .mtm-steam--2 {
    animation-delay: -1.7s;
}
@keyframes mtm-steam {
    0% { opacity: 0; translate: 0 5px; }
    30% { opacity: 0.75; }
    100% { opacity: 0; translate: 2px -12px; }
}
.motion .ch--mkt-team[data-seen~="jacky"] .mtm-dot {
    animation: mtm-pulse 2.2s ease-in-out 2.8s infinite;
}
@keyframes mtm-pulse {
    50% { transform: scale(1.5); }
}
.motion .ch--mkt-team .mtm-caret {
    animation: mtm-blink 1.1s steps(1) infinite;
}
@keyframes mtm-blink {
    50% { opacity: 0; }
}
.ch--mkt-team .mtm-point {
    transform-box: fill-box;
    transform-origin: 8% 40%;
}
.motion .ch--mkt-team[data-seen~="jacky"] .mtm-point {
    animation: mtm-talk 3.6s ease-in-out 1.6s infinite alternate;
}
@keyframes mtm-talk {
    to { transform: rotate(-7deg); }
}
/* the dragonfly hangs over the water, darts, and hangs again */
.ch--mkt-team .mtm-dwing {
    transform-box: fill-box;
    transform-origin: 50% 100%;
}
.motion .ch--mkt-team .mtm-dwing {
    animation: mtm-buzz 0.12s linear infinite alternate;
}
@keyframes mtm-buzz {
    to { scale: 1 0.55; }
}
.motion .ch--mkt-team .mtm-dfly {
    animation: mtm-dart 9s ease-in-out infinite;
}
@keyframes mtm-dart {
    0%, 22% { translate: 0 0; }
    30%, 48% { translate: -70px -14px; }
    56%, 74% { translate: -30px 8px; }
    82%, 100% { translate: 0 0; }
}
/* the koi swim their loops under the lotus, each fading out at the end of its way before it comes round again */
.ch--mkt-team .mtm-koi {
    opacity: 0.9;
}
.motion .ch--mkt-team .mtm-koi--1 { animation: mtm-koi 17s linear infinite; }
.motion .ch--mkt-team .mtm-koi--2 { animation: mtm-koi 21s linear -8s infinite; }
.motion .ch--mkt-team .mtm-koi--3 { animation: mtm-koi-back 15s linear -4s infinite; }
@keyframes mtm-koi {
    0% { opacity: 0; translate: -40px 2px; }
    12% { opacity: 0.9; }
    50% { translate: 50px -6px; }
    88% { opacity: 0.9; }
    100% { opacity: 0; translate: 150px 0; }
}
@keyframes mtm-koi-back {
    0% { opacity: 0; translate: 40px 0; }
    14% { opacity: 0.9; }
    55% { translate: -50px 6px; }
    86% { opacity: 0.9; }
    100% { opacity: 0; translate: -140px 2px; }
}
.ch--mkt-team .mtm-wing {
    transform-box: fill-box;
    transform-origin: center;
}
.motion .ch--mkt-team .mtm-wing {
    animation: mtm-flap 0.3s ease-in-out infinite alternate;
}
@keyframes mtm-flap {
    to { scale: 0.3 1; }
}
.motion .ch--mkt-team .mtm-fly {
    animation: mtm-fly 13s ease-in-out infinite;
}
@keyframes mtm-fly {
    0%, 100% { translate: 0 0; }
    25% { translate: 34px -30px; }
    50% { translate: 70px -6px; }
    75% { translate: 22px 16px; }
}
.ch--mkt-team .mtm-petal {
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
}
.motion .ch--mkt-team .mtm-petal {
    animation: mtm-petal 10s linear infinite;
}
.motion .ch--mkt-team .mtm-petal--2 { animation-duration: 12.5s; animation-delay: -4s; }
.motion .ch--mkt-team .mtm-petal--3 { animation-duration: 11s; animation-delay: -7.5s; }
@keyframes mtm-petal {
    0% { opacity: 0; translate: 0 0; rotate: 0deg; }
    8% { opacity: 1; }
    45% { translate: -16px 54px; }
    75% { opacity: 0.9; translate: 8px 96px; }
    100% { opacity: 0; translate: -20px 140px; rotate: 380deg; }
}
.motion .ch--mkt-team .mtm-shade {
    animation: mtm-shade 40s linear infinite;
}
.motion .ch--mkt-team .mtm-shade--2 {
    animation-duration: 56s;
    animation-delay: -30s;
}
/* the cloud's shadow on the roof crosses it in about twelve seconds, then the thatch has the sun for longer */
.motion .ch--mkt-team .mtm-shade--3 {
    animation-duration: 32s;
    animation-delay: -4s;
}
@keyframes mtm-shade {
    0% { translate: 360px 0; opacity: 0; }
    12% { opacity: 1; }
    88% { opacity: 1; }
    100% { translate: -1500px 30px; opacity: 0; }
}

/* ---- the morning moves on while the section is read: the sun climbs, the clouds pass over, and the pavilion's
   shade draws in under it */
@supports (animation-timeline: view()) {
    .motion .ch--mkt-team .ly--sun {
        animation: mtm-climb linear both;
        animation-timeline: --ch;
        animation-range: contain 0% contain 100%;
    }
    .motion .ch--mkt-team .ly--clouds {
        animation: mtm-pass linear both;
        animation-timeline: --ch;
        animation-range: contain 0% contain 100%;
    }
    .motion .ch--mkt-team .mtm-shadow {
        transform-box: fill-box;
        transform-origin: 50% 0;
        animation: mtm-noon linear both;
        animation-timeline: --ch;
        animation-range: contain 0% contain 100%;
    }
    @keyframes mtm-climb {
        to { translate: 0 -5%; }
    }
    @keyframes mtm-pass {
        from { translate: 2% 0; }
        to { translate: -3% 0; }
    }
    @keyframes mtm-noon {
        to { scale: 1 0.5; }
    }
}

/* ==========================================================================
   chapter mkt/faq
   ========================================================================== */
/* The lontar compound in the late morning: four groups of questions, four changes. The strips on the rack dry to
   gold, the library doors open on the lamplit shelves, the reader fans out his book, a guest walks in through the
   gate with her offering; and every answer that is opened lets a frangipani flower fall into the garden. Every
   answer opens in place and reads without script. Without motion the strips are gold, the doors open, the book
   fanned, the guest in. */
.ch--mkt-faq .ch__head {
    align-content: start;
}

/* ---- the questions: plain text on the day panel, each one a full width tap target with a clear sign */
.ch--mkt-faq .beat {
    gap: 0;
    padding-block: clamp(6px, 1vw, 12px);
}
.ch--mkt-faq .faq__item {
    border: 0;
    border-radius: 0;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
.ch--mkt-faq .faq__item + .faq__item {
    border-top: 1px solid var(--line);
}
.ch--mkt-faq .faq__q {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    min-height: 44px;
    padding: 17px 0;
    color: var(--fg);
    font: 600 clamp(1.125rem, 1.02rem + 0.42vw, 1.32rem)/1.32 var(--display);
    letter-spacing: -0.01em;
    text-wrap: pretty;
    list-style: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.ch--mkt-faq .faq__q::-webkit-details-marker {
    display: none;
}
/* the sign: a plus in a gold disc that turns into a minus on a full gold disc when the answer is open */
.ch--mkt-faq .faq__q::after {
    content: "";
    flex: none;
    width: 30px;
    height: 30px;
    margin-top: -3px;
    border-radius: 50%;
    background:
        linear-gradient(currentColor, currentColor) 50% 50% / 12px 2px no-repeat,
        linear-gradient(currentColor, currentColor) 50% 50% / 2px 12px no-repeat,
        rgba(253, 191, 20, 0.26);
    color: var(--accent);
    font-size: 0;
    transition: transform 0.45s var(--ease), background-size 0.45s var(--ease), background-color 0.3s var(--ease);
}
.ch--mkt-faq .faq__q:hover::after {
    background-color: rgba(253, 191, 20, 0.45);
}
.ch--mkt-faq .faq__item[open] > .faq__q::after {
    transform: rotate(180deg);
    background-size: 12px 2px, 2px 0, auto;
    background-color: var(--gold);
}
.ch--mkt-faq .faq__q:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 3px;
    border-radius: 4px;
}
.ch--mkt-faq .faq__a {
    max-width: 62ch;
    padding: 0 46px 20px 0;
    color: var(--fg);
    font-size: max(1rem, 0.98em);
    line-height: 1.58;
}
/* with motion the answer slides open where the browser can size it, and its words rise into place */
.motion .ch--mkt-faq .faq__item[open] > .faq__a {
    animation: fq-open 0.5s var(--ease) both;
}
@keyframes fq-open {
    from { opacity: 0; translate: 0 -6px; }
}
@supports (interpolate-size: allow-keywords) {
    .motion .ch--mkt-faq .faq__item {
        interpolate-size: allow-keywords;
    }
    .motion .ch--mkt-faq .faq__item::details-content {
        block-size: 0;
        overflow: hidden;
        transition: block-size 0.45s var(--ease), content-visibility 0.45s allow-discrete;
    }
    .motion .ch--mkt-faq .faq__item[open]::details-content {
        block-size: auto;
    }
}
:root:not(.motion) .ch--mkt-faq .beats {
    gap: 20px;
}
/* without motion the drawing is a still picture behind the opening screen; its foot fades into the morning */
:root:not(.motion) .ch--mkt-faq .ch__frame::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 18%;
    background: linear-gradient(rgba(220, 234, 234, 0), var(--sky-m, #dceaea));
}
/* a phone on its side shows only the foot of the drawing: a band of the morning sky keeps the title on calm ground */
@media (max-height: 500px) and (min-aspect-ratio: 16/9) {
    .ch--mkt-faq .ch__head {
        position: relative;
        isolation: isolate;
    }
    .ch--mkt-faq .ch__head::before {
        content: "";
        position: absolute;
        z-index: -1;
        inset: calc(var(--head-h) - 8px) -40vw 30% -40vw;
        background: linear-gradient(90deg, rgba(234, 243, 242, 0.92) 0%, rgba(234, 243, 242, 0.86) 55%, rgba(234, 243, 242, 0) 82%);
        pointer-events: none;
    }
    /* ...and narrower panels leave half the compound in view */
    .ch--mkt-faq .beat {
        width: min(100%, 25rem);
    }
}

/* ---- the camera. On a phone it opens on the frangipani by the shrine and walks the compound to the gate, coming
   close at each place so its change fills the lower half of the screen under the words. On a wide screen the whole
   compound is in view; it leans toward each place, the panel standing on the other side. */
.ch--mkt-faq {
    --u: 0.21;
    --zx: 21%;
    --zy: 92%;
    --zoom: 1.06;
    /* how long each change waits for the camera: on a phone it travels far, on a wide screen it barely moves */
    --fq-wait: 0.9s;
}
.ch--mkt-faq[data-beat] {
    --zy: 90%;
    --zoom: 1.14;
}
.ch--mkt-faq[data-beat="when"] { --u: 0.43; --zx: 43%; --zy: 92%; --zoom: 1.15; }
.ch--mkt-faq[data-beat="cost"] { --u: 0.609; --zx: 60.9%; }
.ch--mkt-faq[data-beat="honest"] { --u: 0.775; --zx: 77.5%; --zoom: 1.15; }
.ch--mkt-faq[data-beat="deal"] { --u: 0.93; --zx: 93%; --zoom: 1.12; }
/* the panels are short: on a phone the next one waits below the frame until the drawing has changed, and the last
   one leaves room under it, so the guest's arrival is not cut by the strip where the section ends */
@media (max-width: 56em) {
    .motion .ch--mkt-faq .beats {
        gap: max(56vh, 430px);
        padding-bottom: 48vh;
    }
}
@media (min-width: 56.01em) {
    .ch--mkt-faq {
        --u: 0.5;
        --zx: 50%;
        --zoom: 1;
        --pan: 0.4;
        --fq-wait: 0.3s;
    }
    .ch--mkt-faq[data-beat] {
        --s: 0.72;
        --zoom: 1.1;
    }
    .ch--mkt-faq[data-beat="when"] {
        --s: 0.3;
    }
    .ch--mkt-faq .beat {
        width: min(100%, 28rem);
    }
}

/* ---- the rack: the strips dry from green to gold in the sun, a quarter of the rack at a time, as a light runs along.
   Each change of the compound waits for the camera (--fq-wait), so it plays where the reader is looking */
.ch--mkt-faq .fq-gold {
    transition: opacity 0.9s var(--ease) calc(var(--fq-wait) + 0.1s + var(--k, 0) * 0.32s);
}
.ch--mkt-faq .fq-gold.k2 { --k: 1; }
.ch--mkt-faq .fq-gold.k3 { --k: 2; }
.ch--mkt-faq .fq-gold.k4 { --k: 3; }
.motion.ch-ready .ch--mkt-faq:not([data-seen~="when"]) .fq-gold {
    opacity: 0;
    transition-duration: 0.5s;
    transition-delay: 0s;
}
.ch--mkt-faq .fq-sweep {
    opacity: 0;
}
.motion.ch-ready .ch--mkt-faq[data-seen~="when"] .fq-sweep {
    animation: fq-sweep 1.9s var(--ease-in-out) var(--fq-wait) both;
}
@keyframes fq-sweep {
    0% { opacity: 0; translate: 0 0; }
    15%, 85% { opacity: 1; }
    100% { opacity: 0; translate: 250px 0; }
}

/* ---- the library: the doors turn on their hinges, then the lamp inside lights the shelves and the steps */
.ch--mkt-faq .fq-door {
    transform-box: fill-box;
    transform: scaleX(0.16);
    transition: transform 1.5s var(--ease-in-out) var(--fq-wait);
}
.ch--mkt-faq .fq-door--l {
    transform-origin: 0 50%;
}
.ch--mkt-faq .fq-door--r {
    transform-origin: 100% 50%;
}
.ch--mkt-faq .fq-glow {
    transition: opacity 1s var(--ease) calc(var(--fq-wait) + 0.85s);
}
.motion.ch-ready .ch--mkt-faq:not([data-seen~="cost"]) .fq-door {
    transform: none;
    transition-duration: 0.6s;
    transition-delay: 0s;
}
.motion.ch-ready .ch--mkt-faq:not([data-seen~="cost"]) .fq-glow {
    opacity: 0;
    transition-delay: 0s;
}
/* a glint on the books once the light reaches them, and on the book once it lies open */
.ch--mkt-faq .fq-star {
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
}
.motion.ch-ready .ch--mkt-faq[data-seen~="cost"] .fq-star--door {
    animation: fq-star 1.4s var(--ease) calc(var(--fq-wait) + 1.45s) both;
}
.motion.ch-ready .ch--mkt-faq[data-seen~="honest"] .fq-star--book {
    animation: fq-star 1.4s var(--ease) calc(var(--fq-wait) + 1.15s) both;
}
@keyframes fq-star {
    0% { opacity: 0; scale: 0.2; rotate: -30deg; }
    35% { opacity: 1; scale: 1.15; }
    100% { opacity: 0; scale: 0.5; rotate: 45deg; }
}

/* ---- the book: the leaves fan out around their cord one after another, the carved board standing last */
.ch--mkt-faq .fq-leaf {
    transform-box: view-box;
    transform: rotate(var(--a));
    transition: transform 1.3s var(--ease) calc(var(--fq-wait) + var(--i) * 0.08s);
}
.motion.ch-ready .ch--mkt-faq:not([data-seen~="honest"]) .fq-leaf {
    transform: none;
    transition-duration: 0.6s;
    transition-delay: 0s;
}
/* ...and now and then the reader lifts the top leaf */
.motion .ch--mkt-faq .fq-leaf--top {
    animation: fq-read 7s var(--ease-in-out) 2.6s infinite;
}
.motion.ch-ready .ch--mkt-faq:not([data-seen~="honest"]) .fq-leaf--top {
    animation: none;
}
@keyframes fq-read {
    0%, 62%, 100% { rotate: 0deg; }
    72%, 88% { rotate: -9deg; }
}

/* ---- the guest comes out of the gate and walks down to the pavilion with her offering, stepping as she goes */
.ch--mkt-faq .fq-visitor {
    transform-box: fill-box;
    transform-origin: 50% 100%;
}
.motion.ch-ready .ch--mkt-faq:not([data-seen~="deal"]) .fq-visitor {
    opacity: 0;
    translate: 74px -50px;
    scale: 0.9;
    transition: opacity 0.5s var(--ease);
}
.motion.ch-ready .ch--mkt-faq[data-seen~="deal"] .fq-visitor {
    animation: fq-walkin 3s linear var(--fq-wait) both;
}
@keyframes fq-walkin {
    0% { opacity: 0; translate: 74px -50px; scale: 0.9; }
    12.5% { opacity: 1; translate: 56.7px -41.3px; scale: 0.92; }
    25% { translate: 41.6px -28.1px; scale: 0.94; }
    37.5% { translate: 28.9px -22.5px; scale: 0.96; }
    50% { translate: 18.5px -12.5px; scale: 0.975; }
    62.5% { translate: 10.4px -10px; scale: 0.986; }
    75% { translate: 4.6px -3.1px; scale: 0.994; }
    87.5% { translate: 1.2px -2.4px; scale: 0.998; }
    100% { opacity: 1; translate: 0 0; scale: 1; }
}

/* ...and as she comes through, the doves start up from the gate's ridge, swoop over the lawn and settle again */
.ch--mkt-faq .fq-startle {
    opacity: 0;
}
.motion.ch-ready .ch--mkt-faq[data-seen~="deal"] .fq-startle {
    opacity: 1;
}
.motion.ch-ready .ch--mkt-faq[data-seen~="deal"] .fq-perch {
    animation: fq-perch 5s linear calc(var(--fq-wait) + 0.7s) both;
}
.motion.ch-ready .ch--mkt-faq[data-seen~="deal"] .fq-up {
    animation: fq-up1 5s ease-in-out calc(var(--fq-wait) + 0.7s) both;
}
.motion.ch-ready .ch--mkt-faq[data-seen~="deal"] .fq-up--2 {
    animation-name: fq-up2;
}
.motion.ch-ready .ch--mkt-faq[data-seen~="deal"] .fq-up--3 {
    animation-name: fq-up3;
}
/* the copies on the ridge only flap while they fly */
.motion .ch--mkt-faq:not([data-seen~="deal"]) .fq-startle .fq-wing {
    animation: none;
}
@keyframes fq-perch {
    0% { opacity: 1; }
    3%, 93% { opacity: 0; }
    100% { opacity: 1; }
}
@keyframes fq-up1 {
    0% { opacity: 0; translate: 0 0; }
    3% { opacity: 1; }
    25% { translate: -84px 70px; }
    50% { translate: -206px 116px; }
    75% { translate: -130px 52px; }
    93% { opacity: 1; translate: 0 0; }
    100% { opacity: 0; translate: 0 0; }
}
@keyframes fq-up2 {
    0% { opacity: 0; translate: 0 0; }
    3% { opacity: 1; }
    25% { translate: -52px 96px; }
    50% { translate: -158px 150px; }
    75% { translate: -70px 84px; }
    93% { opacity: 1; translate: 0 0; }
    100% { opacity: 0; translate: 0 0; }
}
@keyframes fq-up3 {
    0% { opacity: 0; translate: 0 0; }
    3% { opacity: 1; }
    25% { translate: -110px 44px; }
    50% { translate: -250px 76px; }
    75% { translate: -176px 14px; }
    93% { opacity: 1; translate: 0 0; }
    100% { opacity: 0; translate: 0 0; }
}

/* ---- a frangipani flower for every answer: opening it lets the flower fall, swaying, to rest in the garden; closing it
   lets the flower fade where it lies */
.ch--mkt-faq .fq-drop {
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    transition: opacity 0.6s var(--ease);
}
.motion .ch--mkt-faq:has([data-beat="when"] > .faq__item:nth-of-type(1)[open]) .fq-drop--1,
.motion .ch--mkt-faq:has([data-beat="when"] > .faq__item:nth-of-type(2)[open]) .fq-drop--2,
.motion .ch--mkt-faq:has([data-beat="cost"] > .faq__item:nth-of-type(1)[open]) .fq-drop--3,
.motion .ch--mkt-faq:has([data-beat="cost"] > .faq__item:nth-of-type(2)[open]) .fq-drop--4,
.motion .ch--mkt-faq:has([data-beat="cost"] > .faq__item:nth-of-type(3)[open]) .fq-drop--5,
.motion .ch--mkt-faq:has([data-beat="honest"] > .faq__item:nth-of-type(1)[open]) .fq-drop--6,
.motion .ch--mkt-faq:has([data-beat="honest"] > .faq__item:nth-of-type(2)[open]) .fq-drop--7,
.motion .ch--mkt-faq:has([data-beat="deal"] > .faq__item:nth-of-type(1)[open]) .fq-drop--8,
.motion .ch--mkt-faq:has([data-beat="deal"] > .faq__item:nth-of-type(2)[open]) .fq-drop--9,
.motion .ch--mkt-faq:has([data-beat="deal"] > .faq__item:nth-of-type(3)[open]) .fq-drop--10 {
    opacity: 1;
    transition-duration: 0.35s;
    animation: fq-drop 3.8s ease-in-out both;
}
@keyframes fq-drop {
    0% { translate: -150px -330px; rotate: -260deg; }
    22% { translate: -76px -258px; rotate: -200deg; }
    42% { translate: -118px -170px; rotate: -150deg; }
    62% { translate: -34px -92px; rotate: -86deg; }
    80% { translate: -52px -30px; rotate: -36deg; }
    100% { translate: 0 0; rotate: 0deg; }
}

/* ---- the life of the place, only with motion, resting while the section is off screen */
.ch--mkt-faq .fq-strips {
    transform-box: view-box;
    transform-origin: 696px 638px;
}
.motion .ch--mkt-faq .fq-strips {
    animation: fq-breeze 5.5s ease-in-out infinite alternate;
}
@keyframes fq-breeze {
    from { transform: skewX(2.4deg); }
    to { transform: skewX(-2deg); }
}
.ch--mkt-faq .fq-smoke path {
    fill: none;
    stroke: #ffffff;
    stroke-width: 1.6;
    stroke-linecap: round;
    opacity: 0.45;
}
.motion .ch--mkt-faq .fq-puff {
    animation: fq-smoke 5s ease-out infinite;
}
.motion .ch--mkt-faq .fq-puff--2 {
    animation-delay: -2.5s;
}
@keyframes fq-smoke {
    0% { opacity: 0; translate: 0 6px; }
    25% { opacity: 0.6; }
    100% { opacity: 0; translate: 3px -26px; }
}
.ch--mkt-faq :is(.fq-fall, .fq-wing, .fq-fly__w, .fq-flame) {
    transform-box: fill-box;
    transform-origin: center;
}
.ch--mkt-faq .fq-fall {
    opacity: 0;
}
.motion .ch--mkt-faq .fq-fall {
    animation: fq-fall 12s linear infinite;
}
.motion .ch--mkt-faq .fq-fall--2 { animation-duration: 15s; animation-delay: -6s; }
.motion .ch--mkt-faq .fq-fall--3 { animation-duration: 13.5s; animation-delay: -10s; }
@keyframes fq-fall {
    0% { opacity: 0; translate: 0 0; rotate: 0deg; }
    6% { opacity: 1; }
    40% { translate: 16px 92px; }
    70% { translate: -10px 160px; }
    92% { opacity: 1; translate: 8px 236px; }
    100% { opacity: 0; translate: 8px 242px; rotate: 420deg; }
}
/* far off, a few swifts cross the sky over the garden and fade into the haze */
.motion .ch--mkt-faq .fq-swifts {
    animation: fq-swifts 30s linear infinite;
}
.motion .ch--mkt-faq .fq-swifts__y {
    animation: fq-dy 4.5s ease-in-out infinite alternate;
}
@keyframes fq-swifts {
    0% { translate: 0 0; opacity: 0; }
    8%, 90% { opacity: 1; }
    100% { translate: -1080px 30px; opacity: 0; }
}
/* the doves cross the whole compound low over the roofs and back, so every place sees them pass */
.motion .ch--mkt-faq .fq-doves {
    animation: fq-dx 30s ease-in-out infinite alternate;
}
.motion .ch--mkt-faq .fq-doves__y {
    animation: fq-dy 6.5s ease-in-out infinite alternate;
}
@keyframes fq-dx {
    to { translate: -900px 0; }
}
@keyframes fq-dy {
    from { translate: 0 14px; }
    to { translate: 0 -22px; }
}
.motion .ch--mkt-faq .fq-wing {
    animation: fq-flap 0.5s ease-in-out infinite alternate;
}
.motion .ch--mkt-faq .fq-wing--2 { animation-duration: 0.42s; }
.motion .ch--mkt-faq .fq-wing--3 { animation-duration: 0.56s; animation-delay: -0.2s; }
@keyframes fq-flap {
    to { scale: 1 0.35; }
}
.motion .ch--mkt-faq .fq-fly {
    animation: fq-flit 9s ease-in-out infinite;
}
.motion .ch--mkt-faq .fq-fly--2 { animation-duration: 11s; animation-delay: -4s; }
.motion .ch--mkt-faq .fq-fly--3 { animation-duration: 8s; animation-delay: -6.5s; animation-direction: reverse; }
.motion .ch--mkt-faq .fq-fly__w {
    animation: fq-flutter 0.22s ease-in-out infinite alternate;
}
@keyframes fq-flutter {
    to { scale: 0.25 1; }
}
@keyframes fq-flit {
    0%, 100% { translate: 0 0; }
    20% { translate: 26px -18px; }
    40% { translate: 54px -4px; }
    60% { translate: 30px -34px; }
    80% { translate: -6px -14px; }
}
.ch--mkt-faq .fq-rays {
    transform-box: view-box;
    transform-origin: 1330px 132px;
}
.motion .ch--mkt-faq .fq-rays {
    animation: fq-rays 28s ease-in-out infinite alternate;
}
@keyframes fq-rays {
    to { rotate: 5deg; opacity: 0.7; }
}
.motion .ch--mkt-faq .fq-flame {
    animation: fq-flame 1.4s ease-in-out infinite alternate;
}
@keyframes fq-flame {
    50% { scale: 0.85 1.15; }
    to { scale: 1.05 0.9; }
}
.motion .ch--mkt-faq .fq-band {
    animation: fq-band 34s ease-in-out infinite alternate;
}
@keyframes fq-band {
    to { translate: -36px 2px; }
}
.motion .ch--mkt-faq .fq-drift2 {
    animation-duration: 80s;
    animation-delay: -24s;
}
/* the shadows of clouds cross the lawn, and the shafts of light breathe */
.motion .ch--mkt-faq .fq-cloudshade {
    animation: fq-cloudshade 44s linear infinite;
}
.motion .ch--mkt-faq .fq-cloudshade--2 {
    animation-duration: 58s;
    animation-delay: -30s;
}
@keyframes fq-cloudshade {
    0% { translate: 420px 0; opacity: 0; }
    12%, 88% { opacity: 1; }
    100% { translate: -1300px 20px; opacity: 0; }
}
.motion .ch--mkt-faq .fq-shafts {
    animation: fq-shafts 9s ease-in-out infinite alternate;
}
@keyframes fq-shafts {
    to { opacity: 0.45; }
}

/* ---- the morning moves toward noon while the section is read: the sun climbs, its light swings across the compound,
   the long shadows draw in under the houses, the cloud over the hills builds */
@supports (animation-timeline: view()) {
    .motion .ch--mkt-faq .ly--sun {
        animation: fq-climb linear both;
        animation-timeline: --ch;
        animation-range: contain 0% contain 100%;
    }
    .motion .ch--mkt-faq .fq-shade {
        transform-box: fill-box;
        transform-origin: 50% 0;
        animation: fq-noon linear both;
        animation-timeline: --ch;
        animation-range: contain 0% contain 100%;
    }
    .motion .ch--mkt-faq .fq-heap {
        transform-box: fill-box;
        transform-origin: 50% 100%;
        animation: fq-build linear both;
        animation-timeline: --ch;
        animation-range: contain 0% contain 100%;
    }
    /* the shafts of light swing slowly across the compound as the sun moves, while they still breathe */
    .motion .ch--mkt-faq .fq-shafts {
        transform-box: view-box;
        transform-origin: 1330px 128px;
        animation: fq-shafts 9s ease-in-out infinite alternate, fq-swing linear both;
        animation-timeline: auto, --ch;
        animation-range: normal, contain 0% contain 100%;
    }
    @keyframes fq-swing {
        from { rotate: -7deg; }
        to { rotate: 5deg; }
    }
    /* as the chapter comes up the screen, Agung and the hills rise behind the wall, the way the hero's world comes closer */
    .motion .ch--mkt-faq .ly--far {
        animation: fq-rise linear both;
        animation-timeline: --ch;
        animation-range: entry 25% entry 100%;
    }
    @keyframes fq-rise {
        from { translate: 0 8%; }
    }
    @keyframes fq-climb {
        to { translate: 0 -4%; }
    }
    @keyframes fq-noon {
        to { scale: 1 0.42; }
    }
    @keyframes fq-build {
        to { scale: 1.12; }
    }
}

/* ==========================================================================
   chapter mkt/contact
   ========================================================================== */
/* A clear morning on the coast. The jukung leaves the shallows and sails out through the gap in the reef toward
   the sun while the words pass (a scroll move); the ways to reach us raise its gold sail, the office plants a pin
   beside the bale on the headland. Without motion the boat is under sail beyond the reef and the pin stands. */
.ch--mkt-contact .ch__head {
    align-content: start;
}
.ch--mkt-contact .mct-cta {
    justify-self: start;
    margin-top: 4px;
}
/* a phone on its side shows the whole drawing and only a band of sky: the title on one line and the lead
   under it stay in that band, the button just over the horizon */
@media (max-height: 30em) and (min-aspect-ratio: 3/2) {
    .ch--mkt-contact .ch__head {
        gap: 8px;
        padding-top: calc(var(--head-h) + 10px);
    }
    .ch--mkt-contact .ch__title {
        font-size: clamp(1.75rem, 7.5vh + 0.5rem, 2.5rem);
    }
    .ch--mkt-contact .ch__lead {
        max-width: 36rem;
        font-size: 1rem;
        line-height: 1.4;
    }
    .ch--mkt-contact .mct-cta {
        margin-top: 2px;
    }
}

/* ---- the ways in: the address and the number large enough to read across a room, and to hit with a thumb */
.ch--mkt-contact .beat {
    width: min(100%, 34rem);
    container-type: inline-size;
}
.ch--mkt-contact .mct-ways {
    display: grid;
    gap: 18px;
}
.ch--mkt-contact .mct-way {
    display: grid;
    justify-items: start;
}
.ch--mkt-contact .mct-way__label {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--fg-soft);
    font: 600 1rem/1.4 var(--text);
    letter-spacing: 0;
}
.ch--mkt-contact .mct-way__label .ico {
    width: 20px;
    height: 20px;
    color: var(--gold-ink);
}
.ch--mkt-contact .mct-way__big {
    display: inline-block;
    max-width: 100%;
    min-height: 44px;
    padding-block: 5px 3px;
    color: var(--fg);
    font-family: var(--display);
    font-weight: 650;
    line-height: 1.12;
    letter-spacing: -0.02em;
    text-decoration: none;
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
    white-space: nowrap;
}
/* sized to the panel's own width, so the address and the number fill it on any phone without breaking */
.ch--mkt-contact .mct-way__big--mail {
    font-size: clamp(1.25rem, 8.1cqi, 2.4rem);
    font-stretch: 88%;
}
.ch--mkt-contact .mct-way__big--tel {
    font-size: clamp(1.75rem, 10.7cqi, 3.25rem);
}
.ch--mkt-contact .mct-way__big:hover {
    text-decoration-line: underline;
    text-decoration-color: var(--gold);
}
.ch--mkt-contact .mct-office {
    margin-top: 6px;
    color: var(--fg);
    font: 500 var(--step-lead)/1.45 var(--text);
}
.ch--mkt-contact .mct-office__line {
    display: block;
}
/* a tablet shows less of the drawing beside the panel, so the panel narrows (and the camera follows further,
   below) to keep the boat clear of the words */
@media (min-width: 56.01em) and (max-width: 72em) {
    .ch--mkt-contact .beat {
        width: min(100%, 28rem);
    }
}
/* on a phone on its side the panels narrow, and each stands aside from its change: the sail rises mid frame,
   so its panel goes right; the pin drops on the right, so its panel stays left */
@media (max-height: 30em) and (min-aspect-ratio: 3/2) {
    .motion .ch--mkt-contact .beat {
        width: min(100%, 23rem);
    }
    .motion .ch--mkt-contact .beat[data-beat="reach"] {
        justify-self: end;
    }
}

/* ---- the camera. Still, and where the browser has no scroll timelines, the boat waits under sail at the reef
   and the camera frames it there; with timelines it moves (below), and the camera goes with it */
.ch--mkt-contact {
    --u: 0.566;
    --zx: 55%;
    --zy: 72%;
}
.ch--mkt-contact[data-beat="reach"] {
    --zoom: 1.1;
}
.ch--mkt-contact[data-beat="office"] {
    --u: 0.65;
    --zoom: 1.06;
    --zx: 76%;
    --zy: 58%;
}
@media (min-width: 56.01em) {
    .ch--mkt-contact {
        --s: 0.6;
        --pan: 0.3;
        --u: 0.4;
        --zx: 45%;
        --zy: 76%;
    }
    .ch--mkt-contact[data-beat="reach"] {
        --u: 0.52;
        --zoom: 1.04;
    }
    .ch--mkt-contact[data-beat="office"] {
        --u: 0.66;
        --zoom: 1.05;
        --zx: 76%;
        --zy: 58%;
    }
}
@media (min-width: 56.01em) and (max-width: 72em) {
    .ch--mkt-contact {
        --pan: 0.6;
    }
    .ch--mkt-contact[data-beat="reach"] {
        --u: 0.42;
        --zoom: 1.05;
    }
}

/* ---- beats: the sail goes up with the ways to reach us, the pin drops onto the headland with the office */
.ch--mkt-contact .mct-boat {
    transform-box: view-box;
    transform-origin: 0 0;
    translate: 884px 628px;
    scale: 0.5;
}
/* the wake on the water reaches as far as the boat has come: still, that is just past the reef */
.ch--mkt-contact .mct-reveal {
    stroke-dasharray: 1 1;
    stroke-dashoffset: 0.322;
}
/* before the ways to reach us, the sail is rolled on its slanted yard: the two turns stand the yard upright about
   the tack, so the squash between them works across it; then it unrolls and fills */
.ch--mkt-contact .mct-sail {
    transform-box: view-box;
    transform-origin: 26px -20px;
    transform: rotate(-13.7deg) scaleX(1) rotate(13.7deg);
    transition: transform 1.6s cubic-bezier(0.34, 1.32, 0.5, 1);
}
.ch--mkt-contact .mct-wake {
    transition: opacity 1.2s var(--ease) 0.5s;
}
.motion.ch-ready .ch--mkt-contact:not([data-seen~="reach"]) .mct-sail {
    transform: rotate(-13.7deg) scaleX(0.09) rotate(13.7deg);
}
.motion.ch-ready .ch--mkt-contact:not([data-seen~="reach"]) .mct-wake {
    opacity: 0;
}
.ch--mkt-contact .mct-pin {
    transition: translate 0.9s cubic-bezier(0.3, 1.5, 0.55, 1), opacity 0.35s var(--ease);
}
.ch--mkt-contact .mct-pin__shadow {
    transform-box: fill-box;
    transform-origin: center;
    transition: scale 0.9s var(--ease), opacity 0.6s var(--ease);
}
.motion.ch-ready .ch--mkt-contact:not([data-seen~="office"]) .mct-pin {
    translate: 0 -60px;
    opacity: 0;
}
.motion.ch-ready .ch--mkt-contact:not([data-seen~="office"]) .mct-pin__shadow {
    scale: 0.3;
    opacity: 0;
}

/* ---- the life of the place, only with motion, resting while the section is off screen */
.motion .ch--mkt-contact .mct-bob {
    transform-box: view-box;
    transform-origin: 0 0;
    animation: mct-bob 4.2s ease-in-out infinite alternate;
}
@keyframes mct-bob {
    from { rotate: -1.6deg; translate: 0 -1.5px; }
    to { rotate: 1.2deg; translate: 0 2px; }
}
.motion .ch--mkt-contact .mct-moor {
    transform-box: view-box;
    transform-origin: 0 0;
    animation: mct-bob 5.2s ease-in-out -1.7s infinite alternate;
}
.motion .ch--mkt-contact .mct-moor--2 {
    animation-duration: 4.6s;
    animation-delay: -0.6s;
}
.motion .ch--mkt-contact .mct-luff {
    transform-box: view-box;
    transform-origin: 26px -20px;
    animation: mct-luff 2.6s ease-in-out infinite alternate;
}
@keyframes mct-luff {
    to { scale: 0.97 1; }
}
.motion .ch--mkt-contact .mct-wake path {
    animation: mct-foam 1.6s ease-in-out infinite alternate;
}
.motion .ch--mkt-contact .mct-wake path + path {
    animation-delay: -0.8s;
}
.motion .ch--mkt-contact .mct-glint--a {
    animation: mct-glint 2.4s ease-in-out infinite alternate;
}
.motion .ch--mkt-contact .mct-glint--b {
    animation: mct-glint 2.4s ease-in-out -1.2s infinite alternate;
}
@keyframes mct-glint {
    from { opacity: 1; }
    to { opacity: 0.22; }
}
.motion .ch--mkt-contact .mct-caus--a {
    animation: mct-caus 3.2s ease-in-out infinite alternate;
}
.motion .ch--mkt-contact .mct-caus--b {
    animation: mct-caus 3.2s ease-in-out -1.6s infinite alternate;
}
@keyframes mct-caus {
    from { opacity: 1; translate: 0 0; }
    to { opacity: 0.2; translate: 7px 1px; }
}
.motion .ch--mkt-contact .mct-swell {
    animation: mct-swell 9s ease-in-out infinite alternate;
}
@keyframes mct-swell {
    to { translate: -24px 0; }
}
.motion .ch--mkt-contact .mct-surf {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    animation: mct-surf 3.6s ease-in-out infinite;
}
.motion .ch--mkt-contact .mct-surf--2 {
    animation-delay: -1.2s;
}
.motion .ch--mkt-contact .mct-surf--3 {
    animation-delay: -2.4s;
}
@keyframes mct-surf {
    0%, 100% { scale: 1 0.78; opacity: 0.72; }
    40% { scale: 1 1.16; opacity: 1; }
}
.motion .ch--mkt-contact .mct-foot {
    animation: mct-foam 2.8s ease-in-out infinite alternate;
}
@keyframes mct-foam {
    from { opacity: 1; }
    to { opacity: 0.4; }
}
.motion .ch--mkt-contact .mct-lap {
    animation: mct-lap 3.4s ease-in-out infinite alternate;
}
@keyframes mct-lap {
    from { translate: 0 0; opacity: 0.95; }
    to { translate: -3px 3px; opacity: 0.45; }
}
.motion .ch--mkt-contact .mct-smoke {
    animation: mct-smoke 3.8s ease-in-out infinite;
}
@keyframes mct-smoke {
    0% { opacity: 0; translate: 0 3px; }
    40% { opacity: 1; }
    100% { opacity: 0; translate: 2px -6px; }
}
.motion .ch--mkt-contact .mct-rays {
    transform-box: view-box;
    transform-origin: 1080px 170px;
    animation: mct-rays 120s linear infinite;
}
@keyframes mct-rays {
    to { rotate: 30deg; }
}
.motion .ch--mkt-contact .mct-cloud {
    animation: mct-cloud 46s ease-in-out infinite alternate;
}
.motion .ch--mkt-contact .mct-cloud:nth-of-type(2n) {
    animation-duration: 58s;
    animation-delay: -20s;
}
@keyframes mct-cloud {
    to { translate: -52px 0; }
}
.motion .ch--mkt-contact .mct-birds {
    animation: mct-flock 26s ease-in-out infinite alternate;
}
@keyframes mct-flock {
    to { translate: -64px -16px; }
}
.motion .ch--mkt-contact .mct-bird {
    transform-box: fill-box;
    transform-origin: center;
    animation: mct-flap 0.9s ease-in-out infinite alternate;
}
.motion .ch--mkt-contact .mct-bird--2 {
    animation-duration: 1.1s;
    animation-delay: -0.4s;
}
.motion .ch--mkt-contact .mct-bird--3 {
    animation-duration: 0.8s;
    animation-delay: -0.7s;
}
@keyframes mct-flap {
    to { scale: 1 0.42; }
}
.motion .ch--mkt-contact .mct-ring {
    transform-box: fill-box;
    transform-origin: center;
    animation: mct-ping 2.6s ease-out infinite;
}
.motion .ch--mkt-contact .mct-ring--2 {
    animation-delay: -1.3s;
}
@keyframes mct-ping {
    from { opacity: 0.9; scale: 0.5; }
    to { opacity: 0; scale: 1.9; }
}

/* ---- the scroll moves: the boat sails out from the shallows to the open sea while the words are read, and the
   sun climbs a little; on a phone the camera follows the boat, the near sand passing a little faster */
@supports (animation-timeline: view()) {
    .motion .ch--mkt-contact :is(.mct-boat, .mct-sun) {
        animation: mct-course linear both;
        animation-timeline: --ch;
        animation-range: contain 0% contain 100%;
    }
    .motion .ch--mkt-contact .mct-sun {
        animation-name: mct-climb;
    }
    .motion .ch--mkt-contact .mct-reveal {
        animation: mct-trail linear both;
        animation-timeline: --ch;
        animation-range: contain 0% contain 100%;
    }
    /* the share of the wake's length at each point of the course */
    @keyframes mct-trail {
        0% { stroke-dashoffset: 1; }
        20% { stroke-dashoffset: 0.845; }
        45% { stroke-dashoffset: 0.473; }
        70% { stroke-dashoffset: 0.213; }
        100% { stroke-dashoffset: 0; }
    }
    @keyframes mct-course {
        0% { translate: 540px 768px; scale: 1.1; }
        20% { translate: 620px 740px; scale: 0.92; }
        45% { translate: 806px 656px; scale: 0.64; }
        70% { translate: 940px 608px; scale: 0.46; }
        100% { translate: 1050px 568px; scale: 0.34; }
    }
    @keyframes mct-climb {
        from { translate: 0 36px; }
    }
    @media (max-width: 56em) {
        .motion .ch--mkt-contact {
            --u: 0.4;
            --zx: 38%;
            --zy: 80%;
        }
        .motion .ch--mkt-contact[data-beat="reach"] {
            --u: 0.52;
            --zx: 50%;
            --zy: 74%;
        }
        .motion .ch--mkt-contact[data-beat="office"] {
            --u: 0.64;
            --zx: 74%;
            --zy: 60%;
        }
    }
    /* phones: the camera follows the boat. It holds still itself and the drawing pans under it on the timeline,
       keeping the boat a little left of centre, so each beat only has to lean in */
    @media (max-width: 40em) {
        .motion .ch--mkt-contact,
        .motion .ch--mkt-contact[data-beat] {
            --u: 0.358;
        }
        .motion .ch--mkt-contact {
            --zx: 33.8%;
            --zy: 85%;
        }
        .motion .ch--mkt-contact[data-beat="reach"] {
            --zx: 32.5%;
            --zy: 73%;
        }
        .motion .ch--mkt-contact[data-beat="office"] {
            --zx: 41.2%;
            --zy: 56%;
        }
        .motion .ch--mkt-contact :is(.ly--sky, .ly--sea, .ly--boat, .ly--near) {
            animation: mct-pan linear both;
            animation-timeline: --ch;
            animation-range: contain 0% contain 100%;
        }
        .motion .ch--mkt-contact .ly--near {
            animation-name: mct-pan-near;
        }
        @keyframes mct-pan {
            0% { translate: 0 0; }
            20% { translate: -5.52% 0; }
            45% { translate: -17.93% 0; }
            70% { translate: -27.08% 0; }
            100% { translate: -34.73% 0; }
        }
        @keyframes mct-pan-near {
            0% { translate: 0 0; }
            20% { translate: -6.9% 0; }
            45% { translate: -22.41% 0; }
            70% { translate: -33.85% 0; }
            100% { translate: -43.41% 0; }
        }
    }
}
/* "Call instead" under the number, which opens WhatsApp */
.ch--mkt-contact .mct-way__call {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--fg-soft);
    font-weight: 600;
    text-decoration-color: var(--gold);
    text-underline-offset: 3px;
}

/* ==========================================================================
   chapter mkt/switch
   ========================================================================== */
/* the end gate: the cross-sell line for Jacra Technology's clients */
[data-team="mkt"] #switch .switch__note a {
    color: inherit;
    font-weight: 600;
    text-decoration-color: var(--gold);
    text-underline-offset: 3px;
}