/* Page-level layout. Each block is ported verbatim from the matching Astro
   page's scoped <style>. */

/* ===== Home ===== */
/* The lead paragraph and the proof points share the row, so neither is a
     lone column in empty space. */
  .home__intro {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: var(--msc-space-3xl);
    align-items: stretch;
  }

  .home__lede {
    display: flex;
    flex-direction: column;
    gap: var(--msc-space-lg);
  }

  /* Sits under the lead paragraph at body size, so it reads as the follow-on
     thought rather than competing with the capsule. */
  .home__lineage {
    max-width: 46ch;
    font-size: var(--msc-size-body);
    line-height: 1.6;
    opacity: 0.88;
  }

  .home__lineage a {
    color: var(--msc-red);
    font-weight: 600;
    text-underline-offset: 3px;
    white-space: nowrap;
  }

  /* The trust column is shorter than the lede, so it becomes a column that
     pushes the lockup to its foot, landing it level with the lineage line. */
  .home__trust {
    padding-block-start: var(--msc-space-2xs);
    display: flex;
    flex-direction: column;
    gap: var(--msc-space-2xl);
    height: 100%;
  }

  /* The one place the lockup is shown at a size where the artwork can be read.
     Full colour on Off White: the surface the portrait file is designed for. */
  .home__crest {
    width: auto;
    height: 280px;
    margin-block-start: auto;
    align-self: center;
  }

  @media (max-width: 60rem) {
    .home__intro {
      grid-template-columns: 1fr;
      gap: var(--msc-space-2xl);
    }

    /* One column: no adjacent text to bottom-align with, and the header
       already carries the lockup a short scroll above. */
    .home__crest {
      display: none;
    }
  }

  .home__services {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--msc-space-lg);
  }

  .home__services-note {
    margin-block-start: var(--msc-space-xl);
    font-size: var(--msc-size-body);
  }

  .home__services-note a {
    color: var(--msc-red);
    font-weight: 600;
    text-underline-offset: 3px;
  }

  .home__problem {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: var(--msc-space-3xl);
    align-items: start;
  }

  .home__problem-body p {
    font-size: var(--msc-size-body-lg);
    opacity: 0.92;
  }

  .home__mid-cta {
    margin-block-start: var(--msc-space-2xl);
  }

  .home__types {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--msc-space-md) var(--msc-space-lg);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .home__types li {
    padding-block-start: var(--msc-space-sm);
    border-block-start: 1px solid var(--msc-hairline);
    font-size: var(--msc-size-body);
    font-weight: 600;
  }

  .home__types-note {
    margin-block-start: var(--msc-space-2xl);
    font-size: var(--msc-size-body);
    opacity: 0.92;
  }

  .home__types-note a {
    font-weight: 600;
    text-underline-offset: 3px;
  }

  @media (max-width: 68rem) {
    .home__services {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home__problem {
      grid-template-columns: 1fr;
      gap: var(--msc-space-xl);
    }

    .home__types {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 40rem) {
    .home__services {
      grid-template-columns: 1fr;
    }

    .home__types {
      grid-template-columns: 1fr;
    }
  }

/* ===== Service layout ===== */
.shero {
    background: var(--msc-green-dark);
    color: var(--msc-white);
    padding-block: var(--msc-space-2xl) var(--msc-section-y);
  }

  .crumbs ol {
    display: flex;
    flex-wrap: wrap;
    gap: var(--msc-space-xs);
    margin: 0 0 var(--msc-space-xl);
    padding: 0;
    list-style: none;
    font-size: var(--msc-size-caption);
    opacity: 0.78;
  }

  .crumbs li + li::before {
    content: '/';
    margin-inline-end: var(--msc-space-xs);
    opacity: 0.6;
  }

  .crumbs a {
    text-decoration: none;
  }

  .crumbs a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .shero__heading {
    max-width: 20ch;
  }

  .shero__capsule {
    margin-block-start: var(--msc-space-xl);
  }

  .shero__actions {
    margin-block-start: var(--msc-space-xl);
  }

  .shero__trust {
    margin-block-start: var(--msc-space-3xl);
    padding-block-start: var(--msc-space-xl);
    border-block-start: 1px solid var(--msc-hairline);
  }

  .related {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--msc-space-lg);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .related a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--msc-space-md);
    padding: var(--msc-space-lg);
    border: 1px solid var(--msc-hairline-dark);
    border-radius: var(--msc-radius-card);
    font-size: var(--msc-size-h3);
    font-weight: 600;
    text-decoration: none;
    transition: border-color var(--msc-transition), color var(--msc-transition);
  }

  .related a:hover {
    border-color: var(--msc-red);
    color: var(--msc-red);
  }

  .related svg {
    flex: none;
    color: var(--msc-red);
  }

  @media (max-width: 60rem) {
    .related {
      grid-template-columns: 1fr;
    }
  }

/* Hero aside for service pages that carry a photo. The Astro build had no
   photo here; the client asked for one per service (2026-08-31). Portrait
   orientation, off to one side, green background retained. */
.shero__grid {
  display: grid;
  gap: var(--msc-space-2xl);
  align-items: center;
}

.shero--with-photo .shero__grid {
  grid-template-columns: 1fr minmax(0, 28rem);
}

/* The hero photograph carries the top of a service page, so it is given real
   size. Portrait subjects (tower trees, the streetscape snowflake) keep a
   portrait frame; the class is set per page. */
.shero__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--msc-radius-card);
  border: 1px solid var(--msc-hairline);
}

/* A tall photograph in the 4:5 frame loses a quarter of its height to the
   crop, and on a subject shot end to end -- a tower tree with people at its
   base -- that means cutting the star or the people. Those photographs set
   the frame from their own width and height instead, via a --ratio custom
   property, so cover has nothing to trim and the whole subject shows.
   Set by mscl_service_page() from the photo's real dimensions. */
.shero__img--tall {
  aspect-ratio: var(--ratio, 4 / 5);
}

@media (max-width: 68rem) {
  .shero--with-photo .shero__grid { grid-template-columns: 1fr; }
  .shero__photo { max-width: 20rem; }
}

/* ===== Differentiator cards =====
   Flat, on a hairline rule. Never a heavy shadow: a shadowed three-across
   icon grid is the generic-contractor look PRODUCT.md names as an
   anti-reference. */
.diffs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--msc-space-xl);
}

.diffs__item {
  padding-block-start: var(--msc-space-md);
  border-block-start: 1px solid var(--msc-hairline-dark);
}

.section--dark .diffs__item,
.section--sage .diffs__item {
  border-block-start-color: var(--msc-hairline);
}

.diffs__item h3 {
  margin-block-end: var(--msc-space-xs);
}

.diffs__item p {
  max-width: var(--msc-measure-narrow);
}

@media (max-width: 60rem) {
  .diffs { grid-template-columns: 1fr; gap: var(--msc-space-lg); }
}

/* ===== Photo gallery =====
   Photographs are the product on this site: a property manager is buying what
   the building will look like, so the gallery is sized to carry the page
   rather than to illustrate the text.

   CSS columns rather than grid. Eleven of the twenty-eight portfolio shots are
   portrait, including every tower tree, and a fixed-row grid either crops
   those in half or leaves holes where a two-row item sits beside one-row
   items. Columns let every photograph keep its own height and flow, so nothing
   is cropped and nothing is empty. */
.pgal--grid {
  columns: 3;
  column-gap: var(--msc-space-md);
}

.pgal__item {
  break-inside: avoid;
  margin: 0 0 var(--msc-space-md);
  position: relative;
  overflow: hidden;
  border-radius: var(--msc-radius-card);
  background: var(--msc-green-deep);
  /* Columns break oddly without this in some engines. */
  display: inline-block;
  width: 100%;
}

.pgal__img {
  display: block;
  width: 100%;
  height: auto;
}

/* Caption sits over the foot of the image on a Dark Green scrim, never a text
   shadow, so the photograph keeps its full frame. */
.pgal__cap {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  padding: var(--msc-space-2xl) var(--msc-space-md) var(--msc-space-sm);
  font-size: var(--msc-size-caption);
  color: var(--msc-white);
  background: linear-gradient(
    to top,
    rgba(28, 44, 31, 0.94) 0%,
    rgba(28, 44, 31, 0.74) 45%,
    rgba(28, 44, 31, 0) 100%
  );
}

/* A strip: equal-height row, used where a page wants a glance rather than a
   study. Cropping is acceptable here because the strip is a summary. */
.pgal--strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--msc-space-md);
}

.pgal--strip .pgal__item {
  display: block;
  aspect-ratio: 4 / 3;
}

.pgal--strip .pgal__img {
  height: 100%;
  object-fit: cover;
}

@media (max-width: 68rem) {
  .pgal--grid { columns: 2; }
}

@media (max-width: 40rem) {
  .pgal--grid { columns: 1; }
}

/* ===== Contact ===== */
.contact-hero {
    background: var(--msc-green-dark);
    color: var(--msc-white);
    padding-block: var(--msc-space-3xl) var(--msc-space-3xl);
  }

  .contact-hero h1 {
    max-width: 18ch;
  }

  .contact-hero__lede {
    margin-block-start: var(--msc-space-lg);
    max-width: 52ch;
    font-size: var(--msc-size-body-lg);
    opacity: 0.94;
  }

  .contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: var(--msc-space-3xl);
    align-items: start;
  }

  .contact-form__heading {
    margin-block-end: var(--msc-space-xl);
  }

  .contact-side {
    display: flex;
    flex-direction: column;
    gap: var(--msc-space-lg);
  }

  .contact-card {
    padding: var(--msc-space-xl);
    background: var(--msc-white);
    border: 1px solid var(--msc-hairline-dark);
    border-radius: var(--msc-radius-card);
  }

  .contact-card h2 {
    font-family: var(--msc-font-body);
    font-size: var(--msc-size-caption);
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--msc-red);
    margin-block-end: var(--msc-space-md);
  }

  .contact-card__phone {
    display: inline-block;
    font-family: var(--msc-font-display);
    font-size: var(--msc-size-h3);
    text-decoration: none;
  }

  .contact-card__phone:hover {
    color: var(--msc-red);
  }

  .contact-card address {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-style: normal;
    line-height: 1.55;
  }

  .contact-card__name {
    font-weight: 600;
  }

  .contact-card--lineage p:first-of-type {
    font-size: var(--msc-size-body);
    line-height: 1.6;
  }

  .contact-card__note {
    margin-block-start: var(--msc-space-md);
    font-size: var(--msc-size-caption);
    line-height: 1.55;
    opacity: 0.78;
  }

  .contact-card__email {
    margin-block-start: var(--msc-space-sm);
    font-size: var(--msc-size-caption);
    line-height: 1.55;
  }

  .contact-card__email a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }

  .contact-card__email a:hover {
    color: var(--msc-red);
  }

  .contact-card--areas ul {
    display: flex;
    gap: var(--msc-space-lg);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .contact-card--areas a {
    font-weight: 600;
    text-underline-offset: 3px;
  }

  .contact-timing {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: var(--msc-space-2xl);
    align-items: start;
  }

  .contact-timing__body p {
    font-size: var(--msc-size-body-lg);
    opacity: 0.92;
  }

  @media (max-width: 68rem) {
    .contact-grid {
      grid-template-columns: 1fr;
      gap: var(--msc-space-2xl);
    }

    .contact-timing {
      grid-template-columns: 1fr;
      gap: var(--msc-space-lg);
    }
  }

/* GHL form placeholder. Deliberately plain and clearly unfinished: it must
   never look like a working form. */
.ghl-placeholder {
  padding: var(--msc-space-xl);
  background: var(--msc-white);
  border: 1px dashed var(--msc-red);
  border-radius: var(--msc-radius-card);
}

.ghl-placeholder__label {
  font-size: var(--msc-size-caption);
  font-weight: 600;
  color: var(--msc-red);
  margin-block-end: var(--msc-space-sm);
}

.ghl-placeholder__phone {
  margin-block: var(--msc-space-lg) var(--msc-space-md);
  font-size: var(--msc-size-h3);
  font-weight: 600;
}

.ghl-placeholder__phone a { color: var(--msc-red); text-decoration: none; }

.ghl-placeholder__note {
  font-size: var(--msc-size-caption);
  opacity: 0.7;
}

/* ===== Blog ===== */
.post-hero {
  background: var(--msc-green-dark);
  color: var(--msc-white);
  padding-block: var(--msc-space-2xl) var(--msc-section-y);
}

.post-hero__heading {
  max-width: 24ch;
  margin-block-start: var(--msc-space-xs);
}

.post-hero__meta {
  margin-block-start: var(--msc-space-lg);
  font-size: var(--msc-size-caption);
  opacity: 0.78;
}

/* Answer-first summary. Editorial serif so it reads as a standfirst rather
   than as a callout box. */
.tldr {
  max-width: var(--msc-measure);
  padding-block-end: var(--msc-space-xl);
  margin-block-end: var(--msc-space-xl);
  border-block-end: 1px solid var(--msc-gold);
}

.tldr__label {
  font-size: var(--msc-size-caption);
  font-weight: 600;
  color: var(--msc-red);
  margin-block-end: var(--msc-space-xs);
}

.tldr p:last-child {
  font-family: var(--msc-font-editorial);
  font-size: var(--msc-size-quote);
  line-height: 1.45;
}

.post-body {
  max-width: var(--msc-measure);
}

.post-body h2 {
  margin-block: var(--msc-space-2xl) var(--msc-space-md);
}

.post-body h3 {
  margin-block: var(--msc-space-xl) var(--msc-space-sm);
}

.post-body p,
.post-body ul,
.post-body ol {
  margin-block-end: var(--msc-space-md);
  font-size: var(--msc-size-body-lg);
}

.post-body ul,
.post-body ol {
  padding-inline-start: var(--msc-space-lg);
}

.post-body li { margin-block-end: var(--msc-space-xs); }

.post-body a {
  color: var(--msc-red);
  text-underline-offset: 3px;
}

.post-body blockquote {
  margin: var(--msc-space-xl) 0;
  padding-inline-start: var(--msc-space-lg);
  border-inline-start: 2px solid var(--msc-gold);
  font-family: var(--msc-font-editorial);
  font-size: var(--msc-size-quote);
}

/* Index */
.postlist {
  display: grid;
  gap: var(--msc-space-2xl);
  /* Not capped at --msc-measure any more. The cards carry a thumbnail beside
     the text, so the measure applies to the paragraph inside the card rather
     than to the whole list, which previously left the right half empty. */
}

.postcard {
  padding-block-start: var(--msc-space-lg);
  border-block-start: 1px solid var(--msc-hairline-dark);
  display: grid;
  gap: var(--msc-space-lg);
}

/* Thumbnail beside the text from 48rem up; stacked below it, where side by
   side would leave both halves too narrow to read. */
@media (min-width: 48rem) {
  .postcard {
    grid-template-columns: 22rem 1fr;
    align-items: start;
  }
}

.postcard__media {
  display: block;
  overflow: hidden;
  border-radius: 2px;
  /* Fixed ratio means the row height is known before the image arrives, so the
     text beside it never jumps. The img carries width and height as well. */
  aspect-ratio: 3 / 2;
}

.postcard__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 220ms ease;
}

.postcard:hover .postcard__img {
  transform: scale(1.02);
}

@media (prefers-reduced-motion: reduce) {
  .postcard:hover .postcard__img {
    transform: none;
  }
}

.postcard__body {
  min-width: 0;
}

.postcard__title {
  font-size: var(--msc-size-h3);
  margin-block: var(--msc-space-2xs) var(--msc-space-sm);
}

.postcard__title a {
  color: inherit;
  text-decoration: none;
}

.postcard__title a:hover { color: var(--msc-red); }

.postcard__desc { max-width: var(--msc-measure-narrow); }

.postcard__meta {
  margin-block-start: var(--msc-space-sm);
  font-size: var(--msc-size-caption);
  opacity: 0.7;
}

/* ===== Legal pages ===== */
.legal-hero {
  background: var(--msc-green-dark);
  color: var(--msc-white);
  padding-block: var(--msc-space-2xl);
}

.legal-hero__meta {
  margin-block-start: var(--msc-space-sm);
  font-size: var(--msc-size-caption);
  opacity: 0.78;
}

.legal-body {
  max-width: var(--msc-measure);
}

.legal-body h2 {
  font-size: var(--msc-size-h3);
  font-family: var(--msc-font-body);
  font-weight: 600;
  margin-block: var(--msc-space-2xl) var(--msc-space-sm);
}

.legal-body h3 {
  font-size: var(--msc-size-body-lg);
  margin-block: var(--msc-space-xl) var(--msc-space-xs);
}

.legal-body p,
.legal-body li {
  margin-block-end: var(--msc-space-sm);
}

.legal-body ul,
.legal-body ol {
  padding-inline-start: var(--msc-space-lg);
  margin-block-end: var(--msc-space-md);
}

.legal-body a {
  color: var(--msc-red);
  text-underline-offset: 3px;
}

/* Unfilled placeholders must be impossible to miss in review. */
.legal-body .ph,
.legal-body mark.ph {
  background: #FFF3CD;
  color: var(--msc-near-black);
  padding: 0 4px;
  border-radius: 2px;
  font-weight: 600;
}

/* ===== About ===== */
.about-hero {
    background: var(--msc-green-dark);
    color: var(--msc-white);
    padding-block: var(--msc-space-3xl);
  }

  .about-hero h1 {
    max-width: 20ch;
  }

  .about-hero__lede {
    margin-block-start: var(--msc-space-lg);
    max-width: 56ch;
    font-size: var(--msc-size-body-lg);
    opacity: 0.94;
  }

  .two-col {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--msc-space-2xl);
    font-size: var(--msc-size-body-lg);
  }

  .two-col a {
    color: var(--msc-red);
    font-weight: 600;
    text-underline-offset: 3px;
  }

  .pull {
    font-family: var(--msc-font-editorial);
    font-style: italic;
    font-size: var(--msc-size-quote);
    line-height: var(--msc-leading-snug);
    color: var(--msc-red);
  }

  .how {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--msc-space-xl);
  }

  .how__item {
    padding-block-start: var(--msc-space-md);
    border-block-start: 1px solid var(--msc-red);
  }

  .how__item h3 {
    margin-block-end: var(--msc-space-xs);
  }

  .how__item p {
    font-size: var(--msc-size-body);
    opacity: 0.9;
  }

  .types {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--msc-space-md) var(--msc-space-lg);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .types li {
    padding-block-start: var(--msc-space-sm);
    border-block-start: 1px solid var(--msc-hairline);
    font-weight: 600;
  }

  .services-links {
    margin-block-start: var(--msc-space-2xl);
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--msc-space-md);
  }

  .services-links ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--msc-space-lg);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .services-links a {
    font-weight: 600;
    color: var(--msc-red);
    text-underline-offset: 3px;
  }

  @media (max-width: 68rem) {
    .how {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .types {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 60rem) {
    .two-col {
      grid-template-columns: 1fr;
      gap: var(--msc-space-xl);
    }
  }

  @media (max-width: 34rem) {
    .how,
    .types {
      grid-template-columns: 1fr;
    }
  }

/* Post tables. Wide content scrolls inside its own container so the page body
   never scrolls horizontally. */
.table-wrap {
  overflow-x: auto;
  margin-block-end: var(--msc-space-lg);
}

.post-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--msc-size-body);
}

.post-body th,
.post-body td {
  padding: var(--msc-space-sm) var(--msc-space-md);
  text-align: start;
  border-block-end: 1px solid var(--msc-hairline-dark);
}

.post-body th {
  font-weight: 600;
  border-block-end-width: 2px;
  border-block-end-color: var(--msc-gold);
}

/* ===== 404 ===== */
.nf {
    background: var(--msc-green-dark);
    color: var(--msc-white);
    padding-block: var(--msc-space-4xl);
    min-height: 60vh;
  }

  .nf h1 {
    max-width: 16ch;
  }

  .nf__lede {
    margin-block-start: var(--msc-space-lg);
    max-width: 48ch;
    font-size: var(--msc-size-body-lg);
    opacity: 0.92;
  }

  .nf__actions {
    margin-block-start: var(--msc-space-xl);
  }

  .nf__links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 18rem));
    gap: var(--msc-space-2xl);
    margin-block-start: var(--msc-space-3xl);
    padding-block-start: var(--msc-space-xl);
    border-block-start: 1px solid var(--msc-hairline);
  }

  .nf__links h2 {
    font-family: var(--msc-font-body);
    font-size: var(--msc-size-caption);
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--msc-gold);
    margin-block-end: var(--msc-space-md);
  }

  .nf__links ul {
    display: flex;
    flex-direction: column;
    gap: var(--msc-space-xs);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .nf__links a {
    text-decoration: none;
    opacity: 0.9;
  }

  .nf__links a:hover {
    opacity: 1;
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  @media (max-width: 40rem) {
    .nf__links {
      grid-template-columns: 1fr;
      gap: var(--msc-space-xl);
    }
  }

/* Display gallery -----------------------------------------------------
   /commercial-holiday-decorating/displays/. Eleven categories, 36 vendor
   catalogue images. The grid stays flat and editorial: no card shadow, no
   hover lift, per the design contract. */

.dispnav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--msc-space-xs) var(--msc-space-md);
  margin: 0;
  padding: 0;
  list-style: none;
}

.dispnav a {
  display: inline-block;
  padding: 0.4rem 0.85rem;
  font-size: var(--msc-size-button);
  font-weight: 600;
  color: var(--msc-near-black);
  text-decoration: none;
  border: 1px solid var(--msc-hairline-dark);
  border-radius: var(--msc-radius);
}

.dispnav a:hover {
  color: var(--msc-red);
  border-color: var(--msc-red);
}

.dispgrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--msc-space-lg);
}

.dispgrid__item {
  margin: 0;
}

/* Vendor product shots arrive on mixed backgrounds, so a neutral fill keeps
   the row even rather than letting each image set its own edge. */
.dispgrid__item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  background: var(--msc-off-white);
  border-radius: var(--msc-radius);
}

.dispgrid__cap {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-block-start: var(--msc-space-xs);
  font-size: var(--msc-size-caption);
  font-weight: 600;
  color: var(--msc-near-black);
}

/* The attribution line. Required by the asset README: these are displays we
   source and install, never photographs of our own installed work. */
.dispgrid__note {
  font-weight: 400;
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--msc-green-sage);
}

@media (max-width: 60rem) {
  .dispgrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 40rem) {
  .dispgrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--msc-space-md);
  }
}

/* Through-link from the decorating page's category cards to the full gallery. */
.scards__more {
  margin-block-start: var(--msc-space-xl);
  font-size: var(--msc-size-button);
  font-weight: 600;
}

  /* Pole banners: seasonal collections, sizes, hardware, look book download. */
  .banner-seasons {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: var(--msc-space-lg);
    margin-block-start: var(--msc-space-lg);
  }

  .banner-season__name {
    font-family: var(--msc-font-display);
    font-size: var(--msc-size-h3);
    margin-block-end: var(--msc-space-xs);
  }

  .banner-sizes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: var(--msc-space-lg);
    margin-block-start: var(--msc-space-lg);
  }

  .banner-size__dim {
    font-family: var(--msc-font-display);
    font-size: var(--msc-size-h2);
    line-height: 1.1;
  }

  .banner-size__label {
    font-weight: 700;
    margin-block: var(--msc-space-xs) var(--msc-space-sm);
  }

  .lookbook {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--msc-space-lg);
    margin-block-start: var(--msc-space-lg);
  }

  .lookbook__text {
    flex: 1 1 22rem;
  }

  .lookbook__meta {
    margin-block-start: var(--msc-space-sm);
    font-size: var(--msc-size-caption);
    opacity: 0.78;
  }

  .lookbook__btn {
    flex: 0 0 auto;
  }