/* Homepage refinement, 2 October review. Shared campaign styles remain unchanged. */
.home-page {
  --home-hero-type:clamp(2.5rem,5vw,4.75rem);
  --home-hero-protection:rgba(0,32,24,.78);
  --home-card-columns:4;
}
.home-page .campaign-hero {
  position:relative;
  min-height:0;
  aspect-ratio:2000 / 1333;
  padding:var(--space-4);
  background-image:linear-gradient(90deg,var(--home-hero-protection) 0%,var(--home-hero-protection) 27%,transparent 34%,transparent 66%,var(--home-hero-protection) 73%,var(--home-hero-protection) 100%),url('assets/images/tins-and-cans-513.webp');
  background-size:cover;
  background-position:center;
}
.home-page .hero-title {
  grid-template-columns:minmax(0,1fr) minmax(0,1.5fr) minmax(0,1fr);
  font-size:var(--home-hero-type);
  gap:var(--space-2);
  margin:0;
}
/* The same photograph supplies accessible alternative text and the narrow-screen image. */
.home-page .home-hero-photo {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  border:0;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}
.home-page .home-choices { padding-bottom:var(--space-8); }
.home-page .home-choice-intro { margin:0 0 var(--space-3); font-size:var(--text-body); font-weight:700; }
.home-page .home-material-grid {
  display:grid;
  grid-template-columns:repeat(var(--home-card-columns),minmax(0,1fr));
  gap:var(--space-3);
  align-items:stretch;
}
.home-page .home-material-grid > * { min-width:0; }
.home-page .example { width:100%; }
.home-page .example-copy { padding:var(--space-3); }
.home-page .example-number { margin-bottom:var(--space-2); letter-spacing:.04em; }
.home-page .example-footer { padding:0 var(--space-3) var(--space-3); }
.home-page .example-footer .text-link { max-width:100%; }
.home-page .example-footer .text-link svg { flex:none; }
.home-page .example > img { display:block; width:100%; height:auto; }
.home-page .aerosol-example > img { aspect-ratio:1400 / 933; object-fit:cover; object-position:50% 48%; }
/* Retain the existing secondary explanation with a quieter, readable measure. */
.home-page .why { padding-top:var(--space-4); }
@media (max-width:1199px) {
  .home-page { --home-card-columns:2; }
}
@media (max-width:1100px) {
  .home-page .campaign-hero {
    display:block;
    aspect-ratio:auto;
    min-height:0;
    padding:0;
    background:none;
    color:var(--ink);
  }
  .home-page .hero-title {
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:auto;
    min-height:0;
    font-size:clamp(2.5rem,6.5vw,4.75rem);
    gap:var(--space-3);
    margin:0 0 var(--space-3);
  }
  .home-page .hero-title > span:first-child { text-align:left; }
  .home-page .hero-title > span:last-child { grid-column:2; grid-row:auto; text-align:right; }
  .home-page .home-hero-photo {
    position:static;
    display:block;
    width:100%;
    height:auto;
    aspect-ratio:2000 / 1333;
    clip-path:none;
    overflow:visible;
    white-space:normal;
    border-radius:var(--radius-hero);
  }
}
@media (max-width:599px) {
  .home-page { --home-card-columns:1; }
  .home-page .hero-title {
    display:flex;
    flex-direction:column;
    gap:var(--space-1);
    font-size:clamp(2rem,8.5vw,3rem);
  }
  .home-page .hero-title > span { width:100%; }
  .home-page .hero-title > span:last-child { text-align:left; }
  .home-page .hero-title .line { display:inline; }
  .home-page .home-choices { padding-bottom:var(--space-5); }
}
@media (forced-colors:active) {
  .home-page .campaign-hero { background-image:none; color:CanvasText; }
}

/* Keep tablet checker copy broad and its photograph in the natural reading flow. */
.home-page .guidance-intro,
.home-page .guidance-details { display:contents; }
@media (min-width:768px) and (max-width:1199px) {
  .home-page .guidance { grid-template-columns:minmax(0,1fr); gap:var(--space-2); }
  .home-page .guidance-copy {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:var(--space-4);
    padding:var(--space-4);
    align-items:start;
  }
  .home-page .guidance-intro,
  .home-page .guidance-details { display:block; min-width:0; }
  .home-page .guidance-copy .display { max-width:none; font-size:clamp(2rem,3.5vw,2.625rem); }
  .home-page .guidance-copy .lead { margin-top:var(--space-3); }
  .home-page .guidance-details > p:first-child { margin-top:0; }
  .home-page .guidance-action { margin-top:0; padding-top:var(--space-3); }
  .home-page .guidance-details .text-link { gap:var(--space-2); }
  .home-page .guidance-details .text-link svg { flex:none; width:24px; height:24px; }
}