/* =========================================================
   The site design (built on the shared basics in styles.css).
   Rules are scoped to html[data-template="B"], which index.html always sets.
   ========================================================= */

[data-template="B"] {
  --radius: 14px;
  --spring: cubic-bezier(.34, 1.56, .64, 1);

  /* Colours: design H's palette, used across the whole site */
  --h-night: #061430;
  --h-navy: #0a1d40;
  --h-navy-2: #10285a;
  --h-brand: #072959;
  --h-gold: #c9a45c;
  --h-gold-2: #e4c98f;
  --h-gold-soft: var(--h-gold-2);
  --h-gold-deep: #94701f;
  --h-ivory: #fefefe;
  --h-pearl: #f5f1ea;
  --h-ink: #0b1530;
  --h-mute: #69708a;

  /* the shared theme tokens, mapped onto it */
  --navy-950: var(--h-night);
  --navy-900: var(--h-navy);
  --navy-800: var(--h-navy-2);
  --navy-700: var(--h-brand);
  --gold-200: var(--h-gold-2);
  --gold-300: var(--h-gold-2);
  --gold-400: var(--h-gold);
  --gold-500: var(--h-gold);
  --gold-600: var(--h-gold-deep);
  --gold-700: var(--h-gold-deep);
  --gold-grad: linear-gradient(120deg, var(--h-gold-2) 0%, var(--h-gold) 45%, var(--h-gold-deep) 75%, var(--h-gold-2) 100%);
  --paper: var(--h-pearl);
  --paper-2: var(--h-pearl);
  --ink: var(--h-ink);
  --ink-soft: var(--h-mute);
  --ink-faint: rgba(11, 21, 48, .45);
  --line-ink: rgba(11, 21, 48, .12);
  --text: var(--h-pearl);
  --text-dim: rgba(245, 241, 234, .72);
  --text-faint: rgba(245, 241, 234, .45);
  --line-soft: rgba(245, 241, 234, .14);
}
/* As in H: headings on light sections in brand blue, labels on dark sections in gold */
[data-template="B"] .display { color: var(--h-brand); }
[data-template="B"] [data-dark] .display { color: var(--text); }
[data-template="B"] .eyebrow--light { color: var(--h-gold); }
/* The brands section sits on H's ivory */
[data-template="B"] .brands { background-color: var(--h-ivory); }

/* ---------- Buttons: soft-square with an arrow block ---------- */
[data-template="B"] .btn { border-radius: 10px; letter-spacing: .1em; }
[data-template="B"] .btn--gold {
  background: var(--gold-500);
  background-size: auto;
  box-shadow: 0 12px 28px -14px rgba(201, 164, 92, .9);
}
[data-template="B"] .btn--gold:hover { background: var(--gold-400); }
[data-template="B"] .btn--gold svg,
[data-template="B"] .btn--ink svg {
  box-sizing: content-box;
  padding: 7px;
  margin-right: -16px;
  border-radius: 7px;
  background: rgba(6, 20, 48, .14);
}
[data-template="B"] .btn--ink svg { background: rgba(255, 255, 255, .14); }
[data-template="B"] .btn--glass { border-color: rgba(228, 201, 143, .6); background: rgba(6, 20, 48, .3); }

/* ---------- Section labels: pill badges instead of a rule ---------- */
[data-template="B"] .eyebrow {
  gap: 10px;
  padding: 8px 14px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: .64rem;
  letter-spacing: .24em;
}
[data-template="B"] .eyebrow__line { width: 6px; height: 6px; border-radius: 50%; transform: none !important; }
[data-template="B"] .eyebrow__line--r { display: none; }

/* ---------- Header: links grouped in a capsule ---------- */
[data-template="B"] .nav__inner { gap: 24px; }
[data-template="B"] .nav__links {
  gap: 2px;
  padding: 5px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 999px;
  background: rgba(6, 20, 48, .28);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: background-color .4s, border-color .4s;
}
[data-template="B"] .nav__links a { padding: 8px 16px; border-radius: 999px; opacity: .88; transition: background-color .3s, color .3s, opacity .3s; }
[data-template="B"] .nav__links a::after { display: none; }
[data-template="B"] .nav__links a:hover { background: rgba(255, 255, 255, .12); opacity: 1; }
[data-template="B"] .nav__links a.is-active { background: var(--gold-500); color: var(--navy-950); opacity: 1; }
[data-template="B"] .nav.is-scrolled .nav__links { border-color: var(--line-ink); background: var(--paper-2); }
[data-template="B"] .nav.is-scrolled .nav__links a:hover { background: rgba(11, 21, 48, .06); }

/* ---------- Hero: left-aligned ---------- */
[data-template="B"] .gate__center { align-items: flex-start; text-align: left; }
[data-template="B"] .gate__emblem { width: clamp(64px, 5vw, 78px); margin-bottom: 22px; }
[data-template="B"] .gate__title { max-width: 13ch; font-size: clamp(2.6rem, min(6.8vw, 10.5vh), 6.8rem); } /* scales with the screen's height too, so short laptop screens keep the buttons in view */
/* The hero grows to fit its content rather than cutting it off on short screens */
[data-template="B"] .gate { height: auto; min-height: 100vh; min-height: 100svh; }
@media (max-height: 720px) and (min-width: 701px) {
  [data-template="B"] .gate__emblem { display: none; } /* the logo is already in the header */
  [data-template="B"] .gate__eyebrow { margin-bottom: 16px; }
  [data-template="B"] .gate__title { margin-bottom: 18px; }
  [data-template="B"] .gate__lead { margin-bottom: 26px; }
}
[data-template="B"] .gate__lead { margin-left: 0; max-width: 48ch; }
[data-template="B"] .gate__actions { justify-content: flex-start; }
[data-template="B"] .gate__shade {
  background:
    linear-gradient(90deg, rgba(6, 20, 48, .9) 0%, rgba(6, 20, 48, .62) 42%, rgba(6, 20, 48, .12) 78%),
    linear-gradient(0deg, rgba(6, 20, 48, .9) 0%, rgba(6, 20, 48, 0) 42%),
    linear-gradient(180deg, rgba(6, 20, 48, .6) 0%, rgba(6, 20, 48, 0) 22%);
}

/* ---------- Businesses: "Our houses" (as in design H) ----------
   A navy section; four large cards slide from right to left while the page
   scrolls (the stage holds in place meanwhile). The counter and line track
   progress and each photo drifts gently inside its card (js/template-b.js).
   The vehicles stay still. Without JS, or with reduced motion, the cards sit in
   a normal sideways-swipe row. */
[data-template="B"] .biz { background-color: var(--h-navy); color: var(--h-pearl); }

.houses { position: relative; }
.houses__stage { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(22px, 4.4vh, 36px); } /* (the column keeps the long card row from widening the page) */
.houses.is-pinned .houses__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  align-content: center;
}
.houses__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.houses__eyebrow {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 14px;
  font: 600 .68rem/1.5 var(--sans);
  letter-spacing: .36em;
  text-transform: uppercase;
  color: var(--h-gold);
}
.houses__eyebrow::before { content: ""; width: 32px; height: 1px; background: currentColor; }
.houses__title { margin: 0; font: 300 clamp(2.3rem, 4.5vw, 4.4rem)/1 var(--serif); letter-spacing: -.012em; color: var(--h-pearl); }
.houses__title em { font-style: italic; color: var(--h-gold-soft); }
.houses__count { display: flex; align-items: baseline; gap: 10px; flex: none; margin: 0 0 6px; }
.houses__count b { font: 300 1.9rem/1.2 var(--serif); color: var(--h-gold-soft); font-variant-numeric: lining-nums tabular-nums; }
.houses__count span { font: 400 .7rem/1 var(--sans); letter-spacing: .24em; color: rgba(245, 241, 234, .6); }
.houses__count i { position: relative; align-self: center; width: clamp(60px, 8vw, 110px); height: 1px; margin-left: 12px; background: rgba(245, 241, 234, .15); }
.houses__count i span { position: absolute; inset: 0; background: var(--h-gold); transform: scaleX(0); transform-origin: left; }

.houses__window { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; }
.houses__window::-webkit-scrollbar { display: none; }
.houses.is-pinned .houses__window { overflow: clip; scroll-snap-type: none; }
.houses__rail {
  --card-w: min(64vw, 980px);
  --card-h: clamp(380px, calc(100svh - 280px), 620px); /* always fits under the heading */
  display: flex;
  gap: 28px;
  width: max-content;
  padding-inline: max(var(--gutter), calc((100vw - 1360px) / 2 + var(--gutter)));
  padding-block: 2px;
  will-change: transform;
}

.house {
  position: relative;
  flex: 0 0 var(--card-w);
  display: grid;
  grid-template-columns: 48% 52%;
  height: var(--card-h);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 30px;
  background: var(--h-night);
  color: var(--h-pearl);
  scroll-snap-align: center;
}
.house__photo { position: relative; margin: 0; overflow: hidden; }
.house__photo img { /* a little wider than its frame, so it can drift as the card passes */
  position: absolute;
  top: 0;
  left: -8%;
  width: 116%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  translate: var(--px, 0) 0;
}
.house__num { /* a large outlined numeral over the photo */
  position: absolute;
  top: 18px;
  left: 28px;
  z-index: 1;
  font: 300 clamp(4.4rem, 9vw, 7.7rem)/1 var(--serif);
  letter-spacing: -.012em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(228, 201, 143, .7);
  font-variant-numeric: lining-nums;
}
.house__body {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: clamp(26px, 4.6vh, 44px) clamp(24px, 2.7vw, 40px) 0;
  background: radial-gradient(110% 80% at 25% 0%, #19316a 0%, #11265a 40%, #0b1c44 100%);
}
.house__since {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 14px;
  font: 600 .68rem/1.5 var(--sans);
  letter-spacing: .36em;
  text-transform: uppercase;
  color: var(--h-gold);
}
.house__since::before { content: ""; width: 32px; height: 1px; background: currentColor; }
.house__body h3 { margin: 0 0 12px; font: 300 clamp(2rem, 3.6vw, 3.2rem)/1 var(--serif); letter-spacing: -.012em; color: var(--h-pearl); }
.house__text { margin: 0; font-size: .94rem; line-height: 1.62; color: rgba(245, 241, 234, .7); }

/* The cut-out at the foot of the card: it takes whatever room is left under the
   text and scales to fit it, standing on a thin gold floor line with a soft glow. */
.house__model {
  position: relative;
  flex: 1 1 0;
  min-height: 64px;
  margin: 14px calc(clamp(24px, 2.7vw, 40px) * -1) 0;
  padding-bottom: clamp(26px, 4.6vh, 40px);
  display: grid;
  place-items: end center;
  container-type: size;
}
.house__model::before { /* the floor line */
  content: "";
  position: absolute;
  left: clamp(24px, 2.7vw, 40px);
  right: clamp(24px, 2.7vw, 40px);
  bottom: clamp(26px, 4.6vh, 40px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201, 164, 92, .55) 20%, rgba(201, 164, 92, .55) 80%, transparent);
}
.house__model::after { /* the glow under it */
  content: "";
  position: absolute;
  left: 15%;
  right: 15%;
  bottom: 0;
  height: clamp(26px, 4.6vh, 40px);
  background: radial-gradient(50% 100% at 50% 0%, rgba(201, 164, 92, .16), transparent);
  pointer-events: none;
}
.house__vehicle {
  position: relative;
  width: min(var(--fit, 78cqw), calc((100cqh - clamp(26px, 4.6vh, 40px)) * var(--mw) / var(--mh)));
  aspect-ratio: var(--mw) / var(--mh);
}
.house__model--bike { --fit: 46cqw; }
.house__model--car { --fit: 74cqw; }
.house__model--truck { --fit: 68cqw; }
.house__body-img { display: block; width: 100%; height: auto; }
.house__wheel { position: absolute; height: auto; }
.house__model--tile {
  flex: 0 0 auto;
  container-type: normal;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(24px, 3vw, 44px);
  width: auto;
  min-height: clamp(96px, 16vh, 140px);
  margin: auto 0 clamp(26px, 4.6vh, 40px);
  padding: 20px 26px;
  border-radius: 18px;
  background: var(--h-pearl);
  box-shadow: 0 30px 50px -30px rgba(0, 0, 0, .7);
}
.house__model--tile::before, .house__model--tile::after { display: none; }
.house__model--tile { min-width: 0; max-width: 100%; }
/* The appliance lineup on the tile (as in design H): products stand on the tile's
   base, each sized to its real height relative to the refrigerator (--h). */
.house__model--lineup {
  align-items: flex-end;
  gap: clamp(10px, 1.6vw, 22px);
  height: clamp(118px, 19vh, 176px);
  padding: 14px 22px 12px;
}
.house__model.house__model--lineup img { width: auto; max-width: none; height: calc(var(--h) * 100%); object-fit: contain; }
.house__model--tile img { width: auto; max-width: 40%; height: clamp(26px, 3.6vh, 38px); object-fit: contain; } /* the logos shrink to fit a narrow card */

/* ---------- Brands: a clean row of full-colour logos ----------
   Presented the way large companies show the brands they work with: a
   centred heading, one line of text, then each brand's own logo in its own
   colours. Logos still open the brand details drawer. The filter tabs and
   card text are Template A only (the brand name stays for screen readers). */
[data-template="B"] .brands__head {
  display: block;
  max-width: 880px;
  margin: 0 auto clamp(44px, 5vw, 68px);
  text-align: center;
}
[data-template="B"] .brands__head .eyebrow { display: none; }
[data-template="B"] .brands__sub {
  margin: 18px 0 0;
  font: 500 clamp(.92rem, 1.1vw, 1.02rem)/1.5 var(--sans);
  color: var(--ink-soft);
}
[data-template="B"] .brand-filter { display: none; }

/* Rows of up to six logos; a shorter last row stays centred */
[data-template="B"] .brand-grid {
  --cols: 6;
  --gx: clamp(16px, 2.4vw, 36px);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(26px, 3.2vw, 46px) var(--gx);
  max-width: 1120px;
  margin: 0 auto;
  border: 0;
}
[data-template="B"] .brand-item { flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gx)) / var(--cols)); border: 0; }
/* The filter is hidden in B, so every brand always shows */
[data-template="B"] .brand-item[hidden] { display: block; }
[data-template="B"] .brand-item.is-out { opacity: 1; scale: 1; }

[data-template="B"] .brand {
  display: grid;
  place-items: center;
  height: 100%;
  min-height: 84px;
  padding: 10px 4px;
  overflow: visible;
  border-radius: 12px;
}
[data-template="B"] .brand::before { display: none; }
[data-template="B"] .brand__top,
[data-template="B"] .brand__line,
[data-template="B"] .brand__cta { display: none; }
[data-template="B"] .brand__name {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.brand__logo { display: none; }
[data-template="B"] .brand__logo { display: block; max-width: 100%; line-height: 0; }
[data-template="B"] .brand__logo img {
  width: auto;
  height: var(--logo-h, 28px);
  max-width: 100%;
  object-fit: contain;
  transition: transform .6s var(--spring);
}
[data-template="B"] .brand:hover .brand__logo img,
[data-template="B"] .brand:focus-visible .brand__logo img { transform: scale(1.08); }
[data-template="B"] .brand:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 2px; }
/* A brand added without a logo file shows its name instead */
[data-template="B"] .brand__wordmark { display: inline-block; font: 500 calc(var(--logo-h, 28px) * .8)/var(--logo-h, 28px) var(--serif); color: var(--h-brand); white-space: nowrap; }

/* ---------- Leadership: the family by generation (as in design H) ----------
   A static row. Each generation has a small marker, its label and a line in
   italics; under it, a framed portrait per person with their role, name and
   story. The two second-generation leaders share one heading. Until a photo
   file exists a frame shows the person's initials; the photo fades in once it
   loads (js/template-b.js). Template A keeps its list. */
[data-template="B"] .leaders__grid { grid-template-columns: minmax(0, 1fr); gap: clamp(48px, 6.4vw, 92px); }
[data-template="B"] .leaders__intro {
  position: static;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  column-gap: clamp(32px, 6vw, 110px);
  align-items: end;
}
[data-template="B"] .leaders__intro .eyebrow { grid-column: 1; justify-self: start; }
[data-template="B"] .leaders__intro .display { grid-column: 1; margin: 0; }
[data-template="B"] .leaders__intro .lead { grid-column: 2; grid-row: 1 / span 2; align-self: end; max-width: 44ch; margin: 0 0 .6em; font-size: 1rem; line-height: 1.65; }

/* Shared portrait frame: initials underneath, the photo on top once it has loaded */
.portrait { position: relative; margin: 0; overflow: hidden; }
.portrait__mono {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font: 500 clamp(3rem, 6vw, 5.4rem)/1 var(--serif);
  letter-spacing: .08em;
  color: rgba(228, 201, 143, .32);
}
.portrait img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
  opacity: 0;
  transition: opacity .8s var(--ease-out);
}
.portrait img.is-loaded { opacity: 1; }

.gens {
  --gap: clamp(16px, 2.2vw, 32px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)); /* one column per person */
  gap: 56px var(--gap);
  align-items: start;
}
.gen { min-width: 0; }
.gen--pair { grid-column: span 2; }
.gen__head { margin-bottom: clamp(22px, 2.4vw, 32px); }
.gen__dot { display: block; width: 14px; height: 14px; margin-bottom: 18px; border: 1.5px solid var(--gold-500); border-radius: 50%; }
.gen__label { margin: 0 0 4px; font: 600 .625rem/1.5 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--ink-soft); }
.gen__sub { margin: 0; font: italic 400 1.6rem/1.45 var(--serif); letter-spacing: -.012em; color: var(--gold-700); }
.gen__people { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); margin: 0; padding: 0; list-style: none; }
.gen--pair .gen__people { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.leader { min-width: 0; }
.leader__frame { /* a square-cornered 4:5 frame with a fine gold line inside */
  aspect-ratio: 4 / 5;
  border-radius: 0;
  background: radial-gradient(85% 55% at 50% 30%, var(--h-navy-2) 0%, rgba(16, 40, 90, 0) 72%), var(--h-brand);
  box-shadow: 0 0 0 1px var(--line-ink), 0 34px 50px -40px rgba(11, 21, 48, .55); /* keeps the frame's edge visible on pale photos */
  isolation: isolate;
}
.leader__frame::after {
  content: "";
  position: absolute;
  inset: 10px;
  z-index: 2;
  border: 1px solid rgba(228, 201, 143, .5);
  border-radius: inherit;
  pointer-events: none;
}
.leader__frame .portrait__mono { font: italic 400 clamp(2.8rem, 5.4vw, 5rem)/1 var(--serif); letter-spacing: -.01em; color: #e4c98f; }
.leader--founder .portrait img { filter: grayscale(1) contrast(1.05); } /* a classic black-and-white tribute */
/* "Demo photo" tag while a stand-in photo is showing */
.leader__demo {
  position: absolute;
  left: 50%;
  bottom: 22px;
  z-index: 3;
  display: none;
  translate: -50% 0;
  padding: 6px 10px;
  border: 1px solid rgba(228, 201, 143, .45);
  border-radius: 999px;
  background: rgba(6, 20, 48, .6);
  font: 600 .56rem/1 var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--gold-300);
  pointer-events: none;
}
.leader.is-demo .leader__demo { display: block; }
.leader__role { margin: 22px 0 8px; font: 600 .625rem/1.5 var(--sans); letter-spacing: .28em; text-transform: uppercase; color: var(--gold-700); }
.leader__name { margin: 0 0 12px; font: 400 clamp(1.4rem, 2vw, 1.8rem)/1.22 var(--serif); letter-spacing: -.012em; text-wrap: balance; color: var(--ink); }
.leader__text { margin: 0; font-size: .875rem; line-height: 1.62; text-wrap: pretty; color: var(--ink-soft); }


/* ---------- Loading screen: the emblem ----------
   A gold ring draws itself, the white logo disc and the circular lettering
   appear with a glint sweeping round, and the motto "Building trust · Driving excellence" follows
   word by word. When the page is ready the disc fades and the ring opens like
   an iris to reveal it. The sequence runs on CSS from the first paint;
   js/main.js only decides when it leaves (after about 3.8s).
   Entry animations sit on inner elements; the exit fades sit on their wrappers. */
.emblem {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: clamp(26px, 5vh, 46px);
  isolation: isolate;
}
.emblem::before { /* the navy backdrop */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(70% 70% at 50% 45%, #12336f 0%, #0a1f47 42%, #061430 100%);
  transition: opacity .8s var(--ease-out) .45s;
}
.emblem__seal { position: relative; width: min(62vmin, 380px); aspect-ratio: 1; }
.emblem__ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  transition: transform 1s cubic-bezier(.7, 0, .2, 1) .25s, opacity .55s ease .7s;
}
.emblem__outer {
  fill: none;
  stroke: #d9b25c;
  stroke-width: 1.4;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transform: rotate(-90deg);
  transform-origin: 200px 200px;
  animation: emblemDraw 1.4s cubic-bezier(.65, 0, .35, 1) .15s forwards;
}
.emblem__marks { transition: opacity .4s ease; }
.emblem__inner { fill: none; stroke: rgba(201, 164, 92, .35); stroke-width: .8; opacity: 0; animation: emblemFade .8s ease .9s forwards; }
.emblem__text {
  fill: rgba(239, 215, 160, .85);
  font: 600 11.5px/1 var(--sans);
  opacity: 0;
  transform-origin: 200px 200px;
  animation: emblemText 1.1s cubic-bezier(.2, .8, .2, 1) 1.55s forwards;
}
.emblem__glint { /* a bright arc travelling round the ring */
  fill: none;
  stroke: #fff4d6;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-dasharray: 7 93;
  opacity: 0;
  filter: drop-shadow(0 0 5px rgba(255, 214, 140, .95));
  transform: rotate(-90deg);
  transform-origin: 200px 200px;
  animation: emblemFade .6s ease 1.7s forwards, emblemGlint 2.6s linear 1.7s infinite;
}
.emblem__core { position: absolute; inset: 22%; transition: opacity .45s ease, scale .6s var(--ease-out); }
.emblem__disc {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 6px rgba(255, 255, 255, .05), 0 30px 60px -20px rgba(0, 0, 0, .6);
  opacity: 0;
  scale: .6;
  animation: emblemDisc .9s cubic-bezier(.34, 1.56, .64, 1) 1.15s forwards;
}
.emblem__disc::after { content: ""; position: absolute; inset: 6%; border: 1px solid rgba(201, 164, 92, .45); border-radius: 50%; }
.emblem__disc img { width: 70%; height: auto; opacity: 0; animation: emblemFade .7s ease 1.55s forwards; }
.emblem__words {
  display: flex;
  align-items: center;
  gap: .9em;
  margin: 0;
  font: italic 400 clamp(1.2rem, 2.4vw, 1.9rem)/1 var(--serif);
  letter-spacing: .14em;
  color: #e4c98f;
  transition: opacity .4s ease;
}
.emblem__words > * { opacity: 0; translate: 0 10px; animation: emblemWord .8s cubic-bezier(.2, .8, .2, 1) forwards; }
.emblem__words i { font-style: normal; color: rgba(201, 164, 92, .6); }
.emblem__words > :nth-child(1) { animation-delay: 2.2s; }
.emblem__words > :nth-child(2) { animation-delay: 2.45s; }
.emblem__words > :nth-child(3) { animation-delay: 2.6s; }
.emblem__words > :nth-child(4) { animation-delay: 2.85s; }
.emblem__words > :nth-child(5) { animation-delay: 3s; }

/* Exit: the disc and lettering fade, then the ring opens out past the screen edges */
.loader.is-done .emblem__core { opacity: 0; scale: .9; }
.loader.is-done .emblem__marks,
.loader.is-done .emblem__words { opacity: 0; }
.loader.is-done .emblem__ring { transform: scale(7); opacity: 0; }
.loader.is-done .emblem::before { opacity: 0; }

@keyframes emblemDraw { to { stroke-dashoffset: 0; } }
@keyframes emblemFade { to { opacity: 1; } }
@keyframes emblemText { from { opacity: 0; rotate: -24deg; } to { opacity: 1; rotate: 0deg; } }
@keyframes emblemGlint { to { stroke-dashoffset: -100; } }
@keyframes emblemDisc { to { opacity: 1; scale: 1; } }
@keyframes emblemWord { to { opacity: 1; translate: 0 0; } }

/* Reduced motion: everything simply shown, no drawing or sweeping */
@media (prefers-reduced-motion: reduce) {
  .emblem__outer { stroke-dashoffset: 0; animation: none; }
  .emblem__inner, .emblem__text, .emblem__disc, .emblem__disc img, .emblem__words > * { opacity: 1; scale: 1; translate: none; animation: none; }
  .emblem__glint { display: none; }
}

/* ---------- Our Legacy in three chapters (as in design H, Template B) ----------
   Left: a framed photo that holds in place while the chapters on the right scroll
   past; it changes to each chapter's photo, with the caption, the I / II / III
   counter and three thin progress lines following along (js/template-b.js).
   Phones and tablets: no held photo; each chapter shows its own above it. */
.chapters { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 40px; }
.chapters__media { grid-column: 1 / span 5; }
.chapters__sticky { position: sticky; top: 104px; height: calc(100vh - 150px); height: calc(100svh - 150px); max-height: 720px; display: flex; flex-direction: column; }
.chapters__frame { position: relative; flex: 1; overflow: hidden; background: var(--h-night); }
.chapters__frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  scale: 1.06;
  transition: opacity 1s var(--ease-out), scale 1.8s var(--ease-out);
}
.chapters__frame img.is-active { opacity: 1; scale: 1; }
.chapters__line { position: absolute; inset: 12px; z-index: 1; border: 1px solid rgba(255, 255, 255, .45); pointer-events: none; }
.chapters__cap {
  position: absolute;
  inset: auto 0 0;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: 80px 28px 24px;
  background: linear-gradient(to top, rgba(6, 20, 48, .75), transparent);
  color: #fff;
}
.chapters__cap p { margin: 0; font: 600 .625rem/1.5 var(--sans); letter-spacing: .3em; text-transform: uppercase; }
.chapters__cap .chapters__num { font: italic 400 1.4rem/1 var(--serif); letter-spacing: 0; text-transform: none; color: var(--h-gold-2); }
.chapters__num span + span { color: rgba(255, 255, 255, .5); }
.chapters__bars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.chapters__bars span { position: relative; height: 1px; overflow: hidden; background: rgba(11, 21, 48, .15); }
.chapters__bars i { position: absolute; inset: 0; background: var(--h-gold-deep); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease-out); }
.chapters__bars .is-done { transform: none; }

.chapters__list { grid-column: 7 / span 6; }
.chapter { display: flex; flex-direction: column; justify-content: center; min-height: 78vh; min-height: 78svh; padding: 64px 0; }
.chapter__photo { display: none; }
.chapter__mark { display: flex; align-items: baseline; gap: 16px; margin: 0 0 20px; font: 600 .625rem/1.5 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--h-mute); }
.chapter__mark span { font: italic 400 2rem/1 var(--serif); letter-spacing: 0; color: var(--h-gold-deep); }
.chapter__title { margin: 0; font-weight: 400; font-size: clamp(2.2rem, 3.6vw, 3.4rem); line-height: 1.08; letter-spacing: -.012em; }
.chapter__title em { color: var(--h-gold-deep); }
.chapter__text { margin: 8px 0 0; font-size: 17px; line-height: 1.85; color: rgba(11, 21, 48, .75); }
.chapter__text + .chapter__text { margin-top: 18px; }
.chapter__text b { font-weight: 600; color: var(--h-ink); }
/* The figures: H's two-by-two grid */
.chapter__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 12px; border-top: 1px solid rgba(11, 21, 48, .12); border-bottom: 1px solid rgba(11, 21, 48, .12); }
.chapter__stats > div { min-width: 0; padding: 30px 20px 30px 0; }
.chapter__stats > div + div { padding-left: 24px; border-left: 1px solid rgba(11, 21, 48, .12); }
.chapter__stats strong i { font-style: normal; } /* the L / M after the number */
.chapter__stats strong { display: flex; align-items: flex-start; font: 400 clamp(3rem, 4.4vw, 3.96rem)/1 var(--serif); color: var(--h-brand); font-variant-numeric: lining-nums tabular-nums; }
/* Rolling digits (js/main.js): each column shows one digit; its strip of 0–9 slides up and settles */
.chapter__stats .odo { display: inline-flex; }
.odo__col { display: inline-block; height: 1em; overflow: hidden; line-height: 1; }
.odo__strip {
  display: block;
  line-height: 1;
  text-align: center;
  white-space: pre;
  transition: transform 2.6s cubic-bezier(.12, .8, .18, 1);
  transition-delay: calc(150ms + var(--fig, 0) * 200ms + var(--col, 0) * 110ms);
  will-change: transform;
}
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.chapter__stats strong b { font-weight: inherit; }
.chapter__stats sup { top: 0; margin-left: 2px; font-size: .6em; line-height: 1.6; color: var(--h-gold-deep); }
.chapter__stats > div > span { display: block; margin-top: 12px; font: 600 .625rem/1.5 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--h-mute); }

@media (max-width: 1023px) {
  .chapters { grid-template-columns: minmax(0, 1fr); }
  .chapters__media { display: none; }
  .chapters__list { grid-column: auto; }
  .chapter { min-height: 0; padding: 40px 0; }
  .chapter:first-child { padding-top: 0; }
  .chapter__photo { position: relative; display: block; aspect-ratio: 4 / 3; margin: 0 0 32px; overflow: hidden; background: var(--h-night); }
  .chapter__photo::after { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(255, 255, 255, .45); pointer-events: none; }
  .chapter__photo img { width: 100%; height: 100%; object-fit: cover; }
  .chapter__stats strong { font-size: clamp(2.6rem, 11vw, 3.4rem); }
  .chapter__stats > div { padding: 24px 10px 24px 0; }
  .chapter__stats > div + div { padding-left: 14px; }
}

/* ---------- Soft seams between sections ----------
   Each section fades in from the colour of the section above it, so the page
   reads as one continuous surface instead of separate bands. Colours come from
   the theme tokens. */
[data-template="B"] main > :is(.intro, .vm, .presence) + section { --prev: var(--paper-2); }
[data-template="B"] main > .biz + section { --prev: var(--h-navy); }
[data-template="B"] main > :is(.leaders, .contact) + section { --prev: var(--paper); }
[data-template="B"] main > .brands + section { --prev: var(--h-ivory); }
[data-template="B"] main > [data-dark] + section { --prev: var(--navy-950); }
[data-template="B"] footer.footer { --prev: var(--paper); } /* the footer follows Contact */
/* (classes in the selectors so these win over each section's own `background` shorthand) */
[data-template="B"] main > :is(.section, .gate, .ahead) + :is(.section, .ahead),
[data-template="B"] footer.footer {
  /* Dark/light changes stay within the top padding; light-to-light ones can run longer */
  --seam: clamp(84px, 11vw, 160px);
  /* eased stops: the colour falls off gradually, with no visible edge */
  --seam-fade: linear-gradient(180deg,
    var(--prev) 0%,
    color-mix(in srgb, var(--prev) 74%, transparent) 19%,
    color-mix(in srgb, var(--prev) 54%, transparent) 34%,
    color-mix(in srgb, var(--prev) 38%, transparent) 47%,
    color-mix(in srgb, var(--prev) 28%, transparent) 56.5%,
    color-mix(in srgb, var(--prev) 19%, transparent) 65%,
    color-mix(in srgb, var(--prev) 12.6%, transparent) 73%,
    color-mix(in srgb, var(--prev) 7.5%, transparent) 80.2%,
    color-mix(in srgb, var(--prev) 4.2%, transparent) 86.1%,
    color-mix(in srgb, var(--prev) 2.1%, transparent) 91%,
    color-mix(in srgb, var(--prev) .8%, transparent) 95.2%,
    transparent 100%);
  /* painted as part of the section's own background, so there is no hairline at the joint */
  background-image: var(--seam-fade);
  background-size: 100% var(--seam);
  background-repeat: no-repeat;
}
[data-template="B"] main > :is(.intro, .presence, .brands, .leaders, .vm, .contact) + :is(.intro, .presence, .brands, .leaders, .vm, .contact) {
  --seam: clamp(220px, 30vw, 420px);
}
[data-template="B"] footer.footer { --seam: clamp(60px, 8vw, 110px); }
/* the group-companies strip is a navy band of its own: no fade into it */
[data-template="B"] main > section.group,
[data-template="B"] main > :is(.section, .gate, .ahead) + section.group { background-image: none; } /* (outranks the fade rule above) */

/* ---------- Group companies, inside the Brands section (Template B) ----------
   At the top of the section, above "The brands you love, served by people you
   trust." (moved there by js/template-b.js): a quiet navy capsule with a fine
   gold edge, the label in gold, the names drifting past. */
[data-template="B"] .brands > .group {
  margin: 0 max(var(--gutter), calc((100vw - 1360px) / 2 + var(--gutter))) clamp(56px, 6vw, 88px);
  overflow: hidden;
  border: 1px solid rgba(201, 164, 92, .35);
  border-radius: 999px;
  background: var(--h-night);
  box-shadow: 0 18px 40px -30px rgba(6, 20, 48, .5);
}
[data-template="B"] .brands > .group .group__title {
  padding-inline: clamp(22px, 2.6vw, 34px) clamp(18px, 2.4vw, 30px);
  border-right-color: rgba(201, 164, 92, .3);
  color: var(--h-gold);
}
[data-template="B"] .brands > .group .group__title::before { background: var(--h-gold); }
[data-template="B"] .brands > .group .group__list em { color: var(--h-gold-2); }
@media (max-width: 640px) {
  [data-template="B"] .brands > .group .group__title { padding-inline: 16px 12px; }
}
/* The Vision section is a photo, so its fade is a layer above the photo and below the text */
[data-template="B"] main > section.ahead { --seam: clamp(100px, 13vw, 190px); overflow: clip; overflow-clip-margin: 2px; isolation: isolate; }
[data-template="B"] .ahead__bg, [data-template="B"] .ahead__shade { z-index: -2; }
[data-template="B"] main > section.ahead::before {
  content: "";
  position: absolute;
  inset: -2px 0 auto;
  z-index: -1;
  height: calc(var(--seam) + 2px);
  background: var(--seam-fade);
  pointer-events: none;
}

/* ---------- Journey: diamond markers, framed year ---------- */
[data-template="B"] .milestone::before { border-radius: 2px; transform: rotate(45deg); }
[data-template="B"] .journey__caption {
  right: auto;
  padding: 16px 22px 18px;
  border: 1px solid rgba(228, 201, 143, .45);
  border-radius: 12px;
  background: rgba(6, 20, 48, .55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
[data-template="B"] .journey__year { font-size: clamp(3.2rem, 5.6vw, 5.2rem); }

/* ---------- Small details ---------- */

/* ---------- Contact: boxed fields, square choices ---------- */
[data-template="B"] .field input,
[data-template="B"] .field select,
[data-template="B"] .field textarea {
  padding: 26px 14px 10px;
  border: 1px solid var(--line-ink);
  border-radius: 12px;
  background: var(--h-ivory);
  transition: border-color .3s, box-shadow .3s;
}
[data-template="B"] .field input:focus,
[data-template="B"] .field select:focus,
[data-template="B"] .field textarea:focus { border-color: var(--gold-500); box-shadow: 0 0 0 4px rgba(201, 164, 92, .16); }
[data-template="B"] .field.is-invalid input,
[data-template="B"] .field.is-invalid select { border-color: #c8553d; box-shadow: 0 0 0 4px rgba(200, 85, 61, .14); }
[data-template="B"] .field::after { display: none; }
[data-template="B"] .field label { left: 15px; top: 19px; }
[data-template="B"] .field input:focus + label, [data-template="B"] .field input:not(:placeholder-shown) + label,
[data-template="B"] .field textarea:focus + label, [data-template="B"] .field textarea:not(:placeholder-shown) + label,
[data-template="B"] .field select:focus + label, [data-template="B"] .field select:valid + label { transform: translateY(-10px) scale(.72); }
[data-template="B"] .field--select::before { top: 26px; right: 18px; }
[data-template="B"] .choice span { border-radius: 10px; }
[data-template="B"] .choice input:checked + span { background: var(--gold-500); border-color: var(--gold-500); color: var(--navy-950); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  [data-template="B"] .brand-grid { --cols: 4; }
}

@media (max-width: 640px) {
  [data-template="B"] .nav__inner { gap: 12px; }
  [data-template="B"] .nav__brand { min-width: 0; }
  [data-template="B"] .nav__name { font-size: .98rem; }
  [data-template="B"] .gate__title { font-size: clamp(2.6rem, 11vw, 3.4rem); }
  /* Logos: two per row so the wide ones stay readable */
  [data-template="B"] .brand-grid { --cols: 2; --gx: 20px; row-gap: 22px; }
  [data-template="B"] .brand { min-height: 64px; }
  [data-template="B"] .brand__logo img { height: calc(var(--logo-h, 28px) * .82); }
}

/* Leadership on phones and portrait tablets: one generation under another (as in design H);
   the two second-generation leaders stay side by side */
@media (max-width: 860px) {
  [data-template="B"] .leaders__intro { grid-template-columns: minmax(0, 1fr); }
  [data-template="B"] .leaders__intro .lead { grid-column: 1; grid-row: auto; margin: 22px 0 0; }
  .gens { grid-template-columns: minmax(0, 1fr); row-gap: 64px; }
  .gen--pair { grid-column: auto; }
  .gen__people { max-width: 300px; }
  .gen--pair .gen__people { max-width: 624px; }
  .gen__sub { font-size: 1.5rem; }
}
@media (max-width: 480px) {
  .gen--pair .leader__name { font-size: 1.3rem; }
  .gen--pair .leader__frame .portrait__mono { font-size: 2.6rem; }
  .gen--pair .leader__demo { bottom: 16px; padding: 5px 8px; font-size: .5rem; letter-spacing: .12em; }
}

/* Businesses cards on phones and portrait tablets: photo on top, details below (as in design H) */
@media (max-width: 900px) {
  .houses__rail { --card-w: min(84vw, 600px); --card-h: clamp(400px, calc(100svh - 260px), 640px); gap: 16px; }
  .houses__head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .houses__title { font-size: clamp(2rem, 8.4vw, 2.6rem); }
  .houses__count { margin: 0; }
  .house { grid-template-columns: minmax(0, 1fr); grid-template-rows: 36% minmax(0, 1fr); border-radius: 24px; }
  .house__photo img { left: 0; width: 100%; translate: none; }
  .house__num { top: 10px; left: 16px; font-size: 3.6rem; }
  .house__body { padding: 18px 18px 0; }
  .house__since { margin-bottom: 8px; }
  .house__body h3 { margin-bottom: 8px; font-size: 1.9rem; }
  .house__text { font-size: .86rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
  .house__model { margin-inline: -18px; padding-bottom: 20px; }
  .house__model::before { left: 18px; right: 18px; bottom: 20px; }
  .house__model::after { height: 20px; }
  .house__vehicle { width: min(var(--fit, 78cqw), calc((100cqh - 20px) * var(--mw) / var(--mh))); }
  .house__model--bike { --fit: 52cqw; }
  .house__model--tile { min-height: 84px; margin: auto 0 18px; } /* keep the tile inside the padding */
  .house__model--lineup { height: clamp(104px, 17svh, 150px); padding: 10px 16px 8px; }
}
/* Short phones: a little less photo and a shorter description */
@media (max-width: 760px) and (max-height: 760px) {
  .house { grid-template-rows: 30% minmax(0, 1fr); }
  .house__body { padding-top: 14px; }
  .house__body h3 { font-size: 1.6rem; }
  .house__text { -webkit-line-clamp: 2; }
}