:root { --story-ink:#18332f; --story-soft:#4c5d57; --story-moss:#557252; --story-line:#d8e2da; --story-paper:#fffefb; }
html { scroll-behavior:smooth; }
body.story-home { background:var(--story-paper); color:var(--story-ink); }
body.story-home nav.top, body.story-home .page, body.story-home footer.site { max-width:1440px; }
body.story-home nav.top { position:relative; z-index:10; display:flex; align-items:center; justify-content:space-between; padding:27px clamp(24px,4vw,60px) 0; }
body.story-home nav.top .brand { font-weight:750; letter-spacing:-.02em; }
body.story-home nav.top ul { display:flex; flex-wrap:wrap; gap:clamp(12px,1.7vw,28px); }
body.story-home nav.top a { text-decoration:none; border-bottom:0; }
body.story-home nav.top li a:hover, body.story-home nav.top li a:focus-visible { color:#587359; text-decoration:underline; text-underline-offset:7px; }
body.story-home .story-page { padding:0 clamp(24px,4vw,60px) 110px; }
body.story-home footer.site { padding-left:clamp(24px,4vw,60px); padding-right:clamp(24px,4vw,60px); }
.story-page * { box-sizing:border-box; }
.story-page section, .story-page article[id] { scroll-margin-top:28px; }
.story-page a { text-underline-offset:4px; }
.story-eyebrow, .story-kicker, .story-number { color:var(--story-moss); font-size:12px; line-height:1.3; letter-spacing:.13em; text-transform:uppercase; font-weight:750; }
.story-eyebrow { margin:0 0 22px; }
.story-hero { display:grid; grid-template-columns:minmax(0,.93fr) minmax(0,1.07fr); gap:clamp(38px,5vw,82px); align-items:center; min-height: min(770px, calc(100svh - 80px)); padding:64px 0 74px; }
.story-hero-copy { position:relative; z-index:1; }
.story-hero .story-eyebrow span { color:#a1b1a8; padding:0 7px; }
.story-hero h1 { max-width:680px; margin:0; font-size:clamp(53px,5.1vw,88px); line-height:1.025; letter-spacing:-.065em; font-weight:735; text-wrap:balance; }
.story-hero h1 em { display:block; color:var(--story-moss); font-style:normal; }
.story-lead { max-width:55ch; margin:30px 0 0; font-size:clamp(19px,1.55vw,22px); line-height:1.51; }
.story-hero-actions { display:flex; flex-wrap:wrap; align-items:center; gap:16px 26px; margin-top:35px; }
.story-button { display:inline-flex; align-items:center; justify-content:space-between; gap:34px; padding:15px 19px; background:var(--story-ink); border:1px solid var(--story-ink)!important; border-radius:5px; color:white!important; font-size:15px; font-weight:700; text-decoration:none; }
.story-button:hover { background:#315249; color:white!important; }
.story-text-link { font-size:15px; font-weight:700; text-decoration:none; border-bottom:1px solid var(--story-moss)!important; }
.story-hero-index { display:flex; align-items:center; gap:14px; margin:64px 0 0; color:#687b6f!important; font-size:12px; letter-spacing:.08em; text-transform:uppercase; }
.story-hero-index span:first-child { color:var(--story-ink); font-weight:700; }
.story-line { display:inline-block; width:64px; height:1px; background:#a7baa9; }
.story-hero-visual { position:relative; min-height:575px; overflow:hidden; border-radius:18px; background:#e5eee9; isolation:isolate; }
.story-hero-visual:before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 10% 2%,#f5faf5 0,transparent 58%),linear-gradient(145deg,#e9f1e9,#dce9e3); }
.story-visual-label { position:absolute; z-index:3; top:26px; left:30px; color:#456556; font-size:11px; font-weight:750; letter-spacing:.14em; text-transform:uppercase; }
.story-hero-visual figure { position:absolute; z-index:1; margin:0; overflow:hidden; border:1px solid #d1ded5; border-radius:12px; background:#fff; box-shadow:0 22px 45px rgba(27,65,50,.13); }
.story-hero-peeku { width:79%; height:385px; top:73px; left:8%; }
.story-image-crop { overflow:hidden; background:#fff; }
.story-peeku-crop { height:325px; }
.story-peeku-crop img { display:block; width:190%; max-width:none; height:auto; margin-left:-82%; margin-top:-43%; }
.story-hero-visual figcaption { display:flex; justify-content:space-between; align-items:baseline; gap:10px; padding:13px 17px; color:var(--story-ink); font-size:13px; }
.story-hero-visual figcaption strong { font-size:16px; }
.story-hero-visual figcaption span { text-align:right; color:#66776e; }
.story-hero-fuel { width:59%; height:188px; right:3%; bottom:34px; z-index:2!important; }
.story-fuel-crop { height:136px; }
.story-fuel-crop img { display:block; width:133%; max-width:none; height:auto; margin-left:-28%; margin-top:-22%; }
.story-hero-fuel figcaption { padding:10px 13px; }
.story-hero-fuel figcaption strong { font-size:14px; }
.story-hero-fuel figcaption span { font-size:11px; }
.story-visual-caption { position:absolute; z-index:3; bottom:26px; left:24px; max-width:180px; margin:0; color:#607a6d!important; font-size:11px; line-height:1.3; }
.story-section { padding:110px 0; border-top:1px solid var(--story-line); }
.story-section-head { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(230px,.65fr); gap:30px 7%; align-items:end; margin-bottom:55px; }
.story-section-head .story-eyebrow { grid-column:1/-1; margin:0; }
.story-section-head h2 { max-width:800px; margin:0; font-size:clamp(42px,4.25vw,68px); line-height:1.08; letter-spacing:-.052em; text-wrap:balance; }
.story-section-head > p:last-child { max-width:43ch; margin:0; font-size:clamp(17px,1.5vw,21px); line-height:1.55; }
.story-case { display:grid; grid-template-columns:minmax(300px,.82fr) minmax(0,1.18fr); gap:clamp(32px,5vw,86px); align-items:center; padding:55px 0; border-top:1px solid var(--story-line); }
.story-case:first-of-type { border-top:0; padding-top:0; }
.story-case-fuel { grid-template-columns:minmax(0,1.18fr) minmax(300px,.82fr); }
.story-case-fuel .story-case-copy { grid-column:2; grid-row:1; }
.story-case-fuel .story-case-media { grid-column:1; grid-row:1; }
.story-case h3 { margin:8px 0 14px; font-size:clamp(40px,4vw,62px); line-height:1.05; letter-spacing:-.05em; }
.story-case-intro { max-width:33ch; font-size:clamp(22px,2vw,29px)!important; line-height:1.3!important; font-weight:600; color:var(--story-ink)!important; }
.story-case-copy > p:not(.story-case-intro,.story-kicker) { max-width:58ch; font-size:17px; line-height:1.65; }
.story-case-detail { max-width:57ch; margin:32px 0 24px; padding:18px 22px; border-left:3px solid var(--story-moss); background:#f3f7f1; }
.story-case-detail span { color:var(--story-moss); font-size:11px; font-weight:750; text-transform:uppercase; letter-spacing:.1em; }
.story-case-detail p { margin:8px 0 0; line-height:1.5; }
.story-inline-links { display:flex; flex-wrap:wrap; gap:13px 25px; font-size:14px; font-weight:700; }
.story-case-media { margin:0; padding:12px; border:1px solid #d9e4db; border-radius:13px; background:#f0f6f1; }
.story-case-media img { display:block; width:100%; height:auto; border-radius:6px; }
.story-case-media figcaption { padding:12px 2px 3px; color:#6a7d70; font-size:12px; line-height:1.4; }
.story-fuel-media { background:#edf6f2; }
.story-other-work { margin:34px 0 0; padding-top:25px; border-top:1px solid var(--story-line); font-size:15px; line-height:1.7; }
.story-journey { margin:0 calc(-1 * clamp(24px,4vw,60px)); padding:110px clamp(24px,4vw,60px); border:0; color:#fff; background:#193832; }
.story-journey .story-section-head h2, .story-journey h3 { color:#fff; }
.story-journey .story-section-head p, .story-journey .story-prose p, .story-journey-strip p { color:#cfddd2; }
.story-journey .story-eyebrow { color:#aacc9d; }
.story-journey-strip { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1px solid #5d766a; border-bottom:1px solid #5d766a; }
.story-journey-strip > div { padding:25px 24px 24px 0; }
.story-journey-strip > div+div { padding-left:26px; border-left:1px solid #5d766a; }
.story-journey-strip span { color:#9cc397; font-size:12px; }
.story-journey-strip h3 { margin:24px 0 12px; font-size:28px; letter-spacing:-.035em; }
.story-journey-strip p { max-width:25ch; margin:0; }
.story-prose { display:grid; grid-template-columns:1fr 1fr; gap:5%; margin-top:46px; }
.story-prose p { max-width:55ch; margin:0; font-size:17px; line-height:1.65; }
.story-ideas-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--story-line); border-bottom:1px solid var(--story-line); }
.story-ideas-grid article { padding:29px 27px 34px 0; }
.story-ideas-grid article+article { padding-left:28px; border-left:1px solid var(--story-line); }
.story-ideas-grid h3 { margin:30px 0 14px; font-size:clamp(24px,2vw,31px); line-height:1.13; letter-spacing:-.035em; }
.story-ideas-grid p { margin:0; font-size:16px; line-height:1.6; }
.story-language { display:grid; grid-template-columns:minmax(0,.75fr) minmax(0,1fr); gap:8%; align-items:center; margin:90px 0 55px; }
.story-language h3 { margin:0 0 24px; font-size:clamp(34px,3vw,49px); letter-spacing:-.045em; }
.story-language p { max-width:60ch; font-size:17px; line-height:1.65; }
.story-language-example { padding:32px 38px; border-radius:12px; background:#f1f6ed; }
.story-language-example span { font-size:11px; color:var(--story-moss); font-weight:750; text-transform:uppercase; letter-spacing:.1em; }
.story-language-example p { margin:12px 0 29px; font-size:19px; line-height:1.45; }
.story-language-example strong { display:block; padding-top:18px; border-top:1px solid var(--story-line); font-size:18px; }
.story-two-points { display:grid; grid-template-columns:1fr 1fr; gap:6%; border-top:1px solid var(--story-line); padding-top:30px; }
.story-two-points p { max-width:60ch; font-size:16px; line-height:1.6; }
.story-workspace-layout { display:grid; grid-template-columns:minmax(250px,.65fr) minmax(0,1fr); gap:6%; align-items:start; }
.story-workspace-steps { border-top:1px solid var(--story-line); }
.story-workspace-steps div { display:grid; grid-template-columns:40px 1fr; gap:2px 13px; padding:18px 0; border-bottom:1px solid var(--story-line); }
.story-workspace-steps span { grid-row:span 2; color:var(--story-moss); font-size:12px; }
.story-workspace-steps strong { font-size:19px; }
.story-workspace-steps p { margin:0; font-size:14px; }
.story-workspace-example { padding:clamp(25px,4vw,52px); background:#edf5ee; border-radius:13px; }
.story-workspace-example > span, .story-backstage-grid span, .story-takeaway-example > span { color:var(--story-moss); font-size:12px; font-weight:750; text-transform:uppercase; letter-spacing:.08em; }
.story-workspace-example h3 { margin:14px 0 30px; font-size:clamp(30px,2.7vw,44px); line-height:1.1; letter-spacing:-.04em; }
.story-output { margin:0 0 15px; padding:22px 23px; background:#fff; border:1px solid var(--story-line); border-radius:8px; }
.story-output-good { border-color:#95b399; }
.story-output small { color:var(--story-moss); font-weight:750; }
.story-output p { color:var(--story-ink)!important; font-size:19px; line-height:1.43; }
.story-output em { color:#61756a; font-size:13px; font-style:normal; }
.story-workspace-example > p:last-child { max-width:70ch; font-size:14px; line-height:1.55; }
.story-backstage-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:0 5%; border-top:1px solid var(--story-line); }
.story-backstage-grid article { padding:27px 0 33px; border-bottom:1px solid var(--story-line); }
.story-backstage-grid h3 { margin:19px 0 12px; font-size:clamp(26px,2.5vw,37px); letter-spacing:-.035em; }
.story-backstage-grid p { max-width:52ch; font-size:16px; line-height:1.6; }
.story-backstage-note { margin:34px 0 0; font-size:21px; font-weight:600; }
.story-takeaway { display:grid; grid-template-columns:minmax(0,.77fr) minmax(0,1fr); gap:6%; align-items:center; margin:0 calc(-1 * clamp(24px,4vw,60px)); padding:110px clamp(24px,4vw,60px); background:#eff5ed; border:0; }
.story-takeaway h2 { margin:0; font-size:clamp(43px,4vw,66px); letter-spacing:-.05em; line-height:1.08; }
.story-takeaway > div:first-child > p:last-child { max-width:43ch; font-size:19px; line-height:1.55; }
.story-takeaway-example { padding:30px; border:1px solid #c4d6c7; border-radius:11px; background:#fff; }
.story-takeaway-example h3 { font-size:26px; letter-spacing:-.035em; }
.story-takeaway-example dl { margin:0; }
.story-takeaway-example dl div { display:grid; grid-template-columns:100px 1fr; gap:20px; padding:15px 0; border-top:1px solid var(--story-line); }
.story-takeaway-example dt { font-weight:750; font-size:14px; }
.story-takeaway-example dd { margin:0; font-size:15px; line-height:1.45; }
.story-takeaway-question { grid-column:1/-1; margin:26px 0 0; color:var(--story-moss)!important; font-size:clamp(25px,2.8vw,39px); font-weight:650; letter-spacing:-.035em; }
.story-writing-list { border-top:1px solid var(--story-line); }
.story-writing-list a { display:grid; grid-template-columns:minmax(170px,.38fr) minmax(170px,.56fr) minmax(0,1fr) auto; gap:24px; align-items:baseline; padding:28px 0; border-bottom:1px solid var(--story-line)!important; text-decoration:none; }
.story-writing-list a:hover h3 { color:var(--story-moss); }
.story-writing-list span { color:var(--story-moss); font-size:12px; font-weight:700; }
.story-writing-list h3 { margin:0; font-size:23px; letter-spacing:-.035em; }
.story-writing-list p { margin:0; font-size:15px; line-height:1.5; }
.story-writing-list strong { font-size:13px; white-space:nowrap; }
.story-more-link { display:inline-block; margin-top:26px; font-weight:700; }
.story-about { display:grid; grid-template-columns:.8fr 1.2fr; gap:6%; padding-bottom:45px; }
.story-about h2 { margin:0; max-width:15ch; font-size:clamp(43px,4vw,66px); line-height:1.08; letter-spacing:-.05em; }
.story-about-copy p { max-width:58ch; margin:0 0 24px; font-size:18px; line-height:1.62; }
.story-about-links { display:flex; flex-wrap:wrap; gap:20px; margin-top:30px; font-size:15px; font-weight:700; }
@media(max-width:1100px) { .story-hero { min-height:0; gap:35px; } .story-hero h1 { font-size:clamp(48px,5.3vw,69px); } .story-hero-visual { min-height:500px; } .story-hero-peeku { top:63px; height:343px; } .story-peeku-crop { height:285px; } .story-hero-fuel { height:170px; } .story-fuel-crop { height:120px; } .story-hero-index { margin-top:38px; } .story-writing-list a { grid-template-columns:.35fr .6fr 1fr; } .story-writing-list strong { grid-column:2; } }
@media(max-width:800px) { body.story-home nav.top { padding-top:20px; } .story-hero { grid-template-columns:1fr; padding:65px 0 70px; } .story-hero h1 { max-width:650px; font-size:clamp(48px,9vw,75px); } .story-hero-visual { min-height:500px; } .story-hero-index { display:none; } .story-section { padding:76px 0; } .story-section-head { display:block; margin-bottom:36px; } .story-section-head h2 { font-size:clamp(40px,7vw,61px); } .story-section-head > p:last-child { margin-top:22px; } .story-case, .story-case-fuel { grid-template-columns:1fr; gap:28px; } .story-case-fuel .story-case-copy, .story-case-fuel .story-case-media { grid-column:1; grid-row:auto; } .story-case-copy { max-width:640px; } .story-journey, .story-takeaway { padding-top:80px; padding-bottom:80px; } .story-workspace-layout, .story-language, .story-takeaway { grid-template-columns:1fr; } .story-workspace-steps { display:grid; grid-template-columns:1fr 1fr; } .story-workspace-steps div { padding-right:20px; } .story-writing-list a { grid-template-columns:.5fr 1fr; } .story-writing-list p { grid-column:2; } .story-about { grid-template-columns:1fr 1fr; } }
@media(max-width:580px) { body.story-home nav.top { align-items:flex-start; gap:16px; } body.story-home nav.top ul { gap:9px 12px; font-size:12px; justify-content:flex-end; } body.story-home nav.top .brand { white-space:nowrap; font-size:13px; } .story-hero { padding:62px 0 48px; } .story-hero h1 { font-size:clamp(44px,12vw,62px); } .story-lead { margin-top:24px; font-size:18px; } .story-hero-actions { margin-top:26px; } .story-hero-visual { min-height:365px; } .story-visual-label { top:16px; left:18px; font-size:9px; } .story-hero-peeku { left:5%; top:51px; width:88%; height:246px; } .story-peeku-crop { height:198px; } .story-peeku-crop img { margin-top:-42%; } .story-hero-fuel { width:64%; height:128px; bottom:15px; right:2%; } .story-fuel-crop { height:91px; } .story-fuel-crop img { margin-top:-19%; } .story-hero-visual figcaption { padding:9px 10px; font-size:9px; } .story-hero-visual figcaption strong { font-size:12px; } .story-hero-fuel figcaption span { display:none; } .story-visual-caption { bottom:12px; left:10px; max-width:90px; font-size:9px; } .story-section { padding:64px 0; } .story-section-head h2 { font-size:clamp(37px,10vw,48px); } .story-section-head > p:last-child { font-size:17px; } .story-case { padding:36px 0; } .story-case h3 { font-size:44px; } .story-case-intro { font-size:22px!important; } .story-journey, .story-takeaway { padding-top:70px; padding-bottom:70px; } .story-journey-strip, .story-prose, .story-ideas-grid, .story-language, .story-two-points, .story-backstage-grid, .story-about { grid-template-columns:1fr; } .story-journey-strip > div { padding:18px 0!important; border-left:0!important; border-top:1px solid #5d766a; } .story-journey-strip > div:first-child { border-top:0; } .story-journey-strip h3 { margin:8px 0; } .story-prose { gap:17px; } .story-ideas-grid article { padding:26px 0!important; border-left:0!important; border-top:1px solid var(--story-line); } .story-ideas-grid article:first-child { border-top:0; } .story-language { margin:48px 0 30px; gap:26px; } .story-language-example { padding:22px; } .story-two-points { gap:0; } .story-workspace-steps { grid-template-columns:1fr; } .story-workspace-example { padding:23px; } .story-output { padding:17px; } .story-takeaway { gap:25px; } .story-takeaway-example { padding:22px; } .story-takeaway-example dl div { grid-template-columns:1fr; gap:5px; } .story-takeaway-question { margin-top:0; } .story-writing-list a { display:block; } .story-writing-list h3, .story-writing-list p { margin:10px 0; } .story-about-copy p { font-size:17px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }
@media print { body.story-home nav.top, body.story-home footer.site, .story-hero-actions, .story-about-links { display:none!important; } body.story-home .story-page { max-width:none; padding:0; } .story-hero, .story-section { break-inside:avoid; padding:30px 0; } .story-journey, .story-takeaway { color:#18332f; background:white; } .story-journey h2, .story-journey h3, .story-journey p { color:#18332f!important; } }
/* Dark panel text needs to beat the shared light-page heading rules. */
body.story-home .story-journey .story-journey-strip h3 { color:#fff; }
body.story-home .story-journey .story-journey-strip p { color:#cfddd2; }
/* The case narratives supply the full captions below; keep this visual compact. */
.story-hero-visual figcaption span { display:none; }
.story-peeku-crop img { width:200%; margin-left:-100%; }
.story-fuel-crop img { width:160%; margin-left:-31%; margin-top:-35%; }
@media(max-width:580px) {
  body.story-home nav.top { display:block; }
  body.story-home nav.top ul { justify-content:flex-start; margin-top:17px; font-size:13px; gap:12px 18px; }
  .story-peeku-crop img { margin-top:-42%; }
  .story-fuel-crop img { margin-top:-35%; }
}