/* ============================================================================
   AMPM GROUP — group skin (loads AFTER hybrid.css)
   Family DNA shared with BS (day) and Gemini (night): Big Shoulders + Archivo,
   the four-colour meridian, stamp markers. The Group's own register:

   · BS opens in daylight; Gemini lives at night; THE GROUP OPENS PRE-DAWN
     AND SUNRISES INTO THE COMPANIES — it passes through the whole arc.
   · BS stamps count hours; GROUP STAMPS COUNT YEARS (1997/2024/2026/2027),
     with one clock moment kept: 12:00, the meridian.
   · BS's nav mark is the sun disc; the Group's is the STATIC MERIDIAN STRIP.
   · Every interior page opens on a dark dusk band (BS interiors open cream).
   ============================================================================ */

:root {
  --dusk-deep: #14101f;
  --dusk-mid:  #241a38;
  --dusk-warm: #8d7794;
  --dawn-amber: #ecc9a0;
  --grp-cream: #f4ead8;
}

/* ── GROUND: the Group's body is pre-dawn dark (the strip behind the nav
      and the overscroll). Light zones carry their own backgrounds. ── */
body { background: var(--dusk-deep); }
.page { background: #fdfaf2; }

/* ── THE GROUP SKY: pre-dawn dark → sunrise → daylight cream ─────────────
   Pixel-anchored like the BS nightfall so the dawn always breaks just after
   the company ribbon, regardless of viewport. */
.groupsky {
  background: linear-gradient(180deg,
    var(--dusk-deep) 0px,
    #1d1630 420px,
    #33264b 950px,
    var(--dusk-warm) 1230px,
    var(--dawn-amber) 1460px,
    #f9efdd 1650px,
    #fdfaf2 1800px) !important;
}
/* subdue BS's daylight atmosphere props in the dark zone */
.groupsky .atmos .cloud { opacity: 0.06; }
.groupsky .atmos .sunglow {
  background: radial-gradient(circle, rgba(236,201,160,0.20) 0%, rgba(236,201,160,0) 65%);
}
/* pre-dawn stars over the hero */
.groupsky .dawnstars { position: absolute; inset: 0 0 auto 0; height: 1100px; pointer-events: none; }
.groupsky .dawnstars .star { position: absolute; width: 2px; height: 2px; border-radius: 50%;
  background: rgba(244,234,216,0.7); animation: twinkle 4s ease-in-out infinite; }
.groupsky .dawnstars .star.s2 { width: 1.5px; height: 1.5px; opacity: 0.5; }

/* hero + ribbon live in the dark zone → cream text */
.groupsky .hero h1 { color: #fff; }
.groupsky .hero .standfirst { color: rgba(244,234,216,0.88); }
.groupsky .hero .standfirst strong { color: #fff; }
.groupsky .hero .stamp { color: var(--dawn-amber); }
.groupsky .hero .stamp .shift { color: rgba(244,234,216,0.6); }
.groupsky .ribbon .legend { color: rgba(28,24,18,0.75); text-shadow: 0 1px 0 rgba(244,234,216,0.25); }
.groupsky .spine { background: rgba(244,234,216,0.18); }
/* hero buttons on dark */
.groupsky .hero .btn { background: var(--grp-cream); color: var(--dusk-deep); border-color: var(--grp-cream); }
.groupsky .hero .btn:hover { background: #fff; border-color: #fff; }
.groupsky .hero .btn.line { background: transparent; color: var(--grp-cream); border-color: rgba(244,234,216,0.7); }
.groupsky .hero .btn.line:hover { background: rgba(244,234,216,0.1); }

/* ── NAV: meridian mark instead of the sun disc; starts light-on-dark ── */
.nav .mer-mark { display: inline-flex; width: 30px; height: 8px; gap: 0; flex: none; }
.nav .mer-mark span { flex: 1; }
.nav .mer-mark span:nth-child(1) { background: var(--m-orange); }
.nav .mer-mark span:nth-child(2) { background: var(--m-green); }
.nav .mer-mark span:nth-child(3) { background: var(--m-blue); }
.nav .mer-mark span:nth-child(4) { background: var(--m-purple); }

/* ── YEAR STAMPS: era numerals slightly wider, tick picks up amber ── */
.stamp { letter-spacing: 0.06em; }
.stamp .tick { background: currentColor; }

/* ── THE MERIDIAN LINE: horizontal section punctuation the other sites
      don't have (BS's device is the vertical spine) ── */
.meridian-line { display: flex; height: 3px; width: 100%; margin: 0; }
.meridian-line span { flex: 1; }
.meridian-line span:nth-child(1) { background: var(--m-orange); }
.meridian-line span:nth-child(2) { background: var(--m-green); }
.meridian-line span:nth-child(3) { background: var(--m-blue); }
.meridian-line span:nth-child(4) { background: var(--m-purple); }

/* ── Investors chip (nav) ── */
.nav .invest-chip {
  margin-left: auto; font-family: var(--d-body); font-size: 12px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; padding: 8px 14px;
  border: 2px solid currentColor; color: inherit; text-decoration: none;
  opacity: 0.8; transition: opacity 0.2s ease; white-space: nowrap;
}
.nav .invest-chip:hover { opacity: 1; }
@media (max-width: 560px) { .nav .invest-chip { display: none; } }

/* ── INTERIOR PAGES: every page opens on a dark dusk band ─────────────── */
.page .p-hero {
  margin: 0 calc(-1 * var(--pad-x)) 0 calc(-1 * (var(--spine-x) + clamp(18px, 3vw, 46px)));
  padding: clamp(90px, 11vw, 150px) var(--pad-x) clamp(44px, 5vw, 64px) calc(var(--spine-x) + clamp(18px, 3vw, 46px));
  background: linear-gradient(170deg, var(--dusk-mid) 0%, #1a1429 55%, var(--dusk-deep) 100%);
  color: var(--grp-cream);
}
@media (max-width: 1000px) {
  .page .p-hero { margin-left: calc(-1 * var(--pad-x)); padding-left: var(--pad-x); }
}
.page .p-hero h1 { color: #fff; }
.page .p-hero .lede { color: rgba(244,234,216,0.85); }
.page .p-hero .lede strong { color: #fff; }
.page .p-hero .kicker { color: var(--dawn-amber); }
.page .p-hero .btn { background: var(--grp-cream); color: var(--dusk-deep); border-color: var(--grp-cream); }
.page .p-hero .btn.line { background: transparent; color: var(--grp-cream); border-color: rgba(244,234,216,0.7); }
.page .p-hero .art-meta { border-top-color: rgba(244,234,216,0.4); color: rgba(244,234,216,0.75); }
/* dusk band ends with the meridian line */
.page .p-hero::after {
  content: ""; display: block; height: 3px; margin: clamp(36px, 4vw, 54px) calc(-1 * var(--pad-x)) -1px;
  background: linear-gradient(90deg, var(--m-orange) 0 25%, var(--m-green) 25% 50%, var(--m-blue) 50% 75%, var(--m-purple) 75% 100%);
}

/* ── SIX-COMPANY GRID: company colour as a full-width top bar ── */
.cogrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 34px; }
@media (max-width: 1000px) { .cogrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .cogrid { grid-template-columns: 1fr; } }
.co {
  border: 2px solid rgba(28,24,18,0.8); border-top: none; padding: 0 24px 20px;
  display: flex; flex-direction: column; gap: 10px; min-height: 200px;
  color: inherit; text-decoration: none; background: transparent;
  transition: background 0.25s ease, transform 0.25s ease;
}
a.co:hover { background: rgba(28,24,18,0.05); transform: translateY(-3px); }
.co .swatchbar { display: flex; height: 8px; width: calc(100% + 48px); margin: 0 -24px 14px; }
.co .swatchbar > span { flex: 1; }
.co h3 { font-family: var(--d-display); font-weight: 700; font-size: 26px; letter-spacing: 0.02em;
  text-transform: uppercase; margin: 4px 0 0; line-height: 1; }
.co p { font-size: 14px; line-height: 1.55; font-weight: 500; margin: 0; opacity: 0.85; flex-grow: 1; }
.co .meta { display: flex; justify-content: space-between; gap: 10px; font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.6; flex-wrap: wrap; }
.co .hour { font-family: var(--d-display); font-weight: 700; font-size: 13px; letter-spacing: 0.08em; }
/* dark-band variant (approach page stack tiles) */
.band .co, .band.ink .co { border-color: rgba(244,234,216,0.35); }

/* ── Three-conversations closer (night) ── */
.convo-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 36px; }
@media (max-width: 900px) { .convo-row { grid-template-columns: 1fr; } }
.convo { border: 2px solid rgba(244,234,216,0.35); padding: 26px 24px; color: var(--night-text);
  text-decoration: none; display: flex; flex-direction: column; gap: 10px;
  transition: border-color 0.25s ease, background 0.25s ease; }
.convo:hover { border-color: rgba(244,234,216,0.9); background: rgba(244,234,216,0.05); }
.convo .k { font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; }
.convo h3 { font-family: var(--d-display); font-weight: 700; font-size: 24px; letter-spacing: 0.02em;
  margin: 0; line-height: 1.05; color: #fff; }
.convo p { font-size: 14px; line-height: 1.55; margin: 0; color: rgba(244,234,216,0.8); flex-grow: 1; }
.convo .go { font-weight: 700; font-size: 14px; letter-spacing: 0.06em; }