/* Reference type and spacing scale; existing font families and weights are preserved. */
.case-study,.grocery-case,.weather-case{
 --case-secondary-size:18px;--case-body-line:30px;
 --case-heading-size:40px;--case-heading-line:52px;
 --case-subheading-size:34px;--case-subheading-line:40px;
 --case-section-gap:100px;--case-title-gap:38px;--case-content-gap:32px;
}
@media(max-width:1000px){.case-study,.grocery-case,.weather-case{
 --case-secondary-size:16px;--case-body-line:26px;
 --case-heading-size:32px;--case-heading-line:44px;
 --case-subheading-size:28px;--case-subheading-line:32px;
 --case-section-gap:80px;--case-title-gap:30px;--case-content-gap:24px;
}}
@media(max-width:600px){.case-study,.grocery-case,.weather-case{
 --case-secondary-size:16px;--case-body-line:24px;
 --case-heading-size:28px;--case-heading-line:34px;
 --case-subheading-size:20px;--case-subheading-line:24px;
 --case-section-gap:40px;--case-title-gap:20px;--case-content-gap:16px;
}}
.case-row p,.project-intro-details>p,.project-intro-details dl,
.grocery-intro-details>p,.grocery-intro-details dl,.grocery-row p,.grocery-row ul,.grocery-mobile-panel p,
.weather-case p:not(.weather-stat-value):not(.weather-stat-label):not(.flow-note p),.weather-case li,.weather-meta dl{
 font-size:var(--case-secondary-size);line-height:var(--case-body-line)
}
main.case-study :is(h1,h2),main.grocery-case :is(h1,h2),main.weather-case :is(h1,h2){font-size:var(--case-heading-size);line-height:var(--case-heading-line)}
main.case-study .case-row h3,main.grocery-case .grocery-row h3,main.grocery-case .grocery-solutions>h3,main.weather-case h3,main.weather-case .weather-row h3{font-size:var(--case-subheading-size);line-height:var(--case-subheading-line)}
.weather-findings .weather-stat .weather-stat-value{font-size:var(--case-heading-size);line-height:var(--case-heading-line)}
.weather-section,.grocery-chapter{margin-top:var(--case-section-gap)}
.case-section{padding-top:var(--case-section-gap)}
.weather-intro,.weather-section,.grocery-intro,.grocery-chapter,.grocery-research,.grocery-solutions,.case-section{gap:var(--case-content-gap)}
.weather-intro>h1,.weather-section>h2,.grocery-intro>h1,.grocery-chapter>h2,.case-section>h2,.case-intro>h1{margin-bottom:calc(var(--case-title-gap) - var(--case-content-gap))}
.weather-meta,.grocery-intro-details{margin-top:0}
.weather-section>h2+p,.weather-section>h2+.weather-research-intro,.weather-section>h2+.weather-monetisation-copy,.weather-approach-section>h2+.weather-approach{margin-top:0}
.case-intro{display:flex;flex-direction:column;gap:var(--case-content-gap)}
.case-intro .project-intro-details{margin:0}
.grocery-row p+p,.grocery-row ul{margin-top:var(--case-content-gap)}
.weather-monetisation-copy,.weather-approach{gap:var(--case-content-gap)}
/* Keep all steps in Solution evenly spaced, including the User flow link. */
.weather-solution{gap:var(--case-title-gap)}
.weather-solution>h2{margin-bottom:0}
@media(max-width:1000px){.case-row,.grocery-row,.weather-row{gap:var(--case-content-gap)}}
/* Preserve the compact metric captions separately from body copy. */
.weather-case .weather-stat .weather-stat-label{font-size:16px;line-height:1.6}
@media(max-width:600px){.weather-case .weather-stat .weather-stat-label{font-size:14px}}

/* Let headings and supporting copy share the available width without overlap. */
main :is(.weather-row,.grocery-row,.case-row){grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:32px}
main :is(.weather-row,.grocery-row,.case-row)>*{min-width:0;overflow-wrap:break-word}
.weather-row.weather-audience{display:flex;flex-direction:column;gap:var(--case-content-gap)}
.weather-research-intro{gap:32px;flex-wrap:wrap}
.weather-research-intro>p:first-child{min-width:240px}
.weather-findings-heading{flex-wrap:wrap;align-items:baseline}
.weather-meta,.grocery-intro-details,.project-intro-details{flex-wrap:wrap}
.weather-meta>p,.grocery-intro-details>p,.project-intro-details>p{flex:1 1 320px;max-width:none;min-width:0}
.weather-meta dl,.grocery-intro-details dl,.project-intro-details dl{flex-wrap:wrap;gap:32px;max-width:100%;flex-shrink:1}
.weather-cards .weather-stat{padding:20px;overflow-wrap:break-word}
.weather-case .weather-findings .weather-stat .weather-stat-value{font-size:calc(var(--case-heading-size) - 4px);line-height:1.3}
.weather-case .weather-percent .weather-stat-value{font-size:76px;line-height:1.3}
.weather-case .weather-percent .weather-stat .weather-stat-label{font-size:12px}
@media(max-width:1000px){
 main :is(.weather-row,.grocery-row,.case-row){display:flex;flex-direction:column;gap:var(--case-content-gap)}
 .weather-case .weather-percent .weather-stat-value{font-size:28px}
 .weather-meta>p,.grocery-intro-details>p,.project-intro-details>p{flex:auto}
}
@media(max-width:600px){
 .weather-cards .weather-stat{padding:16px}
 .weather-case .weather-percent .weather-stat-value{font-size:24px}
 .weather-case .weather-percent .weather-stat .weather-stat-label{font-size:10px}
}

/* Subheadings remain one step below their section titles. */
@media(min-width:601px){
 main.weather-case .weather-row h3.weather-subheading,main.case-study .case-row h3,main.grocery-case .grocery-row h3{font-size:calc(var(--case-subheading-size) - 4px);line-height:1.2}
}
.weather-prototype-group{display:flex;flex-direction:column;gap:8px;min-width:0;width:100%;container-type:inline-size}
.weather-prototype-group>.weather-prototype{height:400px}
@container(max-width:520px){.weather-prototype-group>.weather-prototype{height:340px}}
@container(min-width:901px){.weather-prototype-group>.weather-prototype{height:680px}}

/* Solution is a section heading in both E-grocery chapters. */
.grocery-solutions>h2{margin-bottom:calc(var(--case-title-gap) - var(--case-content-gap))}

/* Solution starts a new section with the same spacing as other section headings. */
.grocery-solutions{margin-top:calc(var(--case-section-gap) - var(--case-content-gap))}

/* Survey captions follow the surrounding secondary copy colour. */
.weather-case .weather-percent .weather-stat .weather-stat-label{color:#67707f}
@media(max-width:1000px){.weather-case .weather-percent .weather-stat .weather-stat-label{color:#6b7280}}

.weather-results>h1{margin-bottom:calc(var(--case-title-gap) - var(--case-content-gap))}