/* ===================================================================
   15+ BLOCK-SPECIFIC STYLES
   Translated from page prototypes into reusable block classes.
   Original prefixed classes kept as aliases for WC templates.
   =================================================================== */


/* ===== CORE: Heading block (break up content) ===== */
.wp-block-heading {
  margin-top: var(--space-4);
  margin-bottom: var(--space-5);
}
.wp-block-heading:first-child {
  margin-top: 0;
}


/* ===== CORE: Paragraph spacing ===== */
/* Adds vertical rhythm to <p> tags inside any prose / content area.
   Uses :where() (zero specificity) so specific block layouts can still
   override per element. */
.wp-block-paragraph,
:where(
  .pg-container__inner,
  .block-hero-banner__subtitle,
  .block-hero-banner__desc,
  .block-section-header__subtext,
  .block-section-header__heading,
  .card-feature__text,
  .sec-intro__body,
  .block-cta-section__body,
  .sec-cta__body,
  .block-content-detail__intro,
  .block-content-detail__detail,
  .sec-services__card-body,
  .proj-intro__body,
  .entry-content,
  .post-content
) p {
  margin-bottom: var(--space-4);
}
.wp-block-paragraph:last-child,
:where(
  .pg-container__inner,
  .block-hero-banner__subtitle,
  .block-hero-banner__desc,
  .block-section-header__subtext,
  .block-section-header__heading,
  .card-feature__text,
  .sec-intro__body,
  .block-cta-section__body,
  .sec-cta__body,
  .block-content-detail__intro,
  .block-content-detail__detail,
  .sec-services__card-body,
  .proj-intro__body,
  .entry-content,
  .post-content
) p:last-child {
  margin-bottom: 0;
}

/* Bare <ul>/<ol> inside prose areas (wysiwyg-authored lists without the
   .wp-block-list class). Matches the paragraph spacing pattern. */
:where(
  .pg-container__inner,
  .block-hero-banner__subtitle,
  .block-hero-banner__desc,
  .card-feature__text,
  .sec-intro__body,
  .block-cta-section__body,
  .sec-cta__body,
  .block-content-detail__intro,
  .block-content-detail__detail,
  .sec-services__card-body,
  .proj-intro__body,
  .entry-content,
  .post-content
) ul,
:where(
  .pg-container__inner,
  .block-hero-banner__subtitle,
  .block-hero-banner__desc,
  .card-feature__text,
  .sec-intro__body,
  .block-cta-section__body,
  .sec-cta__body,
  .block-content-detail__intro,
  .block-content-detail__detail,
  .sec-services__card-body,
  .proj-intro__body,
  .entry-content,
  .post-content
) ol {
  margin: var(--space-4) 0;
  padding-inline-start: 1.5em;
}
:where(
  .pg-container__inner,
  .block-hero-banner__subtitle,
  .block-hero-banner__desc,
  .card-feature__text,
  .sec-intro__body,
  .block-cta-section__body,
  .sec-cta__body,
  .block-content-detail__intro,
  .block-content-detail__detail,
  .sec-services__card-body,
  .proj-intro__body,
  .entry-content,
  .post-content
) ul { list-style: disc; }
:where(
  .pg-container__inner,
  .block-hero-banner__subtitle,
  .block-hero-banner__desc,
  .card-feature__text,
  .sec-intro__body,
  .block-cta-section__body,
  .sec-cta__body,
  .block-content-detail__intro,
  .block-content-detail__detail,
  .sec-services__card-body,
  .proj-intro__body,
  .entry-content,
  .post-content
) ol { list-style: decimal; }
:where(
  .pg-container__inner,
  .block-hero-banner__subtitle,
  .block-hero-banner__desc,
  .card-feature__text,
  .sec-intro__body,
  .block-cta-section__body,
  .sec-cta__body,
  .block-content-detail__intro,
  .block-content-detail__detail,
  .sec-services__card-body,
  .proj-intro__body,
  .entry-content,
  .post-content
) li {
  margin-bottom: var(--space-2);
  line-height: 1.6;
}
:where(
  .pg-container__inner,
  .block-hero-banner__subtitle,
  .block-hero-banner__desc,
  .card-feature__text,
  .sec-intro__body,
  .block-cta-section__body,
  .sec-cta__body,
  .block-content-detail__intro,
  .block-content-detail__detail,
  .sec-services__card-body,
  .proj-intro__body,
  .entry-content,
  .post-content
) li:last-child {
  margin-bottom: 0;
}


/* ===== CORE: List block (ul/ol) ===== */
.wp-block-list {
  margin: var(--space-4) 0;
  padding-inline-start: 1.5em;
}
.wp-block-list li {
  margin-bottom: var(--space-2);
  line-height: 1.6;
}
.wp-block-list li:last-child {
  margin-bottom: 0;
}
ul.wp-block-list { list-style: disc; }
ol.wp-block-list { list-style: decimal; }
.wp-block-list .wp-block-list {
  margin-top: var(--space-2);
  margin-bottom: 0;
}


/* ===== 14a. BLOCK: Container ===== */

.pg-container {
  position: relative;
}
.pg-container__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* Content widths — explicit values so they match the block's dropdown labels */
.pg-container--w-narrow  .pg-container__inner { max-width: 900px; }
.pg-container--w-default .pg-container__inner { max-width: 1280px; }
.pg-container--w-wide    .pg-container__inner { max-width: 1440px; }
.pg-container--w-full    .pg-container__inner { max-width: none; }

/* Full-width background */
.pg-container--full {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
}

/* Background image */
.pg-container__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.pg-container__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pg-container__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #000;
}
.pg-container--has-bg-image .pg-container__inner {
  position: relative;
  z-index: 2;
}

/* Padding top */
.pg-container--pt-none { padding-top: 0; }
.pg-container--pt-xs { padding-top: 0.5rem; }
.pg-container--pt-sm { padding-top: 1rem; }
.pg-container--pt-normal { padding-top: 2rem; }
.pg-container--pt-md { padding-top: 3rem; }
.pg-container--pt-lg { padding-top: 4rem; }
.pg-container--pt-xl { padding-top: 6rem; }
.pg-container--pt-xxl { padding-top: 8rem; }

/* Padding bottom */
.pg-container--pb-none { padding-bottom: 0; }
.pg-container--pb-xs { padding-bottom: 0.5rem; }
.pg-container--pb-sm { padding-bottom: 1rem; }
.pg-container--pb-normal { padding-bottom: 2rem; }
.pg-container--pb-md { padding-bottom: 3rem; }
.pg-container--pb-lg { padding-bottom: 4rem; }
.pg-container--pb-xl { padding-bottom: 6rem; }
.pg-container--pb-xxl { padding-bottom: 8rem; }

/* Margin top */
.pg-container--mt-none { margin-top: 0; }
.pg-container--mt-xs { margin-top: 0.5rem; }
.pg-container--mt-sm { margin-top: 1rem; }
.pg-container--mt-normal { margin-top: 2rem; }
.pg-container--mt-md { margin-top: 3rem; }
.pg-container--mt-lg { margin-top: 4rem; }
.pg-container--mt-xl { margin-top: 6rem; }
.pg-container--mt-xxl { margin-top: 8rem; }

/* Margin bottom */
.pg-container--mb-none { margin-bottom: 0; }
.pg-container--mb-xs { margin-bottom: 0.5rem; }
.pg-container--mb-sm { margin-bottom: 1rem; }
.pg-container--mb-normal { margin-bottom: 2rem; }
.pg-container--mb-md { margin-bottom: 3rem; }
.pg-container--mb-lg { margin-bottom: 4rem; }
.pg-container--mb-xl { margin-bottom: 6rem; }
.pg-container--mb-xxl { margin-bottom: 8rem; }

/* Responsive: reduce spacing on mobile */
@media (max-width: 768px) {
  .pg-container--pt-lg { padding-top: 2.5rem; }
  .pg-container--pt-xl { padding-top: 3.5rem; }
  .pg-container--pt-xxl { padding-top: 5rem; }
  .pg-container--pb-lg { padding-bottom: 2.5rem; }
  .pg-container--pb-xl { padding-bottom: 3.5rem; }
  .pg-container--pb-xxl { padding-bottom: 5rem; }
  .pg-container--mt-lg { margin-top: 2.5rem; }
  .pg-container--mt-xl { margin-top: 3.5rem; }
  .pg-container--mt-xxl { margin-top: 5rem; }
  .pg-container--mb-lg { margin-bottom: 2.5rem; }
  .pg-container--mb-xl { margin-bottom: 3.5rem; }
  .pg-container--mb-xxl { margin-bottom: 5rem; }
}


/* ===== 14b. BLOCK: Section Header ===== */

.block-section-header {
  position: relative;
}
.block-section-header__inner {
  max-width: var(--container-max, 1280px);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.block-section-header--narrow .block-section-header__inner {
  max-width: 900px;
}

/* Heading */
.block-section-header__heading {
  font-family: var(--font-heading);
  font-size: clamp(var(--text-2xl), 4vw, var(--text-5xl));
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: var(--heading-transform, uppercase);
  margin: 0 0 var(--space-4);
}
.block-section-header__heading p { margin: 0; }
.block-section-header__overline {
  margin-bottom: var(--space-3);
}
.block-section-header__subtext {
  max-width: 900px;
  margin-top: var(--space-4);
}
.block-section-header__subtext p {
  margin-bottom: var(--space-3);
}
.block-section-header__subtext p:last-child {
  margin-bottom: 0;
}
.block-section-header__breadcrumb {
  font-family: var(--font-subheading);
  font-size: var(--text-xs);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: var(--space-4);
  opacity: 0.7;
}
.block-section-header__breadcrumb a {
  color: inherit;
  text-decoration: none;
}
.block-section-header__breadcrumb a:hover {
  opacity: 1;
}

/* Alignment */
.block-section-header--center { text-align: center; }
.block-section-header--center .block-section-header__subtext { margin-left: auto; margin-right: auto; }
.block-section-header--right { text-align: right; }
.block-section-header--right .block-section-header__subtext { margin-left: auto; }

/* Padding variants */
.block-section-header--pad-compact { padding-top: var(--space-8); padding-bottom: var(--space-8); }
.block-section-header--pad-normal { padding-top: var(--space-12); padding-bottom: var(--space-10); }
.block-section-header--pad-large { padding-top: var(--space-16); padding-bottom: var(--space-12); }

/* Inline style (default) — transparent, no special treatment */
.block-section-header--inline {
  padding-top: var(--space-8);
  padding-bottom: var(--space-6);
}

/* Banner style — full-width with background, acts as page header */
.block-section-header--banner {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
}
.block-section-header--banner .block-section-header__heading {
  font-size: clamp(var(--text-3xl), 5vw, var(--text-6xl));
}

/* Divider colour inherits from text */
.block-section-header .sg-divider {
  border-color: currentColor;
  opacity: 0.2;
}

@media (max-width: 768px) {
  .block-section-header__heading {
    font-size: var(--text-2xl);
  }
  .block-section-header--banner .block-section-header__heading {
    font-size: var(--text-3xl);
  }
}


/* Section Header — Entrance Animations */

/* All animated elements start hidden */
.sh-animate .block-section-header__overline,
.sh-animate .block-section-header__heading,
.sh-animate .block-section-header__divider,
.sh-animate .block-section-header__subtext,
.sh-animate .block-section-header__breadcrumb {
  opacity: 0;
  transition: opacity 0.6s ease, transform 0.6s ease;
}

/* Stagger delays */
.sh-animate .block-section-header__breadcrumb { transition-delay: 0s; }
.sh-animate .block-section-header__overline { transition-delay: 0.1s; }
.sh-animate .block-section-header__heading { transition-delay: 0.2s; }
.sh-animate .block-section-header__divider { transition-delay: 0.35s; }
.sh-animate .block-section-header__subtext { transition-delay: 0.45s; }

/* Fade Up */
.sh-animate--fade-up .block-section-header__overline,
.sh-animate--fade-up .block-section-header__heading,
.sh-animate--fade-up .block-section-header__divider,
.sh-animate--fade-up .block-section-header__subtext,
.sh-animate--fade-up .block-section-header__breadcrumb {
  transform: translateY(20px);
}

/* Fade In — just opacity, no movement */

/* Slide Up — more dramatic movement */
.sh-animate--slide-up .block-section-header__overline,
.sh-animate--slide-up .block-section-header__heading,
.sh-animate--slide-up .block-section-header__divider,
.sh-animate--slide-up .block-section-header__subtext,
.sh-animate--slide-up .block-section-header__breadcrumb {
  transform: translateY(40px);
}
.sh-animate--slide-up .block-section-header__heading {
  transition-duration: 0.8s;
}

/* Type In — clip reveal on heading */
.sh-animate--type-in .block-section-header__heading {
  clip-path: inset(0 100% 0 0);
  opacity: 1;
  transition: clip-path 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition-delay: 0.2s;
}

/* Split Up — heading words animate individually (JS splits into spans) */
.sh-animate--split-up .block-section-header__heading .sh-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(100%);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

/* Divider — sweep in from left like nav underline */
.sh-animate .block-section-header__divider {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)), opacity 0.4s ease;
  transition-delay: 0.35s;
}

/* ── Triggered state (added by IntersectionObserver) ── */
.sh-animate.is-visible .block-section-header__overline,
.sh-animate.is-visible .block-section-header__heading,
.sh-animate.is-visible .block-section-header__divider,
.sh-animate.is-visible .block-section-header__subtext,
.sh-animate.is-visible .block-section-header__breadcrumb {
  opacity: 1;
  transform: translateY(0);
}
.sh-animate.is-visible .block-section-header__divider {
  transform: scaleX(1);
}
.sh-animate--type-in.is-visible .block-section-header__heading {
  clip-path: inset(0 0 0 0);
}
.sh-animate--split-up.is-visible .block-section-header__heading .sh-word {
  opacity: 1;
  transform: translateY(0);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .sh-animate .block-section-header__overline,
  .sh-animate .block-section-header__heading,
  .sh-animate .block-section-header__divider,
  .sh-animate .block-section-header__subtext,
  .sh-animate .block-section-header__breadcrumb {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
  }
  .sh-animate--split-up .block-section-header__heading .sh-word {
    opacity: 1 !important;
    transform: none !important;
  }
}


/* ===== 15. BLOCK: Hero Banner ===== */
/* Shared hero pattern: full viewport, bg image, overlay, animated content.
   Aliases: .hp-hero, .pdp-hero, .proj-hero, .sec-hero                    */

.block-hero-banner,
.hp-hero,
.pdp-hero,
.proj-hero,
.sec-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--color-charcoal-dark);
  color: var(--color-offwhite);
}

/* Alignment variants */
.block-hero-banner--bottom,
.proj-hero,
.sec-hero { align-items: flex-end; }

/* Height modifiers */
/* dvh = dynamic viewport height (respects mobile browser chrome). vh fallback
   for older browsers — minor over-fill there is acceptable. */
.block-hero-banner--full   { min-height: 100vh; min-height: 100dvh; }
.block-hero-banner--tall   { min-height: 80vh;  min-height: 80dvh; }
.block-hero-banner--medium { min-height: 60vh;  min-height: 60dvh; }
.block-hero-banner--short  { min-height: 40vh;  min-height: 40dvh; }

.block-hero-banner__bg,
.hp-hero__bg,
.pdp-hero__bg,
.proj-hero__bg,
.sec-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.block-hero-banner__bg img,
.hp-hero__bg img,
.proj-hero__bg img,
.sec-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: heroKenBurns 20s ease-out both;
}

@keyframes heroKenBurns {
  0%   { transform: scale(1) translateY(0); }
  100% { transform: scale(1.08) translateY(-2%); }
}

@keyframes scrollPulse {
  0%, 100% { opacity: 1; transform: translateY(0); }
  50%      { opacity: 0.3; transform: translateY(6px); }
}

@media (prefers-reduced-motion: reduce) {
  .block-hero-banner__bg img,
  .hp-hero__bg img,
  .proj-hero__bg img,
  .sec-hero__bg img {
    animation: none;
    transform: scale(1.02);
  }
  .block-hero-banner__scroll-line,
  .hp-hero__scroll-line { animation: none; }
}

/* ── Hero video background (MP4 or Vimeo iframe) ───────────────────
   The poster image is rendered first as a fallback; the video sits on
   top and covers the same box. On reduced-motion the video is hidden
   so the static poster shows through. */
.block-hero-banner__bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
  z-index: 1;
  /* Vimeo iframe scales by aspect ratio rather than cover, so we use a
     wrapper trick (see __bg-video-wrap below) for that case. */
}
.block-hero-banner__bg-video-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
}
/* Vimeo iframes need to scale to cover — sized via 16:9 aspect on the
   smaller dimension, then translated to centre. */
.block-hero-banner__bg-video-wrap iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 56.25vw;       /* 100vw × 9/16 */
  min-height: 100%;
  min-width: 177.78vh;   /* 100vh × 16/9 */
  transform: translate(-50%, -50%);
  border: 0;
}
/* Keep the poster image visible behind the video so there's no flash
   of black before metadata loads. */
.block-hero-banner--has-video .block-hero-banner__bg-img {
  z-index: 0;
}

@media (prefers-reduced-motion: reduce) {
  .block-hero-banner__bg-video,
  .block-hero-banner__bg-video-wrap {
    display: none;
  }
}

/* JS pauses/removes the video at runtime too — see assets/js/hero-video.js
   — so reduced-motion users get neither the visible animation nor the
   network/CPU cost of the video element loading. */
.pdp-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.12;
  filter: grayscale(40%);
  transform: scale(1.05);
  transition: transform 10s linear;
}

.block-hero-banner__overlay,
.hp-hero__overlay {
  position: absolute;
  inset: 0;
  /* Background is built inline by the block template based on chosen
     style + colour + opacity (see template-parts/blocks/hero-banner.php).
     hp-hero (homepage prototype) keeps the original gradient as fallback. */
  background: linear-gradient(90deg, rgba(26,26,26,0.82) 0%, rgba(26,26,26,0.5) 50%, rgba(26,26,26,0.2) 100%);
  z-index: 1;
}
.pdp-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(26,26,26,0.3) 0%, rgba(26,26,26,0.8) 100%);
  z-index: 1;
}
.proj-hero__overlay,
.sec-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(26,26,26,0.3) 0%, rgba(26,26,26,0.5) 50%, rgba(26,26,26,0.8) 100%);
  z-index: 1;
}

.block-hero-banner__content,
.hp-hero__content {
  position: relative;
  z-index: 2;
  max-width: var(--container-max);
  width: 100%;
  padding: var(--space-16) var(--gutter);
  margin: 0 auto;
}
.pdp-hero__content {
  position: relative;
  z-index: 2;
  padding: var(--space-20) var(--gutter);
  max-width: var(--container-xl);
  margin: 0 auto;
  width: 100%;
}
.proj-hero__content,
.sec-hero__content {
  position: relative;
  z-index: 2;
  padding: var(--space-20) var(--gutter) var(--space-16);
  max-width: var(--container-max);
  margin: 0 auto;
  width: 100%;
}

.block-hero-banner__overline,
.hp-hero__overline {
  color: var(--color-bronze-light);
  margin-bottom: var(--space-6);
  opacity: 0;
  animation: heroFadeIn 1.2s var(--ease-out-expo) 0.3s forwards;
}
.block-hero-banner__title,
.hp-hero__title {
  font-family: var(--font-heading);
  font-size: clamp(var(--text-5xl), 7vw, var(--text-display));
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: var(--space-6);
  color: var(--color-offwhite);
  opacity: 0;
  animation: heroFadeIn 1.2s var(--ease-out-expo) 0.6s forwards;
}
.block-hero-banner__desc,
.block-hero-banner__subtitle,
.hp-hero__desc {
  font-family: var(--font-body);
  font-size: var(--text-xl);
  line-height: 1.7;
  color: rgba(242,242,242,0.8);
  max-width: 680px;
  margin: 0 0 var(--space-10);
  opacity: 0;
  animation: heroFadeIn 1.2s var(--ease-out-expo) 0.9s forwards;
}
.block-hero-banner__cta,
.block-hero-banner__actions,
.hp-hero__cta {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  opacity: 0;
  animation: heroFadeIn 1.2s var(--ease-out-expo) 1.2s forwards;
}

/* Title size variants — default (display) keeps the original homepage size */
.block-hero-banner--title-standard .block-hero-banner__title {
  font-size: clamp(var(--text-4xl), 5vw, var(--text-6xl));
  letter-spacing: 0.08em;
  max-width: 800px;
}
.block-hero-banner--title-compact .block-hero-banner__title {
  font-size: clamp(var(--text-3xl), 4vw, var(--text-5xl));
  letter-spacing: 0.06em;
  max-width: 720px;
}
.block-hero-banner__scroll,
.hp-hero__scroll {
  position: absolute;
  bottom: var(--space-10);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  opacity: 0;
  animation: heroFadeIn 1.2s var(--ease-out-expo) 1.8s forwards;
}
.block-hero-banner__scroll-line,
.hp-hero__scroll-line {
  width: 1px;
  height: 40px;
  background: var(--color-bronze);
  animation: scrollPulse 2s ease-in-out infinite;
  display: block;
}
.block-hero-banner__scroll-label {
  color: var(--color-bronze-light);
  font-size: 0.625rem;
}

/* ── Hero alignment modifiers ──
   The title's Standard / Compact variants set max-width without a margin, so
   without `margin: 0 auto` the title element itself stays pinned left even
   when its text is centred. Same applies to right alignment. */
.block-hero-banner--align-center .block-hero-banner__content { text-align: center; }
.block-hero-banner--align-center .block-hero-banner__title,
.block-hero-banner--align-center .block-hero-banner__subtitle,
.block-hero-banner--align-center .block-hero-banner__desc { margin-left: auto; margin-right: auto; }
.block-hero-banner--align-center .block-hero-banner__actions,
.block-hero-banner--align-center .btn-row { justify-content: center; }

.block-hero-banner--align-right .block-hero-banner__content { text-align: right; }
.block-hero-banner--align-right .block-hero-banner__title,
.block-hero-banner--align-right .block-hero-banner__subtitle,
.block-hero-banner--align-right .block-hero-banner__desc { margin-left: auto; margin-right: 0; }
.block-hero-banner--align-right .block-hero-banner__actions,
.block-hero-banner--align-right .btn-row { justify-content: flex-end; }

/* Make sure hero arrow button uses bronze on dark backgrounds */
.block-hero-banner .btn--arrow,
.hp-hero .btn--arrow { color: var(--color-bronze-light); }
.block-hero-banner .btn--arrow:hover,
.hp-hero .btn--arrow:hover { color: var(--color-bronze); }

/* PDP Hero extras */
.pdp-hero__breadcrumb {
  font-family: var(--font-subheading);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: var(--space-8);
  opacity: 0;
  animation: heroFadeIn 1.2s var(--ease-out-expo) 0.3s forwards;
}
.pdp-hero__breadcrumb a { color: var(--color-grey-500); }
.pdp-hero__breadcrumb a:hover { color: var(--color-bronze-light); }
.pdp-hero__breadcrumb-sep { margin: 0 var(--space-2); color: var(--color-grey-600); }
.pdp-hero__category {
  font-family: var(--font-subheading);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-bronze-light);
  margin-bottom: var(--space-4);
  opacity: 0;
  animation: heroFadeIn 1.2s var(--ease-out-expo) 0.5s forwards;
}
.pdp-hero__title {
  font-family: var(--font-heading);
  font-size: clamp(var(--text-5xl), 8vw, var(--text-display));
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: var(--space-6);
  opacity: 0;
  animation: heroFadeIn 1.2s var(--ease-out-expo) 0.7s forwards;
}
.pdp-hero__tagline {
  font-family: var(--font-body);
  font-size: var(--text-xl);
  line-height: 1.6;
  max-width: 500px;
  color: rgba(242,242,242,0.8);
  opacity: 0;
  animation: heroFadeIn 1.2s var(--ease-out-expo) 0.9s forwards;
}
.pdp-hero__actions {
  display: flex;
  gap: var(--space-6);
  margin-top: var(--space-10);
  opacity: 0;
  animation: heroFadeIn 1.2s var(--ease-out-expo) 1.1s forwards;
}
.pdp-hero__line {
  width: 1px;
  height: 80px;
  background: var(--color-bronze);
  margin-top: var(--space-12);
  opacity: 0;
  animation: heroLineGrow 1.2s var(--ease-out-expo) 1.6s forwards;
}

/* Project Hero extras */
.proj-hero__breadcrumb {
  font-family: var(--font-subheading);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-grey-400);
  margin-bottom: var(--space-8);
  opacity: 0;
  animation: heroFadeIn 0.8s var(--ease-out-expo) 0.2s forwards;
}
.proj-hero__breadcrumb a { color: var(--color-grey-400); transition: color var(--duration-fast); }
.proj-hero__breadcrumb a:hover { color: var(--color-offwhite); }
.proj-hero__breadcrumb .breadcrumb-sep { color: var(--color-grey-600); margin: 0 var(--space-2); }
.proj-hero__overline {
  font-family: var(--font-subheading);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-bronze);
  margin-bottom: var(--space-4);
  opacity: 0;
  animation: heroFadeIn 0.8s var(--ease-out-expo) 0.4s forwards;
}
.proj-hero__title {
  font-family: var(--font-heading);
  font-size: clamp(var(--text-5xl), 6vw, var(--text-7xl));
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--color-offwhite);
  margin-bottom: var(--space-4);
  opacity: 0;
  animation: heroFadeIn 0.8s var(--ease-out-expo) 0.6s forwards;
}
.proj-hero__tagline {
  font-family: var(--font-body);
  font-size: var(--text-xl);
  color: var(--color-grey-400);
  opacity: 0;
  animation: heroFadeIn 0.8s var(--ease-out-expo) 0.8s forwards;
}
.proj-hero__line {
  width: 1px;
  background: var(--color-bronze);
  margin-top: var(--space-10);
  opacity: 0;
  height: 0;
  animation: heroLineGrow 1s var(--ease-out-expo) 1.2s forwards;
}

/* Inline hero CTA — "I want something like this" */
.proj-hero__cta {
  margin-top: var(--space-8);
  opacity: 0;
  animation: heroFadeIn 1s var(--ease-out-expo) 2s forwards;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.proj-hero__cta .proj-hero__cta-arrow {
  display: inline-block;
  transition: transform 300ms var(--ease-out-expo);
  font-family: var(--font-body);
}
.proj-hero__cta:hover .proj-hero__cta-arrow {
  transform: translateX(4px);
}

/* Sector Hero extras */
.sec-hero__breadcrumb {
  font-family: var(--font-subheading);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  color: var(--color-grey-400);
  margin-bottom: var(--space-6);
  opacity: 0;
  animation: heroFadeIn var(--duration-slow) var(--ease-out-expo) 200ms forwards;
}
.sec-hero__breadcrumb a { color: var(--color-grey-400); transition: color var(--duration-fast); }
.sec-hero__breadcrumb a:hover { color: var(--color-offwhite); }
.sec-hero__breadcrumb span { margin: 0 var(--space-2); }
.sec-hero__overline {
  color: var(--color-bronze);
  margin-bottom: var(--space-4);
  opacity: 0;
  animation: heroFadeIn var(--duration-slow) var(--ease-out-expo) 400ms forwards;
}
.sec-hero__title {
  color: var(--color-offwhite);
  max-width: 800px;
  margin-bottom: var(--space-6);
  opacity: 0;
  animation: heroFadeIn var(--duration-slow) var(--ease-out-expo) 600ms forwards;
}
.sec-hero__subtitle {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  color: var(--color-grey-400);
  max-width: 680px;
  line-height: 1.8;
  margin-bottom: var(--space-10);
  opacity: 0;
  animation: heroFadeIn var(--duration-slow) var(--ease-out-expo) 800ms forwards;
}
.sec-hero__cta {
  opacity: 0;
  animation: heroFadeIn var(--duration-slow) var(--ease-out-expo) 1000ms forwards;
}


/* ===== 16. BLOCK: Section Header ===== */
/* Reusable section wrapper with dark/light/bronze/offwhite variants.
   Aliases: .hp-section, .pdp-section, .proj-section                      */

.block-section,
.hp-section,
.pdp-section,
.proj-section {
  padding: var(--space-24) 0;
  position: relative;
}
/* Project pages use tighter section spacing */
.proj-section {
  padding: var(--space-12) 0;
}
.block-section--dark,
.hp-section--dark,
.pdp-section--dark,
.proj-section--dark {
  background: var(--color-charcoal-dark);
  color: var(--color-offwhite);
}
.block-section--offwhite,
.hp-section--offwhite,
.pdp-section--offwhite,
.proj-section--offwhite {
  background: var(--color-offwhite);
}
.block-section--bronze,
.hp-section--bronze {
  background: var(--color-bronze);
  color: var(--color-white);
}
.block-section__header,
.hp-section__header {
  margin-bottom: var(--space-12);
}
.proj-section__header {
  text-align: center;
  margin-bottom: var(--space-12);
}
.proj-section__title {
  font-family: var(--font-heading);
  font-size: clamp(var(--text-3xl), 4vw, var(--text-5xl));
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.15;
  margin-bottom: var(--space-3);
}
.proj-section__subtitle {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  color: var(--color-grey-600);
}


/* ===== 17. BLOCK: Feature Card ===== */
/* Base card-feature layout lives in main.css. This section adds typography
   + inner element styles + animation + full-width button option.          */

/* Overline — bronze-light on dark bg, bronze on light bg */
.card-feature__overline {
  color: var(--color-bronze-light);
  margin-bottom: var(--space-6);
}
.card-feature__content--light .card-feature__overline {
  color: var(--color-bronze);
}

/* Heading */
.card-feature__heading {
  margin: 0 0 var(--space-5);
  line-height: 1.15;
}
.card-feature__content--dark .card-feature__heading {
  color: var(--color-offwhite);
}

/* Body text */
.card-feature__text {
  margin: 0 0 var(--space-8);
  max-width: 440px; /* roughly 50% of the content column */
  line-height: 1.7;
}
.card-feature__content--dark .card-feature__text {
  color: rgba(242, 242, 242, 0.8);
}
.card-feature__text p:last-child { margin-bottom: 0; }

/* Feature list */
.card-feature__list {
  list-style: none;
  margin: 0 0 var(--space-8);
  padding: 0;
  max-width: 440px;
}
.card-feature__list li {
  padding: var(--space-3) 0;
  border-bottom: 1px solid rgba(175, 152, 123, 0.15);
  font-family: var(--font-body);
  font-size: var(--text-base);
}
.card-feature__content--dark .card-feature__list li {
  color: var(--color-grey-300);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
.card-feature__list li:last-child { border-bottom: 0; }

/* Actions — generous space above, supports full-width buttons */
.card-feature__actions {
  margin-top: var(--space-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
}
.card-feature__actions .btn--block {
  width: 100%;
  justify-content: center;
  flex-basis: 100%;
}

/* ── Staggered entrance animation on reveal ── */
.card-feature .card-feature__overline,
.card-feature .card-feature__heading,
.card-feature .card-feature__text,
.card-feature .card-feature__list,
.card-feature .card-feature__actions {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s var(--ease-out-expo), transform 0.7s var(--ease-out-expo);
}
.card-feature.is-visible .card-feature__overline { transition-delay: 0.05s; }
.card-feature.is-visible .card-feature__heading  { transition-delay: 0.15s; }
.card-feature.is-visible .card-feature__text     { transition-delay: 0.25s; }
.card-feature.is-visible .card-feature__list     { transition-delay: 0.35s; }
.card-feature.is-visible .card-feature__actions  { transition-delay: 0.45s; }
.card-feature.is-visible .card-feature__overline,
.card-feature.is-visible .card-feature__heading,
.card-feature.is-visible .card-feature__text,
.card-feature.is-visible .card-feature__list,
.card-feature.is-visible .card-feature__actions {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .card-feature .card-feature__overline,
  .card-feature .card-feature__heading,
  .card-feature .card-feature__text,
  .card-feature .card-feature__list,
  .card-feature .card-feature__actions {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Block editor: force visibility — reveal JS doesn't run in the editor,
   so we need the content to show by default rather than staying at opacity: 0 */
.editor-styles-wrapper .card-feature .card-feature__overline,
.editor-styles-wrapper .card-feature .card-feature__heading,
.editor-styles-wrapper .card-feature .card-feature__text,
.editor-styles-wrapper .card-feature .card-feature__list,
.editor-styles-wrapper .card-feature .card-feature__actions,
.is-root-container .card-feature .card-feature__overline,
.is-root-container .card-feature .card-feature__heading,
.is-root-container .card-feature .card-feature__text,
.is-root-container .card-feature .card-feature__list,
.is-root-container .card-feature .card-feature__actions {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* Button full-width helper (generic, usable in any block) */
.btn--block { width: 100%; justify-content: center; }


/* ─── Feature Card: Contained width modifier ─── */
.card-feature--contained {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}


/* ─── Feature Card: Overlay variant ─── */
/* Image takes ~75% width and full height; content card floats over the
   opposite side. Both elements share a single grid cell so they overlap
   without leaving normal flow — keeps spacing predictable in the editor. */
.card-feature--overlay {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  position: relative;
  overflow: visible;
  /* Use top/bottom only so .card-feature--contained's auto LR margins still
     centre the block. */
  margin-top: var(--space-12);
  margin-bottom: var(--space-12);
  /* Neutralise the direction: rtl that .card-feature--reversed adds for the
     standard 2-col layout. Overlay positions via justify-self start/end,
     which would be flipped under rtl. */
  direction: ltr;
}
.card-feature--overlay .card-feature__image {
  grid-area: 1 / 1;
  width: 75%;
  min-height: 600px;
  height: 100%;
  position: relative;
  inset: auto;
  justify-self: start;
}
.card-feature--overlay.card-feature--reversed .card-feature__image {
  justify-self: end;
}
.card-feature--overlay .card-feature__content {
  grid-area: 1 / 1;
  align-self: center;
  justify-self: end;
  width: clamp(360px, 40%, 540px);
  margin-right: var(--space-16);
  padding: var(--space-12);
  box-shadow: 0 30px 80px rgba(0,0,0,0.18), 0 8px 24px rgba(0,0,0,0.06);
  z-index: 2;
}
.card-feature--overlay.card-feature--reversed .card-feature__content {
  justify-self: start;
  margin-right: 0;
  margin-left: var(--space-16);
}
/* Ensure the content card has a solid background regardless of scheme */
.card-feature--overlay .card-feature__content--light {
  background: var(--color-white);
}

/* Tablet / mobile: drop overlay, fall back to stacked standard layout */
@media (max-width: 1024px) {
  .card-feature--overlay {
    grid-template-columns: 1fr;
  }
  .card-feature--overlay .card-feature__image,
  .card-feature--overlay.card-feature--reversed .card-feature__image {
    grid-area: auto;
    width: 100%;
    min-height: 0;
    aspect-ratio: 16 / 10;
    justify-self: stretch;
  }
  .card-feature--overlay .card-feature__content,
  .card-feature--overlay.card-feature--reversed .card-feature__content {
    grid-area: auto;
    align-self: auto;
    justify-self: stretch;
    width: 100%;
    margin: 0;
    padding: var(--space-10) var(--space-8);
    box-shadow: none;
  }
}

/* Parallax — image translates on scroll. JS wires data-parallax-y from
   scroll position; we just declare the will-change hint here. */
.card-feature--parallax .card-feature__image img {
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .card-feature--parallax .card-feature__image img {
    transform: none !important;
  }
}


.sec-spotlight {
  background: var(--color-charcoal-dark);
}
.sec-spotlight .card-feature__image {
  min-height: 560px;
}
.sec-spotlight .card-feature__features {
  list-style: none;
  margin: var(--space-6) 0;
  padding: 0;
}
.sec-spotlight .card-feature__features li {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-grey-300);
  padding: var(--space-3) 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.sec-spotlight .card-feature__features li::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--color-bronze);
  border-radius: 50%;
  flex-shrink: 0;
}


/* ===== 18. BLOCK: Product Card Grid ===== */
/* Uses base .card-product + .card-grid. Adds homepage grid alias.         */

.block-product-grid,
.hp-products-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-8);
}

.block-product-card-grid { padding: var(--space-12) 0; }
.block-product-card-grid__heading {
  margin-bottom: var(--space-8);
}
.block-product-card-grid__grid {
  display: grid;
  gap: var(--space-8);
}
.block-product-card-grid--cols-2 .block-product-card-grid__grid { grid-template-columns: repeat(2, 1fr); }
.block-product-card-grid--cols-3 .block-product-card-grid__grid { grid-template-columns: repeat(3, 1fr); }
.block-product-card-grid--cols-4 .block-product-card-grid__grid { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) {
  .block-product-card-grid--cols-4 .block-product-card-grid__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .block-product-card-grid--cols-3 .block-product-card-grid__grid,
  .block-product-card-grid--cols-4 .block-product-card-grid__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .block-product-card-grid__grid { grid-template-columns: 1fr !important; }
}

/* Card layout variants — override the base .card-product__image aspect-ratio */
.block-product-card-grid--square .card-product__image { aspect-ratio: 1 / 1; }
.block-product-card-grid--portrait .card-product__image { aspect-ratio: 3 / 4; }
.block-product-card-grid--landscape .card-product__image { aspect-ratio: 4 / 3; }
.block-product-card-grid--wide .card-product__image { aspect-ratio: 16 / 9; }
.block-product-card-grid--auto .card-product__image { aspect-ratio: unset; }
.block-product-card-grid--auto .card-product__image img { height: auto; }

/* Project card variant (from project pages) */
.proj-card {
  position: relative;
  overflow: hidden;
  display: block;
  text-decoration: none;
  cursor: pointer;
}
.proj-card__image {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--color-grey-200);
}
.proj-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out-expo);
}
.proj-card:hover .proj-card__image img { transform: scale(1.05); }
.proj-card__content { padding: var(--space-5) 0; }
.proj-card__category {
  font-family: var(--font-subheading);
  font-size: var(--text-xs);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-bronze);
  margin-bottom: var(--space-2);
}
.proj-card__title {
  font-family: var(--font-subheading);
  font-size: var(--text-lg);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--color-charcoal);
}

/* Homepage project cards (overlay style) */
.hp-projects-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}
.hp-project-card {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  display: block;
  text-decoration: none;
  cursor: pointer;
}
.hp-project-card__image { position: absolute; inset: 0; }
.hp-project-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-cinematic) var(--ease-out-expo);
}
.hp-project-card:hover .hp-project-card__image img { transform: scale(1.06); }
.hp-project-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent 40%, rgba(0,0,0,0.7));
  transition: background var(--duration-base) var(--ease-out-quart);
}
.hp-project-card:hover .hp-project-card__overlay {
  background: linear-gradient(transparent 20%, rgba(0,0,0,0.8));
}
.hp-project-card__content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-8);
  z-index: 1;
  color: var(--color-white);
}
.hp-project-card__sector {
  font-family: var(--font-subheading);
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-bronze-light);
  margin: 0 0 var(--space-2);
}
.hp-project-card__title {
  font-family: var(--font-heading);
  font-size: clamp(var(--text-xl), 2vw, var(--text-2xl));
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--color-white);
  margin: 0;
  line-height: 1.2;
}

/* Grid wrapper variant when block uses grid-2/3/4 */
.block-project-card-grid .grid-2,
.block-project-card-grid .grid-3,
.block-project-card-grid .grid-4 {
  gap: var(--space-6);
}


/* ===== BLOCK: Post Card Grid (Journal) ===== */
.block-post-card-grid {
  padding: var(--space-16) 0;
}
.block-post-card-grid .grid-2,
.block-post-card-grid .grid-3,
.block-post-card-grid .grid-4 {
  gap: var(--space-8);
}
.block-post-card-grid__footer {
  text-align: center;
  margin-top: var(--space-12);
}

/* Card */
.card-post {
  display: flex;
  flex-direction: column;
  background: transparent;
}
.card-post__image {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  margin-bottom: var(--space-5);
}
.card-post__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-cinematic, 800ms) var(--ease-out-expo, ease-out);
}
.card-post:hover .card-post__image img {
  transform: scale(1.04);
}
.card-post__content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
.card-post__meta {
  font-family: var(--font-subheading);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-grey-600);
  margin: 0 0 var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.card-post__category {
  color: var(--color-bronze-dark);
}
.card-post__sep {
  color: var(--color-grey-400);
}
.card-post__date {
  color: var(--color-grey-600);
}
.card-post__title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 500;
  line-height: 1.3;
  margin: 0 0 var(--space-3);
}
.card-post__title a {
  color: var(--color-charcoal);
  text-decoration: none;
  transition: color 200ms ease;
}
.card-post__title a:hover {
  color: var(--color-bronze-dark);
}
.card-post__excerpt {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-grey-700, #555);
  margin: 0 0 var(--space-4);
}
.card-post__actions {
  margin: var(--space-2) 0 0;
}

/* Tablet: 3/4 cols collapse to 2 */
@media (max-width: 1024px) {
  .block-post-card-grid .grid-3,
  .block-post-card-grid .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* Mobile: all 1 col */
@media (max-width: 768px) {
  .block-post-card-grid .grid-2,
  .block-post-card-grid .grid-3,
  .block-post-card-grid .grid-4 {
    grid-template-columns: 1fr;
  }
}

/* Background variants */
.block-project-card-grid--bg-light {
  background: var(--color-offwhite);
  padding: var(--space-16) 0;
}
.block-project-card-grid--bg-dark {
  background: var(--color-charcoal-dark);
  color: var(--color-offwhite);
  padding: var(--space-16) 0;
}
.block-project-card-grid--bg-dark .block-card-grid__overline {
  color: var(--color-bronze-light);
}
.block-project-card-grid--bg-dark .block-card-grid__heading {
  color: var(--color-offwhite);
}
.block-project-card-grid--bg-dark .block-card-grid__divider {
  border-color: rgba(175, 152, 123, 0.4);
}

@media (max-width: 768px) {
  .block-project-card-grid .grid-3,
  .block-project-card-grid .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
  .block-project-card-grid .grid-2,
  .block-project-card-grid .grid-3,
  .block-project-card-grid .grid-4 {
    grid-template-columns: 1fr;
  }
}

/* Homepage journal grid */
.hp-journal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
}


/* ═══════════════════════════════════════════
   SHARED: Card Grid Header (overline + heading + animated divider)
   Used by both category-card-grid and product-card-grid blocks.
   ═══════════════════════════════════════════ */

.block-card-grid__header {
  margin-bottom: var(--space-10);
}
.block-card-grid__header--center { text-align: center; }
.block-card-grid__header--left   { text-align: left; }

.block-card-grid__overline {
  color: var(--color-bronze);
  margin: 0 0 var(--space-3);
}

.block-card-grid__heading {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(var(--text-2xl), 3vw, var(--text-4xl));
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: var(--heading-transform, uppercase);
  color: var(--color-charcoal);
  line-height: 1.15;
}

/* Animated bronze divider — grows from centre/left when scrolled into view */
.block-card-grid__divider {
  display: block;
  width: 60px;
  height: 2px;
  background: var(--color-bronze);
  border: 0;
  margin: var(--space-6) 0 0;
  transform: scaleX(0);
  transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1) 200ms;
}
.block-card-grid__header--center .block-card-grid__divider {
  margin-left: auto;
  margin-right: auto;
  transform-origin: center;
}
.block-card-grid__header--left .block-card-grid__divider {
  transform-origin: left;
}
.block-card-grid__header.is-visible .block-card-grid__divider {
  transform: scaleX(1);
}

/* Dark variant — for when parent container is dark */
.block-card-grid__header--dark .block-card-grid__heading {
  color: var(--color-offwhite);
}
.block-card-grid__header--dark .block-card-grid__overline {
  color: var(--color-bronze-light);
}

@media (prefers-reduced-motion: reduce) {
  .block-card-grid__divider {
    transform: scaleX(1);
    transition: none;
  }
}

/* Ensure animated divider shows in editor (no reveal JS) */
.editor-styles-wrapper .block-card-grid__divider,
.is-root-container .block-card-grid__divider {
  transform: scaleX(1) !important;
  transition: none !important;
}


/* ===== 19. BLOCK: Category Card Grid ===== */
/* Uses base .card-category. Adds aspect-ratio variants + responsive.      */

.block-category-grid,
.hp-categories-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}

.block-category-card-grid {
  padding: var(--space-12) 0;
}
.block-category-card-grid__header {
  margin-bottom: var(--space-8);
  text-align: center;
}
.block-category-card-grid .grid-2,
.block-category-card-grid .grid-3,
.block-category-card-grid .grid-4 {
  gap: var(--space-6);
}

/* Card layout variants — override base .card-category aspect-ratio */
.block-category-card-grid--landscape .card-category { aspect-ratio: 3 / 2; }
.block-category-card-grid--square    .card-category { aspect-ratio: 1 / 1; }
.block-category-card-grid--portrait  .card-category { aspect-ratio: 3 / 4; }
.block-category-card-grid--wide      .card-category { aspect-ratio: 16 / 9; }

/* Placeholder image */
.card-category__image--placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
}

/* Responsive */
@media (max-width: 1024px) {
  .block-category-card-grid .grid-4 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .block-category-card-grid .grid-3,
  .block-category-card-grid .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .block-category-card-grid .grid-2,
  .block-category-card-grid .grid-3,
  .block-category-card-grid .grid-4 { grid-template-columns: 1fr; }
}


/* ===== 20. BLOCK: Stats Bar ===== */
/* Aliases: .stats-bar (already in base), repeated here for clarity.       */

.block-stats-bar,
.stats-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-8);
  padding: var(--space-12) 0;
  border-top: 1px solid rgba(255,255,255,0.1);
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.block-stats-bar .stat__number,
.stat__number {
  font-family: var(--font-heading);
  font-size: var(--text-4xl);
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--color-bronze);
}
.block-stats-bar .stat__label,
.stat__label {
  font-family: var(--font-subheading);
  font-size: var(--text-xs);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-top: var(--space-2);
  opacity: 0.7;
}
.stat { text-align: center; }


/* ===== 21. BLOCK: Press Bar ===== */

.block-press-bar,
.press-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-12);
  padding: var(--space-10) 0;
  opacity: 0.4;
}
.block-press-bar__item,
.press-bar__item {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}


/* ===== 22. BLOCK: CTA Section ===== */
/* Shared CTA pattern from sector page.                                    */

.block-cta-section,
.sec-cta {
  background: var(--color-charcoal-dark);
  color: var(--color-offwhite);
  padding: var(--space-20) 0;
  text-align: center;
}

/* Overline above heading (both CTA blocks share the prototype's spacing) */
.block-cta-section__overline,
.sec-cta__overline {
  color: var(--color-bronze);
  margin: 0 0 var(--space-4);
}
.block-cta-section--light .block-cta-section__overline {
  color: var(--color-bronze-dark);
}
.block-cta-section--bronze .block-cta-section__overline {
  color: rgba(255, 255, 255, 0.7);
}

/* Bronze scheme — brand colour background, white text */
.block-cta-section--bronze {
  background: var(--color-bronze);
  color: var(--color-white);
}
.block-cta-section--bronze .block-cta-section__heading {
  color: var(--color-white);
}
.block-cta-section--bronze .block-cta-section__body {
  color: rgba(255, 255, 255, 0.85);
}
.block-cta-section--bronze .block-cta-section__contact {
  color: rgba(255, 255, 255, 0.85);
}
.block-cta-section--bronze .block-cta-section__contact a {
  color: var(--color-white);
}
.block-cta-section--bronze .block-cta-section__contact a:hover {
  color: var(--color-charcoal-dark);
}
.block-cta-section--bronze .block-cta-section__contact span {
  color: rgba(255, 255, 255, 0.4);
}
/* Outline-light buttons inside bronze CTA need translucent white border */
.block-cta-section--bronze .btn--outline-light {
  border-color: rgba(255, 255, 255, 0.5);
  color: var(--color-white);
}
.block-cta-section--bronze .btn--outline-light:hover {
  border-color: var(--color-white);
  background: rgba(255, 255, 255, 0.1);
}

/* Light scheme override */
.block-cta-section--light {
  background: var(--color-offwhite);
  color: var(--color-charcoal);
}
.block-cta-section--light .block-cta-section__heading {
  color: var(--color-charcoal);
}
.block-cta-section--light .block-cta-section__body {
  color: var(--color-grey-700);
}
.block-cta-section--light .block-cta-section__contact {
  color: var(--color-grey-700);
}
.block-cta-section--light .block-cta-section__contact a {
  color: var(--color-charcoal);
}
.block-cta-section--light .block-cta-section__contact a:hover {
  color: var(--color-bronze-dark);
}
.block-cta-section--light .block-cta-section__contact span {
  color: var(--color-grey-400);
}
.block-cta-section__heading,
.sec-cta__heading {
  color: var(--color-offwhite);
  margin-bottom: var(--space-6);
}
.block-cta-section__body,
.sec-cta__body {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  color: var(--color-grey-400);
  max-width: 600px;
  margin: 0 auto var(--space-10);
  line-height: 1.7;
}
.block-cta-section__buttons,
.sec-cta__buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: var(--space-8);
  margin-bottom: var(--space-10);
}
.block-cta-section__contact,
.sec-cta__contact {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-grey-500);
}
.sec-cta__contact a { color: var(--color-grey-400); transition: color var(--duration-fast); }
.sec-cta__contact a:hover { color: var(--color-offwhite); }
.sec-cta__contact span { margin: 0 var(--space-3); color: var(--color-grey-600); }


/* ===== 23. BLOCK: Masonry Gallery ===== */
/* Aliases: .proj-gallery                                                  */

.block-masonry-gallery__grid,
.proj-gallery__grid {
  columns: 2;
  column-gap: var(--space-4);
}
.block-masonry-gallery__item,
.proj-gallery__item {
  break-inside: avoid;
  margin-bottom: var(--space-4);
  overflow: hidden;
  cursor: zoom-in;
  position: relative;
}
.block-masonry-gallery__item img,
.proj-gallery__item img {
  width: 100%;
  display: block;
  transition: transform var(--duration-slow) var(--ease-out-expo);
}
.block-masonry-gallery__item:hover img,
.proj-gallery__item:hover img { transform: scale(1.03); }


/* ===== 24. BLOCK: Tabs Section ===== */
/* Aliases: .bop-tabs-section, .bop-tabs__*                               */

.block-tabs-section,
.bop-tabs-section {
  background: var(--color-offwhite);
  padding: var(--space-16) 0;
}
.block-tabs__nav,
.bop-tabs__nav {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--color-grey-300);
  margin-bottom: var(--space-10);
}
.block-tabs__btn,
.bop-tabs__btn {
  padding: var(--space-4) var(--space-8);
  font-family: var(--font-subheading);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-grey-500);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  transition: color var(--duration-fast), border-color var(--duration-fast);
}
.block-tabs__btn:hover,
.bop-tabs__btn:hover { color: var(--color-charcoal); }
.block-tabs__btn.is-active,
.bop-tabs__btn.is-active {
  color: var(--color-charcoal);
  border-bottom-color: var(--color-bronze);
}
.block-tabs__panel,
.bop-tabs__panel {
  display: none;
}
.block-tabs__panel.is-active,
.bop-tabs__panel.is-active { display: block; }


/* ===== 25. BLOCK: Trust Signals ===== */
/* Aliases: .bop-trust                                                     */

.block-trust-signals,
.bop-trust {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  padding: var(--space-6);
  background: var(--color-grey-100);
  margin-bottom: var(--space-8);
}
.block-trust-signals__item,
.bop-trust__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.block-trust-signals__icon,
.bop-trust__icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-bronze);
  font-size: 20px;
  line-height: 1;
}
.block-trust-signals__icon i,
.bop-trust__icon i {
  color: inherit;
  font-size: inherit;
  line-height: 1;
}
/* Legacy inline SVG support — kept for any block-trust-signals data still
   using the old icon_svg field; safe to remove once all signals are migrated. */
.bop-trust__icon svg,
.block-trust-signals__icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
}
.block-trust-signals__text,
.bop-trust__text {
  font-family: var(--font-body-alt);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--color-charcoal);
}


/* ===== 26. BLOCK: Content + Detail ===== */
/* Two-column layout: rich text left, detail list right.
   Aliases: .pdp-intro, .proj-intro                                        */

.block-content-detail,
.pdp-intro {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: var(--space-16);
  align-items: start;
}
.proj-intro {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--space-16);
  align-items: start;
}
.proj-intro__overline {
  font-family: var(--font-subheading);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-bronze);
  margin-bottom: var(--space-4);
}
.proj-intro__heading {
  font-family: var(--font-heading);
  font-size: clamp(var(--text-2xl), 3vw, var(--text-4xl));
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1.2;
  color: var(--color-charcoal);
  margin-bottom: var(--space-6);
}
.proj-intro__body p {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.8;
  color: var(--color-charcoal-light);
  margin-bottom: var(--space-6);
}
.proj-intro__body p:last-child { margin-bottom: 0; }
.proj-intro__details {
  border-left: 1px solid var(--color-bronze-20);
  padding-left: var(--space-8);
}
.proj-intro__detail {
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-grey-300);
}
.proj-intro__detail:first-child { padding-top: 0; }
.proj-intro__detail-label {
  font-family: var(--font-subheading);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-grey-500);
  margin-bottom: var(--space-1);
}
.proj-intro__detail-value {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-charcoal);
}

/* Detail list (shared by pdp and block) */
.block-detail-list,
.pdp-detail-list {
  border-top: 1px solid var(--color-grey-300);
}
.pdp-detail-list--dark { border-top-color: rgba(255,255,255,0.1); }
.pdp-detail-list--dark .pdp-detail-list__item { border-bottom-color: rgba(255,255,255,0.1); }
.pdp-detail-list--dark .pdp-detail-list__value { color: var(--color-offwhite); }
.block-detail-list__item,
.pdp-detail-list__item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-grey-300);
}
.block-detail-list__label,
.pdp-detail-list__label {
  font-family: var(--font-subheading);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-grey-500);
}
.block-detail-list__value,
.pdp-detail-list__value {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-charcoal);
  text-align: right;
}


/* ===== 27. BLOCK: Sector Intro ===== */
/* Two-column intro with image. Alias: .sec-intro                          */

.block-sector-intro,
.sec-intro {
  padding: var(--space-24) 0;
  background: var(--color-white);
}
.block-sector-intro__grid,
.sec-intro__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
}
.block-sector-intro__overline,
.sec-intro__overline {
  color: var(--color-bronze);
  margin-bottom: var(--space-4);
}
.block-sector-intro__heading,
.sec-intro__heading {
  margin-bottom: 0;
}
.block-sector-intro__body,
.sec-intro__body {
  margin-top: var(--space-4);
}
.block-sector-intro__image,
.sec-intro__image {
  overflow: hidden;
}
.sec-intro__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 3 / 2;
}


/* ===== 28. BLOCK: Sector Services ===== */
/* Services card grid. Alias: .sec-services                                */

.block-sector-services,
.sec-services {
  padding: var(--space-24) 0;
  background: var(--color-offwhite);
}
.block-sector-services__heading,
.sec-services__heading {
  text-align: center;
  margin-bottom: var(--space-16);
}
.block-sector-services__card,
.sec-services__card {
  background: var(--color-white);
  overflow: hidden;
  transition: box-shadow var(--duration-base) var(--ease-out-expo);
}
.sec-services__card:hover { box-shadow: 0 8px 40px rgba(0,0,0,0.06); }
.block-sector-services__card-image,
.sec-services__card-image {
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.sec-services__card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out-expo);
}
.sec-services__card:hover .sec-services__card-image img { transform: scale(1.03); }
.block-sector-services__card-content,
.sec-services__card-content {
  padding: var(--space-8) var(--space-8) var(--space-10);
}
.sec-services__card-title { margin-bottom: var(--space-4); }
.sec-services__card-body { color: var(--color-grey-600); }
.sec-services__card-actions {
  margin: var(--space-6) 0 0;
}

/* Sector projects grid */
.sec-projects {
  padding: var(--space-24) 0;
  background: var(--color-white);
}
.sec-projects__heading {
  text-align: center;
  margin-bottom: var(--space-16);
}


/* ===== 29. BLOCK: Contact CTA ===== */
/* (Identical to section 22 above — sec-cta is the canonical class.) */


/* ===== 30. BLOCK: Download Cards ===== */
/* Aliases: .pdp-download-card                                             */

.block-download-card,
.pdp-download-card {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-6);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-sm);
  transition: all var(--duration-base) var(--ease-out-expo);
  text-decoration: none;
  color: var(--color-offwhite);
}
.block-download-card:hover,
.pdp-download-card:hover {
  background: rgba(255,255,255,0.08);
  border-color: var(--color-bronze);
  transform: translateY(-2px);
  color: var(--color-offwhite);
}
.block-download-card__icon,
.pdp-download-card__icon { flex-shrink: 0; color: var(--color-bronze); }
.block-download-card__title,
.pdp-download-card__title {
  font-family: var(--font-subheading);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.02em;
  margin-bottom: var(--space-1);
}
.block-download-card__meta,
.pdp-download-card__meta {
  font-family: var(--font-body-alt);
  font-size: var(--text-xs);
  color: var(--color-grey-500);
}
.block-download-card__arrow,
.pdp-download-card__arrow {
  margin-left: auto;
  flex-shrink: 0;
  color: var(--color-grey-500);
  transition: color var(--duration-fast) var(--ease-out-quart);
}
.pdp-download-card:hover .pdp-download-card__arrow,
.block-download-card:hover .block-download-card__arrow { color: var(--color-bronze); }


/* ===== 31. BLOCK: Breadcrumb ===== */
/* Aliases: .bop-breadcrumb                                                */

.block-breadcrumb,
.bop-breadcrumb {
  padding-top: var(--space-4);
  padding-bottom: var(--space-4);
  background: var(--color-grey-100);
  border-bottom: 1px solid var(--color-grey-300);
}
.block-breadcrumb__list,
.bop-breadcrumb__list {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  list-style: none;
  font-family: var(--font-body-alt);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.04em;
}
.bop-breadcrumb__list a { color: var(--color-grey-600); transition: color var(--duration-fast); }
.bop-breadcrumb__list a:hover { color: var(--color-bronze); }
.bop-breadcrumb__list span { color: var(--color-grey-400); font-size: 0.65rem; }
.bop-breadcrumb__list li:last-child { color: var(--color-charcoal); }


/* ===== 32. BLOCK: Lightbox ===== */
/* Shared lightbox overlay. Aliases: .pdp-lightbox, .proj-lightbox, .bop-lightbox */

.block-lightbox,
.pdp-lightbox,
.proj-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(26,26,26,0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-base) var(--ease-out-expo);
}
.block-lightbox.is-open,
.pdp-lightbox.is-open,
.proj-lightbox.is-open { opacity: 1; pointer-events: all; }

.bop-lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0,0,0,0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-base), visibility 0s var(--duration-base);
}
.bop-lightbox.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--duration-base), visibility 0s 0s;
}

.block-lightbox__close,
.pdp-lightbox__close,
.proj-lightbox__close,
.bop-lightbox__close {
  position: absolute;
  top: var(--space-6);
  right: var(--space-6);
  background: none;
  border: none;
  color: var(--color-offwhite);
  font-size: var(--text-3xl);
  cursor: pointer;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--duration-fast) var(--ease-out-quart);
}
.block-lightbox__close:hover,
.pdp-lightbox__close:hover,
.proj-lightbox__close:hover,
.bop-lightbox__close:hover { color: var(--color-bronze); }

.block-lightbox__stage,
.pdp-lightbox__stage,
.proj-lightbox__stage {
  max-width: 85vw;
  max-height: 80vh;
  width: 900px;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.bop-lightbox__stage {
  max-width: 85vw;
  max-height: 85vh;
}
.bop-lightbox__stage img {
  max-width: 100%;
  max-height: 85vh;
  object-fit: contain;
}

.block-lightbox__nav,
.pdp-lightbox__nav,
.proj-lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--color-grey-400);
  cursor: pointer;
  padding: var(--space-4);
  transition: color var(--duration-fast) var(--ease-out-quart);
}
.block-lightbox__nav:hover,
.pdp-lightbox__nav:hover,
.proj-lightbox__nav:hover { color: var(--color-offwhite); }
.pdp-lightbox__nav--prev,
.proj-lightbox__nav--prev { left: var(--space-6); }
.pdp-lightbox__nav--next,
.proj-lightbox__nav--next { right: var(--space-6); }

.bop-lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 50%;
  color: var(--color-offwhite);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--duration-fast), color var(--duration-fast);
}
.bop-lightbox__nav:hover { background: rgba(255,255,255,0.15); color: var(--color-bronze); }
.bop-lightbox__nav--prev { left: var(--space-6); }
.bop-lightbox__nav--next { right: var(--space-6); }

.block-lightbox__counter,
.pdp-lightbox__counter,
.proj-lightbox__counter {
  position: absolute;
  bottom: var(--space-6);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-subheading);
  font-size: var(--text-xs);
  letter-spacing: 0.15em;
  color: var(--color-grey-500);
}
.bop-lightbox__counter {
  position: absolute;
  bottom: var(--space-6);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-body-alt);
  font-size: var(--text-sm);
  color: var(--color-grey-400);
}




/* ===================================================================
   RESPONSIVE: Block-specific breakpoints
   =================================================================== */

@media (max-width: 1024px) {
  /* Hero */
  .block-hero-banner--short { min-height: 35vh; }

  /* Homepage grids */
  .block-product-grid,
  .hp-products-grid { grid-template-columns: repeat(2, 1fr); }
  .hp-journal-grid { grid-template-columns: repeat(2, 1fr); }
  .press-bar,
  .block-press-bar { gap: var(--space-8); flex-wrap: wrap; }

  /* Project */
  .proj-intro { grid-template-columns: 1fr 1fr; gap: var(--space-10); }

  /* Sector */
  .sec-intro__grid,
  .block-sector-intro__grid { grid-template-columns: 1fr; gap: var(--space-10); }
  /* Sector services: collapse 3/4 columns to 2 at tablet, keep 2 as 2 */
  .sec-services .grid-2,
  .sec-services .grid-3,
  .sec-services .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .sec-projects .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  /* Hero variants */
  .block-hero-banner,
  .hp-hero { /* keep 100vh default */ }
  .hp-hero__title,
  .block-hero-banner__title { font-size: var(--text-5xl); }
  .hp-hero__content { text-align: center; padding-left: var(--gutter); padding-right: var(--gutter); }
  .block-hero-banner__content { padding-left: var(--gutter); padding-right: var(--gutter); }

  /* Mobile alignment modifiers (default left) */
  .block-hero-banner--align-m-left .block-hero-banner__content { text-align: left; }
  .block-hero-banner--align-m-center .block-hero-banner__content { text-align: center; }
  .block-hero-banner--align-m-right .block-hero-banner__content { text-align: right; }
  .block-hero-banner--align-m-left .block-hero-banner__title,
  .block-hero-banner--align-m-left .block-hero-banner__subtitle,
  .block-hero-banner--align-m-left .block-hero-banner__desc {
    margin-left: 0; margin-right: 0;
  }
  .block-hero-banner--align-m-center .block-hero-banner__title,
  .block-hero-banner--align-m-center .block-hero-banner__subtitle,
  .block-hero-banner--align-m-center .block-hero-banner__desc {
    margin-left: auto; margin-right: auto;
  }
  .block-hero-banner--align-m-right .block-hero-banner__title,
  .block-hero-banner--align-m-right .block-hero-banner__subtitle,
  .block-hero-banner--align-m-right .block-hero-banner__desc {
    margin-left: auto; margin-right: 0;
  }
  .block-hero-banner--align-m-left .block-hero-banner__actions,
  .block-hero-banner--align-m-left .btn-row { justify-content: flex-start; align-items: flex-start; }
  .block-hero-banner--align-m-center .block-hero-banner__actions,
  .block-hero-banner--align-m-center .btn-row { justify-content: center; align-items: center; }
  .block-hero-banner--align-m-right .block-hero-banner__actions,
  .block-hero-banner--align-m-right .btn-row { justify-content: flex-end; align-items: flex-end; }

  .hp-hero__desc { margin-left: auto; margin-right: auto; }
  .hp-hero__cta,
  .block-hero-banner__cta,
  .block-hero-banner__actions { flex-direction: column; align-items: center; }
  .block-hero-banner--align-m-left .block-hero-banner__cta,
  .block-hero-banner--align-m-left .block-hero-banner__actions { align-items: flex-start; }
  .block-hero-banner--align-m-right .block-hero-banner__cta,
  .block-hero-banner--align-m-right .block-hero-banner__actions { align-items: flex-end; }
  .hp-hero__overlay { background: linear-gradient(to top, rgba(26,26,26,0.85) 0%, rgba(26,26,26,0.4) 100%); }
  .hp-section,
  .block-section { padding: var(--space-16) 0; }

  /* Homepage grids */
  .block-category-grid,
  .hp-categories-grid { grid-template-columns: 1fr; }
  .hp-products-grid,
  .block-product-grid { grid-template-columns: repeat(2, 1fr); }
  .hp-projects-grid { grid-template-columns: 1fr; }
  .hp-journal-grid { grid-template-columns: 1fr; }

  /* Stats & Press */
  .block-stats-bar,
  .stats-bar { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
  .press-bar,
  .block-press-bar { flex-direction: column; gap: var(--space-4); }

  /* Content Detail */
  .pdp-intro,
  .block-content-detail { grid-template-columns: 1fr; gap: var(--space-10); }

  /* Project */
  .proj-hero { min-height: 90vh; }
  .proj-hero__title { font-size: var(--text-5xl); }
  .proj-intro { grid-template-columns: 1fr; gap: var(--space-10); }
  .proj-intro__details { border-left: none; padding-left: 0; border-top: 1px solid var(--color-bronze-20); padding-top: var(--space-6); }
  .proj-gallery__grid,
  .block-masonry-gallery__grid { columns: 1; }

  /* Sector */
  .sec-hero__title { font-size: var(--text-5xl); }
  /* Sector services: stack to 1 column on mobile regardless of chosen columns */
  .sec-services .grid-2,
  .sec-services .grid-3,
  .sec-services .grid-4 { grid-template-columns: 1fr; }
  .sec-projects .grid-4 { grid-template-columns: 1fr; }
  .sec-cta__buttons,
  .block-cta-section__buttons { flex-direction: column; }

  /* Tabs (shared block + WC) */
  .bop-tabs__btn,
  .block-tabs__btn { padding: var(--space-3) var(--space-5); font-size: var(--text-xs); }
  /* Trust signals stay 2-col on tablet/mobile (was previously single-col,
     which left too much empty space and broke the visual rhythm of the
     icon+text pairs). */
  .bop-trust,
  .block-trust-signals { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  /* Hero — only constrain non-full variants on mobile. Full keeps 100dvh. */
  .hp-hero { min-height: 90vh; min-height: 90dvh; }
  .block-hero-banner--medium,
  .block-hero-banner--short { min-height: 70vh; min-height: 70dvh; }
  .hp-hero__title,
  .block-hero-banner__title { font-size: var(--text-4xl); letter-spacing: 0.06em; }
  .hp-hero__desc,
  .block-hero-banner__desc,
  .block-hero-banner__subtitle { font-size: var(--text-lg); }
  .hp-section,
  .block-section { padding: var(--space-12) 0; }
  .hp-products-grid,
  .block-product-grid { grid-template-columns: 1fr; }
  .block-stats-bar,
  .stats-bar { grid-template-columns: 1fr 1fr; gap: var(--space-4); padding: var(--space-8) 0; }
  .stat__number { font-size: var(--text-2xl); }

  /* Download cards */
  .pdp-download-card,
  .block-download-card { padding: var(--space-4); gap: var(--space-3); }

  /* Project */
  .proj-hero { min-height: 85vh; }
  .proj-hero__title { font-size: var(--text-4xl); }
  .proj-hero__tagline { font-size: var(--text-lg); }
  .proj-hero__content { padding: var(--space-16) 1.25rem; }
  .proj-section { padding: var(--space-16) 0; }

  /* Sector */
  .sec-hero { min-height: 90vh; }
  .sec-hero__title { font-size: var(--text-4xl); }
  .sec-hero__subtitle { font-size: var(--text-lg); }
  .sec-hero__content { padding: var(--space-16) 1.25rem; }
  .sec-intro,
  .block-sector-intro { padding: var(--space-16) 0; }
  .sec-services,
  .block-sector-services { padding: var(--space-16) 0; }
  .sec-projects { padding: var(--space-16) 0; }
  .sec-cta,
  .block-cta-section { padding: var(--space-16) 0; }

  /* Tabs (shared) */
  .bop-tabs__nav,
  .block-tabs__nav { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}


/* ═══════════════════════════════════════════
   PROJECTS ARCHIVE
   ═══════════════════════════════════════════ */

.projects-archive__grid {
  gap: var(--space-6);
}

/* Overlay style — applies aspect ratio per the option */
.projects-archive__grid--overlay .hp-project-card {
  aspect-ratio: 16 / 10; /* default */
}
.projects-archive__grid--aspect-landscape .hp-project-card { aspect-ratio: 16 / 10; }
.projects-archive__grid--aspect-square    .hp-project-card { aspect-ratio: 1 / 1; }
.projects-archive__grid--aspect-portrait  .hp-project-card { aspect-ratio: 3 / 4; }
.projects-archive__grid--aspect-wide      .hp-project-card { aspect-ratio: 16 / 9; }

/* Proj hero overline */
.proj-hero__overline {
  color: var(--color-bronze-light);
  margin-bottom: var(--space-4);
}

/* Filter bar */
.proj-filter-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin: var(--space-8) 0;
}

/* Responsive */
@media (max-width: 1024px) {
  .projects-archive__grid.grid-4 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .projects-archive__grid.grid-3,
  .projects-archive__grid.grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .projects-archive__grid.grid-2,
  .projects-archive__grid.grid-3,
  .projects-archive__grid.grid-4 { grid-template-columns: 1fr; }
}


/* ═══════════════════════════════════════════
   PROJECT CTA (bottom of single-project)
   ═══════════════════════════════════════════ */

.proj-cta {
  position: relative;
  overflow: hidden;
  padding: var(--space-24) var(--gutter);
  background: var(--color-charcoal-dark);
  color: var(--color-offwhite);
  text-align: center;
  isolation: isolate;
}

.proj-cta__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
  transform: scale(1.05);
  animation: projCtaZoom 20s ease-out both;
}
@keyframes projCtaZoom {
  0%   { transform: scale(1); }
  100% { transform: scale(1.06); }
}

.proj-cta__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to bottom, rgba(26,26,26,0.6) 0%, rgba(26,26,26,0.85) 100%);
}

.proj-cta__content {
  position: relative;
  z-index: 2;
  max-width: 720px;
  margin: 0 auto;
}

.proj-cta__overline {
  color: var(--color-bronze-light);
  margin: 0 0 var(--space-5);
}

.proj-cta__heading {
  font-family: var(--font-heading);
  font-size: clamp(var(--text-3xl), 5vw, var(--text-5xl));
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1.1;
  text-transform: var(--heading-transform, uppercase);
  color: var(--color-offwhite);
  margin: 0 0 var(--space-6);
}

.proj-cta__divider {
  width: 60px;
  height: 2px;
  background: var(--color-bronze);
  margin: 0 auto var(--space-6);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1) 300ms;
}
.proj-cta.is-visible .proj-cta__divider,
.proj-cta .reveal.is-visible .proj-cta__divider,
.reveal.is-visible .proj-cta__divider {
  transform: scaleX(1);
}
/* Trigger via the reveal wrapper */
.proj-cta__content.is-visible .proj-cta__divider { transform: scaleX(1); }

.proj-cta__body {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  line-height: 1.7;
  color: rgba(242, 242, 242, 0.85);
  margin: 0 0 var(--space-8);
  max-width: 580px;
  margin-left: auto;
  margin-right: auto;
}

.proj-cta__actions {
  display: flex;
  gap: var(--space-4);
  justify-content: center;
  flex-wrap: wrap;
}

@media (max-width: 600px) {
  .proj-cta { padding: var(--space-16) var(--gutter); }
  .proj-cta__actions .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .proj-cta__bg { animation: none; transform: scale(1); }
  .proj-cta__divider { transform: scaleX(1); transition: none; }
}

/* Editor: force divider visible */
.editor-styles-wrapper .proj-cta__divider,
.is-root-container .proj-cta__divider { transform: scaleX(1) !important; }


/* ═══════════════════════════════════════════
   LIGHTBOX (shared cinematic overlay)
   ═══════════════════════════════════════════ */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 350ms cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0s linear 350ms;
}
.lightbox.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 350ms cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0s linear 0s;
}

.lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, 0.96);
  backdrop-filter: blur(6px) saturate(140%);
  -webkit-backdrop-filter: blur(6px) saturate(140%);
  cursor: pointer;
}

/* Subtle noise overlay for luxury feel (pure CSS) */
.lightbox__backdrop::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  opacity: 0.5;
}

/* Top bar */
.lightbox__topbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  padding: var(--space-5) var(--space-6);
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--color-offwhite);
}

.lightbox__counter {
  font-family: var(--font-subheading);
  font-size: var(--text-xs);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-grey-400);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.lightbox__current { color: var(--color-offwhite); }
.lightbox__counter-sep { color: var(--color-bronze); }

.lightbox__close {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  color: var(--color-offwhite);
  cursor: pointer;
  transition: color 200ms ease, background 200ms ease, border-color 200ms ease, transform 200ms ease;
}
.lightbox__close:hover {
  color: var(--color-bronze-light);
  border-color: var(--color-bronze);
  background: rgba(175, 152, 123, 0.1);
  transform: rotate(90deg);
}

/* Main stage */
.lightbox__stage {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1400px;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-16) var(--space-6) var(--space-4);
  min-height: 0;
}

.lightbox__image-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  max-height: calc(100vh - 260px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox__image {
  position: absolute;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  box-shadow: 0 25px 60px -20px rgba(0, 0, 0, 0.6);
  transition: transform 400ms cubic-bezier(0.16, 1, 0.3, 1),
              opacity 350ms ease;
  cursor: zoom-in;
}
.lightbox.is-open .lightbox__image--current {
  opacity: 1;
  transform: scale(1);
  animation: lightboxEntrance 600ms cubic-bezier(0.16, 1, 0.3, 1);
}
.lightbox__image--incoming {
  opacity: 0;
  pointer-events: none;
}
.lightbox__image.is-zoomed {
  transform: scale(1.6);
  cursor: zoom-out;
}

@keyframes lightboxEntrance {
  0% { opacity: 0; transform: scale(0.96); }
  100% { opacity: 1; transform: scale(1); }
}

/* Loader */
.lightbox__loader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
  gap: 4px;
}
.lightbox__loader.is-active { display: flex; }
.lightbox__loader span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-bronze);
  animation: lightboxPulse 1.4s ease-in-out infinite;
}
.lightbox__loader span:nth-child(2) { animation-delay: 0.2s; }
.lightbox__loader span:nth-child(3) { animation-delay: 0.4s; }
@keyframes lightboxPulse {
  0%, 100% { opacity: 0.3; transform: scale(0.8); }
  50%      { opacity: 1;   transform: scale(1.2); }
}

/* Navigation arrows */
.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  color: var(--color-offwhite);
  cursor: pointer;
  transition: background 200ms ease, border-color 200ms ease, color 200ms ease;
  z-index: 5;
}
.lightbox__nav--prev { left: var(--space-6); }
.lightbox__nav--next { right: var(--space-6); }
.lightbox__nav:hover {
  background: rgba(175, 152, 123, 0.15);
  border-color: var(--color-bronze);
  color: var(--color-bronze-light);
}

/* Caption */
.lightbox__caption {
  position: relative;
  z-index: 2;
  max-width: 700px;
  text-align: center;
  padding: 0 var(--space-6);
  font-family: var(--font-body-alt, var(--font-body));
  font-size: var(--text-sm);
  color: var(--color-grey-400);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 300ms ease 100ms, transform 300ms ease 100ms;
}
.lightbox__caption.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Thumbnail strip */
.lightbox__thumbs {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 6px;
  padding: var(--space-4) var(--space-6);
  max-width: 100%;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  justify-content: center;
  flex-wrap: nowrap;
}
.lightbox__thumbs::-webkit-scrollbar { display: none; }
.lightbox__thumbs.is-hidden { display: none; }

.lightbox__thumb {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  opacity: 0.5;
  transition: opacity 200ms ease, border-color 200ms ease, transform 200ms ease;
}
.lightbox__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.lightbox__thumb:hover {
  opacity: 0.85;
  border-color: rgba(175, 152, 123, 0.4);
}
.lightbox__thumb.is-active {
  opacity: 1;
  border-color: var(--color-bronze);
  transform: translateY(-2px);
}

/* Progress bar */
.lightbox__progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(255, 255, 255, 0.06);
  z-index: 3;
}
.lightbox__progress-bar {
  height: 100%;
  background: var(--color-bronze);
  width: 0;
  transition: width 400ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Keyboard hint */
.lightbox__hint {
  position: absolute;
  bottom: var(--space-8);
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  z-index: 4;
  padding: var(--space-2) var(--space-5);
  background: rgba(0, 0, 0, 0.6);
  color: var(--color-grey-400);
  font-family: var(--font-subheading);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  opacity: 0;
  pointer-events: none;
  transition: opacity 400ms ease, transform 400ms ease;
  white-space: nowrap;
}
.lightbox__hint.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Responsive */
@media (max-width: 768px) {
  .lightbox__topbar { padding: var(--space-4); }
  .lightbox__close { width: 40px; height: 40px; }
  .lightbox__stage { padding: var(--space-10) var(--space-4) var(--space-3); }
  .lightbox__nav {
    width: 44px;
    height: 44px;
  }
  .lightbox__nav--prev { left: var(--space-3); }
  .lightbox__nav--next { right: var(--space-3); }
  .lightbox__thumbs { padding: var(--space-3); }
  .lightbox__thumb { width: 48px; height: 48px; }
  .lightbox__hint { display: none; } /* No keyboard on mobile */
}

@media (max-width: 480px) {
  .lightbox__nav {
    opacity: 0.8;
  }
  .lightbox__caption { font-size: var(--text-xs); padding: 0 var(--space-4); }
}

@media (prefers-reduced-motion: reduce) {
  .lightbox,
  .lightbox__image,
  .lightbox__nav,
  .lightbox__thumb,
  .lightbox__caption,
  .lightbox__hint,
  .lightbox__progress-bar {
    transition: none !important;
    animation: none !important;
  }
}


/* ===== GLOBAL HEADING LETTER-SPACING (driven by Theme Settings) =====
   Force all theme heading-like classes to honour --heading-spacing so
   the Site Settings → Theme Appearance → Heading Letter-spacing control
   actually governs every title. Uses !important to defeat the original
   per-block hardcoded values and mobile media query overrides. */
.type-h1, .type-h2, .type-h3, .type-h4, .type-h5,
.block-hero-banner__title,
.hp-hero__title,
.pdp-hero__title,
.proj-hero__title,
.sec-hero__title,
.proj-section__title,
.proj-intro__heading,
.card-feature__heading,
.card-post__title,
.proj-card__title,
.hp-project-card__title,
.block-card-grid__heading,
.block-product-card-grid__heading,
.block-section-header__heading,
.block-cta-section__heading,
.sec-cta__heading,
.block-sector-intro__heading,
.sec-intro__heading,
.block-sector-services__heading,
.sec-services__heading,
.sec-services__card-title,
.sec-projects__heading,
.block-download-card__title,
.pdp-download-card__title {
  letter-spacing: var(--heading-spacing) !important;
}


/* ===== GLOBAL BREADCRUMB TEXT-TRANSFORM (driven by Theme Settings) =====
   Force all breadcrumb selectors to honour --breadcrumb-transform so the
   Site Settings → Theme Appearance → Breadcrumb Text Transform control
   governs every breadcrumb. !important defeats per-selector hardcoded
   values (uppercase) and the previously-missing rule on .sec-hero. */
.block-section-header__breadcrumb,
.block-hero-banner__breadcrumb,
.pdp-hero__breadcrumb,
.proj-hero__breadcrumb,
.sec-hero__breadcrumb,
.block-breadcrumb,
.block-breadcrumb__list,
.bop-breadcrumb,
.bop-breadcrumb__list,
.archive-banner__breadcrumb,
.archive-banner__breadcrumb-list {
  text-transform: var(--breadcrumb-transform, uppercase) !important;
}


/* ===== Block: Press Grid ==========================================
   4-col grid (configurable) of press features. Each card = image (or
   small fade carousel), title, date, optional external link button. */

.block-press-grid {
  padding: var(--space-12) 0;
}
.block-press-grid__header {
  text-align: center;
  margin-bottom: var(--space-10);
}
.block-press-grid__heading {
  font-family: var(--font-heading);
  font-size: clamp(var(--text-3xl), 3vw, var(--text-5xl));
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: var(--heading-transform, uppercase);
  margin: 0 0 var(--space-3);
  color: var(--color-charcoal-dark);
}
.block-press-grid__subheading {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  color: var(--color-grey-600);
  margin: 0 auto;
  max-width: 640px;
}
.block-press-grid__grid {
  display: grid;
  gap: var(--space-8) var(--space-6);
}
.block-press-grid__grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.block-press-grid__grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
.block-press-grid__grid--cols-5 { grid-template-columns: repeat(5, 1fr); }

.block-press-grid__card {
  display: flex;
  flex-direction: column;
}
.block-press-grid__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--color-grey-200);
  margin-bottom: var(--space-4);
  cursor: zoom-in;
}
.block-press-grid__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.5s var(--ease-out-quart);
  pointer-events: none;
}
.block-press-grid__slide.is-active {
  opacity: 1;
  pointer-events: auto;
}
/* Keyboard focus on the lightbox-trigger slide. */
.block-press-grid__slide:focus-visible {
  outline: 2px solid var(--color-bronze);
  outline-offset: -2px;
}
.block-press-grid__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out-expo);
}
.block-press-grid__card:hover .block-press-grid__slide.is-active img {
  transform: scale(1.04);
}
.block-press-grid__dots {
  position: absolute;
  bottom: var(--space-3);
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 6px;
  z-index: 2;
}
.block-press-grid__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.7);
  background: transparent;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out-quart),
              transform var(--duration-fast) var(--ease-out-quart);
}
.block-press-grid__dot:hover {
  background: rgba(255, 255, 255, 0.5);
}
.block-press-grid__dot.is-active {
  background: #fff;
  transform: scale(1.2);
}
.block-press-grid__body {
  display: flex;
  flex-direction: column;
}
.block-press-grid__title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.3;
  color: var(--color-charcoal-dark);
  margin: 0 0 var(--space-1);
}
.block-press-grid__date {
  font-family: var(--font-subheading);
  font-size: var(--text-xs);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-bronze);
  margin: 0 0 var(--space-3);
}
.block-press-grid__cta {
  align-self: flex-start;
  margin-top: auto;
  padding: 6px 0;
  font-size: var(--text-xs);
}

@media (max-width: 1024px) {
  .block-press-grid__grid--cols-4,
  .block-press-grid__grid--cols-5 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .block-press-grid__grid--cols-3,
  .block-press-grid__grid--cols-4,
  .block-press-grid__grid--cols-5 { grid-template-columns: repeat(2, 1fr); }
  .block-press-grid__title { font-size: var(--text-base); }
}
@media (max-width: 480px) {
  .block-press-grid__grid { gap: var(--space-6) var(--space-4); }
}


/* ===== Page Access Denied =========================================
   Rendered in place of restricted page content for logged-in users without
   permission. Anonymous visitors are bounced to wp-login first. */

.page-access-denied {
  max-width: var(--container-xl);
  margin: 0 auto;
  padding: var(--space-16) var(--gutter);
}
.page-access-denied__inner {
  max-width: 640px;
  margin: 0 auto;
  padding: var(--space-12) var(--space-8);
  background: var(--color-offwhite);
  border: 1px solid var(--color-grey-300);
  text-align: center;
}
.page-access-denied__overline {
  color: var(--color-bronze);
  margin-bottom: var(--space-3);
}
.page-access-denied__heading {
  font-family: var(--font-heading);
  font-size: clamp(var(--text-2xl), 3vw, var(--text-4xl));
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: var(--heading-transform, uppercase);
  color: var(--color-charcoal-dark);
  margin: 0 0 var(--space-4);
  line-height: 1.2;
}
.page-access-denied__body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--color-charcoal);
  margin: 0 auto var(--space-8);
  max-width: 480px;
}
.page-access-denied__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
}
.page-access-denied__message {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--color-charcoal);
}
.page-access-denied__message > :first-child { margin-top: 0; }
.page-access-denied__message > :last-child  { margin-bottom: 0; }


/* ===== WP Core Blocks: Image + Gallery ===========================
   Page-content blocks (the_content output). Bottom spacing so consecutive
   blocks don't collide; lightbox cursor for images linked to Media File. */

.wp-block-image,
.wp-block-gallery {
  margin: 0 0 var(--space-8);
}
.wp-block-image figcaption,
.wp-block-gallery figcaption {
  font-family: var(--font-body-alt);
  font-size: var(--text-sm);
  color: var(--color-grey-600);
  text-align: center;
  margin-top: var(--space-3);
}
/* Lightbox affordance — only when the editor explicitly chose
   "Link to: Media File" (so an <a> wraps the <img>). */
.wp-block-image > a,
.wp-block-gallery .wp-block-image > a {
  display: block;
  cursor: zoom-in;
  transition: opacity var(--duration-fast) var(--ease-out-quart);
}
.wp-block-image > a:hover,
.wp-block-gallery .wp-block-image > a:hover {
  opacity: 0.92;
}
/* Tighten internal item spacing in galleries — the wrapper handles the
   block's own bottom margin, individual figure children shouldn't add more. */
.wp-block-gallery .wp-block-image {
  margin-bottom: 0;
}