/* =========================================================
   The Dream Merchant Group — Light Corporate Design System (2026)
   V12 direction: white ground, navy nav/footer, gold accent.
   Parent to Holiday Brokers.
   ========================================================= */

:root{
  /* Navy — nav/hero/footer ground */
  --dmg-navy:        #142A4D;
  --dmg-navy-mid:    #0F213D;
  --dmg-navy-surface:#102340;
  --dmg-navy-deep:   #0B1830;

  /* Gold — accent only, never a ground colour */
  --dmg-gold:        #A9740F;
  --dmg-gold-lt:     #C99A3E;
  --dmg-gold-dk:     #7C5209;
  --dmg-gold-glow:   rgba(169,116,15,.28);

  /* Paper — the site's actual ground */
  --dmg-paper:       #FFFFFF;
  --dmg-paper-2:     #F4F5F7;
  --dmg-ink:         #15181E;
  --dmg-ink-2:       #4B515A;
  --dmg-muted:       #8A8F97;
  --dmg-line:        #E2E4E8;

  /* Lavender — flagship tile ground (Expedia Group pattern) */
  --dmg-lav:         #EDEBFA;
  --dmg-lav-2:       #F2EEFA;

  /* Depth */
  --dmg-sh-card:     0 10px 30px rgba(20,42,77,.08);
  --dmg-sh-lift:     0 24px 60px rgba(20,42,77,.14);
  --dmg-sh-navy:     0 26px 56px rgba(0,0,0,.38);
  --dmg-sh-gold:     0 8px 22px var(--dmg-gold-glow);

  --dmg-r:           16px;
  --dmg-r-lg:        22px;
  --dmg-ease:        cubic-bezier(.16,1,.3,1);

  --dmg-font: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --dmg-mono: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

@font-face{ font-family:"Geist"; src:url("../fonts/Geist-Regular.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:"Geist"; src:url("../fonts/Geist-Medium.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap; }
@font-face{ font-family:"Geist"; src:url("../fonts/Geist-SemiBold.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; }
@font-face{ font-family:"Geist"; src:url("../fonts/Geist-Bold.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; }

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--dmg-font);
  font-size:17px;
  line-height:1.6;
  color:var(--dmg-ink);
  background:var(--dmg-paper);
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }

.container{ max-width:1220px; margin:0 auto; padding:0 28px; }

.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ── Type ─────────────────────────────────────────────── */
h1,h2,h3,h4{ margin:0; line-height:1.08; letter-spacing:-.025em; font-weight:600; text-wrap:balance; }
h1{ font-size:clamp(2.4rem,1.2rem + 4.4vw,4.2rem); font-weight:700; }
h2{ font-size:clamp(1.7rem,1.1rem + 2vw,2.5rem); }
h3{ font-size:1.35rem; letter-spacing:-.022em; font-weight:600; }
p{ margin:0; max-width:66ch; }

.eyebrow{
  display:block;
  font-family:var(--dmg-mono);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--dmg-gold);
  font-weight:600;
}
.on-navy .eyebrow{ color:var(--dmg-gold-lt); }
.lede{ font-size:1.08rem; color:var(--dmg-ink-2); }
.small{ font-size:.9rem; color:var(--dmg-muted); }

/* ── Buttons ──────────────────────────────────────────── */
.btn{
  display:inline-block;
  border:0;
  border-radius:999px;
  padding:.8rem 1.6rem;
  font-family:inherit;
  font-size:.92rem;
  font-weight:600;
  text-decoration:none;
  cursor:pointer;
  transition:transform .18s var(--dmg-ease), box-shadow .18s var(--dmg-ease), background .18s, color .18s, border-color .18s;
}
.btn-gold{ background:var(--dmg-navy); color:#fff; box-shadow:var(--dmg-sh-navy); }
.btn-gold:hover{ background:var(--dmg-navy-mid); transform:translateY(-1px); }
.btn-ghost{ background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.6); }
.btn-ghost:hover{ background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.85); }
.btn-line{ color:var(--dmg-ink); border:1.5px solid var(--dmg-line); padding:calc(.8rem - 1.5px) calc(1.6rem - 1.5px); }
.btn-line:hover{ border-color:var(--dmg-navy); }
.btn:focus-visible,a:focus-visible,button:focus-visible{
  outline:2px solid var(--dmg-gold-lt); outline-offset:3px;
}

/* ── Nav ──────────────────────────────────────────────── */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; padding:20px 32px;
  transition:background .28s var(--dmg-ease), box-shadow .28s, padding .28s, backdrop-filter .28s;
}
.nav__brand{ display:flex; align-items:center; gap:9px; text-decoration:none; font-size:1.15rem; font-weight:600; letter-spacing:-.01em; color:#fff; }
.nav__brand em{ font-style:normal; color:var(--dmg-gold-lt); }
.nav__links{ display:flex; gap:4px; list-style:none; margin:0; padding:0; }
.nav__links a{
  display:block; padding:.5rem .9rem; border-radius:999px;
  font-size:.9rem; font-weight:600; text-decoration:none;
  color:rgba(255,255,255,.88);
  transition:background .18s, color .18s;
}
.nav__links a:hover,.nav__links a[aria-current="page"]{ background:rgba(255,255,255,.14); color:#fff; }

.nav--scrolled{
  background:rgba(20,42,77,.92);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:0 6px 24px rgba(20,42,77,.24);
  padding:12px 32px;
}
.nav__toggle{ display:none; background:none; border:0; color:#fff; font-size:1.5rem; padding:.25rem .5rem; }

@media (max-width:960px){
  .nav__toggle{ display:block; }
  .nav__links{
    position:absolute; top:100%; left:16px; right:16px;
    flex-direction:column; gap:2px; padding:12px;
    background:rgba(20,42,77,.97);
    backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
    border-radius:var(--dmg-r); box-shadow:var(--dmg-sh-navy);
  }
  .nav__links[hidden]{ display:none; }
  .nav .btn{ display:none; }
}

/* ── Homepage hero — real video, one continuous shot ──
   Native <video autoplay muted loop>. */
.hero-band{ position:relative; overflow:hidden; aspect-ratio:16/9; background:var(--dmg-navy-deep); }
@media (max-width:700px){ .hero-band{ aspect-ratio:4/5; } }
.hero-band video,
.hero-band .hero-poster{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center; display:block;
}
.hero-band .hero-scrim{
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(11,24,48,.55) 0%, rgba(11,24,48,0) 34%);
}
/* Headline overlay — one continuous shot, one headline, one fade-in.
   No scene change means no crossfade timing to sync, so this is a plain
   opacity fade with no dependency on the video's clock at all. */
@keyframes heroFadeIn{ from{ opacity:0; } to{ opacity:1; } }
.hero-copy{ position:absolute; inset:0; pointer-events:none; z-index:2; }
.hero-copy-inner{ position:absolute; top:50%; transform:translateY(-50%); pointer-events:auto; }
.hero-text-a{
  right:6%; text-align:right;
  opacity:0;
  animation: heroFadeIn .6s ease-in-out .2s forwards;
}
.hero-copy h1{
  margin:0; font-weight:700; font-size:clamp(30px,6.4vw,64px); line-height:1.08;
  color:#fff; text-shadow:0 2px 20px rgba(0,0,0,.4); max-width:560px;
}
.hero-copy h1 .accent{ color:#3B82F6; }
@media (max-width:700px){ .hero-text-a{ left:5%; right:5%; } .hero-copy h1{ max-width:78%; } }
@media (prefers-reduced-motion:reduce){
  .hero-text-a{ animation:none !important; opacity:1 !important; }
}
.hero-cta-row{ text-align:center; padding-top:28px; padding-bottom:0; }
.btn-hero{ border:1.5px solid var(--dmg-navy); color:var(--dmg-navy); }
.btn-hero:hover{ background:var(--dmg-navy); color:#fff; }

/* ── Section — generic content-width wrapper, used site-wide.
   Left-aligned by default: most inner pages hang flowing prose or a
   grid-2 article off it. Centring is opt-in via .section--center,
   used only by the homepage's marketing sections. ─────────────── */
.section{ padding-top:88px; padding-bottom:88px; position:relative; z-index:2; }
@media (max-width:768px){ .section{ padding-top:56px; padding-bottom:56px; } }
.section__head{ display:flex; flex-direction:column; gap:14px; margin-bottom:40px; }
.section--center{ text-align:center; }
.section--center .section__head{ max-width:640px; margin:0 auto 48px; gap:6px; align-items:center; }

/* ── Brand scroller — every brand at equal weight, one moving row ── */
.brandmarquee{
  overflow:hidden; margin:0 0 28px; padding:8px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.brandtrack{ display:flex; width:max-content; animation:brandScroll 42s linear infinite; }
.brandmarquee:hover .brandtrack,.brandmarquee:focus-within .brandtrack{ animation-play-state:paused; }
.brandset{ display:flex; gap:16px; padding-right:16px; }
@keyframes brandScroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.bcard{
  flex:0 0 340px; height:176px; padding:20px 24px;
  border:1px solid var(--dmg-line); border-radius:16px; background:#fff; text-decoration:none;
  display:flex; flex-direction:row; align-items:center; gap:20px;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.bcard:hover,.bcard:focus-visible{ transform:translateY(-3px); box-shadow:var(--dmg-sh-lift); border-color:var(--dmg-navy); }
.bcard-logo{ flex:0 0 120px; height:120px; display:flex; align-items:center; justify-content:center; }
.bcard-logo img{ width:120px; height:120px; object-fit:contain; }
.bcard--wide .bcard-logo img{ width:120px; height:auto; max-height:120px; }
.bcard-text{ display:flex; flex-direction:column; align-items:flex-start; gap:10px; min-width:0; }
.bcard-name{ font-weight:700; font-size:1.15rem; line-height:1.2; letter-spacing:-.01em; color:var(--dmg-navy); text-align:left; }
.bcard-tag{
  font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--dmg-muted); border:1px solid var(--dmg-line); border-radius:999px; padding:3px 10px;
}
.bcard-tag--fr{ color:var(--dmg-navy); border-color:var(--dmg-gold); background:rgba(207,142,26,.10); }
@media (max-width:640px){ .bcard{ flex-basis:280px; height:144px; padding:16px 18px; gap:14px; } .bcard-logo{ flex-basis:92px; height:92px; } .bcard-logo img{ width:92px; height:92px; } .bcard--wide .bcard-logo img{ width:92px; height:auto; } .bcard-name{ font-size:1.02rem; } }
@media (prefers-reduced-motion:reduce){
  .brandmarquee{ -webkit-mask-image:none; mask-image:none; }
  .brandtrack{ animation:none; width:auto; }
  .brandset{ flex-wrap:wrap; justify-content:center; padding-right:0; }
  .brandset[aria-hidden]{ display:none; }
}

.note{ border-left:2px solid var(--dmg-gold); padding-left:20px; }
.section > .note,
.section .note:not([data-predraft]){ border:0; padding-left:0; font-size:13px; color:var(--dmg-muted); margin-top:32px; max-width:60ch; margin-left:auto; margin-right:auto; }
/* A content point with a heading. .note is a footnote inside a section; never use it for cards. */
.point{ border-left:2px solid var(--dmg-gold); padding-left:20px; }
.point + .point{ margin-top:26px; }

/* Numbered 2x2 feature cards (partners "What that reach means"). */
.pointgrid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin-top:44px; }
.pointcard{
  position:relative; overflow:hidden;
  background:var(--dmg-paper-2); border:1px solid var(--dmg-line); border-radius:var(--dmg-r-lg);
  padding:34px 34px 32px;
  transition:transform .42s var(--dmg-ease), box-shadow .42s var(--dmg-ease), background .42s var(--dmg-ease);
}
.pointcard::before{
  content:""; position:absolute; left:0; top:0; height:3px; width:56px;
  background:var(--dmg-gold); transition:width .6s var(--dmg-ease);
}
.pointcard:hover{ transform:translateY(-4px); background:#fff; box-shadow:var(--dmg-sh-lift); }
.pointcard:hover::before{ width:100%; }
.pointcard__n{
  display:block; font-size:2.6rem; font-weight:700; line-height:1; letter-spacing:-.04em;
  color:var(--dmg-gold); margin-bottom:22px; font-variant-numeric:tabular-nums;
}
.pointcard h3{ font-size:1.22rem; letter-spacing:-.02em; margin:0 0 12px; color:var(--dmg-ink); }
.pointcard p{ font-size:15.5px; line-height:1.65; color:var(--dmg-ink-2); margin:0; }
@media (max-width:760px){
  .pointgrid{ grid-template-columns:1fr; gap:14px; margin-top:32px; }
  .pointcard{ padding:26px 24px; }
  .pointcard__n{ font-size:2.1rem; margin-bottom:16px; }
}
@media (prefers-reduced-motion:reduce){
  .pointcard,.pointcard::before{ transition:none; }
  .pointcard:hover{ transform:none; }
}

/* ── Split-content bands — leadership / partners / careers ─ */
.split{ padding:88px 0; }
.split--alt{ background:var(--dmg-paper-2); }
.split .container{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.split--rev .split-media{ order:2; }
.split-media{ position:relative; }
.split-media img{ width:100%; height:340px; object-fit:cover; border-radius:12px; display:block; }
.split-media__logo{
  position:absolute; left:18px; bottom:18px; line-height:0;
  background:#fff; border-radius:12px; padding:10px 14px; box-shadow:var(--dmg-sh-lift);
}
.split-media .split-media__logo img{ width:120px; height:auto; border-radius:0; object-fit:contain; }
.split-eyebrow{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--dmg-gold); font-weight:600; display:block; margin-bottom:16px; }
.split h3{ font-size:clamp(1.7rem,2.6vw,2.2rem); margin:0 0 16px; }
.split p{ font-size:15.5px; color:var(--dmg-ink-2); margin:0 0 26px; max-width:42ch; }
@media (max-width:860px){
  .split .container{ grid-template-columns:1fr; gap:32px; }
  .split--rev .split-media{ order:0; }
  .split-media img{ height:240px; }
}

/* ── Quote band ───────────────────────────────────────── */
.quoteband{ padding-top:0; padding-bottom:88px; text-align:center; }
.quoteband .section__head{ max-width:640px; margin:0 auto 48px; align-items:center; gap:6px; }
.quotecard{
  max-width:820px; margin:52px auto 0; background:var(--dmg-lav-2); border-radius:12px;
  display:grid; grid-template-columns:1fr 220px; align-items:center; text-align:left;
  overflow:hidden;
}
.quotecard-copy{ padding:44px 46px; }
.quote{ font-weight:400; font-size:18px; line-height:1.5; color:var(--dmg-ink); margin:0 0 18px; letter-spacing:-.005em; }
.quote-by{ font-size:13px; color:var(--dmg-muted); }
.quote-by b{ display:block; color:var(--dmg-ink); font-weight:600; margin-bottom:2px; }
.quotecard-media{ height:100%; min-height:220px; background-size:cover; background-position:center; }
@media (max-width:720px){
  .quotecard{ grid-template-columns:1fr; }
  .quotecard-media{ height:200px; order:-1; }
  .quotecard-copy{ padding:30px 26px; }
}

/* ── Navy accent band — full entity grid (Group, Partners) ─
   One deliberate contrast band per page, not the site's ground colour.
   Photographic status grid: every entity's relationship to the group,
   stated plainly, at a glance. */
.on-navy{
  position:relative; overflow:hidden; color:#fff;
  background:linear-gradient(168deg, var(--dmg-navy) 0%, var(--dmg-navy-mid) 58%, var(--dmg-navy) 100%);
}
.on-navy::before{
  content:""; position:absolute; top:-180px; right:-140px;
  width:620px; height:620px; border-radius:50%;
  background:radial-gradient(circle, rgba(169,116,15,.18), transparent 66%);
  pointer-events:none;
}
.on-navy h2,.on-navy h3{ color:#fff; }
.on-navy p{ color:rgba(255,255,255,.74); }

.bento{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-auto-rows:150px;
  gap:16px;
}
.bento__cell{
  position:relative; isolation:isolate; overflow:hidden;
  border-radius:var(--dmg-r); text-decoration:none; color:#fff;
  transition:transform .42s var(--dmg-ease), box-shadow .42s var(--dmg-ease);
}
.bento__cell:hover,.bento__cell:focus-visible{ transform:translateY(-6px); box-shadow:var(--dmg-sh-navy); }
.bento__cell .bg{
  position:absolute; inset:0; background-size:cover; background-position:center;
  transition:transform .8s var(--dmg-ease);
}
.bento__cell:hover .bg{ transform:scale(1.08); }
.bento__cell .scrim{
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(11,24,48,.25) 0%, rgba(11,24,48,.06) 55%, transparent 100%);
}
.bento__cell .bg--right{ background-position:78% center; }
.bento__cell .scrim--left{
  background:
    linear-gradient(to right, rgba(11,24,48,.62) 0%, rgba(11,24,48,.30) 38%, transparent 62%);
}
.bento__cell .body{
  position:absolute; left:0; right:0; bottom:0;
  z-index:2;
  display:flex; flex-direction:column;
  padding:36px 22px 18px;
  background:linear-gradient(to top,
    rgba(11,24,48,.82) 0%, rgba(11,24,48,.52) 58%, transparent 100%);
}
.bento__cell--glass .body,
.bento__cell--gold .body{
  position:relative; height:100%; justify-content:center;
  background:none; padding:22px;
}
.bento__status{
  font-family:var(--dmg-mono); font-size:9px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--dmg-gold-lt); margin-bottom:8px;
  text-shadow:0 1px 6px rgba(11,24,48,.85);
}
.bento__name{
  font-size:1.15rem; font-weight:700; letter-spacing:-.022em;
  text-shadow:0 1px 10px rgba(11,24,48,.6);
}
.bento__out{
  font-size:.82rem; color:rgba(255,255,255,.8); margin-top:6px; max-width:34ch;
  text-shadow:0 1px 8px rgba(11,24,48,.6);
}
.bento__cell .bg ~ .body .bento__status{ color:rgba(255,255,255,.9); }
.bento__cell--gold .bento__status,
.bento__cell--gold .bento__name,
.bento__cell--gold .bento__out{ text-shadow:none; }

.bento__cell--wide{ grid-column:span 2; }
.bento__cell--tall{ grid-row:span 2; }
.bento__cell--wide .bento__name{ font-size:1.45rem; }

.bento__cell--glass{
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
}
.bento__cell--glass .body{ justify-content:center; }
/* On a light band the glass stat tiles become solid navy so they read against the page. */
.bento--light .bento__cell--glass{ background:var(--dmg-navy); border-color:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; }
.bento__cell--glass .n{
  font-size:2.4rem; font-weight:700; letter-spacing:-.04em; line-height:1;
  font-variant-numeric:tabular-nums;
}
.bento__cell--glass .l{
  font-family:var(--dmg-mono); font-size:9px; letter-spacing:.16em;
  text-transform:uppercase; color:rgba(255,255,255,.62); margin-top:9px;
}
.bento__cell--gold{ background:linear-gradient(140deg,var(--dmg-gold),var(--dmg-gold-dk)); }
.bento__cell--gold .body{ justify-content:center; }
.bento__cell--gold .bento__status{ color:rgba(255,255,255,.82); }
.bento__cell--gold .bento__out{ color:rgba(255,255,255,.92); }

@media (max-width:900px){
  .bento{ grid-template-columns:repeat(2,1fr); grid-auto-rows:140px; }
  .bento__cell--tall{ grid-row:span 2; }
}
@media (max-width:520px){
  .bento{ grid-template-columns:1fr; }
  .bento__cell--wide,.bento__cell--tall{ grid-column:auto; grid-row:auto; }
}

/* ── Reveal ───────────────────────────────────────────────
   Scoped to .js so content is NEVER hidden when JavaScript is
   unavailable, blocked, or errors before the observer attaches.
   Without this scoping a failed script leaves the page blank. */
.js .reveal{
  opacity:0; transform:translateY(18px);
  transition:opacity .7s var(--dmg-ease), transform .7s var(--dmg-ease);
}
.js .reveal.is-in{ opacity:1; transform:none; }

/* ── Reduced motion ───────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .js .reveal{ opacity:1; transform:none; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

/* =========================================================
   Inner-page components
   ========================================================= */

/* ── Compact page hero ────────────────────────────────── */
.phero{ position:relative; overflow:hidden; background:var(--dmg-navy); min-height:52vh; display:flex; }
.phero__bg{ position:absolute; inset:0; background-size:cover; background-position:center 42%; }
.phero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(to top, rgba(11,24,48,.94) 0%, rgba(11,24,48,.62) 46%, rgba(11,24,48,.26) 100%),
    linear-gradient(to right, rgba(11,24,48,.62) 0%, transparent 62%);
}
.phero__inner{ position:relative; z-index:2; width:100%; display:flex; align-items:flex-end; padding:150px 0 60px; }
/* .container is a ROW flex item here, so it shrinks to content and the auto
   margins centre it. Force full width so hero copy aligns left like index.html. */
.phero__inner > .container{ width:100%; }
/* Face protection for page heroes. Mirrors the tile rules so a photograph
   with people can run in a hero without type landing on a face. */
.phero__bg--right{ background-position:78% center; }
.phero__scrim--left{
  background:
    linear-gradient(to top, rgba(11,24,48,.94) 0%, rgba(11,24,48,.66) 46%, rgba(11,24,48,.30) 100%),
    linear-gradient(to right, rgba(11,24,48,.90) 0%, rgba(11,24,48,.62) 42%, transparent 72%);
}

.phero h1{ color:#fff; max-width:17ch; margin-top:14px; font-size:clamp(2.1rem,1.1rem + 3.2vw,3.4rem); }
.phero__sub{ color:rgba(255,255,255,.85); font-size:1.06rem; max-width:56ch; margin-top:16px; }

/* ── Light band ───────────────────────────────────────── */
.band{ background:var(--dmg-paper-2); }
.band--alt{ background:var(--dmg-paper-2); }
.band--white{ background:#fff; }

/* ── Segment block (Brands index) ─────────────────────── */
.segment{ display:grid; grid-template-columns:320px 1fr; gap:52px; align-items:start; }
.segment + .segment{ margin-top:76px; padding-top:76px; border-top:1px solid var(--dmg-line); }
.segment__intro h2{ margin-top:12px; }
.segment__intro p{ margin-top:16px; color:var(--dmg-ink-2); font-size:1rem; }
@media (max-width:900px){ .segment{ grid-template-columns:1fr; gap:26px; } }

/* ── Brand cards ──────────────────────────────────────── */
.cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:22px; }
.card{
  display:flex; flex-direction:column; overflow:hidden;
  background:#fff; border:1px solid var(--dmg-line); border-radius:var(--dmg-r);
  box-shadow:var(--dmg-sh-card); text-decoration:none; color:inherit;
  transition:transform .34s var(--dmg-ease), box-shadow .34s var(--dmg-ease);
}
.card:hover,.card:focus-visible{ transform:translateY(-5px); box-shadow:var(--dmg-sh-lift); }
.card__ph{ position:relative; aspect-ratio:16/9; background-size:cover; background-position:center; }
.card__ph::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top,rgba(11,24,48,.35),transparent 60%); }
.card__bd{ padding:20px 20px 22px; display:flex; flex-direction:column; gap:8px; flex:1; }
.card__nm{ font-size:1.08rem; font-weight:700; letter-spacing:-.02em; }
.card__out{ font-size:.92rem; color:var(--dmg-ink-2); }
.card__mt{
  margin-top:auto; padding-top:14px; border-top:1px solid var(--dmg-line);
  display:flex; justify-content:space-between; gap:10px;
  font-family:var(--dmg-mono); font-size:9.5px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--dmg-muted);
}
.card__mt b{ color:var(--dmg-gold); font-weight:600; }

/* ── Fact list ────────────────────────────────────────── */
.facts{ margin:0; border-top:1px solid var(--dmg-ink); }
/* In a .stack the gap spaces these; in flowing prose nothing does, so the
   top rule welds itself to the paragraph above. Space them explicitly. */
.prose .facts,
.prose .note{ margin-top:28px; }
.prose .facts + *{ margin-top:28px; }
.rail + .note{ margin-top:28px; }
.note + .note{ margin-top:18px; }
.facts div{
  display:flex; justify-content:space-between; gap:24px;
  padding:13px 0; border-bottom:1px solid var(--dmg-line);
}
.facts dt{ font-family:var(--dmg-mono); font-size:10px; letter-spacing:.13em; text-transform:uppercase; color:var(--dmg-muted); }
.facts dd{ margin:0; font-weight:600; text-align:right; font-variant-numeric:tabular-nums; }

/* ── Timeline (Story) ─────────────────────────────────── */
.timeline{ position:relative; margin-top:8px; }
.timeline::before{ content:""; position:absolute; left:92px; top:8px; bottom:8px; width:1px; background:var(--dmg-line); }
.tl{ position:relative; display:grid; grid-template-columns:92px 1fr; gap:34px; padding:20px 0; }
.tl__yr{
  font-family:var(--dmg-mono); font-size:13px; letter-spacing:.05em; font-weight:600;
  color:var(--dmg-gold); padding-top:3px; font-variant-numeric:tabular-nums;
}
.tl__bd h3{ font-size:1.12rem; }
.tl__bd p{ margin-top:7px; color:var(--dmg-ink-2); font-size:.96rem; }
.tl::after{
  content:""; position:absolute; left:88px; top:28px;
  width:9px; height:9px; border-radius:50%; background:var(--dmg-gold);
  box-shadow:0 0 0 4px var(--dmg-paper);
}
@media (max-width:640px){
  .timeline::before,.tl::after{ display:none; }
  .tl{ grid-template-columns:1fr; gap:6px; }
}

/* ── People ───────────────────────────────────────────── */
.people{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:30px; }
.person{ background:#fff; border:1px solid var(--dmg-line); border-radius:var(--dmg-r); overflow:hidden; box-shadow:var(--dmg-sh-card); }
.person__ph{ aspect-ratio:4/3; background:var(--dmg-paper-2); background-size:cover; background-position:center top; }
.person__bd{ padding:22px; }
.person__nm{ font-size:1.15rem; font-weight:700; letter-spacing:-.02em; }
.person__role{ font-family:var(--dmg-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--dmg-gold); margin-top:6px; }
.person__bio{ margin-top:12px; color:var(--dmg-ink-2); font-size:.94rem; }

/* ── Prose (legal, PAIA) ──────────────────────────────── */
.prose{ max-width:72ch; }
.prose h2{ margin-top:46px; font-size:1.5rem; }
.prose h3{ margin-top:30px; }
.prose p,.prose li{ margin-top:14px; color:var(--dmg-ink-2); }
.prose ul,.prose ol{ padding-left:1.2em; }
.prose a{ color:var(--dmg-gold-dk); }
/* Only the FIRST element loses its top margin. Written as `.prose__first h2`
   this zeroed every h2 in the article, so long documents lost all heading
   separation and each section welded to the paragraph above it. */
.prose__first > :first-child{ margin-top:0; }

/* ── Table ────────────────────────────────────────────── */
.tblwrap{ overflow-x:auto; margin-top:22px; }
.tbl{ width:100%; border-collapse:collapse; min-width:520px; }
.tbl th{
  text-align:left; font-family:var(--dmg-mono); font-size:10px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--dmg-muted); font-weight:400;
  padding:0 18px 11px 0; border-bottom:1px solid var(--dmg-ink);
}
.tbl td{ padding:15px 18px 15px 0; border-bottom:1px solid var(--dmg-line); vertical-align:top; font-size:.94rem; color:var(--dmg-ink-2); }
.tbl td:first-child{ font-weight:700; color:var(--dmg-ink); white-space:nowrap; }

/* Legal tables carry sentences in the first column, not labels, so the
   default nowrap would force a very wide scroll. Cap it and let it wrap. */
.tbl--text td:first-child{ white-space:normal; min-width:14ch; max-width:32ch; }
.tbl--text td{ font-size:.9rem; }

/* ── Lateral rail ─────────────────────────────────────── */
.rail{ display:flex; gap:12px; flex-wrap:wrap; margin-top:18px; }
.rail a{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 16px; border-radius:999px; text-decoration:none;
  border:1px solid var(--dmg-line); background:#fff;
  font-size:.87rem; font-weight:600; color:var(--dmg-ink);
  transition:border-color .18s, transform .18s var(--dmg-ease);
}
.rail a:hover{ border-color:var(--dmg-gold); transform:translateY(-2px); }

/* ── CTA strip ────────────────────────────────────────── */
.ctastrip{
  border-radius:var(--dmg-r-lg); padding:44px 46px;
  background:linear-gradient(150deg,var(--dmg-navy),var(--dmg-navy-mid));
  color:#fff; display:flex; justify-content:space-between; align-items:center; gap:30px; flex-wrap:wrap;
}
.ctastrip h2{ color:#fff; max-width:20ch; }
.ctastrip p{ color:rgba(255,255,255,.76); margin-top:10px; max-width:46ch; }
/* The primary button is navy; on the navy strip it needs to invert or it disappears. */
.ctastrip .btn-gold{ background:#fff; color:var(--dmg-navy); box-shadow:0 10px 26px rgba(0,0,0,.28); }
.ctastrip .btn-gold:hover{ background:var(--dmg-lav); }

/* ── Utility ──────────────────────────────────────────── */
.stack{ display:flex; flex-direction:column; gap:16px; }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:start; }
/* A grid item defaults to min-width:auto, so one long unbreakable string —
   an email address, a URL — pushes the whole column past the viewport. */
.grid-2 > *{ min-width:0; }
.facts dd{ overflow-wrap:anywhere; }
@media (max-width:860px){ .grid-2{ grid-template-columns:1fr; gap:30px; } }
/* Pre-publication notes. Deliberately loud so they cannot ship by accident. */
[data-predraft]{
  border-left-color:#C0392B; background:rgba(192,57,43,.06);
  padding:16px 20px; border-radius:0 var(--dmg-r) var(--dmg-r) 0;
}

/* ── Solid nav, for pages that open on a light band ───────
   .nav is white-on-transparent so it can float over a hero. Pages with no
   hero would render it invisibly on paper, and their first section would
   slide under it. main.js adds these when <main>'s first child is not a hero. */
.nav--solid{
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:0 4px 20px rgba(20,42,77,.06);
  border-bottom:1px solid var(--dmg-line);
  padding:14px 32px;
}
.nav--solid .nav__brand{ color:var(--dmg-navy); }
.nav--solid .nav__brand em{ color:var(--dmg-gold-dk); }
.nav--solid .nav__links a{ color:var(--dmg-ink-2); }
.nav--solid .nav__links a:hover,
.nav--solid .nav__links a[aria-current="page"]{ background:rgba(20,42,77,.06); color:var(--dmg-ink); }
.nav--solid .nav__toggle{ color:var(--dmg-ink); }
@media (max-width:960px){
  .nav--solid .nav__links{
    background:rgba(255,255,255,.98);
    box-shadow:var(--dmg-sh-lift);
    border:1px solid var(--dmg-line);
  }
}
/* Clearance so the first section does not sit under the fixed nav. */
body.has-solid-nav main{ padding-top:74px; }

/* ── Footer ───────────────────────────────────────────── */
.foot{ background:var(--dmg-navy); color:rgba(255,255,255,.9); padding:76px 0 34px; }
.foot__cols{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px; margin-bottom:56px; }
.foot .eyebrow{ color:#E8C88A; }
.foot__reg{
  font-family:var(--dmg-mono); font-size:12.5px; line-height:1.9;
  letter-spacing:.01em; margin-top:12px; color:rgba(255,255,255,.78);
}
.foot__reg a{ display:block; margin-top:2px; }
.foot ul{ list-style:none; margin:12px 0 0; padding:0; }
.foot ul a{
  display:block; padding:3px 0; font-size:.88rem;
  color:rgba(255,255,255,.68); text-decoration:none; transition:color .18s;
}
.foot ul a:hover{ color:#fff; }
.foot__creds{
  display:flex; flex-wrap:wrap; gap:22px; align-items:center;
  margin-top:40px; padding-top:22px;
  border-top:1px solid rgba(255,255,255,.14);
  font-family:var(--dmg-mono); font-size:10px; letter-spacing:.17em;
  text-transform:uppercase; color:rgba(255,255,255,.5);
}
.foot__legal{
  border-top:1px solid rgba(255,255,255,.14); padding-top:24px;
  margin-top:18px; font-size:.78rem; color:rgba(255,255,255,.45);
}
@media (max-width:860px){ .foot__cols{ grid-template-columns:1fr 1fr; gap:28px; } }
@media (max-width:560px){ .foot__cols{ grid-template-columns:1fr; } }

/* ── Print ────────────────────────────────────────────────
   The fixed nav has no print equivalent — at print/PDF widths
   main.js's isMobile() check opens the collapsed mobile menu,
   which then overlays the page content. Site chrome is not
   useful on a printed page or in a PDF export; drop it. */
@media print{
  .nav{ display:none !important; }
  body.has-solid-nav main{ padding-top:0 !important; }
}