/* ============================================================
 * sustainability-pillar.css — shared styles for the 5 pillar
 * sub-pages of the DSMADE Sustainability section.
 *
 * Loaded by:
 *   - pages/sustainability-ethics.html
 *   - pages/sustainability-compliance.html
 *   - pages/sustainability-environmental.html
 *   - pages/sustainability-social.html
 *   - pages/sustainability-educational.html
 *
 * Follows the same integration pattern used by business.css /
 * vision.css: overrides the dark homepage body via !important,
 * loads Plus Jakarta Sans + JetBrains Mono from Google Fonts
 * (declared in each HTML head, not here), and lays out the
 * page in three parts:
 *
 *   1. Parallax hero    (tree photo, CSS-only via background-attachment)
 *   2. Breadcrumb bar   (site-standard: Home · SUSTAINABILITY · CURRENT)
 *   3. Pillar tab strip (5 static <a> links, one per pillar)
 *   4. Pillar content   (per-page unique layout)
 *
 * All 5 pillars share the same chrome — only the accent color
 * and body content change per page.
 * ========================================================== */

/* -------- Light editorial canvas override -------- */
body.sus-pillar-page {
  background: #ffffff !important;
  color: #2b2f36 !important;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
.sus-pillar-page .sp-mono {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.sus-pillar-page .sp-container {
  max-width: 1150px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* =========================================================
   1. HERO (tree photo + CSS-only parallax)

   Uses an <img> element instead of background-image so the
   browser fetches it with high priority (via fetchpriority="high"
   + <link rel="preload"> in the HTML head). This eliminates the
   "pop-in" delay that CSS background-image had.
   ========================================================= */
.sp-hero {
  position: relative;
  width: 100%;
  height: 360px;
  overflow: hidden;
  background-color: #0b1220;
}
@media (min-width: 768px) {
  .sp-hero { height: 440px; }
}
.sp-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
  z-index: 0;
}
/* Overlay = radial vignette centered on the text block.
   Sky/leaves outside the text area stay bright; only the middle
   band gets a soft dark wash so white type reads clearly. */
.sp-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(
      ellipse 55% 45% at 50% 55%,
      rgba(0, 0, 0, 0.55) 0%,
      rgba(0, 0, 0, 0.35) 40%,
      rgba(0, 0, 0, 0.10) 70%,
      rgba(0, 0, 0, 0.00) 100%
    );
}
.sp-hero__inner {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 1rem;
  text-align: center;
}
/* .sp-hero__eyebrow removed — no more "DSMADE ESG GOVERNANCE" line */
.sp-hero__title {
  /* User 2026-08-19: PT "SUSTENTABILIDADE" 16글자 + letter-spacing 0.15em
     은 좁은 폰에서 좌우로 삐져나감. clamp + letter-spacing 낮춤. */
  font-size: clamp(1.1rem, 5.2vw, 2rem);
  font-weight: 300;
  color: #ffffff;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 14px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.35), 0 2px 12px rgba(0,0,0,0.18);
  overflow-wrap: break-word;
  word-break: break-word;
  max-width: 100%;
}
@media (min-width: 768px) {
  .sp-hero__title { font-size: 2.5rem; letter-spacing: 0.15em; }
}
.sp-hero__desc {
  font-size: 0.875rem;
  color: #e2e8f0;
  font-weight: 300;
  letter-spacing: 0.02em;
  max-width: 600px;
  margin: 0 auto;
  text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

/* =========================================================
   2. BREADCRUMB (site-standard: Home · SECTION · CURRENT)
   Matches business.css / vision.css / about-us.css tone.
   ========================================================= */
.sp-crumb-bar {
  width: 100%;
  background: #ffffff;
  border-bottom: 1px solid #e5e7eb;
  padding: 16px 0;
}
.sp-crumb {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: rgba(10, 10, 10, 0.6);
  margin: 0;
}
.sp-crumb a {
  color: inherit;
  text-decoration: none;
}
.sp-crumb a:hover { color: #0a0a0a; }
.sp-crumb__sep { opacity: 0.4; }
.sp-crumb__current {
  color: var(--crumb-current, #E30D2E);
  font-weight: 700;
  letter-spacing: 0.06em;
}

/* =========================================================
   3. PILLAR TAB STRIP — 5 static links, one per pillar

   Three variants selectable via body[data-tab-style]:
     - underline  (default) : minimal text with active underline
     - dot                 : small color dot above text
     - classic             : original filled block (legacy)

   Per-pillar accent color exposed as --tab-accent on each <a>.
   ========================================================== */

/* Per-tab pillar accent (used by all variants) */
.sp-tab                        { --tab-accent: #6b7280; }
.sp-tab.is-active-ethics       { --tab-accent: #d97706; }
.sp-tab.is-active-compliance   { --tab-accent: #1d4ed8; }
.sp-tab.is-active-environmental{ --tab-accent: #047857; }
.sp-tab.is-active-social       { --tab-accent: #0e7490; }
.sp-tab.is-active-educational  { --tab-accent: #6d28d9; }

/* Also give inactive tabs their pillar's future accent
   (used for hover states and the dot variant). Order matters:
   these are neighbours in DOM, so we use nth-child. */
.sp-tabs .sp-tab:nth-child(1) { --tab-pillar: #d97706; }
.sp-tabs .sp-tab:nth-child(2) { --tab-pillar: #1d4ed8; }
.sp-tabs .sp-tab:nth-child(3) { --tab-pillar: #047857; }
.sp-tabs .sp-tab:nth-child(4) { --tab-pillar: #0e7490; }
.sp-tabs .sp-tab:nth-child(5) { --tab-pillar: #6d28d9; }

/* Hide the "01." numeric prefixes across all variants (kept in DOM
   for accessibility fallback; toggled on only if we ever want them). */
.sp-tab__num { display: none; }

/* Base tab reset — variant-agnostic. */
.sp-tabs {
  display: flex;
  margin-top: 60px;
}
.sp-tab {
  flex: 1;
  min-width: 0;
  padding: 18px 12px;
  color: #6b7280;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-align: center;
  text-decoration: none;
  background: transparent;
  border: none;
  transition: color 0.18s ease, background 0.18s ease;
}
.sp-tab__label {
  display: inline-block;
  line-height: 1.3;
  /* Keep multi-word labels together; break only between words. */
  word-break: keep-all;
  overflow-wrap: normal;
  hyphens: none;
}
.sp-tab__label-main {
  /* Primary word (Ethics / Compliance / Social / …) — always visible. */
  display: inline;
  white-space: nowrap;
}
.sp-tab__label-suffix {
  /* Secondary word (Management / Contributions / Activities) — hidden on
     narrow viewports so no letter ever gets clipped. */
  display: inline;
  white-space: nowrap;
}

/* =========================================================
   VARIANT A — UNDERLINE (default)
   Minimal text row; active tab gets a colored underline bar.
   Mobile keeps a single row (font shrinks + text wraps to 2 lines).
   ========================================================= */
body[data-tab-style="underline"] .sp-tabs {
  border-bottom: 1px solid #e5e7eb;
  gap: 0;
}
body[data-tab-style="underline"] .sp-tab {
  position: relative;
  padding: 18px 14px 20px;
}
body[data-tab-style="underline"] .sp-tab::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: -1px;
  height: 2px;
  background: var(--tab-accent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.25s cubic-bezier(.4,0,.2,1);
}
body[data-tab-style="underline"] .sp-tab:hover { color: #111827; }
body[data-tab-style="underline"] .sp-tab:hover::after {
  transform: scaleX(0.35);
  background: var(--tab-pillar);
  opacity: 0.5;
}
body[data-tab-style="underline"] .sp-tab.is-active-ethics,
body[data-tab-style="underline"] .sp-tab.is-active-compliance,
body[data-tab-style="underline"] .sp-tab.is-active-environmental,
body[data-tab-style="underline"] .sp-tab.is-active-social,
body[data-tab-style="underline"] .sp-tab.is-active-educational {
  color: #111827;
  font-weight: 600;
}
body[data-tab-style="underline"] .sp-tab.is-active-ethics::after,
body[data-tab-style="underline"] .sp-tab.is-active-compliance::after,
body[data-tab-style="underline"] .sp-tab.is-active-environmental::after,
body[data-tab-style="underline"] .sp-tab.is-active-social::after,
body[data-tab-style="underline"] .sp-tab.is-active-educational::after {
  transform: scaleX(1);
  opacity: 1;
}

/* Underline: MOBILE — stack the 5 tabs vertically as BUTTON CARDS.
   Each tab is a self-contained bordered card w/ subtle shadow so it
   reads clearly as tappable. Inactive = white/gray outline; active
   = pillar accent border + tinted background + colored chevron. */
@media (max-width: 720px) {
  body[data-tab-style="underline"] .sp-tabs {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 40px;
    border: none;
    padding: 0;
  }
  body[data-tab-style="underline"] .sp-tab {
    /* Card-style button */
    flex: none;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    text-align: left;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1.35;
    color: #374151;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
    transition: border-color 0.18s ease, background 0.18s ease,
                box-shadow 0.18s ease, color 0.18s ease, transform 0.18s ease;
  }
  body[data-tab-style="underline"] .sp-tab:hover {
    border-color: var(--tab-pillar);
    color: #111827;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);
  }
  body[data-tab-style="underline"] .sp-tab:active {
    transform: scale(0.99);
  }
  /* Show the full label; no cramping so no clipping. */
  body[data-tab-style="underline"] .sp-tab__label-main,
  body[data-tab-style="underline"] .sp-tab__label-suffix {
    display: inline;
    white-space: normal;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
    letter-spacing: inherit;
  }
  /* Chevron indicator (::after) — greyed on inactive, colored on active */
  body[data-tab-style="underline"] .sp-tab::after {
    content: "";
    position: static;
    display: block;
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-top: 1.5px solid #cbd5e1;
    border-right: 1.5px solid #cbd5e1;
    transform: rotate(45deg);
    background: transparent;
    opacity: 1;
    transition: border-color 0.18s ease;
    left: auto; right: auto; top: auto; bottom: auto;
  }
  body[data-tab-style="underline"] .sp-tab:hover::after {
    border-top-color: var(--tab-pillar);
    border-right-color: var(--tab-pillar);
  }
  /* ACTIVE state — pillar accent border + tinted card */
  body[data-tab-style="underline"] .sp-tab.is-active-ethics,
  body[data-tab-style="underline"] .sp-tab.is-active-compliance,
  body[data-tab-style="underline"] .sp-tab.is-active-environmental,
  body[data-tab-style="underline"] .sp-tab.is-active-social,
  body[data-tab-style="underline"] .sp-tab.is-active-educational {
    color: #111827;
    font-weight: 600;
    border-color: var(--tab-accent);
    background: color-mix(in oklab, var(--tab-accent) 6%, #ffffff);
    box-shadow: 0 2px 8px color-mix(in oklab, var(--tab-accent) 18%, transparent);
  }
  body[data-tab-style="underline"] .sp-tab.is-active-ethics::after,
  body[data-tab-style="underline"] .sp-tab.is-active-compliance::after,
  body[data-tab-style="underline"] .sp-tab.is-active-environmental::after,
  body[data-tab-style="underline"] .sp-tab.is-active-social::after,
  body[data-tab-style="underline"] .sp-tab.is-active-educational::after {
    border-top-color: var(--tab-accent);
    border-right-color: var(--tab-accent);
  }
}

/* =========================================================
   VARIANT B — DOT
   Small color dot above centered text.
   Active dot is filled; inactive dots are outlined + faded.
   ========================================================= */
body[data-tab-style="dot"] .sp-tabs {
  gap: 4px;
  padding: 8px 0 20px;
  border-bottom: 1px solid #f1f2f4;
}
body[data-tab-style="dot"] .sp-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 14px 6px;
  color: #6b7280;
  border-radius: 6px;
}
body[data-tab-style="dot"] .sp-tab::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid #d1d5db;
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
body[data-tab-style="dot"] .sp-tab:hover {
  color: #111827;
  background: #fafafa;
}
body[data-tab-style="dot"] .sp-tab:hover::before {
  border-color: var(--tab-pillar);
  transform: scale(1.15);
}
body[data-tab-style="dot"] .sp-tab.is-active-ethics,
body[data-tab-style="dot"] .sp-tab.is-active-compliance,
body[data-tab-style="dot"] .sp-tab.is-active-environmental,
body[data-tab-style="dot"] .sp-tab.is-active-social,
body[data-tab-style="dot"] .sp-tab.is-active-educational {
  color: #111827;
  font-weight: 600;
}
body[data-tab-style="dot"] .sp-tab.is-active-ethics::before,
body[data-tab-style="dot"] .sp-tab.is-active-compliance::before,
body[data-tab-style="dot"] .sp-tab.is-active-environmental::before,
body[data-tab-style="dot"] .sp-tab.is-active-social::before,
body[data-tab-style="dot"] .sp-tab.is-active-educational::before {
  background: var(--tab-accent);
  border-color: var(--tab-accent);
  transform: scale(1.25);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--tab-accent) 12%, transparent);
}
/* Dot: MOBILE — same vertical-stack pattern; dot sits inline before label */
@media (max-width: 720px) {
  body[data-tab-style="dot"] .sp-tabs {
    display: flex;
    flex-direction: column;
    margin-top: 40px;
    gap: 0;
    padding: 0;
    border-top: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;
  }
  body[data-tab-style="dot"] .sp-tab {
    flex: none;
    width: 100%;
    padding: 16px 18px;
    flex-direction: row;
    justify-content: flex-start;
    text-align: left;
    font-size: 14px;
    letter-spacing: 0.01em;
    line-height: 1.35;
    gap: 12px;
    border-bottom: 1px solid #f1f2f4;
    border-radius: 0;
  }
  body[data-tab-style="dot"] .sp-tab:last-child { border-bottom: none; }
  body[data-tab-style="dot"] .sp-tab__label-main,
  body[data-tab-style="dot"] .sp-tab__label-suffix {
    display: inline;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
    letter-spacing: inherit;
  }
}

/* =========================================================
   VARIANT C — SIDE-RAIL (a variant of underline, on the LEFT).
   Thin vertical rail on the left of each tab; active gets colored
   thick rail. Reads as an editorial index/list.
   ========================================================= */
body[data-tab-style="rail"] .sp-tabs {
  gap: 0;
  border-top: 1px solid #ececec;
  border-bottom: 1px solid #ececec;
}
body[data-tab-style="rail"] .sp-tab {
  position: relative;
  padding: 22px 14px;
  text-align: left;
  border-right: 1px solid #f1f2f4;
}
body[data-tab-style="rail"] .sp-tab:last-child { border-right: none; }
body[data-tab-style="rail"] .sp-tab::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18px;
  bottom: 18px;
  width: 2px;
  background: #e5e7eb;
  transition: background 0.2s ease, width 0.2s ease;
}
body[data-tab-style="rail"] .sp-tab:hover { color: #111827; }
body[data-tab-style="rail"] .sp-tab:hover::before { background: var(--tab-pillar); opacity: 0.6; }
body[data-tab-style="rail"] .sp-tab.is-active-ethics,
body[data-tab-style="rail"] .sp-tab.is-active-compliance,
body[data-tab-style="rail"] .sp-tab.is-active-environmental,
body[data-tab-style="rail"] .sp-tab.is-active-social,
body[data-tab-style="rail"] .sp-tab.is-active-educational {
  color: #111827;
  font-weight: 600;
}
body[data-tab-style="rail"] .sp-tab.is-active-ethics::before,
body[data-tab-style="rail"] .sp-tab.is-active-compliance::before,
body[data-tab-style="rail"] .sp-tab.is-active-environmental::before,
body[data-tab-style="rail"] .sp-tab.is-active-social::before,
body[data-tab-style="rail"] .sp-tab.is-active-educational::before {
  background: var(--tab-accent);
  width: 3px;
}
/* Rail: MOBILE — vertical stack (rail already reads well vertically) */
@media (max-width: 720px) {
  body[data-tab-style="rail"] .sp-tabs {
    display: flex;
    flex-direction: column;
    margin-top: 40px;
    border-top: 1px solid #ececec;
    border-bottom: 1px solid #ececec;
  }
  body[data-tab-style="rail"] .sp-tab {
    flex: none;
    width: 100%;
    padding: 16px 18px;
    font-size: 14px;
    letter-spacing: 0.01em;
    line-height: 1.35;
    border-right: none;
    border-bottom: 1px solid #f1f2f4;
  }
  body[data-tab-style="rail"] .sp-tab:last-child { border-bottom: none; }
  body[data-tab-style="rail"] .sp-tab__label-main,
  body[data-tab-style="rail"] .sp-tab__label-suffix {
    display: inline;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
    letter-spacing: inherit;
  }
  /* Rail bar spans full row height on mobile */
  body[data-tab-style="rail"] .sp-tab::before {
    top: 0;
    bottom: 0;
  }
}

/* =========================================================
   VARIANT D — CLASSIC (legacy filled-block; the original design)
   Keep available as a fallback / A-B compare.
   ========================================================= */
body[data-tab-style="classic"] .sp-tabs {
  border: 1px solid #e5e7eb;
}
body[data-tab-style="classic"] .sp-tab {
  padding: 18px 12px;
  background: #ffffff;
  color: #6b7280;
  border-left: 1px solid #e5e7eb;
}
body[data-tab-style="classic"] .sp-tab__num { display: inline; margin-right: 4px; }
body[data-tab-style="classic"] .sp-tab:first-child { border-left: none; }
body[data-tab-style="classic"] .sp-tab:hover { background: #f9fafb; color: #111827; }
body[data-tab-style="classic"] .sp-tab.is-active-ethics        { background: #d97706; color: #fff; }
body[data-tab-style="classic"] .sp-tab.is-active-compliance    { background: #1d4ed8; color: #fff; }
body[data-tab-style="classic"] .sp-tab.is-active-environmental { background: #047857; color: #fff; }
body[data-tab-style="classic"] .sp-tab.is-active-social        { background: #0e7490; color: #fff; }
body[data-tab-style="classic"] .sp-tab.is-active-educational   { background: #6d28d9; color: #fff; }
@media (max-width: 640px) {
  body[data-tab-style="classic"] .sp-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-top: 40px;
  }
  body[data-tab-style="classic"] .sp-tab {
    border-left: none;
    border-top: 1px solid #e5e7eb;
    padding: 14px 10px;
    font-size: 12px;
    line-height: 1.3;
  }
  body[data-tab-style="classic"] .sp-tab:nth-child(odd) { border-right: 1px solid #e5e7eb; }
  body[data-tab-style="classic"] .sp-tab:nth-child(1),
  body[data-tab-style="classic"] .sp-tab:nth-child(2) { border-top: none; }
  body[data-tab-style="classic"] .sp-tab:nth-child(5) { grid-column: 1 / -1; border-right: none; }
}

/* =========================================================
   4. CONTENT SCAFFOLD (shared across all 5 pillars)
   ========================================================= */
.sp-main {
  /* Extra breathing room before the dark footer starts.
     Previously 96px felt cramped once the footer landed. */
  padding-bottom: 160px;
}
@media (min-width: 768px) {
  .sp-main { padding-bottom: 200px; }
}

/* =========================================================
   FOOTER — restore dark background on light pillar pages.
   main.css sets `.footer { background: transparent !important }`
   assuming the homepage's dark body shows through. Our page
   has a WHITE body, so force the dark fill back for contrast.
   ========================================================= */
/* Just the dark background — everything else (padding, spacing,
   layout) inherits from main.css so it matches the homepage footer
   pixel-for-pixel. */
.sus-pillar-page .footer,
.sus-pillar-page .footer.footer--compact {
  background: #0a0a0a !important;
  color: #ffffff;
  margin-top: 80px;
}
@media (min-width: 768px) {
  .sus-pillar-page .footer,
  .sus-pillar-page .footer.footer--compact {
    margin-top: 120px;
  }
}

/* =========================================================
   HERO IMAGE — kill fade-in / opacity transition so the tree
   photo paints synchronously with the rest of the page.

   page-transition.js keeps the whole page under a dark overlay
   until window.load finishes, THEN fades in. That's why the
   hero looked "late" — the image was actually loaded on time,
   but hidden behind the transition veil. We can't rip out the
   overlay (other pages need it), but we CAN make sure the hero
   img has no additional animation on top.
   ========================================================= */
.sus-pillar-page .sp-hero__img {
  animation: none !important;
  transition: none !important;
  opacity: 1 !important;
}

/* Explicit background on the hero itself using CSS too —
   backup in case <img> is still decoding when overlay lifts.
   That way the container is never a bare dark rectangle. */
.sp-hero {
  background-image: url('../assets/sustainability/hero-tree.jpg');
  background-size: cover;
  background-position: center 45%;
  background-repeat: no-repeat;
  background-color: #1f3a1a; /* leaf-green fallback until img decodes */
}
.sp-section {
  padding-top: 80px;
}
.sp-heading {
  text-align: center;
  font-weight: 400;
  color: #2b2f36;
  letter-spacing: -0.01em;
  font-size: 26px;
  line-height: 1.3;
  margin: 0;
}
@media (min-width: 768px) {
  .sp-heading { font-size: 28px; }
}
.sp-heading--sm { font-size: 20px; }
.sp-heading__rule {
  display: block;
  width: 40px;
  height: 2px;
  margin: 14px auto 0;
  border-radius: 1px;
}
.sp-sub {
  text-align: center;
  font-size: 14px;
  color: #64748b;
  font-weight: 300;
  line-height: 1.7;
  max-width: 640px;
  margin: 24px auto 0;
}

/* ---- Guidelines list (bottom of every pillar) ---- */
.sp-guidelines {
  margin-top: 64px;
  padding-top: 40px;
  border-top: 1px solid #e5e7eb;
}
.sp-guidelines__list {
  max-width: 780px;
  margin: 40px auto 0;
}
.sp-guidelines__item {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding: 20px 0;
  border-top: 1px solid #e5e7eb;
}
.sp-guidelines__item:last-child { border-bottom: 1px solid #e5e7eb; }
.sp-guidelines__num {
  /* Now a symbol container instead of a mono numeral. */
  width: 28px; height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding-top: 0;
}
.sp-guidelines__num svg { width: 22px; height: 22px; stroke-width: 1.5; }
.sp-guidelines__item p {
  font-size: 14px;
  color: #475569;
  font-weight: 300;
  line-height: 1.65;
  margin: 0;
}

/* =========================================================
   SYMBOL RINGS — replaces numeric badges w/ inline SVGs.
   Used across the 3-column ethics layout AND the guidelines
   list (bottom of each pillar page). Each pillar has its own
   accent color; the SVG symbols themselves are inlined in HTML.
   ========================================================= */
.sp-symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  flex-shrink: 0;
}
.sp-symbol svg { width: 100%; height: 100%; stroke-width: 1.6; }

/* =========================================================
   ETHICS layout — 3 centered columns w/ symbol ring
   ========================================================= */
.sp-ethics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 40px;
  margin-top: 64px;
}
.sp-ethics-col {
  text-align: center;
  padding: 0 8px;
  /* Card-grid top-line alignment: flex column so h3/p/tag anchor from
     the top and tag pins to the bottom. See CLAUDE.md 2026-08-17. */
  display: flex;
  flex-direction: column;
  align-items: center;
}
.sp-ethics-ring {
  width: 64px; height: 64px;
  border: 1px solid #fcd34d;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px;
  color: #d97706;
  background: rgba(254, 243, 199, 0.25);
  transition: background 0.2s ease, border-color 0.2s ease;
}
.sp-ethics-ring:hover {
  background: rgba(254, 243, 199, 0.6);
  border-color: #d97706;
}
.sp-ethics-ring svg { width: 26px; height: 26px; stroke-width: 1.5; }
.sp-ethics-col h3 {
  font-size: 15px;
  font-weight: 600;
  color: #1e293b;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
  line-height: 1.3;
  /* Reserve 2 lines so a 1-line title doesn't let its p float up higher
     than sibling cards with 2-line titles. */
  min-height: 2.6em;
}
.sp-ethics-col p {
  font-size: 13px;
  color: #64748b;
  font-weight: 300;
  line-height: 1.65;
  margin: 0;
  /* Absorb leftover vertical space so the tag below is pinned to the
     card's bottom edge. */
  flex: 1 1 auto;
}
.sp-ethics-col .sp-ethics-tag {
  display: block;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #d97706;
  margin-top: 16px;
}
.sp-ethics .sp-guidelines__num { color: #d97706; }

/* =========================================================
   COMPLIANCE layout — 2-col: soft panel + rule stack
   ========================================================= */
.sp-comp-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  margin-top: 40px;
  align-items: start;
}
@media (min-width: 768px) {
  .sp-comp-grid { grid-template-columns: 1fr 1fr; }
}
.sp-comp-panel {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  padding: 40px;
}
.sp-comp-panel__eyebrow {
  display: inline-block;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  color: #1d4ed8;
  letter-spacing: 0.2em;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.sp-comp-panel h3 {
  font-size: 20px;
  font-weight: 400;
  color: #1e293b;
  letter-spacing: -0.01em;
  line-height: 1.4;
  margin: 0 0 16px;
}
.sp-comp-panel p { font-size: 13px; color: #64748b; font-weight: 300; line-height: 1.7; margin: 0; }
.sp-comp-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid #e2e8f0;
}
.sp-comp-stats .n { font-size: 24px; font-weight: 300; color: #1d4ed8; line-height: 1; }
.sp-comp-stats .l {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #64748b;
  margin-top: 6px;
}
.sp-comp-rules {
  border-top: 1px solid #e5e7eb;
  border-bottom: 1px solid #e5e7eb;
}
.sp-comp-rules > div { padding: 24px 0; border-top: 1px solid #e5e7eb; }
.sp-comp-rules > div:first-child { border-top: none; }
.sp-comp-rules h4 { font-size: 14px; font-weight: 600; color: #1e293b; letter-spacing: -0.01em; margin: 0; }
.sp-comp-rules p { font-size: 13px; color: #64748b; font-weight: 300; line-height: 1.65; margin: 8px 0 0; }
.sp-compliance .sp-guidelines__num { color: #1d4ed8; }

/* =========================================================
   ENVIRONMENTAL layout — 3 circle badges
   ========================================================= */
.sp-env-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 48px;
  margin-top: 48px;
}
.sp-env-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 24px;
}
.sp-env-badge {
  width: 160px; height: 160px;
  border: 1px solid #a7f3d0;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.sp-env-badge__inner {
  width: 128px; height: 128px;
  border: 1px solid #d1fae5;
  background: rgba(236, 253, 245, 0.4);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #047857;
  font-weight: 400;
  font-size: 15px;
  letter-spacing: -0.01em;
}
.sp-env-badge__inner .sp-env-label { line-height: 1; }
.sp-env-badge__inner svg { display: block; }
/* Social card eyebrow: was text ("Pillar 01"), now a symbol */
.sp-soc-card__eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: rgba(6, 182, 212, 0.08);
  color: #0e7490;
}
.sp-soc-card__eyebrow svg { display: block; }
/* Educational timeline number cell: now a symbol */
.sp-edu-row .num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sp-edu-row .num svg { display: block; }
/* Text wrapper (the <div> holding h4 + p) — inherit center alignment
   from the flex parent and force flex column so h4 and p both stack
   centered regardless of h4's min-height, wrap count, or max-width. */
.sp-env-col > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
}
.sp-env-col h4 {
  font-size: 15px;
  font-weight: 600;
  color: #1e293b;
  letter-spacing: -0.01em;
  margin: 0;
  line-height: 1.3;
  /* Reserve 2 lines so a 1-line title doesn't let its body float up
     higher than sibling cards with 2-line titles. Keeps p top on the
     same y across all three env cards. See CLAUDE.md 2026-08-17. */
  min-height: 2.6em;
  text-align: center;
}
.sp-env-col p {
  font-size: 13px;
  color: #64748b;
  font-weight: 300;
  line-height: 1.65;
  margin: 8px 0 0;
  max-width: 220px;
  text-align: center;
}
.sp-environmental .sp-guidelines__num { color: #047857; }

/* =========================================================
   SOCIAL layout — 4 minimal outline cards
   ========================================================= */
.sp-soc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 32px;
  margin: 40px auto 0;
  max-width: 900px;
}
.sp-soc-card {
  border: 1px solid #e5e7eb;
  padding: 32px;
  background: #fff;
  transition: border-color 0.2s ease;
}
.sp-soc-card:hover { border-color: #0e7490; }
.sp-soc-card__eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  color: #0e7490;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
}
.sp-soc-card h3 {
  font-size: 17px;
  font-weight: 600;
  color: #1e293b;
  letter-spacing: -0.01em;
  margin: 12px 0 8px;
  line-height: 1.3;
  /* Reserve 2 lines so p starts at the same y across siblings. */
  min-height: 2.6em;
}
.sp-soc-card p { font-size: 13px; color: #64748b; font-weight: 300; line-height: 1.65; margin: 0; }
.sp-social .sp-guidelines__num { color: #0e7490; }

/* =========================================================
   EDUCATIONAL layout — 3 timeline rows
   ========================================================= */
.sp-edu-list { max-width: 780px; margin: 40px auto 0; }
.sp-edu-row {
  display: grid;
  grid-template-columns: 60px 1fr 130px;
  gap: 24px;
  align-items: start;
  padding: 32px 0;
  border-top: 1px solid #e5e7eb;
}
.sp-edu-row:last-child { border-bottom: 1px solid #e5e7eb; }
.sp-edu-row .num {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 26px;
  font-weight: 300;
  color: #6d28d9;
}
.sp-edu-row h3 {
  font-size: 15px;
  font-weight: 600;
  color: #1e293b;
  letter-spacing: -0.01em;
  margin: 0;
  line-height: 1.3;
  /* Reserve 2 lines so p starts at the same y across sibling rows. */
  min-height: 2.6em;
}
.sp-edu-row p { font-size: 13px; color: #64748b; font-weight: 300; line-height: 1.65; margin: 8px 0 0; }
.sp-edu-row .phase {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  color: #6d28d9;
  text-align: right;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 600;
}
@media (max-width: 1024px) {
  .sp-edu-row { grid-template-columns: 1fr; gap: 8px; text-align: left; }
  .sp-edu-row .num { justify-self: center; }
  /* Titles centered on mobile+tablet per user request 2026-08-19,
     but description + phase stay left-aligned for readability. */
  .sp-edu-row h3 { text-align: center; }
  .sp-edu-row p { text-align: left; }
  .sp-edu-row .phase { text-align: left; }
}
.sp-educational .sp-guidelines__num { color: #6d28d9; }