/* MIR DMC — layout glue.
   Everything here is structure the handoff left to the implementer (README §3/§4):
   the header overlaying the hero, the hero slider, and the grid behaviours that
   core blocks don't express. Design tokens still come from theme.json. */

/* ---------- Header overlaying the hero ---------- */
.wp-site-blocks > header.wp-block-template-part {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 5;
}
/* The hero is the first block on every page, so nothing needs top padding. */
.wp-site-blocks { position: relative; }

/* Core spaces every child of .wp-site-blocks with
     :where(.wp-site-blocks) > *           { margin-block-start: var(--wp--style--block-gap) }
     :where(.wp-site-blocks) > :first-child { margin-block-start: 0 }
   The header is that :first-child, so it gets zeroed — but it is absolutely
   positioned above, which takes it out of flow. That makes <main> the first
   in-flow child, so it keeps the block-gap. With no padding or border on
   .wp-site-blocks to stop it, that top margin COLLAPSES THROUGH the parent and
   pushes the whole site container down, leaving a strip of body background
   above the hero.

   The footer has the same problem at the other end: it is neither :first-child
   nor absolutely positioned, so its block-gap shows as a cream stripe between
   the dark closing band and the dark footer.

   .wp-site-blocks has exactly three children here — header, main, footer — and
   the design butts full-bleed bands directly against each other, so neither
   seam wants a gap. */
.wp-site-blocks > header.wp-block-template-part + *,
.wp-site-blocks > footer.wp-block-template-part {
  margin-block-start: 0;
}

.mir-header {
  padding: 26px clamp(24px, 4vw, 64px);
}
.mir-header .mir-logo img {
  height: 58px;
  width: auto;
  display: block;
}

/* Nav buttons in the header are compact versions of the global button style. */
.mir-header .wp-block-button__link {
  font-size: 12px;
  letter-spacing: 0.16em;
  padding: 12px 22px;
  white-space: nowrap;
}

/* Guide CTA toggle — see mir_dmc_show_guide_cta() in functions.php. */
body.mir-hide-guide-cta .mir-guide-cta { display: none; }

/* ---------- Hero slider ---------- */
.mir-hero-slider {
  position: relative;
  min-height: 560px;
  height: 78vh;
  background: var(--wp--preset--color--brown);
  overflow: hidden;
}
/* Every child of the slider is an absolutely-positioned layer meant to fill it:
   the three slides, the scrim, the copy, and the dots. But the slider is a flow
   layout group, so core gives each non-first child

     :root :where(.is-layout-flow) > * { margin-block-start: var(--wp--style--block-gap) }

   An absolutely-positioned box with inset:0 and auto height still honours that
   margin, so every layer except the first slide was offset 19.19px down: the
   scrim left an un-darkened strip across the top of the hero, slides 2 and 3
   sat low with a gap above them, and the copy and dots drifted with them.

   Specificity note: core's selector is (0,1,0), so a bare `.mir-hero-slider > *`
   only ties and would depend on stylesheet order. :not(:first-child) makes this
   (0,2,0) and lets it win outright. */
.mir-hero-slider > *:not(:first-child) {
  margin-block-start: 0;
}

.mir-hero-slider .mir-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.1s ease;
  pointer-events: none;
}
.mir-hero-slider .mir-slide.is-active {
  opacity: 1;
  pointer-events: auto;
}
/* WordPress wraps each slide image in <figure class="wp-block-image">, which has
   no height of its own. That made the img's height:100% resolve against a figure
   whose height was itself derived from the img — so the image kept its intrinsic
   aspect ratio, object-fit had nothing to crop against, and each photo rendered
   ~1080px tall in a ~725px slide, anchored to the top and clipped at the bottom.
   Giving the figure a definite height makes height:100% resolve and lets cover
   crop symmetrically instead. */
.mir-hero-slider .mir-slide figure {
  height: 100%;
  margin: 0;
}
.mir-hero-slider .mir-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  display: block;
}
/* Matches the reference gradient exactly. */
.mir-hero-slider .mir-slide-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(35,26,18,0.55) 0%, rgba(35,26,18,0.15) 45%, rgba(35,26,18,0.55) 88%, rgba(35,26,18,0.2) 100%);
}
.mir-hero-slider .mir-slide-copy {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0 24px;
  pointer-events: none;
}
.mir-hero-slider .mir-slide-copy .wp-block-buttons { pointer-events: auto; }
.mir-hero-slider .mir-slide-copy > * { margin-block: 0; }

.mir-hero-eyebrow {
  color: var(--wp--preset--color--cream);
  font-size: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin-bottom: 26px !important;
  opacity: 0.85;
}
.mir-hero-slider .mir-accent--hero { margin-bottom: 6px !important; }
.mir-hero-slider .mir-hero-title {
  font-size: clamp(38px, 5.2vw, 76px);
  line-height: 1.12;
  margin: 0 0 38px !important;
  max-width: 18ch;
  letter-spacing: 0;
}

/* Dot navigation */
.mir-hero-dots {
  position: absolute;
  bottom: 34px;
  left: 0;
  right: 0;
  z-index: 4;
  display: flex;
  justify-content: center;
  gap: 14px;
}
.mir-hero-dots button {
  width: 34px;
  height: 3px;
  border: none;
  padding: 0;
  cursor: pointer;
  background: var(--wp--preset--color--cream);
  opacity: 0.35;
  transition: opacity 0.3s ease;
}
.mir-hero-dots button[aria-selected="true"] { opacity: 1; }
.mir-hero-dots button:focus-visible {
  outline: 2px solid var(--wp--preset--color--rust-light);
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .mir-hero-slider .mir-slide { transition: none; }
}

/* ---------- Country / region page heroes ---------- */
.mir-hero-cover { position: relative; }
.mir-hero-cover .mir-hero-title { letter-spacing: 0.04em; }

/* ---------- Images that fill their column ---------- */
.mir-fill-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- Country link grid (Who We Are) ---------- */
.mir-country-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 32px;
}.mir-country-links > p { margin-block: 0; }
.mir-country-links > p > a {
  font-family: var(--wp--preset--font-family--plex-serif);
  font-size: 19px;
  color: var(--wp--preset--color--ink);
  padding: 13px 0;
  border-bottom: 1px solid #E6E1DA;
  display: flex;
  justify-content: space-between;
}
.mir-country-links > p > a:hover { color: var(--wp--preset--color--rust); }
.mir-country-links .mir-arrow { color: var(--wp--preset--color--rust-light); }

/* ---------- Region cards (image + gradient caption) ---------- */
.mir-region-card {
  position: relative;
  height: 480px;
  overflow: hidden;
  color: var(--wp--preset--color--cream);
}
.mir-region-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mir-region-card .mir-region-caption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 120px 36px 36px;
  background: linear-gradient(180deg, rgba(35,26,18,0) 0%, rgba(35,26,18,0.75) 100%);
  pointer-events: none;
}
.mir-region-card .mir-region-caption a { pointer-events: auto; }
.mir-region-card .mir-region-caption > * { margin-block: 0; }

/* ---------- Stat rows on dark bands ---------- */
.mir-stats {
  display: flex;
  gap: 40px;
  border-top: 1px solid rgba(212,203,180,0.3);
  padding-top: 26px;
  flex-wrap: wrap;
}
.mir-stats .mir-stat-num {
  font-family: var(--wp--preset--font-family--plex-serif);
  font-size: 30px;
  color: var(--wp--preset--color--rust-light);
  margin: 0;
  line-height: 1.2;
}
.mir-stats .mir-stat-label {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--wp--preset--color--sand);
  margin: 6px 0 0;
}

/* ---------- Footer ---------- */
.mir-footer { padding: clamp(56px,7vw,90px) clamp(24px,6vw,80px) 40px; }
.mir-footer .mir-footer-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 48px;
  padding-bottom: 56px;
  border-bottom: 1px solid rgba(177,165,141,0.25);
}
.mir-footer .mir-footer-heading {
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--wp--preset--color--cream);
  margin: 0 0 20px;
}
.mir-footer .mir-footer-logo img { height: 64px; width: auto; margin-bottom: 20px; }
.mir-footer .mir-footer-bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding-top: 28px;
  font-size: 13px;
}
.mir-footer .mir-footer-bottom > * { margin-block: 0; }
.mir-footer .mir-social { display: flex; gap: 22px; }

/* Newsletter signup in the footer */
.mir-footer .mir-signup input[type=email] {
  background: transparent;
  border: 1px solid var(--wp--preset--color--olive);
  color: var(--wp--preset--color--cream);
  font-family: var(--wp--preset--font-family--plex-sans);
  font-size: 14px;
  padding: 13px 14px;
  outline: none;
  width: 100%;
  box-sizing: border-box;
  border-radius: 0;
}
.mir-footer .mir-signup button {
  border: 1px solid var(--wp--preset--color--olive);
  background: transparent;
  color: var(--wp--preset--color--hairline);
  font-family: var(--wp--preset--font-family--plex-sans);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 13px 24px;
  cursor: pointer;
}
.mir-footer .mir-signup button:hover {
  border-color: var(--wp--preset--color--rust-light);
  color: var(--wp--preset--color--rust-light);
}

/* ---------- Header CTA variants (README §3) ---------- */
/* Home shows the filled rust button; every other page uses the outline variant. */
body:not(.home) .mir-primary-cta .wp-block-button__link {
  background: transparent;
  border: 1px solid rgba(245,243,242,0.7);
  color: var(--wp--preset--color--cream);
}
body:not(.home) .mir-primary-cta .wp-block-button__link:hover {
  background: var(--wp--preset--color--rust);
  border-color: var(--wp--preset--color--rust);
  color: var(--wp--preset--color--cream);
}
/* The guide button sits on the hero, so its outline is white rather than rust. */
.mir-header .mir-guide-cta .wp-block-button__link {
  border: 1px solid rgba(245,243,242,0.7);
  color: var(--wp--preset--color--cream);
  background: transparent;
}
.mir-header .mir-guide-cta .wp-block-button__link:hover {
  border-color: var(--wp--preset--color--rust-light);
  color: var(--wp--preset--color--rust-light);
  background: transparent;
}

/* ---------- Navigation ---------- */
.mir-header .wp-block-navigation { gap: clamp(14px, 2.2vw, 34px); }
.mir-header .wp-block-navigation .wp-block-navigation-item__content {
  color: var(--wp--preset--color--cream);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
}
.mir-header .wp-block-navigation .wp-block-navigation-item__content:hover {
  color: var(--wp--preset--color--rust-light);
}
/* Burger + overlay come from core's overlayMenu; just recolour the trigger. */
.mir-header .wp-block-navigation__responsive-container-open,
.mir-header .wp-block-navigation__responsive-container-close {
  color: var(--wp--preset--color--cream);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  font-size: 18px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ---------- Mobile ---------- */
@media (max-width: 860px) {
  .mir-header { padding: 18px 20px; }
  .mir-country-links { grid-template-columns: 1fr; }
  /* The CTAs sit outside the navigation block, so they never appear in core's
     mobile overlay. Keep the primary conversion button on screen next to the
     burger and drop only the secondary guide link, which has a home in the footer. */
  .mir-header .mir-guide-cta { display: none; }
  .mir-header .mir-header-ctas { gap: 8px; }
  .mir-header .mir-primary-cta .wp-block-button__link {
    padding: 10px 14px;
    font-size: 11px;
    letter-spacing: 0.12em;
  }
}
@media (max-width: 600px) {
  .mir-region-card { height: 380px; }
  .mir-stats { gap: 28px; }
}

/* ---------- Hero slide copy stack ----------
   The eyebrow and buttons are constant across slides; only the accent line and
   headline swap. Stacking the three text groups in one grid cell keeps each one
   independently editable while preventing a height jump between slides. */
.mir-hero-text-stack { display: grid; }
.mir-hero-text-stack > .mir-hero-text {
  grid-area: 1 / 1;
  opacity: 0;
  transition: opacity 1.1s ease;
  pointer-events: none;
}
.mir-hero-text-stack > .mir-hero-text.is-active { opacity: 1; }
.mir-hero-text > * { margin-block: 0; }

@media (prefers-reduced-motion: reduce) {
  .mir-hero-text-stack > .mir-hero-text { transition: none; }
}

/* ---------- "What We Handle" mosaic ----------
   Same hairline mosaic as .mir-glance, at the larger scale the Home page uses. */
.mir-handle > * { padding: 44px 36px; }
.mir-handle .mir-glance-num { font-size: 44px; margin-bottom: 22px; }
.mir-handle h3 {
  font-family: var(--wp--preset--font-family--plex-serif);
  font-weight: 500;
  font-size: 21px;
  margin: 0 0 14px;
  color: var(--wp--preset--color--ink);
}

/* Section padding helper — the reference's standard section inset. */
.mir-section { padding: clamp(72px,9vw,130px) clamp(24px,6vw,80px); }
.mir-section--tight { padding: clamp(72px,9vw,120px) clamp(24px,6vw,80px); }

/* ---------- Country / region hero (cover block) ----------
   Cover writes min-height inline, so the 560px floor from the reference has to
   override it. Everything else is plain block attributes. */
.wp-block-cover.mir-hero-cover { min-height: max(78vh, 560px) !important; }
.mir-hero-cover .wp-block-cover__inner-container > * { margin-block: 0; }

.mir-hero-eyebrow-country {
  font-size: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--wp--preset--color--cream);
  opacity: 0.85;
  margin-bottom: 14px !important;
}
/* Headline and its handwritten accent sit on a shared baseline. */
.mir-hero-titlerow {
  display: flex;
  align-items: baseline;
  gap: 22px;
  flex-wrap: wrap;
}
.mir-hero-titlerow .mir-accent--hero { font-size: clamp(28px, 3vw, 44px); }
.mir-hero-lead {
  font-family: var(--wp--preset--font-family--plex-serif);
  font-style: italic;
  color: var(--wp--preset--color--cream);
  font-size: clamp(18px, 1.8vw, 24px);
  line-height: 1.5;
  margin: 20px 0 0 !important;
  max-width: 56ch;
}

/* ---------- Alternating image / copy rows ---------- */
.mir-alt-row { align-items: center; }
.mir-alt-row .mir-fill-image,
.mir-alt-row .mir-fill-image img { height: 420px; }
.mir-row-label {
  font-size: 12px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--wp--preset--color--olive);
  margin-bottom: 12px !important;
}

/* Taller media in the two-column "why" and "how MIR works" sections. */
.mir-media-tall .mir-fill-image,
.mir-media-tall .mir-fill-image img { height: 520px; }

/* ---------- Region strip ---------- */
.mir-region-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.mir-region-strip .mir-region-links {
  display: flex;
  gap: 36px;
  flex-wrap: wrap;
}
.mir-region-strip .mir-region-links p { margin-block: 0; }
.mir-region-strip .mir-region-links a {
  font-family: var(--wp--preset--font-family--plex-serif);
  font-size: 22px;
  color: var(--wp--preset--color--cream);
}
.mir-region-strip .mir-region-links a:hover { color: var(--wp--preset--color--rust-light); }
.mir-region-strip > * { margin-block: 0; }

@media (max-width: 900px) {
  .mir-alt-row .mir-fill-image,
  .mir-alt-row .mir-fill-image img,
  .mir-media-tall .mir-fill-image,
  .mir-media-tall .mir-fill-image img { height: 320px; }
}

/* ---------- About: hero at reduced height ---------- */
.wp-block-cover.mir-hero-cover--short { min-height: max(64vh, 480px) !important; }
.mir-hero-cover--short .mir-hero-title { font-size: clamp(44px, 6vw, 88px); letter-spacing: 0; }
.mir-hero-cover--short .mir-hero-lead { max-width: 58ch; }

/* ---------- About: office cards on the dark band ---------- */
.mir-office-card {
  border: 1px solid rgba(212,203,180,0.3);
  padding: 40px 36px;
}
.mir-office-card > * { margin-block: 0; }
.mir-office-country {
  font-size: 12px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--wp--preset--color--rust-light);
  margin-bottom: 14px !important;
}
.mir-office-city {
  font-family: var(--wp--preset--font-family--plex-serif);
  font-size: 28px;
  margin-bottom: 16px !important;
}

/* ---------- About: "How We Work" definition rows ----------
   Wider label column and top-rule-only variant of the handoff's .mir-rows. */
.mir-rows--wide > * {
  grid-template-columns: minmax(160px, 240px) 1fr;
  gap: clamp(20px, 4vw, 60px);
  padding: 36px 0;
  border-bottom: none;
  border-top: 1px solid var(--wp--preset--color--hairline);
}
.mir-rows--wide > *:first-child { border-top: 1px solid var(--wp--preset--color--hairline); }
.mir-rows--wide > * > *:first-child {
  font-family: var(--wp--preset--font-family--plex-serif);
  font-size: 22px;
  color: var(--wp--preset--color--ink);
  margin-block: 0;
}
.mir-rows--wide > * > *:last-child { margin-block: 0; }

@media (max-width: 700px) {
  .mir-rows > *, .mir-rows--wide > * { grid-template-columns: 1fr; gap: 10px; }
}

/* ---------- South Caucasus: country cards ---------- */
.mir-country-card {
  background: var(--wp--preset--color--cream);
  color: var(--wp--preset--color--ink);
  height: 100%;
}
.mir-country-card .wp-block-image { margin-block: 0; }
.mir-country-card .mir-card-media,
.mir-country-card .mir-card-media img { height: 280px; }
.mir-country-card .mir-card-body { padding: 32px; }
.mir-country-card .mir-card-body > * { margin-block: 0; }
.mir-country-card .mir-card-title {
  font-family: var(--wp--preset--font-family--plex-serif);
  font-size: 26px;
  margin-bottom: 12px !important;
}
.mir-country-card .mir-card-link {
  display: inline-block;
  margin-top: 16px;
  color: var(--wp--preset--color--rust);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.mir-country-card:hover .mir-card-link a { color: var(--wp--preset--color--rust-light); }
.mir-country-card .mir-card-link a { color: inherit; }

/* ---------- South Caucasus: numbered "What to Expect" rows ---------- */
.mir-expect-label {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 16px !important;
}
.mir-expect-label .mir-expect-num {
  font-family: var(--wp--preset--font-family--plex-serif);
  font-size: 34px;
  color: var(--wp--preset--color--hairline);
  line-height: 1;
}
.mir-expect-label .mir-expect-name {
  font-family: var(--wp--preset--font-family--plex-serif);
  font-size: clamp(26px, 2.6vw, 34px);
  color: var(--wp--preset--color--ink);
  line-height: 1.2;
}
.mir-expect-row .mir-fill-image,
.mir-expect-row .mir-fill-image img { height: 300px; }

/* Wide media block used under the Practical and When-to-Consider sections. */
.mir-media-wide .mir-fill-image,
.mir-media-wide .mir-fill-image img { height: 560px; }

@media (max-width: 900px) {
  .mir-expect-row .mir-fill-image,
  .mir-expect-row .mir-fill-image img,
  .mir-media-wide .mir-fill-image,
  .mir-media-wide .mir-fill-image img { height: 300px; }
}

/* ---------- Uzbekistan: "Getting Around" closing callout ---------- */
.mir-getting-around { max-width: 64ch; margin-inline: auto !important; }
.mir-getting-around-label {
  font-size: 12px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--wp--preset--color--olive);
  display: block;
  margin-bottom: 10px;
}

/* ---------- Short hero used by the form / newsletter pages ---------- */
.wp-block-cover.mir-hero-cover--form { min-height: max(52vh, 420px) !important; }
.mir-hero-cover--form .mir-hero-title { font-size: clamp(44px, 6vw, 86px); }

/* ---------- Form slot ----------
   Gravity Forms is not installed yet, so no form markup is rendered. This panel
   marks exactly where each embed goes and is deliberately obvious: a fake but
   real-looking form here would silently drop enquiries. Delete the wrapper and
   drop in the [gravityform] shortcode when GF is licensed. */
.mir-form-slot {
  border: 1px dashed var(--wp--preset--color--rust);
  background: rgba(172,101,37,0.04);
  padding: 32px;
}
.mir-form-slot > * { margin-block: 0; }
.mir-form-slot .mir-form-slot-label {
  font-size: 12px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--wp--preset--color--rust);
  margin-bottom: 12px !important;
}
.mir-form-slot .mir-form-slot-note {
  font-size: 14px;
  line-height: 1.7;
  color: var(--wp--preset--color--body);
}
.mir-on-dark .mir-form-slot { background: rgba(245,243,242,0.05); }
.mir-on-dark .mir-form-slot .mir-form-slot-note { color: var(--wp--preset--color--hairline); }

/* ---------- Contact / newsletter detail rows ---------- */
.mir-detail-rows > * {
  padding: 20px 0;
  border-bottom: 1px solid var(--wp--preset--color--hairline);
}
.mir-detail-rows > *:first-child { border-top: 1px solid var(--wp--preset--color--hairline); }
.mir-detail-rows > * > * { margin-block: 0; }
.mir-detail-label {
  font-size: 12px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--wp--preset--color--olive);
  margin-bottom: 8px !important;
}
.mir-detail-value { font-size: 16px; line-height: 1.8; }

/* Inline serif lead-in inside a body paragraph (About → The Geography). */
.mir-inline-lead {
  font-family: var(--wp--preset--font-family--plex-serif);
  font-size: 19px;
  color: var(--wp--preset--color--ink);
}

/* ---------- Gravity Forms: pieces the handoff skin does not cover ----------
   mir-dmc.css skins the gravity-theme field/label/button chrome. These add the
   layout bits (checkbox grid, confirmations) and the on-dark footer variant. */

/* "Countries involved" — the spec asks for 2-4 columns. */
.mir-countries-grid .gfield_checkbox {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px 24px;
}
.mir-countries-grid .gchoice { display: flex; align-items: center; gap: 10px; }
.mir-countries-grid .gform-field-label--type-inline {
  font-size: 15px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--wp--preset--color--ink);
}

/* Two-column rows: keep the inputs on a common line.
   GF lays half-width fields out as grid cells that each stack label over input.
   Anything that makes one label taller than its neighbour's therefore pushes
   that input down — "Company / Travel Agency" wraps to two lines next to
   "Name", and the phone field carries Country / Phone Number sub-labels that
   "Email" does not. Measured offsets were 28.8px and 43px respectively.

   Rather than police label lengths, let the label box take whatever height it
   needs and pin the input to the bottom of the cell. Grid already stretches
   cells in a row to equal height, so bottom-aligned inputs line up whatever
   the labels above them do. */
.gform_wrapper.gravity-theme .gform_fields > .gfield--width-half {
  display: flex;
  flex-direction: column;
}
.gform_wrapper.gravity-theme .gfield--width-half > .ginput_container {
  margin-top: auto;
}

/* The phone field's sub-labels are the only ones on the form, and they add a
   row of text no other field has. Hide them visually but keep them in the
   accessibility tree — they are the accessible names for the country button
   and the number input, so display:none would leave both unlabelled. */
.gform_wrapper.gravity-theme .gfield--type-phone .gform-field-label--type-sub {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Country picker. GF 3.x renders this as a <button> styled by its own theme
   chrome (grey fill, grey border, 48px tall), which reads as a foreign control
   next to the cream-bordered inputs. Restate it to match the field skin in
   mir-dmc.css: same border, same white ground, same type, same height. */
.gform_wrapper.gravity-theme .gform-phone__input-wrapper {
  column-gap: 8px;
}
.gform_wrapper.gravity-theme .gfield--type-phone .ginput_container_phone .gform-phone__country-selector {
  height: 37px;
  min-height: 0;
  padding: 8px 10px;
  gap: 6px;
  background-color: #fff;
  border: 1px solid #D4CBB4;
  border-inline-end-color: #D4CBB4;
  border-radius: 0;
  color: #3A342C;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 15px;
  white-space: nowrap;
}
.gform_wrapper.gravity-theme .gfield--type-phone .ginput_container_phone .gform-phone__country-selector:hover {
  background-color: #fff;
  border-color: #AC6525;
  border-inline-end-color: #AC6525;
  color: #3A342C;
}
.gform_wrapper.gravity-theme .gfield--type-phone .ginput_container_phone .gform-phone__country-selector:focus-visible {
  background-color: #fff;
  border-color: #AC6525;
  border-inline-end-color: #AC6525;
  outline: none;
}
.gform_wrapper.gravity-theme .gform-phone__dial-code {
  color: #3A342C;
  white-space: nowrap;
}

/* Confirmation message, styled like the mocks' thank-you state. */
.mir-form-confirmation > * { margin-block: 0; }
.mir-form-confirmation .mir-confirm-lead {
  font-family: var(--wp--preset--font-family--plex-serif);
  font-size: clamp(22px, 2.3vw, 30px);
  line-height: 1.5;
  color: var(--wp--preset--color--ink);
  margin-top: 12px !important;
}
.mir-form-confirmation .mir-confirm-body {
  color: var(--wp--preset--color--body);
  margin-top: 18px !important;
  max-width: 60ch;
}
.mir-form-confirmation .mir-confirm-back {
  margin-top: 26px !important;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* Footer signup sits on the dark band: transparent field, olive rules. */
.mir-footer .gform_wrapper.gravity-theme .gform_fields { grid-row-gap: 10px; }
.mir-footer .gform_wrapper.gravity-theme input[type=email] {
  background: transparent;
  border: 1px solid var(--wp--preset--color--olive);
  color: var(--wp--preset--color--cream);
  font-size: 14px;
  padding: 13px 14px;
}
.mir-footer .gform_wrapper.gravity-theme ::placeholder { color: var(--wp--preset--color--olive); }
.mir-footer .gform_wrapper.gravity-theme .gform_button {
  background: transparent;
  border: 1px solid var(--wp--preset--color--olive);
  color: var(--wp--preset--color--hairline);
  padding: 13px 24px;
  width: 100%;
}
.mir-footer .gform_wrapper.gravity-theme .gform_button:hover {
  border-color: var(--wp--preset--color--rust-light);
  color: var(--wp--preset--color--rust-light);
  background: transparent;
}
.mir-footer .gform_wrapper.gravity-theme .gform_footer { margin: 10px 0 0; padding: 0; }
.mir-footer .mir-form-confirmation .mir-confirm-lead,
.mir-footer .mir-form-confirmation .mir-confirm-body { color: var(--wp--preset--color--sand); font-size: 15px; }

/* Inputs fill their grid column rather than GF's fixed "medium" width. */
.gform_wrapper.gravity-theme .ginput_container input[type=text],
.gform_wrapper.gravity-theme .ginput_container input[type=email],
.gform_wrapper.gravity-theme .ginput_container input[type=tel],
.gform_wrapper.gravity-theme .ginput_container textarea { width: 100%; }
.gform_wrapper.gravity-theme .gform_footer { margin-top: 28px; padding: 0; }
.mir-footer .gform_wrapper.gravity-theme .gform_footer { margin-top: 10px; }
/* GF reserves space for an inline validation slot under each field; on the dark
   footer that reads as a large unexplained gap. */
.mir-footer .gform_wrapper.gravity-theme .gfield_validation_message,
.mir-footer .gform_wrapper.gravity-theme .gform_validation_errors { margin: 6px 0; }
.mir-footer .gform_wrapper.gravity-theme .gform_fields { row-gap: 0; }