/* css/about-desktop.css
   Scope: about.html, DESKTOP ONLY (>= 992px).

   Companion to css/about-mobile.css. Below 992px nothing in this file applies
   and the mobile scroll (`.vca-m`) owns the page untouched; from 992px up the
   seven stages (`.vca-d`) own it and the retired desktop composition
   (`.vca-legacy`) is hidden — about-mobile.css already hides it below 992px, so
   together the two files retire it at every width.

   The page is an editorial column, not a deck: ordinary native scrolling with
   no snapping of any kind, stages sized by their own content and separated by a
   hairline.

   Three compositions alternate down the page so no two neighbours read as the
   same formula, while the order of the stages and of the copy inside them is
   untouched:

     A  copy left, photograph right          stages 01, 03, 06
     B  photograph left, copy right          stage  05       (.vca-d__row--alt)
     C  one wide visual, copy centred under  stages 04, 07   (.vca-d__row--stack)
     S  one wide scene, copy inside it       stage  02       (.vca-d__scene)

   Every photograph sits in a block of one shape (`--vcad-ratio-side`), one
   radius (`--vcad-radius`) and one warm coral wash, so the page reads as a
   single set of images rather than seven separately fitted ones. The blocks are
   4:3 against 16:9 artwork, which means the crop is always horizontal: the
   empty left third of each frame is clipped away and nothing is ever cut
   through a face. Stage 04 carries the world map as its own <img> element and
   stage 07 the four closing portraits as a real 4-up grid.
*/

/* The stages never exist on mobile. */
.vca-d {
  display: none;
}

@media (min-width: 992px) {

  /* ---------------------------------------------------------------- */
  /* Retired desktop composition off, stages on                        */
  /* ---------------------------------------------------------------- */

  .vca-legacy {
    display: none !important;
  }

  /* bootstrap.min.css puts `scroll-behavior: smooth` on :root for the whole
     site. Nothing on this page navigates between stages and the scroll here is
     meant to be plainly native, so about.html is returned to `auto`. */
  :root:has(.vca-d-page) {
    scroll-behavior: auto;
  }

  /* ---------------------------------------------------------------- */
  /* Tokens and the shell the whole page is measured against           */
  /* ---------------------------------------------------------------- */

  .vca-d {
    /* same coral red the mobile scroll uses — one accent per page */
    --vcad-red: #e8353b;
    --vcad-ink: #0c0c10;
    --vcad-body: #5c5c66;
    --vcad-muted: #8b8b95;
    --vcad-line: rgba(12, 12, 16, 0.09);
    --vcad-hair: rgba(12, 12, 16, 0.07);
    --vcad-rule: rgba(12, 12, 16, 0.06);

    --vcad-page: #ffffff;
    --vcad-ph: #e9e8e5;     /* flat fill behind stage 01's avatar row */

    /* .header-wrapper is position:fixed and 102px tall from 1200px up; below
       that the nav wraps onto more than one line — its normal behaviour, left
       alone — so js/about-viewchat.js measures the real height and the copy
       clears it either way. */
    --vcad-header: 102px;

    --vcad-pad-x: clamp(32px, 3.2vw, 64px);
    --vcad-pad-y: clamp(72px, 6.4vw, 112px);
    --vcad-text-w: clamp(440px, 32vw, 520px);
    --vcad-gap: clamp(40px, 4vw, 72px);

    /* Width of a stage, deliberately a touch conservative (the scrollbar).
       js/about-viewchat.js supplies the exact figure. */
    --vcad-shell: min(1680px, calc(var(--vcad-vw, calc(100vw - 16px)) - 2 * var(--vcad-pad-x)));

    --vcad-title: clamp(36px, 2.5vw, 40px);

    /* --- the image system -------------------------------------------- */

    /* One shape, one radius, one gap set for every visual block on the page. */
    --vcad-radius: 20px;
    --vcad-ratio-side: 4 / 3;      /* photograph beside the copy (A and B) */
    --vcad-ratio-card: 3 / 4;      /* one portrait of the closing group */
    --vcad-cell-gap: clamp(12px, 1.1vw, 18px);   /* inside a group of images */
    --vcad-stack-gap: clamp(32px, 2.8vw, 48px);  /* visual to copy in C */
    --vcad-text-w-c: clamp(560px, 46vw, 720px);  /* centred measure in C */

    /* A tall stage is capped by width, not by height, so the block keeps its
       ratio at every viewport instead of quietly turning into a letterbox. */
    --vcad-vis-h: clamp(600px, 58vw, 760px);
    --vcad-vis-w-max: calc(var(--vcad-vis-h) * 4 / 3);

    /* The wash: the brand coral #F2565C at 12%. It lives inside the imagery
       only — the page's text accent stays --vcad-red, exactly as before.

       The three below are the whole treatment, held as variables so a single
       photograph can be corrected by a different amount and still land on the
       same temperature as the rest. Stage 02 is outside this system: it is a
       scene, not a framed photograph, and carries no wash. */
    --vcad-tint: rgba(242, 86, 92, 0.12);
    --vcad-warm: 0.03;   /* sepia(): the warmth on top of the wash */
    --vcad-sat: 1.05;

    /* the one full-bleed moment of the page: stage 04. --vcad-coral-net is
       the Hero token value (css/viewchat-hero.css: --vc-coral), used for the
       map's dot grid and its vector network — nowhere else. */
    --vcad-band: #fff8f7;
    --vcad-map-w: 1040px;
    --vcad-coral-net: #f2565c;

    display: block;
    background: var(--vcad-page);
    /* no bottom slab: the closing stage's own padding is the whole gap to the
       footer — see "The end of the page" below */
    padding: var(--vcad-header) var(--vcad-pad-x) 0;
  }

  /* ---------------------------------------------------------------- */
  /* Stage shell — copy left, photograph right, hairline between       */
  /* ---------------------------------------------------------------- */

  .vca-d__row {
    display: grid;
    grid-template-columns: var(--vcad-text-w) minmax(0, 1fr);
    column-gap: var(--vcad-gap);
    align-items: center;
    max-width: 1680px;
    margin: 0 auto;
    padding: var(--vcad-pad-y) 0;
  }

  .vca-d__row + .vca-d__row {
    border-top: 1px solid var(--vcad-rule);
  }

  /* The visual block: one shape, one radius, one treatment, on every stage.
     The block is 4:3 and the artwork 16:9, so `cover` can only ever crop
     sideways — the empty left side of each frame goes and no face, phone or
     card is cut. Every subject in these files begins at 33% of its frame or
     later and the block shows the right 74%, which is what makes a single
     right-anchored rule safe for all of them. */
  .vca-d__row::after {
    content: "";
    display: block;
    align-self: center;
    justify-self: end;
    width: min(100%, var(--vcad-vis-w-max));
    aspect-ratio: var(--vcad-ratio-side);
    border-radius: var(--vcad-radius);
    /* The one warm treatment, identical in layer and in strength on every
       human photograph: a flat coral wash in soft-light, then the faintest
       lift of saturation and warmth. Nothing here approaches greyscale and
       nothing dims skin, clothing or the video-call UI. */
    background-image:
      linear-gradient(0deg, var(--vcad-tint), var(--vcad-tint)),
      var(--vcad-img, none);
    background-repeat: no-repeat, no-repeat;
    background-position: center, right center;
    background-size: cover, cover;
    background-blend-mode: soft-light, normal;
    filter: saturate(var(--vcad-sat)) contrast(1.02) sepia(var(--vcad-warm));
  }

  /* ---------------------------------------------------------------- */
  /* Per-stage artwork. The shape and the treatment are shared, so a   */
  /* stage only names its own file.                                    */
  /* ---------------------------------------------------------------- */

  /* Every one of these files is 16:9 with its subject on the right and its
     left third empty, which is why the same window works for all of them: the
     frame is wider than 16:9, so `cover` fits by WIDTH — the whole horizontal
     composition is kept and the crop is a slice off the top and the bottom.
     50% centres that slice, and on all four files it takes only ceiling and
     floor. The empty left third is what the fade turns into the page. */
  .vca-d__row--s1 {
    --vcad-img: url("../images/about/stage-01-real-people.webp");
    --vcad-title: clamp(38px, 2.8vw, 44px);
    --vcad-bgpos: 50% 50%;
  }

  /* Stage 02 is built as a scene further down the file (see "Stage 02 — one
     scene, four layers"). It names no --vcad-img and takes no part in the
     shared block treatment, so nothing belongs here. */

  .vca-d__row--s3 {
    --vcad-img: url("../images/about/stage-03-technology.webp");
    --vcad-bgpos: 50% 50%;
  }

  /* The exception among the four. Stage 05 is not a room but two phones that
     stand almost the full height of their frame, so a slice off the top and
     the bottom cuts the devices themselves. It is fitted by HEIGHT instead:
     the whole frame is shown, nothing is cropped, and the artwork sits
     against the right-hand edge with its own pale ground running out to the
     left, where the fade takes it. */
  .vca-d__row--s5 {
    --vcad-img: url("../images/about/stage-05-designed-for-you.webp");
    --vcad-bgsize: auto 100%;
    --vcad-bgpos: 100% 50%;
  }

  /* This file runs out mid-image and its cut edge has to be kept out of the
     block. The correction is shared with the mobile chapters and lives in
     css/about-shared.css, which explains it once; all this side owes it is the
     fraction of the frame its own window shows — a 4:3 block against 16:9
     artwork, so 74.45%. The price of the fix is the frame's own soft left
     margin coming into view, which reads as air. */
  /* Stage 06 keeps its correction, not its old number. --vca-s6-window means
     "the fraction of the frame this container shows", and the container is no
     longer a 4:3 block — it is the whole frame. So the artwork is scaled up
     until exactly --vca-s6-usable (0.848) of its width fits, which is the
     point the file's cut edge sits at; css/about-shared.css then solves its
     own formula to 0% and the cut edge lands precisely on the right-hand edge
     of the frame, outside it at every width. The artwork, its crop and its cut
     edge are untouched — only the window they are read through changed shape. */
  .vca-d__row--s6 {
    --vcad-img: url("../images/about/stage-06-real-impact.webp");
    --vca-s6-window: var(--vca-s6-usable);
    /* 0.015 of margin on top of --vca-s6-usable: measured on the render, the
       cut edge was still showing a 7px sliver at the frame's right edge with
       no margin at all, because "usable" is where the cut begins and not
       where it is safely past. */
    --vcad-bgsize: calc(100% / (var(--vca-s6-usable) - 0.015)) auto;
    --vcad-bgpos: 0% 50%;
  }

  /* ---------------------------------------------------------------- */
  /* Variant B — photograph left, copy right                           */
  /*                                                                   */
  /* Same two columns, swapped by placement only: the markup, the order */
  /* of the stages and the order of the copy are untouched. The artwork */
  /* keeps its right anchor, so the subject sits against the copy       */
  /* instead of against the page edge.                                  */
  /* ---------------------------------------------------------------- */

  .vca-d__row--alt {
    grid-template-columns: minmax(0, 1fr) var(--vcad-text-w);
  }

  .vca-d__row--alt .vca-d__main {
    grid-row: 1;
    grid-column: 2;
  }

  .vca-d__row--alt::after {
    grid-row: 1;
    grid-column: 1;
    justify-self: start;
  }

  /* ---------------------------------------------------------------- */
  /* Variant C — one wide visual, the copy centred underneath          */
  /* ---------------------------------------------------------------- */

  .vca-d__row--stack {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--vcad-stack-gap);
    justify-items: center;
    /* a stacked stage is taller than a side-by-side one by construction, so
       it takes a shorter interval of its own rather than adding to the page's
       height twice over */
    padding-block: clamp(56px, 5vw, 88px);
  }

  .vca-d__row--stack .vca-d__main {
    grid-row: 2;
    width: 100%;
    max-width: var(--vcad-text-w-c);
    text-align: center;
  }

  .vca-d__row--stack .vca-d__lead {
    margin-inline: auto;
    max-width: 640px;
  }

  /* Stage 07 is the one stage whose visual is not a photograph behind the
     copy but a gallery beside it. It keeps the shared shell — full bleed, the
     shared height, the same left gutter for the copy — and drops the two
     layers that make the others a scene: there is no background picture and
     therefore no curved fade, because there is no photograph to dissolve.
     The frame is simply the page's white with four portraits on the right.

     The visual is one supplied file, stage-07-safety-grid.webp: four people
     with the spacing between them already in the picture. It is placed as a
     single <img> shown whole — no grid of tiles, no background, no windowing,
     no crop of any kind — so the four portraits and the white gaps between
     them are always all on screen together. */
  .vca-d__row--s7 .vca-d__gallery {
    position: absolute;
    z-index: 3;
    top: 50%;
    right: clamp(56px, 8vw, 150px);
    transform: translateY(-50%);
    margin: 0;
    /* The picture is 1003x1568 — taller than it is wide — and the frame is
       648px at 1440. A width alone would therefore overflow the frame and be
       clipped by its `overflow: hidden`, so the width is capped by what the
       frame's own height allows: 90% of --vcad-scene-h, converted through the
       file's own ratio. The clamp is the intent, the min is the guarantee —
       whichever is smaller wins, so the collage is never cropped at any
       width. 373px at 1440, 460px at 1920, 285px at 1100. */
    width: min(clamp(330px, 31vw, 500px),
               calc(var(--vcad-scene-h) * 0.9 * 1003 / 1568));
  }

  .vca-d__row--s7 .vca-d__gallery img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  /* ---------------------------------------------------------------- */
  /* Stage 02 — one white scene, five layers                           */
  /*                                                                   */
  /* The other stages are a photograph in a block next to a column of   */
  /* copy. This one is a single wide frame with everything inside it,   */
  /* and its ground is the white of the page rather than the room: the  */
  /* room is held to the right and dissolves into that white, the       */
  /* supplied map floats on it, four city cards sit over the map, and   */
  /* the copy sits over all of them in the top left.                    */
  /*                                                                   */
  /* Layer order, which is the design and not an accident:              */
  /*   0  the frame's own white                                         */
  /*   1  .vca-d__scene-photo-wrap — the room, masked to nothing on its  */
  /*      left, with a white gradient over the same edge as a fallback   */
  /*   2  .vca-d__scene-map — the connection map, transparent, on white  */
  /*   3  .vca-d__cards — the four cards, over the map                   */
  /*   4  .vca-d__main — heading and button, over everything             */
  /*                                                                   */
  /* Every layer is placed in percentages of the frame and the cards    */
  /* are driven by two custom properties, so the scene scales as one    */
  /* composition from 992px to 1920px rather than drifting layer by     */
  /* layer. The lanes it protects: the copy ends at 30% of the frame,    */
  /* the cards run 31.5%-56%, the map 30%-64%, and the man begins at     */
  /* about 78% at every width because the crop below is horizontal-safe. */
  /* ---------------------------------------------------------------- */

  /* The stage is the scene and nothing else, edge to edge on all four sides.
     No vertical padding, so the frame runs from the top of the row to the
     bottom of it; no measure and no gutter, so it runs from one side of the
     window to the other. The hairline that separates the other stages is
     dropped here too — it would sit against the frame's own top edge and read
     as a border on the picture, exactly as it is dropped around stage 04.

     Full bleed is done with a negative margin equal to the stage list's own
     padding, which is how stage 04 already does it, and NOT with
     `width: 100vw; margin-inline: calc(50% - 50vw)`. 100vw counts the
     scrollbar: on any desktop with a classic scrollbar that pair is ~15px
     wider than the page and pushes the whole document sideways. This reaches
     the same two edges and cannot overflow. */
  .vca-d__row--s2,
  .vca-d__row--full {
    display: block;
    max-width: none;
    margin-inline: calc(-1 * var(--vcad-pad-x));
    padding-block: 0;
    padding-inline: 0;
  }

  /* Stage 04 keeps its own composition and its map untouched; it only joins
     the others in reaching both edges of the window and in clearing the
     shared height. It is already full bleed further down this file, so all it
     needs here is the floor. */
  .vca-d__row--s4 {
    min-height: clamp(480px, 45vw, 800px);
  }

  /* Nothing is divided by a hairline any more: every stage is now a frame of
     its own that meets the next one edge to edge. */
  .vca-d__row + .vca-d__row {
    border-top: 0;
  }

  /* the shared photograph block is not used by any of them */
  .vca-d__row--s2::after,
  .vca-d__row--full::after {
    content: none;
  }

  .vca-d__scene {
    position: relative;
    isolation: isolate;
    /* A screen, not a strip. The frame is as tall as the composition allows
       and the picture fills it: 1030x495 at 1100px, 1348x648 at 1440,
       1680x800 at 1920.

       The cap is not a taste call. The photograph is 2.36:1 and the frame is
       taller than that, so `cover` fits it by HEIGHT and crops the sides —
       the taller the frame, the more of the empty left wall is cut and the
       further left the room's own objects sit. Past about 45vw the phone in
       his hand crosses into the curved fade and starts dissolving, which a
       crisp foreground object must never do. 45vw with an 800px ceiling
       keeps the phone at 46-47% of the frame at every width, clear of the
       fade's 42% at that height, and still makes the man 32% of the frame
       instead of the 21% he was. */
    --vcad-scene-h: clamp(480px, 45vw, 800px);
    height: var(--vcad-scene-h);
    background: var(--vcad-page);
    /* full bleed, so no outer corners to round */
    border-radius: 0;
    overflow: hidden;

    /* --- the chain of cards, as one geometry -------------------------
       The four cards are one sequence, not four placements: a single size
       and a single step, applied by index. Changing --vcad-s2-dx/dy moves
       all three transitions by the same amount, which is what keeps the
       diagonal even — there is no per-city offset anywhere below. */
    --vcad-s2-av: 48px;
    --vcad-s2-fs: 12px;
    --vcad-s2-card-w: 170px;
    --vcad-s2-card-h: 62px;
    --vcad-s2-x0: 44%;
    --vcad-s2-y0: 21%;
    --vcad-s2-dx: -72px;
    --vcad-s2-dy: 94px;
  }

  /* --- 1. the room, dissolving into the page ------------------------ */

  .vca-d__scene-photo-wrap {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
  }

  /* Stages 01/03/05/06/07 carry their artwork as a background rather than an
     <img>, because that is how they already named their files (--vcad-img)
     and how stage 06's crop correction is written. Same box, same layer, same
     fade over it — only the paint differs. The warm treatment the stages
     shared before is kept exactly: the coral wash, the saturation and the
     sepia are the values from --vcad-tint / --vcad-sat / --vcad-warm. */
  .vca-d__scene-art {
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(0deg, var(--vcad-tint), var(--vcad-tint)),
      var(--vcad-img, none);
    background-repeat: no-repeat, no-repeat;
    background-position: center, var(--vcad-bgpos, 50% 50%);
    background-size: cover, var(--vcad-bgsize, cover);
    background-blend-mode: soft-light, normal;
    filter: saturate(var(--vcad-sat)) contrast(1.02) sepia(var(--vcad-warm));
  }

  /* The file is 2.36:1 and the frame is now taller than that at every desktop
     width, so `cover` fits it by HEIGHT: the whole vertical frame is shown —
     his hair, his raised hand, the phone and the table are all in — and the
     crop is horizontal. Anchored right, so what goes is the empty wall on the
     left, which the fade would have turned white anyway, and nothing is ever
     taken off the man. The y in object-position only matters if a viewport
     ever makes width dominate again; 0% keeps his head if it does.

     The picture itself is untouched — full height of the frame, no mask of
     its own, no vertical edge anywhere. What removes its left side is the
     layer below. */
  .vca-d__scene-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 100% 0%;
  }

  /* The curved white fade — the whole of layer 3, and the only thing that
     dissolves the photograph.

     A straight gradient cannot do this: the picture has to appear later at
     the top of the frame than at the bottom. Read off the reference, the
     boundary runs 51% of the frame's width at the top, 45.5% at its middle
     and 31% at the foot, almost flat over the first two fifths and then
     falling away — so it is a path, not a ramp, and it is carried as an
     inline SVG stretched over the frame (viewBox 0 0 100 100,
     preserveAspectRatio="none", so the curve is in percentages of the block
     and holds its shape at every width).

     The softness is one horizontal Gaussian on that path — stdDeviation
     "2.9 0", i.e. blurred across and not along, so the band is soft but the
     top and bottom edges of the frame stay clean. 2.9 units of a 100-unit
     viewBox is 39px of blur on a 1348px block, which measures 100px from
     10% to 90% opacity at 1440 and 125px at 1920 — the 90-140px the brief
     asks for. The path runs from
     y -15 to y 115 and out to x -30, so no end of the shape is ever inside
     the frame and there is no rectangle edge, no seam and no grey.

     Painting white rather than masking the <img> is deliberate: the frame's
     ground is white, so the result is identical, it needs no mask support to
     be correct, and it keeps the fade a layer of its own — above the
     photograph, below the map. The map and the cards are outside this
     element and are never masked or clipped by it. */
  .vca-d__scene-photo-wrap::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20100'%20preserveAspectRatio='none'%3E%3Cfilter%20id='s'%20filterUnits='userSpaceOnUse'%20x='-40'%20y='-40'%20width='180'%20height='180'%20color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur%20stdDeviation='2.9%200'/%3E%3C/filter%3E%3Cpath%20d='M52.6%20-15C52.2%20-6,51.4%20-3,51%200C51.2%2018,49.5%2036,45.5%2050C41.5%2064,35.5%2082,31%20100C29.6%20105,27.8%20110,26%20115L-30%20115L-30%20-15Z'%20fill='%23fff'%20filter='url(%23s)'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: 0 0;
  }

  /* --- 2. the connection layer -------------------------------------- */

  /* The supplied map and nothing else: its own alpha, its own coral arcs and
     nodes, on the frame's white. No box, no fill, no blend mode and no border
     behind it — it is a transparent PNG-turned-lossless-WebP lying on the
     page. Height is left to the file's own 3:2 so no arc or node is cropped,
     and the box is kept inside 30%-64% of the frame: clear of the copy on one
     side, of the man on the other, and overlapping the photograph's fade in
     the middle, which is where it is meant to sit. This is not the stage 04
     map and does not repeat it. */
  .vca-d__scene-map {
    position: absolute;
    z-index: 2;
    left: 29%;
    top: 16%;
    width: 28%;
    height: auto;
    opacity: 0.38;
    pointer-events: none;
  }

  /* --- 3. the four cards -------------------------------------------- */

  .vca-d__cards {
    position: absolute;
    inset: 0;
    z-index: 3;
    margin: 0;
    padding: 0;
    list-style: none;
    pointer-events: none;
  }

  /* A chain, not a grid: each card sits lower and further left than the one
     above it, and the last pair just overlaps, so the four read as a line of
     connections crossing the map rather than a stack. */
  /* One box for all four — same width, same height, same padding, same type.
     The only thing that differs between them is --i, the index in the chain. */
  .vca-d__card {
    position: absolute;
    left: calc(var(--vcad-s2-x0) + var(--i) * var(--vcad-s2-dx));
    top: calc(var(--vcad-s2-y0) + var(--i) * var(--vcad-s2-dy));
    display: flex;
    align-items: center;
    box-sizing: border-box;
    width: var(--vcad-s2-card-w);
    height: var(--vcad-s2-card-h);
    gap: 10px;
    padding: 7px 13px 7px 7px;
    font-family: 'Plus Jakarta Sans', 'Inter', Helvetica, Arial, sans-serif;
    font-size: var(--vcad-s2-fs);
    background: rgba(255, 255, 255, 0.93);
    border-radius: 13px;
    box-shadow: 0 4px 12px rgba(12, 12, 16, 0.075),
                0 1px 2px rgba(12, 12, 16, 0.04);
    /* nothing inside a card may ever paint outside it */
    overflow: hidden;
  }

  .vca-d__card--seoul       { --i: 0; }
  .vca-d__card--los-angeles { --i: 1; }
  .vca-d__card--paris       { --i: 2; }
  .vca-d__card--busan       { --i: 3; }

  /* The avatar is a fixed box that clips, not an image that happens to fit:
     the four source files differ in aspect (three 2:3 portraits and one 4:3),
     and this is what makes that irrelevant. Same rule for all four — there is
     no per-city exception anywhere in this file. */
  .vca-d__card-avatar {
    flex: 0 0 var(--vcad-s2-av);
    width: var(--vcad-s2-av);
    height: var(--vcad-s2-av);
    overflow: hidden;
    border-radius: 11px;
  }

  .vca-d__card-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* these four are head-and-shoulders already, so the top of the frame is
       the right anchor for all of them */
    object-position: 50% 8%;
  }

  /* min-width:0 is what stops LOS ANGELES from pushing the card open; the
     city line then has a measure of its own and cannot spill either */
  .vca-d__card-body {
    display: block;
    min-width: 0;
  }

  .vca-d__card-city {
    display: block;
    max-width: 100%;
    overflow: hidden;
    font-size: 1em;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--vcad-ink);
  }

  .vca-d__card-status {
    display: flex;
    align-items: center;
    gap: 0.42em;
    margin-top: 0.3em;
    max-width: 100%;
    overflow: hidden;
    font-size: 0.83em;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    color: var(--vcad-body);
  }

  .vca-d__card-dot {
    flex: 0 0 auto;
    width: 0.5em;
    height: 0.5em;
    border-radius: 50%;
    background: var(--vcad-red);
  }

  /* --- 4. the copy, over everything --------------------------------- */

  /* Top left and deliberately small: a quarter of the frame's width, set
     against white, with the button directly under the heading and the whole
     of the middle left empty between it and the map. */
  .vca-d__row--s2 .vca-d__main,
  .vca-d__row--full .vca-d__main {
    position: absolute;
    z-index: 4;
    /* the frame now reaches the window, so the copy keeps a gutter of its
       own — never closer to the edge than the rest of the page's stages */
    left: max(5.5%, var(--vcad-pad-x));
    top: 12%;
    width: min(22%, 330px);
  }

  /* Stage 02 is a headline and a button; the rest carry a lead, a label or a
     list, so they take a wider measure — still well clear of the fade, whose
     nearest point is 45.5% of the frame at mid-height. */
  .vca-d__row--full .vca-d__main {
    top: 50%;
    transform: translateY(-50%);
    width: min(34%, 480px);
  }

  .vca-d__row--s2 .vca-d__title {
    font-size: clamp(25px, 2vw, 32px);
  }

  .vca-d__row--s2 .vca-d__cta {
    margin-top: 22px;
  }

  /* 992-1199: the frame is at its height floor and proportionally taller, so
     the map and the cards step down together to keep the same clear lanes
     around the heading, the button and the man. */
  @media (max-width: 1199.98px) {
    /* the same chain, one size down — the step stays uniform, only smaller */
    .vca-d__scene {
      --vcad-s2-av: 42px;
      --vcad-s2-fs: 11px;
      --vcad-s2-card-w: 150px;
      --vcad-s2-card-h: 56px;
      --vcad-s2-x0: 45.5%;
      --vcad-s2-y0: 20%;
      --vcad-s2-dx: -58px;
      --vcad-s2-dy: 76px;
    }

    .vca-d__scene-map {
      left: 30%;
      top: 17%;
      width: 27%;
    }
  }

  /* ---------------------------------------------------------------- */
  /* Stage 04 — the world map, the one accent moment of the page       */
  /*                                                                   */
  /* Everything else on About lives inside the 1680px measure; this     */
  /* stage alone runs the full width of the viewport, and the barely    */
  /* warm band is what marks it as the exception. Full bleed is done    */
  /* with negative margins equal to the stage list's own padding, not   */
  /* with 100vw: 100vw counts the scrollbar and would push the page     */
  /* sideways.                                                          */
  /*                                                                   */
  /* The map keeps its role as an independent global visual: no frame,  */
  /* no radius, its own alpha, nothing cropped.                         */
  /* ---------------------------------------------------------------- */

  .vca-d__row--s4::after {
    content: none;
  }

  .vca-d__row--s4 {
    max-width: none;
    margin-inline: calc(-1 * var(--vcad-pad-x));
    padding-inline: var(--vcad-pad-x);
    row-gap: 10px;   /* the artwork carries its own margin below the map */
    background: var(--vcad-band);
  }

  /* the band's own edges separate this stage; a hairline would double them */
  .vca-d__row--s4,
  .vca-d__row--s4 + .vca-d__row {
    border-top: 0;
  }

  .vca-d__map {
    grid-row: 1;
    position: relative;
    isolation: isolate;   /* the coral wash blends inside the figure only */
    margin: 0 auto;
    width: min(var(--vcad-map-w), 100%);
  }

  .vca-d__map img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: auto;
    /* contain: the map keeps its proportions and its alpha, on white */
    object-fit: contain;
    object-position: center;
    /* The artwork's points and pins measure #EF474F — hue 357.4, saturation
       84%, lightness 61% — against the brand coral's 357.7 / 86% / 64%. Two
       degrees of hue and a whisker of saturation centre the whole family (the
       arcs' glow reads a few degrees warmer, being drawn over a warm white
       map), and a rotation that small is nothing the four portraits inside
       the pins can register. */
    filter: saturate(0.96) hue-rotate(-2deg);
  }

  /* --- The dot grid, recoloured to the brand coral ------------------ */
  /*                                                                   */
  /* The grid, the arcs and the pins are one raster, so no filter can   */
  /* pick out the dots on their own: a wash over the whole map is the   */
  /* only lever. This one is masked by the map's own alpha channel, so  */
  /* it lands on the continents and never on the page, with four holes  */
  /* cut over the portraits inside the pins — their faces would         */
  /* otherwise go monochrome coral. The holes are measured off the      */
  /* file: the photo discs sit at 15.4/38.2, 57.0/12.8, 36.9/73.2 and   */
  /* 78.2/46.2 percent, with radii of 75-85px of 1536.                  */
  /*                                                                   */
  /* mix-blend-mode: color takes the hue and saturation from the coral    */
  /* and the luminance from the map, so the spheres keep every bit of     */
  /* their modelling and only change tone — multiply darkened the grey    */
  /* shadows into mauve. The arcs are this colour already, so they are    */
  /* unchanged in hue and only settle onto the brand value exactly.       */
  /* ---------------------------------------------------------------- */

  @supports (mask-composite: intersect) {
    .vca-d__map::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 2;
      background: var(--vcad-coral-net);
      mix-blend-mode: color;
      opacity: 0.55;
      pointer-events: none;
      mask-image:
        radial-gradient(ellipse 5.34% 8.01% at 15.365% 38.184%, transparent 0 96%, #000 100%),
        radial-gradient(ellipse 5.70% 8.55% at 57.005% 12.793%, transparent 0 96%, #000 100%),
        radial-gradient(ellipse 5.05% 7.57% at 36.914% 73.193%, transparent 0 96%, #000 100%),
        radial-gradient(ellipse 5.37% 8.05% at 78.223% 46.240%, transparent 0 96%, #000 100%),
        url("../images/about/stage-04-global-map.webp");
      mask-composite: intersect, intersect, intersect, intersect, add;
      mask-size: 100% 100%;
      mask-repeat: no-repeat;
    }
  }

  /* --- The connection network, in vector, over its own raster ------- */
  /*                                                                   */
  /* Same viewBox as the file (1536x1024) and the same box as the       */
  /* <img>, which is what sets the figure's height — so the overlay is  */
  /* aligned at every viewport width without one magic number here.     */
  /*                                                                   */
  /* The arcs and pins are baked into the webp and cannot be hidden     */
  /* without editing it, so this is not a draw-in from nothing: the     */
  /* vector network lands exactly on the raster one and lights it up.   */
  /* Every path was fitted to the coral pixels of the file itself.      */
  /* ---------------------------------------------------------------- */

  .vca-d__net {
    position: absolute;
    inset: 0;
    z-index: 3;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
  }

  .vca-d__net-arcs {
    fill: none;
    stroke: var(--vcad-coral-net);
    stroke-width: 2.8;
    stroke-linecap: round;
    filter: drop-shadow(0 0 4px rgba(242, 86, 92, 0.3));
  }

  .vca-d__net-arcs path {
    /* pathLength="1" in the markup, so one unit is the whole arc */
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
  }

  .vca-d__net-pins .vca-d__pin {
    fill: none;
    stroke: var(--vcad-coral-net);
  }

  .vca-d__net-pins .vca-d__pin {
    stroke-width: 2.4;
    opacity: 0.6;
  }

  /* the pulse ring is only ever visible while it plays */
  .vca-d__net-nodes .vca-d__ping {
    fill: none;
    stroke: var(--vcad-coral-net);
    stroke-width: 2.6;
    opacity: 0;
  }

  /* ---------------------------------------------------------------- */
  /* Stage 07 — the four closing portraits as a real 4-up grid         */
  /*                                                                   */
  /* The artwork holds the four cards in one row, so each cell is its   */
  /* own window onto the same file — the technique the mobile chapter   */
  /* already uses (css/about-mobile.css). Same file, no new asset.      */
  /*                                                                   */
  /* The cards are not equally wide in the artwork (351 / 324 / 310 /   */
  /* 302 px of 1920, all 470px tall), so each cell carries the size and */
  /* position measured for its own card. Each card is drawn 3% larger   */
  /* than its cell so the card's own rounded border falls outside it    */
  /* and --vcad-radius is the only radius on screen; the remainder of   */
  /* the crop lands on the bottom of the frame, never on a face.        */
  /* ---------------------------------------------------------------- */

  /* Stage 07 used to be four cells windowed onto one file; it is now the one
     picture itself, placed by .vca-d__row--s7 .vca-d__gallery above. The cell
     rules and their measurements are gone with the markup they styled. */


  /* ---------------------------------------------------------------- */
  /* Typography                                                        */
  /* ---------------------------------------------------------------- */

  .vca-d__eyebrow {
    margin: 0 0 20px;
    font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--vcad-red);
  }

  .vca-d__title {
    margin: 0;
    font-family: 'Plus Jakarta Sans', 'Inter', Helvetica, Arial, sans-serif;
    font-size: var(--vcad-title);
    font-weight: 700;
    line-height: 1.16;
    letter-spacing: -0.022em;
    text-transform: uppercase;
    text-wrap: balance;
    color: var(--vcad-ink);
  }

  .vca-d__title .vca-m__hl {
    color: var(--vcad-red);
  }

  .vca-d__lead {
    margin: 26px 0 0;
    max-width: 420px;
  }

  .vca-d__lead p {
    margin: 0 0 12px;
    font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--vcad-body);
  }

  .vca-d__lead p:last-child {
    margin-bottom: 0;
  }

  /* flat placeholder fill; no markup carries it at present */
  .vca-d__ph {
    display: block;
    background: var(--vcad-ph);
    border: 1px solid var(--vcad-hair);
  }

  /* The supporting label above section 03's feature list and section 02's call
     to action are the only two content shapes the stages did not already have.
     The label sits inside the existing text column and changes no metric of
     the layout; the button reuses the site's own .btn markup and only takes
     this page's accent, exactly as the header CTA already does. Section 02
     now carries its copy inside the scene, so its button is positioned there
     rather than in a column — the button itself is unchanged. */
  .vca-d__label {
    margin: 30px 0 0;
    font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--vcad-muted);
  }

  .vca-d__label + .vca-d__pillars {
    margin-top: 22px;
  }

  .vca-d__cta {
    margin: 36px 0 0;
  }

  .vca-d .vca-d__cta-btn.btn--theme {
    padding: 13px 30px;
    font-size: 13px;
    background-color: var(--vcad-red) !important;
    border-color: var(--vcad-red) !important;
  }

  .vca-d .vca-d__cta-btn.btn--theme:hover {
    background-color: #d0272d !important;
    border-color: #d0272d !important;
  }

  /* ---------------------------------------------------------------- */
  /* Stage 01 — avatars + metric, a caption under the copy             */
  /* ---------------------------------------------------------------- */

  .vca-d__meta {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-top: 40px;
  }

  .vca-d__avatars {
    display: flex;
    align-items: center;
  }

  .vca-d__avatar {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--vcad-ph);
    border: 1px solid rgba(12, 12, 16, 0.13);
    box-shadow: 0 0 0 2px #fff;
  }

  .vca-d__avatar + .vca-d__avatar {
    margin-left: -9px;
  }

  /* no card, no shadow: a quiet figure sitting on the page */
  .vca-d__metric {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 0 0 22px;
    border-left: 1px solid var(--vcad-line);
  }

  .vca-d__metric-icon {
    line-height: 1;
    color: var(--vcad-red);
  }

  .vca-d__metric-value {
    display: block;
    font-family: 'Plus Jakarta Sans', 'Inter', Helvetica, Arial, sans-serif;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--vcad-ink);
  }

  .vca-d__metric-label {
    display: block;
    margin-top: 2px;
    font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 12px;
    line-height: 1.3;
    color: var(--vcad-muted);
  }

  /* ---------------------------------------------------------------- */
  /* Stage 02 — cities as a quiet two-column list                      */
  /* ---------------------------------------------------------------- */

  .vca-d__cities {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 24px;
    list-style: none;
    margin: 40px 0 0;
    padding: 0;
  }

  .vca-d__city {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .vca-d__city-ph {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 50%;
  }

  .vca-d__city-name {
    display: block;
    font-family: 'Plus Jakarta Sans', 'Inter', Helvetica, Arial, sans-serif;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--vcad-ink);
  }

  .vca-d__status {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 3px;
    font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 11.5px;
    line-height: 1.3;
    color: var(--vcad-muted);
  }

  .vca-d__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--vcad-red);
  }

  /* ---------------------------------------------------------------- */
  /* Stage 03 — four pillars, 2x2 under the copy                       */
  /* ---------------------------------------------------------------- */

  .vca-d__pillars {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 24px;
    margin: 40px 0 0;
    padding: 0;
    list-style: none;
  }

  .vca-d__pillars > li {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .vca-d__pillar-icon {
    flex: 0 0 auto;
    line-height: 1;
    color: var(--vcad-red);
  }

  .vca-d__pillar-title {
    font-family: 'Plus Jakarta Sans', 'Inter', Helvetica, Arial, sans-serif;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--vcad-ink);
  }

  /* ---------------------------------------------------------------- */
  /* Stage 05 / 06 — benefits and figures as page detail               */
  /* ---------------------------------------------------------------- */

  .vca-d__rows {
    list-style: none;
    margin: 40px 0 0;
    padding: 0;
  }

  .vca-d__rows > li + li {
    margin-top: 18px;
  }

  .vca-d__item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
  }

  .vca-d__item-icon {
    flex: 0 0 auto;
    width: 24px;
    line-height: 1;
    text-align: center;
    color: var(--vcad-red);
  }

  .vca-d__item-title {
    display: block;
    font-family: 'Plus Jakarta Sans', 'Inter', Helvetica, Arial, sans-serif;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--vcad-ink);
  }

  .vca-d__item-value {
    display: block;
    font-family: 'Plus Jakarta Sans', 'Inter', Helvetica, Arial, sans-serif;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--vcad-ink);
  }

  .vca-d__item-sub {
    display: block;
    margin-top: 3px;
    font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--vcad-muted);
  }

  /* the four figures read as a block of numbers, not a stack of cards */
  .vca-d__row--s6 .vca-d__rows {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }

  .vca-d__row--s6 .vca-d__rows > li + li {
    margin-top: 0;
  }

  /* ---------------------------------------------------------------- */
  /* Icon glyphs — outweigh flaticon's own :before font-size           */
  /* ---------------------------------------------------------------- */

  .vca-d .vca-d__metric-icon::before,
  .vca-d .vca-d__item-icon::before {
    font-size: 19px;
  }

  .vca-d .vca-d__pillar-icon::before {
    font-size: 21px;
  }

  /* ---------------------------------------------------------------- */
  /* The end of the page                                               */
  /*                                                                   */
  /* Nothing is added to the page here. Three separate slabs of white   */
  /* used to stack up between the last line of copy and the footer —    */
  /* the closing stage's own 92px, 72px under the stage list and the    */
  /* footer's own 100px, 265px in all — so the page read as cut off.    */
  /* They become one interval, closed by the same hairline that already */
  /* separates the stages.                                              */
  /* ---------------------------------------------------------------- */

  /* The closing stage no longer needs a slab of its own: it is a full-bleed
     frame that ends where the footer's own interval begins. */
  .vca-d__row--s7 {
    padding-bottom: 0;
  }

  .vca-d-page footer.footer-3.pt-100 {
    padding-top: clamp(52px, 4.6vw, 68px);
    border-top: 1px solid rgba(12, 12, 16, 0.06);
  }

  /* ---------------------------------------------------------------- */
  /* Quiet reveal                                                      */
  /*                                                                   */
  /* js/about-viewchat.js is what puts `vca-d--reveal` on the stage     */
  /* list, and it declines to do so under prefers-reduced-motion, so    */
  /* with no JS and with motion turned down every stage is simply       */
  /* visible. A stage plays once and is then let go.                    */
  /* ---------------------------------------------------------------- */

  .vca-d--reveal .vca-d__row {
    opacity: 0;
    transform: translateY(20px);
    will-change: opacity, transform;
  }

  .vca-d--reveal .vca-d__row.is-in {
    opacity: 1;
    transform: none;
    will-change: auto;
    transition: opacity 0.52s cubic-bezier(0.22, 0.61, 0.36, 1),
                transform 0.52s cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  @media (prefers-reduced-motion: reduce) {
    .vca-d--reveal .vca-d__row,
    .vca-d--reveal .vca-d__row.is-in {
      opacity: 1;
      transform: none;
      transition: none;
      will-change: auto;
    }

    /* the map's network too: finished, not animating. js/about-viewchat.js
       already declines to set the reveal class under this preference, so this
       only catches a preference changed after the page has loaded. */
    .vca-d--reveal .vca-d__row--s4 .vca-d__net-arcs path,
    .vca-d--reveal .vca-d__row--s4.is-in .vca-d__net-arcs path {
      stroke-dashoffset: 0;
      transition: none;
    }

    .vca-d--reveal .vca-d__row--s4 .vca-d__pin,
    .vca-d--reveal .vca-d__row--s4.is-in .vca-d__pin {
      opacity: 0.6;
      transform: none;
      animation: none;
    }

    .vca-d--reveal .vca-d__row--s4 .vca-d__ping,
    .vca-d--reveal .vca-d__row--s4.is-in .vca-d__ping {
      opacity: 0;
      animation: none;
    }
  }


  /* ---------------------------------------------------------------- */
  /* Stage 04 — the one stage that is allowed to be noticed            */
  /*                                                                   */
  /* No new trigger and no new script: the stage gets `is-in` from the  */
  /* same IntersectionObserver in js/about-viewchat.js that reveals the */
  /* other six, and everything below hangs off that one class. The      */
  /* other six fade up 20px in 520ms; this one also rises from 96.5%    */
  /* over 900ms, and then its network lights along its own arcs — the   */
  /* only motion of that kind on the page.                             */
  /*                                                                   */
  /* Resting state is the finished state throughout, so with no JS, no  */
  /* IntersectionObserver, or reduced motion the map is simply drawn.   */
  /* ---------------------------------------------------------------- */

  .vca-d--reveal .vca-d__row--s4 {
    opacity: 0;
    transform: translateY(24px) scale(0.965);
  }

  .vca-d--reveal .vca-d__row--s4.is-in {
    opacity: 1;
    transform: none;
    will-change: auto;
    transition: opacity 0.9s cubic-bezier(0.22, 0.61, 0.36, 1),
                transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  /* --- the arcs draw in, one after another ------------------------- */

  .vca-d--reveal .vca-d__row--s4 .vca-d__net-arcs path {
    stroke-dashoffset: 1;
  }

  .vca-d--reveal .vca-d__row--s4.is-in .vca-d__net-arcs path {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 1s cubic-bezier(0.33, 0.72, 0.35, 1);
    transition-delay: calc(260ms + var(--vcad-seq, 0ms));
  }

  .vca-d__net-arcs path:nth-child(1) { --vcad-seq: 0ms; }
  .vca-d__net-arcs path:nth-child(2) { --vcad-seq: 85ms; }
  .vca-d__net-arcs path:nth-child(3) { --vcad-seq: 170ms; }
  .vca-d__net-arcs path:nth-child(4) { --vcad-seq: 255ms; }
  .vca-d__net-arcs path:nth-child(5) { --vcad-seq: 340ms; }
  .vca-d__net-arcs path:nth-child(6) { --vcad-seq: 425ms; }
  .vca-d__net-arcs path:nth-child(7) { --vcad-seq: 510ms; }
  .vca-d__net-arcs path:nth-child(8) { --vcad-seq: 595ms; }
  .vca-d__net-arcs path:nth-child(9) { --vcad-seq: 680ms; }
  .vca-d__net-arcs path:nth-child(10) { --vcad-seq: 765ms; }

  /* --- the nodes, west to east, each with one soft coral pulse ----- */

  /* transform-box: the origin has to be each circle's own centre, which is
     also its node's centre — the default origin is the SVG's own 0 0 */
  .vca-d__ping,
  .vca-d__pin {
    transform-box: fill-box;
    transform-origin: center;
  }

  .vca-d__net-nodes .vca-d__node:nth-child(1) { --vcad-seq: 0ms; }
  .vca-d__net-nodes .vca-d__node:nth-child(2) { --vcad-seq: 75ms; }
  .vca-d__net-nodes .vca-d__node:nth-child(3) { --vcad-seq: 150ms; }
  .vca-d__net-nodes .vca-d__node:nth-child(4) { --vcad-seq: 225ms; }
  .vca-d__net-nodes .vca-d__node:nth-child(5) { --vcad-seq: 300ms; }
  .vca-d__net-nodes .vca-d__node:nth-child(6) { --vcad-seq: 375ms; }
  .vca-d__net-nodes .vca-d__node:nth-child(7) { --vcad-seq: 450ms; }
  .vca-d__net-nodes .vca-d__node:nth-child(8) { --vcad-seq: 525ms; }
  .vca-d__net-nodes .vca-d__node:nth-child(9) { --vcad-seq: 600ms; }

  .vca-d--reveal .vca-d__row--s4.is-in .vca-d__ping {
    animation: vcadNodePing 1.1s cubic-bezier(0.2, 0.6, 0.3, 1)
               calc(420ms + var(--vcad-seq, 0ms)) both;
  }

  /* --- the four portrait pins close the sequence ------------------- */

  .vca-d__net-pins .vca-d__pin:nth-child(1) { --vcad-seq: 0ms; }
  .vca-d__net-pins .vca-d__pin:nth-child(2) { --vcad-seq: 130ms; }
  .vca-d__net-pins .vca-d__pin:nth-child(3) { --vcad-seq: 260ms; }
  .vca-d__net-pins .vca-d__pin:nth-child(4) { --vcad-seq: 390ms; }

  .vca-d--reveal .vca-d__row--s4 .vca-d__pin {
    opacity: 0;
  }

  .vca-d--reveal .vca-d__row--s4.is-in .vca-d__pin {
    animation: vcadPinIn 620ms cubic-bezier(0.22, 0.61, 0.36, 1)
               calc(1150ms + var(--vcad-seq, 0ms)) both;
  }

  @keyframes vcadNodePing {
    0%   { opacity: 0; transform: scale(0.5); }
    18%  { opacity: 0.62; }
    72%  { opacity: 0.12; }
    100% { opacity: 0; transform: scale(2.7); }
  }

  @keyframes vcadPinIn {
    0%   { opacity: 0; transform: scale(0.84); }
    55%  { opacity: 0.95; transform: scale(1.035); }
    100% { opacity: 0.6; transform: scale(1); }
  }

  /* ---------------------------------------------------------------- */
  /* Header (about.html only)                                          */
  /*                                                                   */
  /* Every link, href and menu script stays exactly as it is; these     */
  /* rules only align and restyle what is already in the markup.        */
  /*                                                                   */
  /* Identical padding at rest and in `.scroll` keeps the bar at one    */
  /* constant height: transparent over the top of stage 01, the site's  */
  /* own white treatment from the moment the page starts moving.        */
  /* ---------------------------------------------------------------- */

  .vca-d-page .tra-menu .wsmainfull,
  .vca-d-page .tra-menu .wsmainfull.scroll {
    padding: 16px 0;
  }

  .vca-d-page .wsmainwp,
  .vca-d-page .tra-menu .wsmainfull.scroll .wsmainwp {
    max-width: none;
    padding-left: clamp(32px, 3.2vw, 64px);
    padding-right: clamp(32px, 3.2vw, 64px);
  }

  .vca-d-page .desktoplogo img {
    height: 30px;
    width: auto;
  }

  .vca-d-page .wsmenu-list > li > a.h-link {
    padding: 0 11px;
    font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #0c0c10;
  }

  .vca-d-page .wsmenu-list > li > a.h-link:hover {
    color: #e8353b;
  }

  /* the nav entry for this page, marked in the markup with .is-current */
  .vca-d-page .wsmenu-list > li > a.h-link.is-current,
  .vca-d-page .scroll .wsmenu-list > li > a.h-link.is-current {
    position: relative;
    color: #e8353b;
  }

  .vca-d-page .wsmenu-list > li > a.h-link.is-current::after {
    content: "";
    position: absolute;
    left: 11px;
    right: 11px;
    top: calc(50% + 9px);
    height: 2px;
    border-radius: 2px;
    background: #e8353b;
  }

  /* keep the CTA on this page's accent; global .btn--theme is untouched */
  .vca-d-page .wsmenu-list .btn--theme {
    padding: 9px 20px;
    font-size: 12px;
    background-color: #e8353b !important;
    border-color: #e8353b !important;
  }

  .vca-d-page .wsmenu-list .btn--theme:hover {
    background-color: #d0272d !important;
    border-color: #d0272d !important;
  }

  .vca-d-page .lang-btn--desktop {
    font-size: 12px;
  }

  /* transparent over the top of stage 01; .scroll keeps the site's own white
     sticky treatment once the page starts moving */
  .vca-d-page .tra-menu .wsmainfull:not(.scroll) {
    background-color: transparent !important;
    box-shadow: none;
  }

  /* ---------------------------------------------------------------- */
  /* 992-1199 — the nav wraps onto more than one line at these widths.  */
  /* That is its existing behaviour and it stays: the items are not     */
  /* squeezed onto one line and nothing overflows sideways. The copy    */
  /* and the visuals step down instead.                                 */
  /* ---------------------------------------------------------------- */

  @media (max-width: 1199.98px) {
    .vca-d {
      --vcad-header: 212px;   /* fallback only; JS measures the real height */
      --vcad-pad-y: clamp(56px, 5.5vw, 76px);
      --vcad-text-w: 400px;
      --vcad-gap: 40px;
      --vcad-title: 30px;
      --vcad-radius: 16px;
      --vcad-stack-gap: 34px;
      --vcad-text-w-c: min(620px, 100%);
    }

    .vca-d__row--s1 {
      --vcad-title: 34px;
    }

    .vca-d__lead p {
      font-size: 15px;
    }

    .vca-d__cities,
    .vca-d__pillars,
    .vca-d__row--s6 .vca-d__rows {
      grid-template-columns: minmax(0, 1fr);
    }

    .vca-d-page .wsmenu-list > li > a.h-link {
      padding: 0 9px;
      font-size: 10.5px;
      letter-spacing: 0.04em;
    }

    .vca-d-page .wsmenu-list > li > a.h-link.is-current::after {
      left: 9px;
      right: 9px;
    }
  }
}