/* Canadian Wood client review — 21 Sep 2026. Loaded last. */

/* Shared banner hierarchy. */
.cw-page-hero__caption h1,
.cw-media-single-hero h1,
.cw-species-hero__caption h1,
.cw-species-hero__caption h2,
.cw-finishes-hero__title {
  font-size: clamp(43px, calc(3vw + 7px), 65px) !important;
  line-height: 1.05 !important;
  text-transform: uppercase;
}

/* 22 Sep tablet audit: one shared density system for listing pages, article
 * builders, filters and hero banners. Keep this layer last so legacy tablet
 * breakpoints cannot re-introduce desktop-sized gaps. */
@media (min-width: 768px) {
  /* Every conventional page/detail hero is capped at half of the viewport,
     matching the established mobile rule. */
  .cw-page-hero,
  .cw-media-hero,
  .cw-media-single-hero,
  .cw-species-hero,
  .cw-finishes-hero,
  .cw-page-hero--static-banner,
  .cw-species-hero--static-banner,
  .cw-page-hero--height-full,
  .cw-page-hero--height-compact,
  .cw-media-single-hero--height-full,
  .cw-media-single-hero--height-compact,
  .cw-species-hero--height-full,
  .cw-species-hero--height-compact {
    height: min(50svh, 560px) !important;
    min-height: min(50svh, 360px) !important;
    max-height: 560px !important;
  }
}

@media (min-width: 768px) and (max-width: 1180px) {
  /* Shared tablet section rhythm: section edge, heading-to-content and
     builder-block transitions use one compact scale. */
  .cw-media-single-head {
    padding-top: 44px !important;
    padding-bottom: 12px !important;
  }

  .cw-media-single-head h1 {
    margin-bottom: 16px !important;
  }

  .cw-media-single-head time {
    margin-bottom: 0 !important;
  }

  .cw-media-single--news .cw-media-single-body,
  .cw-media-single--blog .cw-media-single-body {
    padding-top: 12px !important;
  }

  .cw-media-single--event .cw-media-single-body {
    padding-top: 36px !important;
    padding-bottom: 36px !important;
  }

  .cw-media-single--news .cw-media-builder,
  .cw-media-single--blog .cw-media-builder,
  .cw-media-single--event .cw-media-builder,
  .cw-media-single--success_story .cw-media-builder {
    gap: 28px !important;
  }

  .cw-media-builder-block,
  .cw-media-builder-figure {
    margin-top: 0;
    margin-bottom: 0;
  }

  .cw-media-builder-rich-text > :first-child,
  .cw-media-builder-text-image__content > :first-child {
    margin-top: 0;
  }

  .cw-media-builder-rich-text > :last-child,
  .cw-media-builder-text-image__content > :last-child {
    margin-bottom: 0;
  }

  /* Supplier section finishes with the same outer rhythm used above it. */
  .cw-resources-suppliers {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }

  .cw-resources-directory {
    margin-bottom: 40px !important;
  }

  .cw-resources-vietnam {
    padding-bottom: 32px !important;
  }

  .cw-resources-suppliers__grid {
    gap: 24px !important;
  }

  /* Events keep the desktop three-column relationship on tablets; only the
     scale is reduced. The image therefore never drops below while space is
     available. */
  .cw-events-list {
    padding-top: 32px !important;
    padding-bottom: 48px !important;
  }

  .cw-event-card {
    grid-template-columns: 104px minmax(0, 1fr) minmax(220px, 34%) !important;
    gap: 22px !important;
    min-height: 0 !important;
    align-items: center !important;
    padding: 24px !important;
  }

  .cw-event-card + .cw-event-card {
    margin-top: 28px !important;
  }

  .cw-event-card__date {
    width: 104px !important;
    min-height: 136px !important;
    height: 136px !important;
    margin-top: 0 !important;
  }

  .cw-event-card__date div {
    padding-block: 9px 8px;
    font-size: 16px;
  }

  .cw-event-card__date strong {
    font-size: 36px;
  }

  .cw-event-card__body {
    min-width: 0;
    height: auto !important;
  }

  .cw-event-card h2 {
    margin-bottom: 12px !important;
    font-size: 24px;
  }

  .cw-event-card__location {
    margin-bottom: 18px;
  }

  .cw-event-card__media {
    grid-column: 3 !important;
    width: 100%;
    height: 190px !important;
    aspect-ratio: auto !important;
  }

  .cw-event-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Closed filter controls use the same pill geometry as Gallery. */
  .cw-events-toolbar form,
  .cw-finishes-sort,
  .cw-gallery-filter,
  .cw-gallery-filter__toggle {
    height: 44px;
    min-height: 44px;
    border-color: #8caf9a;
    border-radius: 999px;
    background: #fff;
  }

  .cw-events-toolbar form {
    min-width: 240px;
    padding-inline: 18px 14px;
    font-size: 15px;
  }

  .cw-events-toolbar select {
    height: 42px;
  }
}

@media (min-width: 768px) and (max-width: 900px) and (orientation: portrait) {
  .cw-resources-suppliers {
    padding-bottom: 32px !important;
  }

  .cw-event-card {
    grid-template-columns: 92px minmax(0, 1fr) minmax(210px, 33%) !important;
    gap: 18px !important;
    padding: 20px !important;
  }

  .cw-event-card__date {
    width: 92px !important;
    min-height: 118px !important;
    height: 118px !important;
  }

  .cw-event-card__date strong {
    font-size: 32px;
  }

  .cw-event-card__media {
    height: 170px !important;
  }
}

.cw-species-hero__caption p {
  font-size: clamp(18px, 1.65vw, 32px) !important;
  line-height: 1.18 !important;
}

/* Home: media begins at the real glyph top and ends at the CTA bottom. */
@media (min-width: 1025px) {
  .cw-home {
    --cw-home-media-heading-offset: calc(5px + var(--cw-home-heading-gap));
  }

  .cw-home-intro,
  .cw-home-finishes {
    align-items: stretch;
  }

  .cw-home-intro__media,
  .cw-home-finishes__grid {
    margin-top: var(--cw-home-media-heading-offset) !important;
  }

  .cw-home-gallery__slider {
    height: min(68svh, calc(100svh - 230px));
    min-height: 420px;
    max-height: 680px;
  }
}

/* Why Canadian Wood value rows. */
@media (min-width: 768px) {
  .cw-why-wood-property {
    height: clamp(220px, 14vw, 270px);
  }

  .cw-why-wood-property__copy,
  .cw-why-wood-property__media {
    height: 100%;
    min-height: 0 !important;
  }

  .cw-why-wood-property__copy {
    padding: clamp(20px, 2vw, 30px) !important;
  }

  .cw-why-wood-property__copy h3 {
    margin-bottom: 12px !important;
  }

  .cw-why-page .cw-media-builder-text-image {
    align-items: stretch;
    min-height: 0;
  }

  .cw-why-page .cw-media-builder-text-image__text {
    padding-block: clamp(22px, 2.2vw, 36px);
  }

  .cw-why-page .cw-media-builder-text-image__image,
  .cw-why-page .cw-media-builder-text-image__image .cw-media-builder-figure,
  .cw-why-page .cw-media-builder-text-image__image img {
    min-height: 0 !important;
    height: clamp(190px, 16vw, 270px) !important;
  }

  .cw-why-page .cw-why-property,
  .cw-why-page .cw-why-property__copy,
  .cw-why-page .cw-why-property__media {
    min-height: 0 !important;
  }

  .cw-why-page .cw-why-property__copy {
    padding-block: clamp(22px, 2.2vw, 36px) !important;
  }

  .cw-why-page .cw-why-property__media,
  .cw-why-page .cw-why-property__media img {
    height: clamp(190px, 16vw, 270px) !important;
  }
}

/* Why and Species CTA cards stay compact and share one treatment. */
.cw-why-gallery-cta .cw-program-card,
.cw-species-why-cta .cw-program-card {
  height: min(50svh, 480px) !important;
  min-height: 0;
  max-height: 480px;
}

.cw-species-panel__title {
  color: var(--cw-green-primary) !important;
  font-size: clamp(32px, 2.6vw, 44px) !important;
  line-height: 1.08 !important;
}

/* Species detail cross-link. */
.cw-species-why-cta {
  margin-top: 14px;
  margin-bottom: clamp(36px, 3.5vw, 54px);
  padding-block: 0 !important;
  overflow: hidden;
}

.cw-species-why-cta .cw-program-card__image {
  object-position: var(--cw-image-focus-desktop, 50% 50%);
}

@media (max-width: 760px) {
  .cw-species-why-cta .cw-program-card__image {
    object-position: var(--cw-image-focus-mobile, var(--cw-image-focus-desktop, 50% 50%));
  }
}

/* Resources brochure box follows the standard container and keeps truly even
 * internal space after the older density layers have loaded. */
.cw-resources-intro__inner {
  min-height: 0 !important;
  padding: clamp(34px, 3vw, 48px) !important;
}

/* Resources brochure: compact 50/50 composition matching the supplied UI. */
@media (min-width: 761px) {
  .cw-resources-intro__inner {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: clamp(28px, 2.5vw, 42px);
  }

  .cw-resources-intro__media,
  .cw-resources-intro__copy {
    width: 100%;
    max-width: 50vw;
  }

  .cw-resources-intro__media {
    max-width: 320px;
  }

  .cw-resources-intro__copy {
    max-width: none;
  }

  .cw-resources-intro h2 {
    max-width: none;
    margin-bottom: 30px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 38px;
    line-height: 1.14;
    overflow-wrap: normal;
    white-space: nowrap;
  }

  .cw-resources-intro__label {
    margin-bottom: 18px;
  }
}

/* Resources suppliers: give the details priority and normalize every logo in
 * one transparent canvas. Admin can reduce each mark with Logo Size (%). */
.cw-resources-suppliers {
  padding-top: 42px;
  padding-bottom: 48px;
}

.cw-resources-vietnam {
  padding: clamp(28px, 3vw, 42px) clamp(20px, 2.5vw, 38px) clamp(32px, 3vw, 46px);
}

.cw-resources-vietnam__title {
  margin-bottom: 32px;
}

.cw-resources-suppliers__grid {
  gap: 28px 46px;
}

.cw-resources-supplier {
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 18px;
}

.cw-resources-supplier__brand {
  width: 150px;
  height: 100px;
  min-height: 100px;
}

.cw-resources-supplier__logo {
  width: calc(100% * var(--cw-supplier-logo-scale, 1));
  max-width: 150px;
  max-height: calc(100px * var(--cw-supplier-logo-scale, 1));
  object-fit: contain;
}

.cw-resources-supplier__details p {
  line-height: 1.32;
}

@media (max-width: 760px) {
  .cw-resources-intro__inner {
    gap: 20px;
    padding: 14px 11px 17px !important;
  }

  .cw-resources-intro h2 {
    font-family: var(--font-heading);
    font-size: 26px;
    line-height: 1.16;
    white-space: normal;
  }

  .cw-resources-intro {
    width: calc(100% - 16px);
    margin-top: 18px;
    padding: 0 !important;
  }

  .site-main .cw-resources-intro__inner {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
  }

  .cw-resources-intro__media {
    width: 100%;
    max-width: none;
  }

  .cw-resources-intro__copy {
    width: 100%;
    max-width: none;
  }

  .cw-resources-supplier {
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 16px;
  }

  .cw-resources-supplier__brand {
    width: 112px;
    height: 82px;
    min-height: 82px;
  }

  .cw-resources-supplier__logo {
    max-width: 112px;
    max-height: calc(82px * var(--cw-supplier-logo-scale, 1));
  }

  /* Compact supplier rows: prioritize contact content over the logo column. */
  .cw-resources-suppliers {
    padding-bottom: 32px;
  }

  .cw-resources-vietnam {
    padding-right: 10px;
    padding-bottom: 24px;
    padding-left: 10px;
  }

  .cw-resources-suppliers__grid {
    gap: 24px;
  }

  .cw-resources-supplier {
    grid-template-columns: 90px minmax(0, 1fr);
    gap: 10px;
  }

  .cw-resources-supplier__brand {
    width: 90px;
    height: 66px;
    min-height: 66px;
  }

  .cw-resources-supplier__logo {
    max-width: 90px;
    max-height: calc(66px * var(--cw-supplier-logo-scale, 1));
  }

  .cw-resources-supplier__details h3 {
    margin-bottom: 8px;
  }

  .cw-resources-supplier__details p {
    margin: 0 0 2px !important;
    line-height: 1.2;
  }

  .cw-resources-supplier__website strong {
    display: none;
  }

  .cw-resources-supplier__website,
  .cw-resources-supplier__website a {
    white-space: nowrap;
  }
}

/* Events and Contact density. */
.cw-event-card__status {
  width: min(68%, 230px);
  min-width: 150px;
  padding: 11px 16px 10px 42px;
  font-size: clamp(16px, 1.05vw, 20px);
  line-height: 1.08;
  white-space: normal;
}

.cw-contact-person h3 { margin-bottom: 8px; }
.cw-contact-person p + p { margin-top: 0 !important; }
.cw-contact-people__grid { gap: clamp(28px, 4vw, 64px); margin-top: 18px; }

/* Contact typography approved for both English and Vietnamese. */
.cw-contact-office__body,
.cw-contact-person,
.cw-contact-resources a {
  font-size: 17px !important;
}

.cw-contact-person {
  line-height: 1.55;
}

.cw-contact-person h3 {
  font-size: 22px !important;
}

/* Shared form density: keep every form implementation on the same measure.
 * Desktop/tablet forms use 80% of the established content width, while phone
 * forms retain the safe full-width mobile container. Field control heights are
 * intentionally unchanged; only surrounding whitespace is reduced. */
@media (min-width: 768px) {
  /* End forms have a separate white panel around the actual form. Shrink the
     visible panel itself, then let its fields use that reduced measure. */
  .cw-end-form__panel {
    width: 80% !important;
    margin-right: auto;
    margin-left: auto;
  }

  .cw-end-form__form,
  .cw-company-form__form,
  .cw-program-form__form,
  .cw-media-single-form__form,
  .cw-contact-lead__form,
  .cw-species-contact__form {
    width: 80% !important;
    margin-right: auto;
    margin-left: auto;
  }

  .cw-end-form__form {
    width: 100% !important;
  }

  .cw-end-form__fields,
  .cw-company-form__fields,
  .cw-program-form__fields,
  .cw-media-single-form__fields,
  .cw-contact-lead__fields,
  .cw-species-contact__fields {
    row-gap: clamp(12px, 1.2vw, 18px);
  }

  .cw-end-form--forest .cw-end-form__fields {
    row-gap: 8px;
  }

  .cw-end-form button,
  .cw-company-form button,
  .cw-program-form button,
  .cw-media-single-form__form button,
  .cw-contact-lead__submit,
  .cw-species-contact__submit {
    margin-top: 24px;
  }

  .cw-end-form--forest button {
    margin-top: 14px;
  }
}

@media (min-width: 1025px) {
  .cw-end-form__panel {
    width: min(calc(80% - 80px), 944px) !important;
  }
}

/* Event detail hero follows the shared lower-left banner caption. */
.cw-media-single--event .cw-media-single-hero {
  align-items: flex-end;
  justify-content: flex-start;
}

.cw-media-single--event .cw-media-single-hero h1 {
  position: absolute;
  right: auto;
  bottom: clamp(38px, 5.5vh, 68px);
  left: max(24px, calc((100% - 1200px) / 2));
  width: min(860px, calc(100% - 48px));
  margin: 0;
  text-align: left;
}

.cw-media-single--event .cw-media-single-hero h1::after {
  content: "";
  display: block;
  width: clamp(88px, 7.5vw, 144px);
  height: 4px;
  margin-top: clamp(18px, 1.6vw, 28px);
  background: var(--cw-white);
}

/* Event gallery lightbox. */
.cw-event-gallery__item {
  display: block;
  width: 100%;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: zoom-in;
}

.cw-event-lightbox[hidden] { display: none; }
.has-event-lightbox { overflow: hidden; }
.cw-event-lightbox { position: fixed; z-index: 10000; inset: 0; display: grid; place-items: center; padding: 24px; }
.cw-event-lightbox__backdrop { position: absolute; inset: 0; border: 0; background: rgb(0 0 0 / 84%); }
.cw-event-lightbox__panel { position: relative; z-index: 1; display: grid; place-items: center; width: min(1180px, 94vw); height: min(820px, 90svh); }
.cw-event-lightbox__image { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.cw-event-lightbox__close,
.cw-event-lightbox__arrow { position: absolute; z-index: 2; border: 0; background: rgb(0 0 0 / 55%); color: #fff; cursor: pointer; }
.cw-event-lightbox__close { top: 0; right: 0; width: 48px; height: 48px; font-size: 36px; line-height: 1; }
.cw-event-lightbox__arrow { top: 50%; width: 48px; height: 64px; transform: translateY(-50%); font-size: 46px; line-height: 1; }
.cw-event-lightbox__arrow--prev { left: 0; }
.cw-event-lightbox__arrow--next { right: 0; }
.cw-event-lightbox__count { position: absolute; bottom: 8px; left: 50%; margin: 0; padding: 5px 10px; transform: translateX(-50%); background: rgb(0 0 0 / 62%); color: #fff; }

/* Tablet pass: keep static banners useful without consuming an entire portrait
   viewport, and use a predictable caption inset in both orientations. */
@media (min-width: 768px) and (max-width: 1024px) {
  .cw-page-hero--static-banner,
  .cw-species-hero--static-banner,
  .cw-page-hero--static-banner.cw-page-hero--height-full,
  .cw-page-hero--static-banner.cw-page-hero--height-compact,
  .cw-species-hero--static-banner.cw-species-hero--height-full,
  .cw-species-hero--static-banner.cw-species-hero--height-compact {
    width: 100%;
    height: clamp(360px, 50svh, 560px) !important;
    min-height: 360px !important;
    max-height: 560px !important;
    aspect-ratio: auto;
  }

  .cw-page-hero--static-banner .cw-page-hero__content {
    padding: 32px;
  }

  .cw-species-hero__caption,
  .cw-species-hero--static-banner .cw-species-hero__caption {
    top: auto;
    right: 32px !important;
    bottom: 32px;
    left: 32px !important;
    width: auto !important;
    transform: none !important;
    text-align: left;
  }

  .cw-species-hero__caption h1,
  .cw-species-hero__caption h2,
  .cw-species-hero--static-banner .cw-species-hero__caption h1,
  .cw-species-hero--static-banner .cw-species-hero__caption h2 {
    max-width: 100%;
    font-size: clamp(36px, 5vw, 48px);
    text-align: left;
  }

  .cw-species-hero__caption p,
  .cw-species-hero--static-banner .cw-species-hero__caption p {
    max-width: 680px;
    font-size: clamp(18px, 2.4vw, 22px);
    text-align: left;
  }

  .cw-why-sustainable-stat.is-active {
    z-index: 1;
    transform: translateX(8px);
    filter: brightness(1.08) saturate(1.12);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--sustainable-accent) 34%, transparent),
      0 12px 26px rgb(16 102 59 / 24%);
  }

  .cw-resources-supplier {
    grid-template-columns: 110px minmax(0, 1fr);
    gap: 14px;
  }

  .cw-resources-supplier__brand {
    width: 110px;
    height: 82px;
    min-height: 82px;
  }

  .cw-resources-supplier__logo {
    max-width: 110px;
    max-height: calc(82px * var(--cw-supplier-logo-scale, 1));
  }
}

@media (min-width: 768px) and (max-width: 900px) {
  .cw-resources-suppliers__grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

/* Portrait tablets inherit the proven mobile rhythm, with tablet gutters. */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  :root {
    --cw-mobile-section-space: 48px;
    --cw-mobile-heading-gap: 20px;
    --cw-mobile-content-gap: 14px;
    --cw-space-section-l: 48px;
    --cw-space-section-m: 44px;
    --cw-space-section-s: 32px;
    --cw-space-heading: 20px;
    --cw-space-block: 28px;
    --cw-space-content: 14px;
  }

  .cw-home {
    --cw-home-section-space: var(--cw-mobile-section-space);
  }

  .cw-resource-card,
  .cw-resources-grid {
    align-items: start;
  }

  .cw-resource-card__title,
  .cw-resources-group--wood-factsheets .cw-resource-card__title {
    min-height: 0;
    margin-top: var(--cw-mobile-content-gap);
    margin-bottom: 0;
  }

  .cw-resource-card__button,
  .cw-resources-group--wood-factsheets .cw-resource-card__button {
    margin-top: var(--cw-mobile-content-gap);
  }
}

/* Landscape tablets have enough inline space for the compact desktop header
   and inherit the desktop density system instead of the portrait/mobile one. */
@media (min-width: 900px) and (max-width: 1180px) and (orientation: landscape) {
  :root {
    --cw-site-header-height: 106px;
    --cw-space-section-l: 56px;
    --cw-space-section-m: 56px;
    --cw-space-section-s: 40px;
    --cw-space-heading: 18px;
    --cw-space-block: 18px;
    --cw-space-content: 9px;
    --cw-page-copy-leading: 1.42;
    --cw-page-paragraph-gap: 9px;
  }

  .site-header,
  .site-header__main,
  .cw-home-has-video-hero .site-header,
  .cw-home-has-video-hero .site-header__main {
    background: var(--cw-white);
    border-color: rgba(216, 221, 221, 0.75);
  }

  .site-header__utility {
    display: block;
    min-height: 34px;
  }

  .site-header__utility-inner {
    min-height: 34px;
    gap: 24px;
  }

  .site-utility-nav__menu {
    gap: 24px;
  }

  .site-utility-nav a,
  .site-language__toggle {
    font-size: 15px;
  }

  .site-header__inner {
    z-index: auto;
    min-height: 72px;
    gap: 20px;
  }

  .site-brand,
  .site-brand__logo {
    width: 130px;
  }

  .site-brand {
    z-index: auto;
  }

  .site-brand__logo {
    filter: none;
  }

  .site-header .site-nav-toggle,
  .site-mobile-utility,
  .site-mobile-submenu-toggle {
    display: none;
  }

  .site-header__navigation,
  .site-header__navigation.is-open {
    position: static;
    z-index: auto;
    inset: auto;
    display: flex;
    min-height: 0;
    max-height: none;
    flex: 1 1 auto;
    flex-direction: row !important;
    align-items: center;
    justify-content: flex-end;
    overflow: visible;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .site-header__navigation .site-nav,
  .site-nav,
  .site-nav__menu {
    position: static;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(12px, 1.35vw, 16px);
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .site-nav__menu {
    flex-direction: row !important;
    flex-wrap: nowrap;
  }

  .site-nav {
    margin-left: auto;
    font-size: clamp(16px, 1.66vw, 17px);
  }

  .site-nav__menu > li,
  .site-nav__menu > li > a {
    width: auto;
  }

  .site-nav__menu > li > a {
    display: inline-flex;
    min-height: 26px;
    padding: 0;
    color: var(--cw-green-primary);
    font-size: inherit;
    font-weight: 400;
    line-height: 1;
    white-space: nowrap;
  }

  .site-nav__menu > li > a::after {
    display: block;
    bottom: -9px;
    height: 3px;
    background: var(--cw-evergreen);
  }

  .site-nav__menu .is-mobile-submenu-open > a {
    color: var(--cw-green-primary) !important;
  }

  .site-nav .sub-menu {
    position: absolute;
    display: block;
    width: max-content;
    margin: 0;
    padding: 16px 26px 20px;
    background: var(--cw-white) !important;
    opacity: 0 !important;
    visibility: visible !important;
    pointer-events: none !important;
    transform: translate(-26px, 8px) !important;
  }

  .site-nav__menu li:hover > .sub-menu,
  .site-nav__menu li:focus-within > .sub-menu {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translate(-26px, 0) !important;
  }

  .site-nav .sub-menu a {
    color: var(--cw-green-primary) !important;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.25;
  }

  .site-header.is-scrolled .site-header__utility,
  .site-header.is-scrolled .site-header__utility-inner {
    min-height: 30px;
  }

  .site-header.is-scrolled .site-header__inner {
    min-height: 62px;
  }

  .site-header.is-scrolled .site-brand,
  .site-header.is-scrolled .site-brand__logo {
    width: 120px;
  }

  .site-header.is-scrolled .site-nav {
    font-size: 16px;
  }

  .site-header.is-scrolled .site-utility-nav a,
  .site-header.is-scrolled .site-language__toggle {
    font-size: 14px;
  }

  /* Landscape tablets use the same three-column footer composition as desktop. */
  .site-footer {
    background: var(--cw-color-surface-evergreen-soft);
  }

  .site-footer::before {
    display: block;
    inset: 0 0 18px;
  }

  .site-footer__primary,
  .site-footer__secondary {
    background: transparent;
  }

  .site-footer__inner {
    min-height: 96px;
    grid-template-columns: 200px minmax(0, 1fr) auto;
    align-items: center;
    gap: 24px;
    padding-top: 0;
    padding-bottom: 16px;
  }

  .site-footer__brand,
  .site-footer__contact {
    transform: translateY(7px);
  }

  .site-footer__brand img {
    width: 176px;
  }

  .site-footer__contact {
    font-size: 16px;
    line-height: 1.45;
  }

  .site-footer__social {
    flex-flow: row nowrap;
    gap: 12px;
    font-size: 16px;
  }

  .site-footer__social span {
    margin-right: 2px;
  }

  .site-footer__social a {
    width: 28px;
    height: 28px;
  }

  .site-footer__social img {
    height: 23px;
  }

  .site-footer__bottom {
    display: flex;
    min-height: 20px;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 24px;
    padding-top: 0;
    padding-bottom: 0;
    font-size: 14px;
    line-height: 1.3;
    transform: translateY(-6px);
  }

  .site-footer .site-footer__bottom > span,
  .site-footer .site-footer__bottom > a {
    display: inline-flex !important;
    width: auto !important;
    max-width: none !important;
  }

  .site-footer__bottom a {
    margin-left: 0;
  }

  .cw-home {
    --cw-home-section-space: var(--cw-space-section-l);
  }

  .cw-resources-intro h2 {
    font-size: 34px;
    line-height: 1.12;
    white-space: normal;
  }

  .cw-resource-card__title,
  .cw-resources-group--wood-factsheets .cw-resource-card__title {
    min-height: 0;
    margin-top: var(--cw-space-content);
    margin-bottom: 0;
  }

  .cw-resource-card__button,
  .cw-resources-group--wood-factsheets .cw-resource-card__button {
    margin-top: var(--cw-space-content);
  }
}

/* Portrait tablets keep the touch-first mobile header, but have enough inline
   space for the compact desktop footer. */
@media (min-width: 768px) and (max-width: 1180px) and (orientation: portrait) {
  .site-footer {
    background: var(--cw-color-surface-evergreen-soft);
  }

  .site-footer::before {
    display: block;
    inset: 0 0 17px;
  }

  .site-footer__primary,
  .site-footer__secondary {
    background: transparent;
  }

  .site-footer__inner {
    min-height: 88px;
    grid-template-columns: 150px minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    padding-top: 0;
    padding-bottom: 14px;
  }

  .site-footer__brand,
  .site-footer__contact {
    transform: translateY(6px);
  }

  .site-footer__brand img {
    width: 140px;
  }

  .site-footer__contact {
    font-size: 14px;
    line-height: 1.42;
  }

  .site-footer__social {
    flex-flow: row nowrap;
    gap: 8px;
    font-size: 14px;
  }

  .site-footer__social span {
    margin-right: 1px;
  }

  .site-footer__social a {
    width: 24px;
    height: 24px;
  }

  .site-footer__social img {
    height: 20px;
  }

  .site-footer__bottom {
    display: flex;
    min-height: 18px;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 18px;
    padding: 0;
    font-size: 12px;
    line-height: 1.25;
    transform: translateY(-5px);
  }

  .site-footer .site-footer__bottom > span,
  .site-footer .site-footer__bottom > a {
    display: inline-flex !important;
    width: auto !important;
    max-width: none !important;
  }

  .site-footer__bottom a {
    margin-left: 0;
  }

  /* Sustainability follows the phone stacking model on portrait tablets. */
  .cw-why-page .cw-why-forests-builder {
    padding-top: 52px;
    padding-bottom: 56px;
  }

  .cw-why-page .cw-why-forests-builder > h2,
  .cw-why-page .cw-why-sustainable h2 {
    margin-bottom: 28px;
    font-size: 28px;
  }

  .cw-why-page .cw-why-forest-grid,
  .cw-why-page .cw-why-cert__columns,
  .cw-why-page .cw-why-cert__stats {
    grid-template-columns: 1fr;
  }

  .cw-why-page .cw-why-forest-grid {
    gap: 0;
  }

  .cw-why-page .cw-why-forest-column {
    min-height: auto;
    gap: 24px;
  }

  .cw-why-page .cw-why-forest-copy {
    flex: 0 0 auto;
    min-height: 0;
    padding: 4px 0 0;
    font-size: 16px;
    transform: none;
  }

  .cw-why-page .cw-why-forest-copy--lower {
    order: 1;
  }

  .cw-why-page .cw-why-forest-column:last-child .cw-why-forest-image {
    order: 2;
  }

  .cw-why-page .cw-why-forest-image {
    flex: 0 0 auto;
    height: clamp(320px, 55vw, 420px);
    min-height: clamp(320px, 55vw, 420px);
    transform: none;
  }

  .cw-why-page .cw-why-forest-image img {
    height: 100%;
    object-fit: cover;
  }

  .cw-why-page .cw-why-sustainable-stat {
    margin-bottom: 12px;
    padding: 15px 18px;
    font-size: 16px;
  }

  .cw-why-page .cw-why-sustainable__note {
    padding-left: 0;
  }

  .cw-why-page .cw-why-sustainable__map {
    width: 112%;
    max-width: none;
    margin-right: 0;
    margin-left: -6%;
  }

  .cw-why-page .cw-why-sustainable__map-captions {
    padding-inline: 6%;
  }

  .cw-why-page .cw-why-cert {
    min-height: auto;
  }

  .cw-why-page .cw-why-cert__inner {
    padding-top: 58px;
    padding-bottom: 62px;
  }

  .cw-why-page .cw-why-cert__columns {
    margin-bottom: 48px;
  }

  .cw-why-page .cw-why-cert__stats {
    gap: 34px;
  }

  .cw-why-page .cw-why-cert__footer {
    grid-template-columns: 1fr;
    gap: 36px;
    margin-top: 42px;
  }

  .cw-why-page .cw-why-cert__logos {
    width: 100%;
    justify-content: center;
    gap: 30px;
    margin-top: 0;
    padding-right: 0;
  }

  /* Finishes uses the compact mobile control bar and centred filter dialog. */
  .cw-finishes-browser {
    padding-top: 24px;
  }

  .cw-finishes__content {
    padding: 0 24px 56px;
  }

  .cw-finishes__toolbar {
    min-height: 40px;
    flex-flow: row wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
  }

  .cw-finishes__filter-toggle {
    position: relative;
    top: auto;
    z-index: 12;
    display: inline-flex;
    min-width: 104px;
    min-height: 40px;
    order: 1;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 8px 14px;
    border: 1px solid var(--cw-color-action);
    border-radius: 999px;
    background: var(--cw-color-action);
    color: var(--cw-white);
    font-size: 16px;
  }

  .cw-finishes-sort {
    position: relative;
    width: min(230px, calc(100% - 120px));
    flex: 0 0 auto;
    order: 2;
    margin-left: auto;
  }

  .cw-finishes-sort.is-customized .js-finishes-sort {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
  }

  .cw-finishes-sort__trigger {
    display: flex;
    width: 100%;
    min-height: 40px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 38px 7px 14px;
    border: 1px solid var(--cw-color-action);
    border-radius: 999px;
    background: var(--cw-white);
    color: var(--cw-color-text);
    font: inherit;
    font-size: 16px;
    line-height: 1.2;
    text-align: left;
  }

  .cw-finishes-sort__trigger::after {
    position: absolute;
    top: 50%;
    right: 16px;
    width: 10px;
    height: 10px;
    border-right: 2px solid var(--cw-green-primary);
    border-bottom: 2px solid var(--cw-green-primary);
    content: '';
    transform: translateY(-65%) rotate(45deg);
  }

  .cw-finishes-sort__menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    left: 0;
    z-index: 30;
    display: grid;
    overflow: hidden;
    padding: 8px 0;
    border-radius: 0 0 18px 18px;
    background: #f1f1f1;
    box-shadow: 0 10px 24px rgba(17, 71, 43, 0.16);
  }

  .cw-finishes-sort__menu[hidden] {
    display: none;
  }

  .cw-finishes-sort__option {
    width: 100%;
    min-height: 38px;
    padding: 8px 14px;
    border: 0;
    background: transparent;
    color: var(--cw-color-text);
    font: inherit;
    font-size: 16px;
    text-align: left;
  }

  .cw-finishes-active-filters:not([hidden]) {
    width: 100%;
    flex: 0 0 100%;
    order: 3;
    margin-top: 4px;
  }

  .cw-finishes__filters {
    position: fixed;
    top: 50%;
    right: auto;
    bottom: auto;
    left: 50%;
    z-index: 99;
    display: flex;
    width: min(calc(100vw - 48px), 520px);
    height: auto;
    min-height: 0;
    max-height: calc(100svh - 48px);
    flex-direction: column;
    overflow: hidden;
    padding: 0;
    border: 0;
    border-radius: 10px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22);
    transform: translate(-50%, -50%) scale(0.98);
    opacity: 0;
    visibility: hidden;
  }

  .cw-finishes__filters.is-open {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    visibility: visible;
  }

  .cw-finishes__filter-head {
    display: flex;
    min-height: 44px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px 6px 14px;
    border-bottom: 1px solid var(--cw-finishes-line);
    background: var(--cw-finishes-sidebar);
    color: var(--cw-green-primary);
    font-size: 16px;
  }

  .cw-finishes__filter-close {
    display: inline-grid;
    width: 32px;
    height: 32px;
    place-items: center;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--cw-green-primary);
    font-size: 28px;
  }

  .cw-finishes-filter-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    flex: 1 1 auto;
    align-content: start;
    gap: 12px 20px;
    overflow-y: auto;
    padding: 12px 16px 10px;
  }

  .cw-finishes-search {
    grid-column: 1 / -1;
    margin: 0;
  }

  .cw-finishes-search label,
  .cw-finishes-filter-form__group legend {
    margin-bottom: 5px;
    font-size: 14px;
  }

  .cw-finishes-filter-form__group {
    min-width: 0;
    margin: 0;
  }

  .cw-finishes-filter-form__option {
    min-height: 24px;
    margin: 0;
    gap: 7px;
    font-size: 14px;
  }

  .cw-finishes__filter-actions {
    display: block;
    flex: 0 0 auto;
    padding: 8px 16px;
    border-top: 1px solid var(--cw-finishes-line);
    background: var(--cw-finishes-sidebar);
    text-align: center;
  }

  .cw-finishes__filter-apply {
    width: min(160px, 100%);
    min-height: 38px;
    border: 0;
    background: var(--cw-color-action);
    color: var(--cw-white);
    font: inherit;
    font-size: 16px;
  }

  /* Certifications keeps the full desktop composition on portrait tablets. */
  .cw-why-page .cw-why-cert {
    min-height: 760px;
  }

  .cw-why-page .cw-why-cert__inner {
    padding-top: 68px;
    padding-bottom: 52px;
  }

  .cw-why-page .cw-why-cert__columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 42px;
    margin-bottom: 56px;
  }

  .cw-why-page .cw-why-cert__columns > :nth-child(2) {
    padding-top: 33px;
  }

  .cw-why-page .cw-why-cert__stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
  }

  .cw-why-page .cw-why-cert-stat__icon {
    width: 104px;
    height: 104px;
    margin-bottom: 20px;
  }

  .cw-why-page .cw-why-cert-stat strong {
    font-size: 48px;
  }

  .cw-why-page .cw-why-cert-stat span {
    font-size: 15px;
  }

  .cw-why-page .cw-why-cert__footer {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
    margin-top: 48px;
  }
}

@media (min-width: 900px) and (max-width: 1180px) and (orientation: landscape) {
  /* Restore the fixed desktop Sustainability map composition on landscape tablets. */
  .cw-why-page .cw-why-sustainable {
    grid-template-columns: minmax(0, 0.38fr) minmax(0, 0.62fr);
  }

  .cw-why-page .cw-why-sustainable__graphic {
    position: relative;
    display: block;
    width: 100%;
    height: 738px;
    grid-column: 1 / -1;
    margin-top: -192px;
  }

  .cw-why-page .cw-why-sustainable__canvas {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 820px;
  }

  .cw-why-page .cw-why-sustainable__stats {
    position: absolute;
    top: 290px;
    left: 0;
    width: 410px;
  }

  .cw-why-page .cw-why-sustainable__map {
    position: absolute;
    top: 40px;
    left: 460px;
    width: calc(100% - 460px);
    max-width: none;
    margin: 0;
  }

  .cw-why-page .cw-why-sustainable__map-captions {
    position: absolute;
    top: 665.75px;
    right: 0;
    left: 0;
    padding: 0;
  }

  .cw-why-page .cw-why-sustainable__lines {
    display: block;
  }
}

@media (max-width: 767px) {
  /* Every Sustainability map card uses the same selected-state motion. */
  .cw-why-sustainable-stat.is-active {
    z-index: 1;
    transform: translateX(8px);
    filter: brightness(1.08) saturate(1.12);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--sustainable-accent) 34%, transparent),
      0 12px 26px rgb(16 102 59 / 24%);
  }

  .cw-page-hero__caption h1,
  .cw-media-single-hero h1,
  .cw-species-hero__caption h1,
  .cw-species-hero__caption h2,
  .cw-finishes-hero__title {
    width: 100%;
    max-width: 100%;
    font-size: clamp(35px, calc(9vw + 7px), 45px) !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }

  /* Program titles have intentional line breaks and need their narrower
     established mobile scale. This remains exactly 7px above the original. */
  .cw-program-single-hero h1,
  .cw-programs-hero h1,
  .single-cw_program .cw-page-hero__caption h1 {
    font-size: clamp(34px, calc(7.6vw + 7px), 41px) !important;
  }

  .cw-species-hero__caption { right: 18px !important; left: 18px !important; width: auto !important; transform: none !important; }
  .cw-species-hero__caption p { font-size: 18px !important; overflow-wrap: anywhere; }
  .cw-home-species__tab { min-width: 0; padding-inline: 4px; font-size: 12px; overflow-wrap: anywhere; }
  .cw-home-gallery__heading { align-items: flex-end; gap: 12px; }
  .cw-home-gallery__heading a { flex: 0 0 auto; max-width: 46%; font-size: 16px; text-align: right; }

  /* Use Home's Learn more button as the mobile action-button token. Keep this
     scoped to semantic CTAs so tabs, filters, menus and carousel controls are
     not resized. */
  .cw-home-button,
  .cw-program-button,
  .cw-resources-button,
  .cw-media-button,
  .cw-gallery-category__text a,
  .cw-gallery-detail__back a,
  .cw-species-resource__button,
  .cw-thank-you__button,
  .cw-error-page__button,
  .cw-end-form button[type="submit"],
  .cw-company-form button[type="submit"],
  .cw-program-form button[type="submit"],
  .cw-media-single-form button[type="submit"],
  .cw-contact-lead button[type="submit"],
  .cw-species-contact button[type="submit"] {
    box-sizing: border-box;
    width: auto !important;
    max-width: 100%;
    min-width: 118px;
    min-height: 40px;
    padding: 10px 18px !important;
    font-size: 16px;
    line-height: 1;
  }

  .cw-species-resource__button {
    gap: 8px;
  }

  .cw-species-resource__button img {
    width: 20px;
    height: 20px;
  }

  .cw-event-card__status {
    right: 0;
    bottom: 10px;
    width: 72%;
    min-width: 142px;
    padding: 9px 10px 8px 34px;
    font-size: 15px;
  }

  .cw-species-why-cta { margin-top: 14px; margin-bottom: 38px; }
  .cw-why-gallery-cta .cw-program-card,
  .cw-species-why-cta .cw-program-card { height: min(50svh, 390px) !important; min-height: 250px; }
  .cw-species-panel__title { font-size: 30px !important; white-space: normal !important; }

  /* Gallery landing cards use Living Room as the shared mobile rhythm. */
  .cw-gallery-category,
  .cw-gallery-category.is-reversed {
    align-content: start;
    gap: 0;
    min-height: 0;
  }

  .cw-gallery-category__text h2 {
    margin-bottom: 19px;
  }

  .cw-gallery-category__text p {
    margin-bottom: 0;
  }

  .cw-gallery-category__text a {
    min-width: 118px;
    min-height: 40px;
    margin-top: 20px;
    padding: 10px 18px;
    font-size: 16px;
  }

  .cw-gallery-category__media {
    margin-top: 24px;
  }

  .cw-contact-people__grid { grid-template-columns: 1fr; gap: 24px; }

  /* Use the Event Detail form heading scale across every mobile form. */
  .cw-end-form--forest .cw-end-form__intro h2,
  .cw-company-form__intro h2,
  .cw-program-form__intro h2,
  .cw-media-single-form__intro h2,
  .cw-contact-lead__intro h2,
  .cw-species-contact__intro h2 {
    font-size: 28px !important;
    line-height: 1.08 !important;
    white-space: normal !important;
    overflow-wrap: normal;
    word-break: normal;
  }

  .cw-end-form--forest .cw-end-form__intro p,
  .cw-company-form__intro p,
  .cw-program-form__intro p,
  .cw-media-single-form__intro p,
  .cw-contact-lead__intro p,
  .cw-species-contact__intro p {
    font-size: 20px !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    overflow-wrap: normal;
    word-break: normal;
  }

  /* Contact mobile follows the same 44px section rhythm as hero → office. */
  .cw-contact-overview__inner {
    gap: 44px;
  }

  .cw-contact-people__grid {
    gap: 16px;
  }

  .cw-contact-person h3 {
    margin-bottom: 6px;
  }

  .cw-contact-person p + p {
    margin-top: 0 !important;
  }
  .cw-event-gallery { grid-template-columns: 1fr; gap: 12px; }
  .cw-event-lightbox { padding: 10px; }
  .cw-event-lightbox__arrow { width: 42px; height: 56px; }

  .cw-media-single--event .cw-media-single-hero h1 {
    right: 18px;
    bottom: 24px;
    left: 18px;
    width: auto;
    font-size: clamp(28px, 9vw, 38px) !important;
  }

  .cw-media-single--event .cw-media-single-hero h1::after {
    width: 72px;
    height: 3px;
    margin-top: 14px;
  }

  .cw-media-single--event .cw-media-single-body {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }

  .cw-media-single--event .cw-media-builder {
    gap: 20px !important;
  }

  .cw-media-single--event .cw-media-builder-block,
  .cw-media-single--event .cw-event-gallery {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .cw-media-single--event .cw-media-builder-figure,
  .cw-media-single--event .cw-media-builder-rich-text > :first-child {
    margin-top: 0;
  }

  .cw-media-single--event .cw-media-builder-figure,
  .cw-media-single--event .cw-media-builder-rich-text > :last-child {
    margin-bottom: 0;
  }

  /* Keep the event form invitation prominent on small screens. Its title
     intentionally shares the mobile size of the "Other Events" heading. */
  .cw-end-form--event .cw-end-form__intro h2 {
    font-size: 28px !important;
    line-height: 1.08 !important;
    white-space: normal !important;
    overflow-wrap: normal;
    word-break: normal;
  }

  .cw-end-form--event .cw-end-form__intro p {
    font-size: 20px !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    overflow-wrap: normal;
    word-break: normal;
  }
}

/* Tablet audit final cascade guard. */
@media (min-width: 768px) {
  .cw-page-hero,
  .cw-media-hero,
  .cw-media-single-hero,
  .cw-species-hero,
  .cw-finishes-hero,
  .cw-page-hero--static-banner,
  .cw-species-hero--static-banner,
  .cw-page-hero--height-full,
  .cw-page-hero--height-compact,
  .cw-media-single-hero--height-full,
  .cw-media-single-hero--height-compact,
  .cw-species-hero--height-full,
  .cw-species-hero--height-compact {
    height: min(50svh, 560px) !important;
    min-height: min(50svh, 360px) !important;
    max-height: 560px !important;
  }
}

@media (min-width: 768px) and (max-width: 1180px) {
  .cw-media-single-head { padding-top: 44px !important; padding-bottom: 12px !important; }
  .cw-media-single-head h1 { margin-bottom: 16px !important; }
  .cw-media-single-head time { margin-bottom: 0 !important; }
  .cw-media-single--news .cw-media-single-body,
  .cw-media-single--blog .cw-media-single-body { padding-top: 12px !important; }
  .cw-media-single--event .cw-media-single-body { padding-top: 36px !important; padding-bottom: 36px !important; }
  .cw-media-single--news .cw-media-builder,
  .cw-media-single--blog .cw-media-builder,
  .cw-media-single--event .cw-media-builder,
  .cw-media-single--success_story .cw-media-builder { gap: 28px !important; }
  .cw-resources-suppliers { padding-top: 40px !important; padding-bottom: 40px !important; }
  .cw-resources-directory { margin-bottom: 40px !important; }
  .cw-resources-vietnam { padding-bottom: 32px !important; }
  .cw-resources-suppliers__grid { gap: 24px !important; }
  .cw-events-list { padding-top: 32px !important; padding-bottom: 48px !important; }
  .cw-event-card {
    grid-template-columns: 104px minmax(0, 1fr) minmax(220px, 34%) !important;
    gap: 22px !important;
    min-height: 0 !important;
    align-items: center !important;
    padding: 24px !important;
  }
  .cw-event-card + .cw-event-card { margin-top: 28px !important; }
  .cw-event-card__date { width: 104px !important; min-height: 136px !important; height: 136px !important; margin-top: 0 !important; }
  .cw-event-card__date div { padding-block: 9px 8px; font-size: 16px; }
  .cw-event-card__date strong { font-size: 36px; }
  .cw-event-card__body { min-width: 0; height: auto !important; }
  .cw-event-card h2 { margin-bottom: 12px !important; font-size: 24px; }
  .cw-event-card__location { margin-bottom: 18px; }
  .cw-event-card__media { grid-column: 3 !important; width: 100%; height: 190px !important; aspect-ratio: auto !important; }
  .cw-event-card__media img { width: 100%; height: 100%; object-fit: cover; }
  .cw-events-toolbar form,
  .cw-finishes-sort,
  .cw-gallery-filter,
  .cw-gallery-filter__toggle { height: 44px; min-height: 44px; border-color: #8caf9a; border-radius: 999px; background: #fff; }
  .cw-events-toolbar form { min-width: 240px; padding-inline: 18px 14px; font-size: 15px; }
  .cw-events-toolbar select { height: 42px; }
}

@media (min-width: 768px) and (max-width: 900px) and (orientation: portrait) {
  .cw-resources-suppliers { padding-bottom: 32px !important; }
  .cw-event-card { grid-template-columns: 92px minmax(0, 1fr) minmax(210px, 33%) !important; gap: 18px !important; padding: 20px !important; }
  .cw-event-card__date { width: 92px !important; min-height: 118px !important; height: 118px !important; }
  .cw-event-card__date strong { font-size: 32px; }
  .cw-event-card__media { height: 170px !important; }
}

/* Events year filter shares Gallery's custom pill/dropdown treatment. */
.cw-events-toolbar form.is-customized {
  border: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.cw-events-toolbar form.is-customized > label,
.cw-events-toolbar form.is-customized > select {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.cw-events-filter {
  position: relative;
  width: 100%;
  color: #4f4f4f;
  font-size: 16px;
  line-height: 1.2;
}

.cw-events-filter__toggle {
  position: relative;
  z-index: 2;
  display: flex;
  width: 100%;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  border: 1.5px solid #8caf9a;
  border-radius: 999px;
  padding: 6px 18px 6px 24px;
  background: #fff;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.cw-events-filter__toggle i {
  width: 12px;
  height: 12px;
  border-right: 1.5px solid var(--cw-green-primary);
  border-bottom: 1.5px solid var(--cw-green-primary);
  transform: translateY(-3px) rotate(45deg);
  transition: transform 180ms ease;
}

.cw-events-filter.is-open .cw-events-filter__toggle i {
  transform: translateY(3px) rotate(225deg);
}

.cw-events-filter__options {
  position: absolute;
  z-index: 12;
  top: 22px;
  left: 0;
  display: grid;
  width: 100%;
  border-radius: 0 0 21px 21px;
  padding: 30px 12px 12px;
  background: #f1f1f1;
  box-shadow: 0 10px 22px rgb(0 0 0 / 8%);
}

.cw-events-filter__options[hidden] { display: none; }
.cw-events-filter__option {
  border: 0;
  padding: 8px 12px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.cw-events-filter__option:hover,
.cw-events-filter__option:focus-visible,
.cw-events-filter__option.is-selected {
  background: rgb(16 102 59 / 10%);
  color: var(--cw-green-primary);
}

/* Event status beside the title: prominent enough to scan, but deliberately
 * quieter than the primary Register action. */
.cw-event-card__heading {
  display: flex;
  width: 100%;
  min-width: 0;
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin-bottom: 16px;
}

.cw-event-card__heading h2,
.cw-event-card .cw-event-card__heading h2 {
  min-width: 0;
  flex: 0 1 auto;
  margin: 0 !important;
}

.cw-event-card__badge {
  position: relative;
  display: inline-flex;
  min-height: 34px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
  padding: 8px 16px 7px 21px;
  background: linear-gradient(135deg, #79bd43 0%, #5ca53f 72%, #4b963b 100%);
  color: var(--cw-white);
  clip-path: polygon(10px 0, 100% 0, 100% 100%, 10px 100%, 0 50%);
  filter: drop-shadow(0 5px 7px rgb(46 107 42 / 28%));
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.075em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

/* The title flag is now the single status treatment; suppress the older
 * thumbnail ribbon to avoid repeating the same message twice. */
.cw-event-card__status {
  display: block !important;
}

/* Temporarily awaiting client approval: keep the new title badge markup and
 * styling available, but show only the established thumbnail caption. */
.cw-event-card__badge {
  display: none !important;
}

@media (max-width: 900px) {
  .cw-event-card__heading {
    gap: 10px;
    margin-bottom: 12px;
  }

  .cw-event-card__badge {
    min-height: 29px;
    padding: 7px 12px 6px 17px;
    font-size: 11px;
  }
}

/* Tablet review: consistent section rhythm and touch-first program slider. */
@media (min-width: 768px) and (max-width: 1024px) {
  .cw-why-page .cw-why-forest-copy--lower {
    padding-top: 32px;
  }

  .cw-program-single-intro__text {
    margin-bottom: 32px !important;
  }

  .cw-program-benefits {
    padding-bottom: 20px !important;
  }

  .cw-program-benefits h2 {
    margin-bottom: 20px !important;
  }

  .cw-program-benefits__grid {
    row-gap: 20px !important;
  }

  .cw-resources-suppliers {
    padding-bottom: 0 !important;
  }

  .cw-resources-sections {
    padding-bottom: 40px !important;
  }

  .cw-home-programs__grid {
    touch-action: pan-x;
  }

  .cw-home-programs {
    position: relative;
  }

  .cw-home-programs > .cw-home-section-title {
    padding-right: 132px;
  }

  .cw-home-programs__slider {
    position: static;
    transform: none !important;
    will-change: auto !important;
  }

  .cw-home-program-card {
    flex-basis: 100% !important;
  }

  .cw-home-programs__arrow {
    display: flex !important;
    top: 84px;
    bottom: auto;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--cw-dark-evergreen);
    background: var(--cw-color-surface);
    color: var(--cw-dark-evergreen);
    transform: none;
  }

  .cw-home-programs__arrow--prev {
    right: 64px;
    left: auto;
  }

  .cw-home-programs__arrow--next {
    right: 0;
    left: auto;
  }

  .cw-home-programs__arrow span {
    width: 14px;
    height: 14px;
    margin: auto;
    border-width: 2px;
    border-color: var(--cw-dark-evergreen);
  }

  .cw-home.has-motion .cw-home-programs__arrow:hover,
  .cw-home.has-motion .cw-home-programs__arrow:focus,
  .cw-home.has-motion .cw-home-programs__arrow:focus-visible,
  .cw-home.has-motion .cw-home-programs__arrow:active {
    transform: none;
  }
}

/* Species detail: compact, fully-contained tablet composition in both
 * orientations. Keep this after the earlier tablet/mobile density layers. */
@media (min-width: 768px) and (max-width: 1024px) {
  .cw-species-tabs {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 6px;
    width: auto !important;
    max-width: none !important;
    margin-inline: 24px !important;
    padding-block: 6px;
    overflow: visible !important;
    background: var(--cw-white);
  }

  .cw-species-tabs__item {
    width: auto !important;
    min-width: 0 !important;
    min-height: 58px !important;
    padding: 7px 5px !important;
    border: 1px solid color-mix(in srgb, var(--cw-green-primary) 46%, transparent);
    border-radius: 6px;
    background: color-mix(in srgb, var(--cw-green-primary) 6%, var(--cw-white));
    font-size: clamp(13px, 1.65vw, 16px) !important;
    font-weight: 600;
    line-height: 1.12;
    overflow-wrap: normal;
    word-break: normal;
  }

  .cw-species-tabs__item + .cw-species-tabs__item::before,
  .cw-species-tabs__item.is-active::after {
    display: none !important;
  }

  .cw-species-tabs__item.is-active {
    border-color: transparent;
  }

  .cw-species-properties {
    padding-top: 32px !important;
    padding-bottom: 42px !important;
  }

  .cw-species-properties__grid {
    gap: 12px !important;
    margin-top: 30px !important;
  }

  .cw-species-accordion__trigger {
    min-height: 60px !important;
    padding: 14px 20px !important;
    font-size: 17px !important;
    line-height: 1.2;
  }

  .cw-species-accordion__icon {
    width: 21px;
    height: 21px;
  }

  .cw-species-accordion__icon::before {
    top: 10px;
  }

  .cw-species-accordion__icon::after {
    left: 10px;
  }

  .cw-species-accordion__panel {
    padding: 16px 20px 20px !important;
    font-size: 16px;
  }

  .cw-species-why-cta {
    margin-top: 10px !important;
    margin-bottom: 34px !important;
  }

  .cw-species-why-cta .cw-program-card {
    height: 260px !important;
    min-height: 0 !important;
    max-height: 260px !important;
  }

  .cw-species-why-cta .cw-program-card__content {
    padding: 28px 34px !important;
  }

  .cw-species-why-cta .cw-program-card__content h2 {
    margin-bottom: 14px !important;
    font-size: 28px !important;
  }

  .cw-species-why-cta .cw-program-card__content p {
    margin-bottom: 20px !important;
  }

  .cw-species-resources {
    padding-top: 8px !important;
    padding-bottom: 54px !important;
  }

  .cw-species-resources__viewport {
    margin-top: 30px !important;
    overflow: hidden;
  }

  .cw-species-resources__track,
  .cw-species-resources.has-slider .cw-species-resources__track {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
    overflow-x: auto;
  }

  .cw-species-resource,
  .cw-species-resources.has-slider .cw-species-resource {
    display: flex !important;
    min-width: 0;
    min-height: 0 !important;
    flex: none;
    flex-direction: column;
    gap: 0 !important;
    padding: 16px !important;
  }

  .cw-species-resource__media {
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible;
    background: transparent;
  }

  .cw-species-resource__image {
    display: block;
    width: 100%;
    height: auto !important;
    object-fit: contain !important;
  }

  .cw-species-resource__body {
    flex: 1 1 auto;
    padding: 18px 4px 4px;
  }

  .cw-species-resource h3 {
    margin-bottom: 14px !important;
    font-size: 18px !important;
  }

  .cw-species-resource__button {
    margin-top: auto;
  }
}

/* Home Species uses the same compact five-tab tablet treatment as Species
 * Detail when the device is in portrait orientation. */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  .cw-home-species__tabs {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 6px;
    padding-block: 6px;
    overflow: visible !important;
    scroll-snap-type: none;
    background: var(--cw-white);
  }

  .cw-home-species__tab {
    width: auto !important;
    min-width: 0 !important;
    min-height: 58px !important;
    flex: none !important;
    padding: 7px 5px !important;
    border: 1px solid color-mix(in srgb, var(--cw-green-primary) 46%, transparent);
    border-radius: 6px;
    background: color-mix(in srgb, var(--cw-green-primary) 6%, var(--cw-white));
    font-size: clamp(13px, 1.65vw, 16px) !important;
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: 0;
    overflow-wrap: normal;
    word-break: normal;
    scroll-snap-align: none;
  }

  .cw-home-species__tab + .cw-home-species__tab::before {
    display: none !important;
  }

  .cw-home-species__tab.is-active {
    border-color: transparent;
    background: var(--cw-home-species-accent, var(--cw-turquoise));
    color: var(--cw-white);
  }
}

@media (max-width: 767px) {
  .cw-event-card__heading {
    align-items: flex-start;
  }

}

/* Approved Events treatment: the supplied circular artwork gets its own
 * column so it can sit across the title/location area without crowding it. */
.cw-event-card__badge {
  position: static;
  min-height: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  clip-path: none;
  filter: none;
}

.cw-event-card__location-break {
  display: none;
}

@media (max-width: 1024px) {
  .cw-event-card__location .cw-event-card__location-address-break {
    display: none;
  }

  .cw-event-card__location-break {
    display: inline;
  }
}

@media (min-width: 1025px) {
  .cw-event-card {
    grid-template-columns: 104px minmax(0, 1fr) clamp(72px, 7vw, 102px) minmax(250px, 31%) !important;
    gap: clamp(22px, 2.2vw, 38px) !important;
  }

  .cw-event-card__badge {
    display: flex !important;
    height: var(--cw-event-card-content-height);
    align-items: flex-start;
    justify-content: center;
    padding-top: 2px;
  }

  .cw-event-card__badge img {
    display: block;
    width: min(100%, 96px);
    height: auto;
  }

  .cw-event-card__media {
    grid-column: 4 !important;
  }
}

@media (min-width: 1601px) {
  .cw-event-card {
    grid-template-columns: 118px minmax(0, 1fr) 112px minmax(300px, 32%) !important;
  }

  .cw-event-card__badge img {
    width: 106px;
  }
}

/* 06 Oct bug tracker rows 75–91: shared, last-layer corrections. */

/* 75 — reduce the tall Unique Properties cards without compressing copy. */
@media (min-width: 901px) {
  .cw-why-properties__grid {
    align-items: stretch;
  }

  .cw-why-property {
    min-height: clamp(260px, 22vw, 330px) !important;
    aspect-ratio: auto !important;
    padding: clamp(30px, 3vw, 44px) clamp(28px, 2.8vw, 40px) !important;
  }

  .cw-why-property-media img,
  .cw-why-property-media--wide img {
    min-height: clamp(260px, 22vw, 330px) !important;
    aspect-ratio: auto !important;
  }
}

/* 76 — keep CTA copy/actions comfortably above the card bottom edge. */
.cw-why-gallery-cta .cw-program-card__content,
.cw-species-why-cta .cw-program-card__content {
  padding-top: clamp(42px, 5vw, 76px) !important;
  padding-bottom: clamp(54px, 5vw, 78px) !important;
}

/* 79 — Resources card labels, including Key Material, stay sans-serif. */
.cw-resources .cw-resource-card__title,
.cw-resources .cw-resource-card__button,
.cw-resources .cw-resources-group__title {
  font-family: var(--font-body) !important;
}

/* 82 — event lightbox always contains the complete image in the viewport. */
.cw-event-lightbox__panel {
  width: min(1100px, calc(100vw - 48px)) !important;
  height: min(760px, calc(100svh - 48px)) !important;
}

.cw-event-lightbox__image {
  width: auto !important;
  height: auto !important;
  max-width: calc(100% - 72px) !important;
  max-height: calc(100% - 72px) !important;
  object-fit: contain !important;
}

/* 86 — long Species names wrap inside their mobile panel. */
@media (max-width: 767px) {
  .cw-species-panel__title {
    max-width: 100%;
    font-size: clamp(26px, 7.2vw, 30px) !important;
    line-height: 1.08 !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }

  .cw-species-hero__caption p,
  .cw-species-hero--static-banner .cw-species-hero__caption p {
    width: 100% !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }
}

/* 87 — reliable, tappable collection-modal arrows above all modal media. */
.cw-collection-modal__arrow {
  z-index: 8 !important;
  pointer-events: auto !important;
  touch-action: manipulation;
}

@media (max-width: 560px) {
  .cw-collection-modal__arrow {
    top: 50% !important;
    bottom: auto !important;
    width: 52px !important;
    height: 72px !important;
    background: rgb(255 255 255 / 82%);
    transform: translateY(-50%) !important;
  }

  .cw-collection-modal__arrow--prev { left: 4px !important; }
  .cw-collection-modal__arrow--next { right: 4px !important; }
}

/* 88 — compact the category footer rather than leaving a large blank tail. */
.cw-gallery-detail__back {
  padding-top: clamp(42px, 5vw, 72px) !important;
  padding-bottom: clamp(48px, 5.5vw, 80px) !important;
}

/* 89 — mobile custom Sort menu must paint above results/cards. */
@media (max-width: 860px) {
  .cw-finishes__content,
  .cw-finishes__toolbar {
    overflow: visible !important;
  }

  .cw-finishes__toolbar {
    position: relative;
    z-index: 60;
  }

  .cw-finishes-sort {
    z-index: 70 !important;
  }

  .cw-finishes-sort__menu {
    z-index: 80 !important;
  }
}

/* 90 — both About split images use identical contained mobile geometry. */
@media (max-width: 767px) {
  .cw-about-page .cw-about-split,
  .cw-about-page .cw-about-split__image {
    width: 100%;
    min-width: 0;
    overflow: hidden;
  }

  .cw-about-page .cw-about-split__image img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 10;
    object-fit: cover;
  }
}

/* 91 — keep Previous/Next controls visibly separated at every width. */
.cw-media-pagination {
  column-gap: clamp(12px, 2vw, 26px) !important;
  row-gap: 10px !important;
}

.cw-media-pagination .prev,
.cw-media-pagination .next {
  margin-inline: 4px;
}

/* 06 Oct row 74 follow-up: Finishes intro is a section heading, not a page
   title. Match the responsive About Us h2 scale. */
.cw-finishes-intro h2 {
  font-size: 34px !important;
  line-height: 1.12 !important;
}

@media (max-width: 900px) {
  .cw-finishes-intro h2 {
    font-size: 28px !important;
  }
}

@media (min-width: 1600px) {
  .cw-finishes-intro h2 {
    font-size: 37px !important;
  }
}

@media (min-width: 1920px) {
  .cw-finishes-intro h2 {
    font-size: 40px !important;
  }
}

/* 06 Oct row 79 correction: the requested “Discover Canadian Wood Vietnam”
   heading is on Resources. Keep it on the shared sans-serif body face. */
.cw-resources-intro h2 {
  font-family: var(--font-body) !important;
  font-weight: 400 !important;
}

/* Preserve the approved two-line Vietnamese Gallery collection names. */
.cw-gallery-card__title,
.cw-home-gallery__caption h3,
.js-gallery-modal-title,
.js-home-gallery-modal-title {
  white-space: pre-line;
}

/* 05 Oct Vietnamese Contact: the three translated green headings are longer
 * than their English counterparts. Let them wrap within their own grid area
 * and balance the lines instead of overlapping the adjacent column. */
html[lang="vi"] .cw-contact-office h1,
html[lang="vi"] .cw-contact-people h2,
html[lang="vi"] .cw-contact-resources h2 {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: normal;
  text-wrap: balance;
}

/* 05 Oct Vietnamese Finishes: use the complete content container for the
 * approved intro sentence instead of the English paragraph measure. */
html[lang="vi"] .cw-finishes-intro p {
  width: 100%;
  max-width: none;
}

/* 04 Oct Vietnamese desktop navigation: keep both header rows at the same
 * type size. Relative to the approved desktop header, VI is reduced by only
 * 2px and each row's original item spacing by 4px. */
@media (min-width: 1025px) {
  html[lang="vi"] .site-nav {
    font-size: 18px !important;
  }

  html[lang="vi"] .site-nav,
  html[lang="vi"] .site-nav__menu {
    gap: clamp(21.5px, calc(2.025vw - 4px), 33.5px) !important;
  }

  html[lang="vi"] .site-nav__menu > li > a {
    white-space: nowrap;
  }

  html[lang="vi"] .site-header__utility-inner,
  html[lang="vi"] .site-utility-nav__menu {
    gap: 38px !important;
  }

  html[lang="vi"] .site-utility-nav a,
  html[lang="vi"] .site-language__toggle {
    font-size: 18px !important;
  }

  /* Give Vietnamese diacritics a little more vertical breathing room while
   * retaining the approved brand typeface and existing font sizes. */
  html[lang="vi"] .site-nav__menu > li > a,
  html[lang="vi"] .site-utility-nav__menu > li > a,
  html[lang="vi"] .site-language__toggle {
    line-height: 1.22 !important;
  }
}

html[lang="vi"] .cw-home .cw-home-section-title {
  line-height: 1.12;
}

@media (min-width: 1280px) and (max-width: 1440px) {
  html[lang="vi"] .cw-home .cw-home-section-title {
    font-size: 47px;
  }
}

/* Vietnamese desktop headings: keep multi-line titles visually balanced and
 * prevent a single trailing word when the translated copy is longer. */
@media (min-width: 1025px) {
  html[lang="vi"] .site-main h1,
  html[lang="vi"] .site-main h2,
  html[lang="vi"] .site-main h3 {
    text-wrap: balance;
  }

  /* Sustainability checkerboard: Vietnamese copy needs more of its existing
   * column width, while each image should fill the height of its paired row. */
  html[lang="vi"] .cw-why-page .cw-why-forest-copy {
    padding-right: clamp(28px, 2vw, 38px);
    padding-left: clamp(28px, 2vw, 38px);
  }

  /* Keep the first B.C. Forests text block on the section-title grid line,
   * matching the approved English layout. The second checkerboard copy keeps
   * its inset because it sits below the right-hand image. */
  html[lang="vi"] .cw-why-page .cw-why-forest-copy--top {
    padding-left: 0;
  }

  html[lang="vi"] .cw-why-page .cw-why-forest-image--top,
  html[lang="vi"] .cw-why-page .cw-why-forest-image--bottom {
    position: relative;
    height: auto;
    align-self: stretch;
  }

  html[lang="vi"] .cw-why-page .cw-why-forest-image--top img,
  html[lang="vi"] .cw-why-page .cw-why-forest-image--bottom img {
    position: absolute;
    inset: 0;
  }
}

/* Sustainability: the shared body-type layer makes the B.C. Forests copy
 * larger than the following sections on smaller desktop widths. Match the
 * page's established desktop scale while leaving 1920px and above intact. */
@media (min-width: 1025px) and (max-width: 1599px) {
  .cw-why-page .cw-why-forest-copy {
    font-size: 15px !important;
    line-height: 1.42;
  }
}

@media (min-width: 1600px) and (max-width: 1919px) {
  .cw-why-page .cw-why-forest-copy {
    font-size: 16px !important;
    line-height: 1.42;
  }
}

/* Sustainability small desktop: the builder section inherited 100% content
 * width plus cw-container padding, making it 32px wider than the page grid. */
@media (min-width: 1025px) and (max-width: 1599px) {
  .cw-why-page .cw-media-builder-block.cw-why-forests-builder {
    box-sizing: border-box;
    width: min(var(--company-container), 100%);
    margin-right: auto;
    margin-left: auto;
  }
}

/* Home mobile video: preserve the supplied 9:16 portrait frame so embedded
 * captions remain fully visible. A natural aspect-ratio hero is intentionally
 * allowed to be shorter than the viewport on taller phones. */
@media (max-width: 767px) {
  .cw-home-video-hero {
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 9 / 16;
  }

  .cw-home-video-hero__media {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}

/* Home video on short desktop viewports (typically 1280x720 and 1366x768):
 * the 16:9 source is vertically cropped by object-fit: cover after browser
 * chrome reduces the usable height. Anchor that crop to the bottom so the
 * video's baked-in caption remains visible without changing the hero size or
 * affecting large desktop, tablet, and mobile layouts. */
@media (min-width: 1025px) and (max-width: 1440px) and (max-height: 850px) {
  body.home.cw-home-has-video-hero .cw-home-video-hero__media {
    object-position: center bottom;
  }
}

/* 24 Sep Home full-bleed header: utility dropdowns (Media/News) match the
 * primary dropdowns while they overlay the video. The sticky state keeps its
 * existing solid surface. */
@media (min-width: 1025px) {
  /* Keep every desktop flyout at least as wide as its parent label plus the
   * same left/right breathing room. Short utility children (Media in VI) used
   * to collapse the surface below the width of the parent label. */
  .site-nav__menu .sub-menu {
    box-sizing: content-box;
    min-width: 100%;
  }

  .site-utility-nav__menu .sub-menu {
    box-sizing: content-box;
    min-width: 100%;
  }

  body.home.cw-home-video-full-bleed .site-header:not(.is-scrolled) .site-header__utility .site-utility-nav__menu .sub-menu {
    background: rgba(8, 67, 46, 0.78) !important;
    border: 0;
    box-shadow: none;
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
  }

  body.home.cw-home-video-full-bleed .site-header:not(.is-scrolled) .site-header__utility .site-utility-nav__menu .sub-menu a {
    color: var(--cw-white) !important;
    text-shadow: none;
  }

  /* Match the primary flyout's light-evergreen active rule while utility and
   * language flyouts overlay the full-bleed video. */
  body.home.cw-home-video-full-bleed .site-header:not(.is-scrolled) .site-header__utility .site-utility-nav__menu .sub-menu a:hover,
  body.home.cw-home-video-full-bleed .site-header:not(.is-scrolled) .site-header__utility .site-utility-nav__menu .sub-menu a:focus-visible,
  body.home.cw-home-video-full-bleed .site-header:not(.is-scrolled) .site-header__utility .site-language__option:hover,
  body.home.cw-home-video-full-bleed .site-header:not(.is-scrolled) .site-header__utility .site-language__option:focus-visible {
    text-decoration-color: var(--cw-light-evergreen) !important;
    text-underline-offset: 6px;
  }

  /* Opening the language menu from its toggle must not decorate the remaining
   * language. Keep keyboard focus indicated by the existing outline; draw the
   * underline only while the pointer is directly over the option. */
  body.home.cw-home-video-full-bleed .site-header:not(.is-scrolled) .site-header__utility .site-language__option,
  body.home.cw-home-video-full-bleed .site-header:not(.is-scrolled) .site-header__utility .site-language__option:focus-visible {
    text-decoration: none !important;
  }

  body.home.cw-home-video-full-bleed .site-header:not(.is-scrolled) .site-header__utility .site-language__option:hover {
    text-decoration: underline !important;
    text-decoration-color: var(--cw-light-evergreen) !important;
    text-decoration-thickness: 1px;
    text-underline-offset: 6px;
  }
}

/* 24 Sep Home full-bleed sticky header: reuse the compact sticky treatment
 * from the contained-video option, including its soft evergreen main row. */
@media (min-width: 1025px) {
  body.home.cw-home-video-full-bleed .site-header.is-scrolled .site-header__main {
    background: var(--cw-color-surface-evergreen-soft) !important;
  }

  /* Use the shared compact header dimensions on Home as well (tracker 104). */
}

@media (min-width: 768px) and (max-width: 1024px) {
  .cw-event-card {
    grid-template-columns: 92px minmax(0, 1fr) 76px minmax(190px, 30%) !important;
    gap: 18px !important;
  }

  .cw-event-card__badge {
    display: flex !important;
    grid-column: 3;
    grid-row: 1;
    width: 76px;
    align-self: start;
    justify-self: center;
  }

  .cw-event-card__badge img {
    display: block;
    width: 100%;
    height: auto;
  }

  .cw-event-card__media {
    grid-column: 4 !important;
    grid-row: 1;
  }
}

@media (max-width: 767px) {
  .cw-event-card {
    grid-template-columns: 84px minmax(0, 1fr) !important;
    column-gap: 14px !important;
    row-gap: 8px !important;
  }

  .cw-event-card__date {
    grid-column: 1;
    grid-row: 1;
    min-height: 96px !important;
    height: 96px !important;
  }

  .cw-event-card__date div {
    padding-block: 5px !important;
  }

  .cw-event-card__date strong {
    margin-top: 6px !important;
    font-size: 32px !important;
  }

  .cw-event-card__date span {
    margin-top: 5px !important;
    margin-bottom: 5px !important;
  }

  .cw-event-card__body {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  .cw-event-card__badge {
    display: flex !important;
    grid-column: 1;
    grid-row: 2;
    width: 54px;
    align-self: start;
    justify-self: center;
    margin: 0;
  }

  .cw-event-card__badge img {
    display: block;
    width: 100%;
    height: auto;
  }

  .cw-event-card__media {
    grid-column: 1 / -1 !important;
    grid-row: 3;
    margin-top: 8px;
  }
}

/* News feature approved layout: editorial image at left, readable content
 * panel at right. The two panels collapse naturally on small screens. */
.cw-media-news > .cw-news-featured {
  display: grid;
  grid-template-columns: minmax(0, 38%) minmax(0, 62%);
  min-height: 0;
  align-items: stretch;
  overflow: hidden;
  background: transparent;
}

.cw-news-featured__media {
  min-height: clamp(300px, 25vw, 390px);
  overflow: hidden;
}

.cw-news-featured__image {
  position: static;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cw-news-featured__content {
  display: flex;
  width: auto;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(30px, 4vw, 58px);
  background: var(--cw-color-surface-evergreen-soft);
  color: var(--cw-color-text);
}

.cw-news-featured h1 {
  color: var(--cw-dark-evergreen);
  font-size: clamp(28px, 2.5vw, 42px);
  font-weight: 700;
  line-height: 1.16;
}

.cw-news-featured__date {
  margin-top: 16px;
  color: var(--cw-color-text);
  font-size: 16px;
}

.cw-news-featured__summary {
  margin: 18px 0 0;
  color: var(--cw-color-text);
  font-size: 17px;
  line-height: 1.42;
}

.cw-news-featured__button {
  margin-top: 24px;
}

@media (max-width: 900px) {
  .cw-media-news > .cw-news-featured {
    grid-template-columns: 1fr;
  }

  .cw-news-featured__media {
    min-height: 0;
    aspect-ratio: 16 / 9;
  }

  .cw-news-featured__content {
    gap: 28px;
    padding: 28px 24px 30px;
  }

  .cw-news-featured h1 {
    font-size: clamp(27px, 5vw, 34px);
  }

  .cw-news-featured__summary {
    margin-top: 0;
    font-size: 16px;
  }

  .cw-news-featured__date,
  .cw-news-featured__button {
    margin-top: 0;
  }
}

/* 23 Sep tablet rhythm pass: About, Species, Sustainability, Finishes and Gallery. */
@media (min-width: 768px) and (max-width: 1024px) {
  /* About: compact the paired editorial rows and use the same 44px section edge. */
  .cw-about-overview {
    padding-top: 44px !important;
  }

  .cw-about-split__copy {
    min-height: 340px !important;
    padding-top: 28px !important;
    padding-bottom: 28px !important;
  }

  .cw-about-split h2 {
    margin-bottom: 24px !important;
  }

  .cw-about-split__image,
  .cw-about-split__image img {
    height: 340px !important;
    min-height: 340px !important;
  }

  .cw-about-work {
    padding-top: 44px !important;
  }

  /* Species overview: text-to-images matches the title-to-description rhythm. */
  .cw-species-panel__inner {
    gap: 24px !important;
    padding-top: 40px !important;
    padding-bottom: 36px !important;
  }

  .cw-species-panel__text h2 {
    margin-bottom: 24px !important;
  }

  .cw-species-characteristics {
    padding-top: 44px !important;
    padding-bottom: 44px !important;
  }

  .cw-species-characteristics__grid {
    gap: 20px 36px !important;
    margin-top: 24px !important;
  }

  .cw-species-why-cta .cw-program-card {
    height: 312px !important;
    max-height: 312px !important;
  }

  /* Sustainability: use the same 44px boundary as Home sections. */
  .cw-why-page > .cw-page-hero + .cw-media-builder > .cw-why-forests-builder:first-child,
  .cw-why-page > .cw-page-hero + .cw-why-forests {
    padding-top: 44px !important;
  }

  .cw-why-page .cw-why-forests,
  .cw-why-page .cw-why-forests-builder {
    padding-bottom: 0 !important;
  }

  .cw-why-page .cw-why-sustainable {
    padding-top: 44px !important;
  }

  /* Finishes: symmetric intro spacing and balanced controls inside the tint. */
  .cw-finishes-intro {
    padding-top: 44px !important;
    padding-bottom: 44px !important;
  }

  .cw-finishes-browser {
    padding-top: 0 !important;
  }

  .cw-finishes__content {
    padding-top: 24px !important;
  }

  .cw-finishes__toolbar {
    margin-bottom: 24px !important;
  }

  /* Gallery landing: one compact, repeatable rhythm for intro and cards. */
  .cw-gallery-intro {
    padding-top: 40px !important;
    padding-bottom: 28px !important;
  }

  .cw-gallery-intro p {
    margin-bottom: 18px;
  }

  .cw-gallery-intro p:last-child {
    margin-bottom: 0;
  }

  .cw-gallery-categories {
    gap: 28px !important;
    padding-bottom: 48px !important;
  }

  .cw-gallery-category,
  .cw-gallery-category.is-reversed {
    gap: 24px !important;
    min-height: 0 !important;
    padding: 28px !important;
  }

  .cw-gallery-category__text {
    padding: 0 !important;
  }

  .cw-gallery-category__text h2,
  .cw-gallery-category__text p {
    margin-bottom: 20px !important;
  }
}

/* 23 Sep tablet consistency follow-up: captions, CTAs and adjacent blocks. */
@media (min-width: 768px) and (max-width: 1024px) {
  .cw-species-hero__caption p,
  .cw-species-hero--static-banner .cw-species-hero__caption p {
    width: 100%;
    max-width: 760px;
    margin: 12px 0 0 !important;
    font-size: 24px !important;
    line-height: 1.2 !important;
    text-align: left !important;
  }

  .cw-species-resources__viewport {
    margin-top: 10px !important;
  }

  .cw-why-gallery-cta .cw-program-card,
  .cw-species-why-cta .cw-program-card {
    position: relative;
    height: 312px !important;
    min-height: 312px !important;
    max-height: 312px !important;
  }

  .cw-why-gallery-cta .cw-program-card__content,
  .cw-species-why-cta .cw-program-card__content {
    position: absolute !important;
    right: 0;
    bottom: 0;
    left: 0;
    width: min(100%, 680px);
    padding: 32px 34px !important;
  }

  .cw-program-single-intro {
    padding-bottom: 0 !important;
  }

  .cw-program-offer {
    padding-top: 32px !important;
  }

  .cw-success-card + .cw-success-card {
    margin-top: 32px !important;
  }
}

/* Mobile Events: approved small badge pinned to the information corner. */
@media (max-width: 767px) {
  .cw-event-card {
    position: relative;
  }

  .cw-event-card__body {
    grid-row: 1;
  }

  .cw-event-card__badge {
    position: absolute !important;
    z-index: 2;
    grid-column: auto !important;
    grid-row: auto !important;
    top: 12px;
    right: 12px;
    display: block !important;
    width: 35px;
    height: 35px;
    margin: 0 !important;
    pointer-events: none;
  }

  .cw-event-card__status {
    display: none !important;
  }

  .cw-event-card__badge img {
    display: block;
    width: 35px;
    height: 35px;
  }

  .cw-event-card__media {
    grid-row: 2;
  }
}

/* Tablet forms: use the available panel width for a clearer title hierarchy. */
@media (min-width: 768px) and (max-width: 1024px) {
  .cw-end-form--forest .cw-end-form__intro h2,
  .cw-company-form__intro h2,
  .cw-program-form__intro h2,
  .cw-media-single-form__intro h2,
  .cw-contact-lead__intro h2 {
    font-size: 32px !important;
    line-height: 1.08 !important;
  }

  .cw-end-form--forest .cw-end-form__intro p,
  .cw-company-form__intro p,
  .cw-program-form__intro p,
  .cw-media-single-form__intro p,
  .cw-contact-lead__intro p {
    margin-top: 10px !important;
    font-size: 26px !important;
    line-height: 1.12 !important;
  }
}

/* 24 Sep Events date cards: give the date content enough room at every
 * non-mobile breakpoint and keep ranges such as 8-11 on one line. */
@media (min-width: 768px) {
  .cw-event-card__date strong {
    display: block;
    white-space: nowrap;
    word-break: keep-all;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .cw-event-card {
    grid-template-columns: 104px minmax(0, 1fr) 76px minmax(190px, 30%) !important;
  }

  .cw-event-card__date {
    width: 104px !important;
    height: 160px !important;
    min-height: 160px !important;
  }

  .cw-event-card__date div {
    padding-block: 10px 9px !important;
    font-size: 16px !important;
  }

  .cw-event-card__date strong {
    margin-top: 16px !important;
    font-size: 36px !important;
    line-height: 1 !important;
  }

  .cw-event-card__date span {
    margin-top: 12px !important;
    margin-bottom: 8px !important;
    font-size: 20px !important;
    line-height: 1.1 !important;
  }
}

@media (min-width: 1025px) and (max-width: 1365px) {
  .cw-event-card {
    --cw-event-card-content-height: 188px;
    grid-template-columns: 128px minmax(0, 1fr) clamp(72px, 7vw, 96px) minmax(250px, 31%) !important;
  }

  .cw-event-card__date {
    width: 128px !important;
    height: 188px !important;
    min-height: 188px !important;
  }

  .cw-event-card__date div {
    font-size: 17px;
  }

  .cw-event-card__date strong {
    margin-top: 18px;
    font-size: 43px;
    line-height: 1;
  }

  .cw-event-card__date span {
    margin-top: 14px;
    margin-bottom: 10px;
    font-size: 21px;
    line-height: 1.1;
  }
}

@media (min-width: 1366px) and (max-width: 1600px) {
  .cw-event-card {
    --cw-event-card-content-height: 208px;
    grid-template-columns: 148px minmax(0, 1fr) clamp(82px, 7vw, 102px) minmax(270px, 31%) !important;
  }

  .cw-event-card__date {
    width: 148px !important;
    height: 208px !important;
    min-height: 208px !important;
  }

  .cw-event-card__date strong {
    margin-top: 20px;
    font-size: 53px;
    line-height: 1;
  }

  .cw-event-card__date span {
    margin-top: 16px;
    margin-bottom: 10px;
    font-size: 23px;
    line-height: 1.1;
  }
}

@media (min-width: 1601px) {
  .cw-event-card {
    --cw-event-card-content-height: 228px;
    grid-template-columns: 168px minmax(0, 1fr) 112px minmax(300px, 32%) !important;
  }

  .cw-event-card__date {
    width: 168px !important;
    height: 228px !important;
    min-height: 228px !important;
  }

  .cw-event-card__date div {
    padding-block: 13px 12px;
    font-size: 22px;
  }

  .cw-event-card__date strong {
    margin-top: 22px;
    font-size: 63px;
    line-height: 1;
  }

  .cw-event-card__date span {
    margin-top: 18px;
    margin-bottom: 12px;
    font-size: 26px;
    line-height: 1.1;
  }
}

/* 16 Oct — tracker 106: share the heading row even when one title wraps. */
@media (min-width: 1025px) {
  .cw-why-cert__columns {
    grid-template-rows: auto auto;
    row-gap: 9px;
  }

  .cw-why-cert__columns > div {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 2;
    padding-top: 0 !important;
  }

  .cw-why-cert__columns h2 {
    margin-bottom: 0 !important;
    align-self: start;
  }
}

/* 108: a single SVG avoids the gap/overlap at the magnifier handle. */
.cw-media-news__search button {
  display: grid;
  place-items: center;
  padding: 0;
  color: var(--cw-evergreen);
}
.cw-media-news__search button::before,
.cw-media-news__search button::after {
  content: none;
}

/* 109: percentage max-height on an auto-sized grid item can overflow.
 * Bound both axes by the viewport and let object-fit contain the full photo. */
.cw-event-lightbox__image {
  width: 100% !important;
  height: 100% !important;
  min-width: 0;
  min-height: 0;
  max-width: calc(100vw - 120px) !important;
  max-height: calc(100svh - 120px) !important;
  object-fit: contain !important;
}