/* ── Pillars page background ─────────────────── */

.pillars-page {
   background: var(--ss-cream);
}

/* ── Hero ────────────────────────────────────── */

.pillars-hero {
   padding: 64px 80px 32px;
   background: var(--ss-cream);
   display: block;  /* override section flex */
}

.pillars-hero-inner {
   max-width: 980px;
   margin: 0 auto;
   text-align: center;
}

.pillars-h1 {
   font-family: var(--ss-font-display);
   font-size: clamp(36px, 7vw, 84px);
   font-weight: 400;
   line-height: 0.98;
   letter-spacing: -3px;
   color: var(--ss-ink);
   margin: 0 0 24px;
}

.pillars-h1 em {
   font-style: italic;
   color: var(--ss-moss-deep);
}

.pillars-h1 em.accent {
   color: var(--ss-terracotta);
}

.pillars-lead {
   font-size: 18px;
   line-height: 1.55;
   color: var(--ss-ink-soft);
   max-width: 720px;
   margin: 0 auto;
}

/* ── Main 2-col grid ─────────────────────────── */

.pillars-main {
   padding: 20px 80px 80px;
   display: grid;
   grid-template-columns: minmax(0, 660px) minmax(0, 1fr);
   gap: 48px;
   align-items: start;
   /* override section defaults */
   flex-direction: unset;
}

.pillars-plant-wrap {
   position: sticky;
   top: 100px;
   align-self: start;
}

.pillars-plant-wrap svg {
   width: 100%;
   height: auto;
   max-width: 620px;
   display: block;
}

/* ── Pillar cards ────────────────────────────── */

.pillar-cards {
   /* Rows are proportional to each plant zone (0-1600 viewBox, split at zone midpoints).
      Zone boundaries: 435 / 730 / 985 / 1290 — giving proportions 435:295:255:305:310. */
   display: grid;
   grid-template-rows: 435fr 295fr 255fr 305fr 310fr;
   gap: 12px;
   align-items: center;
}

.pillar-card {
   background: var(--ss-paper);
   border-radius: 14px;
   padding: 22px 26px;
   border: 1px solid rgba(42, 46, 34, 0.065);
   box-shadow: 0 6px 16px rgba(28, 30, 22, 0.05), 0 1px 3px rgba(28, 30, 22, 0.04);
}

.pillar-card-header {
   display: flex;
   align-items: baseline;
   gap: 14px;
   margin-bottom: 10px;
}

.pillar-card-num {
   font-family: var(--ss-font-display);
   font-style: italic;
   font-size: 28px;
   font-weight: 500;
   line-height: 1;
   letter-spacing: -0.5px;
   color: var(--accent, var(--ss-moss-deep));
}

.pillar-card-title {
   font-family: var(--ss-font-display);
   font-size: 24px;
   font-weight: 500;
   color: var(--ss-ink);
   letter-spacing: -0.5px;
   line-height: 1.1;
}

.pillar-card-body {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 16px;
}

.pillar-col-label {
   font-family: var(--ss-font-body);
   font-size: 10px;
   letter-spacing: 1.8px;
   text-transform: uppercase;
   font-weight: 700;
   margin-bottom: 6px;
}

.pillar-col-label--accent {
   color: var(--accent, var(--ss-moss-deep));
}

.pillar-col-label--soft {
   color: var(--ss-ink-soft);
}

.pillar-col-text {
   font-family: var(--ss-font-body);
   font-size: 13px;
   color: var(--ss-ink);
   line-height: 1.55;
}

.pillar-col-text--soft {
   color: var(--ss-ink-soft);
}

.pillar-card-foot {
   margin-top: 14px;
   padding: 8px 12px;
   background: var(--ss-cream);
   border-radius: 8px;
   font-family: var(--ss-font-body);
   font-size: 12px;
   color: var(--ss-moss-deep);
   font-weight: 500;
}

/* ── Caption strip ───────────────────────────── */

.pillars-captions {
   padding: 32px 80px 64px;
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 24px;
   max-width: 1280px;
   margin: 0 auto;
   box-sizing: border-box;
   /* override section defaults */
   flex-direction: unset;
}

.caption-card {
   padding: 24px 28px;
   border-radius: 14px;
}

.caption-parents {
   background: var(--ss-paper);
   border: 1px solid rgba(42, 46, 34, 0.065);
}

.caption-slps {
   background: var(--ss-moss-deep);
   color: var(--ss-paper);
   position: relative;
   overflow: hidden;
}

.caption-eyebrow {
   font-family: var(--ss-font-body);
   font-size: 11px;
   letter-spacing: 2.5px;
   text-transform: uppercase;
   font-weight: 700;
   margin-bottom: 8px;
}

.caption-parents .caption-eyebrow { color: var(--ss-terracotta); }
.caption-slps .caption-eyebrow    { color: var(--ss-butter); position: relative; }

.caption-title {
   font-family: var(--ss-font-display);
   font-size: 22px;
   font-weight: 500;
   line-height: 1.3;
   letter-spacing: -0.3px;
   margin: 0 0 8px;
}

.caption-parents .caption-title { color: var(--ss-ink); }
.caption-slps .caption-title    { color: var(--ss-paper); position: relative; }

.caption-body {
   font-family: var(--ss-font-body);
   font-size: 13px;
   line-height: 1.55;
   margin: 0;
}

.caption-parents .caption-body { color: var(--ss-ink-soft); }
.caption-slps .caption-body    { color: rgba(251, 248, 241, 0.8); position: relative; }

.caption-slps-deco {
   position: absolute;
   right: -30px;
   top: -30px;
   width: 140px;
   height: 140px;
   opacity: 0.18;
   pointer-events: none;
}

/* ── Footer ──────────────────────────────────── */

.pillars-footer {
   background: var(--ss-paper);
   padding: 40px 80px;
   border-top: var(--ss-border-hairline);
   display: flex;
   justify-content: space-between;
   align-items: center;
   /* override section defaults */
   flex-direction: unset;
   gap: 0;
}

.pillars-footer-brand {
   display: inline-flex;
   align-items: center;
   gap: 12px;
}

.pillars-footer-tagline {
   font-family: var(--ss-font-display);
   font-style: italic;
   font-size: 16px;
   color: var(--ss-moss-deep);
   font-weight: 500;
}

.pillars-footer-copy {
   font-family: var(--ss-font-body);
   font-size: 12px;
   color: var(--ss-ink-soft);
   margin: 0;
}

/* ── Mobile ──────────────────────────────────── */

@media (max-width: 1000px) {
   .pillars-hero {
      padding: 40px 24px 24px;
   }

   .pillars-main {
      padding: 16px 24px 48px;
      grid-template-columns: 1fr;
   }

   .pillars-plant-wrap {
      position: static;
      max-width: 340px;
      margin: 0 auto;
   }

   .pillar-cards {
      display: flex;
      flex-direction: column;
      gap: 14px;
   }

   .pillar-card-body {
      grid-template-columns: 1fr;
   }

   .pillars-captions {
      padding: 24px 24px 48px;
      grid-template-columns: 1fr;
   }

   .pillars-footer {
      padding: 32px 24px;
      flex-direction: column;
      gap: 12px;
      text-align: center;
   }
}