/* ============================================================
   Greater Zion — V4 Block Toolkit
   ------------------------------------------------------------
   Styling for the v4 editor tools (block styles + patterns)
   registered in lib/v4-block-toolkit.php. Loaded on the front
   end AND injected into the block-editor iframe so what an
   editor sees while typing matches the published page.

   Two class conventions:
     .is-style-gz-v4-*  → registered block STYLES (WP prefixes
                          the slug with `is-style-`). One-click
                          from the block Styles panel.
     .gz-v4-*           → helper classes used inside the v4
                          PATTERNS (stat label/value, hero, cta).

   Self-contained tokens (`--gzv4-*`) so it does not depend on
   gz-global.css being present — important inside the editor
   iframe, which does not load the front-end stylesheet.
   ============================================================ */

:root {
  --gzv4-dark-blue:  #364b54;
  --gzv4-blue-deep:  #243339;
  --gzv4-orange:     #EB6B40;
  --gzv4-aqua:       #42B5BF;
  --gzv4-sand:       #F4ECDF;
  --gzv4-sand-light: #FAF6F0;
  --gzv4-stone:      #3D3D3B;
  --gzv4-stone-soft: #6F6E6A;
  --gzv4-line:       #E6DFD2;
  --gzv4-white:      #ffffff;

  --gzv4-display: "Barlow Condensed", "Barlow", "Arial Narrow", sans-serif;
  --gzv4-body:    "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --gzv4-ease:    cubic-bezier(0.16, 1, 0.3, 1);
}

/* ============== Text styles ============== */

/* Eyebrow — small uppercase kicker above a headline (paragraph style) */
.is-style-gz-v4-eyebrow {
  font-family: var(--gzv4-body);
  font-weight: 800;
  font-size: 0.8125rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gzv4-orange);
  margin: 0 0 0.6rem;
}

/* Lede — larger intro paragraph */
.is-style-gz-v4-lede {
  font-family: var(--gzv4-body);
  font-size: clamp(1.0625rem, 1.5vw, 1.35rem);
  line-height: 1.6;
  color: var(--gzv4-stone);
  max-width: 46rem;
  margin: 0;
  text-wrap: pretty;
}

/* Display — big Barlow Condensed heading (heading style) */
.is-style-gz-v4-display {
  font-family: var(--gzv4-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.012em;
  line-height: 0.95;
  font-size: clamp(2rem, 5vw, 3.75rem);
  color: var(--gzv4-dark-blue);
  margin: 0 0 1rem;
  text-wrap: balance;
}

/* ============== Buttons ============== */

/* Shared button shape for both v4 button styles */
.is-style-gz-v4-orange .wp-block-button__link,
.is-style-gz-v4-outline .wp-block-button__link {
  font-family: var(--gzv4-body);
  font-weight: 800;
  letter-spacing: 0.03em;
  border-radius: 999px;
  padding: 0.9em 1.75em;
  text-decoration: none;
  transition:
    transform 0.2s var(--gzv4-ease),
    background-color 0.2s var(--gzv4-ease),
    color 0.2s var(--gzv4-ease),
    box-shadow 0.2s var(--gzv4-ease);
}

/* Solid orange (brand orange used as-is — never darkened) */
.is-style-gz-v4-orange .wp-block-button__link {
  background: var(--gzv4-orange);
  color: #15191C;
  border: none;
  box-shadow: 0 8px 22px rgba(235, 107, 64, 0.26);
}
.is-style-gz-v4-orange .wp-block-button__link:hover,
.is-style-gz-v4-orange .wp-block-button__link:focus-visible {
  background: var(--gzv4-sand-light);
  color: var(--gzv4-blue-deep);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(20, 25, 28, 0.28);
}

/* Outline */
.is-style-gz-v4-outline .wp-block-button__link {
  background: transparent;
  color: var(--gzv4-dark-blue);
  border: 2px solid var(--gzv4-dark-blue);
}
.is-style-gz-v4-outline .wp-block-button__link:hover,
.is-style-gz-v4-outline .wp-block-button__link:focus-visible {
  background: var(--gzv4-dark-blue);
  color: var(--gzv4-sand-light);
  transform: translateY(-2px);
}

/* ============== Pull quote ============== */
/* The compound selector (element + 2 classes) plus trailing source order
   overrides the theme's `.page-content .article-content blockquote` box
   (specificity 0,2,1): a 1px border, border-radius, inline-block, and a
   FontAwesome `::before` quote-mark. Reset all of it back to a clean rule. */
blockquote.wp-block-quote.is-style-gz-v4-pullquote {
  display: block;
  border: none;
  border-left: 3px solid var(--gzv4-orange);
  border-radius: 0;
  margin: 2rem 0;
  padding: 0.25rem 0 0.25rem 1.5rem;
  position: relative;
  font-family: var(--gzv4-body);
}
blockquote.wp-block-quote.is-style-gz-v4-pullquote::before {
  content: none;
  display: none;
}
blockquote.wp-block-quote.is-style-gz-v4-pullquote p {
  font-family: var(--gzv4-body);
  font-weight: 700;
  font-size: clamp(1.375rem, 2.4vw, 1.9rem);
  line-height: 1.25;
  color: var(--gzv4-dark-blue);
  margin: 0 0 0.5rem;
  text-wrap: pretty;
}
/* The theme absolutely-positions cite (`bottom:-1rem; background:#fff`) at a
   higher specificity, which floats it out of flow. !important on the layout
   props is the reliable way to pull it back inline. */
blockquote.wp-block-quote.is-style-gz-v4-pullquote cite {
  position: static !important;
  bottom: auto !important;
  background: none !important;
  padding: 0 !important;
  display: block;
  margin-top: 0.5rem;
  font-family: var(--gzv4-body) !important;
  font-style: normal;
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gzv4-stone-soft) !important;
}
.is-style-gz-v4-section-dark blockquote.wp-block-quote.is-style-gz-v4-pullquote p {
  color: var(--gzv4-sand-light);
}

/* ============== Callout / note ============== */
.is-style-gz-v4-callout {
  box-sizing: border-box;
  max-width: 100%;
  background: var(--gzv4-sand);
  border-left: 4px solid var(--gzv4-orange);
  border-radius: 10px;
  padding: 1.25rem 1.5rem;
  color: var(--gzv4-stone);
}
.is-style-gz-v4-callout > :first-child { margin-top: 0; }
.is-style-gz-v4-callout > :last-child  { margin-bottom: 0; }
.is-style-gz-v4-callout h1,
.is-style-gz-v4-callout h2,
.is-style-gz-v4-callout h3,
.is-style-gz-v4-callout h4 {
  font-family: var(--gzv4-display);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--gzv4-dark-blue);
  margin: 0 0 0.4rem;
}

/* ============== Card ============== */
.is-style-gz-v4-card {
  box-sizing: border-box;
  max-width: 100%;
  background: var(--gzv4-white);
  border: 1px solid var(--gzv4-line);
  border-radius: 14px;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  box-shadow: 0 10px 30px rgba(20, 25, 28, 0.06);
}

/* ============== Section bands ============== */
/* border-box + max-width:100% so the horizontal padding stays INSIDE the
   container width — without it the padding overflows the viewport on narrow
   screens and clips the content on the right. */
.is-style-gz-v4-section-dark,
.is-style-gz-v4-section-sand {
  box-sizing: border-box;
  max-width: 100%;
  padding: clamp(2.5rem, 6vw, 5rem) clamp(1.25rem, 5vw, 4rem);
}
/* Tighter band around a stat strip so the sand frame hugs the numbers. */
.gz-v4-statband {
  padding-top: clamp(1.75rem, 4vw, 2.75rem);
  padding-bottom: clamp(1.75rem, 4vw, 2.75rem);
}
.is-style-gz-v4-section-sand {
  background: var(--gzv4-sand);
  color: var(--gzv4-stone);
}
.is-style-gz-v4-section-dark {
  background: var(--gzv4-dark-blue);
  color: var(--gzv4-sand-light);
}

/* On dark bands, pull the type + links to light so contrast holds */
.is-style-gz-v4-section-dark .is-style-gz-v4-display,
.is-style-gz-v4-section-dark h1,
.is-style-gz-v4-section-dark h2,
.is-style-gz-v4-section-dark h3,
.is-style-gz-v4-section-dark h4 {
  color: var(--gzv4-sand-light);
}
.is-style-gz-v4-section-dark p,
.is-style-gz-v4-section-dark .is-style-gz-v4-lede {
  color: rgba(250, 246, 240, 0.88);
}
.is-style-gz-v4-section-dark a:not(.wp-block-button__link) {
  color: var(--gzv4-aqua);
}
/* Outline buttons need light treatment on the dark band */
.is-style-gz-v4-section-dark .is-style-gz-v4-outline .wp-block-button__link {
  color: var(--gzv4-sand-light);
  border-color: rgba(250, 246, 240, 0.5);
}
.is-style-gz-v4-section-dark .is-style-gz-v4-outline .wp-block-button__link:hover,
.is-style-gz-v4-section-dark .is-style-gz-v4-outline .wp-block-button__link:focus-visible {
  background: var(--gzv4-sand-light);
  color: var(--gzv4-blue-deep);
  border-color: var(--gzv4-sand-light);
}

/* ============== Stat strip ============== */
.is-style-gz-v4-stats {
  border-top: 1px solid var(--gzv4-line);
  border-bottom: 1px solid var(--gzv4-line);
  gap: 0 !important;
}
.is-style-gz-v4-stats .wp-block-column {
  padding: 1.25rem 1.5rem;
}
.is-style-gz-v4-stats .wp-block-column + .wp-block-column {
  border-left: 1px solid var(--gzv4-line);
}
.gz-v4-stat__label {
  font-family: var(--gzv4-body);
  font-weight: 700;
  font-size: 0.8125rem;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gzv4-stone-soft);
  margin: 0 0 0.4rem;
}
.gz-v4-stat__value {
  font-family: var(--gzv4-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2.6rem);
  line-height: 1.05;
  color: var(--gzv4-dark-blue);
  margin: 0;
  /* Keep multi-word values whole in narrow columns instead of snapping
     mid-word (theme content inherits an aggressive word-break otherwise). */
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}
/* Dark-band stats: lighten the divider + value */
.is-style-gz-v4-section-dark .is-style-gz-v4-stats,
.is-style-gz-v4-section-dark .is-style-gz-v4-stats .wp-block-column + .wp-block-column {
  border-color: rgba(250, 246, 240, 0.18);
}
.is-style-gz-v4-section-dark .gz-v4-stat__value { color: var(--gzv4-sand-light); }
.is-style-gz-v4-section-dark .gz-v4-stat__label { color: rgba(250, 246, 240, 0.7); }

/* Stack the strip on small screens: stRow → column, side borders → top */
@media (max-width: 781px) {
  .is-style-gz-v4-stats .wp-block-column + .wp-block-column {
    border-left: none;
    border-top: 1px solid var(--gzv4-line);
  }
  .is-style-gz-v4-section-dark .is-style-gz-v4-stats .wp-block-column + .wp-block-column {
    border-top-color: rgba(250, 246, 240, 0.18);
  }
}

/* ============== Native-block inner width ============== */
/* Full-bleed v4 bands (native blocks) center their content to a readable
   column. Pattern versions use core's constrained layout; native blocks use
   this wrapper. */
.gz-v4-inner {
  max-width: 1100px;
  margin-inline: auto;
}
.gz-v4-cta .gz-v4-inner {
  max-width: 760px;
}

/* ============== Pattern helpers (hero / cta) ============== */
.gz-v4-hero .is-style-gz-v4-display { margin-bottom: 1.25rem; }

.gz-v4-cta { text-align: center; }
.gz-v4-cta .is-style-gz-v4-lede { margin-inline: auto; }
.gz-v4-cta .wp-block-buttons {
  justify-content: center;
  margin-top: 1.75rem;
}

/* ============== Section header (block) ============== */
.gz-v4-section-header { margin: 2rem 0; }
.gz-v4-section-header--center { text-align: center; }
.gz-v4-section-header--center .is-style-gz-v4-lede { margin-inline: auto; }
.gz-v4-section-header > :last-child { margin-bottom: 0; }

/* ============== Media + Text (block) ============== */
.gz-v4-media-text {
  /* auto-fit + minmax makes the split collapse to one column based on the
     block's OWN width (e.g. inside a narrow post column with a sidebar),
     not the viewport — no cramped 2-up in tight columns. */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  margin: 2rem 0;
}
.gz-v4-media-text--reverse .gz-v4-media-text__media { order: 2; }
.gz-v4-media-text__media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
}
.gz-v4-media-text__body > :first-child { margin-top: 0; }
.gz-v4-media-text__body > :last-child { margin-bottom: 0; }

/* ============== Numbered steps (block) ============== */
.gz-v4-steps {
  list-style: none;
  margin: 2rem 0;
  padding: 0;
}
.gz-v4-step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.25rem;
  padding: 1.5rem 0;
  border-top: 1px solid var(--gzv4-line);
}
.gz-v4-step:last-child { border-bottom: 1px solid var(--gzv4-line); }
.gz-v4-step__index {
  font-family: var(--gzv4-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  line-height: 1;
  color: var(--gzv4-orange);
}
.gz-v4-step__body > :first-child { margin-top: 0; }
.gz-v4-step__body > :last-child { margin-bottom: 0; }
.gz-v4-step__body h3 {
  font-family: var(--gzv4-display);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--gzv4-dark-blue);
  margin: 0 0 0.4rem;
}

/* ============== FAQ / accordion (block) ============== */
.gz-v4-faq { margin: 2rem 0; }
.gz-v4-faq__item { border-top: 1px solid var(--gzv4-line); }
.gz-v4-faq__item:last-child { border-bottom: 1px solid var(--gzv4-line); }
.gz-v4-faq__q {
  cursor: pointer;
  list-style: none;
  padding: 1.1rem 2.5rem 1.1rem 0;
  position: relative;
  font-family: var(--gzv4-display);
  font-weight: 700;
  font-size: clamp(1.125rem, 1.8vw, 1.4rem);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--gzv4-dark-blue);
}
.gz-v4-faq__q::-webkit-details-marker { display: none; }
.gz-v4-faq__q::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--gzv4-orange);
}
.gz-v4-faq__item[open] .gz-v4-faq__q::after { content: "\2013"; }
.gz-v4-faq__a { padding: 0 0 1.25rem; color: var(--gzv4-stone); }
.gz-v4-faq__a > :first-child { margin-top: 0; }
.gz-v4-faq__a > :last-child { margin-bottom: 0; }
/* Editor: items aren't collapsed, so drop the +/- affordance there */
.gz-v4-faq--editor .gz-v4-faq__q { cursor: text; }
.gz-v4-faq--editor .gz-v4-faq__q::after { display: none; }

/* ============== Feature / icon cards (block) ============== */
.gz-v4-features {
  display: grid;
  /* Cap track width so a few cards don't balloon to fill; center the row. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 360px));
  justify-content: center;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  margin: 2rem 0;
}
.gz-v4-feature {
  display: flex;
  flex-direction: column;
  background: var(--gzv4-white);
  border: 1px solid var(--gzv4-line);
  border-radius: 14px;
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  box-shadow: 0 10px 30px rgba(20, 25, 28, 0.06);
}
.gz-v4-feature__link {
  margin-top: auto;
  padding-top: 0.85rem;
  align-self: flex-start;
  font-family: var(--gzv4-body);
  font-weight: 800;
  font-size: 0.875rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--gzv4-orange);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.gz-v4-feature__link:hover,
.gz-v4-feature__link:focus-visible { color: var(--gzv4-dark-blue); }
.gz-v4-feature__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(235, 107, 64, 0.12);
  margin-bottom: 1rem;
  overflow: hidden;
}
.gz-v4-feature__icon img { width: 26px; height: 26px; object-fit: contain; }
.gz-v4-feature h3 {
  font-family: var(--gzv4-display);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--gzv4-dark-blue);
  margin: 0 0 0.4rem;
}
.gz-v4-feature__body > :first-child { margin-top: 0; }
.gz-v4-feature__body > :last-child { margin-bottom: 0; }

/* ============== Info / spec box (block) ============== */
.gz-v4-specs {
  margin: 2rem 0;
  border: 1px solid var(--gzv4-line);
  border-radius: 14px;
  overflow: hidden;
  background: var(--gzv4-white);
}
.gz-v4-spec {
  display: grid;
  grid-template-columns: minmax(8rem, 34%) 1fr;
  gap: 1rem;
  padding: 0.9rem 1.25rem;
  border-top: 1px solid var(--gzv4-line);
}
.gz-v4-spec:first-child { border-top: 0; }
/* Editor: make room for the per-row remove control. */
.gz-v4-specs--editor .gz-v4-spec { grid-template-columns: minmax(6rem, 28%) 1fr auto; }
.gz-v4-spec__label {
  font-family: var(--gzv4-body);
  font-weight: 800;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gzv4-stone-soft);
  margin: 0;
  align-self: center;
}
.gz-v4-spec__value {
  font-family: var(--gzv4-body);
  color: var(--gzv4-stone);
  margin: 0;
  align-self: center;
}

/* ============== Card grid (block) ============== */
.gz-v4-cards {
  display: grid;
  /* Cap track width so a few cards don't balloon to fill; center the row. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 380px));
  justify-content: center;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  margin: 2rem 0;
}
.gz-v4-card-item {
  display: flex;
  flex-direction: column;
  background: var(--gzv4-white);
  border: 1px solid var(--gzv4-line);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(20, 25, 28, 0.06);
}
.gz-v4-card-item__img {
  position: relative;
  aspect-ratio: var(--gzv4-media-ratio, 4 / 3);
  overflow: hidden;
  background: var(--gzv4-media-backdrop, var(--gzv4-sand));
}
/* Absolutely fill the box — a percentage height won't reliably resolve against
   an aspect-ratio-derived height inside a flex column, which left a sand gap. */
.gz-v4-card-item__img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: var(--gzv4-media-fit, cover);
  object-position: var(--gzv4-media-position, 50% 50%);
  display: block;
  margin: 0;
}
/* The theme adds a top margin to content images; reset it inside v4 image
   wrappers so it can't offset our boxes (left a sand gap on the cards). */
.gz-v4-media-text__media img,
.gz-v4-feature__icon img,
.gz-v4-slide__media img,
.gz-v4-testimonial__avatar { margin: 0; }
.gz-v4-card-item__body {
  padding: 1.25rem 1.375rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}
.gz-v4-card-item__title {
  font-family: var(--gzv4-display);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  font-size: clamp(1.125rem, 1.8vw, 1.375rem);
  color: var(--gzv4-dark-blue);
  margin: 0;
}
.gz-v4-card-item__text { margin: 0; color: var(--gzv4-stone); }
.gz-v4-card-item__link {
  margin-top: auto;
  padding-top: 0.35rem;
  font-family: var(--gzv4-body);
  font-weight: 800;
  font-size: 0.875rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--gzv4-orange);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.gz-v4-card-item__link:hover,
.gz-v4-card-item__link:focus-visible { color: var(--gzv4-dark-blue); }

/* ============== Hero background photo ============== */
.gz-v4-hero--bg {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ============== Testimonial (block) ============== */
.gz-v4-testimonial {
  margin: 2rem 0;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  background: var(--gzv4-sand);
  border-radius: 16px;
}
.gz-v4-testimonial__quote {
  font-family: var(--gzv4-body);
  font-weight: 700;
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  line-height: 1.35;
  color: var(--gzv4-dark-blue);
  margin: 0 0 1.25rem;
  text-wrap: pretty;
}
.gz-v4-testimonial__person { display: flex; align-items: center; gap: 0.9rem; }
.gz-v4-testimonial__avatar {
  width: 52px; height: 52px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.gz-v4-testimonial__name {
  font-family: var(--gzv4-body);
  font-weight: 800;
  color: var(--gzv4-dark-blue);
  margin: 0;
  line-height: 1.2;
}
.gz-v4-testimonial__role {
  font-family: var(--gzv4-body);
  font-size: 0.875rem;
  color: var(--gzv4-stone-soft);
  margin: 0;
}

/* ============== Image banner (block) ============== */
.gz-v4-banner {
  position: relative;
  margin: 2rem 0;
  min-height: clamp(220px, 40vh, 460px);
  display: flex;
  align-items: flex-end;
  border-radius: 16px;
  overflow: hidden;
  background: var(--gzv4-dark-blue) center / cover no-repeat;
  color: var(--gzv4-sand-light);
}
.gz-v4-banner.alignfull { border-radius: 0; }
.gz-v4-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(20,25,28,0.72) 0%, rgba(20,25,28,0.15) 55%, transparent 100%);
  pointer-events: none;
}
.gz-v4-banner__content {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: 100%;
  max-width: 66rem;      /* centered content column, like the other bands' inner */
  margin-inline: auto;
  padding: clamp(1.5rem, 4vw, 3rem);
}
.gz-v4-banner__content > :first-child { margin-top: 0; }
.gz-v4-banner__content > :last-child { margin-bottom: 0; }
.gz-v4-banner__content .is-style-gz-v4-display { color: var(--gzv4-sand-light); }
.gz-v4-banner__content .is-style-gz-v4-eyebrow { color: var(--gzv4-orange); }
.gz-v4-banner__content .is-style-gz-v4-lede { color: rgba(250, 246, 240, 0.9); }

/* ============== Icon checklist (block) ============== */
.gz-v4-checklist {
  list-style: none;
  margin: 2rem 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}
.gz-v4-checklist__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  align-items: start;
}
.gz-v4-checklist__mark {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  margin-top: 0.05rem;
  border-radius: 50%;
  background: rgba(66, 181, 191, 0.15);
  color: var(--gzv4-aqua);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.gz-v4-checklist__text { margin: 0; color: var(--gzv4-stone); }
.gz-v4-checklist__text > :first-child { margin-top: 0; }
.gz-v4-checklist__text > :last-child { margin-bottom: 0; }
/* Editor: room for the per-row remove control. */
.gz-v4-checklist-editor .gz-v4-checklist__item { grid-template-columns: auto 1fr auto; align-items: center; }

/* ============== Information slider (block) ============== */
/* Cap the overall width + center, so a full-width context doesn't blow the
   slider up to an oversized single slide. container-type lets the slide layout
   respond to the SLIDER's own width (not the viewport). */
.gz-v4-slider { margin: 2rem auto; max-width: 70rem; }
.gz-v4-slider__viewport { overflow: hidden; border-radius: 16px; container-type: inline-size; }
.gz-v4-slider__track {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.gz-v4-slider__track::-webkit-scrollbar { display: none; }
.gz-v4-slider__slide {
  flex: 0 0 100%;
  min-width: 0;
  scroll-snap-align: start;
  background: var(--gzv4-sand);
  display: grid;
}
.gz-v4-slide__media {
  aspect-ratio: var(--gzv4-media-ratio, 16 / 9);
  overflow: hidden;
  background: var(--gzv4-media-backdrop, var(--gzv4-dark-blue));
}
.gz-v4-slide__media img {
  width: 100%;
  height: 100%;
  object-fit: var(--gzv4-media-fit, cover);
  object-position: var(--gzv4-media-position, 50% 50%);
  display: block;
}
.gz-v4-slide__body { padding: clamp(1.5rem, 3vw, 2.5rem); align-self: center; }
/* Wide slider: put image beside the text (shorter, less oversized). Driven by
   the slider's own width via the container query above, not the viewport. */
@container (min-width: 620px) {
  .gz-v4-slider__slide:has(.gz-v4-slide__media) { grid-template-columns: 1.05fr 1fr; }
  /* The media box keeps the ratio the author chose at every width. Only
     'Original proportions' lets it grow to match the text column, which is
     what the block did unconditionally before the ratio control existed.
     The custom property is set on the block wrapper, so match it there. */
  .gz-v4-slider[style*="--gzv4-media-ratio:auto"] .gz-v4-slide__media {
    height: 100%;
    min-height: 320px;
  }
}
.gz-v4-slide__body > :first-child { margin-top: 0; }
.gz-v4-slide__heading {
  font-family: var(--gzv4-display);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  font-size: clamp(1.375rem, 2.4vw, 2rem);
  color: var(--gzv4-dark-blue);
  margin: 0 0 0.5rem;
}
.gz-v4-slide__text { color: var(--gzv4-stone); }
.gz-v4-slide__text > :first-child { margin-top: 0; }
.gz-v4-slide__text > :last-child { margin-bottom: 0; }
.gz-v4-slide__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1rem;
  font-family: var(--gzv4-body);
  font-weight: 800;
  font-size: 0.875rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--gzv4-orange);
  text-decoration: none;
}
.gz-v4-slide__link:hover,
.gz-v4-slide__link:focus-visible { color: var(--gzv4-dark-blue); }

/* Controls — hidden until JS adds .is-ready (scroll-snap works without JS). */
.gz-v4-slider__controls {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1rem;
}
.gz-v4-slider.is-ready .gz-v4-slider__controls { display: flex; }
.gz-v4-slider__arrow {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid var(--gzv4-dark-blue);
  background: transparent;
  color: var(--gzv4-dark-blue);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    background-color 0.2s var(--gzv4-ease),
    color 0.2s var(--gzv4-ease),
    opacity 0.2s var(--gzv4-ease);
}
.gz-v4-slider__arrow:hover:not(:disabled),
.gz-v4-slider__arrow:focus-visible { background: var(--gzv4-dark-blue); color: var(--gzv4-sand-light); }
.gz-v4-slider__arrow:disabled { opacity: 0.35; cursor: default; }
.gz-v4-slider__dots { display: flex; gap: 0.5rem; }
.gz-v4-slider__dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--gzv4-line);
  cursor: pointer;
  transition: background-color 0.2s var(--gzv4-ease), transform 0.2s var(--gzv4-ease);
}
.gz-v4-slider__dot[aria-current="true"] { background: var(--gzv4-orange); transform: scale(1.25); }
@media (prefers-reduced-motion: reduce) {
  .gz-v4-slider__track { scroll-behavior: auto; }
}

/* Editor: slides shown stacked + labelled instead of a live slider. */
.gz-v4-slider-editor__slide {
  border: 1px solid var(--gzv4-line);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 1rem;
  background: var(--gzv4-white);
}
.gz-v4-slider-editor__num {
  font: 700 12px/1 var(--gzv4-body);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gzv4-stone-soft);
  padding: 0.85rem 1rem 0;
}

/* ============== Timeline (block) ============== */
.gz-v4-timeline { margin: 2rem 0; padding: 0; list-style: none; }
.gz-v4-timeline__item {
  position: relative;
  padding: 0 0 1.75rem 1.75rem;
  border-left: 2px solid var(--gzv4-line);
}
.gz-v4-timeline__item:last-child { padding-bottom: 0; border-left-color: transparent; }
.gz-v4-timeline__item::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 0.3rem;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--gzv4-orange);
  box-shadow: 0 0 0 4px var(--gzv4-white);
}
.gz-v4-timeline__label {
  font-family: var(--gzv4-body);
  font-weight: 800;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gzv4-orange);
  margin: 0 0 0.2rem;
}
.gz-v4-timeline__heading {
  font-family: var(--gzv4-display);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--gzv4-dark-blue);
  margin: 0 0 0.35rem;
}
.gz-v4-timeline__body > :first-child { margin-top: 0; }
.gz-v4-timeline__body > :last-child { margin-bottom: 0; }

/* ============== Highlighted Posts / "Recommended Reads" ============== */
/* The posts-highlight block now renders a .gz-v4-cards grid (reusing the Card
   Grid styling), so it reflows from a narrow column to full width. Only the
   section wrapper + title need their own rules here. */
/* ============== Recent Posts carousel (recent-posts block) ============== */
/* V4 restyle of the legacy `.greater-zion-recent-posts` carousel. Reuses the
   .gz-v4-card-item look; the jQuery front.js still drives scrolling (its hooks
   .posts-box/.scroll-button/.dot are preserved). Selectors are prefixed with
   .gz-v4-recent so they beat the older compiled Bootstrap rules (same element,
   later stylesheet). */
.gz-v4-recent {
  max-width: 78rem;              /* match the page's content columns */
  margin: 2.5rem auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
  box-sizing: border-box;
}
.gz-v4-recent .title-box {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  width: auto;
  max-width: none;
  margin: 0 0 1.5rem;
  padding: 0;
}
.gz-v4-recent .title-box .gz-v4-recent__title {
  font-family: var(--gzv4-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.012em;
  line-height: 0.95;
  font-size: clamp(1.75rem, 4vw, 3rem);
  color: var(--gzv4-dark-blue);
  max-width: none;
  /* beat the theme's auto side-margins on nested headings (was centering it) */
  margin: 0 !important;
}
.gz-v4-recent__nav { display: flex; align-items: center; gap: 0.85rem; flex-shrink: 0; }
.gz-v4-recent__dots { display: flex; gap: 0.5rem; align-items: center; }
.gz-v4-recent__dots .dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--gzv4-line);
  transition: background-color 0.2s var(--gzv4-ease), transform 0.2s var(--gzv4-ease);
}
.gz-v4-recent__dots .dot.active { background: var(--gzv4-orange); transform: scale(1.25); }
.gz-v4-recent__arrows { display: flex; gap: 0.5rem; }
.gz-v4-recent .scroll-button {
  width: 44px; height: 44px;
  border: 2px solid var(--gzv4-dark-blue);
  border-radius: 50%;
  background: transparent;
  color: var(--gzv4-dark-blue);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0;
  transition:
    background-color 0.2s var(--gzv4-ease),
    color 0.2s var(--gzv4-ease),
    opacity 0.2s var(--gzv4-ease);
}
.gz-v4-recent .scroll-button svg { width: 18px; height: 18px; }
.gz-v4-recent .scroll-button:hover:not(:disabled),
.gz-v4-recent .scroll-button:focus-visible { background: var(--gzv4-dark-blue); color: var(--gzv4-sand-light); }
.gz-v4-recent .scroll-button:disabled { opacity: 0.35; cursor: default; }
.gz-v4-recent .posts-box {
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 6px 0;
  /* NOTE: do NOT set scroll-behavior:smooth — jQuery front.js animates
     scrollLeft, and CSS smooth scrolling fights it (broke the arrows). */
}
.gz-v4-recent .posts-box::-webkit-scrollbar { display: none; }
.gz-v4-recent .posts-box .post {
  flex: 0 0 clamp(260px, 76vw, 330px);
  box-sizing: border-box;
  margin-right: 20px;
  padding: 0;
}
.gz-v4-recent .posts-box .post:first-child { padding-left: 0; }
.gz-v4-recent .posts-box .post:last-child { margin-right: 0; }
.gz-v4-recent .gz-v4-card-item {
  height: 100%;
  color: inherit;
  /* beat the theme's content-link underline */
  text-decoration: none !important;
}
.gz-v4-recent__slide a:hover .gz-v4-card-item__link,
.gz-v4-recent__slide a:focus-visible .gz-v4-card-item__link { color: var(--gzv4-dark-blue); }
@media (max-width: 600px) {
  .gz-v4-recent .title-box { flex-direction: column; align-items: flex-start; gap: 0.85rem; }
}

/* ============== Highlighted Posts / "Recommended Reads" ============== */
.gz-v4-highlight { margin: 2.5rem 0; }
.gz-v4-highlight__title {
  font-family: var(--gzv4-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.012em;
  line-height: 0.95;
  font-size: clamp(1.75rem, 4vw, 3rem);
  color: var(--gzv4-dark-blue);
  margin: 0 0 1.5rem;
}

/* ============================================================
   FULL-WIDTH BEHAVIOUR — readable-column caps
   ------------------------------------------------------------
   On a full-bleed / full-width layout the content blocks would
   otherwise stretch edge to edge (over-long text lines, oversized
   headings). Cap them to comfortable centered widths. No effect
   inside a normal, already-narrow content column (the cap is wider
   than the column). Full-bleed BANDS (hero/cta/stats/banner) are
   intentionally NOT capped — they bleed and constrain their own
   inner (.gz-v4-inner) instead.
   ============================================================ */
.gz-v4-section-header,
.is-style-gz-v4-callout,
blockquote.wp-block-quote.is-style-gz-v4-pullquote,
.gz-v4-testimonial,
.gz-v4-steps,
.gz-v4-faq,
.gz-v4-timeline,
.gz-v4-checklist,
.gz-v4-specs {
  max-width: 50rem;
  margin-inline: auto;
}
.gz-v4-media-text { max-width: 68rem; margin-inline: auto; }
.gz-v4-features,
.gz-v4-cards,
.gz-v4-highlight { max-width: 78rem; margin-inline: auto; }

/* ============================================================
   Editor chrome for the v4 repeater blocks.
   Only rendered inside the block editor; the front end never
   sees these classes.
   ============================================================ */

.gz-v4-slider-editor__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}

.gz-v4-row-controls {
  display: flex;
  align-items: center;
  gap: 0.125rem;
}

/* Keep the destructive action visually separated from the reorder pair so it
   is not fired by accident while stepping an item through a list. */
.gz-v4-row-controls .is-destructive {
  margin-left: 0.5rem;
}

.gz-v4-slide__media-clear {
  display: block;
  margin: 0.25rem auto 0.5rem;
}

/* ============================================================
   Shared media box.
   Any v4 block that shows author-supplied imagery sizes it
   through these two custom properties, so "uniform footprint,
   image not cropped" is one setting rather than per-block CSS.
   ============================================================ */

.gz-v4-mediabox {
  aspect-ratio: var(--gzv4-media-ratio, 16 / 9);
  overflow: hidden;
  background: var(--gzv4-media-backdrop, var(--gzv4-sand));
}

.gz-v4-mediabox img {
  width: 100%;
  height: 100%;
  object-fit: var(--gzv4-media-fit, cover);
  object-position: var(--gzv4-media-position, 50% 50%);
  display: block;
}

/* When the whole image is shown rather than cropped, the leftover space reads
   as intentional matting instead of a gap. */
.gz-v4-mediabox:has(img[style*="contain"]),
[style*="--gzv4-media-fit:contain"] .gz-v4-mediabox {
  background: var(--gzv4-media-backdrop, var(--gzv4-sand-light));
}

/* Optional feature-card image. Distinct from the small circular icon slot, so
   existing cards that use an icon are untouched. */
.gz-v4-feature__media {
  margin: -1px -1px 1rem;
  border-radius: inherit;
  border-end-start-radius: 0;
  border-end-end-radius: 0;
}

.gz-v4-feature__tools {
  display: flex;
  gap: 0.25rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

/* ============================================================
   V4 Buttons
   Same pill shape and motion as the is-style-gz-v4-* styles on
   core buttons, so a v4 Buttons block and a styled core button
   sitting next to each other look like one family.
   ============================================================ */

.gz-v4-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  align-items: center;
}
.gz-v4-buttons.is-aligned-center { justify-content: center; }
.gz-v4-buttons.is-aligned-right { justify-content: flex-end; }

.gz-v4-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--gzv4-body);
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: 0.03em;
  line-height: 1.2;
  border-radius: 999px;
  padding: 0.9em 1.75em;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition:
    transform 0.2s var(--gzv4-ease),
    background-color 0.2s var(--gzv4-ease),
    color 0.2s var(--gzv4-ease),
    box-shadow 0.2s var(--gzv4-ease);
}

.gz-v4-btn.is-solid {
  background: var(--gzv4-orange);
  color: #15191C;
  box-shadow: 0 8px 22px rgba(235, 107, 64, 0.26);
}
.gz-v4-btn.is-solid:hover,
.gz-v4-btn.is-solid:focus-visible {
  background: var(--gzv4-sand-light);
  color: var(--gzv4-blue-deep);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(20, 25, 28, 0.28);
}

.gz-v4-btn.is-outline {
  background: transparent;
  color: var(--gzv4-dark-blue);
  border-color: var(--gzv4-dark-blue);
}
.gz-v4-btn.is-outline:hover,
.gz-v4-btn.is-outline:focus-visible {
  background: var(--gzv4-dark-blue);
  color: var(--gzv4-sand-light);
  transform: translateY(-2px);
}

/* Quiet reads as a link with intent rather than a third button weight, which
   keeps a row of three actions from looking like three equal choices. */
.gz-v4-btn.is-quiet {
  padding: 0.4em 0;
  border-radius: 0;
  background: none;
  color: var(--gzv4-orange);
  text-transform: uppercase;
  font-size: 0.9375rem;
  letter-spacing: 0.08em;
  border-bottom: 2px solid transparent;
}
.gz-v4-btn.is-quiet::after {
  content: "↗";
  font-size: 0.9em;
  transition: transform 0.2s var(--gzv4-ease);
}
.gz-v4-btn.is-quiet:hover,
.gz-v4-btn.is-quiet:focus-visible {
  border-bottom-color: currentColor;
}
.gz-v4-btn.is-quiet:hover::after,
.gz-v4-btn.is-quiet:focus-visible::after {
  transform: translate(2px, -2px);
}

.is-style-gz-v4-section-dark .gz-v4-btn.is-outline {
  color: var(--gzv4-sand-light);
  border-color: var(--gzv4-sand-light);
}
.is-style-gz-v4-section-dark .gz-v4-btn.is-outline:hover,
.is-style-gz-v4-section-dark .gz-v4-btn.is-outline:focus-visible {
  background: var(--gzv4-sand-light);
  color: var(--gzv4-blue-deep);
}

@media (max-width: 480px) {
  .gz-v4-buttons.is-stacked-mobile { flex-direction: column; align-items: stretch; }
  .gz-v4-buttons.is-stacked-mobile .gz-v4-btn { justify-content: center; }
  .gz-v4-buttons.is-stacked-mobile .gz-v4-btn.is-quiet { justify-content: flex-start; }
}

/* ============================================================
   V4 Box
   ============================================================ */

.gz-v4-box {
  border-radius: 14px;
  container-type: inline-size;
}
.gz-v4-box.is-room-sm { padding: clamp(1rem, 2vw, 1.5rem); }
.gz-v4-box.is-room-md { padding: clamp(1.5rem, 3vw, 2.5rem); }
.gz-v4-box.is-room-lg { padding: clamp(2rem, 5vw, 4rem); }

.gz-v4-box.is-tone-sand { background: var(--gzv4-sand); }
.gz-v4-box.is-tone-white { background: var(--gzv4-white); border: 1px solid var(--gzv4-line); }
.gz-v4-box.is-tone-dark { background: var(--gzv4-dark-blue); color: var(--gzv4-sand-light); }
.gz-v4-box.is-tone-outline { background: transparent; border: 2px solid var(--gzv4-line); }

.gz-v4-box.is-measure-narrow { max-width: 44rem; margin-inline: auto; }
.gz-v4-box.is-measure-default { max-width: 68rem; margin-inline: auto; }

.gz-v4-box > :first-child { margin-top: 0; }
.gz-v4-box > :last-child { margin-bottom: 0; }

/* ============================================================
   V4 Paragraph
   ============================================================ */

.gz-v4-prose { margin-inline: 0; }
.gz-v4-prose.is-aligned-center { text-align: center; margin-inline: auto; }

.gz-v4-prose__body {
  font-family: var(--gzv4-body);
  color: var(--gzv4-stone);
  text-wrap: pretty;
}
.gz-v4-prose__body > :first-child { margin-top: 0; }
.gz-v4-prose__body > :last-child { margin-bottom: 0; }

.gz-v4-prose.is-size-lede .gz-v4-prose__body {
  font-size: clamp(1.0625rem, 1.5vw, 1.35rem);
  line-height: 1.6;
}
.gz-v4-prose.is-size-body .gz-v4-prose__body {
  font-size: 1rem;
  line-height: 1.7;
}
.gz-v4-prose.is-size-small .gz-v4-prose__body {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--gzv4-stone-soft);
}

/* Reading measure. Capped in ch so it tracks the font rather than the viewport. */
.gz-v4-prose.is-measure-narrow .gz-v4-prose__body { max-width: 52ch; }
.gz-v4-prose.is-measure-default .gz-v4-prose__body { max-width: 70ch; }
.gz-v4-prose.is-aligned-center .gz-v4-prose__body { margin-inline: auto; }

/* Utility used by the buttons block for new-tab announcements. */
.gz-v4-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Editor affordance for the buttons block. */
.gz-v4-buttons__add { align-self: center; }

/* ============================================================
   V4 Logo Strip
   Uniform height box + contain is what makes a wide wordmark and
   a square badge read as equally important.
   ============================================================ */

.gz-v4-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
}
.gz-v4-logos.is-aligned-center { justify-content: center; }
.gz-v4-logos.is-aligned-between { justify-content: space-between; }

.gz-v4-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.gz-v4-logo img {
  width: auto;
  max-width: 14rem;
  height: var(--gzv4-logo-height, 3rem);
  object-fit: contain;
  display: block;
  margin: 0;
}
.gz-v4-logos.is-height-sm { --gzv4-logo-height: 2.25rem; }
.gz-v4-logos.is-height-md { --gzv4-logo-height: 3rem; }
.gz-v4-logos.is-height-lg { --gzv4-logo-height: 4.25rem; }

.gz-v4-logos.is-grayscale .gz-v4-logo img {
  filter: grayscale(1);
  opacity: 0.72;
  transition: filter 0.25s var(--gzv4-ease), opacity 0.25s var(--gzv4-ease);
}
.gz-v4-logos.is-grayscale .gz-v4-logo:hover img,
.gz-v4-logos.is-grayscale a.gz-v4-logo:focus-visible img {
  filter: grayscale(0);
  opacity: 1;
}

/* ============================================================
   V4 Gallery
   ============================================================ */

.gz-v4-gallery {
  display: grid;
  grid-template-columns: repeat(var(--gzv4-gallery-columns, 3), minmax(0, 1fr));
  gap: clamp(0.75rem, 2vw, 1.5rem);
}
.gz-v4-gallery__item { margin: 0; }
.gz-v4-gallery__item .gz-v4-mediabox { border-radius: 10px; }
.gz-v4-gallery__caption {
  font-family: var(--gzv4-body);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--gzv4-stone-soft);
  margin-top: 0.5rem;
  text-wrap: pretty;
}
@media (max-width: 900px) {
  .gz-v4-gallery { grid-template-columns: repeat(min(var(--gzv4-gallery-columns, 3), 3), minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .gz-v4-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============================================================
   V4 Video
   ============================================================ */

.gz-v4-video { margin: 0; }
.gz-v4-video__frame {
  aspect-ratio: var(--gzv4-media-ratio, 16 / 9);
  overflow: hidden;
  border-radius: 12px;
  background: var(--gzv4-blue-deep);
}
.gz-v4-video__frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  margin: 0;
}
.gz-v4-video__caption {
  font-family: var(--gzv4-body);
  font-size: 0.9375rem;
  color: var(--gzv4-stone-soft);
  margin-top: 0.625rem;
  max-width: 60ch;
  text-wrap: pretty;
}

/* Ambient video is decoration. If someone has asked the system for less
   motion, stop it rather than merely slowing it. */
@media (prefers-reduced-motion: reduce) {
  .gz-v4-video.is-mode-ambient video {
    animation-play-state: paused;
  }
}

/* ============================================================
   V4 Notice
   Tone is carried by a tint, a full border and a visible word.
   Deliberately not a coloured left stripe: that pattern relies on
   colour alone and vanishes the moment the text wraps.
   ============================================================ */

.gz-v4-notice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.75rem 1rem;
  align-items: start;
  padding: clamp(1rem, 2.5vw, 1.5rem) clamp(1.125rem, 3vw, 1.75rem);
  border: 1px solid var(--gzv4-notice-line, var(--gzv4-line));
  border-radius: 12px;
  background: var(--gzv4-notice-bg, var(--gzv4-sand-light));
}

.gz-v4-notice__label {
  font-family: var(--gzv4-body);
  font-weight: 800;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gzv4-notice-ink, var(--gzv4-stone));
  background: var(--gzv4-notice-chip, rgba(54, 75, 84, 0.1));
  border-radius: 999px;
  padding: 0.35em 0.85em;
  margin: 0;
  white-space: nowrap;
}

.gz-v4-notice__heading {
  font-family: var(--gzv4-body);
  font-weight: 800;
  font-size: 1.0625rem;
  color: var(--gzv4-dark-blue);
  margin: 0 0 0.25rem;
}
.gz-v4-notice__text { font-family: var(--gzv4-body); color: var(--gzv4-stone); max-width: 68ch; }
.gz-v4-notice__text > :first-child { margin-top: 0; }
.gz-v4-notice__text > :last-child { margin-bottom: 0; }
.gz-v4-notice__link {
  display: inline-block;
  margin-top: 0.5rem;
  font-weight: 800;
  color: var(--gzv4-notice-ink, var(--gzv4-orange));
}

.gz-v4-notice.is-tone-info {
  --gzv4-notice-bg: var(--gzv4-sand-light);
  --gzv4-notice-line: var(--gzv4-line);
  --gzv4-notice-ink: var(--gzv4-dark-blue);
  --gzv4-notice-chip: rgba(54, 75, 84, 0.1);
}
.gz-v4-notice.is-tone-warning {
  --gzv4-notice-bg: #FDF3EC;
  --gzv4-notice-line: #E9C3AC;
  --gzv4-notice-ink: #94441F;
  --gzv4-notice-chip: rgba(235, 107, 64, 0.18);
}
.gz-v4-notice.is-tone-closure {
  --gzv4-notice-bg: #FBEDEA;
  --gzv4-notice-line: #E3B3A8;
  --gzv4-notice-ink: #8C2F1C;
  --gzv4-notice-chip: rgba(140, 47, 28, 0.14);
}
.gz-v4-notice.is-tone-good {
  --gzv4-notice-bg: #ECF6F6;
  --gzv4-notice-line: #A9D6D9;
  --gzv4-notice-ink: #1C5F65;
  --gzv4-notice-chip: rgba(66, 181, 191, 0.2);
}

@media (max-width: 560px) {
  .gz-v4-notice { grid-template-columns: minmax(0, 1fr); }
  .gz-v4-notice__label { justify-self: start; }
}

/* ============================================================
   V4 Rate Table
   ============================================================ */

.gz-v4-rates { overflow-x: auto; }
.gz-v4-rates__table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--gzv4-body);
}
.gz-v4-rates__caption {
  caption-side: top;
  text-align: left;
  font-weight: 800;
  color: var(--gzv4-dark-blue);
  padding-bottom: 0.625rem;
}
.gz-v4-rates__table thead th {
  font-family: var(--gzv4-display);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 1.0625rem;
  color: var(--gzv4-dark-blue);
  text-align: left;
  padding: 0.75rem 1rem;
  border-bottom: 2px solid var(--gzv4-dark-blue);
}
.gz-v4-rates__table tbody th,
.gz-v4-rates__table tbody td {
  padding: 0.875rem 1rem;
  border-bottom: 1px solid var(--gzv4-line);
  text-align: left;
  vertical-align: top;
  color: var(--gzv4-stone);
}
.gz-v4-rates__table tbody th { font-weight: 800; color: var(--gzv4-dark-blue); }
.gz-v4-rates.is-compact .gz-v4-rates__table tbody th,
.gz-v4-rates.is-compact .gz-v4-rates__table tbody td { padding: 0.5rem 0.75rem; }
.gz-v4-rates__table tbody tr:last-child th,
.gz-v4-rates__table tbody tr:last-child td { border-bottom: none; }

/* Below the point where columns stop fitting, each row becomes its own small
   block and every cell carries its column name, so the data keeps its meaning
   instead of turning into an unlabelled list of numbers. */
@media (max-width: 600px) {
  .gz-v4-rates__table thead { display: none; }
  .gz-v4-rates__table tbody tr {
    display: block;
    border-bottom: 1px solid var(--gzv4-line);
    padding: 0.75rem 0;
  }
  .gz-v4-rates__table tbody th,
  .gz-v4-rates__table tbody td {
    display: grid;
    grid-template-columns: 9rem minmax(0, 1fr);
    gap: 0.75rem;
    border: none;
    padding: 0.25rem 0;
  }
  .gz-v4-rates__table tbody td::before,
  .gz-v4-rates__table tbody th::before {
    content: attr(data-label);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gzv4-stone-soft);
  }
}

/* ============================================================
   V4 Document List
   ============================================================ */

.gz-v4-documents__list { list-style: none; margin: 0; padding: 0; }
.gz-v4-doc + .gz-v4-doc { margin-top: 0.5rem; }
.gz-v4-doc__link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
  padding: 1rem 1.125rem;
  border: 1px solid var(--gzv4-line);
  border-radius: 10px;
  background: var(--gzv4-white);
  text-decoration: none;
  transition: border-color 0.2s var(--gzv4-ease), transform 0.2s var(--gzv4-ease);
}
.gz-v4-doc__link:hover,
.gz-v4-doc__link:focus-visible {
  border-color: var(--gzv4-orange);
  transform: translateY(-1px);
}
.gz-v4-doc__type {
  font-family: var(--gzv4-body);
  font-weight: 800;
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  color: var(--gzv4-white);
  background: var(--gzv4-dark-blue);
  border-radius: 6px;
  padding: 0.5em 0.65em;
  min-width: 3.25rem;
  text-align: center;
}
.gz-v4-doc__main { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; }
.gz-v4-doc__title { font-family: var(--gzv4-body); font-weight: 800; color: var(--gzv4-dark-blue); }
.gz-v4-doc__desc { font-size: 0.9375rem; color: var(--gzv4-stone); }
.gz-v4-doc__meta {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gzv4-stone-soft);
}

/* ============================================================
   V4 Person Card
   ============================================================ */

.gz-v4-person {
  display: grid;
  gap: clamp(1rem, 3vw, 2rem);
  align-items: start;
  padding: clamp(1.25rem, 3vw, 2rem);
  background: var(--gzv4-sand);
  border-radius: 14px;
}
.gz-v4-person.is-layout-row { grid-template-columns: auto minmax(0, 1fr); }
.gz-v4-person.is-layout-stack { grid-template-columns: minmax(0, 1fr); justify-items: start; }

.gz-v4-person__photo {
  width: clamp(5rem, 12vw, 9rem);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  background: var(--gzv4-dark-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.gz-v4-person__photo img { width: 100%; height: 100%; object-fit: cover; margin: 0; display: block; }
.gz-v4-person__initials {
  font-family: var(--gzv4-display);
  font-size: 2.5rem;
  color: var(--gzv4-sand-light);
  line-height: 1;
}
.gz-v4-person__name {
  font-family: var(--gzv4-display);
  text-transform: uppercase;
  font-size: clamp(1.375rem, 2.5vw, 1.875rem);
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--gzv4-dark-blue);
  margin: 0 0 0.25rem;
}
.gz-v4-person__role {
  font-family: var(--gzv4-body);
  font-weight: 800;
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gzv4-orange);
  margin: 0 0 0.75rem;
}
.gz-v4-person__bio { font-family: var(--gzv4-body); color: var(--gzv4-stone); max-width: 60ch; }
.gz-v4-person__bio > :first-child { margin-top: 0; }
.gz-v4-person__bio > :last-child { margin-bottom: 0; }
.gz-v4-person__contact {
  list-style: none;
  margin: 0.875rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  font-family: var(--gzv4-body);
  font-weight: 800;
}