/* brand-story.css — bespoke section styles for the brand-story pages (Our Story, Creators,
   Sustainability). Uses the real tokens from styles.css :root (var(--bg)/(--text)/(--volt) etc.),
   so it inherits the live light theme. Load AFTER styles.css. Draft pages are unlinked (noindex,
   not in nav or sitemap) until real photography + ACCC sign-off land. */

.story-wrap{max-width:var(--content-max,980px);margin:0 auto;padding:0 24px}
.story-wrap p{max-width:64ch}

.story-hook{font-size:clamp(1.7rem,4.5vw,2.5rem);font-weight:800;line-height:1.12;margin:24px 0 0;letter-spacing:-.01em}
.story-eyebrow{color:var(--text-muted);text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;margin:44px 0 8px}
.story-h1{font-size:clamp(1.7rem,4.5vw,2.5rem);font-weight:800;line-height:1.12;margin:40px 0 12px;letter-spacing:-.01em}

.story-ph{background:var(--bg-tile);border:1px solid var(--border);border-radius:var(--radius-card,2px);
  display:flex;align-items:center;justify-content:center;text-align:center;color:var(--text-muted);font-size:.8rem;padding:16px}
.story-ph.ratio-16-9{aspect-ratio:16/9}

.story-proof{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:24px 0;padding:24px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.story-proof div{text-align:center}
.story-proof .n{font-size:1.5rem;font-weight:800;display:block}
.story-proof .l{color:var(--text-muted);font-size:.8rem;margin-top:6px}

ol.story-plan{counter-reset:s;list-style:none;padding:0;margin:24px 0}
ol.story-plan li{counter-increment:s;padding:14px 0 14px 44px;position:relative;border-bottom:1px solid var(--border)}
ol.story-plan li::before{content:counter(s);position:absolute;left:0;top:12px;width:28px;height:28px;border-radius:var(--radius-card,2px);background:var(--text);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.9rem}

/* CTA: real .btn is width:100% — scope back to inline auto-width for the story CTA row */
.story-cta{display:flex;gap:12px;flex-wrap:wrap;margin:32px 0 8px}
.story-cta .btn{width:auto;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;padding:14px 26px;min-height:44px}

.story-stakes{color:var(--text-muted);font-style:italic}
.story-success{font-size:1.15rem;font-weight:600}

.story-card{background:var(--bg-section);border:1px solid var(--border);border-radius:var(--radius-card,2px);padding:28px;margin:24px 0;text-align:center}
.story-card .btn{width:auto;display:inline-flex;padding:14px 26px;min-height:44px;margin-top:8px}
.story-muted{color:var(--text-muted);font-size:.85rem}

.story-held{background:var(--bg-section);border:1px solid var(--border);border-left:3px solid var(--text);border-radius:var(--radius-card,2px);padding:16px 18px;margin:24px 0}
.story-held h2{font-size:.95rem;margin:0 0 8px}
.story-held li{color:var(--text-muted);font-size:.85rem;margin-bottom:6px}

/* editor-only note; never shown once real content lands */
.story-flag{background:#FBF7E8;border:1px solid #E4D9A8;color:#6b5d1f;border-radius:var(--radius-card,2px);padding:10px 14px;font-size:.75rem;margin:8px 0}