/* ==========================================================================
   ABOUT US · the page body                                       2026-10-03
   an earlier layer of this file — linked last in about-us.html's <head>.

   Built from zero on the homepage's system, not on the old About layers:
     · the lane      var(--site-lane) — the header's own left/right lines
     · the rhythm    --r9-open / --r9-close (assets/shared/design/rhythm.css)
     · the heads     .hd-intro > .hd-kicker / .hd-title / .hd-desc
                     (assets/shared/design/heads.css — the same unit as every homepage section)
     · the material  flat planes of the blue ramp, 1px edges, no shadow;
                     white 12px cards with a #D3DEEE edge on a #E6EEFA surface
                     (homepage Success Stories)
     · the actions   one key: white plate, dark label, tinted arrow cell
                     (homepage "Explore service"); inside a white card, a
                     footer row with a tinted arrow badge (Success Stories card)

   The story, in order:
     #overview     the opening — since 2026-10-05 the shared inner-page hero
                   (assets/shared/hero-rail/ + inner-hero/), as on Our Work,
                   Management Team, Careers, Legal and Contact Us; it has no
                   rules in this file
     #what-we-do   the five services, one team, measured by enquiries
     #our-story    the dated record, 2015 → today
     #markets      five countries, the kinds of business
     #team         three named leaders + how the work is run
     #company      the registered record + the building

   Separation is by space and tone, not by rules. Labels are sentence case;
   mono is kept for the site's section kickers and the CIN only. No blue
   keylines, no left bars, no counters, nothing nested more than one layer.
   Phones: the services, the record and the markets are bounded sideways
   rails (swipe, drag or keys), the next item cut by the edge.

   UNDO: 
   ========================================================================== */

main.ab{
  --ab-ink:     #0E1E35;   /* titles — the homepage's heading ink   */
  --ab-text:    #0D1526;   /* body ink                              */
  --ab-ink2:    #414652;   /* supporting line                       */
  --ab-mute:    #535C69;   /* labels and secondary copy             */
  --ab-act:     #0760C6;   /* the homepage's action blue            */
  --ab-ground:  #F4F7FC;   /* alternate section ground              */
  --ab-surface: #E6EEFA;   /* Success Stories surface               */
  --ab-tint:    #EEF4FC;
  --ab-band:    #F6F9FE;
  --ab-edge:    #D3DEEE;   /* card edge                             */
  --ab-hair:    #E5EAF1;
  --ab-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --ab-gap:     16px;

  display: block;
  color: var(--ab-text);
  background: #FFFFFF;
}
main.ab *, main.ab *::before, main.ab *::after{ box-sizing: border-box; }
/* resets at zero specificity, so every class rule below (and assets/shared/design/heads.css's
   head unit) wins without !important */
:where(main.ab) :where(p, dl, dd, figure, ol, ul){ margin: 0; padding: 0; }
:where(main.ab) :where(ol, ul){ list-style: none; }
:where(main.ab) :where(h1, h2, h3){ margin: 0; }
:where(main.ab) :where(a){ color: inherit; text-decoration: none; }

.ab-lane{ width: var(--site-lane, min(1440px, calc(100% - 48px))); margin-inline: auto; }

/* --------------------------------------------------------------------------
   SHARED PARTS
   -------------------------------------------------------------------------- */
.ab-sec{ padding: var(--r9-open, 58px) 0 var(--r9-close, 50px); }
.ab-sec--white{ background: #FFFFFF; }
.ab-sec--ground{ background: var(--ab-ground); }
.ab-sec--last{ padding-bottom: calc(var(--r9-close, 50px) + 14px); }
main.ab .hd-intro > .hd-desc{ --hd-desc-w: 36rem; }

/* the tinted arrow badge (inside cards) */
.ab-ar{
  flex: none; width: 26px; height: 26px; border-radius: 7px;
  display: grid; place-items: center; background: #EAF1FB;
  transition: background-color .16s ease;
}
.ab-ar svg{ width: 14px; height: 14px; fill: none; stroke: var(--ab-act); stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }

/* the one key — white plate, dark label, tinted arrow cell; always on a tint */
.ab-plate{
  display: inline-flex; align-items: stretch; align-self: flex-start;
  min-height: 56px; border-radius: 8px; overflow: hidden;
  background: #FFFFFF; color: var(--ab-ink);
}
.ab-plate > span{
  display: flex; align-items: center; flex: 1 1 auto; padding: 0 26px 0 24px;
  font-size: 16px; font-weight: 800; letter-spacing: -.01em; white-space: nowrap;
}
.ab-plate > i{
  flex: none; width: 56px; display: grid; place-items: center;
  background: #D6E3F6; transition: background-color .16s ease;
}
.ab-plate > i svg{ width: 19px; height: 19px; fill: none; stroke: var(--ab-ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ab-plate:hover > i{ background: #C6D9F4; }
.ab-plate:focus-visible{ outline: 2px solid var(--ab-act); outline-offset: 3px; }

/* rails: a row that scrolls sideways inside its own box where it has to */
.ab-rail{ outline: none; }
.ab-rail:focus-visible{ outline: 2px solid var(--ab-act); outline-offset: 4px; border-radius: 12px; }

/* --------------------------------------------------------------------------
   1 · WHAT WE DO — five services on one surface
   -------------------------------------------------------------------------- */
.ab-chain{
  background: var(--ab-surface); border-radius: 16px;
  padding: clamp(14px, 1.7vw, 24px);
}
.ab-svcs{ display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--ab-gap); row-gap: 0; }
.ab-svcs > li{ display: flex; min-width: 0; }
/* the whole card is the link: the platform mark and the arrow on one line,
   the service's name, and the one thing it does in the customer's path */
.ab-svc{
  flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0;
  background: #FFFFFF; border: 1px solid var(--ab-edge); border-radius: 12px;
  padding: 22px 22px 24px;
  transition: border-color .16s ease, background-color .16s ease;
}
.ab-svc-top{ display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ab-ico{ flex: none; width: 26px; height: 26px; display: grid; place-items: center; }
.ab-ico svg{ width: 24px; height: 24px; display: block; }
.ab-svc h3{
  margin-top: 20px;
  font-size: clamp(17.5px, calc(12px + .5vw), 19.5px); font-weight: 800;
  line-height: 1.2; letter-spacing: -.022em; color: var(--ab-ink);
}
.ab-svc p{ margin-top: 8px; font-size: 14.5px; line-height: 1.5; color: var(--ab-ink2); }
.ab-svc:hover{ border-color: #B9CCE8; }
.ab-svc:hover .ab-ar{ background: #DCE7F7; }
@media (min-width: 1181px){
  /* names that wrap to two lines do not push their line out of step */
  .ab-svcs{ grid-template-rows: repeat(3, auto); }
  .ab-svcs > li{ grid-row: span 3; display: grid; grid-template-rows: subgrid; }
  .ab-svc{ grid-row: span 3; display: grid; grid-template-rows: subgrid; row-gap: 0; }
  .ab-svc p{ align-self: start; }
}
.ab-svc:focus-visible{ outline: 2px solid var(--ab-act); outline-offset: 2px; }
.ab-measure{
  margin: 20px auto 2px; max-width: 46rem; text-align: center; text-wrap: balance;
  font-size: 15px; line-height: 1.55; color: var(--ab-ink2);
}

/* --------------------------------------------------------------------------
   2 · OUR STORY — the record
   -------------------------------------------------------------------------- */
/* one row per chapter — the year, the words, the recorded facts */
.ab-years{ display: flex; flex-direction: column; gap: 10px; }
.ab-yr{
  display: grid; grid-template-columns: clamp(150px, 15vw, 230px) minmax(0, 1fr) minmax(0, clamp(210px, 24vw, 340px));
  grid-template-areas: "n h dl" "n p dl"; grid-template-rows: auto 1fr;
  column-gap: clamp(24px, 3vw, 48px); min-width: 0;
  padding: clamp(20px, 2vw, 28px) clamp(20px, 2.4vw, 34px);
  background: #FFFFFF; border: 1px solid var(--ab-edge); border-radius: 12px;
}
.ab-yr-n{
  grid-area: n; align-self: start;
  font-size: clamp(25px, calc(14px + .95vw), 32px); font-weight: 800; line-height: 1;
  letter-spacing: -.035em; color: var(--ab-ink); font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ab-yr h3{
  grid-area: h; font-size: 17px; font-weight: 800; line-height: 1.25;
  letter-spacing: -.018em; color: var(--ab-ink);
}
.ab-yr-p{ grid-area: p; margin-top: 6px; max-width: 46rem; font-size: 15px; line-height: 1.55; color: var(--ab-ink2); }
.ab-yr-dl{ grid-area: dl; display: flex; flex-direction: column; gap: 10px; }
.ab-yr-dl dt{ font-size: 13px; font-weight: 600; color: var(--ab-mute); }
.ab-yr-dl dd{ margin-top: 2px; font-size: 14.5px; font-weight: 650; line-height: 1.38; color: var(--ab-ink); }


/* --------------------------------------------------------------------------
   3 · MARKETS
   -------------------------------------------------------------------------- */
.ab-mkts{ display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--ab-gap); }
.ab-mkt{
  display: flex; flex-direction: column; min-width: 0;
  padding: 22px 22px 20px; border-radius: 12px; background: var(--ab-ground);
}
.ab-mkt-h{ display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ab-mkt-h b{ font-size: 17.5px; font-weight: 800; line-height: 1.2; letter-spacing: -.02em; color: var(--ab-ink); }
.ab-mkt-h span{ flex: none; font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--ab-mute); }
.ab-mkt p + p{ margin-top: 8px; font-size: 14.5px; line-height: 1.5; color: var(--ab-ink2); }

.ab-ind{
  margin-top: var(--ab-gap);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  align-items: end; gap: 20px 40px;
  padding: clamp(20px, 2.1vw, 28px) clamp(20px, 2.4vw, 32px);
  background: var(--ab-surface); border-radius: 16px;
}
.ab-ind-g{ min-width: 0; align-self: start; }
.ab-ind h3{ font-size: 14px; font-weight: 750; letter-spacing: 0; line-height: 1.3; color: var(--ab-ink); }
.ab-ind p{ margin-top: 6px; font-size: 14.5px; line-height: 1.7; color: var(--ab-ink2); }
.ab-ind p span{ white-space: nowrap; }

/* --------------------------------------------------------------------------
   4 · TEAM
   -------------------------------------------------------------------------- */
.ab-team{
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--ab-gap); align-items: stretch;
}
.ab-lead{
  display: flex; flex-direction: column; overflow: hidden;
  background: #FFFFFF; border: 1px solid var(--ab-edge); border-radius: 16px;
}
.ab-people{ padding: 10px 0 14px; }
.ab-person{
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.3fr);
  gap: 8px 32px; align-items: start;
  padding: 20px 30px;
}
.ab-who{ min-width: 0; }
.ab-lvl{ font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--ab-mute); }
.ab-who h3{ margin-top: 3px; font-size: 18.5px; font-weight: 800; line-height: 1.2; letter-spacing: -.022em; color: var(--ab-ink); }
.ab-pos{ margin-top: 3px; font-size: 14.5px; font-weight: 600; line-height: 1.35; color: var(--ab-ink2); }
.ab-acc{ padding-top: 2px; font-size: 15px; line-height: 1.55; color: var(--ab-mute); }
.ab-foot-link{
  margin-top: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 56px; padding: 12px 30px;
  border-top: 1px solid var(--ab-hair);
  font-size: 15px; font-weight: 700; color: var(--ab-ink);
  transition: background-color .16s ease;
}
.ab-foot-link:hover{ background: var(--ab-ground); }
.ab-foot-link:hover .ab-ar{ background: #DCE7F7; }
.ab-foot-link:focus-visible{ outline: 2px solid var(--ab-act); outline-offset: -3px; }

.ab-staff{
  display: flex; flex-direction: column;
  padding: clamp(22px, 2.3vw, 32px) clamp(22px, 2.6vw, 34px);
  background: var(--ab-surface); border-radius: 16px;
}
.ab-staff-h{ font-size: 14px; font-weight: 750; letter-spacing: 0; line-height: 1.3; color: var(--ab-ink); }
.ab-staff-dl{ margin-top: 22px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.ab-staff-dl dt{ font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--ab-mute); }
.ab-staff-dl dd{
  margin-top: 6px;
  font-size: clamp(16.5px, calc(12px + .42vw), 19px); font-weight: 800; line-height: 1.28;
  letter-spacing: -.02em; color: var(--ab-ink); text-wrap: balance;
}
.ab-staff-note{ margin-top: auto; padding-top: 26px; font-size: 14.5px; line-height: 1.55; color: var(--ab-ink2); }

/* --------------------------------------------------------------------------
   5 · COMPANY
   -------------------------------------------------------------------------- */
.ab-co{
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  gap: var(--ab-gap); align-items: stretch;
}
.ab-shot{
  display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  background: #FFFFFF; border: 1px solid var(--ab-edge); border-radius: 16px;
}
/* the building, cropped in to the tower and its name; a touch of clarity
   against the haze of the original aerial */
.ab-shot-img{ position: relative; flex: 1 1 auto; min-height: 320px; overflow: hidden; background: var(--ab-tint); }
.ab-shot-img img{
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: 50% 40%;
  transform: scale(1.3); transform-origin: 52% 40%;
  filter: contrast(1.06) saturate(1.05);
}
.ab-shot figcaption{
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px;
  padding: 16px 24px 18px; border-top: 1px solid var(--ab-hair);
  font-size: 14.5px; line-height: 1.45; color: var(--ab-mute);
}
.ab-shot figcaption b{ font-size: 15px; font-weight: 750; color: var(--ab-ink); }
.ab-reg{
  display: flex; flex-direction: column; min-width: 0;
  padding: clamp(24px, 2.6vw, 36px) clamp(22px, 2.8vw, 38px);
  background: var(--ab-surface); border-radius: 16px;
}
.ab-reg-dl{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 28px; margin-bottom: 30px; }
.ab-reg-dl .is-wide{ grid-column: 1 / -1; }
.ab-reg-dl dt{ font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--ab-mute); }
.ab-reg-dl dd{ margin-top: 6px; font-size: 16.5px; font-weight: 700; line-height: 1.4; letter-spacing: -.01em; color: var(--ab-ink); }
.ab-reg-dl dd.is-mono{ font-family: var(--ab-mono); font-size: 15.5px; font-weight: 600; letter-spacing: .02em; }
.ab-reg .ab-plate{ margin-top: auto; }

/* ==========================================================================
   NARROWER SCREENS
   ========================================================================== */
@media (max-width: 1180px){
  /* services and markets: sideways rails, the next card cut by the edge */
  .ab-svcs, .ab-mkts{
    display: flex; gap: 14px;
    overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
    scroll-snap-type: x proximity; scrollbar-width: none; cursor: grab;
    -webkit-overflow-scrolling: touch;
  }
  .ab-svcs::-webkit-scrollbar, .ab-mkts::-webkit-scrollbar{ display: none; }
  .ab-svcs{ margin: 0 calc(-1 * clamp(14px, 1.7vw, 24px)); padding: 0 clamp(14px, 1.7vw, 24px); scroll-padding-inline: clamp(14px, 1.7vw, 24px); }
  .ab-svcs > li{ flex: 0 0 max(232px, 29%); scroll-snap-align: start; }
  .ab-mkt{ flex: 0 0 max(220px, 28%); scroll-snap-align: start; }

}
@media (max-width: 1000px){
  .ab-ind{ grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .ab-ind .ab-plate{ justify-self: start; }
  .ab-team, .ab-co{ grid-template-columns: minmax(0, 1fr); }
  .ab-staff-dl{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 24px; }
  .ab-shot-img{ flex: none; min-height: 0; aspect-ratio: 16 / 8; }
}

/* ==========================================================================
   PHONES (≤760px — where the site's header changes idiom)
   ========================================================================== */
@media (max-width: 760px){
  main.ab{ --ab-gap: 12px; }

  /* services: the rail runs edge to edge inside the surface */
  .ab-chain{ padding: 12px 0; border-radius: 14px; }
  .ab-svcs{ margin: 0; padding: 0 12px; gap: 10px; scroll-snap-type: x mandatory; scroll-padding-inline: 12px; }
  .ab-svcs::after{ content: ""; flex: 0 0 2px; }
  .ab-svcs > li{ flex: 0 0 78%; }
  .ab-svc{ padding: 18px 18px 20px; }
  .ab-svc h3{ margin-top: 16px; font-size: 17.5px; }
  .ab-svc p{ font-size: 14.5px; }
  .ab-measure{ margin: 14px 16px 4px; font-size: 14.5px; text-align: left; }

  /* the record: chapters as a rail of plates, cut by the screen edge */
  .ab-years{
    flex-direction: row; gap: 10px;
    margin: 0 calc(-1 * var(--site-gutter, 18px)); padding: 0 var(--site-gutter, 18px);
    overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--site-gutter, 18px);
    scrollbar-width: none; cursor: grab; -webkit-overflow-scrolling: touch;
  }
  .ab-years::-webkit-scrollbar{ display: none; }
  .ab-years::after{ content: ""; flex: 0 0 8px; }
  .ab-yr{
    flex: 0 0 80%; scroll-snap-align: start;
    display: flex; flex-direction: column; padding: 20px 18px 0; overflow: hidden;
  }
  .ab-yr-p{ max-width: none; }
  .ab-yr-n{ font-size: 25px; }
  .ab-yr h3{ margin-top: 12px; font-size: 16px; }
  .ab-yr-p{ margin-top: 6px; font-size: 14.5px; }
  .ab-yr-dl{
    margin: auto -18px 0; padding: 15px 18px 18px; gap: 9px; background: var(--ab-band);
  }
  .ab-yr-p + .ab-yr-dl{ margin-top: 18px; }
  .ab-yr-dl dd{ font-size: 14px; }

  /* markets: a rail of five, to the screen edge */
  .ab-mkts{
    gap: 10px; margin: 0 calc(-1 * var(--site-gutter, 18px)); padding: 0 var(--site-gutter, 18px);
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--site-gutter, 18px);
  }
  .ab-mkts::after{ content: ""; flex: 0 0 8px; }
  .ab-mkt{ flex: 0 0 64%; padding: 18px 18px 16px; }
  .ab-mkt-h b{ font-size: 16.5px; }
  .ab-mkt p + p{ margin-top: 6px; font-size: 14px; }
  .ab-ind{ padding: 18px; border-radius: 14px; gap: 16px; }
  .ab-ind h3{ font-size: 13.5px; }
  .ab-ind p{ font-size: 14px; line-height: 1.65; }
  .ab-ind .ab-plate{ justify-self: stretch; }

  /* team */
  .ab-lead{ border-radius: 14px; }
  .ab-people{ padding: 4px 0 8px; }
  .ab-person{ grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 16px 18px; }
  .ab-acc{ font-size: 14px; padding-top: 0; }
  .ab-who h3{ font-size: 17px; }
  .ab-pos{ font-size: 14px; }
  .ab-lvl{ font-size: 12.5px; }
  .ab-foot-link{ min-height: 52px; padding: 10px 18px; font-size: 14.5px; }
  .ab-staff{ padding: 18px; border-radius: 14px; }
  .ab-staff-h{ font-size: 13.5px; }
  .ab-staff-dl{ margin-top: 16px; gap: 18px 14px; }
  .ab-staff-dl dt{ font-size: 12.5px; }
  .ab-staff-dl dd{ margin-top: 4px; font-size: 15.5px; }
  .ab-staff-note{ padding-top: 18px; font-size: 14px; }

  /* company */
  .ab-shot{ border-radius: 14px; }
  .ab-shot-img{ aspect-ratio: 16 / 10; }
  .ab-shot figcaption{ padding: 13px 18px 14px; font-size: 14px; }
  .ab-shot figcaption b{ font-size: 14.5px; }
  .ab-reg{ padding: 20px 18px 18px; border-radius: 14px; }
  .ab-reg-dl{ gap: 18px 14px; margin-bottom: 22px; }
  .ab-reg-dl dt{ font-size: 12.5px; }
  .ab-reg-dl dd{ margin-top: 4px; font-size: 15px; }
  .ab-reg-dl dd.is-mono{ font-size: 14.5px; letter-spacing: 0; }
  .ab-reg .ab-plate{ align-self: stretch; }
}

/* small phones: the four standing rules one under another */
@media (max-width: 480px){
  .ab-staff-dl{ grid-template-columns: minmax(0, 1fr); gap: 14px; }
}

/* the narrowest phones: 320–359px */
@media (max-width: 359px){
  .ab-svcs > li{ flex-basis: 84%; }
  .ab-yr{ flex-basis: 86%; }
  .ab-mkt{ flex-basis: 72%; }
  .ab-reg-dl{ grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce){
  main.ab *{ transition: none !important; }
}

/* ==========================================================================
   6 · WHERE WE WORK  (#offices)                    added 2026-10-03, last
   Six places, each with its stated purpose and a plain answer on visiting
   (facts: /contact-us). Built from this page's own parts: white 12px cards
   with a #D3DEEE edge on the #E6EEFA surface, sentence-case labels, the one
   key. The registered office's photograph stays in On Record above; here the
   building is a thumbnail like the other five. Phones: a bounded rail, the
   next card cut by the edge (rails.js gives it drag and keys via .ab-rail).
   Undo: 
   ========================================================================== */
.ab-of{
  padding: clamp(16px, 1.6vw, 22px);
  background: var(--ab-surface); border-radius: 16px;
}
.ab-pls{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ab-gap); }
.ab-pl{
  display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 22px; align-items: center; min-width: 0;
  padding: 14px 24px 14px 14px;
  background: #FFFFFF; border: 1px solid var(--ab-edge); border-radius: 12px;
}
.ab-pl > img{
  display: block; width: 150px; height: 100%; min-height: 112px; max-height: 128px;
  object-fit: cover; border-radius: 8px; background: var(--ab-tint);
}
.ab-pl-b{ min-width: 0; }
.ab-pl-k{ font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--ab-mute); }
.ab-pl h3{ margin-top: 4px; font-size: 18px; font-weight: 800; line-height: 1.22; letter-spacing: -.022em; color: var(--ab-ink); }
.ab-pl h3 span{ display: block; margin-top: 2px; font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--ab-mute); }
.ab-pl-t{ margin-top: 8px; font-size: 14.5px; line-height: 1.5; color: var(--ab-ink2); }
.ab-pl-v{ display: flex; align-items: center; gap: 7px; margin-top: 10px; font-size: 13.5px; font-weight: 650; line-height: 1.25; color: var(--ab-ink); }
.ab-pl-v svg{ flex: none; width: 15px; height: 15px; fill: none; stroke: var(--ab-mute); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ab-of-foot{ display: flex; justify-content: flex-end; margin-top: var(--ab-gap); }

@media (max-width: 1000px){
  .ab-pl{ grid-template-columns: 112px minmax(0, 1fr); gap: 16px; padding: 12px 18px 12px 12px; }
  .ab-pl > img{ width: 112px; min-height: 96px; }
  .ab-pl h3{ font-size: 16.5px; }
}

@media (max-width: 760px){
  /* the six places: a rail inside the surface, the next card cut by its edge */
  .ab-of{ padding: 12px 0; border-radius: 14px; }
  .ab-pls{
    display: flex; gap: 10px; margin: 0; padding: 0 12px;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 12px; scrollbar-width: none;
  }
  .ab-pls::-webkit-scrollbar{ display: none; }
  .ab-pls::after{ content: ""; flex: 0 0 2px; }
  .ab-pl{
    flex: 0 0 78%; scroll-snap-align: start;
    display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 0; overflow: hidden;
  }
  .ab-pl > img{ width: 100%; height: auto; min-height: 0; max-height: none; aspect-ratio: 16 / 10; border-radius: 0; }
  .ab-pl-b{ padding: 14px 16px 16px; }
  .ab-pl h3{ font-size: 16.5px; }
  .ab-pl-t{ margin-top: 6px; font-size: 14px; }
  .ab-of-foot{ margin: 12px 12px 0; }
  .ab-of-foot .ab-plate{ flex: 1 1 auto; }
}
@media (max-width: 359px){
  .ab-pl{ flex-basis: 84%; }
}

/* ==========================================================================
   PRINT · the opening's card row (2026-10-05)
   The hero cards are links whose cue label (.cc-tx) is visually hidden; in
   Chrome's print layout those labels widen the page, which then prints
   shrunk to ~67%. The label adds nothing on paper, so it is not printed.
   ========================================================================== */
@media print{
  #overview.ih #q7 .cc-tx{ display: none; }
}