/* ==========================================================================
   CHIMNEYSMART — BLOCK LAYOUT
   Layout only. Colours, type, buttons, shape and spacing come from
   css/main.css. One section per block, named to match the block library.
   ========================================================================== */


/* ==========================================================================
   BLOCK: home_header  (components/blocks/home_header.php)
   Homepage hero. Full-bleed background, content anchored bottom-left,
   split title with a highlighted word, rating row, dual CTAs, and a
   "featured on" slot bottom-right.
   ========================================================================== */

.home-header {
  position: relative;
  display: flex;
  align-items: flex-end;
  /* Fills the screen with the logo band (70px logo row + 30px padding top and bottom = 130px) showing beneath it */
  height: calc(100vh - 130px);
  /* Bottom padding scales with the screen so the content sits clear of the
     bottom edge; kept modest so the content fits inside the fixed height */
  padding: calc(var(--space-4xl) + 2rem) 0 clamp(var(--space-xl), 8svh, var(--space-3xl));
  overflow: hidden;
  background: var(--color-dark);
}

.home-header .body-container { position: relative; z-index: 3; }

/* --- Background --- */
.home-header-bg { position: absolute; inset: 0; z-index: 0; }
.home-header-bg img,
.home-header-bg video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Poster image sits behind the video; it shows while the video loads and
   takes over entirely for visitors who prefer reduced motion. */
.home-header-bg video { z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .home-header-bg video { display: none; }
}

/* Gradient stand-in when no image or video has been set */
.home-header-bg.is-placeholder {
  background:
    radial-gradient(85% 65% at 22% 28%, color-mix(in srgb, var(--color-orange) 20%, transparent) 0%, transparent 68%),
    linear-gradient(158deg, color-mix(in srgb, var(--color-faded-black) 80%, var(--color-white)) 0%, var(--color-faded-black) 100%);
}

/* Design overlay: linear-gradient(62deg, #202020 0%, #6A6A6A00 100%) */
.home-header-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(62deg, var(--color-faded-black) 0%, transparent 100%);
}

/* --- Content --- */
.home-header-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-xl);
  align-items: flex-end;
}

.home-header-content { max-width: 44rem; }

.home-header .small-title { color: var(--color-white); }

.main-page-title { margin-bottom: var(--space-md); }
.main-page-title h1 { color: var(--color-white); margin: 0; max-width: 18ch; }
.main-page-title h1 strong,
.main-page-title .highlight { color: var(--color-accent); font-weight: inherit; }

.home-header-rating {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: var(--space-lg);
}
.home-header-rating p {
  margin: 0;
  font-size: 0.95rem;
  font-weight: var(--font-weight-semibold);
  color: var(--color-white);
}

.home-header .button-holder { margin-top: 0; }

/* --- Featured-on slot --- */
.home-header-featured { flex: 0 0 auto; text-align: center; }
.home-header-featured > span {
  display: block;
  margin-bottom: 0.65rem;
  font-size: 0.85rem;
  font-weight: var(--font-weight-semibold);
  color: var(--color-white);
}
.home-header-featured .featured-logo {
  display: grid;
  place-items: center;
  width: 11rem;
  height: 11rem;
}
.home-header-featured .featured-logo img { max-width: 100%; height: auto; }

/* --- Responsive --- */
@media (max-width: 991px) {
  /* Content stacks taller on smaller screens: let it grow rather than clip */
  .home-header {
    height: auto;
    min-height: calc(100vh - 130px);
    padding: calc(var(--space-4xl) + 1rem) 0 var(--space-xl);
  }
  .home-header-inner { grid-template-columns: 1fr; gap: var(--space-xl); }
  .home-header-featured { text-align: left; }
  .home-header-featured .featured-logo { width: 8.5rem; height: 8.5rem; }
}

@media (max-width: 767px) {
  .home-header-content { max-width: none; }
  .main-page-title h1 { max-width: none; }
  .home-header-featured .featured-logo { width: 7.5rem; height: 7.5rem; }
}

/* --- Block editor preview --- */
.editor-styles-wrapper .home-header { height: auto; min-height: 560px; }


/* ==========================================================================
   BLOCK: client_logos  (components/blocks/client_logos.php)
   Infinite-scrolling logo carousel on a coloured band. Three identical
   strips sit in a track; translating the track by exactly one strip width
   (-33.3333%) and looping makes the join invisible.
   ========================================================================== */

/* Matches .body-section.<colour> specificity so the tighter band padding wins */
.body-section.client-logos { padding-block: 30px; border-radius: 0 0 20px 20px; }

.client-logos-inner {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  min-width: 0;
}

.client-logos-label {
  flex: 0 0 auto;
  margin: 0;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: var(--color-white);
}
.client-logos.light .client-logos-label,
.client-logos.white .client-logos-label { color: var(--color-secondary); }

/* --- Carousel --- */
.logo-carousel {
  --carousel-gap: 140px;
  --carousel-duration: 45s;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  /* Softens the point where logos enter and leave the viewport */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
}

.logo-carousel-track {
  display: flex;
  width: max-content;
  animation: logo-scroll var(--carousel-duration) linear infinite;
}
.logo-carousel:hover .logo-carousel-track { animation-play-state: paused; }

.logo-strip {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: var(--carousel-gap);
  padding-right: var(--carousel-gap);
  height: 70px; /* logo row; logos sit centred inside it */
}

.logo-carousel .logo {
  display: block;
  flex: 0 0 auto;
  width: auto;
  height: auto;
  max-height: 40px;
}

@keyframes logo-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-33.3333%); }
}

/* Static, centred, single strip for anyone who has asked for reduced motion */
@media (prefers-reduced-motion: reduce) {
  .logo-carousel { -webkit-mask-image: none; mask-image: none; }
  .logo-carousel-track { animation: none; width: 100%; }
  .logo-strip { flex-wrap: wrap; justify-content: center; row-gap: var(--space-md); }
  .logo-strip[aria-hidden="true"] { display: none; }
}

@media (max-width: 767px) {
  .client-logos-inner { flex-direction: column; align-items: stretch; gap: var(--space-sm); }
  .client-logos-label { text-align: center; }
  .logo-carousel .logo { height: 1.5rem; }
  .logo-carousel .logo.tall { height: 2.25rem; }
}

/* Empty state, editor only */
.client-logos-empty { margin: 0; color: var(--color-white); font-size: var(--font-size-sm); }
.client-logos.light .client-logos-empty,
.client-logos.white .client-logos-empty { color: var(--color-secondary); }


/* ==========================================================================
   BLOCK: text_block  (components/blocks/text_block.php)
   Image left, text right. Layout only; the media frame, offset pair,
   badge and checklist are base components in main.css.
   ========================================================================== */

.text-block .columns {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 4.5rem);
  /* Stretch, not centre: the design top-aligns the text against the image. */
  align-items: stretch;
}
.text-block .column { min-width: 0; }

/* Text alignment option: Centre (default) / Top against the image */
.text-block.align-top .column:last-child { align-self: start; }
.text-block.align-center .column:last-child { align-self: center; }

/* --- Text spacing --- */
.text-block .text-highlight { display: block; margin-bottom: var(--space-sm); }
.check-list-wrap { margin-top: var(--space-md); }
.text-block .column .button-holder { margin-top: var(--space-lg); }

/* --- Rating badge: slightly tilted card near the top, hanging off the
       image's left edge (as the XD design). The overhang is capped at 5rem
       and never reaches past the viewport edge on narrower screens. --- */
.text-block .media-frame { position: relative; }
.text-block .media-badge.top-left {
  top: 2.5rem;
  left: max(-5rem, calc(1.25rem - max(var(--container-padding), (100vw - var(--profile-container-max)) / 2 + var(--container-padding))));
  width: 225px;
  height: 61px;
  justify-content: center;
  gap: 0.75rem;
  padding: 0 1.25rem;
  border: 1px solid var(--color-accent);
  border-radius: 20px;
  /* Frosted glass: translucent enough for the blur behind to show */
  background: rgba(255, 255, 255, 0.6);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow-lg);
  font-size: 1.625rem;
  font-weight: var(--font-weight-medium);
  line-height: 1;
  /* The XD transform: about -5.8deg */
  transform: matrix(0.99, -0.1, 0.1, 0.99, 0, 0);
}
.text-block .media-badge svg { height: 0.9em; }
.text-block .media-badge img.large { height: 2.75rem; }

/* --- Placeholder in the editor until a photo is chosen --- */
.media.is-placeholder {
  background-image:
    radial-gradient(80% 60% at 30% 25%, color-mix(in srgb, var(--color-orange) 22%, transparent) 0%, transparent 70%),
    linear-gradient(150deg, var(--color-dark-offwhite) 0%, color-mix(in srgb, var(--color-orange) 10%, var(--color-off-white)) 100%);
}

/* --- Responsive --- */
@media (max-width: 991px) {
  .text-block .columns { grid-template-columns: 1fr; }
  /* Stacked, there is no gutter for the offset image to hang into */
  .text-block .media-pair .media + .media { right: 0; }
}

/* Phones: back inside the image, level */
@media (max-width: 767px) {
  .text-block .media-badge.top-left {
    top: var(--space-sm);
    left: var(--space-sm);
    width: auto;
    height: auto;
    gap: 0.6rem;
    padding: 0.6rem 0.9rem;
    border-radius: 0.85rem;
    font-size: 1.25rem;
    transform: none;
  }
  .text-block .media-badge img.large { height: 2.5rem; }
}


/* ==========================================================================
   BLOCK: our_services  (components/blocks/our_services.php)
   5/7 split — heading and intro left, hairline-separated service list right.
   Leans on .icon-list and .watermark from main.css; adds the split and footer.
   ========================================================================== */

.our-services .body-grid { row-gap: var(--space-xl); }
.our-services.flush-top { padding-top: 0; }

/* Stretched to the row height so the watermark sits at the column's bottom;
   the text stays at the top and paints above the mark */
.our-services-intro { align-self: stretch; position: relative; }
.our-services-intro > :not(.watermark) { position: relative; z-index: 1; }
/* Keeps the service list above a mark wider than the intro column */
.our-services .span-7 { position: relative; z-index: 1; }
.our-services-intro p { max-width: 34ch; }
.our-services .icon-list-icon { height: auto; }

/* Footer row — prompt on the left, CTA on the right */
.our-services-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-top: var(--space-xl);
}
.our-services-footer p { margin: 0; max-width: 48ch; }
.our-services-footer .button-holder { margin-top: 0; }

/* Service titles are links; the description stays plain text */
.icon-list-title a {
  color: inherit;
  transition: color var(--transition-fast);
}
.icon-list-title a:hover { color: var(--color-accent); }

/* Editor-only empty state */
.our-services-empty { margin: 0; padding: var(--space-md); border: 1px dashed var(--color-border); border-radius: var(--border-radius-sm); color: var(--color-text-muted); font-size: var(--font-size-sm); }

@media (max-width: 991px) {
  .our-services-intro p { max-width: none; }
  .our-services-footer { flex-direction: column; align-items: flex-start; }
}


/* ==========================================================================
   BLOCK: benefits  (components/blocks/benefits.php)
   Coloured band. Heading and intro across the top, then a 3x2 numbered grid
   separated by hairlines. Uses .stat-grid from main.css.
   ========================================================================== */

.benefits-head { margin-bottom: var(--space-2xl); }
.benefits-head .title-holder { margin-bottom: 0; }
.benefits-head .benefits-intro { align-self: center; }
.benefits-head .benefits-intro p { margin: 0; max-width: 34ch; }

/* Tucks the band up behind the rounded bottom corners of the section above */
.body-section.benefits.overlap {
  margin-top: -20px;
  z-index: 0;
  padding-top: calc(var(--profile-section-padding) + 20px);
}
.body-section.benefits { border-radius: 0 0 20px 20px; }
/* The section above needs rounded bottom corners, and to paint over the band */
.body-section.our-services,
.body-section.text-block { border-radius: 0 0 20px 20px; z-index: 1; }
/* Homepage only (the page with the home hero): no bottom padding */
body:has(.home-header) .body-section.text-block { padding-bottom: 0; }

/* The design keeps the left inset on the first cell rather than flushing it */
.benefits .stat:first-child { padding-left: var(--space-md); }

/* Generous rows — the design runs ~384px per row */
.benefits .stat {
  padding-block: var(--space-xl) var(--space-2xl);
  transition: background-color var(--transition-base);
}
/* Mouse only, so a tap on touch screens doesn't leave a cell lit */
@media (hover: hover) {
  .benefits .stat:hover { background-color: #ED7240; }
}

/* Editor-only empty state */
.benefits-empty { margin: 0; padding: var(--space-md); border: 1px dashed rgba(255, 255, 255, 0.35); border-radius: var(--border-radius-sm); font-size: var(--font-size-sm); }

@media (max-width: 991px) {
  .benefits-head { margin-bottom: var(--space-xl); }
  .benefits-head .benefits-intro p { max-width: none; }
}

@media (max-width: 767px) {
  .benefits .stat:first-child { padding-left: 0; }
  .benefits .stat { padding-block: var(--space-lg) var(--space-xl); }
}


/* ==========================================================================
   SECTION TRANSITIONS (shared)
   .flush-top drops a section's top padding when it follows a same-colour
   section, so the two do not stack their spacing.
   ========================================================================== */

.body-section.flush-top { padding-top: 0; }
.body-section.flush-bottom { padding-bottom: 0; }

/* Roomier section: one step up from the profile default */
.body-section.padding-xl { padding-block: calc(var(--space-4xl) * var(--profile-space-multiplier)); }

@media (max-width: 991px) {
  .body-section.padding-xl { padding-block: calc(var(--space-3xl) * var(--profile-space-multiplier)); }
}
@media (max-width: 479px) {
  .body-section.padding-xl { padding-block: var(--space-2xl); }
}


/* ==========================================================================
   BLOCK: reviews  (components/blocks/reviews.php + js/main.js)
   Rating summary, then a 3-up row of flat review cards, slider controls
   bottom-right. Cards are flat beige rather than white-with-shadow — that is
   what the design specifies.
   ========================================================================== */

.reviews-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  flex-wrap: wrap;
  margin-bottom: var(--space-4xl);
}
.reviews-head .title-holder { margin-bottom: 0; }
.reviews-head .rating-detail { max-width: 22ch; }

/* Flat card — 24px radius and 40px padding, both measured off the design */
.review-card {
  display: flex;
  flex-direction: column;
  background: var(--color-light);
  border-radius: var(--border-radius-md);
  padding: 2.5rem;
}
.review-card .star-rating { margin-bottom: var(--space-md); }
.review-card .review-quote { flex: 1 1 auto; }

/* Reviewer without a photo — orange initials, no circle behind them */
.review-initials { flex: 0 0 auto; font-size: 1.25rem; font-weight: var(--font-weight-bold); letter-spacing: 0.02em; line-height: 1; color: var(--color-orange); }

/* --- Carousel: scroll-snap, so swipe, trackpad and keyboard all work.
       The buttons just call scrollBy(). --- */
.reviews-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 2 * var(--grid-gutter)) / 3);
  gap: var(--grid-gutter);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-block: 2px; /* room for the focus ring on the cards */
}
.reviews-track::-webkit-scrollbar { display: none; }
.reviews-track:focus-visible { outline: 3px solid color-mix(in srgb, var(--color-orange) 40%, transparent); outline-offset: 4px; }
.reviews-track > .review-card { scroll-snap-align: start; }

.reviews-controls {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

/* Editor-only empty state */
.reviews-empty { margin: 0; padding: var(--space-md); border: 1px dashed var(--color-border); border-radius: var(--border-radius-sm); color: var(--color-text-muted); font-size: var(--font-size-sm); }

@media (prefers-reduced-motion: reduce) {
  .reviews-track { scroll-behavior: auto; }
}

@media (max-width: 991px) {
  .reviews-head { margin-bottom: var(--space-2xl); }
  .reviews-track { grid-auto-columns: calc((100% - var(--grid-gutter)) / 2); }
}

@media (max-width: 767px) {
  .reviews-track { grid-auto-columns: 88%; }
  .review-card { padding: var(--space-lg); }
  .reviews-controls { justify-content: center; }
}


/* ==========================================================================
   BLOCK: video  (components/blocks/video.php + js/main.js)
   Dark panel inset to the container, centred heading, then the player at
   roughly three-quarters of the panel width. The trigger is the design's
   outlined feather play mark, larger than the base default.
   ========================================================================== */

.video-panel {
  padding: var(--space-3xl) var(--space-2xl);
  background: var(--color-faded-black);
  border-radius: var(--profile-radius-lg);
}
.video-panel .title-holder { margin-bottom: var(--space-2xl); }
.video-panel .title-holder h2,
.video-panel .title-holder .text-title { margin: 0 auto; max-width: 22ch; }

/* The design keeps the label full orange here, not the pale tint used for
   small titles on dark backgrounds */
.video-panel.dark .small-title { color: var(--color-accent); }

/* The film's own frame, 1920 x 1012 */
.video-media {
  max-width: 78%;
  margin: 0 auto;
  aspect-ratio: 1920 / 1012;
  background: var(--color-dark-lighter);
}
.video-media .video-poster { transition: opacity var(--transition-slow); }
.video-media.is-playing .video-poster { opacity: 0; pointer-events: none; }

.video-media iframe,
.video-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.video-media video { object-fit: contain; background: #000; filter: none; }

.video-block .play-button { width: 6rem; height: 6rem; }
.video-block .play-button svg {
  width: 2.25rem;
  height: 2.25rem;
  margin-left: 5px;
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.video-block .play-button:hover svg { stroke: var(--color-white); }

/* Editor-only empty state */
.video-empty { display: grid; place-items: center; color: rgba(255, 255, 255, 0.7); font-size: var(--font-size-sm); text-align: center; padding: var(--space-md); }

@media (max-width: 991px) {
  .video-panel { padding: var(--space-2xl) var(--space-lg); }
  .video-media { max-width: none; }
}

@media (max-width: 767px) {
  .video-panel { padding: var(--space-xl) var(--space-sm); border-radius: var(--border-radius-md); }
  .video-panel .title-holder { margin-bottom: var(--space-lg); }
  .video-block .play-button { width: 4.5rem; height: 4.5rem; }
  .video-block .play-button svg { width: 1.6rem; height: 1.6rem; margin-left: 4px; }
}


/* ==========================================================================
   BLOCK: recent_posts  (components/blocks/recent_posts.php)
   Coloured band, left-aligned heading, 3-up article cards. The design trims
   the library's article card to image, category, title and read time.
   ========================================================================== */

.recent-posts { border-radius: 20px; }
.recent-posts .title-holder { margin-bottom: var(--space-2xl); }
.recent-posts .title-holder + p { margin: calc(-1 * var(--space-xl)) 0 var(--space-2xl); max-width: 48ch; }
.recent-posts .button-holder { margin-top: var(--space-2xl); }

.articles-grid {
  display: grid;
  /* Plain fallback first: if --articles-cols is ever missing or invalid,
     repeat(var(...)) is invalid at computed-value time and the whole
     declaration collapses to `none`, which stacks every card full width.
     The static value below survives that. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-columns: repeat(var(--articles-cols, 3), minmax(0, 1fr));
  gap: var(--space-xl) var(--grid-gutter);
}

/* More breathing room in the recent posts band (the blog archive keeps the
   tighter base grid) */
.recent-posts .articles-grid { gap: var(--space-2xl) var(--space-lg); }
.recent-posts .article-category { margin-bottom: var(--space-sm); }
.recent-posts .article-card h3 { margin-bottom: var(--space-sm); }

/* The whole card is the link; text keeps the band's colour */
.article-card { display: block; color: inherit; }
.article-card:hover,
.article-card:focus { color: inherit; }
.article-card:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--color-orange) 40%, transparent);
  outline-offset: 6px;
  border-radius: var(--profile-image-radius);
}

.article-card-image {
  position: relative;          /* anchors .service-card-icon */
  aspect-ratio: var(--blog-image-aspect);
  border-radius: var(--profile-image-radius);
  overflow: hidden;
  background: var(--color-dark-offwhite);
}
.article-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: var(--profile-image-filter);
  transition: transform var(--transition-slow);
}
.article-card:hover .article-card-image img { transform: scale(1.04); }
.dark .article-card:focus-visible { outline-color: rgba(255, 255, 255, 0.6); }

.article-card-body { padding-top: var(--space-md); }

.article-category {
  display: block;
  margin-bottom: var(--space-xs);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: var(--color-accent);
}

.article-card h3 {
  margin: 0 0 var(--space-xs);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-heading);
}

.article-meta {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* Supporting line on service and case study cards — blog cards carry a read
   time here instead. */
.article-card-text {
  margin: 0;
  font-size: 0.92rem;
  line-height: var(--line-height-snug);
  color: var(--color-text-muted);
}
/* Blog cards are plain blocks. Service and case study cards carry a
   supporting line and a link, so they become columns that fill the grid row —
   otherwise the links sit at ragged heights when descriptions differ in
   length. The theme already uses :has() (.body-section:has(.with-sidebar)). */
.article-card:has(.card-link) {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.article-card:has(.card-link) .article-card-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.article-card:has(.card-link) .article-card-text { flex: 1 1 auto; }
.article-card .card-link { margin-top: var(--space-sm); }

/* main.css nudges this arrow on .card-base:hover, which these cards no
   longer use. */
.article-card:hover .card-link svg { transform: translateX(3px); }

/* Services without a photograph fall back to the icon on a tinted panel. */
.article-card-image.is-placeholder { display: grid; place-items: center; }
.article-card-image.is-placeholder img {
  width: 3.5rem;
  height: 3.5rem;
  object-fit: contain;
  transform: none;
}
.article-card:hover .article-card-image.is-placeholder img { transform: none; }

/* On dark bands */
.dark .article-category { color: var(--color-pale-orange); }
.dark .article-meta,
.dark .article-card-text { color: rgba(255, 255, 255, 0.85); }

/* On the orange (accent) band — matches the band's .small-title */
.recent-posts.accent .article-category,
.recent-posts.accent .article-meta { color: var(--color-pale-orange); }

/* (light-band colours are now the default — see .article-category / .article-meta) */
.recent-posts.light .article-card:focus-visible,
.recent-posts.white .article-card:focus-visible { outline-color: color-mix(in srgb, var(--color-orange) 40%, transparent); }

/* Editor-only empty state */
.recent-posts-empty { margin: 0; padding: var(--space-md); border: 1px dashed rgba(255, 255, 255, 0.35); border-radius: var(--border-radius-sm); font-size: var(--font-size-sm); }
.recent-posts.light .recent-posts-empty,
.recent-posts.white .recent-posts-empty { border-color: var(--color-border); color: var(--color-text-muted); }

@media (prefers-reduced-motion: reduce) {
  .article-card-image img { transition: none; }
}

@media (max-width: 991px) {
  .articles-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .recent-posts .title-holder { margin-bottom: var(--space-xl); }
}

@media (max-width: 767px) {
  .articles-grid { grid-template-columns: 1fr; gap: var(--space-lg); }
  .recent-posts .articles-grid { gap: var(--space-xl); }
}


/* ==========================================================================
   BLOCK: image_banner  (components/blocks/image_banner.php)
   Full-bleed photographic banner, content centred over it. Takes the
   text_block "simple" treatment on top of an image background.
   ========================================================================== */

.image-banner {
  display: flex;
  align-items: center;
  min-height: 750px;
  padding-block: var(--space-3xl);
  text-align: center;
}
.image-banner.compact { min-height: 26rem; }

/* Tucks the banner up behind the rounded bottom corners of the section above */
.image-banner.overlap {
  margin-top: -20px;
  z-index: 0;
  padding-top: calc(var(--space-3xl) + 20px);
}
/* The section above needs to paint over the banner for the tuck to read */
.body-section.recent-posts { z-index: 1; }

.image-banner .body-container { position: relative; z-index: 2; }
.image-banner .title-holder { margin-bottom: var(--space-xl); }
.image-banner .title-holder h2,
.image-banner .title-holder .text-title { margin: 0 auto; max-width: 24ch; }

.image-banner-logo {
  width: clamp(220px, 24vw, 320px);
  height: auto;
  margin: 0 auto var(--space-xl);
}

.image-banner .text-restrict p { margin: 0; }
.image-banner .button-holder { justify-content: center; margin-top: var(--space-xl); }

/* The photograph, kept to its bottom edge as the design crops it */
.image-banner-bg { position: absolute; inset: 0; z-index: 0; }
.image-banner-bg img { width: 100%; height: 100%; object-fit: cover; object-position: bottom center; display: block; }

/* Video loop over the photograph, which is the poster: it shows while the
   video loads, and takes over entirely under reduced motion. Same as page_hero. */
.image-banner-bg video { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; display: block; }
@media (prefers-reduced-motion: reduce) {
  .image-banner-bg video { display: none; }
}

/* --- Contained: the photograph, overlay and text sit inside the page
       container as a rounded panel; the section itself goes transparent. --- */
.body-section.image-banner.contained {
  --banner-inset: calc(max(0px, (100% - var(--profile-container-max)) / 2) + var(--container-padding));
  background: transparent;
}
.image-banner.contained .image-banner-bg,
.image-banner.contained .background-overlay {
  left: var(--banner-inset);
  right: var(--banner-inset);
  border-radius: var(--border-radius-md);
  overflow: hidden;
}
/* Keep the text off the panel's edges */
.image-banner.contained .body-container { padding-inline: calc(var(--container-padding) + var(--space-lg)); }

/* Stands in until the banner photograph is supplied */
.image-banner-bg.is-placeholder {
  background:
    radial-gradient(70% 55% at 50% 40%, color-mix(in srgb, var(--color-orange) 16%, transparent) 0%, transparent 70%),
    linear-gradient(170deg, color-mix(in srgb, var(--color-faded-black) 72%, var(--color-white)) 0%, var(--color-faded-black) 100%);
}

@media (max-width: 767px) {
  .image-banner { min-height: 26rem; padding-block: var(--space-2xl); }
  .image-banner.overlap { padding-top: calc(var(--space-2xl) + 20px); }
  .image-banner .title-holder { margin-bottom: var(--space-lg); }
  .image-banner-logo { margin-bottom: var(--space-lg); }
}


/* ==========================================================================
   BLOCK: faqs  (components/blocks/faqs.php + js/main.js)
   5/7 split — intro top-left, white "still have a question?" card beneath
   it, accordion filling the right column. Each item is a beige pill with an
   orange plus icon; the .faq-* pattern from main.css is restyled here, the
   markup and behaviour are unchanged. On one column the card moves below
   the list so the "get in touch" prompt follows the questions.
   ========================================================================== */

.faqs-grid {
  align-items: start;
  /* Wider than the base 24px gutter so the list stands clear of the intro */
  column-gap: clamp(2.5rem, 5vw, 5rem);
}
.faqs-intro    { grid-column: 1 / span 5; grid-row: 1; }
.faqs-aside    { grid-column: 1 / span 5; grid-row: 2; align-self: start; }
.faqs-list-col { grid-column: 6 / span 7; grid-row: 1 / span 2; }
.faqs-grid.no-aside .faqs-list-col { grid-row: 1; }

.faqs-intro { padding-right: clamp(0rem, 4vw, 3.5rem); }
.faqs-intro > p { max-width: 40ch; }

/* --- Aside card — flat white, 40px padding to match the review cards --- */
.faqs-aside {
  margin-top: var(--space-xl);
  padding: 2.5rem;
  background: var(--color-white);
  border-radius: var(--border-radius-md);
}
.faqs.white .faqs-aside { background: var(--color-off-white); }
.faqs-aside h3 { margin: 0 0 var(--space-sm); line-height: var(--line-height-heading); }
.faqs-aside p { margin: 0; max-width: 36ch; }
.faqs-aside .button-holder { margin-top: var(--space-md); }

/* --- Accordion --- */
.faq-list { display: flex; flex-direction: column; gap: var(--space-md); }

.faqs .faq-item {
  border-bottom: 0;
  background: var(--color-light);
  border-radius: var(--border-radius-md);
  transition: background-color var(--transition-base);
}
.faqs .faq-item:hover { background: color-mix(in srgb, var(--color-light) 94%, var(--color-dark)); }

/* Questions are real headings for the outline; the button carries the type */
.faqs .faq-heading { margin: 0; font-size: inherit; line-height: inherit; }

.faqs .faq-question {
  padding: 1.75rem 2rem;
  border-radius: inherit;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-snug);
}
.faqs .faq-question:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--color-orange) 40%, transparent);
  outline-offset: -3px;
}

/* Plus circle in place of the chevron; a quarter turn makes it a cross */
.faqs .faq-chevron {
  width: 2rem;
  height: 2rem;
  stroke: var(--color-accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.faqs .faq-question[aria-expanded="true"] .faq-chevron { transform: rotate(45deg); }

.faqs .faq-answer-inner {
  padding: 0 4.5rem 1.75rem 2rem; /* right inset clears the icon column */
  font-size: var(--font-size-base);
  color: var(--color-secondary);
}
.faqs .faq-answer-inner p { color: inherit; }
.faqs .faq-answer-inner > :last-child { margin-bottom: 0; }

/* --- Search --- */
.faqs-search { margin-bottom: var(--space-md); }
.faqs-search .search-bar-input {
  height: 3.5rem;
  padding-inline: 3rem;
  border-color: transparent;
  border-radius: var(--border-radius-md);
  font-size: var(--font-size-base);
}
.faqs-search .search-bar-icon { left: 1.25rem; }
.faqs-search .search-bar-clear { right: 1rem; }
.faq-empty { margin: 0 0 var(--space-md); padding: 1.75rem 2rem; color: var(--color-secondary); }
/* Author display rules on .search-bar-clear would otherwise beat the UA's [hidden] */
.faqs [hidden] { display: none !important; }

/* Editor-only empty state */
.faqs-empty { margin: 0; padding: var(--space-md); border: 1px dashed var(--color-border); border-radius: var(--border-radius-sm); color: var(--color-text-muted); font-size: var(--font-size-sm); }

@media (prefers-reduced-motion: reduce) {
  .faqs .faq-item, .faqs .faq-chevron, .faqs .faq-answer { transition: none; }
}

@media (max-width: 991px) {
  /* Single column here: drop the wide desktop column gap, otherwise the 11
     gaps of the 12-column grid (min 40px each) force a 440px width on phones */
  .faqs-grid { column-gap: 0; }
  .faqs-intro, .faqs-aside, .faqs-list-col { grid-column: 1 / -1; grid-row: auto; }
  .faqs-aside { order: 3; margin-top: var(--space-md); }
  .faqs-intro { padding-right: 0; }
  .faqs-intro > p { max-width: none; }
}

@media (max-width: 767px) {
  .faqs .faq-question { padding: 1.25rem 1.5rem; font-size: var(--font-size-md); }
  .faqs .faq-chevron { width: 1.75rem; height: 1.75rem; }
  .faqs .faq-answer-inner { padding: 0 1.5rem 1.25rem; }
  .faqs-aside { padding: var(--space-lg); }
}


/* ==========================================================================
   BLOCK: page_form  (components/blocks/page_form.php + js/main.js)
   White card inset to the container. 5/7 split — heading, contact rows and
   team photograph left; the form on a lighter panel right. Form controls
   come from main.css (.text-field, .form-label, .form-error, .has-error).
   ========================================================================== */

.page-form-card {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 4.5vw, 4.5rem);
  padding: var(--space-3xl) clamp(1.5rem, 6vw, 5.5rem);
  background: var(--color-white);
  border-radius: var(--profile-radius-lg);
}
/* On a white section the card sits on the off-white instead */
.page-form.white .page-form-card { background: var(--color-off-white); }
.page-form.white .page-contact-form,
.page-form.white .page-contact-form .text-field { background: var(--color-white); }

/* --- Info column --- */
.page-form-info > p { max-width: 40ch; }

.contact-methods {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin: var(--space-lg) 0 0;
  padding: 0;
  list-style: none;
}
.contact-methods > li { padding-left: 0; margin-bottom: 0; }
.contact-methods > li::before { content: none; }

.contact-method { display: flex; align-items: center; gap: var(--space-md); }
.contact-method .small-title { margin-bottom: 0.15rem; }

.contact-method-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: var(--color-off-white);
}
.contact-method-icon svg { width: 1.75rem; height: 1.75rem; fill: none; stroke: var(--color-accent); stroke-width: 1.75; }

.contact-method-value {
  display: block;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
  color: var(--color-dark);
  overflow-wrap: anywhere;
}
a.contact-method-value:hover { color: var(--color-accent); }
.contact-method-value .sep { margin: 0 0.35rem; font-weight: var(--font-weight-regular); color: var(--color-secondary); }

/* --- Photograph with sticker badge --- */
.page-form-photo { position: relative; margin-top: var(--space-xl); }

.page-form-photo-badge {
  position: absolute;
  right: -1.75rem;
  bottom: 1.75rem;
  z-index: 3;
  width: min(15.5rem, 70%);
  padding: 0.7rem 0.9rem 0.8rem;
  border: 1px solid var(--color-accent);
  border-radius: 0.75rem;
  background: linear-gradient(135deg, rgba(32, 32, 32, 0.55), rgba(88, 89, 91, 0.7));
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow-lg);
  color: var(--color-white);
  transform: rotate(-3deg);
}
.page-form-photo-badge .star-rating { margin-bottom: 0.3rem; }
.page-form-photo-badge p { margin: 0; font-size: var(--font-size-sm); line-height: var(--line-height-snug); color: var(--color-white); }

/* --- Form column --- */
.page-contact-form {
  padding: clamp(1.5rem, 3.5vw, 3.5rem);
  background: rgba(247, 243, 239, 0.47);
  border-radius: var(--border-radius-md);
}
.page-contact-form .text-field { background: rgba(247, 243, 239, 0.47); color: var(--color-grey); }
.page-contact-form h3 { margin: 0 0 var(--space-sm); line-height: var(--line-height-heading); }
.page-form-lead { margin-bottom: var(--space-lg); font-size: var(--font-size-md); }

/* --- Contact Form 7 --- */
.page-form-cf7 .wpcf7-form > p { margin: 0 0 var(--space-md); }
.page-form-cf7 .wpcf7-form-control-wrap { display: block; }
.page-form-cf7 .wpcf7-form-control.text-field.area { height: 16rem; }
.page-form-cf7 .wpcf7-submit { width: 100%; justify-content: center; }
.page-form-cf7 .wpcf7-not-valid-tip {
  display: block;
  margin-top: 0.4rem;
  font-size: var(--font-size-sm);
  color: var(--color-orange);
}
.page-form-cf7 .wpcf7-form .wpcf7-response-output {
  margin: var(--space-md) 0 0;
  padding: 0.85rem 1rem;
  border: 0;
  border-radius: var(--profile-radius-sm);
  background: color-mix(in srgb, var(--color-orange) 8%, var(--color-white));
  font-size: var(--font-size-sm);
  color: var(--color-dark);
}
.page-form-cf7 .wpcf7-form.sent .wpcf7-response-output {
  background: color-mix(in srgb, var(--color-green) 10%, var(--color-white));
}
.page-form-cf7 .wpcf7-spinner { display: block; margin: var(--space-sm) auto 0; }

.page-form-privacy { margin: var(--space-md) 0 0; font-size: var(--font-size-sm); line-height: var(--line-height-snug); color: var(--color-secondary); }
.page-form-privacy a { color: inherit; text-decoration: underline; }
.page-form-privacy a:hover { color: var(--color-accent); }

.page-form [hidden] { display: none !important; }

/* Editor-only notice */
.page-form-notice { margin: var(--space-md) 0 0; padding: 0.85rem 1rem; border: 1px dashed var(--color-border); border-radius: var(--profile-radius-sm); font-size: var(--font-size-sm); color: var(--color-text-muted); }

/* --- Responsive --- */
@media (max-width: 991px) {
  .page-form-card { grid-template-columns: 1fr; padding: var(--space-2xl) var(--space-lg); }
  .page-form-info > p { max-width: none; }
  .page-form-photo { max-width: 34rem; }
}

@media (max-width: 767px) {
  .page-form-card { padding: var(--space-xl) var(--space-sm); border-radius: var(--border-radius-md); }
  .page-contact-form { padding: var(--space-md); }
  .contact-method-icon { width: 3.25rem; height: 3.25rem; }
  .contact-method-icon svg { width: 1.4rem; height: 1.4rem; }
  /* Small enough for the email to sit on one line instead of splitting mid-word */
  .contact-method-value { font-size: var(--font-size-md); }
  .page-form-photo-badge { right: 0.75rem; bottom: 0.75rem; width: 14rem; }
  .page-form-cf7 .wpcf7-form-control.text-field.area { height: 11rem; }
}


/* ==========================================================================
   BLOCK: accreditations  (components/blocks/accreditations.php)
   Centred heading over a static row of full-colour accreditation logos.
   The row itself (.accreditation-row) comes from main.css; this adds the
   list reset and a taller tier for crests.
   ========================================================================== */

.accreditations .title-holder { margin-bottom: var(--space-2xl); }
.accreditations .title-holder h2,
.accreditations .title-holder .text-title { margin: 0; }

.accreditations .accreditation-row { margin: 0; padding: 0; list-style: none; }
.accreditations .accreditation-row > li { padding-left: 0; margin-bottom: 0; display: flex; align-items: center; }
.accreditations .accreditation-row > li::before { content: none; }

/* Crests are drawn as circles, so they need more height than landscape marks */
.accreditation-row img.tall { height: clamp(72px, 8.5vw, 120px); }

/* Editor-only empty state */
.accreditations-empty { margin: 0; padding: var(--space-md); border: 1px dashed var(--color-border); border-radius: var(--border-radius-sm); color: var(--color-text-muted); font-size: var(--font-size-sm); text-align: center; }

@media (max-width: 767px) {
  .accreditations .title-holder { margin-bottom: var(--space-xl); }
  .accreditations .accreditation-row { gap: var(--space-lg) var(--space-xl); }
  .accreditation-row img.tall { height: 72px; }
}


/* ==========================================================================
   BLOCK: page_hero  (components/blocks/page_hero.php)
   Inner-page hero in the homepage hero's language. Sits under the floating
   header, so the top padding clears the bar. Three styles: a full-bleed photo
   with the dark gradient overlay, the same with an autoplaying video loop over
   the photo, or a plain off-white band with the profile's soft orange circles.
   ========================================================================== */

.page-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 34rem;
  padding: calc(var(--space-4xl) + 2rem) 0 var(--space-2xl);
  overflow: hidden;
  background: var(--color-dark);
}
.page-hero.compact { min-height: 0; padding-bottom: var(--space-xl); }
.page-hero .body-container { position: relative; z-index: 3; }

/* --- Photo --- */
.page-hero-bg { position: absolute; inset: 0; z-index: 0; }
.page-hero-bg img,
.page-hero-bg video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* The photo is the poster and sits behind the loop: it shows while the video
   loads, and takes over entirely under reduced motion. Same as home_header. */
.page-hero-bg video { z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .page-hero-bg video { display: none; }
}
.page-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(62deg, var(--color-faded-black) 0%, rgba(32, 32, 32, 0.35) 100%);
}

/* --- Plain --- */
.page-hero.plain { background: var(--color-off-white); }
.page-hero.plain .circ1 { top: -180px; left: auto; right: -80px; }
.page-hero.plain .circ2 { bottom: -260px; right: auto; left: -160px; }
.page-hero.plain .main-page-title h1,
.page-hero.plain p { color: var(--color-dark); }
.page-hero.plain .small-title { color: var(--color-accent); }
/* main.css sets `.breadcrumbs span { color: white }` for the dark hero, and at
   (0,1,1) it beats `.breadcrumb-current` (0,1,0) — so on the plain off-white
   hero the current crumb was white on cream. Re-assert it here, scoped to
   .plain so the dark hero is untouched. */
.page-hero.plain .breadcrumbs .breadcrumb-current { color: var(--color-text); }
.page-hero.plain .breadcrumbs .breadcrumb-sep { color: var(--color-secondary); }
.page-hero.plain .breadcrumbs span { color: var(--color-text-muted); }

/* --- Content --- */
.page-hero-content { max-width: 65rem; }
.page-hero.center { text-align: center; }
.page-hero.center .page-hero-content { margin: 0 auto; }
.page-hero.center .breadcrumbs { justify-content: center; }

.page-hero .small-title { color: var(--color-pale-orange); }
.page-hero .main-page-title { margin-bottom: var(--space-md); }
.page-hero .main-page-title h1 {
  font-size: clamp(2.25rem, 5vw, calc(var(--font-size-h2) * 1.3));
  line-height: 1.1;
  max-width: none;
}
.page-hero p { margin: 0; font-size: var(--font-size-md); color: rgba(255, 255, 255, 0.85); max-width: 40rem; }
.page-hero.center p { margin-inline: auto; }
.page-hero .button-holder { margin-top: var(--space-lg); }

/* Post meta line — date · read time · author */
.page-hero-meta { margin-top: var(--space-md) !important; font-size: var(--font-size-sm) !important; color: rgba(255, 255, 255, 0.7) !important; }
.page-hero-meta .sep { margin: 0 0.5rem; opacity: 0.5; }
.page-hero.plain .page-hero-meta { color: var(--color-text-muted) !important; }

@media (max-width: 991px) {
  .page-hero { min-height: 0; padding: calc(var(--space-4xl) + 1rem) 0 var(--space-xl); }
}
@media (max-width: 767px) {
  .page-hero .main-page-title h1 { font-size: clamp(2rem, 8vw, 2.75rem); }
}


/* ==========================================================================
   BLOCK: gallery  (components/blocks/gallery.php + js/main.js)
   Grid of rounded photographs (profile image radius, scale on hover) with an
   optional heading and a <dialog> lightbox.
   ========================================================================== */

.gallery .title-holder { margin-bottom: var(--space-2xl); }
.gallery .title-holder + p { margin: calc(-1 * var(--space-xl)) auto var(--space-2xl); max-width: 48ch; text-align: center; }

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(var(--gallery-cols, 3), minmax(0, 1fr));
  gap: var(--grid-gutter);
}

.gallery-item {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: var(--profile-image-radius);
  background: var(--color-light);
  color: inherit;
}
.gallery-grid.landscape .gallery-item { aspect-ratio: 1 / 1; }
.gallery-grid.square .gallery-item { aspect-ratio: 1 / 1; }
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: var(--profile-image-filter);
  transition: transform var(--transition-slow);
}
a.gallery-item { cursor: zoom-in; }
a.gallery-item:hover img { transform: scale(1.04); }
a.gallery-item:focus-visible { outline: 3px solid color-mix(in srgb, var(--color-orange) 40%, transparent); outline-offset: 4px; }

/* Natural: CSS columns keep each photo's own proportions */
.gallery-grid.natural { display: block; columns: var(--gallery-cols, 3); column-gap: var(--grid-gutter); }
.gallery-grid.natural .gallery-item { margin-bottom: var(--grid-gutter); break-inside: avoid; }
.gallery-grid.natural .gallery-item img { height: auto; }

/* Caption over the bottom edge */
.gallery-caption {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--space-lg) var(--space-sm) var(--space-sm);
  background: linear-gradient(to top, rgba(32, 32, 32, 0.75), transparent);
  color: var(--color-white);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-snug);
}
.gallery-grid.natural .gallery-caption { position: absolute; }

/* --- Lightbox --- */
.gallery-lightbox {
  width: min(96vw, 1400px);
  max-width: none;
  max-height: none;
  height: 100dvh;
  margin: 0 auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-white);
  overflow: visible;
}
.gallery-lightbox::backdrop { background: rgba(32, 32, 32, 0.92); }
.gallery-lightbox-figure {
  display: grid;
  place-items: center;
  height: 100%;
  margin: 0;
  padding: 4.5rem 4.5rem 3.5rem;
}
.gallery-lightbox-figure img {
  max-width: 100%;
  max-height: calc(100dvh - 9rem);
  width: auto;
  height: auto;
  border-radius: var(--border-radius-md);
  box-shadow: var(--shadow-xl);
}
.gallery-lightbox-caption { margin-top: var(--space-sm); font-size: var(--font-size-sm); color: rgba(255, 255, 255, 0.8); text-align: center; }
.gallery-lightbox-caption[hidden] { display: none; }
.gallery-lightbox-count { position: absolute; left: 50%; bottom: 1rem; translate: -50% 0; margin: 0; font-size: var(--font-size-sm); color: rgba(255, 255, 255, 0.6); }
.gallery-lightbox .icon-button { position: absolute; }
.gallery-lightbox-close { top: 1rem; right: 0; background: rgba(255, 255, 255, 0.12); }
.gallery-lightbox-close svg { stroke: var(--color-white); }
.gallery-lightbox-close:hover { background: var(--color-accent); }
.gallery-lightbox-prev, .gallery-lightbox-next { top: 50%; translate: 0 -50%; }
.gallery-lightbox-prev { left: 0; }
.gallery-lightbox-next { right: 0; }
.gallery-lightbox [hidden] { display: none; }

/* Editor-only empty state */
.gallery-empty { margin: 0; padding: var(--space-md); border: 1px dashed var(--color-border); border-radius: var(--border-radius-sm); color: var(--color-text-muted); font-size: var(--font-size-sm); text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .gallery-item img { transition: none; }
}
@media (max-width: 991px) {
  .gallery-grid { --gallery-cols: 2 !important; }
  .gallery .title-holder { margin-bottom: var(--space-xl); }
}
@media (max-width: 767px) {
  /* Two across keeps long galleries from running thousands of pixels */
  .gallery-grid { --gallery-cols: 2 !important; gap: var(--space-xs); }
  .gallery-grid.natural { columns: 2; column-gap: var(--space-xs); }
  .gallery-grid.natural .gallery-item { margin-bottom: var(--space-xs); }
  .gallery-lightbox-figure { padding: 4rem 0.5rem 3rem; }
  .gallery-lightbox-prev { left: 0.5rem; }
  .gallery-lightbox-next { right: 0.5rem; }
  .gallery-lightbox-close { right: 0.5rem; }
}


/* ==========================================================================
   BLOCK: services_grid  (components/blocks/services_grid.php)
   The card itself is the shared .article-card from the recent_posts block, so
   services, case studies and blog posts all look the same. Only the section
   spacing and the service icon badge live here.
   ========================================================================== */

.services-grid .title-holder { margin-bottom: var(--space-2xl); }
.services-grid .title-holder + p { margin: calc(-1 * var(--space-lg)) auto var(--space-2xl); max-width: 52ch; text-align: center; }
.services-grid .button-holder { margin-top: var(--space-2xl); }

/* The archive uses an h2 for the card title (the page h1 is the archive name);
   it should read exactly like the h3 the other grids use. */
.article-card .service-card-title {
  margin: 0 0 var(--space-xs);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-heading);
}

/* Icon badge: white circle over the bottom-left of the image */
.service-card-icon {
  position: absolute;
  left: var(--space-sm);
  bottom: var(--space-sm);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  background: var(--color-white);
  box-shadow: var(--shadow-md);
}
.service-card-icon img { width: 1.75rem; height: 1.75rem; object-fit: contain; }

/* No featured image yet: the icon sits large on a tinted tile instead */
.article-card-image.is-placeholder {
  background:
    radial-gradient(80% 60% at 30% 25%, color-mix(in srgb, var(--color-orange) 18%, transparent) 0%, transparent 70%),
    var(--color-dark-offwhite);
}

/* On the dark band the cards stay white; the section text goes white */
.services-grid.dark .card-body h3,
.services-grid.dark .card-body .service-card-title { color: var(--color-dark); }
.services-grid.dark .card-body p { color: var(--color-text-muted); }

/* Editor-only empty state */
.services-grid-empty { margin: 0; padding: var(--space-md); border: 1px dashed var(--color-border); border-radius: var(--border-radius-sm); color: var(--color-text-muted); font-size: var(--font-size-sm); text-align: center; }

@media (max-width: 991px) {
  /* .articles-grid already drops to 2 then 1 column — nothing to repeat here. */
  .services-grid .title-holder { margin-bottom: var(--space-xl); }
}


/* ==========================================================================
   BLOCK: blog_editor "Content"  (components/blocks/blog_editor.php)
   Rich text body with an optional read-more list and download box. Prose
   styling itself is base (.prose in main.css); this sets the column width
   and the two extras.
   ========================================================================== */

.content-block.compact { padding-block: var(--space-xl); }
.content-body { margin: 0 auto; }
.content-body.readable { max-width: 720px; }
.content-body.wide { max-width: 900px; }

/* --- Read more --- */
.read-more { margin-top: var(--space-2xl); padding-top: var(--space-lg); border-top: 1px solid var(--color-border); }
.read-more-heading { margin: 0 0 var(--space-sm); font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); letter-spacing: var(--letter-spacing-wide); text-transform: uppercase; color: var(--color-accent); }
.read-more-links { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-xs); }
.read-more-links > li { padding-left: 0; margin-bottom: 0; }
.read-more-links > li::before { content: none; }
.read-more-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: 0.9rem 1.1rem;
  border-radius: var(--border-radius-sm);
  background: var(--color-off-white);
  color: var(--color-dark);
  font-weight: var(--font-weight-semibold);
  transition: var(--profile-hover-transition);
}
.light .read-more-link { background: var(--color-white); }
.read-more-link svg { width: 18px; height: 18px; flex-shrink: 0; stroke: var(--color-accent); fill: none; stroke-width: 2.5; transition: transform var(--transition-base); }
.read-more-link:hover { background: var(--color-dark-offwhite); color: var(--color-dark); }
.read-more-link:hover svg { transform: translateX(3px); }

/* --- Download box --- */
.download-holder {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-top: var(--space-2xl);
  padding: var(--space-md) var(--space-lg);
  border: 1px solid var(--color-accent);
  border-radius: var(--border-radius-md);
  background: color-mix(in srgb, var(--color-orange) 5%, var(--color-white));
}
.download-holder-icon { display: grid; place-items: center; flex: 0 0 auto; width: 3.25rem; height: 3.25rem; border-radius: 50%; background: var(--color-white); }
.download-holder-icon svg { width: 1.5rem; height: 1.5rem; stroke: var(--color-accent); fill: none; stroke-width: 2; }
.download-holder-body { flex: 1 1 auto; min-width: 0; }
.download-holder-title { margin: 0 0 0.15rem; font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); letter-spacing: var(--letter-spacing-wide); text-transform: uppercase; color: var(--color-accent); }
.download-holder p { margin: 0; font-size: var(--font-size-sm); color: var(--color-secondary); }
.download-holder .main-button { flex: 0 0 auto; }

@media (max-width: 767px) {
  .download-holder { flex-direction: column; align-items: flex-start; }
  .download-holder .main-button { width: 100%; }
  .prose .alignleft, .prose .alignright { float: none; max-width: 100%; margin: var(--space-md) 0; }
}


/* ==========================================================================
   TEMPLATE: single post  (single.php)
   Article column left, sticky sidebar right. The post's blocks keep their
   own <section class="body-section"> wrappers, so inside .with-sidebar
   those wrappers are flattened: no band colour, padding or container.
   ========================================================================== */

.with-sidebar {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  gap: var(--space-3xl) var(--space-2xl);
  align-items: start;
}

/* --- Flatten block wrappers inside the article --- */
article > .body-section {
  padding: 0;
  background: transparent;
  border-radius: 0;
  overflow: visible;
}
.with-sidebar .article > .body-section + .body-section { margin-top: var(--space-2xl); }
.with-sidebar .article .body-container { max-width: none; padding: 0; }
.with-sidebar .article .corner-border { display: none; }
.with-sidebar .article .content-body,
.with-sidebar .article .content-body.wide,
.with-sidebar .article .content-body.readable { max-width: none; }

/* Blocks that assume the full page width stack in the narrower column */
.with-sidebar .article .faqs-intro,
.with-sidebar .article .faqs-aside,
.with-sidebar .article .faqs-list-col { grid-column: 1 / -1; grid-row: auto; }
.with-sidebar .article .faqs-aside { order: 3; margin-top: var(--space-md); }
.with-sidebar .article .faqs-intro { padding-right: 0; }
.with-sidebar .article .gallery-grid { --gallery-cols: 2 !important; }
.with-sidebar .article .video-panel { padding: var(--space-xl) var(--space-lg); }
.with-sidebar .article .video-media { max-width: none; }
.with-sidebar .article .title-holder { margin-bottom: var(--space-lg); }

/* Blog posts only: room above each H2 so sections read as breaks */
.with-sidebar.is-post .article .prose h2 { margin-top: var(--space-xl); }
.with-sidebar.is-post .article .prose > h2:first-child { margin-top: 0; }

/* Blog posts only: smaller H2/H3 than the site-wide heading scale, so
   article headings sit with the body text instead of competing with it */
.with-sidebar.is-post .article .prose h2 { font-size: clamp(1.5rem, 2.5vw, 2rem); line-height: 1.25; }
.with-sidebar.is-post .article .prose h3 { font-size: clamp(1.25rem, 1.8vw, 1.5rem); line-height: 1.3; }

/* Article text sits on the off-white band, so quotes and read-more rows go white */
.with-sidebar .article .prose blockquote,
.with-sidebar .article .read-more-link,
.with-sidebar .article .faqs .faq-item { background: var(--color-white); }
.with-sidebar .article .faqs .faq-item:hover { background: color-mix(in srgb, var(--color-white) 94%, var(--color-dark)); }

.article-tags { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-2xl); }
.article-tags .badge.light { background: var(--color-white); }

/* --- Sidebar --- */
.sidebar {
  position: sticky;
  top: calc(var(--space-2xl) + 3.5rem); /* clears the floating header */
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.sidebar-card {
  padding: var(--space-lg);
  background: var(--color-white);
  border-radius: var(--border-radius-md);
}
.sidebar-heading {
  margin: 0 0 var(--space-sm);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: var(--color-accent);
}

.cat-list, .post-list { list-style: none; margin: 0; padding: 0; }
.cat-list > li, .post-list > li { padding-left: 0; margin-bottom: 0; }
.cat-list > li::before, .post-list > li::before { content: none; }

.cat-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-dark);
  font-weight: var(--font-weight-medium);
}
.cat-list > li:last-child a { border-bottom: 0; }
.cat-list a:hover { color: var(--color-accent); }
.cat-count {
  min-width: 1.75rem;
  padding: 0.1rem 0.5rem;
  border-radius: var(--profile-radius-pill);
  background: var(--color-off-white);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-secondary);
  text-align: center;
}

.post-list a {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: var(--space-sm);
  align-items: center;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-dark);
}
.post-list > li:last-child a { border-bottom: 0; }
.post-list-thumb {
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: var(--profile-radius-sm);
  overflow: hidden;
  background: var(--color-dark-offwhite);
}
.post-list-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow); }
.post-list a:hover .post-list-thumb img { transform: scale(1.05); }
.post-list-body { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.post-list-title { font-size: 0.95rem; font-weight: var(--font-weight-semibold); line-height: var(--line-height-snug); transition: color var(--transition-fast); }
.post-list a:hover .post-list-title { color: var(--color-accent); }
.post-list-date { font-size: var(--font-size-xs); color: var(--color-text-muted); }
.sidebar-card .text-link { margin-top: var(--space-sm); }

/* Contact card — dark, matching the hero and footer */
.sidebar-card-contact { background: var(--color-faded-black); color: var(--color-white); }
.sidebar-card-contact h3 { margin: 0 0 var(--space-xs); font-size: var(--font-size-xl); line-height: var(--line-height-heading); color: var(--color-white); }
.sidebar-card-contact p { margin: 0; font-size: var(--font-size-sm); color: rgba(255, 255, 255, 0.75); }
.sidebar-contact { list-style: none; margin: var(--space-sm) 0 0; padding: 0; }
.sidebar-contact > li { padding-left: 0; margin-bottom: 0.25rem; }
.sidebar-contact > li::before { content: none; }
.sidebar-contact a { font-weight: var(--font-weight-semibold); color: var(--color-white); overflow-wrap: anywhere; }
.sidebar-contact a:hover { color: var(--color-pale-orange); }
.sidebar-card-contact .button-holder { margin-top: var(--space-md); }
.sidebar-card-contact .main-button { width: 100%; }

@media (max-width: 991px) {
  .with-sidebar { grid-template-columns: 1fr; gap: var(--space-2xl); }
  .sidebar { position: static; }
  .with-sidebar .article .gallery-grid { --gallery-cols: 2 !important; }
}
@media (max-width: 767px) {
  .with-sidebar .article .gallery-grid { --gallery-cols: 1 !important; }
}


/* ==========================================================================
   TEMPLATE: blog archive  (index.php — blog listing, category, tag, author)
   Reuses .articles-grid / .article-card from the recent_posts block on an
   off-white band, with a category filter row above and pagination below.
   ========================================================================== */

.blog-archive .article-card h3 { color: var(--color-dark); }
.blog-archive .article-card-image { background: var(--color-white); }

/* Filter pills */
.archive-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
  margin-bottom: var(--space-2xl);
}
.archive-filter-label { margin-right: var(--space-xs); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-secondary); }
.archive-filter a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  border-radius: var(--profile-radius-pill);
  background: var(--color-white);
  color: var(--color-dark);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  transition: var(--profile-hover-transition);
}
.archive-filter a:hover { background: var(--color-dark-offwhite); color: var(--color-dark); }
.archive-filter a.is-active { background: var(--color-accent); color: var(--color-white); }
.archive-filter a .count { font-size: var(--font-size-xs); opacity: 0.65; }

/* Pagination */
.archive-pagination { display: flex; justify-content: center; margin-top: var(--space-2xl); }
.archive-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.archive-pagination li { padding-left: 0; margin-bottom: 0; }
.archive-pagination li::before { content: none; }
.archive-pagination a.page-numbers,
.archive-pagination span.page-numbers {
  display: grid;
  place-items: center;
  min-width: 2.75rem;
  height: 2.75rem;
  padding: 0 0.75rem;
  border-radius: var(--profile-button-radius);
  background: var(--color-white);
  color: var(--color-dark);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  transition: var(--profile-hover-transition);
}
.archive-pagination a.page-numbers:hover { background: var(--color-dark); color: var(--color-white); }
.archive-pagination .page-numbers.current { background: var(--color-accent); color: var(--color-white); }
.archive-pagination .page-numbers.dots { background: transparent; color: var(--color-secondary); }
.archive-pagination .page-numbers svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2.5; }

/* Empty state */
.archive-empty {
  max-width: 40rem;
  margin: 0 auto;
  padding: var(--space-xl);
  text-align: center;
  background: var(--color-white);
  border-radius: var(--border-radius-md);
}
.archive-empty h2 { font-size: var(--font-size-xl); margin-bottom: var(--space-xs); }
.archive-empty p { color: var(--color-text-muted); }

@media (max-width: 767px) {
  .archive-filter { margin-bottom: var(--space-xl); }
  .archive-filter-label { width: 100%; margin: 0 0 0.25rem; }
}

.body-section .article {

  ul > li::before {
    content: '';
    position: absolute;
    left: 0.35rem;
    top: 0.62em;
    width: 7px;
    height: 7px;
    border-radius: 2px;
    background: var(--color-accent);
  }
}
/* ==========================================================================
   TEMPLATE: 404  (404.php)
   Type-led: the 404 itself is the one big thing, set in the theme's own
   Satoshi Black. No illustration. Only the numerals and the search row are
   new here; the cards and the closing CTA band are existing patterns.
   ========================================================================== */

.notfound-hero {
  position: relative;
  overflow: hidden;
  background: var(--color-off-white);
  padding: calc(var(--space-4xl) + 2rem) 0 var(--space-3xl);
  text-align: center;
}
.notfound-hero .circ1 { top: -200px; left: auto; right: -120px; }
.notfound-hero .circ2 { bottom: -280px; right: auto; left: -180px; }

.notfound-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 52rem;
  margin: 0 auto;
}

/* The numerals are the page's one big thing. Tabular figures so the three
   digits sit evenly; the tight line-height stops the leading opening up a
   gap above the headline. */
.notfound-code {
  margin: 0 0 var(--space-sm);
  font-size: clamp(7rem, 30vw, 17rem);
  font-weight: var(--font-weight-black);
  line-height: 0.85;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--color-dark);
}

.notfound-hero h1 {
  margin: 0 0 var(--space-md);
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-dark);
  /* Two even lines rather than a long first line and one orphan word. */
  text-wrap: balance;
}

.notfound-intro {
  max-width: 34rem;
  margin: 0 auto var(--space-xl);
  font-size: var(--font-size-md);
  line-height: var(--line-height-base);
  color: var(--color-text-muted);
}

.notfound-hero .button-holder { margin-top: var(--space-md); }

/* --- Closing CTA band --- */
.notfound-cta .title-holder { margin-bottom: var(--space-sm); }
.notfound-cta .text-restrict { text-align: center; }
.notfound-cta .text-restrict p { color: rgba(255, 255, 255, 0.9); }
.notfound-cta .button-holder { margin-top: var(--space-lg); }

/* --- Cards + closing line --- */
/* The hero already closes on 96px, so the standard section padding would
   leave a 224px gap before the cards. */
.body-section.notfound { padding-top: var(--space-2xl); }
.notfound .title-holder { margin-bottom: var(--space-xl); }

@media (max-width: 767px) {
  .notfound-hero { padding: calc(var(--space-4xl) + 1rem) 0 var(--space-2xl); }
}

/* ==========================================================================
   TEMPLATE: case study  (single-case_study.php, archive-case_study.php)
   The Lumisol "Blofield School" layout in ChimneySmart's kit: a dark split
   hero, the story beside the sticky At a glance rail, a figures row, the
   gallery block's grid, a quote over a photograph, then related work.
   The rail, cards, badges and gallery are all existing patterns; only the
   hero split, the glance list, the figures and the quote band are new.
   ========================================================================== */

/* --- Split hero --- */
.cs-hero {
  position: relative;
  overflow: hidden;
  background: var(--color-dark);
  color: var(--color-white);
  padding: calc(var(--space-4xl) + 2rem) 0 var(--space-3xl);
}
.cs-hero .circ1 { top: -220px; right: -140px; left: auto; opacity: 0.22; }
.cs-hero .circ2 { bottom: -300px; left: -200px; right: auto; opacity: 0.16; }
.cs-hero .body-container { position: relative; z-index: 2; }

.cs-hero .breadcrumbs { margin-bottom: var(--space-lg); }
.cs-hero .breadcrumbs a { color: rgba(255, 255, 255, 0.7); }
.cs-hero .breadcrumbs a:hover { color: var(--color-accent); }
.cs-hero .breadcrumb-current { color: var(--color-white); }

.cs-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: var(--space-2xl);
  align-items: center;
}
.cs-hero.no-media .cs-hero-grid { grid-template-columns: minmax(0, 1fr); max-width: 44rem; }

.cs-hero-meta {
  margin: 0 0 var(--space-sm);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: var(--color-pale-orange);
}
.cs-hero h1 {
  margin: 0 0 var(--space-md);
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-white);
  text-wrap: balance;
}
.cs-hero-intro {
  margin: 0;
  max-width: 34rem;
  font-size: var(--font-size-md);
  line-height: var(--line-height-base);
  color: rgba(255, 255, 255, 0.82);
}
.cs-hero .button-holder { margin-top: var(--space-lg); }

.cs-hero-media {
  border-radius: var(--profile-image-radius);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
}
.cs-hero-media img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: var(--profile-image-aspect);
  object-fit: cover;
}

/* --- Story column --- */
.cs-article > h2 {
  margin: var(--space-2xl) 0 var(--space-sm);
  font-size: clamp(1.5rem, 3vw, var(--font-size-h3));
  line-height: var(--line-height-heading);
}
.cs-article > h2:first-child { margin-top: 0; }
/* Paragraphs and lists are already handled: `p`, `ul`/`ol` and the
   `.body-section .article ul > li::before` marker all come from the theme,
   including the nested and dark-section variants. Nothing to add here. */
.cs-article ul,
.cs-article ol { margin-bottom: var(--space-md); }

/* --- Figures --- */
.cs-stats {
  display: grid;
  grid-template-columns: repeat(var(--cs-stat-cols, 3), minmax(0, 1fr));
  gap: var(--space-lg);
  margin: var(--space-xl) 0;
  padding: var(--space-lg);
  background: var(--color-white);
  border-radius: var(--profile-radius-md);
  box-shadow: var(--profile-card-shadow);
}
.cs-stat { display: flex; flex-direction: column; gap: 0.15rem; }
.cs-stat-icon { display: block; margin-bottom: var(--space-xs); }
.cs-stat-icon img { width: 2rem; height: 2rem; object-fit: contain; }
.cs-stat-value {
  font-size: clamp(1.75rem, 4vw, var(--font-size-3xl));
  font-weight: var(--font-weight-black);
  line-height: 1;
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-accent);
}
.cs-stat-label {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-snug);
  color: var(--color-text-muted);
}

/* --- At a glance rail --- */
.cs-glance { margin: 0; }
.cs-glance-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-sm);
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--color-border);
}
.cs-glance-row:last-child { border-bottom: 0; padding-bottom: 0; }
.cs-glance dt {
  flex: 0 0 auto;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}
.cs-glance dd {
  margin: 0;
  text-align: right;
  font-weight: var(--font-weight-semibold);
  color: var(--color-dark);
}

/* --- Quote band --- */
.cs-quote { position: relative; overflow: hidden; }
.cs-quote-bg { position: absolute; inset: 0; z-index: 0; }
.cs-quote-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.cs-quote .background-overlay { z-index: 1; }
.cs-quote .body-container { position: relative; z-index: 2; }

.cs-quote-figure { max-width: 48rem; margin: 0 auto; text-align: center; }
.cs-quote-figure blockquote { margin: 0; }
.cs-quote-figure blockquote p {
  margin: 0;
  font-size: clamp(1.25rem, 2.6vw, var(--font-size-xl));
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-snug);
  color: var(--color-white);
  text-wrap: balance;
}
.cs-quote-figure blockquote p::before { content: "\201C"; }
.cs-quote-figure blockquote p::after { content: "\201D"; }
.cs-quote-figure figcaption { margin-top: var(--space-lg); }
.cs-quote-name {
  display: block;
  font-weight: var(--font-weight-bold);
  color: var(--color-white);
}
.cs-quote-role {
  display: block;
  font-size: var(--font-size-sm);
  color: rgba(255, 255, 255, 0.72);
}

/* --- Archive filter chips (case studies + services) --- */
.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  justify-content: center;
  margin-bottom: var(--space-xl);
}
.filter-chips .badge {
  background: var(--color-dark-offwhite);
  color: var(--color-dark);
  transition: var(--transition-base);
}
.filter-chips .badge:hover { background: var(--color-pale-orange); }
.filter-chips .badge.is-current { background: var(--color-accent); color: var(--color-white); }

@media (max-width: 991px) {
  .cs-hero-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .cs-hero-media { order: -1; }
  .cs-hero-intro { max-width: none; }
  .cs-stats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (max-width: 767px) {
  .cs-hero { padding: calc(var(--space-4xl) + 1rem) 0 var(--space-2xl); }
  .cs-stats { grid-template-columns: minmax(0, 1fr) !important; gap: var(--space-md); }
  .cs-glance-row { flex-direction: column; gap: 0.1rem; }
  .cs-glance dd { text-align: left; }
}

/* ==========================================================================
   TEMPLATE: services archive  (archive-service.php)
   Cards, filter chips and the hero are all existing patterns; the only new
   thing is the line of child services under a parent's description.
   ========================================================================== */

.services-archive .filter-chips,
.cs-archive .filter-chips { margin-bottom: var(--space-xl); }

.service-card-children {
  display: block;
  margin-top: var(--space-xs);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-snug);
  color: var(--color-text-muted);
}

/* ==========================================================================
   BLOCK: html_block  (components/blocks/html_block.php)
   A pass-through container. It sets the band, the width and the padding and
   then gets out of the way — pasted markup brings its own styling, so this
   deliberately does not style the children.
   ========================================================================== */

/* Padding scale matches .content-block, which is the other pass-through block */
.body-section.html-block.compact { padding-block: var(--space-xl); }
.body-section.html-block.no-padding { padding-block: 0; }

/* Full bleed: no container, so an embed can run edge to edge */
.html-block-body.is-bleed { position: relative; z-index: 2; width: 100%; }

/* Embeds almost always arrive as a bare iframe with fixed width/height
   attributes; make them behave without touching anything else. */
.html-block-body > iframe,
.html-block-body > p > iframe {
  display: block;
  max-width: 100%;
  border: 0;
}
.html-block-body > iframe[width][height] { aspect-ratio: attr(width) / attr(height); }

/* Anything wider than the column scrolls rather than breaking the layout */
.html-block-body > table { display: block; max-width: 100%; overflow-x: auto; }
.html-block-body > img,
.html-block-body > video { max-width: 100%; height: auto; }

/* Editor-only empty state */
.html-block-empty {
  margin: 0;
  padding: var(--space-md);
  border: 1px dashed var(--color-border);
  border-radius: var(--border-radius-sm);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  text-align: center;
}


/* ==========================================================================
   BLOCK: team  (components/blocks/team.php)
   Team members from the Team post type. Members with a description show
   as photo + card rows on the left; members without one show in the
   "Our Engineers" photo grid on the right. Added: 21/10/2026
   ========================================================================== */

.team-layout { align-items: stretch; }

/* --- Left: cards (photo beside role, name, description) --- */
.team-cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.team-card {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 34%) minmax(0, 1fr);
  background: var(--color-white);
  border-radius: var(--border-radius-md);
  overflow: hidden;
}

.team-card-image {
  position: relative;
  min-height: 280px;
  background: var(--color-dark-offwhite);
}

.team-card-image img:not(.team-placeholder) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Team photos: zoom in so shoulders bleed off the edges and the eyes sit
   about 1/3 from the top.*/
.team-card-image,
.team-member-image {
  --team-zoom: 1.5;
  --team-focus: 50% 8%;
  overflow: hidden;
}
.team-card-image img:not(.team-placeholder),
.team-member-image img:not(.team-placeholder) {
  transform: scale(var(--team-zoom));
  transform-origin: var(--team-focus);
}

.team-card-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-xl);
}

.team-card-name {
  margin-bottom: var(--space-xs);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-medium);
}

.team-card-text { color: var(--color-text-muted); }

/* --- Right: "Our Engineers" panel --- */
.team-engineers {
  padding: var(--space-xl) var(--space-lg);
  background: var(--color-white);
  border-radius: var(--border-radius-md);
  text-align: center;
}

.team-engineers > .small-title { margin-bottom: var(--space-lg); }

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

/* Engineers only (no cards): spread across the full width */
.team-engineers.is-full .team-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.team-member-image {
  aspect-ratio: 1 / 1;
  background: var(--color-dark-offwhite);
  border-radius: var(--profile-image-radius);
  overflow: hidden;
}

.team-member-image img:not(.team-placeholder) {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.team-member-name {
  margin: var(--space-sm) 0 0;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
}

/* --- No photo: Chimney Smart mark, faded, centred on the tile --- */
.team-card-image.is-placeholder,
.team-member-image.is-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
}

.team-placeholder {
  width: 40%;
  max-width: 160px;
  height: auto;
  opacity: 0.4;
}

/* Editor-only empty state */
.team-empty {
  margin: 0;
  padding: var(--space-md);
  border: 1px dashed var(--color-border);
  border-radius: var(--border-radius-sm);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  text-align: center;
}

/* --- Responsive --- */
@media (max-width: 991px) {
  .team-layout > .span-7,
  .team-layout > .span-5 { grid-column: span 12; }
}

@media (max-width: 767px) {
  .team-card { grid-template-columns: 1fr; }
  .team-card-image { min-height: 0; aspect-ratio: 4 / 3; }
  .team-card-body { padding: var(--space-lg); }
  .team-engineers.is-full .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Team photos: crop from near the top so faces stay in frame
   (portraits are shot with the head in the upper part of the photo) */
.team-card-image img:not(.team-placeholder),
.team-member-image img:not(.team-placeholder) { object-position: 50% 20%; }

/* Engineers: portrait tiles like the design, instead of square */
.team-member-image { aspect-ratio: 4 / 5; }

/* Mobile cards: square photo instead of a wide 4:3 strip, zoomed out a little
   (1.2 instead of 1.5) so the company logo on the shirt stays in view */
@media (max-width: 767px) {
  .team-card-image { aspect-ratio: 1 / 1; --team-zoom: 1.2; }
}



/* ==========================================================================
   BLOCK: owner_focus  (components/blocks/owner_focus.php)
   Full-width orange section (.body-section.accent) with a rounded photo or video loop inside
   it, darkened by .background-overlay.heavy from main.css, and the quote,
   name and role centred on top.
   Added: 29/10/2026
   ========================================================================== */

/* Tighter than the standard section padding. Kept to a single class so the
   site-wide .body-section.flush-top / .flush-bottom (Remove top/bottom
   padding) still win when they are switched on */
.owner-focus { padding-block: var(--space-2xl); }

/* The photo/video frame: full content width (lines up with other sections),
   Video block proportions, and it grows taller if the quote needs more room */
.owner-focus-media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  aspect-ratio: 1920 / 1012;
  padding: var(--space-2xl) var(--space-xl);
  border-radius: var(--border-radius-md);
  overflow: hidden;
  background: var(--color-dark-lighter);
  text-align: center;
}

/* Background photograph / video, centred so faces stay in frame */
.owner-focus-bg { position: absolute; inset: 0; z-index: 0; }
.owner-focus-bg img,
.owner-focus-bg video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.owner-focus-bg video { z-index: 1; }
@media (prefers-reduced-motion: reduce) {
  .owner-focus-bg video { display: none; }
}

/* Stands in until a photograph is added */
.owner-focus-bg.is-placeholder {
  background: linear-gradient(170deg, color-mix(in srgb, var(--color-faded-black) 72%, var(--color-white)) 0%, var(--color-faded-black) 100%);
}

/* Quote and attribution, above the photo and overlay */
.owner-focus-figure { position: relative; z-index: 2; max-width: 40rem; margin: 0; }
.owner-focus-quote { margin: 0; padding: 0; border: 0; }
.owner-focus .owner-focus-quote p {
  margin: 0;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-base);
  color: var(--color-white);
}

.owner-focus-cite {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  margin-top: var(--space-lg);
  color: var(--color-white);
}
.owner-focus-name {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
}
.owner-focus-role {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
}

/* Editor-only empty state */
.owner-focus-empty { position: relative; z-index: 2; margin: 0; color: rgba(255, 255, 255, 0.75); }

@media (max-width: 767px) {
  .owner-focus { padding-block: var(--space-lg); }
  .owner-focus-media { aspect-ratio: auto; min-height: 26rem; padding: var(--space-xl) var(--space-md); }
  .owner-focus .owner-focus-quote p { font-size: var(--font-size-base); }
  .owner-focus-name { font-size: var(--font-size-md); }
  .owner-focus-role { font-size: var(--font-size-base); }
}


/* ==========================================================================
   FOOTER: "Proud to be a:" label above the second logo (footer.php)
   Brighter and bolder than the intro text so it reads as a label.
   Added: 21/10/2026
   ========================================================================== */

.footer-intro .footer-second-logo-label {
  margin-bottom: var(--space-xs);
  color: rgba(255, 255, 255, 0.9);
  font-weight: var(--font-weight-semibold);
}