:root { --hive-green:#143e26; --hive-tint:#edf7f0; }
.case-study-page { color:#111; }
.case-study-page h1,.case-study-page h2,.case-study-page h3 { margin:0; font-weight:500; }
.case-study-page h1 { font-size:36px; line-height:1.35; }
.case-study-page h2 { font-size:24px; line-height:normal; }
.case-study-page h3 { font-size:18px; line-height:normal; }
.case-eyebrow,.case-meta { color:var(--hive-green); font-size:18px; font-weight:600; line-height:2; text-transform:uppercase; }
.case-container { width:100%; padding-inline:42px; }
.case-hero { display:flex; flex-direction:column; }
.case-hero__image { aspect-ratio:4/3; overflow:hidden; }
.case-hero__image img { height:100%; object-fit:cover; }
.case-hero__content { display:flex; flex-direction:column; gap:18px; padding:30px 42px; }
.case-hero__summary { color:#666; font-size:18px; font-weight:300; line-height:1.8; }
.case-meta { display:flex; gap:10px; }
.role-list { display:flex; flex-wrap:wrap; gap:10px; margin:0; padding:0; list-style:none; }
.role-list li { padding:2px 4px; color:var(--hive-green); background:var(--hive-tint); font-size:12px; font-weight:300; line-height:1.8; }
.case-section { padding-block:42px; }
.case-section--tint { background:var(--hive-tint); }
.overview-section { padding-bottom:30px; }
.opportunity-section { min-height:0; padding-top:30px; }
.overview-grid,.opportunity-grid,.learning-grid { display:grid; gap:42px; }
.prose { margin-top:10px; color:#666; font-size:12px; font-weight:300; line-height:1.8; }
.prose p + p { margin-top:12px; }
.results { display:grid; gap:10px; color:var(--hive-green); }
.results strong { display:block; font-size:60px; font-weight:300; line-height:1; }
.results div p { font-size:18px; font-weight:300; line-height:1.8; }
figure { margin:0; }
.opportunity-grid figure { display:grid; gap:10px; }
.image-crop { aspect-ratio:4/3; overflow:hidden; }
.image-crop img { height:100%; object-fit:cover; object-position:center 12%; }
figcaption,.opportunity-grid figcaption { color:#666; font-size:12px; font-weight:300; line-height:1.8; }
.design-decisions { padding-block:42px; color:#fff; background:var(--hive-green); }
.design-decisions > .case-container { display:grid; gap:18px; }
.design-decisions > .case-container > h2 { font-size:20px; text-align:center; }
.decision-grid { display:grid; gap:10px; margin:0; padding:0; list-style:none; }
.decision-grid li { padding:10px 18px 18px; color:var(--hive-green); background:var(--hive-tint); }
.decision-grid span { font-size:18px; font-weight:600; line-height:2; }
.decision-grid p { margin-top:4px; color:#666; font-size:12px; font-weight:300; line-height:1.8; }
.section-heading { display:grid; gap:10px; margin-bottom:42px; }
.section-heading--solution { gap:30px; }
.section-heading--solution h2 { font-size:36px; line-height:1.35; }
.section-heading > p:last-child { color:#666; font-weight:300; line-height:1.8; }
.solution-section { padding-block:42px; }
.solution-block { display:grid; gap:30px; }
.solution-block + .solution-block { margin-top:42px; }
.solution-copy .prose { margin-top:10px; }
.comparison-grid { display:grid; gap:30px; }
.comparison-grid figure { display:grid; gap:10px; }
.comparison-grid figure > img { width:100%; }
.figma-shot { position:relative; overflow:hidden; border:1px solid #f2f0f0; border-radius:20px; }
.figma-shot img { position:absolute; max-width:none; }
.figma-shot--cart-before,.figma-shot--cart-after,.figma-shot--iteration { aspect-ratio:291/656; }
.figma-shot--cart-before img { top:-39.12%; left:0; width:100%; height:283.48%; }
.figma-shot--cart-after img { top:-18.74%; left:-3%; width:105.67%; height:391.85%; }
.figma-shot--tile-before { aspect-ratio:291/183.33; }
.figma-shot--tile-before img { top:-123.84%; left:0; width:100%; height:724.23%; }
.figma-shot--tile-after { aspect-ratio:291/217.28; }
.figma-shot--tile-after img { top:-290.43%; left:-3%; width:105.67%; height:1182.97%; }
.figma-shot--iteration img { inset:0; width:100%; height:100%; object-fit:cover; }
.learning-section { padding-block:42px; background:var(--hive-tint); }
.learning-section .case-eyebrow,.learning-section p { color:var(--hive-green); }
.learning-grid > p { font-size:12px; font-weight:300; line-height:1.8; }
.iteration-section { padding-block:42px; }
.iteration-grid { display:grid; gap:42px; }
.iteration-grid .section-heading { margin-bottom:0; }
.credits { padding-block:42px; }
.credits .case-container { display:flex; flex-direction:column; align-items:flex-start; gap:18px; }
.credits p { color:var(--hive-green); font-size:12px; font-weight:300; line-height:1.8; }
.credits p span { display:inline-block; padding-inline:4px; background:var(--hive-tint); }

@media (min-width:768px) {
  .case-study-page h1 { font-size:48px; }
  .case-study-page h2 { font-size:30px; }
  .case-study-page h3 { font-size:20px; }
  .case-eyebrow,.case-meta { font-size:20px; }
  .case-container { width:1200px; max-width:calc(100% - 80px); margin-inline:auto; padding-inline:0; }
  .case-hero { min-height:725px; flex-direction:row; align-items:center; padding:100px; }
  .case-hero__image { width:50%; max-width:700px; aspect-ratio:4/3; flex-shrink:0; }
  .case-hero__content { flex:1; gap:36px; padding:0 0 0 100px; }
  .case-hero__summary { font-size:20px; }
  .role-list li { font-size:14px; }
  .case-section { padding-block:100px; }
  .overview-section { padding-bottom:48px; }
  .opportunity-section { padding-top:48px; }
  .overview-grid { grid-template-columns:minmax(0,7fr) minmax(0,4fr); gap:clamp(36px,6.62vw,100px); }
  .opportunity-grid { grid-template-columns:minmax(0,420px) minmax(0,1fr); gap:clamp(36px,6.62vw,100px); }
  .prose,figcaption,.opportunity-grid figcaption,.learning-grid > p,.credits p { font-size:14px; }
  .results { gap:20px; }
  .results strong { font-size:clamp(60px,6.62vw,100px); }
  .results div p { font-size:20px; }
  .design-decisions { padding-block:100px; }
  .design-decisions > .case-container { gap:36px; }
  .design-decisions > .case-container > h2 { font-size:24px; }
  .decision-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; }
  .decision-grid li { min-height:301px; padding:20px 36px 36px; }
  .decision-grid span { font-size:20px; }
  .decision-grid p { font-size:14px; }
  .section-heading { max-width:700px; gap:20px; margin-bottom:100px; }
  .section-heading--solution { max-width:none; gap:48px; margin-bottom:48px; }
  .section-heading--solution h2 { font-size:48px; }
  .solution-section { padding-block:100px; }
  .solution-block { grid-template-columns:minmax(0,4fr) minmax(0,7fr); gap:clamp(36px,6.62vw,100px); align-items:start; }
  .solution-block:not(.product-tiles) { min-height:851px; }
  .solution-block + .solution-block { margin-top:48px; }
  .solution-block.product-tiles { grid-template-columns:minmax(0,464fr) minmax(0,700fr); gap:36px; }
  .solution-block.product-tiles { min-height:274px; }
  .comparison-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:48px; align-items:start; }
  .comparison-grid figure > img { height:auto; max-height:980px; object-fit:contain; }
  .product-tiles .comparison-grid { align-items:center; }
  .comparison-grid--wide { gap:36px; }
  .learning-section { padding-block:100px; }
  .learning-grid { grid-template-columns:minmax(0,420px) minmax(0,1fr); gap:clamp(36px,6.62vw,100px); }
  .learning-grid > div { min-height:195px; }
  .iteration-section { padding-block:100px; }
  .iteration-grid { grid-template-columns:minmax(0,4fr) minmax(0,7fr); gap:clamp(36px,6.62vw,100px); align-items:start; }
  .iteration-section .section-heading { margin-bottom:0; }
  .iteration-comparison { gap:36px; }
  .iteration-comparison { min-height:819px; }
  .credits { padding:48px 0 100px; }
  .credits .case-container { gap:18px; }
}