/* ===========================================================
   G&K — Design B: "Atelier" light theme
   All off-white. Loaded AFTER style.css to re-theme dark surfaces.
   =========================================================== */

:root {
  --paper:   #FBFAF8;
  --paper-2: #F4F1EA;
  --paper-3: #ECE7DC;
  --line:    #E2DDD2;
  --ink:     #14171F;
}

body { background: var(--paper); color: var(--ink); }

/* ---- Header on warm paper ---- */
.site-header { background: rgba(251,250,248,.86); }
.site-header.scrolled { border-bottom-color: var(--line); }

/* ===========================================================
   Light hero with founders photo
   =========================================================== */
.hero-light {
  position: relative; overflow: hidden;
  padding-block: clamp(44px, 6vw, 86px) clamp(40px, 5vw, 72px);
  background:
    radial-gradient(120% 90% at 90% 0%, #fff 0%, var(--paper) 60%),
    linear-gradient(180deg, #fff, var(--paper));
  border-bottom: 1px solid var(--line);
}
.hero-light::before { /* faint editorial rule grid */
  content:""; position:absolute; inset:0;
  background-image: linear-gradient(90deg, rgba(20,23,31,.04) 1px, transparent 1px);
  background-size: 25% 100%;
  -webkit-mask-image: linear-gradient(180deg,#000,transparent 70%); mask-image: linear-gradient(180deg,#000,transparent 70%);
  opacity:.5; pointer-events:none;
}
.hero-light .wrap { position: relative; z-index: 2; }
.hero-light-grid {
  display: grid; grid-template-columns: 1.04fr .96fr;
  gap: clamp(34px, 5vw, 76px); align-items: center;
}
.hl-copy .eyebrow { color: var(--blue-700); margin-bottom: 6px; }
.hl-copy .eyebrow::before { background: var(--crimson); }
.hl-copy h1 {
  font-size: clamp(2.4rem, 4.7vw, 4.05rem);
  line-height: 1.04; margin: 22px 0 0; color: var(--ink);
}
.hl-copy h1 em { font-style: normal; color: var(--blue-700); }
.hl-copy h1 .amp { color: var(--crimson); font-style: italic; }
.hl-copy .lede { margin-top: 24px; max-width: 46ch; color: var(--slate); }
.hl-copy .hero-cta { margin-top: 34px; }

.hl-media { position: relative; text-align: center; }
.hl-stage { position: relative; display: inline-block; }
.hl-stage img {
  display: block; height: auto; width: auto;
  max-height: clamp(540px, 64vh, 760px); max-width: 100%;
  margin-inline: auto;
  filter: drop-shadow(0 30px 34px rgba(20,26,46,.22));
}
.hl-stage::after { /* soft ground shadow under the full-length figures */
  content:""; position:absolute; left:50%; bottom:10px; transform:translateX(-50%);
  width: 64%; height: 24px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(20,26,46,.20), transparent 70%);
  z-index:-1;
}
.hl-badge {
  position: absolute; left: -26px; bottom: 76px;
  display: flex; align-items: center; gap: 12px;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 16px 12px 12px; box-shadow: 0 24px 48px -24px rgba(20,26,46,.4);
}
.hl-badge img { height: 52px; width: 52px; object-fit: cover; border-radius: 8px; }
.hl-badge .b-k { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--slate-2); }
.hl-badge .b-v { font-family: var(--font-display); font-size: 1.05rem; color: var(--ink); line-height: 1.1; }
.hl-tag {
  position: absolute; right: -6px; top: 16px;
  background: var(--ink); color: #fff; font-size: 12px; font-weight: 600;
  letter-spacing: .08em; padding: 9px 16px; border-radius: 100px;
  box-shadow: 0 18px 36px -18px rgba(20,26,46,.6);
}

.hero-light-proof {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; align-items: start;
  margin-top: clamp(40px, 5vw, 66px); padding-top: 32px; border-top: 1px solid var(--line);
}
.hlp .n { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.5rem, 2.2vw, 2rem); color: var(--ink); line-height: 1; }
.hlp .l { font-size: 12.5px; color: var(--slate-2); margin-top: 9px; line-height: 1.4; }
.hlp.hot { background: rgba(200,16,46,.06); border: 1px solid rgba(200,16,46,.28); border-radius: 10px; padding: 14px 16px; margin: -14px -8px; }
.hlp.hot .n { color: var(--crimson); }
.hlp.hot .l { color: #9a5560; }
@media (max-width: 900px) {
  .hero-light-grid { grid-template-columns: 1fr; }
  .hl-media { margin-inline: auto; }
  .hl-stage img { max-height: 560px; }
  .hl-badge { left: 0; }
  .hl-tag { right: 0; }
}
@media (max-width: 680px) { .hero-light-proof { grid-template-columns: repeat(2,1fr); gap: 24px 18px; } }

/* ===========================================================
   Re-theme interior page heroes to light
   =========================================================== */
.page-hero {
  background: radial-gradient(120% 90% at 85% 0%, #fff, var(--paper) 62%);
  color: var(--ink); border-bottom: 1px solid var(--line);
}
.page-hero::before {
  background-image: linear-gradient(90deg, rgba(20,23,31,.05) 1px, transparent 1px);
  background-size: 25% 100%;
  -webkit-mask-image: linear-gradient(180deg,#000,transparent 75%); mask-image: linear-gradient(180deg,#000,transparent 75%);
}
.page-hero h1 { color: var(--ink); }
.page-hero .lede { color: var(--slate); }
.breadcrumb, .breadcrumb a { color: var(--crimson); }

/* ===========================================================
   Re-theme .dark sections -> warm light panels
   =========================================================== */
.dark { background: var(--paper-2); color: var(--ink); }
.dark .lede { color: var(--slate); }
.dark .eyebrow { color: var(--blue-700); }
.dark .eyebrow::before { background: var(--crimson); }
.dark .section-head h2 { color: var(--ink); }

/* Platform / ecosystem cards -> light cards */
.platform {
  background: #fff !important; color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: 0 30px 60px -42px rgba(20,26,46,.45);
}
.platform::before { display: none; }
.platform .p-kicker { color: var(--crimson); }
.platform h3 { color: var(--ink); }
.platform p { color: var(--slate); }
.platform .p-link { color: var(--blue-700); opacity: 1; font-weight: 600; }

/* Ecosystem logo sits directly on the white card (no chip needed on light) */
.platform .eco-logo { background: transparent; box-shadow: none; padding: 0; height: auto; top: 30px; left: 32px; }
.platform .eco-logo img { height: 32px; max-width: 168px; }

/* Step cards -> light */
.step { background: #fff; border: 1px solid var(--line); box-shadow: 0 24px 50px -40px rgba(20,26,46,.4); }
.step .s-n { color: var(--crimson); }
.step h3 { color: var(--ink); }
.step p { color: var(--slate); }

/* Stat band -> light */
.statband { background: var(--line); }
.statband .cell { background: #fff; }
.statband .n { color: var(--ink); }
.statband .l { color: var(--slate-2); }

/* Quote feature in (formerly) dark sections */
.quote-feature .mark { color: var(--crimson); opacity: .35; }
.quote-feature cite { color: var(--slate-2); }
.quote-feature cite strong { color: var(--ink); }

/* Media logo pills */
.dark .media-logos span { color: var(--slate); border-color: var(--line); background: #fff; }

/* ===========================================================
   CTA band -> light bordered band
   =========================================================== */
.cta-band {
  background:
    radial-gradient(120% 130% at 12% 8%, #fff 0%, var(--paper-2) 70%);
  color: var(--ink); border: 1px solid var(--line);
  box-shadow: 0 40px 80px -54px rgba(20,26,46,.5);
}
.cta-band::after { display: none; }
.cta-band p { color: var(--slate); }
.cta-band .eyebrow { color: var(--blue-700) !important; }
.cta-band .eyebrow span { background: var(--crimson) !important; }

/* btn-light becomes a clean outline button on light surfaces */
.btn-light { background: #fff; color: var(--ink); border: 1px solid var(--line); backdrop-filter: none; }
.btn-light:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ===========================================================
   Footer -> light
   =========================================================== */
.site-footer { background: var(--paper-2); color: var(--slate); border-top: 1px solid var(--line); }
.site-footer h4 { color: var(--ink); }
.site-footer a { color: var(--slate); }
.site-footer a:hover { color: var(--blue-700); }
.site-footer .f-brand p { color: var(--slate-2); }
.footer-top { border-bottom-color: var(--line); }
.footer-bottom { color: var(--slate-2); }

/* Pillar feature card stays rich for emphasis, but lightened to fit */
.pillar.feature { background: linear-gradient(160deg, #fff, var(--paper-2)); color: var(--ink); border: 1px solid var(--blue-500); }
.pillar.feature p { color: var(--slate); }
.pillar.feature .num { color: var(--crimson); }