/* ═══════════════════════════════════════════════════════════════════════════
   Fun-Tastic 悠樂長 · home.css
   Page-only styles for Home. Not in a cascade layer, so these win over the
   design system; everything is scoped to this page's own blocks.
   Colours and metrics come from the tokens; logical properties throughout.
   The living logo is the one place with physical positions: the logo is never
   mirrored, so its inner geometry does not follow the writing direction.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────── 1. Hero and the living logo ──
   One grid, three arrangements.
     under 56rem   one column: the logo first and generous (about 70% of the screen's width, never
                   sized by the screen's height: preview panes can be short), then headline, lead,
                   the greeting, the actions, the charity line.
     from 56rem    two columns: text and logo side by side, the logo as large as the column and the
                   first viewport allow.
     from 75rem    the greeting leaves the text column for the logo's one empty corner, top right,
                   clear of the bridge. Logo and greeting are centred together as one unit.
   The logo's sizes are worked out here, on the stage, so the logo and the greeting can both use them.
   cqw is the stage's own width: the stage is a size container for its children.
   The greeting is placed with the translate property on .hero__hello-slot, a wrapper no script
   touches: GSAP folds translate into its own transform and cannot read one made of percentages. */

.scene { position: relative; }
.hero { position: relative; background: var(--white); }

.hero__stage {
  --hero-gap: clamp(1rem, 3vw, 3.5rem);
  --logo-ratio: calc(var(--crop-w) / var(--crop-h));
  --logo-w: min(70vw, 100cqw, 24rem);
  position: relative;
  container-type: inline-size;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: start;
  row-gap: clamp(1rem, 4vw, 1.5rem);
  padding-block: clamp(.5rem, 2vw, 1rem) clamp(2rem, 6vw, 3.5rem);
}
.hero__figure { order: -3; justify-self: center; }
/* On one column the headline is as large as the scale says, but never so large that its longest
   word group needs a hyphen (about 7.8 em in the Latin display face), also at the largest text setting. */
.hero__title { order: -2; justify-self: stretch; font-size: min(var(--fs-hero), calc(100cqw / var(--hero-fit, 7.8) * var(--display-scale))); }
.hero__lead { order: -1; max-inline-size: 31em; }
.hero__hello-slot { order: 0; display: grid; }
.hero__actions { order: 1; justify-self: stretch; --gap: .75rem; }
.hero__actions > .btn { flex: 1 1 auto; }
.hero__charity {
  order: 2;
  display: flex;
  align-items: center;
  gap: .75rem;
  max-inline-size: none;
  color: var(--slate);
  font-size: var(--fs-small);
  line-height: var(--lh-ui);
}

/* Chinese and Korean break between any two characters: the column, not a word, sets the limit. */
.hero__title:lang(zh), .hero__title:lang(ko) { --hero-fit: 6.3; }

/* The logo: never mirrored, so everything inside it is physical. .hero-logo is the mark cropped
   close; .hero-logo__mark is the full artboard behind it (home.html works out the crop). */
.hero-logo { position: relative; direction: ltr; inline-size: var(--logo-w); aspect-ratio: var(--crop-w) / var(--crop-h); overflow: clip; }
.hero-logo__mark {
  position: absolute;
  inset-inline-start: calc(var(--crop-x) / var(--crop-w) * -100%);
  inset-block-start: calc(var(--crop-y) / var(--crop-h) * -100%);
  inline-size: calc(654 / var(--crop-w) * 100%);
  aspect-ratio: 1;
}
.hero-logo__shapes, .hero-logo__arc { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; overflow: visible; }
.hero-logo__elder { fill: var(--orchid); }
.hero-logo__youth { fill: var(--mint); }
.hero-logo__arc path { fill: none; stroke: var(--indigo); stroke-width: clamp(4px, .9cqw, 7px); stroke-linecap: round; vector-effect: non-scaling-stroke; }
.hero-logo__clip { position: absolute; inset: 0; clip-path: url(#hero-youth-clip); }
.hero-logo__window { position: absolute; aspect-ratio: 1; border-radius: 50%; overflow: hidden; }
.hero-logo__photos { position: absolute; inset: 0; }
.hero-logo__photos > picture { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s ease; }
.hero-logo__photos > picture.is-current { opacity: 1; }
.hero-logo__photos img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: var(--focal-x, 50%) var(--focal-y, 50%);
  background: var(--ph, transparent);
}

/* Hello, in fifteen languages: a quiet capsule. The words lie on top of each other in one grid
   cell, so the capsule is as wide as the longest greeting and never jumps. */
.hero__hello {
  display: inline-grid;
  grid-auto-flow: column;
  align-items: center;
  gap: .6rem;
  min-block-size: 3rem;
  padding: .125rem;
  padding-inline-start: .9rem;
  border-radius: var(--r-full);
  background: var(--indigo-mist);
  color: var(--indigo);
}
.hero__hello-dots { position: relative; flex: none; inline-size: 1.75rem; block-size: 1.1rem; }
.hero__hello-dots::before, .hero__hello-dots::after { content: ""; position: absolute; inset-block: 0; inline-size: 1.1rem; border-radius: 50%; }
.hero__hello-dots::before { inset-inline-start: 0; background: var(--orchid); }
.hero__hello-dots::after { inset-inline-end: 0; background: var(--mint); mix-blend-mode: multiply; }
.hero__hello-words { display: grid; align-items: center; min-inline-size: 5rem; }
.hero__hello-word {
  grid-area: 1 / 1;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: var(--lh-ui);
  white-space: nowrap;
  text-align: center;
  opacity: 0;
  transform: translateY(.45em);
  transition: opacity .45s ease, transform .6s var(--ease-out);
}
.hero__hello-word.is-current { opacity: 1; transform: none; }
.hero__hello-word.is-leaving { opacity: 0; transform: translateY(-.45em); }
.hero__pause { inline-size: 2.75rem; block-size: 2.75rem; background: var(--white); }
.hero__pause > .icon { inline-size: 1.25rem; block-size: 1.25rem; }
html:not(.js) .hero__pause { display: none; }
html:not(.js) .hero__hello { padding-inline-end: .9rem; }

/* Before the entrance has run (scripts on, motion allowed, no failsafe): the logo is the flat mark. */
@media (prefers-reduced-motion: no-preference) {
  html.js:not(.ft-failsafe) .hero:not(.is-live) .hero-logo__photos { clip-path: circle(0% at 50% 50%); }
  html.js:not(.ft-failsafe) .hero:not(.is-live) .hero-logo__arc,
  html.js:not(.ft-failsafe) .hero:not(.is-live) .hero__hello { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__pause { display: none; }
  .hero__hello { padding-inline-end: .9rem; }
  .hero__hello-word { transition: none; }
}

@media (min-width: 56rem) {
  .hero__stage {
    --fig-col: calc((100cqw - var(--hero-gap)) / 1.85);
    --text-col: calc((100cqw - var(--hero-gap)) * .85 / 1.85);
    --hero-row: calc(clamp(.75rem, 2.1vh, 1.5rem) * var(--squeeze, 1));
    --hello-h: 3.25rem;
    --hello-gap: .9rem;
    --hero-h: calc(100svh - var(--header-h) - var(--dock-h, 0px));   /* the first screen, less the header and (while it is there) the language suggestion bar */
    --logo-h-max: calc(var(--hero-h) - 2.75rem - var(--hello-h) - var(--hello-gap));
    --logo-w: max(18rem, min(var(--fig-col), var(--logo-h-max) * var(--logo-ratio), 44rem));
    grid-template-columns: minmax(0, .85fr) minmax(0, 1fr);
    grid-template-rows: 1fr repeat(4, auto) 1fr;
    column-gap: var(--hero-gap);
    row-gap: 0;                                 /* the spaces are margins here: the two empty rows must add nothing */
    min-block-size: var(--hero-h);
    padding-block: clamp(.5rem, 1.2vh, 1rem) clamp(1rem, 3vh, 1.75rem);
  }
  /* The first viewport holds the whole hero, so headline and lead listen to the height as well as
     the width. The headline also listens to its own column: its longest word group has to fit on
     one line without a hyphen (about 7.8 em in the Latin display face). Where a language's words
     still run too long for the screen, home.js sets --squeeze (1 down to .8) to tighten the type. */
  .hero__title {
    grid-area: 2 / 1;
    font-size: calc(min(var(--fs-hero), max(2.2rem, calc(8.4vh * var(--display-scale))), calc(var(--text-col) / var(--hero-fit, 7.8) * var(--display-scale))) * var(--squeeze, 1));
  }

  .hero__lead { grid-area: 3 / 1; margin-block-start: var(--hero-row); font-size: max(1.0625rem, calc(min(var(--fs-lead), max(1.0625rem, calc(2.5vh * var(--text-scale)))) * var(--squeeze, 1))); }
  .hero__actions { grid-area: 4 / 1; justify-self: start; margin-block-start: var(--hero-row); }
  .hero__actions > .btn { flex: none; min-block-size: 3.5rem; padding-inline: 1.6rem; font-size: 1.0625rem; }   /* both actions on one line where the words allow */
  .hero__charity { grid-area: 5 / 1; margin-block-start: var(--hero-row); }
  /* Logo and greeting share the second column, the greeting under the logo. Margins, not transforms,
     move the logo: home.js reads where the elder's head is from layout. */
  .hero__figure { grid-area: 1 / 2 / -1 / 3; place-self: center; margin-block-end: calc(var(--hello-h) + var(--hello-gap)); }
  .hero__hello-slot {
    grid-area: 1 / 2 / -1 / 3;
    place-self: center;
    z-index: 1;
    translate: 0 calc((var(--logo-w) / var(--logo-ratio) + var(--hello-gap)) / 2);
  }
}
@media (min-width: 56rem) and (max-width: 74.99rem) {
  .hero__actions > .btn { min-block-size: 3.25rem; padding-inline: 1.4rem; }
}
@media (min-width: 75rem) and (min-height: 42rem) {
  .hero__stage {
    --hello-w: 12.5rem;                       /* the capsule's width, rounded up */
    --hello-k: .71;                           /* how far along the logo the bridge has come down enough to clear the capsule */
    --over: clamp(0px, (100vw - 100cqw) / 2 - 1.5rem, 4rem);   /* the capsule may lean out into the page margin */
    --logo-h-max: calc(var(--hero-h) - 2.75rem);
    --logo-w: max(18rem, min(var(--fig-col), (var(--fig-col) + var(--over) - var(--hello-w)) / var(--hello-k), var(--logo-h-max) * var(--logo-ratio), 44rem));
    --unit-w: max(var(--logo-w), var(--logo-w) * var(--hello-k) + var(--hello-w));
  }
  [dir="rtl"] .hero__stage { --over: 0px; }   /* there the logo's right side faces the text */
  .hero__figure { margin-block-end: 0; margin-right: calc(var(--unit-w) - var(--logo-w)); }   /* lint-ok: the unit is logo plus greeting, and the greeting is on the logo's physical right */
  /* from the centre of the cell to the unit's top right corner */
  .hero__hello-slot { translate: calc(var(--unit-w) / 2 - 50%) calc(var(--logo-w) / var(--logo-ratio) / -2 + 50%); }
  .hero__hello-dots { display: none; }
}

/* ───────────────────────────────────────────────────────────── 2. The window ──
   Default (phones, reduced motion, no scripts): an indigo band after the hero, the photograph
   in a large circle that opens as it arrives.
   .scene.is-pinned (home.js, two-column screens with motion, when the hero fits the viewport): the
   band becomes a layer over the pinned hero. Indigo spreads from the elder's head and that head
   grows into the circle. .will-pin is the same layout, promised by an inline script before the
   first paint. */

.window {
  position: relative;
  padding-block: clamp(3rem, 9vw, 6rem) clamp(4rem, 11vw, 7rem);
  background: var(--indigo);
  color: var(--white);
}
.window__ground { display: none; }
.window__figure { display: grid; justify-items: center; gap: 1.75rem; }
.window__eye { inline-size: min(86vw, var(--eye-max, 30rem), 36rem); }   /* --eye-max: how large this photograph stays sharp (home.html asks the manifest) */
.window__caption {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem;
  max-inline-size: 21em;
  color: var(--white);
  font-size: var(--fs-lead);
  font-weight: var(--fw-medium);
  line-height: calc(var(--lh-text) - .12);
}
.window__dots { position: relative; inline-size: 1.9rem; block-size: 1.2rem; margin-block-start: calc((1lh - 1.2rem) / 2); }
.window__dots::before, .window__dots::after { content: ""; position: absolute; inset-block: 0; inline-size: 1.2rem; border-radius: 50%; }
.window__dots::before { inset-inline-start: 0; background: var(--orchid); }
.window__dots::after { inset-inline-end: 0; background: var(--mint); }

.scene:is(.will-pin, .is-pinned) .window {
  position: absolute;
  inset-inline: 0;
  inset-block-start: calc(var(--header-h) * -1);
  z-index: 2;
  block-size: 100vh;
  padding: 0;
  background: none;
  overflow: hidden;
  pointer-events: none;
}
.scene.will-pin:not(.is-pinned) .window { visibility: hidden; }   /* promised by the inline script, not yet taken over by home.js */
.scene:is(.will-pin, .is-pinned) .window__seam { display: none; }
.scene:is(.will-pin, .is-pinned) .window__ground {
  position: absolute;
  inset: 0;
  display: block;
  visibility: hidden;                       /* home.js shows it, already behind the photograph */
  background: var(--indigo);
  will-change: clip-path;
}
.scene:is(.will-pin, .is-pinned) .window__figure {
  position: absolute;
  inset: 0;
  inline-size: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1.5rem, 4vw, 4.5rem);
  /* the next section's seam rises into the bottom of this layer (and the language suggestion bar, while it is there, sits there too): compose above them */
  padding: 1.5rem var(--gutter) calc(var(--seam-h) + var(--dock-h, 0px) + 1.5rem);
}
.scene:is(.will-pin, .is-pinned) .window__eye { flex: none; inline-size: min(100vh - var(--seam-h) - var(--dock-h, 0px) - 4.5rem, 54vw, var(--eye-max, 40rem)); will-change: transform; }
.scene:is(.will-pin, .is-pinned) .window__caption { flex: 0 1 17em; min-inline-size: 0; }

/* ───────────────────────────────────────────────────────────────── 3. Belief ── */

.belief__grid { display: grid; gap: clamp(2rem, 5vw, 3.5rem) clamp(2rem, 6vw, 5.5rem); }
.belief__head { display: grid; gap: 1.5rem; justify-items: start; align-content: start; }
.belief__bridge { inline-size: clamp(7rem, 12vw, 10rem); }
.belief__statement {
  max-inline-size: none;
  color: var(--heading);
  font-family: var(--font-display);
  font-size: calc(clamp(1.6rem, 1.05rem + 2.45vw, 3.25rem) * var(--display-scale));
  font-weight: var(--fw-sub);
  line-height: calc(var(--lh-display) + .16);
  letter-spacing: var(--tracking-sub);
}
.belief__body { margin-block-start: clamp(1.25rem, 2.5vw, 2rem); color: var(--slate); max-inline-size: 30em; }
.belief__name { display: grid; gap: 1.25rem; justify-items: start; }
.belief__glyphs { display: flex; max-inline-size: none; padding-inline-start: .5rem; }
.belief__glyphs > span {
  display: grid;
  place-items: center;
  inline-size: clamp(4.75rem, 3.4rem + 5vw, 6.75rem);
  aspect-ratio: 1;
  margin-inline-start: -.5rem;
  border-radius: 50%;
  box-shadow: 0 0 0 5px var(--white);
  background: var(--orchid);
  color: var(--white);
  font-family: var(--font-display);
  font-size: clamp(2.3rem, 1.6rem + 2.6vw, 3.4rem);
  font-weight: 700;
  line-height: 1;
}
.belief__glyphs > span:nth-child(2) { background: var(--mint); color: var(--indigo); }
.belief__glyphs > span:nth-child(3) { background: var(--indigo); }
.belief__meaning { max-inline-size: 17em; color: var(--ink); font-weight: var(--fw-medium); }
@media (min-width: 60rem) {
  .belief__grid {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    grid-template-areas: "head words" "name words";
    grid-template-rows: auto 1fr;
    align-items: start;
  }
  .belief__head { grid-area: head; }
  .belief__words { grid-area: words; }
  .belief__name { grid-area: name; align-self: end; }
}

/* ──────────────────────────────────────────────────────── 4. Two generations ──
   One grid, used twice: three rows on phones, three columns from 60rem. The orchid layer spans
   the first two tracks, the mint layer the last two, so the middle track is where they overlap.
   mix-blend-mode: multiply on the mint layer makes that overlap exactly indigo (#122F6C). Each
   layer ends in half an ellipse, so the overlap is a lens. Text is on its own unblended layers. */

/* The two layers start a little apart and are brought together by the scroll: never a sideways scrollbar. */
.generations { overflow-x: clip; }
.gen {
  --lens: 19rem;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(var(--lens), auto) auto;
  isolation: isolate;
}
.gen__colour { grid-column: 1; z-index: 0; border-radius: var(--r-panel); will-change: transform; }
.gen__colour--orchid {
  grid-row: 1 / 3;
  background: var(--orchid);
  border-end-start-radius: 50% var(--lens);
  border-end-end-radius: 50% var(--lens);
}
.gen__colour--mint {
  grid-row: 2 / 4;
  background: var(--mint);
  mix-blend-mode: multiply;
  border-start-start-radius: 50% var(--lens);
  border-start-end-radius: 50% var(--lens);
}
.gen__side, .gen__together { position: relative; z-index: 1; grid-column: 1; background: none; }
.gen__side { display: grid; gap: 1.1rem; justify-items: start; align-content: start; padding: clamp(1.5rem, 5vw, 2.25rem); }
.gen__side > .dot-rows { justify-self: stretch; }
.gen__side--seniors { grid-row: 1; padding-block-end: 1.25rem; }
.gen__side--youth { grid-row: 3; padding-block-start: 1.25rem; }
.gen__together {
  grid-row: 2;
  display: grid;
  gap: .6rem;
  align-content: center;
  justify-items: center;
  justify-self: center;
  inline-size: min(64%, 16rem);
  padding-block: 1.5rem;
  text-align: center;
}
.gen__together > h3 { font-size: var(--fs-sub); }
.gen__together > p { font-size: var(--fs-small); line-height: calc(var(--lh-text) - .12); }
@media (min-width: 60rem) {
  .gen {
    --lens: clamp(17rem, 25vw, 21.5rem);
    grid-template-columns: minmax(0, 1fr) var(--lens) minmax(0, 1fr);
    grid-template-rows: auto;
    align-items: center;
    min-block-size: 35rem;
  }
  .gen__colour { grid-row: 1; align-self: stretch; border-radius: var(--r-panel); }
  .gen__colour--orchid { grid-column: 1 / 3; border-start-end-radius: var(--lens) 50%; border-end-end-radius: var(--lens) 50%; }
  .gen__colour--mint { grid-column: 2 / 4; border-start-start-radius: var(--lens) 50%; border-end-start-radius: var(--lens) 50%; }
  .gen__side, .gen__together { grid-row: 1; }
  .gen__side { padding: clamp(2rem, 3.4vw, 3.25rem); }
  .gen__side--seniors { grid-column: 1; padding-inline-end: 1rem; padding-block-end: clamp(2rem, 3.4vw, 3.25rem); }
  .gen__together { grid-column: 2; inline-size: 66%; padding-block: 2rem; }
  .gen__side--youth { grid-column: 3; padding-inline-start: 1rem; padding-block-start: clamp(2rem, 3.4vw, 3.25rem); }
}

/* ─────────────────────────────────────────────────────────── 5. What we do ── */

.work__head { display: grid; gap: 1.25rem clamp(2rem, 6vw, 5rem); }
.work__intro { display: grid; gap: 1rem; }
.work__intro > p:last-child { color: var(--slate); }
.work__cols { display: grid; margin-block-end: .9rem; }
.work__col-title { max-inline-size: none; color: var(--slate); font-size: var(--fs-small); font-weight: var(--fw-strong); line-height: var(--lh-ui); }
.work__groups { display: grid; gap: clamp(1.5rem, 3vw, 2rem); }
.work__group { position: relative; display: grid; gap: 1rem; }
.work__area { display: flex; align-items: center; gap: 1.1rem; }
.work__area-text { display: grid; gap: .25rem; }
.work__area-name { font-size: var(--fs-sub); }
.work__area-text > p { color: var(--slate); }
.work__arcs { display: none; }
.work__services {
  display: grid;
  gap: .7rem;
  margin-inline-start: 2.2rem;
  padding-inline-start: 1.1rem;
  border-inline-start: 3px solid var(--line);
}
.work__svc {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
  min-block-size: 5rem;
  padding: .8rem 1.4rem .8rem .8rem;
  border-radius: 2.75rem;
  background: var(--white);
  color: var(--ink);
  text-decoration: none;
  transition: scale var(--dur-1) var(--ease-out);
}
.work__svc:active { scale: .985; }
.work__svc > .icon-circle { transition: background-color var(--dur-2) ease, color var(--dur-2) ease; }
.work__svc-text { display: grid; gap: .15rem; }
.work__svc-text > strong { color: var(--indigo); font-weight: var(--fw-strong); line-height: var(--lh-sub); }
.work__svc-text > span { color: var(--slate); font-size: var(--fs-small); line-height: calc(var(--lh-text) - .15); }
.work__svc:is(:hover, :focus-visible, .is-on) > .icon-circle { background: var(--indigo); color: var(--white); }
.work__svc-text > * { overflow-wrap: anywhere; }
.work__action { margin-block-start: clamp(2rem, 4vw, 3rem); }
/* The narrowest phones, also with the largest text: give the words the room. */
@media (max-width: 24rem) {
  .work__services { margin-inline-start: 0; padding-inline-start: .8rem; }
  .work__svc { gap: .7rem; padding: .7rem .9rem .7rem .7rem; }
  .work__svc > .icon-circle { --size: 2.75rem; }
  .work__area { gap: .8rem; }
}
@media (min-width: 60rem) {
  .work__head { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: end; }
  .work__cols, .work__group { grid-template-columns: minmax(0, 5fr) minmax(4rem, 2fr) minmax(0, 6fr); column-gap: 0; }
  .work__col-title:last-child { grid-column: 3; }
  .work__group { align-items: center; }
  .work__area { grid-column: 1; }
  .work__services { grid-column: 3; margin: 0; padding: 0; border: 0; }
  .work__arcs { position: absolute; inset: 0; display: block; inline-size: 100%; block-size: 100%; overflow: visible; pointer-events: none; }
  .work__arcs path { fill: none; stroke: var(--indigo); stroke-width: 3; stroke-linecap: round; opacity: .3; transition: opacity var(--dur-2) ease, stroke var(--dur-2) ease, stroke-width var(--dur-2) ease; }
  .work__arcs path.is-on { stroke: var(--orchid); stroke-width: 4.5; opacity: 1; }
  .work__arcs circle { transition: r var(--dur-2) ease; }
  .work__arcs .work__dot--from { fill: var(--orchid); }
  .work__arcs .work__dot--to { fill: var(--mint); }
}

/* ────────────────────────────────────────────────────────── 6. EyeCare 365 ── */

.eye__top { display: grid; align-items: center; gap: 2.5rem clamp(2rem, 6vw, 5rem); }
.eye__intro { display: grid; gap: 1.25rem; justify-items: start; }
.eye__photo { inline-size: min(100%, 28rem); justify-self: center; }
.eye__block { margin-block-start: clamp(3rem, 7vw, 5.5rem); }
.eye__subtitle { margin-block-end: clamp(1.25rem, 2.5vw, 2rem); font-size: var(--fs-sub); font-weight: var(--fw-sub); line-height: var(--lh-sub); }
.eye__stations { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(min(9rem, 46%), 1fr)); }
.eye__station { display: grid; gap: .15rem; padding: .9rem 1.1rem; border-radius: var(--r-row); background: var(--row); }
.eye__station > span { color: var(--fg-muted); font-size: var(--fs-small); }
.eye__station--macau { background: var(--mint); color: var(--indigo); }
.eye__station--macau > span { color: var(--indigo); }
.eye__note { margin-block-start: clamp(2.5rem, 6vw, 4.5rem); max-inline-size: 48rem; }
@media (min-width: 56rem) {
  .eye__top { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .eye__photo { justify-self: end; }
}

/* ─────────────────────────────────────────────── 6b. Thanked by the Lions Clubs ──
   The team photograph, large, leaning on the page edge; the stage in a circle tucked under it; an orchid seal
   on the photograph's top corner with "70" in its centre and the ring of words turning slowly round it.
   The ring runs left to right in every language: an RTL text on a path would start off the end of the path. */

.honour__grid { display: grid; align-items: center; gap: clamp(2.5rem, 6vw, 5rem); }
.honour__media { position: relative; margin: 0; padding-block-end: clamp(3rem, 9vw, 5.5rem); padding-inline-end: clamp(2rem, 8vw, 5rem); }
.honour__photo { --ar: 4 / 3; }
.honour__thumb {
  position: absolute;
  inset-block-end: 0;
  inset-inline-end: 0;
  inline-size: clamp(7.5rem, 30%, 13rem);
  border: .4rem solid var(--bg);
  box-sizing: content-box;
}
.honour__seal {
  position: absolute;
  inset-block-start: clamp(-2.5rem, -4vw, -1.25rem);
  inset-inline-end: clamp(-.5rem, 1vw, 1.5rem);
  display: grid;
  place-items: center;
  inline-size: clamp(9.5rem, 6.5rem + 9vw, 13rem);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;                    /* the turning ring's square box would reach past a phone's edge */
  background: var(--orchid);
  color: var(--white);
  box-shadow: 0 0 0 .4rem var(--bg), 0 1.25rem 2.5rem -1rem rgb(18 47 108 / .45);
}
.honour__seal > * { grid-area: 1 / 1; }
.honour__ring { inline-size: 100%; block-size: 100%; }
.honour__ring text { direction: ltr; fill: currentColor; font-family: var(--font-text); font-weight: var(--fw-strong); letter-spacing: var(--tracking-ui); dominant-baseline: middle; }
.honour__num {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: clamp(2.4rem, 1.6rem + 3vw, 3.75rem);
  line-height: 1;
  letter-spacing: var(--tracking-display);
  font-variant-numeric: lining-nums;
}
.honour__words { display: grid; justify-items: start; gap: 1rem; }
.honour__words h2 { font-size: var(--fs-section); }
.honour__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  color: var(--orchid-deep);
  font-weight: var(--fw-strong);
  letter-spacing: var(--tracking-ui);
  font-size: var(--fs-small);
}
.honour__eyebrow::before { content: ""; inline-size: .7rem; block-size: .7rem; border-radius: 50%; background: var(--orchid); box-shadow: 0 0 0 .3rem var(--orchid-mist), 0 0 0 .45rem var(--orchid); }
.honour__date {
  padding: .3rem 1rem;
  border-radius: 1.2rem;
  background: var(--white);
  color: var(--heading);
  font-weight: var(--fw-strong);
  font-size: var(--fs-small);
  font-variant-numeric: tabular-nums lining-nums;
}
.honour__words .lead { max-inline-size: 32em; }
@media (min-width: 56rem) {
  .honour__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
}
@media (prefers-reduced-motion: no-preference) {
  .honour__ring { animation: ft-honour-turn 48s linear infinite; }
  [dir="rtl"] .honour__ring { animation-direction: reverse; }
}
@keyframes ft-honour-turn { to { rotate: 360deg; } }

/* ───────────────────────────────────────────────────── 7. Our story so far ──
   .story__stage is the carousel and, where the track is pinned, the thing that holds still: heading,
   controls and cards together, so it has to fit one viewport. The cards therefore listen to the height. */

.story__stage { --item: min(80vw, 21.5rem); display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 2.25rem); }
.story__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.25rem 3rem; }
.story__intro > * + * { margin-block-start: var(--space-s); }
.story__tools { flex: 1 1 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; }
.story__nav { margin-block-start: 0; }
.story__item { display: grid; grid-template-rows: auto auto auto 1fr; gap: .5rem; padding: 1.25rem 1.25rem 3.1rem; }
.story__item > * + * { margin-block-start: 0; }
.story__item > .ghost-num { inset-block: auto -.14em; font-size: clamp(5rem, 3.6rem + 4.6vw, 7.25rem); }
.story__media { block-size: clamp(10.5rem, 27vh, 14rem); margin-block-end: .8rem; }
.story__media > .frame, .story__plate { inline-size: 100%; block-size: 100%; aspect-ratio: auto; }
.story__plate { display: grid; place-items: center; border-radius: var(--r-full); border-end-start-radius: 0; }
.story__plate--end { border-end-start-radius: var(--r-full); border-end-end-radius: 0; }
.story__plate--orchid { background: var(--orchid); }
.story__plate--mint { background: var(--mint); }
.story__plate--mist { border-radius: var(--r-full); background: var(--white); }
.story__thumb { block-size: min(100% - 1.5rem, 11rem); aspect-ratio: 1; }
.story__date { position: relative; color: var(--orchid-deep); font-size: var(--fs-small); font-weight: var(--fw-strong); line-height: var(--lh-ui); }
.story__title { position: relative; font-size: var(--fs-lead); }
.story__body { position: relative; color: var(--slate); font-size: 1.0625rem; line-height: calc(var(--lh-text) - .1); }

/* The newest moment closes the track: indigo, wider, the counted number first. */
.story__item--latest { --item-latest: min(86vw, 25rem); inline-size: var(--item-latest); grid-template-rows: auto 1fr; align-content: start; gap: 1.5rem; padding: clamp(1.5rem, 3vw, 2.25rem); }
.story__item--latest > .ghost-num { color: var(--white-a08); }
.story__stat { position: relative; }
.story__stat > .stat__num { color: var(--mint); font-size: clamp(4.5rem, 3.2rem + 5vw, 7rem); }
.story__stat > .stat__label { color: var(--white); font-size: var(--fs-lead); font-weight: var(--fw-medium); }
.story__words { position: relative; display: grid; gap: .5rem; align-content: start; }
.story__item--latest .story__date { color: var(--mint); }
.story__item--latest .story__title { color: var(--white); font-size: var(--fs-sub); }
.story__item--latest .story__body { color: var(--white); }
/* With a photograph (as soon as one exists for it): picture beside the number on wide screens, above it on phones. */
.story__item--pictured > .story__media { margin: 0; }
@media (min-width: 56rem) {
  .story__item--pictured.story__item--latest {
    --item-latest: min(58rem, 84vw);
    grid-template-columns: minmax(0, 19rem) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    align-items: start;
    gap: 1.1rem clamp(1.75rem, 3vw, 2.75rem);
  }
  .story__item--pictured > .story__media { grid-row: 1 / -1; align-self: stretch; block-size: auto; min-block-size: 16rem; }
  .story__item--pictured > .story__stat, .story__item--pictured > .story__words { grid-column: 2; }
  .story__item--pictured .story__stat > .stat__num { font-size: clamp(4rem, 2.8rem + 4vw, 5.75rem); }
}
@media (min-width: 56rem) {
  .story__tools { flex: 0 1 auto; }
  .story__item--latest { --item-latest: min(52rem, 80vw); grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto; align-items: center; gap: clamp(2rem, 4vw, 3.5rem); padding-inline: clamp(2rem, 4vw, 3.5rem); }
}

/* ──────────────────────────────────────────────────── 8. Who we work with ── */

.partners__grid { display: grid; gap: clamp(1.75rem, 4vw, 3rem) clamp(2rem, 6vw, 5rem); }
.partners__head { display: grid; gap: var(--space-s); align-content: start; }
.partners__names { gap: .7rem; }
.partners__names > li {
  align-items: start;
  padding: clamp(1rem, 2.2vw, 1.4rem) clamp(1.15rem, 2.4vw, 1.75rem);
  color: var(--indigo);
  font-family: var(--font-display);
  font-size: var(--fs-sub);
  font-weight: var(--fw-sub);
  line-height: var(--lh-sub);
  letter-spacing: var(--tracking-sub);
}
.partners__names > li::before { inline-size: .9rem; block-size: .9rem; margin-block-start: calc((1lh - .9rem) / 2); }
.partners__names > li:nth-child(3n)::before { background: var(--mint); }
.partners__thanks { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 1rem 1.25rem; }
.partners__thanks > * + * { margin-block-start: 0; }
.partners__thanks-text { display: grid; gap: .4rem; }
.partners__thanks-text > h3 { font-size: var(--fs-lead); }
.partners__thanks-text > p { color: var(--slate); }
@media (min-width: 60rem) {
  .partners__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "head names" "thanks names"; grid-template-rows: auto 1fr; align-items: start; }
  .partners__head { grid-area: head; }
  .partners__names { grid-area: names; }
  .partners__thanks { grid-area: thanks; align-self: end; }
}

/* ───────────────────────────────────────────── 10. Talk to the right person ── */

.talk__rows { display: grid; gap: .75rem; }
.talk__row { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 1rem 1.25rem; }
.talk__row > * + * { margin-block-start: 0; }
.talk__row > .btn { grid-column: 1 / -1; }
.talk__who { display: grid; gap: .2rem; }
.talk__topic { font-size: var(--fs-sub); }
.talk__person { color: var(--slate); font-weight: var(--fw-medium); }
.talk__action { margin-block-start: clamp(1.5rem, 3vw, 2.25rem); }
/* The narrowest phones, also with the largest text: the words get the room, so no word is cut. */
@media (max-width: 24rem) {
  .talk__row { gap: .75rem .9rem; }
  .talk__row > .icon-circle { --size: 3.25rem; }
  .talk__topic { font-size: var(--fs-lead); }
}
@media (min-width: 48rem) {
  .talk__row { grid-template-columns: auto minmax(0, 1fr) auto; padding-inline: 1.5rem 1.75rem; }
  .talk__row > .btn { grid-column: auto; }
}