/* Home page (approved 2026-10-15): the proposals from REVIEW-HOME-2026-10-15.md.
 * Scoped to body.v2 (the home page) so nothing here reaches other pages. */

/* ---------- section titles: one step smaller on phones ---------- */
@media (max-width: 560px) {
  .v2 .section-title { font-size: clamp(1.6rem, 1.1rem + 2.6vw, 2.5rem); }
}

/* ---------- HERO ---------- */
/* the English headline sat close to the section titles: give the text column more
   of the row and let the line run wider before the container cap bites */
.v2 .hero-grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr); }
.v2 .hero h1 { font-size: min(var(--text-display), 10.5cqw, 5.6rem); }
[dir="rtl"] .v2 .hero h1 { font-size: min(var(--text-display), 13cqw, 5.6rem); }
.v2 .lede-short::after { content: " "; }
.v2 .hero-lede { margin-bottom: var(--space-lg); }
.v2-pdf { display: inline-flex; align-items: center; gap: 0.5em; min-height: 44px; margin-top: var(--space-sm);
  font-size: var(--text-sm); font-weight: 600; color: var(--color-accent); text-decoration: underline;
  text-underline-offset: 0.25em; text-decoration-thickness: 1px; }
.v2-pdf .muted { font-weight: 400; color: var(--color-ink-faint); text-decoration: none; }
.v2-pdf:hover { color: var(--color-ink); }
[data-theme="dark"] .v2-pdf { color: var(--brand-gold); }
.v2 .hero .fact-row { margin-top: var(--space-md); }

/* photo hero (option A, approved 2026-10-20): the field team full-bleed behind the copy.
   Faces sit in the upper half; the copy is anchored to the foot of the hero over a navy veil
   that is strongest at the bottom and on the text side. Same in light and dark theme. */
.v2 .hero--photo { align-items: end; background: var(--color-night); color: var(--color-on-night); }
.v2 .hero--photo::before { display: none; }                       /* no contour over a photo */
.v2 .hero-bg { position: absolute; inset: 0; z-index: -2; margin: 0; }
.v2 .hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
/* the eight fields are listed in the section right below; over the photo the short lede is enough */
.v2 .hero--photo .lede-more { display: none; }
.v2 .hero--photo::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(to top, oklch(17% 0.035 268 / .9) 0%, oklch(17% 0.035 268 / .74) 36%, oklch(17% 0.035 268 / 0) 64%),
    linear-gradient(to left, oklch(17% 0.035 268 / .42), transparent 58%); }
[dir="ltr"] .v2 .hero--photo::after { background:
    linear-gradient(to top, oklch(17% 0.035 268 / .9) 0%, oklch(17% 0.035 268 / .74) 36%, oklch(17% 0.035 268 / 0) 64%),
    linear-gradient(to right, oklch(17% 0.035 268 / .42), transparent 58%); }
.v2 .hero--photo .hero-grid { grid-template-columns: minmax(0, 1fr); }
.v2 .hero--photo .hero-grid > div:first-child { max-width: 46rem; }
.v2 .hero--photo .hero-eyebrow { color: var(--color-on-night-soft); }
.v2 .hero--photo h1 { color: var(--brand-gold); }                /* the whole company name in gold (Omar 2026-10-20) */
.v2 .hero--photo h1 .gold { color: var(--brand-gold); }
.v2 .hero--photo h1 .gold::after { display: none; }               /* the underline bar would be gold on gold */
.v2 .hero--photo .hero-lede { color: var(--color-on-night-soft); }
.v2 .hero--photo .btn-primary { background: var(--brand-gold); color: var(--color-on-gold, oklch(22% 0.03 268)); }
.v2 .hero--photo .btn-primary:hover { background: var(--brand-gold-deep); }
.v2 .hero--photo .btn-ghost { color: var(--color-on-night); border-color: oklch(96% 0.01 250 / .5); background: transparent; }
.v2 .hero--photo .btn-ghost:hover { border-color: var(--color-on-night); background: oklch(96% 0.01 250 / .08); }
.v2 .hero--photo .v2-pdf { color: var(--brand-gold); }
.v2 .hero--photo .v2-pdf .muted { color: var(--color-on-night-soft); }
.v2 .hero--photo .v2-pdf:hover { color: var(--color-on-night); }
.v2 .hero--photo .fact-row { border-top-color: oklch(96% 0.01 250 / .25); }
.v2 .hero--photo .fact .n { color: var(--brand-gold); }
.v2 .hero--photo .fact .l { color: var(--color-on-night-soft); }

/* transparent bar over the photo (is-over, set by main.js until the page scrolls).
   The bar turns solid again while a dropdown or the phone menu is open. The hero is
   pulled up under the sticky bar (88px desktop, 76px phones) and a navy shade at the
   top keeps the white menu readable on the bright sky. */
.v2 .hero--photo { margin-top: -88px; min-height: 100svh; }
@media (max-width: 600px) { .v2 .hero--photo { margin-top: -76px; } }
body.v2:not(:has(.mobile-menu.is-open)) .site-header.is-over:not(:has(.nav-item:hover, .nav-item:focus-within, .nav-item.is-open)) {
  background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom-color: transparent; box-shadow: none;
  --color-ink: var(--color-on-night); --color-ink-soft: oklch(96% 0.01 250 / .86); --color-accent: var(--brand-gold);
  --color-line-strong: oklch(96% 0.01 250 / .42); }
body.v2:not(:has(.mobile-menu.is-open)) .site-header.is-over:not(:has(.nav-item:hover, .nav-item:focus-within, .nav-item.is-open)) .logo-light { display: none; }
body.v2:not(:has(.mobile-menu.is-open)) .site-header.is-over:not(:has(.nav-item:hover, .nav-item:focus-within, .nav-item.is-open)) .logo-dark { display: block; }
body.v2:not(:has(.mobile-menu.is-open)) .site-header.is-over:not(:has(.nav-item:hover, .nav-item:focus-within, .nav-item.is-open)) .nav-cta-desktop {
  background: var(--brand-gold); color: var(--color-on-gold, oklch(22% 0.03 268)); }
/* centred copy (Omar 2026-10-20): the team stands symmetrically, so the copy is centred on the
   same axis and the veil rises evenly from the bottom (no side darkening) */
/* option D (Omar 2026-10-21): one even navy layer over the whole photo, a little deeper at the foot */
.v2 .hero--photo::after, [dir="ltr"] .v2 .hero--photo::after { background:
    linear-gradient(to top, oklch(17% 0.035 268 / .55) 0%, oklch(17% 0.035 268 / 0) 45%),
    oklch(22% 0.08 268 / .62); }
.v2 .hero--photo .hero-grid > div:first-child { width: 100%; margin-inline: auto; text-align: center; }
.v2 .hero--photo .hero-lede { margin-inline: auto; max-width: 40ch; }
.v2 .hero--photo .hero-cta { justify-content: center; }
.v2 .hero--photo .fact-row { justify-content: center; margin-inline: auto; }
.v2 .hero--photo .fact { align-items: center; padding-inline: var(--space-md); }

@media (max-width: 860px) {
  .v2 .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .v2 .hero h1 { font-size: min(13.5cqw, 4.2rem); }
  [dir="rtl"] .v2 .hero h1 { font-size: min(12cqw, 4.2rem); }
  /* phones: the photo becomes a band above the copy (the copy would cover every face),
     fading into the navy the copy sits on */
  .v2 .hero--photo { padding-top: 0; align-items: start; }
  .v2 .hero--photo::after { display: none; }
  .v2 .hero-bg { position: relative; inset: auto; z-index: 0; aspect-ratio: 1 / 1; margin-bottom: calc(-1 * var(--space-2xl)); }
  .v2 .hero-bg img { object-position: 50% 58%; }
  .v2 .hero-bg::after { content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to top, var(--color-night) 0%, oklch(17% 0.035 268 / 0) 40%),
      oklch(22% 0.08 268 / .62); }
  .v2 .hero--photo .hero-grid { position: relative; z-index: 1; }
  .v2 .lede-more { display: none; }
  .v2 .hero-cta { flex-wrap: nowrap; }
  .v2 .hero-cta .btn { flex: 0 1 auto; padding-inline: 1.05em; white-space: nowrap; }
  [data-page="home"].v2 .hero { min-height: 0; }
}
@media (max-width: 380px) { .v2 .hero-cta { flex-wrap: wrap; } }

/* ---------- HELP STRIP ---------- */
.v2-help { background: linear-gradient(120deg, var(--brand-blue-900), var(--brand-blue)); color: var(--color-on-night);
  box-shadow: inset 0 2px 0 var(--brand-gold); }                  /* gold rule between the photo hero and the strip */
.v2-help-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-sm) var(--space-xl); padding-block: var(--space-md); }
.v2-help-q { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); }
[dir="rtl"] .v2-help-q { font-family: var(--font-ar-display); }
.v2-help-acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-lg); }
.v2-help-a { display: inline-flex; align-items: center; gap: 0.5em; min-height: 44px; color: #fff;
  text-decoration: none; font-weight: 500; }
.v2-help-a svg { width: 18px; height: 18px; color: var(--brand-gold); flex: none; }
.v2-help-a:hover span { text-decoration: underline; text-underline-offset: 0.25em; }
.v2-help .btn { padding-block: 0.7em; }
@media (max-width: 760px) {
  /* phones get the sticky bar instead */
  .v2-help { display: none; }
}

/* ---------- CLIENTS BAND ---------- */
.v2-clients { background: var(--color-paper-2); border-block: 1px solid var(--color-line); padding-block: var(--space-lg); }
.v2-clients-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: var(--space-xs) var(--space-lg); margin-bottom: var(--space-md); }
.v2-mini-h { margin: 0; font-size: var(--text-sm); font-weight: 600; color: var(--color-ink-soft);
  font-family: var(--font-body, inherit); letter-spacing: 0; }
.v2-marquee.is-paused .logo-track { animation-play-state: paused; }
.v2-marquee { cursor: pointer; }
@media (max-width: 760px) {
  /* phones: a row you swipe, not a moving strip you have to chase */
  .v2-marquee { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; cursor: auto;
    -webkit-mask: none; mask: none; padding-inline: var(--gutter, 1rem); }
  .v2-marquee::-webkit-scrollbar { display: none; }
  .v2-marquee .logo-track { animation: none; gap: 10px; }
  .v2-marquee .logo-tile { width: 132px; scroll-snap-align: start; }
  .v2-marquee .logo-tile[aria-hidden="true"] { display: none; }
}

/* ---------- FIELDS ---------- */
@media (max-width: 560px) {
  /* shorter photos and two-line summaries keep eight cards near two screens */
  .v2 .fcard-img { aspect-ratio: 3 / 2; }
  .v2 .fcard p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
}

/* ---------- ACCREDITATIONS ---------- */
@media (max-width: 900px) {
  /* one compact list: the three groups share a single card */
  .v2 .acc-groups { gap: 0; background: var(--color-paper); border: 1px solid var(--color-line); border-radius: var(--radius-lg); overflow: hidden; }
  .v2 .acc-grp { border: 0; border-radius: 0; padding: var(--space-md) var(--space-md) var(--space-2xs); }
  .v2 .acc-grp + .acc-grp { border-top: 1px solid var(--color-line); }
  .v2 .acc-grp h3 { margin-bottom: var(--space-2xs); color: var(--color-accent); font-size: var(--text-xs); }
  [data-theme="dark"] .v2 .acc-grp h3 { color: var(--brand-gold); }
  .v2 .acc-item { padding: 0.55rem 0; }
  .v2 .acc-item b { font-size: var(--text-sm); }
  .v2 .acc-item span { font-size: var(--text-xs); }
}

/* ---------- CASES: three in view, the other three a tap away (desktop arrows, swipe on phones) ---------- */
.v2-cases-lede { margin-top: var(--space-sm); }
.v2-cases { --gap: var(--space-lg); display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 2 * var(--gap)) / 3);
  gap: var(--gap); margin-top: var(--space-xl); padding-block: 6px 4px; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; scrollbar-width: none; overscroll-behavior-x: contain; }
.v2-cases::-webkit-scrollbar { display: none; }
.v2-cases:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; border-radius: var(--radius-lg); }
.v2-cases > .case-card { scroll-snap-align: start; color: inherit; text-decoration: none; }
.v2-cases .case-body h3 { line-height: 1.32; }
[dir="rtl"] .v2-cases .case-body h3 { line-height: 1.25; }  /* one Arabic card-heading spacing site-wide */
.v2-cases .case-card:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.v2-cases .case-card:hover { transform: none; }
.v2-cases .case-card:hover h3 { color: var(--color-accent); }
[data-theme="dark"] .v2-cases .case-card:hover h3 { color: var(--brand-gold); }
.v2-cases-nav { display: flex; align-items: center; justify-content: center; gap: var(--space-md); margin-top: var(--space-md); }
.v2-cases-count { margin: 0; min-width: 5ch; text-align: center; font-size: var(--text-sm); color: var(--color-ink-faint); font-variant-numeric: tabular-nums; }
.v2-cases-count span { direction: ltr; unicode-bidi: isolate; }
.v2-cnav { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--color-line-strong); background: var(--color-paper); color: var(--color-ink);
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.v2-cnav svg { width: 20px; height: 20px; }
[dir="rtl"] .v2-cnav svg { transform: scaleX(-1); }
.v2-cnav:hover { border-color: var(--color-accent); color: var(--color-accent); }
[data-theme="dark"] .v2-cnav:hover { border-color: var(--brand-gold); color: var(--brand-gold); }
.v2-cnav:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
@media (max-width: 1080px) { .v2-cases { grid-auto-columns: calc((100% - var(--gap)) / 2); } }
@media (max-width: 640px) {
  .v2-cases { --gap: var(--space-sm); grid-auto-columns: 86%;
    margin-inline: calc(-1 * var(--gutter, 1rem)); padding-inline: var(--gutter, 1rem); scroll-padding-inline: var(--gutter, 1rem); }
  .v2-cases .case-body { padding: var(--space-md); }
}
@media (prefers-reduced-motion: reduce) { .v2-cases { scroll-behavior: auto; } }

/* ---------- GROUP: same split view, design fixes ---------- */
.v2 .grp-split { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 901px) { .v2 .grp-split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.v2 .grp-mother { border-radius: var(--radius-lg);
  background: linear-gradient(160deg, var(--brand-blue-700), var(--brand-blue-900)); }
.v2 .grp-kid { position: relative; overflow: hidden; border-top: 1px solid var(--color-line); }
/* a straight 3px rule like the field cards, in place of the curved 4px border */
.v2 .grp-kid::before { content: ""; position: absolute; inset: 0 var(--space-lg) auto; height: 3px; border-radius: 0 0 3px 3px; background: var(--accent-hi); }
/* logos sized by height: the trimmed files fill the plate instead of floating in it */
.v2 .grp-kplate img { max-width: 100%; height: 64px; width: auto; max-height: none; }
.v2 .grp-kid h3 a.v2-cardlink { color: inherit; text-decoration: none; }
.v2 .grp-kid h3 a.v2-cardlink:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 0.2em; }
[data-theme="dark"] .v2 .grp-krole,
[data-theme="dark"] .v2 .grp-kid h3 a.v2-cardlink:hover { color: var(--accent-hi); }
[data-theme="dark"] .v2 .grp-ksite { color: var(--color-ink); }
.v2-mlink { display: inline-flex; align-items: center; gap: 0.4em; min-height: 44px; margin-top: auto; padding-top: var(--space-sm);
  color: var(--brand-gold); font-weight: 600; text-decoration: none; }
.v2-mlink svg { width: 1em; height: 1em; }
[dir="rtl"] .v2-mlink svg { transform: scaleX(-1); }
.v2-mlink:hover span { text-decoration: underline; text-underline-offset: 0.25em; }
@media (max-width: 560px) {
  .v2 .grp-mplate { display: none; }
  .v2 .grp-mrole { margin-top: 0; }
  .v2 .grp-mother { padding: var(--space-lg); }
  .v2 .grp-mother p { font-size: var(--text-sm); }
  /* four companies as a 2x2 grid, logo on top */
  .v2 .grp-kids { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xs); }
  .v2 .grp-kid { display: flex; flex-direction: column; gap: 0.3rem; padding: var(--space-sm); }
  .v2 .grp-kplate { height: 56px; padding: 6px; }
  .v2 .grp-kplate img { height: 42px; }
  .v2 .grp-kplate svg { width: 34px; height: 34px; }
  .v2 .grp-kid p { display: none; }
  .v2 .grp-kid h3 { font-size: var(--text-sm); }
  .v2 .grp-krole { font-size: 0.72rem; line-height: 1.4; margin-top: 0.15rem; }
  .v2 .grp-ksite { min-height: 36px; font-size: var(--text-xs); overflow-wrap: anywhere; }
}

/* ---------- CONTACT ---------- */
.v2-lines { margin-top: var(--space-md); }
.v2-lines .copy-pair { display: flex; align-items: center; gap: var(--space-xs); }
.v2-lines .copy-pair > .contact-line { flex: 1; }
/* the copy helper's `.copy-pair > a { display: inline }` beat these links' flex, which put the icon above the text */
.v2-lines .copy-pair > a.contact-line { display: flex; }
.v2-help .copy-pair > a.v2-help-a { display: inline-flex; }
[dir="rtl"] .v2-lines .contact-line .val[dir="ltr"] { text-align: right; }
.v2-lines .contact-line { color: inherit; text-decoration: none; min-height: 44px; }
.v2-lines .contact-line:hover .val { color: var(--color-accent); }
[data-theme="dark"] .v2-lines .contact-line:hover .val { color: var(--brand-gold); }
.v2-lines .contact-line > span { display: flex; flex-direction: column; }
@media (max-width: 620px) {
  .v2 .contact-card { padding: var(--space-md); }
}

/* ---------- PHONES: sticky contact bar ---------- */
.v2-mbar { display: none; }
/* main.js puts a copy helper beside every tel:/mailto: link; the bar and strip are actions, not text */
.v2-mbar .copy-pair, .v2-help .copy-pair { display: contents; }
.v2-mbar .copy-btn, .v2-help .copy-btn { display: none; }
@media (max-width: 760px) {
  .v2-mbar { position: fixed; z-index: 60; inset-inline: 0; bottom: 0; display: grid; grid-template-columns: 1fr 1fr 1.6fr;
    gap: 6px; padding: 8px max(10px, env(safe-area-inset-left)) calc(8px + env(safe-area-inset-bottom));
    background: color-mix(in oklab, var(--color-paper) 92%, transparent); backdrop-filter: blur(10px);
    border-top: 1px solid var(--color-line); transition: transform var(--dur-mid) var(--ease-out); }
  .v2-mbar.is-hidden { transform: translateY(110%); }
  .v2-mbar a { display: flex; align-items: center; justify-content: center; gap: 0.4em; min-height: 46px; border-radius: var(--radius-md);
    border: 1px solid var(--color-line-strong); color: var(--color-ink); text-decoration: none; font-weight: 600; font-size: var(--text-sm); }
  .v2-mbar a svg { width: 18px; height: 18px; color: var(--color-accent); }
  .v2-mbar a.go { background: var(--brand-blue); border-color: var(--brand-blue); color: #fff; }
  [data-theme="dark"] .v2-mbar a svg { color: var(--brand-gold); }
  [data-theme="dark"] .v2-mbar a.go { background: var(--brand-gold); border-color: var(--brand-gold); color: oklch(22% 0.03 268); }
  body.v2 { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  .v2 .fab-stack { bottom: calc(76px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) { .v2-mbar { transition: none; } }

/* ---------- GROUP as a tree (approved 2026-10-15: option A, white parent) ----------
   The parent sits on top; a stem, a bar across the four centres and a drop into
   each company card draw the structure. Phones: a spine down the start side. */
.v2 .grp-tree { margin-top: var(--space-xl); }
.v2 .grp-tree .grp-mother { position: relative; max-width: 620px; margin-inline: auto; align-items: center; text-align: center;
  color: var(--color-ink); background: var(--color-paper); border: 1px solid var(--color-line); border-radius: var(--radius-lg);
  padding: var(--space-xl); box-shadow: var(--shadow-sm); }
.v2 .grp-tree .grp-mother::before { content: ""; position: absolute; inset: 0 var(--space-xl) auto; height: 4px; border-radius: 0 0 4px 4px; background: var(--brand-blue); }
.v2 .grp-tree .grp-mplate { width: 240px; height: 84px; padding: 4px 8px; background: none; }
.v2 .grp-tree .grp-mplate img { max-height: 76px; }
.v2 .grp-tree .grp-mrole { color: var(--color-accent); margin-top: var(--space-2xs); }
.v2 .grp-tree .grp-mother h3 { color: var(--color-ink); }
.v2 .grp-tree .grp-mother p { color: var(--color-ink-soft); max-width: 52ch; }
.v2 .grp-tree .v2-mlink { color: var(--color-accent); margin-top: var(--space-2xs); padding-top: 0; }
[data-theme="dark"] .v2 .grp-tree .grp-mother::before { background: var(--brand-gold); }
[data-theme="dark"] .v2 .grp-tree .grp-mplate { background: #fff; border-radius: var(--radius-md); padding: 10px 18px; }
[data-theme="dark"] .v2 .grp-tree :is(.grp-mrole, .v2-mlink) { color: var(--brand-gold); }

.v2 .grp-tree .grp-kids { position: relative; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-md); margin-top: 72px; }
.v2 .grp-tree .grp-kids::before { content: ""; position: absolute; top: -72px; inset-inline-start: calc(50% - 1px); width: 2px; height: 36px; background: var(--color-line-strong); }
.v2 .grp-tree .grp-kids::after { content: ""; position: absolute; top: -36px; height: 2px; background: var(--color-line-strong);
  inset-inline: calc((100% - 3 * var(--space-md)) / 8); }
.v2 .grp-tree .grp-kid { overflow: visible; }
.v2 .grp-tree .grp-kid::after { content: ""; position: absolute; top: -37px; inset-inline-start: calc(50% - 1px); width: 2px; height: 37px; background: var(--accent-hi); }

@media (max-width: 1000px) {
  .v2 .grp-tree .grp-mother { max-width: none; align-items: flex-start; text-align: start; padding: var(--space-lg); }
  .v2 .grp-tree .grp-mother::before { inset-inline: var(--space-lg); }
  .v2 .grp-tree .grp-kids { grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); margin-top: var(--space-lg); padding-inline-start: 28px; }
  .v2 .grp-tree .grp-kids::before { top: calc(-1 * var(--space-lg)); bottom: 38px; height: auto; inset-inline-start: 8px; }
  .v2 .grp-tree .grp-kids::after { display: none; }
  .v2 .grp-tree .grp-kid { display: grid; grid-template-columns: 88px minmax(0, 1fr); column-gap: var(--space-md); row-gap: 0.15rem; align-items: start; padding: var(--space-md); }
  .v2 .grp-tree .grp-kid::after { top: 38px; inset-inline-start: -20px; width: 20px; height: 2px; }
  .v2 .grp-tree .grp-kplate { grid-row: span 4; height: 68px; padding: 6px; }
  .v2 .grp-tree .grp-kplate img { height: 52px; }
}
@media (max-width: 560px) {
  .v2 .grp-tree .grp-kid { grid-template-columns: 72px minmax(0, 1fr); column-gap: var(--space-sm); padding: var(--space-sm); }
  .v2 .grp-tree .grp-kplate { height: 60px; }
  .v2 .grp-tree .grp-kplate img { height: 44px; }
  .v2 .grp-tree .grp-kid h3 { font-size: var(--text-base); }
  .v2 .grp-tree .grp-krole { font-size: var(--text-xs); }
}
/* dark mode: the subsidiary logos are opaque white JPEG-style art, so their plate is
   pure white too — the grey plate (#eef0f4) showed a white box behind each logo */
[data-theme="dark"] .v2 .grp-kplate { background: #fff; border-color: transparent; }

/* the parent runs the full width of the four companies: logo, text and link side
   by side, so the box is about half as tall and reads as the trunk over the branches */
@media (min-width: 1001px) {
  .v2 .grp-tree .grp-mother { max-width: none; display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: auto auto auto; column-gap: var(--space-xl); row-gap: 0.3rem; align-items: center; text-align: start;
    padding: var(--space-lg) var(--space-xl); }
  .v2 .grp-tree .grp-mplate { grid-row: 1 / -1; width: 220px; height: 80px; }
  .v2 .grp-tree .grp-mrole { margin: 0; align-self: end; }
  .v2 .grp-tree .grp-mother h3 { margin: 0; }
  .v2 .grp-tree .grp-mother p { max-width: 70ch; align-self: start; }
  .v2 .grp-tree .v2-mlink { grid-column: 3; grid-row: 1 / -1; margin: 0; white-space: nowrap; }
}