/* =====================================================================
   IMI rebrand stylesheet
   ---------------------------------------------------------------------
   Hand-authored layer that adds rebrand tokens, utility-style classes
   for the new palette/typography, and per-block IMI rules — applied on
   top of the existing Tailwind build (assets/dist/css/style.css).

   When the Tailwind build is regenerated from the updated source
   (assets/src/css/tailwind.css), most of these rules become redundant
   and this file can be deleted. Until then, this is the source of
   truth for everything `imi-*` and any new utility class referenced
   by migrated blocks.
   ===================================================================== */

/* ---------- Design tokens (mirror of outputs/design-4.html :root) ---- */
:root {
  --font-display: 'Archivo', system-ui, sans-serif;
  --font-body:    'Source Serif 4', Georgia, serif;
  --font-ui:      'Source Sans 3', system-ui, sans-serif;

  --navy-900: #0E2540;
  --navy-700: #1F3A5F;
  --navy-500: #3A5A85;
  --ink:      #0A1A2E;
  --ink-warm: #2A2520;
  --ink-soft: #3F4F66;

  --teal-600:    #1F7A8C;
  --teal-500:    #2E94A8;
  --teal-section:#3A8C8C;
  --teal-deep:   #1A6878;

  --sky-100: #EAF2F7;
  --sky-300: #B8D4E3;
  --sand-200:#E8DDD0;

  --paper:          #FAFBFC;
  --paper-80:       rgba(250, 251, 252, 0.80);
  --paper-60:       rgba(250, 251, 252, 0.60);
  --paper-30:       rgba(250, 251, 252, 0.30);
  --paper-warm:     #F5F1EC;
  --paper-warm-alt: #FDF8F3;

  --rule: #D8E0E8;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Global box-sizing reset ----------------------------------
   Restores the box-sizing: border-box behavior Tailwind Preflight used
   to apply sitewide, removed when Tailwind was dropped. Every IMI
   component below assumes border-box sizing (padding/border included
   in width) — without this, padded/bordered elements overflow their
   set widths. Kept as an early base rule so all component styles below
   inherit it. ---------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
}

/* ---------- New Tailwind-style utilities (used by migrated blocks) ---- */
.bg-navy-900    { background-color: #0E2540 !important; }
.bg-navy-700    { background-color: #1F3A5F !important; }
.bg-teal-600    { background-color: #1F7A8C !important; }
.bg-teal-500    { background-color: #2E94A8 !important; }
.bg-sky-100     { background-color: #EAF2F7 !important; }
.bg-sky-300     { background-color: #B8D4E3 !important; }
.bg-paper       { background-color: #FAFBFC !important; }
.bg-paper-warm  { background-color: #F5F1EC !important; }

.text-navy-900  { color: #0E2540 !important; }
.text-navy-700  { color: #1F3A5F !important; }
.text-teal-600  { color: #1F7A8C !important; }
.text-teal-500  { color: #2E94A8 !important; }
.text-paper     { color: #FAFBFC !important; }
.text-sky-100   { color: #EAF2F7 !important; }
.text-sky-300   { color: #B8D4E3 !important; }
.text-ink       { color: #0A1A2E !important; }
.text-ink-soft  { color: #3F4F66 !important; }

.border-teal-600 { border-color: #1F7A8C !important; }
.border-teal-deep{ border-color: #1A6878 !important; }
.border-rule     { border-color: #D8E0E8 !important; }

.hover\:bg-teal-deep:hover    { background-color: #1A6878 !important; }
.hover\:border-teal-deep:hover{ border-color: #1A6878 !important; }
.hover\:text-paper:hover      { color: #FAFBFC !important; }
.hover\:shadow-imi-lift:hover { box-shadow: 0 12px 24px rgba(0,0,0,0.22) !important; }

.font-archivo      { font-family: 'Archivo', system-ui, sans-serif !important; }
.font-source-serif { font-family: 'Source Serif 4', Georgia, serif !important; }
.font-source-sans  { font-family: 'Source Sans 3', system-ui, sans-serif !important; }
.font-display      { font-family: 'Archivo', system-ui, sans-serif !important; }
.font-body         { font-family: 'Source Serif 4', Georgia, serif !important; }
.font-ui           { font-family: 'Source Sans 3', system-ui, sans-serif !important; }

/* `primary` / `secondary` repointed for the rebrand. These mirror the
   existing Tailwind output names so old `bg-primary` / `bg-secondary`
   utilities adopt the new colors site-wide. */
.bg-primary, [class*=" bg-primary"], [class^="bg-primary"]      { background-color: #0E2540 !important; }
.text-primary, [class*=" text-primary"], [class^="text-primary"]{ color: #0E2540 !important; }
.border-primary                                                 { border-color: #0E2540 !important; }
.bg-secondary                                                   { background-color: #F5F1EC !important; }
.text-secondary                                                 { color: #F5F1EC !important; }

/* =====================================================================
   HERO — full port of outputs/design-4.html lines 163–625
   Used by the acf/imi-hero block. Pure BEM, no Tailwind utilities.
   ===================================================================== */

.imi-hero {
  position: relative;
  width: 100%;
  height: 86vh;
  min-height: 640px;
  overflow: hidden;
  background: var(--navy-900);
  /* Cancel the legacy theme's body padding-top:85px so the hero is edge-to-edge */
  margin-top: -85px;
}
@media (max-width: 767px) {
  .imi-hero { margin-top: -69px; }
}

/* CSS poster fallback — complete on its own */
.imi-hero__fallback {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 80% 70% at 50% 45%,
      rgba(58, 90, 133, 0.55) 0%,
      rgba(31, 58, 95, 0.70) 40%,
      rgba(14, 37, 64, 0.95) 90%),
    linear-gradient(135deg,
      rgba(184, 212, 227, 0.18) 0%,
      rgba(31, 58, 95, 0.40) 50%,
      rgba(14, 37, 64, 0.95) 100%),
    linear-gradient(180deg, #122d52 0%, #0E2540 60%, #08182d 100%);
}

/* Subtle grain layer */
.imi-hero__grain {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.35;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.08 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 160px 160px;
  mix-blend-mode: overlay;
}

/* Video-as-background — covers iframe (YouTube) or <video> (self-hosted). */
.imi-hero__video {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: 100vw;
  height: 56.25vw;
  min-height: 100vh;
  min-width: 177.78vh;
  transform: translate(-50%, -50%);
  border: 0;
  pointer-events: none;
  transition: opacity 600ms var(--ease-out);
}

/* Self-hosted MP4 — no native chrome, visible immediately. */
.imi-hero__video--file {
  object-fit: cover;
  opacity: 1;
}

/* YouTube iframe — start hidden. JS onStateChange fades in only when the
   player is actively playing (state === 1) so YT's native overlays
   (big play, prev/next, related, replay) never become visible. */
.imi-hero__video--youtube {
  opacity: 0;
}

/* Color-grade overlays */
.imi-hero__wash {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: rgba(31, 58, 95, 0.12);
}

.imi-hero__gradient {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(14, 37, 64, 0.92) 0%,
    rgba(14, 37, 64, 0.72) 6%,
    rgba(14, 37, 64, 0.18) 16%,
    rgba(14, 37, 64, 0.00) 28%,
    rgba(14, 37, 64, 0.00) 50%,
    rgba(14, 37, 64, 0.55) 78%,
    rgba(14, 37, 64, 0.85) 100%);
}

/* Top-right video meta */
.imi-hero__video-meta {
  position: absolute;
  top: 120px;
  right: 48px;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper-80);
  margin: 0;
}

.imi-hero__pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--teal-500);
  box-shadow: 0 0 0 0 rgba(46, 148, 168, 0.55);
  animation: imi-hero-pulse 1500ms ease-in-out infinite;
  flex-shrink: 0;
  display: inline-block;
}

/* Bottom-right pause control */
.imi-hero__media-control {
  position: absolute;
  bottom: 32px;
  right: 48px;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: none;
  color: var(--paper-80);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 0;
}

.imi-hero__media-control-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--paper-60);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 220ms var(--ease-out), border-color 220ms var(--ease-out);
}

.imi-hero__media-control:hover .imi-hero__media-control-icon {
  background: rgba(250, 251, 252, 0.10);
  border-color: var(--paper);
}

/* Paused state — swap pause bars for a play triangle */
.imi-hero__media-control--paused .imi-hero__media-control-icon svg {
  display: none;
}
.imi-hero__media-control--paused .imi-hero__media-control-icon::before {
  content: "";
  width: 0;
  height: 0;
  border-left: 8px solid var(--paper);
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  /* Optical centering: a triangle's centroid sits ~1/3 from the base,
     so nudge it right so it reads as centered inside the 28px circle. */
  margin-left: 2px;
}

/* Frosted content panel (bottom-left) */
.imi-hero__panel {
  position: absolute;
  z-index: 7;
  left: 50%;
  top: calc((100% + var(--imi-nav-h)) / 2);
  width: calc(100% - 96px);
  max-width: 640px;
  padding: 44px 48px 40px;
  background: rgba(14, 37, 64, 0.65);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgba(234, 242, 247, 0.10);
  border-radius: 4px;
  text-align: center;
  opacity: 0;
  transform: translate(-50%, calc(-50% + 40px));
  animation: imi-hero-panel-in 800ms var(--ease-out) 600ms forwards;
}

.imi-hero__kicker {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sky-100);
  margin: 0 0 22px;
  opacity: 0;
  animation: imi-hero-fade-in 300ms ease 1400ms forwards;
}

.imi-hero__headline {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(40px, 4.4vw, 60px);
  line-height: 1.06;
  color: var(--paper);
  margin: 0 0 22px;
  letter-spacing: -0.022em;
  word-break: break-word;
  hyphens: auto;
  -webkit-hyphens: auto;
}

.imi-hero__headline em {
  font-style: italic;
  font-weight: 500;
  color: var(--paper);
  letter-spacing: -0.018em;
}

.imi-hero__subhead {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.65;
  color: rgba(234, 242, 247, 0.82);
  margin: 0 0 32px;
}

/* CTA row */
.imi-hero__cta-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  margin-bottom: 0;
  flex-wrap: wrap;
}

.imi-hero__cta-primary {
  display: inline-block;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--teal-600);
  border: 1px solid var(--teal-600);
  border-radius: 4px;
  padding: 16px 28px;
  text-decoration: none;
  transition: background 220ms var(--ease-out), transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out);
}

.imi-hero__cta-primary:hover {
  background: #1a6878;
  border-color: #1a6878;
  color: var(--paper);
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.25);
}

.imi-hero__cta-secondary {
  position: relative;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper);
  text-decoration: none;
  padding: 4px 0;
}

.imi-hero__cta-secondary::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 32px;
  height: 1px;
  background: var(--paper);
  transition: width 280ms var(--ease-out);
}

.imi-hero__cta-secondary:hover { transform: translateY(-2px); color: var(--paper); }
.imi-hero__cta-secondary:hover::after { width: 100%; }

/* Animations */
@keyframes imi-hero-video-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes imi-hero-panel-in {
  from {
    opacity: 0;
    transform: translate(-50%, calc(-50% + 40px));
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

@keyframes imi-hero-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes imi-hero-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(46, 148, 168, 0.55); transform: scale(1); }
  70%  { box-shadow: 0 0 0 10px rgba(46, 148, 168, 0); transform: scale(1.05); }
  100% { box-shadow: 0 0 0 0 rgba(46, 148, 168, 0); transform: scale(1); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .imi-hero__panel,
  .imi-hero__kicker {
    animation: none !important;
    opacity: 1 !important;
    transform: translate(-50%, -50%) !important;
  }
  /* The video iframe opacity is JS-driven by the YT player's state,
     so it stays hidden during transitions even for reduced-motion users.
     Don't force opacity here — that would re-expose YouTube's chrome. */
  .imi-hero__pulse-dot {
    animation: none !important;
    box-shadow: none !important;
  }
  .imi-hero * {
    transition-duration: 1ms !important;
  }
}

/* Responsive */
@media (max-width: 1024px) {
  .imi-hero__panel { left: 28px; width: calc(100% - 56px); max-width: none; padding: 36px 36px 32px; }
  .imi-hero__video-meta { top: 96px; right: 28px; }
  .imi-hero__media-control { right: 28px; bottom: 20px; }
}

@media (max-width: 720px) {
  .imi-hero__headline { font-size: 40px; }
  .imi-hero__subhead  { font-size: 15px; }
  .imi-hero__panel {
    top: calc((100% + var(--imi-nav-h)) / 2);
    bottom: auto;
    left: 50%;
    width: calc(100% - 32px);
    padding: 28px 24px 26px;
    transform: translate(-50%, calc(-50% + 40px));
    animation: imi-hero-panel-in-mobile 800ms var(--ease-out) 600ms forwards;
    text-align: center;
  }
  .imi-hero__kicker,
  .imi-hero__headline,
  .imi-hero__subhead { text-align: center; }
  .imi-hero__cta-row { justify-content: center; }
  .imi-hero__cta-secondary { padding-bottom: 8px; }
  /* Center the underline stub under the secondary CTA text */
  .imi-hero__cta-secondary::after {
    left: 50%;
    transform: translateX(-50%);
  }
  @keyframes imi-hero-panel-in-mobile {
    from { opacity: 0; transform: translate(-50%, calc(-50% + 40px)); }
    to   { opacity: 1; transform: translate(-50%, -50%); }
  }
  .imi-hero__video-meta { top: 80px; right: 16px; font-size: 10px; }
  .imi-hero__media-control { right: 16px; bottom: 14px; }
  @media (prefers-reduced-motion: reduce) {
    .imi-hero__panel { transform: translate(-50%, -50%) !important; }
  }
}

/* =====================================================================
   TRUST MARQUEE — port of outputs/design-4.html .imi-trust section
   Used by the acf/brands block.
   ===================================================================== */

.imi-trust {
  background: var(--navy-900);
  padding: 64px 48px;
  border-bottom: 1px solid rgba(184, 212, 227, 0.10);
}

.imi-trust__kicker {
  text-align: center;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sky-300);
  margin: 0 0 32px;
}

/* Marquee viewport — masks logos to a fading edge on both sides */
.imi-trust__row {
  overflow: hidden;
  max-width: 1200px;
  margin: 0 auto;
  mask-image: linear-gradient(
    to right,
    transparent 0,
    black 80px,
    black calc(100% - 80px),
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    black 80px,
    black calc(100% - 80px),
    transparent 100%
  );
}

/* Animated track — duplicated logo set translates -50% for a seamless loop */
.imi-trust__track {
  display: flex;
  gap: 16px;
  width: max-content;
  animation: imi-trust-scroll 32s linear infinite;
}

.imi-trust__row:hover .imi-trust__track {
  animation-play-state: paused;
}

@keyframes imi-trust-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.imi-trust__logo {
  flex: 0 0 auto;
  width: 208px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  background: transparent;
  transition: opacity 220ms var(--ease-out), filter 220ms var(--ease-out);
  opacity: 0.85;
}

.imi-trust__logo:hover {
  opacity: 1;
  filter: brightness(1.15);
}

.imi-trust__logo img {
  display: block;
  max-width: 100%;
  max-height: 56px;
  width: auto;
  height: auto;
  object-fit: contain;
}

@media (prefers-reduced-motion: reduce) {
  .imi-trust__track { animation: none; }
}

@media (max-width: 1024px) {
  .imi-trust { padding: 48px 32px; }
}

/* =====================================================================
   SECTION 3 — Why Choose Dr. Tahiri (V2 — Credentials Authority)
   Port of outputs/design-4.html .imi-section3-v2. Used by acf/why-choose-us.
   ===================================================================== */

.imi-section3-v2 {
  background: #F8F5F0;
  color: var(--ink);
  padding: 120px 48px 140px;
  position: relative;
}

.imi-section3-v2__wrap { max-width: 1240px; margin: 0 auto; }

.imi-section3-v2__header {
  text-align: center;
  margin-bottom: 72px;
}

.imi-section3-v2__kicker {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal-600);
  margin: 0 0 20px;
}

.imi-section3-v2__heading {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 48px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--navy-900);
  margin: 0 0 28px;
}

.imi-section3-v2__heading-rule {
  width: 60px;
  height: 1px;
  background: var(--teal-600);
  margin: 0 auto;
  border: 0;
}

/* 3-column grid */
.imi-section3-v2__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}

.imi-section3-v2__card {
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 36px;
  transition: transform 320ms var(--ease-out), box-shadow 320ms var(--ease-out);
}

.imi-section3-v2__card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(14, 37, 64, 0.08);
}

.imi-section3-v2__eyebrow {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--teal-600);
  margin: 0 0 20px;
}

.imi-section3-v2__story-body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink);
  margin: 0;
}

/* Video card */
.imi-section3-v2__video-link {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  font: inherit;
  appearance: none;
}

.imi-section3-v2__video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background:
    linear-gradient(rgba(14, 37, 64, 0.30), rgba(14, 37, 64, 0.30)),
    #0E2540 url('https://stg-tahiriplasticsurgery-staging.kinsta.cloud/wp-content/uploads/imgi_262_hq720.jpg') center / cover no-repeat;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
  border-radius: 2px;
  margin-bottom: 18px;
  transition: transform 320ms var(--ease-out);
}

.imi-section3-v2__video-link:hover .imi-section3-v2__video-frame {
  transform: scale(1.01);
}

.imi-section3-v2__video-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.06 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 160px 160px;
  opacity: 0.30;
  mix-blend-mode: overlay;
  pointer-events: none;
}

.imi-section3-v2__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 2px solid var(--teal-600);
  background: rgba(14, 37, 64, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 260ms var(--ease-out), transform 260ms var(--ease-out);
}

.imi-section3-v2__play svg { width: 22px; height: 22px; display: block; margin-left: 3px; }

.imi-section3-v2__video-link:hover .imi-section3-v2__play {
  background: var(--teal-600);
  transform: translate(-50%, -50%) scale(1.04);
}

.imi-section3-v2__video-caption {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0;
}

/* Credentials */
.imi-section3-v2__credentials { list-style: none; margin: 0; padding: 0; }

.imi-section3-v2__credential {
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.45;
  color: var(--ink);
  border-left: 1.5px solid var(--teal-600);
  padding: 2px 0 2px 12px;
  margin: 0 0 14px;
  transition: border-color 200ms var(--ease-out), transform 200ms var(--ease-out);
}

.imi-section3-v2__credential:last-child { margin-bottom: 0; }

.imi-section3-v2__credential:hover {
  border-left-color: var(--teal-500);
  transform: translateX(2px);
}

.imi-section3-v2__credential em { font-style: italic; }

/* Stat strip */
.imi-section3-v2__stats {
  margin-top: 56px;
  padding-top: 48px;
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.imi-section3-v2__stat {
  padding: 8px 28px;
  text-align: center;
  border-left: 1px solid rgba(31, 122, 140, 0.3);
}

.imi-section3-v2__stat:first-child { border-left: 0; padding-left: 0; }
.imi-section3-v2__stat:last-child  { padding-right: 0; }

.imi-section3-v2__stat-num {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 56px;
  line-height: 1;
  color: var(--navy-900);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
  display: block;
}

.imi-section3-v2__stat-cap {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  line-height: 1.4;
  margin: 0;
}

/* Middle essay */
.imi-section3-v2__essay { margin: 72px auto 0; max-width: 760px; }

.imi-section3-v2__essay p {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.75;
  color: var(--ink);
  margin: 0 0 22px;
}

.imi-section3-v2__essay p:last-child { margin-bottom: 0; }
.imi-section3-v2__essay em { font-style: italic; }

/* Testimonials */
.imi-section3-v2__testimonials {
  margin-top: 72px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px;
}

.imi-section3-v2__testimonial {
  background: var(--paper);
  padding: 32px;
  border-radius: 2px;
  border: 1px solid var(--rule);
  transition: transform 320ms var(--ease-out), box-shadow 320ms var(--ease-out);
}

.imi-section3-v2__testimonial:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(14, 37, 64, 0.08);
}

.imi-section3-v2__portrait {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: radial-gradient(ellipse 80% 70% at 50% 45%, #1F3A5F 0%, #142a4a 55%, #0E2540 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--paper);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 0.04em;
  margin-bottom: 22px;
}

.imi-section3-v2__quote {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 18px;
  line-height: 1.6;
  color: var(--navy-700);
  margin: 0 0 22px;
}

.imi-section3-v2__attrib-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  color: var(--navy-900);
  display: block;
  margin-bottom: 6px;
}

.imi-section3-v2__attrib-loc {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal-600);
  display: block;
}

/* Closing */
.imi-section3-v2__closing {
  margin: 80px auto 0;
  max-width: 720px;
  text-align: center;
}

.imi-section3-v2__closing p {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink);
  margin: 0 0 28px;
}

.imi-section3-v2__closing-rule {
  width: 60px;
  height: 1px;
  background: var(--teal-600);
  border: 0;
  margin: 40px auto 28px;
}

.imi-section3-v2__closing-final {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.4;
  color: var(--navy-900);
  margin: 0 0 36px;
  letter-spacing: -0.005em;
}

/* Closing CTA row */
.imi-section3-v2__cta-row {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
}

.imi-section3-v2__cta-primary {
  display: inline-block;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--teal-600);
  border: 1px solid var(--teal-600);
  border-radius: 4px;
  padding: 16px 32px;
  text-decoration: none;
  transition: background 220ms var(--ease-out), border-color 220ms var(--ease-out), transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out);
}

.imi-section3-v2__cta-primary:hover {
  background: #1a6878;
  border-color: #1a6878;
  color: var(--paper);
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(14, 37, 64, 0.12);
}

.imi-section3-v2__cta-secondary {
  display: inline-block;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--navy-900);
  background: transparent;
  border: 1px solid var(--navy-900);
  border-radius: 4px;
  padding: 16px 32px;
  text-decoration: none;
  transition: background 220ms var(--ease-out), color 220ms var(--ease-out), transform 220ms var(--ease-out);
}

.imi-section3-v2__cta-secondary:hover {
  background: var(--navy-900);
  color: var(--paper);
  transform: translateY(-2px);
}

/* Responsive */
@media (max-width: 1024px) {
  .imi-section3-v2__heading { font-size: 36px; }
}

@media (max-width: 900px) {
  .imi-section3-v2__grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .imi-section3-v2__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 0; }
  .imi-section3-v2__stat { border-left: 0; padding: 8px 16px; }
  .imi-section3-v2__stat:nth-child(odd) { border-left: 0; padding-left: 0; }
  .imi-section3-v2__stat-num { font-size: 44px; }
}

@media (max-width: 768px) {
  .imi-section3-v2__testimonials { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}

@media (max-width: 640px) {
  .imi-section3-v2 { padding: 80px 20px 96px; }
  .imi-section3-v2__heading { font-size: 36px; } /* DS-160: was 30px, below the 36px mobile H2 floor */
  .imi-section3-v2__header { margin-bottom: 48px; }
  .imi-section3-v2__essay { margin-top: 56px; }
  .imi-section3-v2__essay p { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .imi-section3-v2__card,
  .imi-section3-v2__testimonial,
  .imi-section3-v2__credential,
  .imi-section3-v2__play { transition: none; }
}

/* =====================================================================
   SHARED PRIMITIVES — section / wrap / kicker / heading / lead / buttons
   Port of outputs/design-4.html shared rules (lines 630–730).
   ===================================================================== */

.imi-section {
  position: relative;
  padding: 120px 48px;
  color: var(--ink);
  background: var(--paper);
}
.imi-section--paper          { background: var(--paper); }
.imi-section--paper-warm     { background: var(--paper-warm); }
.imi-section--paper-warm-alt { background: var(--paper-warm-alt); }
.imi-section--sky            { background: var(--sky-100); }
.imi-section--navy           { background: var(--navy-900); color: var(--paper); }
.imi-section--teal           { background: var(--teal-section); color: var(--paper); }
.imi-section--teal-deep      { background: var(--teal-600); color: var(--paper); }

.imi-wrap {
  max-width: 1240px;
  margin: 0 auto;
  position: relative;
}
.imi-wrap--narrow { max-width: 920px; }

.imi-kicker {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--teal-600);
  margin: 0 0 18px;
}
.imi-section--navy .imi-kicker,
.imi-section--teal .imi-kicker,
.imi-section--teal-deep .imi-kicker { color: var(--sky-300); }

.imi-heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(36px, 4vw, 48px); /* DS-158: mobile floor 32->36 (scorecard floor 36px); desktop ceiling unchanged, already passing */
  line-height: 1.12;
  letter-spacing: -0.018em;
  margin: 0 0 24px;
  color: inherit;
}
.imi-heading em {
  font-style: italic;
  font-weight: 500;
}

.imi-lead {
  font-family: var(--font-body);
  font-size: 19px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 0 32px;
  max-width: 92ch;
}
.imi-section--navy .imi-lead,
.imi-section--teal .imi-lead,
.imi-section--teal-deep .imi-lead { color: rgba(234, 242, 247, 0.85); }
/* ei_description (wysiwyg) renders one <p> per paragraph break already —
   they just had no gap between them. DS-87. */
.imi-lead p { margin: 0 0 1em; }
.imi-lead p:last-child { margin-bottom: 0; }

.imi-body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.72;
  color: var(--ink-soft);
  margin: 0 0 20px;
}
.imi-section--navy .imi-body,
.imi-section--teal .imi-body,
.imi-section--teal-deep .imi-body { color: var(--paper); }

.imi-rule-accent {
  display: inline-block;
  width: 48px;
  height: 2px;
  background: var(--teal-600);
  margin: 0 0 22px;
}

/* Buttons */
.imi-btn {
  display: inline-block;
  box-sizing: border-box;
  max-width: 100%;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 16px 28px;
  border-radius: 4px;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background 220ms var(--ease-out), border-color 220ms var(--ease-out), color 220ms var(--ease-out), transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out);
  cursor: pointer;
}
.imi-btn--primary { background: var(--navy-900); color: var(--paper); border-color: var(--navy-900); }
.imi-btn--primary:hover { background: var(--navy-700); border-color: var(--navy-700); color: var(--paper); transform: translateY(-2px); box-shadow: 0 12px 24px rgba(14,37,64,0.18); }
.imi-btn--accent  { background: var(--teal-600); color: var(--paper); border-color: var(--teal-600); }
.imi-btn--accent:hover  { background: #1a6878; border-color: #1a6878; color: var(--paper); transform: translateY(-2px); box-shadow: 0 12px 24px rgba(0,0,0,0.20); }
.imi-btn--outline { background: transparent; color: var(--navy-900); border-color: var(--navy-900); }
.imi-btn--outline:hover { background: var(--navy-900); color: var(--paper); }
.imi-btn--outline-paper { background: transparent; color: var(--paper); border-color: var(--paper); }
.imi-btn--outline-paper:hover { background: var(--paper); color: var(--navy-900); }

.imi-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-ui);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal-600);
  text-decoration: none;
  transition: gap 220ms var(--ease-out), color 220ms var(--ease-out);
}
.imi-link-arrow:hover { gap: 14px; color: var(--teal-500); }

/* Section padding mobile fallback (matches design-4 .imi-section responsive) */
@media (max-width: 1024px) {
  .imi-section { padding: 80px 32px; }
}
@media (max-width: 640px) {
  .imi-section { padding: 64px 20px; }
}

/* =====================================================================
   SECTION 4 — Before & After Gallery
   Port of outputs/design-4.html .imi-gallery + .imi-case. Used by acf/gallery.
   ===================================================================== */

.imi-gallery__head { text-align: center; margin-bottom: 56px; }
.imi-gallery__head .imi-kicker,
.imi-gallery__head .imi-heading,
.imi-gallery__head .imi-lead { margin-left: auto; margin-right: auto; }
.imi-gallery__head .imi-lead  { text-align: center; }

.imi-gallery__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  margin-bottom: 48px;
}

.imi-case {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 12px;
  overflow: hidden;
  transition: transform 280ms var(--ease-out), box-shadow 280ms var(--ease-out), border-color 280ms var(--ease-out);
}

.imi-case--clickable { cursor: pointer; }

.imi-case:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(14,37,64,0.10);
  border-color: var(--sand-200);
}

.imi-case__images {
  position: relative;
  aspect-ratio: 192 / 107;
  background: var(--sky-100);
  overflow: hidden;
}

.imi-case__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 480ms var(--ease-out);
}

.imi-case:hover .imi-case__photo { transform: scale(1.03); }

.imi-case__meta {
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.imi-case__code {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--teal-600);
}

.imi-case__rotation {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.imi-gallery__cta-row { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }

@media (max-width: 1024px) {
  .imi-gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .imi-gallery__grid { grid-template-columns: minmax(0, 1fr); }
}

/* =====================================================================
   SECTION 5 — What Is Microtia
   Port of outputs/design-4.html .imi-microtia. Used by acf/microtia.
   ===================================================================== */

.imi-microtia__grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 4fr);
  gap: 64px;
  align-items: center;
}

.imi-microtia__image {
  display: block;
  width: 100%;
  height: auto;
}

.imi-microtia__cta { margin-top: 32px; }

@media (max-width: 1024px) {
  .imi-microtia__grid { grid-template-columns: minmax(0, 1fr) !important; gap: 40px; }
}

/* =====================================================================
   Ear & Craniofacial — image-left mirror of the microtia grid
   ===================================================================== */

.imi-craniofacial__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 5fr);
  gap: 64px;
  align-items: center;
}

.imi-craniofacial__image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  object-fit: cover;
}

.imi-craniofacial__cta { margin-top: 32px; }

@media (max-width: 1024px) {
  .imi-craniofacial__grid { grid-template-columns: minmax(0, 1fr) !important; gap: 40px; }
}

/* =====================================================================
   SECTION 10 — Gold Standard Comparison (sky vs navy cards)
   Port of outputs/design-4.html .imi-compare. Used by acf/ear-craniofacial.
   ===================================================================== */

.imi-compare__head { text-align: center; margin-bottom: 48px; }
.imi-compare__head .imi-kicker,
.imi-compare__head .imi-heading,
.imi-compare__head .imi-lead { margin-left: auto; margin-right: auto; }
.imi-compare__head .imi-lead { text-align: center; }

.imi-compare__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 28px;
  margin-bottom: 64px;
  align-items: stretch;
}

.imi-compare-col {
  border-radius: 12px;
  padding: 40px 36px 36px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: relative;
}

.imi-compare-col--standard {
  background: var(--sky-100);
  color: var(--navy-700);
}

.imi-compare-col--imi {
  background: var(--navy-900);
  color: var(--paper);
  border-top: 4px solid var(--teal-600);
  box-shadow: 0 20px 40px rgba(14,37,64,0.18);
}

.imi-compare-col__tier {
  font-family: var(--font-ui);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.imi-compare-col--imi .imi-compare-col__tier { color: var(--teal-500); }

.imi-compare-col__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.18;
  margin: 0 0 8px;
  letter-spacing: -0.005em;
  color: inherit;
}

/* Optional card image — sits between the title and the bullets */
.imi-compare-col__image-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(14, 37, 64, 0.06);
  margin: 4px 0 4px;
}
.imi-compare-col--imi .imi-compare-col__image-wrap {
  background: rgba(184, 212, 227, 0.08);
}
.imi-compare-col__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.imi-compare-col__list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.imi-compare-col__list li {
  position: relative;
  padding-left: 28px;
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.55;
  color: inherit;
}
.imi-compare-col__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 16px;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
}
.imi-compare-col--imi .imi-compare-col__list li::before {
  background: var(--teal-500);
  opacity: 1;
}

/* Rich text body inside the cards (paragraphs around bullets). Beats the
   legacy section ul/li rules that would otherwise apply font-lato + py-5. */
.imi-compare-col__content {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.imi-compare-col__text,
.imi-compare-col__content p {
  font-family: var(--font-body) !important;
  font-size: 16.5px !important;
  line-height: 1.55 !important;
  color: inherit !important;
  margin: 0 !important;
  padding: 0 !important;
}
.imi-compare-col__content ul {
  margin: 0 !important;
  padding: 0 !important;
}
/* No li margin — the list's grid gap is the single source of bullet spacing. */
.imi-compare-col__content ul li {
  margin: 0 !important;
  padding: 0 0 0 28px !important;
}
/* Defeat the legacy section li::before square shape */
.imi-compare-col__content ul li::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 9px !important;
  width: 16px !important;
  height: 1px !important;
  background: currentColor !important;
  opacity: 0.5 !important;
  border-radius: 0 !important;
}
.imi-compare-col--imi .imi-compare-col__content ul li::before {
  background: var(--teal-500) !important;
  opacity: 1 !important;
}

/* Two-col body (image left, copy right) — replaces design-4's centered body.
   The image wrapper takes its height from the body column via grid stretch;
   the <img> inside fills the wrapper absolutely so its intrinsic size doesn't
   push the row taller. Net result: image grows or shrinks to match the body. */
.imi-compare__body-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 5fr);
  gap: 64px;
  align-items: stretch;
}

.imi-compare__image-wrap {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  background: var(--sky-100);
  min-height: 240px;
}

.imi-compare__image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}

@media (max-width: 1024px) {
  /* Columns stack; let the image use its natural intrinsic height instead. */
  .imi-compare__image-wrap {
    position: relative;
    min-height: 0;
  }
  .imi-compare__image {
    position: static;
    height: auto;
  }
}

.imi-compare__body { max-width: none; margin: 0; }
.imi-compare__subheading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  color: var(--navy-900);
  margin: 32px 0 12px;
}
.imi-compare__cta-row { margin-top: 32px; }

@media (max-width: 1024px) {
  .imi-compare__grid       { grid-template-columns: minmax(0, 1fr); }
  .imi-compare__body-grid  { grid-template-columns: minmax(0, 1fr) !important; gap: 40px; }
}

/* =====================================================================
   SECTION 11 — Your Journey (timeline)
   Port of outputs/design-4.html .imi-journey + .imi-step. Used by acf/your-journey.
   ===================================================================== */

.imi-journey__head { text-align: center; margin-bottom: 56px; }
.imi-journey__head .imi-kicker,
.imi-journey__head .imi-heading,
.imi-journey__head .imi-lead { margin-left: auto; margin-right: auto; }
.imi-journey__head .imi-lead { text-align: center; }

.imi-journey__timeline {
  max-width: 920px;
  margin: 0 auto;
  position: relative;
  padding-left: 100px;
}

/* Solid vertical line — sits to the RIGHT of the step numerals.
   2px wide so it reads at the same stroke weight as the horizontal pointers. */
.imi-journey__timeline::before {
  content: "";
  position: absolute;
  left: 104px;
  top: 24px;
  bottom: 24px;
  width: 2px;
  background: var(--teal-500);
}

.imi-step {
  position: relative;
  padding: 0 0 40px 32px; /* left padding so step copy sits clear of the dotted line */
}
.imi-step:last-child { padding-bottom: 0; }

.imi-step__num {
  position: absolute;
  left: -100px;
  top: 0;
  width: 88px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 56px;
  line-height: 1;
  color: var(--navy-900);
  text-align: center;
  letter-spacing: -0.03em;
}

/* Horizontal teal pointer at the numeral's vertical midline. Sits entirely
   to the right of the numeral's box (16px of clear padding before it starts)
   and ends at the vertical timeline line. */
.imi-step__num::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -16px;
  width: 16px;
  height: 2px;
  background: var(--teal-500);
  transform: translateY(-50%);
  margin: 0;
}

.imi-step__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  color: var(--navy-900);
  margin: 6px 0 10px;
}

.imi-step__body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0;
}
/* Wysiwyg-wrapped body paragraphs (the existing description field auto-wraps) */
.imi-step__body p { margin: 0 0 12px; font-family: inherit; font-size: inherit; line-height: inherit; color: inherit; }
.imi-step__body p:last-child { margin-bottom: 0; }

@media (max-width: 480px) {
  .imi-journey__timeline { padding-left: 64px; }
  /* Vertical line to the right of the numeral rail, same 2px stroke */
  .imi-journey__timeline::before { left: 68px; }
  .imi-step__num { left: -64px; width: 56px; font-size: 40px; }
  /* Pointer entirely outside the numeral box, ending at the vertical line */
  .imi-step__num::after { width: 12px; right: -12px; }
}

/* =====================================================================
   SECTION 12 — FAQs (details/summary accordion)
   Port of outputs/design-4.html .imi-faqs. Used by acf/faqs.
   ===================================================================== */

.imi-faqs__head { text-align: center; margin-bottom: 48px; }
.imi-faqs__head .imi-kicker,
.imi-faqs__head .imi-heading,
.imi-faqs__head .imi-lead { margin-left: auto; margin-right: auto; }
.imi-faqs__head .imi-lead { text-align: center; }

.imi-faqs__list {
  max-width: 820px;
  margin: 0 auto;
  display: grid;
  gap: 14px;
}

.imi-faq {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 12px;
  transition: background 220ms var(--ease-out), border-color 220ms var(--ease-out);
}
.imi-faq:hover { background: var(--sky-100); border-color: var(--sky-300); }
.imi-faq[open] { background: var(--paper); border-color: var(--navy-500); }

.imi-faq__summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  color: var(--navy-900);
  line-height: 1.35;
}
.imi-faq__summary::-webkit-details-marker { display: none; }
.imi-faq__summary::marker { content: ''; }

.imi-faq__chevron {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  color: var(--teal-600);
  transition: transform 240ms var(--ease-out);
}
.imi-faq[open] .imi-faq__chevron { transform: rotate(180deg); }

.imi-faq__answer {
  padding: 0 28px 24px;
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--ink-soft);
}
/* Wysiwyg paragraphs inherit answer typography */
.imi-faq__answer p {
  margin: 0 0 12px;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}
.imi-faq__answer p:last-child { margin-bottom: 0; }
.imi-faq__answer ul,
.imi-faq__answer ol { margin: 0 0 12px; padding-left: 22px; }
.imi-faq__answer ul li,
.imi-faq__answer ol li {
  margin: 0 0 6px;
  font-family: inherit;
  font-size: inherit;
  line-height: 1.55;
  color: inherit;
}

.imi-faqs__cta-row { text-align: center; margin-top: 40px; }

@media (max-width: 767px) {
  .imi-faq__summary { text-align: left; }
  .imi-faq__answer { text-align: center; }
  .imi-faq__answer ul,
  .imi-faq__answer ol { text-align: left; }
}

/* =====================================================================
   SECTION 13 — Contact
   Port of outputs/design-4.html .imi-contact + .imi-form. Used by acf/contact-us.
   ===================================================================== */

.imi-contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 64px;
  align-items: start;
}

/* Phone CTA — teal-rimmed chip with icon + label + number stacked */
.imi-contact__phone-cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin: 24px 0 32px;
  padding: 18px 28px;
  border: 1px solid var(--teal-500);
  border-radius: 4px;
  background: rgba(46, 148, 168, 0.10);
  text-decoration: none;
  color: var(--paper);
  transition: background 220ms var(--ease-out), border-color 220ms var(--ease-out), transform 220ms var(--ease-out);
}
.imi-contact__phone-cta:hover {
  background: var(--teal-600);
  border-color: var(--teal-600);
  color: var(--paper);
  transform: translateY(-2px);
}
.imi-contact__phone-cta-label {
  font-family: var(--font-ui);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sky-300);
  display: block;
  margin-bottom: 4px;
}
.imi-contact__phone-cta-number {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: -0.005em;
}

/* On the deep-teal section background, teal-on-teal elements need to shift:
   the accent rule (teal-600 = exact bg match) goes sky, and the phone chip
   swaps its teal rim/tint for paper tones with a darker-teal hover (its old
   hover bg was also the exact section color). */
.imi-section--teal-deep .imi-rule-accent { background: var(--sky-300); }
.imi-section--teal-deep .imi-contact__phone-cta {
  border-color: rgba(250, 251, 252, 0.45);
  background: rgba(250, 251, 252, 0.08);
}
.imi-section--teal-deep .imi-contact__phone-cta:hover {
  background: var(--teal-deep);
  border-color: rgba(250, 251, 252, 0.65);
}

/* Italic small disclaimer — sits on the navy section bg, below the form card */
.imi-contact__small {
  font-family: var(--font-body);
  font-size: 16px; /* DS-158: was 14.5px, below the 16px body-text floor */
  line-height: 1.6;
  color: rgba(234, 242, 247, 0.85);
  font-style: italic;
  margin: 14px 0 0;
}

/* Prose paragraph(s) below the form card */
.imi-contact__after-form { margin: 24px 0 0; }
.imi-contact__after-form p,
.imi-contact__after-form .imi-body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.72;
  color: var(--paper);
  margin: 0 0 14px;
}
.imi-contact__after-form p:last-child,
.imi-contact__after-form .imi-body:last-child { margin-bottom: 0; }
/* white per Rox 2026-07-07 (was sky-300; and a legacy anchor rule turned it
   teal-on-teal on style.css pages — !important beats both environments) */
.imi-contact__after-form a { color: var(--paper) !important; text-decoration: underline; }
.imi-contact__after-form a:hover { color: var(--sky-300) !important; }

/* Testimonial card placed under the phone CTA in the navy column */
.imi-contact__testimonial {
  margin-top: 0;
  max-width: 480px;
}

/* Form card */
.imi-form {
  background: var(--paper-warm);
  border-radius: 12px;
  padding: 40px 36px 36px;
  color: var(--ink);
}
.imi-form__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  color: var(--navy-900);
  margin: 0 0 6px;
}
.imi-form__subtitle {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink-soft);
  margin: 0 0 26px;
}

/* Gravity Forms restyle inside .imi-form. Lots of !important here because
   GF ships its own opinionated CSS at a high specificity. */
.imi-form .gform_wrapper { margin: 0 !important; }
.imi-form .gform_wrapper .gform_required_legend,
.imi-form .gform_wrapper .gform_heading { display: none !important; }
.imi-form .gform_wrapper form,
.imi-form form.gform_wrapper { display: flex; flex-direction: column; gap: 16px; }

/* Fields grid — uses GF's gfield--width-half / --width-full classes. */
.imi-form .gform_wrapper .gform_fields,
.imi-form .gform_fields {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 16px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Pull the GF honeypot out of grid flow so it doesn't break column counts. */
.imi-form .gform_wrapper .gfield.gform_validation_container,
.imi-form .gform_wrapper .gfield--type-honeypot {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

@media (min-width: 600px) {
  .imi-form .gform_wrapper .gform_fields,
  .imi-form .gform_fields {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  }
  .imi-form .gform_wrapper .gfield.gfield--width-half  { grid-column: span 1 !important; }
  .imi-form .gform_wrapper .gfield.gfield--width-full  { grid-column: 1 / -1 !important; }
  /* Author-classed overrides */
  .imi-form .gform_wrapper .gfield.gf_left_half  { grid-column: 1 !important; }
  .imi-form .gform_wrapper .gfield.gf_right_half { grid-column: 2 !important; }
}

/* Below 600px the grid is one column, but GF's default `grid-column: span 6`
   on half-width fields creates phantom tracks and squeezes the inputs. Force
   every field to span the single column so inputs are full-width on mobile. */
@media (max-width: 599px) {
  .imi-form .gform_wrapper .gfield,
  .imi-form .gform_wrapper .gfield.gf_left_half,
  .imi-form .gform_wrapper .gfield.gf_right_half,
  .imi-form .gform_wrapper .gfield.gfield--width-half { grid-column: 1 / -1 !important; }
}

.imi-form .gform_wrapper .gfield {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.imi-form .gform_wrapper .gfield_label,
.imi-form .gform_wrapper label.gfield_label,
.imi-form .gfield_label {
  font-family: var(--font-ui) !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--ink-soft) !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.4 !important;
}

.imi-form .gform_wrapper input[type="text"],
.imi-form .gform_wrapper input[type="email"],
.imi-form .gform_wrapper input[type="tel"],
.imi-form .gform_wrapper input[type="url"],
.imi-form .gform_wrapper input[type="number"],
.imi-form .gform_wrapper select,
.imi-form .gform_wrapper textarea {
  font-family: var(--font-ui) !important;
  font-size: 15px !important;
  padding: 14px 16px !important;
  background: var(--paper) !important;
  border: 1.5px solid var(--rule) !important;
  border-radius: 4px !important;
  color: var(--ink) !important;
  transition: border-color 220ms var(--ease-out), box-shadow 220ms var(--ease-out) !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  line-height: 1.4 !important;
  height: auto !important;
}
.imi-form .gform_wrapper textarea {
  min-height: 120px !important;
  resize: vertical !important;
  font-family: var(--font-body) !important;
  line-height: 1.5 !important;
}
.imi-form .gform_wrapper input:focus,
.imi-form .gform_wrapper select:focus,
.imi-form .gform_wrapper textarea:focus {
  outline: none !important;
  border-color: var(--navy-700) !important;
  box-shadow: 0 0 0 3px var(--sky-300) !important;
}

/* Submit button — matches imi-btn--accent shape */
.imi-form .gform_wrapper .gform_footer,
.imi-form .gform_footer {
  margin: 8px 0 0 !important;
  padding: 0 !important;
  display: block !important;
}
.imi-form .gform_wrapper .gform_button,
.imi-form .gform_wrapper button.gform_button,
.imi-form input.gform_button,
.imi-form .gform_button,
.imi-form__submit {
  display: inline-block !important;
  width: 100% !important;
  font-family: var(--font-ui) !important;
  font-weight: 600 !important;
  font-size: 12.5px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  padding: 18px 28px !important;
  background: var(--navy-900) !important;
  background-color: var(--navy-900) !important;
  background-image: none !important;
  border: 1px solid var(--navy-900) !important;
  border-radius: 4px !important;
  color: var(--paper) !important;
  cursor: pointer !important;
  transition: background 220ms var(--ease-out), border-color 220ms var(--ease-out), transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out) !important;
  margin-top: 8px !important;
  box-shadow: none !important;
  text-decoration: none !important;
  line-height: 1.2 !important;
  height: auto !important;
}
.imi-form .gform_wrapper .gform_button:hover,
.imi-form input.gform_button:hover,
.imi-form .gform_button:hover,
.imi-form__submit:hover {
  background: var(--navy-700) !important;
  background-color: var(--navy-700) !important;
  border-color: var(--navy-700) !important;
  color: var(--paper) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.20) !important;
}
/* The arrow in the submit button is a legacy ::after on the .gform-footer
   wrapper (style.css), not on the input — so the button's hover lift leaves
   it behind. Mirror the -2px rise on the arrow; hovering the wrapper covers
   exactly the button's hit area. Base transform is the -50% vertical center. */
.imi-form .gform-footer:after {
  transition: transform 220ms var(--ease-out);
}
.imi-form .gform-footer:hover:after {
  transform: translateY(calc(-50% - 2px));
}

/* GF validation, file upload, and confirmation messages */
.imi-form .gform_wrapper .gfield_required { color: var(--teal-600) !important; margin-left: 4px !important; }
.imi-form .gform_wrapper .validation_message {
  font-family: var(--font-ui) !important;
  font-size: 12px !important;
  color: #c2453a !important;
  margin-top: 4px !important;
}
.imi-form .gform_confirmation_wrapper {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--ink);
  padding: 24px 0;
}
/* File upload tile */
.imi-form .gform_wrapper .gform_drop_area,
.imi-form .gform_wrapper .gform_fileupload_rules {
  font-family: var(--font-ui) !important;
  font-size: 13px !important;
  color: var(--ink-soft) !important;
  background: var(--paper) !important;
  border: 1.5px dashed var(--rule) !important;
  border-radius: 4px !important;
}
.imi-form .gform_wrapper .gform_drop_instructions { color: var(--ink) !important; }
.imi-form .gform_wrapper .gform_drop_input + .button,
.imi-form .gform_wrapper .gform_button_select_files {
  background: transparent !important;
  border: 0 !important;
  color: var(--teal-600) !important;
  font-family: var(--font-ui) !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  text-decoration: underline !important;
  /* DS-158 touch-up: padding 0->15px for a 44px tap target (was 15px)
     — this field is required now, so it needs a real tap target. Not
     display:flex (no JS toggles this element, but keeping the pattern
     consistent with the Read More fix). */
  padding: 15px 8px !important;
  cursor: pointer !important;
}
.imi-form .gform_wrapper .gfield_description,
.imi-form .gform_wrapper .gform_fileupload_rules {
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  color: var(--ink-soft) !important;
  line-height: 1.5 !important;
}

@media (max-width: 1024px) {
  .imi-contact__grid { grid-template-columns: minmax(0, 1fr) !important; gap: 40px; }
}

/* =====================================================================
   SECTION 6 — Global Outreach / Conferences map + carousel
   Port of outputs/design-4.html .imi-outreach + .imi-conf*.
   Used by acf/global-outreach.
   ===================================================================== */

.imi-outreach__grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
  gap: 64px;
  align-items: center;
  margin-bottom: 56px;
}

.imi-outreach__map-wrap {
  position: relative;
  aspect-ratio: 16 / 10;
  background: #FFFFFF;
  border: 1px solid rgba(184, 212, 227, 0.22);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.20);
}

.imi-outreach__map-leaflet {
  width: 100%;
  height: 100%;
  background: #FFFFFF;
  outline: none;
}

/* Leaflet adds .leaflet-container to the map div with its own default
   background (#ddd). Force white so the ocean/empty space reads clean. */
.imi-outreach__map-wrap .leaflet-container,
.leaflet-container.imi-outreach__map-leaflet {
  background: #FFFFFF !important;
}

/* Conference pins (Leaflet DivIcon HTML) */
.imi-conf-pin {
  width: 18px;
  height: 18px;
  position: relative;
  pointer-events: auto;
}

.imi-conf-pin__dot {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--teal-600);
  border: 2px solid var(--paper);
  box-shadow: 0 2px 6px rgba(14, 37, 64, 0.30);
  transition: transform 200ms var(--ease-out);
}

.imi-conf-pin__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--teal-500);
  opacity: 0;
  animation: imi-conf-pin-pulse 2.4s ease-out infinite;
}

@keyframes imi-conf-pin-pulse {
  0%   { transform: scale(0.6); opacity: 0.9; }
  100% { transform: scale(3.0); opacity: 0; }
}

.imi-conf-pin:hover .imi-conf-pin__dot {
  transform: scale(1.25);
}

/* Leaflet tooltip styling for conference pins */
.leaflet-tooltip.imi-conf-tooltip {
  background: var(--navy-900);
  color: var(--paper);
  border: 1px solid rgba(184, 212, 227, 0.25);
  border-radius: 6px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.30);
  padding: 10px 14px;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  line-height: 1.4;
}
.leaflet-tooltip.imi-conf-tooltip::before { display: none; }
.imi-conf-tooltip__city { color: var(--paper); display: block; }
.imi-conf-tooltip__date {
  color: var(--sky-300);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  margin-top: 4px;
  display: block;
}

/* Conferences carousel */
.imi-conf-carousel {
  position: relative;
}

.imi-conf-rail {
  display: grid;
  grid-template-columns: repeat(7, minmax(220px, 1fr));
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.imi-conf-rail::-webkit-scrollbar { display: none; }

.imi-conf-card {
  scroll-snap-align: start;
  background: var(--navy-700);
  border: 1px solid rgba(184,212,227,0.12);
  border-radius: 8px;
  padding: 22px 22px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 220px;
  transition: border-color 220ms var(--ease-out), transform 220ms var(--ease-out);
}
.imi-conf-card:hover { border-color: var(--teal-500); transform: translateY(-2px); }

.imi-conf-card__city {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  color: var(--paper);
  line-height: 1.2;
}
.imi-conf-card__date {
  font-family: var(--font-ui);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sky-300);
}
.imi-conf-card__link {
  margin-top: auto;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--teal-500);
  text-decoration: none;
  transition: color 200ms var(--ease-out), letter-spacing 200ms var(--ease-out);
  /* DS-160: padding (not a display change — already a blockified flex
     item) carries the extra height to a 44px tap target; was ~18px. */
  padding: 13px 0;
}
.imi-conf-card__link:hover { color: var(--paper); letter-spacing: 0.22em; }

.imi-conf-carousel__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--paper);
  color: var(--navy-900);
  border: 0;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.30);
  transition: transform 220ms var(--ease-out), opacity 220ms var(--ease-out), background 220ms var(--ease-out);
}
.imi-conf-carousel__btn:hover {
  background: var(--teal-600);
  color: var(--paper);
  transform: translateY(-50%) scale(1.06);
}
.imi-conf-carousel__btn:disabled {
  opacity: 0;
  pointer-events: none;
}
.imi-conf-carousel__btn svg { width: 18px; height: 18px; display: block; }
.imi-conf-carousel__btn--prev { left: -22px; }
.imi-conf-carousel__btn--next { right: -22px; }

@media (max-width: 1024px) {
  .imi-outreach__grid { grid-template-columns: minmax(0, 1fr) !important; gap: 40px; }
  .imi-conf-rail { grid-template-columns: repeat(7, 240px); }
}
@media (max-width: 640px) {
  /* DS-160: was 38x38, below the 44px tap-target floor — dropped the
     mobile size override so the base 44x44 (line ~2187) applies here too. */
  .imi-conf-carousel__btn--prev { left: 4px; }
  .imi-conf-carousel__btn--next { right: 4px; }
}

/* =====================================================================
   SECTION 7 — What We Do (CSS-radio tabs)
   Port of outputs/design-4.html .imi-tabs. Used by acf/tabs.
   Per-tab active/panel rules are inlined per block instance because
   they depend on dynamic IDs from the ACF repeater.
   ===================================================================== */

.imi-tabs__head { text-align: center; margin-bottom: 48px; }
.imi-tabs__head .imi-kicker,
.imi-tabs__head .imi-heading,
.imi-tabs__head .imi-lead { margin-left: auto; margin-right: auto; }
.imi-tabs__head .imi-lead { text-align: center; }

.imi-tabs__triggers {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 48px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 56px;
}

.imi-tabs input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.imi-tabs__trigger {
  position: relative;
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  cursor: pointer;
  padding: 0 4px 20px;
  transition: color 220ms var(--ease-out);
}

.imi-tabs__trigger::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--teal-500);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 260ms var(--ease-out);
}

.imi-tabs__trigger:hover { color: var(--navy-900); }

.imi-tabs__panel {
  display: none;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: 56px;
  align-items: start;
}

.imi-tabs__panel-body .imi-body { color: var(--ink-soft); }

/* Link hover inside the tabs panel — teal, beating the legacy global
   `ul li > a:hover { color: #ED9B1B !important }` rule in tailwind.css */
.imi-tabs__panel-body a:hover,
.imi-tabs__panel-body ul li > a:hover {
  color: var(--teal-600) !important;
}

.imi-tabs__list {
  list-style: none;
  margin: 16px 0 32px;
  padding: 0;
  display: grid;
  gap: 10px;
}
.imi-tabs__list li {
  position: relative;
  padding-left: 22px;
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--ink-soft);
}
.imi-tabs__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  width: 10px;
  height: 1px;
  background: var(--teal-600);
}

.imi-tabs__bullets-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--navy-900);
  text-transform: none;
  margin: 22px 0 8px;
}

.imi-tabs__art {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 12px;
  overflow: hidden;
  padding: 32px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 14px;
}

.imi-tabs__art-cell {
  border-radius: 6px;
  background: var(--sky-100);
  display: flex;
  align-items: center;
  justify-content: center;
}
.imi-tabs__art-cell--accent { background: var(--navy-900); }
.imi-tabs__art-cell--teal   { background: var(--teal-600); }
.imi-tabs__art-cell svg     { width: 40%; height: 40%; opacity: 0.85; }

/* Photo variant — replaces the SVG grid with an edge-to-edge image */
.imi-tabs__art--photo {
  padding: 0;
  display: block;
}
.imi-tabs__art--photo .imi-tabs__art-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 1024px) {
  .imi-tabs__panel { grid-template-columns: minmax(0, 1fr) !important; gap: 40px; }
}

/* =====================================================================
   SECTION 9 — Testimonials (dark teal)
   Port of outputs/design-4.html .imi-testimonials + .imi-t-card.
   Used by acf/testimonials. Splide carousel + sort/pager controls
   retained from the existing block; restyled with IMI tokens.
   ===================================================================== */

.imi-testimonials__head {
  text-align: center;
  margin-bottom: 56px;
}
.imi-testimonials__head .imi-kicker,
.imi-testimonials__head .imi-heading,
.imi-testimonials__head .imi-lead { margin-left: auto; margin-right: auto; }

.imi-testimonials__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}

/* Card */
.imi-t-card {
  background: var(--paper-warm);
  border-radius: 12px;
  padding: 36px 32px 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: relative;
  height: 100%;
}

.imi-t-card__stars {
  display: flex;
  gap: 4px;
}
.imi-t-card__star {
  width: 14px;
  height: 14px;
  color: #F4B400; /* Google review gold */
}

.imi-t-card__quote {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 17.5px;
  line-height: 1.6;
  color: var(--navy-700);
  margin: 0;
  flex: 1;
}
.imi-t-card__quote p { margin: 0 0 12px; }
.imi-t-card__quote p:last-child { margin-bottom: 0; }

.imi-t-card__author {
  border-top: 1px solid var(--sand-200);
  padding-top: 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  color: var(--navy-900);
  letter-spacing: 0.02em;
}
.imi-t-card__author-text { min-width: 0; flex: 1; }
.imi-t-card__author span {
  display: block;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 4px;
}

/* Circle avatar — Google reviewer photo from the testimonial's featured image */
.imi-t-card__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  display: block;
  background: var(--sand-200);
}
/* Initials fallback when no thumbnail was imported */
.imi-t-card__avatar--initials {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  background: radial-gradient(ellipse 80% 70% at 50% 45%, #1F3A5F 0%, #142a4a 55%, #0E2540 100%) !important;
  color: var(--paper) !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  line-height: 1 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  text-align: center !important;
}

/* Read More / Read Less inside testimonial cards — beat the legacy
   .secondary-btn pill styling and render as a small uppercase teal link. */
.imi-t-card + .shorten-controls,
.imi-t-card__quote + .shorten-controls {
  margin-top: 8px !important;
}
.imi-t-card .shorten-expand,
.imi-t-card .shorten-collapse,
.imi-t-card ~ .shorten-controls .shorten-expand,
.imi-t-card ~ .shorten-controls .shorten-collapse,
.imi-t-card__quote ~ .shorten-controls .shorten-expand,
.imi-t-card__quote ~ .shorten-controls .shorten-collapse {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--ink-soft) !important;
  /* DS-158: padding (not display:flex) carries the extra height to a 44px
     tap target — app.js toggles Read More/Read Less via inline
     style.display, and a stylesheet !important on display would beat
     that and leave both labels showing at once. */
  padding: 17px 0 !important;
  border-radius: 0 !important;
  border: 0 !important;
  font-family: var(--font-ui) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  text-decoration: underline !important;
  text-underline-offset: 4px !important;
  cursor: pointer;
  transition: color 200ms var(--ease-out), letter-spacing 200ms var(--ease-out) !important;
}
.imi-t-card .shorten-expand:hover,
.imi-t-card .shorten-collapse:hover,
.imi-t-card ~ .shorten-controls .shorten-expand:hover,
.imi-t-card ~ .shorten-controls .shorten-collapse:hover,
.imi-t-card__quote ~ .shorten-controls .shorten-expand:hover,
.imi-t-card__quote ~ .shorten-controls .shorten-collapse:hover {
  color: var(--ink) !important;
  letter-spacing: 0.20em !important;
  opacity: 1 !important;
}

/* Dot indicators (Splide pagination overrides) */
.imi-testimonials__dots,
.imi-testimonials .splide__pagination {
  display: flex !important;
  justify-content: center;
  gap: 10px;
  margin-top: 40px;
  padding: 0;
  position: relative;
  bottom: auto;
}
.imi-testimonials__dot,
.imi-testimonials .splide__pagination__page {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(250,251,252,0.30);
  margin: 0;
  opacity: 1;
  transform: none;
  border: 0;
  padding: 0;
}
.imi-testimonials__dot--active,
.imi-testimonials .splide__pagination__page.is-active {
  background: var(--paper);
  width: 28px;
  border-radius: 4px;
  transform: none;
}

/* Splide carousel — paper-circle arrows on teal */
.imi-testimonials .splide__arrow {
  width: 44px !important;
  height: 44px !important;
  background: var(--paper) !important;
  color: var(--navy-900) !important;
  border-radius: 50% !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.30) !important;
  opacity: 1 !important;
}
.imi-testimonials .splide__arrow:hover {
  background: var(--navy-900) !important;
  color: var(--paper) !important;
}
.imi-testimonials .splide__arrow svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}
.imi-testimonials .splide { margin: 0 60px; }
.imi-testimonials .splide__arrow--prev { left: -60px !important; }
.imi-testimonials .splide__arrow--next { right: -60px !important; }
/* gallery-page review carousel (not wrapped in .imi-testimonials) — same 44px tap target */
#client-testimonials .splide__arrow { width: 44px !important; height: 44px !important; }

/* Google rating row + sort/pager controls — paper on teal */
.imi-testimonials__rating {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 8px auto 32px;
  color: var(--paper);
  font-family: var(--font-ui);
  font-size: 14px;
  justify-content: center;
  align-items: center;
  text-align: center;
}
@media (min-width: 1024px) {
  .imi-testimonials__rating { flex-direction: row; gap: 24px; }
}
.imi-testimonials__rating-score,
.imi-testimonials__rating-count {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--paper);
}
.imi-testimonials__rating-stars { display: inline-flex; gap: 4px; }
.imi-testimonials__rating-stars svg { width: 16px; height: 16px; }
.imi-testimonials__rating-google {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--paper);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.imi-testimonials__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 32px;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper);
}
.imi-testimonials__controls a,
.imi-testimonials__controls button {
  font: inherit;
  letter-spacing: inherit;
  color: var(--paper);
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 6px 12px;
  /* DS-158: min-height 44px (was ~27-32px) for tap-target compliance; flex
     centering keeps the small uppercase label vertically centered rather
     than top-aligned in the taller box. */
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  text-decoration: none;
  opacity: 0.65;
  transition: opacity 200ms var(--ease-out), background 200ms var(--ease-out);
}
.imi-testimonials__controls a:hover,
.imi-testimonials__controls button:hover { opacity: 1; }
.imi-testimonials__controls .sort-link.is-active {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.imi-testimonials__controls .pager-btn {
  border: 1px solid rgba(250, 251, 252, 0.45);
}
.imi-testimonials__controls .pager-btn:hover {
  background: rgba(250, 251, 252, 0.10);
}
.imi-testimonials__controls .label { opacity: 0.65; }

@media (max-width: 1024px) {
  .imi-testimonials__grid { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin: 0 auto; }
  .imi-testimonials .splide { margin: 0; }
  .imi-testimonials .splide__arrow--prev { left: 4px !important; }
  .imi-testimonials .splide__arrow--next { right: 4px !important; }
}

/* =====================================================================
   VIDEO LIGHTBOX — opens YouTube embeds from any element with [data-video-id]
   Port of outputs/design-4.html .imi-lightbox. Triggered by the Section 3
   video card; reusable for any future video CTAs.
   ===================================================================== */

.imi-lightbox {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 280ms var(--ease-out), visibility 280ms var(--ease-out);
}
.imi-lightbox[hidden] { display: none !important; }
.imi-lightbox.is-open { opacity: 1; visibility: visible; }
.imi-lightbox.is-open[hidden] { display: flex !important; }

.imi-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 26, 46, 0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  appearance: none;
}

.imi-lightbox__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1100px;
  background: #000;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
  transform: scale(0.96);
  transition: transform 320ms var(--ease-out);
}
.imi-lightbox.is-open .imi-lightbox__inner { transform: scale(1); }

.imi-lightbox__video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
}
.imi-lightbox__video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.imi-lightbox__close {
  position: absolute;
  top: -44px;
  right: 0;
  z-index: 2;
  background: transparent;
  border: 0;
  padding: 8px;
  color: var(--paper);
  cursor: pointer;
  opacity: 0.9;
  transition: opacity 200ms var(--ease-out);
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.imi-lightbox__close:hover { opacity: 1; }

body.imi-no-scroll { overflow: hidden; }

@media (max-width: 768px) {
  .imi-lightbox { padding: 20px; }
  .imi-lightbox__close { top: -38px; font-size: 11px; }
}

/* =====================================================================
   SECTION 2.5 — Global Leadership (Impact map + floating stat cards)
   Port of outputs/design-4.html .imi-impact. Used by acf/imi-impact.
   ===================================================================== */

.imi-impact {
  background: var(--paper);
  padding: 120px 48px 140px;
}
.imi-impact__wrap {
  max-width: 1240px;
  margin: 0 auto;
}

.imi-impact__header {
  max-width: 920px;
  margin: 0 auto 56px;
  text-align: center;
}
.imi-impact__kicker {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal-600);
  margin: 0 0 20px;
}
.imi-impact__heading {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 48px;
  line-height: 1.1;
  color: var(--navy-900);
  margin: 0;
  letter-spacing: -0.01em;
}
.imi-impact__heading em { font-style: italic; font-weight: 500; }
.imi-impact__heading-rule {
  border: 0;
  width: 60px;
  height: 1px;
  background: var(--teal-600);
  margin: 28px auto 28px;
}
.imi-impact__lead {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 720px;
  margin: 0 auto;
}

.imi-impact__map-wrap {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 12px;
  overflow: hidden;
  min-height: 560px;
}
.imi-impact__map {
  width: 100%;
  height: 560px;
  background: var(--paper);
  outline: none;
}
/* Strip Leaflet defaults inside the impact frame */
.imi-impact__map .leaflet-container,
.leaflet-container.imi-impact__map {
  background: var(--paper) !important;
  font-family: var(--font-ui);
  outline: none;
}
.imi-impact__map .leaflet-control-attribution {
  background: rgba(250, 251, 252, 0.85);
  color: var(--ink-soft);
  font-size: 9px;
  padding: 2px 6px;
  border-radius: 2px;
}
.imi-impact__map .leaflet-control-attribution a { color: var(--teal-600); }
.imi-impact__map .leaflet-interactive { outline: none; }

/* Hover tooltip — navy chip matching .imi-conf-tooltip family */
.imi-impact__tooltip.leaflet-tooltip {
  background: var(--navy-900);
  color: var(--paper);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 0;
  border-radius: 0;
  padding: 6px 10px;
  box-shadow: 0 4px 12px rgba(14, 37, 64, 0.18);
}
.imi-impact__tooltip.leaflet-tooltip::before { display: none; }

/* Stat cards stacked + anchored left/right of the map */
.imi-impact__cards {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  grid-template-columns: minmax(150px, 175px);
  gap: 14px;
  z-index: 1000;
  pointer-events: none;
}
.imi-impact__cards--left  { left: 1.5%; }
.imi-impact__cards--right { right: 1.5%; }

.imi-impact__card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 24px 28px;
  box-shadow: 0 4px 12px rgba(14, 37, 64, 0.08);
  pointer-events: auto;
}
.imi-impact__card-eyebrow {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--teal-600);
  margin: 0 0 10px;
}
.imi-impact__card-figure {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 38px;
  line-height: 1;
  color: var(--navy-900);
  margin: 0 0 10px;
  letter-spacing: -0.02em;
  display: block;
}
.imi-impact__card-figure-prefix { display: inline; }
.imi-impact__card-caption {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.4;
  color: var(--navy-700);
  margin: 0;
}

/* Closing quote */
.imi-impact__closing {
  max-width: 880px;
  margin: 64px auto 0;
  text-align: center;
}
.imi-impact__closing-rule {
  border: 0;
  width: 60px;
  height: 1px;
  background: var(--teal-600);
  margin: 0 auto 28px;
}
.imi-impact__closing-quote {
  font-family: var(--font-display);
  font-weight: 600;
  font-style: italic;
  font-size: 24px;
  line-height: 1.4;
  color: var(--navy-900);
  margin: 0 0 36px;
  letter-spacing: -0.005em;
}
.imi-impact__cta-row {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

@media (max-width: 1024px) {
  .imi-impact { padding: 96px 32px 112px; }
  .imi-impact__heading { font-size: 36px; }
  /* Cards fall below the map and lay out in a flexible grid */
  .imi-impact__map-wrap { overflow: visible; }
  .imi-impact__map { height: 420px; }
  .imi-impact__cards {
    position: static;
    transform: none;
    top: auto;
    left: auto;
    right: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 24px;
  }
  .imi-impact__cards--left,
  .imi-impact__cards--right { left: auto; right: auto; }
}
@media (max-width: 640px) {
  .imi-impact { padding: 80px 20px 96px; }
  .imi-impact__heading { font-size: 36px; } /* DS-160: was 28px, below the 36px mobile H2 floor */
  .imi-impact__map { height: 340px; }
  .imi-impact__cards { grid-template-columns: minmax(0, 1fr); }
}
/* Mobile body-text floor: the stat caption reads as body, so it must
   meet the >=16px phone minimum (it is 15px on desktop). See the IMI
   mobile styling rules (type floors) in CLAUDE.md. */
@media (max-width: 767px) {
  .imi-impact__card-caption { font-size: 16px; }
}

/* =================================================================
   SCROLL REVEAL — shared entrance animations for IMI blocks.
   Hidden state is gated behind html.imi-anim (added by imi-reveal.js)
   so content is never hidden in the editor, with JS off, or under
   prefers-reduced-motion. The JS strips these classes after each
   entrance completes, restoring native hover transforms/transitions.
   Bare .imi-reveal = fade only — use for wrappers that own their
   transforms (Splide track, brands marquee, Leaflet maps).
   ================================================================= */
/* Pre-reveal translateX states extend the document's scrollable area
   until elements animate in — clip it so reveals can never cause a
   horizontal scroll / white strip on mobile. */
html.imi-anim { overflow-x: clip; }

html.imi-anim .imi-reveal {
  opacity: 0;
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}
html.imi-anim .imi-reveal--up    { transform: translateY(30px); }
html.imi-anim .imi-reveal--left  { transform: translateX(-44px); }
html.imi-anim .imi-reveal--right { transform: translateX(44px); }
html.imi-anim .imi-reveal--scale { transform: scale(0.94); }
html.imi-anim .imi-reveal.is-inview { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.imi-anim .imi-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* =================================================================
   SITE NAV — frosted navy fixed header, ported from outputs/design-4
   (.imi-nav). Markup lives in header-new.php; mobile menu + scrolled
   state behavior in assets/dist/js/imi-nav.js.
   ================================================================= */
:root { --imi-nav-h: 87px; } /* fallback; imi-nav.js syncs to measured height */

.imi-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  /* Above Leaflet panes (200-700) and the impact section's stat cards (1000) */
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 48px;
  background: rgba(255, 255, 255, 0.72);
  /* backdrop-filter is applied on ::before, NOT here: a non-none
     backdrop-filter/filter/transform makes the element the containing block
     for its position:fixed descendants, which collapsed the mobile slide-in
     drawer (.imi-nav__links) to the nav's own height. Keeping it on a pseudo
     preserves the frosted bar while letting the drawer fill the viewport. */
  border-bottom: 1px solid rgba(10, 26, 46, 0.08);
  transition: background 400ms var(--ease-out);
}
.imi-nav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  pointer-events: none;
}
.imi-nav--scrolled { background: rgba(255, 255, 255, 0.92); }
body.admin-bar .imi-nav { top: 32px; }
@media (max-width: 782px) {
  body.admin-bar .imi-nav { top: 46px; }
}

/* Interior pages (white backgrounds) need their content pushed below
   the fixed bar; the homepage hero is full-bleed and slides under it. */
body:not(.home):has(.imi-nav) main { padding-top: var(--imi-nav-h); }

.imi-nav__logo-lockup {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}

.imi-nav__logo {
  display: block;
  height: 60px;
  width: auto;
  flex-shrink: 0;
}

.imi-nav__links {
  display: flex;
  align-items: center;
  gap: 36px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.imi-nav__links li { position: relative; list-style: none; }

.imi-nav__links > li > a {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  position: relative;
  display: inline-block;
  padding: 6px 0;
  white-space: nowrap;
  transition: letter-spacing 220ms var(--ease-out), color 220ms var(--ease-out);
}
.imi-nav__links > li > a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: var(--teal-600);
  transition: width 240ms var(--ease-out);
}
.imi-nav__links > li > a:hover {
  letter-spacing: 0.20em;
  color: var(--teal-600);
}
.imi-nav__links > li > a:hover::after { width: 100%; }

/* Chevron marker on items with dropdowns */
.imi-nav__links > li.menu-item-has-children > a { padding-right: 16px; }
.imi-nav__links > li.menu-item-has-children > a::before {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -5px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.7;
}

/* --- Desktop dropdowns (frosted white panels) --- */
.imi-nav__links .sub-menu {
  position: absolute;
  top: 100%;
  left: -20px;
  min-width: 250px;
  margin: 0;
  padding: 10px 0;
  list-style: none;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgba(10, 26, 46, 0.08);
  border-radius: 8px;
  box-shadow: 0 18px 40px rgba(14, 37, 64, 0.18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out), visibility 0s linear 220ms;
}
/* Invisible hover bridge between the link and its panel */
.imi-nav__links > li > .sub-menu::before {
  content: "";
  position: absolute;
  top: -14px;
  left: 0;
  right: 0;
  height: 14px;
}
.imi-nav__links li:hover > .sub-menu,
.imi-nav__links li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(6px);
  transition-delay: 0s;
}
.imi-nav__links .sub-menu a {
  display: block;
  padding: 9px 22px;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 12.5px;
  letter-spacing: 0.05em;
  color: var(--ink);
  text-decoration: none;
  transition: color 180ms var(--ease-out), background 180ms var(--ease-out);
}
.imi-nav__links .sub-menu a:hover {
  color: var(--teal-600);
  background: rgba(31, 122, 140, 0.08);
}
/* Third-level flyout opens beside its parent */
.imi-nav__links .sub-menu .sub-menu {
  top: -11px;
  left: 100%;
}
.imi-nav__links .sub-menu li.menu-item-has-children > a {
  padding-right: 30px;
  position: relative;
}
.imi-nav__links .sub-menu li.menu-item-has-children > a::before {
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-right: 1px solid currentColor;
  border-top: 1px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.7;
}

/* DS-158: header phone — icon + number, tel: link, sits between the mega
   nav and the CTA in normal flow (mobile/tablet); repositioned absolute
   next to the CTA in the ≥1281px plaque header so it doesn't disturb the
   centered .imi-nav__links (see that media block below). */
.imi-nav__phone {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 4px 6px;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.03em;
  color: var(--navy-900);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color 220ms var(--ease-out);
}
.imi-nav__phone svg { width: 16px; height: 16px; flex-shrink: 0; }
.imi-nav__phone:hover { color: var(--teal-600); }

.imi-nav__cta {
  display: inline-block;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--navy-900);
  background: transparent;
  border: 1px solid var(--navy-900);
  border-radius: 4px;
  padding: 12px 22px;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 240ms var(--ease-out), border-color 240ms var(--ease-out), transform 240ms var(--ease-out);
}
.imi-nav__cta:hover {
  background: var(--teal-600);
  border-color: var(--teal-600);
  transform: translateY(-1px);
  color: var(--paper);
}

/* --- Burger (mobile only) --- */
.imi-nav__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; /* DS-158: was 40px, below the 44px tap-target floor */
  height: 44px;
  padding: 8px;
  background: transparent;
  border: 0;
  cursor: pointer;
  flex-shrink: 0;
}
.imi-nav__burger span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--navy-900);
  border-radius: 1px;
  transition: transform 280ms var(--ease-out), opacity 200ms var(--ease-out);
}
.imi-nav.is-open .imi-nav__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.imi-nav.is-open .imi-nav__burger span:nth-child(2) { opacity: 0; }
.imi-nav.is-open .imi-nav__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile submenu toggle buttons (injected by imi-nav.js) */
.imi-nav__subtoggle { display: none; }

/* =================================================================
   PLAQUE-DROP HEADER (approved 2026-07-06): slim frosted 64px bar,
   links centered, CTA pinned right, logo on a frosted plaque that
   hangs below the bar. On scroll (.imi-nav--scrolled, imi-nav.js)
   the plaque collapses to a standard in-bar logo. Desktop only —
   at ≤1280px the nav falls back to the burger layout below.
   The plaque's backdrop-filter is safe: it is a SIBLING of the
   fixed drawer, not an ancestor (see the .imi-nav::before note).
   ================================================================= */
@media (min-width: 1281px) {
  .imi-nav {
    /* Plaque + CTA align with the section container (imi-wrap 1240px) on
       wide screens instead of hugging the viewport edge. Landing pages
       override --imi-nav-edge to match their own container width. */
    --imi-nav-edge: max(48px, calc((100% - 1240px) / 2));
    justify-content: center;
    height: 64px;
    padding: 0 48px;
    background: rgba(253, 252, 250, 0.46);
  }
  .imi-nav--scrolled { background: rgba(255, 255, 255, 0.92); }
  .imi-nav__logo-lockup {
    position: absolute;
    top: 0;
    left: var(--imi-nav-edge, 48px);
    display: flex;
    align-items: center;
    padding: 16px; /* equal padding around the logo */
    /* Higher fill opacity than the hero panel: the plaque sits over the
       autoplaying hero video, and a low-alpha backdrop-blur over moving
       video shimmers/flickers. A steadier fill keeps the frost look
       without sampling the video so visibly. */
    background: rgba(253, 252, 250, 0.72);
    -webkit-backdrop-filter: blur(20px) saturate(135%);
    backdrop-filter: blur(20px) saturate(135%);
    border: 1px solid rgba(255, 255, 255, 0.75);
    border-top: 0;
    border-radius: 0 0 18px 18px;
    box-shadow: 0 22px 44px -18px rgba(10, 26, 46, 0.3);
    transition: top 300ms var(--ease-out), transform 300ms var(--ease-out),
      padding 300ms var(--ease-out), background 300ms var(--ease-out),
      box-shadow 300ms var(--ease-out), border-color 300ms var(--ease-out);
  }
  .imi-nav__logo { height: 80px; transition: height 300ms var(--ease-out); }
  .imi-nav__cta { position: absolute; right: var(--imi-nav-edge, 48px); top: 50%; transform: translateY(-50%); }
  /* The generic .imi-nav__cta:hover lift (translateY(-1px)) would REPLACE
     the -50% centering transform and drop the button half out of the bar —
     keep the centering and fold the lift into it. */
  .imi-nav__cta:hover { transform: translateY(calc(-50% - 1px)); }
  /* DS-158: phone sits left of the CTA, same absolute-right pattern, so it
     doesn't join the flex flow and shift the centered .imi-nav__links. */
  .imi-nav__phone {
    position: absolute;
    right: calc(var(--imi-nav-edge, 48px) + 172px);
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
  }
  .imi-nav__phone:hover { transform: translateY(calc(-50% - 1px)); }
  /* Collapsed (scrolled) state: plaque melts into the bar, logo stays
     vertically centered (top+transform animate; height:100% did not, and
     let the shrinking logo ride up out of the bar). */
  .imi-nav--scrolled .imi-nav__logo-lockup {
    top: 50%;
    transform: translateY(-50%);
    padding: 0;
    background: transparent;
    /* backdrop-filter intentionally NOT reset to none: toggling the filter
       on/off mid-transition is another flicker source; inside the already-
       frosted bar a persistent blur is invisible and harmless. */
    border-color: transparent;
    border-radius: 0;
    box-shadow: none;
  }
  .imi-nav--scrolled .imi-nav__logo { height: 40px; }
}
/* Narrow desktops: step the plaque logo down so the centered links clear it */
@media (min-width: 1281px) and (max-width: 1440px) {
  .imi-nav__logo { height: 68px; }
}

@media (max-width: 1200px) {
  .imi-nav { padding: 16px 28px; }
  .imi-nav__links { gap: 24px; }
}

@media (max-width: 1280px) {
  :root { --imi-nav-h: 69px; } /* fallback; JS-synced */
  .imi-nav { padding: 14px 20px; }
  .imi-nav__logo { height: 46px; }
  .imi-nav__cta { padding: 9px 14px; font-size: 12px; min-height: 44px; display: inline-flex; align-items: center; } /* DS-158: was ~40px tall */
  .imi-nav__burger { display: flex; }
  html.imi-nav-lock,
  html.imi-nav-lock body { overflow: hidden; }
  /* DS-158: .imi-nav__links is position:fixed here (drawer, below), so it
     drops out of normal flex flow — margin-left:auto on phone groups
     [phone, cta, burger] at the right edge while the logo stays left. */
  .imi-nav__phone { margin-left: auto; font-size: 12px; padding: 4px; }

  /* Slide-in frosted panel */
  .imi-nav__links {
    position: fixed;
    top: var(--imi-nav-h);
    left: 0;
    right: 0;
    bottom: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 12px 24px 48px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(24px) saturate(140%);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 360ms var(--ease-out), visibility 0s linear 360ms;
  }
  body.admin-bar .imi-nav__links { top: calc(var(--imi-nav-h) + 46px); }
  .imi-nav.is-open .imi-nav__links {
    transform: none;
    visibility: visible;
    transition-delay: 0s;
  }

  .imi-nav__links > li { border-bottom: 1px solid rgba(10, 26, 46, 0.08); }
  .imi-nav__links > li > a {
    display: block;
    padding: 16px 36px 16px 0;
    font-size: 14px;
    white-space: normal;
  }
  .imi-nav__links > li > a::before { right: 28px; }
  .imi-nav__links > li > a::after { content: none; }

  /* Dropdowns become accordions */
  .imi-nav__links .sub-menu,
  .imi-nav__links .sub-menu .sub-menu {
    position: static;
    display: none;
    min-width: 0;
    padding: 0 0 10px 16px;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
  }
  .imi-nav__links li.is-open > .sub-menu { display: block; }
  .imi-nav__links > li > .sub-menu::before { content: none; }
  .imi-nav__links .sub-menu a { padding: 10px 36px 10px 0; font-size: 13px; }
  .imi-nav__links .sub-menu li.menu-item-has-children > a::before { content: none; }
  .imi-nav__links > li.menu-item-has-children > a::before { content: none; }

  .imi-nav__subtoggle {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 6px;
    right: 0;
    width: 40px;
    height: 40px;
    background: transparent;
    border: 0;
    cursor: pointer;
    color: var(--navy-900);
  }
  .imi-nav__links .sub-menu .imi-nav__subtoggle { top: 0; }
  .imi-nav__subtoggle svg {
    width: 12px;
    height: 8px;
    transition: transform 240ms var(--ease-out);
  }
  li.is-open > .imi-nav__subtoggle svg { transform: rotate(180deg); }
}

/* DS-158: narrow phones — icon-only phone link (tel: link still fires,
   number stays in aria-label) so it doesn't crowd the CTA/burger. */
@media (max-width: 480px) {
  .imi-nav__phone-text { display: none; }
  .imi-nav__phone { min-width: 44px; padding: 4px 2px; }
}

/* =================================================================
   SITE FOOTER — "The Watermark" (chosen from outputs/footer-samples-
   combined.html): Institute four-column grid floating above a giant
   outlined "Microtia Institute" wordmark, cropped by a full-width
   hairline with the legal bar beneath. Markup in footer-new.php.
   ================================================================= */
.imi-footer {
  background: var(--navy-900);
  color: var(--paper);
  overflow: hidden;
}
.imi-footer__wrap { max-width: 1280px; margin: 0 auto; padding: 0 48px; }

.imi-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1.2fr);
  gap: 56px;
  padding: 72px 0 56px;
}

.imi-footer__logo {
  height: 56px;
  width: auto;
  display: block;
  filter: brightness(0) invert(1);
}
.imi-footer__mission {
  font-family: var(--font-body);
  font-size: 16px; /* DS-158: was 15.5px, below the 16px body-text floor */
  line-height: 1.7;
  color: var(--paper-80);
  margin: 20px 0 26px;
  max-width: 360px;
}

.imi-footer__heading {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sky-300);
  margin: 0 0 22px;
}

.imi-footer__menu { list-style: none; display: grid; gap: 12px; margin: 0; padding: 0; }
.imi-footer__menu li { list-style: none; }
.imi-footer__menu a {
  font-family: var(--font-ui);
  font-size: 15px;
  color: var(--paper-80);
  text-decoration: none;
  transition: color 200ms var(--ease-out), padding-left 200ms var(--ease-out);
}
.imi-footer__menu a:hover { color: var(--sand-200); padding-left: 4px; }

.imi-footer__contact p {
  font-family: var(--font-ui);
  font-size: 16px; /* DS-158: was 15px, below the 16px body-text floor */
  line-height: 1.65;
  color: var(--paper-80);
  margin: 0 0 14px;
}
.imi-footer__contact strong {
  display: block;
  font-weight: 600;
  color: var(--paper);
  font-size: 13px;
  letter-spacing: 0.04em;
  margin-bottom: 3px;
}
.imi-footer__contact a { color: inherit; text-decoration: none; transition: color 200ms var(--ease-out); }
.imi-footer__contact a:hover { color: var(--sand-200); }

.imi-footer__btn {
  display: inline-block;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper);
  border: 1px solid var(--paper);
  border-radius: 4px;
  padding: 12px 20px;
  text-decoration: none;
  transition: background 240ms var(--ease-out), border-color 240ms var(--ease-out);
}
.imi-footer__btn:hover { background: var(--teal-600); border-color: var(--teal-600); color: var(--paper); }
.imi-footer__phone {
  display: block;
  margin-top: 14px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  color: var(--paper);
  text-decoration: none;
}
.imi-footer__phone:hover { color: var(--sand-200); }

.imi-footer__social { display: flex; gap: 10px; margin-bottom: 24px; }
.imi-footer__social a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--paper-30);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--paper);
  transition: background 240ms var(--ease-out), border-color 240ms var(--ease-out);
}
.imi-footer__social a:hover { background: var(--teal-600); border-color: var(--teal-600); }
.imi-footer__social svg { width: 15px; height: 15px; fill: currentColor; }

.imi-footer__quote {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 16px; /* DS-158: was 15px, below the 16px body-text floor */
  line-height: 1.6;
  color: var(--paper-60);
  max-width: 240px;
  margin: 0;
}

.imi-footer__wordmark {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(64px, 11.5vw, 168px);
  letter-spacing: -0.02em;
  line-height: 0.82;
  text-align: center;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px rgba(184, 212, 227, 0.22);
  user-select: none;
  pointer-events: none;
  transform: translateY(12%);
}

/* Full-width hairline crops the wordmark; legal row sits on solid navy */
.imi-footer__bottom {
  position: relative;
  border-top: 1px solid rgba(250, 251, 252, 0.10);
  background: var(--navy-900);
  padding: 20px 0;
}
.imi-footer__bottom-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 24px;
}
.imi-footer__legal { display: flex; gap: 24px; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.imi-footer__legal li { list-style: none; }
.imi-footer__legal a,
.imi-footer__copy {
  font-family: var(--font-ui);
  font-size: 12.5px;
  letter-spacing: 0.03em;
  color: var(--paper-60);
  text-decoration: none;
  transition: color 200ms var(--ease-out);
}
.imi-footer__legal a:hover { color: var(--sand-200); }

@media (max-width: 900px) {
  .imi-footer__wrap { padding: 0 24px; }
  .imi-footer__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; padding: 56px 0 44px; }
  .imi-footer__bottom-inner { justify-content: center; text-align: center; }
}

/* =====================================================================
   ABOUT / THE ATELIER — IMI redesign of the acf/about-microtia block
   (mockup option B, chosen 2026-06-12). Ghost numeral, kicker + Archivo
   heading, serif body with drop cap, optional signature, navy CTA,
   double-framed image stretched to the text column's height.
   Editor controls: any background color via the block's color field;
   .imi-about--light flips typography to paper tones for dark backgrounds.
   ===================================================================== */

.imi-about {
  background: var(--paper-warm);
  color: var(--ink);
  padding: 96px 24px;
  position: relative;
  overflow: hidden;
}

.imi-about__content,
.imi-about__media {
  position: relative;
  z-index: 1;
}

.imi-about__ghost {
  position: absolute;
  top: -64px;
  right: max(-12vw, -200px);
  z-index: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(96px, 13vw, 180px);
  line-height: 1;
  color: var(--ink);
  opacity: 0.06;
  margin: 0;
  pointer-events: none;
  user-select: none;
}

.imi-about__wrap {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 48px;
  align-items: stretch;
}

@media (min-width: 1024px) {
  .imi-about__wrap {
    grid-template-columns: minmax(0, 560px) minmax(0, 1fr);
    gap: 72px;
  }
}

.imi-about__kicker {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--teal-600);
  margin: 0 0 16px;
}

.imi-about__heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(36px, 4vw, 48px);
  line-height: 1.15;
  letter-spacing: -0.018em;
  color: var(--navy-900);
  margin: 0 0 22px;
}

/* ---------- WYSIWYG body (no class injection — descendant rules) ---- */
.imi-about__body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.8;
  color: var(--ink-soft);
}

.imi-about__body > p:first-of-type::first-letter {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 3.1em;
  line-height: 0.82;
  color: var(--teal-600);
  float: left;
  padding: 8px 10px 0 0;
}

.imi-about__body p { margin: 0 0 20px; }
.imi-about__body p:last-child { margin-bottom: 0; }

.imi-about__body h2,
.imi-about__body h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--navy-900);
  margin: 32px 0 12px;
}

.imi-about__body h4 {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 17px;
  color: var(--navy-900);
  margin: 28px 0 10px;
}

.imi-about__body a {
  color: var(--teal-600);
  text-decoration: underline;
  text-decoration-color: var(--sky-300);
  text-underline-offset: 3px;
  transition: color 200ms var(--ease-out), text-decoration-color 200ms var(--ease-out);
}

.imi-about__body a:hover {
  color: var(--teal-deep);
  text-decoration-color: currentColor;
}

.imi-about__body strong { color: var(--ink); font-weight: 600; }

.imi-about__body ul {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: grid;
  gap: 12px;
}

.imi-about__body ul li {
  position: relative;
  padding-left: 24px;
}

.imi-about__body ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 12px;
  height: 1px;
  background: var(--teal-600);
}

.imi-about__body ol {
  list-style: decimal;
  margin: 0 0 20px;
  padding-left: 24px;
  display: grid;
  gap: 12px;
}

.imi-about__body ol li::marker {
  color: var(--teal-600);
  font-family: var(--font-ui);
  font-weight: 600;
}

.imi-about__signature {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 16px;
  color: var(--ink);
  margin: 24px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
}

.imi-about__cta { margin-top: 32px; }

/* ---------- Media column — double-framed, stretches to text height -- */
.imi-about__media {
  position: relative;
  margin: 0 14px 14px 0;
  min-height: 320px;
}

.imi-about__media::before {
  content: "";
  position: absolute;
  top: 18px;
  left: 18px;
  right: -14px;
  bottom: -14px;
  border: 1px solid var(--navy-900);
  pointer-events: none;
}

.imi-about__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* legacy `& img { border-radius:.75rem }` was the only source of rounding
     here (DS-74, nerve-palsy de-Tailwind) — match sibling .imi-about__plate img */
  border-radius: 8px;
}

/* ---------- Light-text scheme (for dark background colors) ---------- */
.imi-about--light { color: var(--paper); }
.imi-about--light .imi-about__ghost { color: var(--paper); opacity: 0.08; }
.imi-about--light .imi-about__kicker { color: var(--sky-300); }
.imi-about--light .imi-about__heading { color: var(--paper); }
/* Overlap variant's kicker equivalent (the uppercase index line above the
   heading) — was unhandled by the light scheme (2026-07-17 fix). */
.imi-about--light .imi-about__index { color: var(--sky-300); }
.imi-about--light .imi-about__index::after { background: rgba(250, 251, 252, 0.25); }
.imi-about--light .imi-about__body { color: var(--paper-80); }
.imi-about--light .imi-about__body > p:first-of-type::first-letter { color: var(--teal-500); }
.imi-about--light .imi-about__body h2,
.imi-about--light .imi-about__body h3,
.imi-about--light .imi-about__body h4 { color: var(--paper); }
.imi-about--light .imi-about__body strong { color: var(--paper); }
.imi-about--light .imi-about__body a { color: var(--sky-300); text-decoration-color: rgba(184, 212, 227, 0.5); }
.imi-about--light .imi-about__body a:hover { color: var(--paper); }
.imi-about--light .imi-about__body ul li::before { background: var(--teal-500); }
.imi-about--light .imi-about__body ol li::marker { color: var(--teal-500); }
.imi-about--light .imi-about__signature { color: var(--paper-80); border-top-color: rgba(250, 251, 252, 0.25); }
.imi-about--light .imi-about__media::before { border-color: rgba(232, 221, 208, 0.55); }
.imi-about--light .imi-btn--primary {
  background: transparent;
  border-color: rgba(250, 251, 252, 0.6);
  color: var(--paper);
}
.imi-about--light .imi-btn--primary:hover {
  background: var(--paper);
  border-color: var(--paper);
  color: var(--navy-900);
}

/* ---------- Stacked layout (below desktop) -------------------------- */
@media (max-width: 1023px) {
  .imi-about { padding: 64px 20px; }
  .imi-about__ghost { top: -44px; right: -24px; }
  .imi-about__media {
    order: -1;
    min-height: 0;
    aspect-ratio: 4 / 3;
    margin: 0 12px 12px 0;
  }
  .imi-about__media::before { top: 12px; left: 12px; right: -10px; bottom: -10px; }
}

/* ---------- Phone (IMI mobile system: center everything except lists,
   neutralize the drop cap — float + centered text reads broken) ------ */
@media (max-width: 767px) {
  .imi-about__content { text-align: center; }
  .imi-about__body ul,
  .imi-about__body ol { text-align: left; }
  .imi-about__body > p:first-of-type::first-letter {
    float: none;
    font-family: inherit;
    font-weight: inherit;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    padding: 0;
  }
}


/* =====================================================================
   ABOUT — OVERLAP variant (about-microtia block, design_style="overlap").
   Microtia 2746 instance #1 (2026-07-13, mockup dir D: theme mockups/
   microtia/about-microtia-directions-2.html). Full-height photo plate,
   white content panel riding over it (teal top edge, deep shadow),
   pre_hook as uppercase index line, two-column body. Atelier (default)
   instances are untouched. ============================================ */
.imi-about--overlap {
  background: var(--paper-warm-alt);
  padding: 96px 24px;
}
.imi-about--overlap .imi-about__wrap {
  display: block;
  max-width: 1200px;
}
.imi-about__stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: center;
}
.imi-about__plate {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  height: 100%;
  min-height: 560px;
  margin: 0;
}
.imi-about__plate img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 28%;
  border-radius: 8px;
}
.imi-about__plate::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 8px;
  background: linear-gradient(200deg, rgba(14, 37, 64, 0) 55%, rgba(14, 37, 64, 0.35) 100%);
}
.imi-about__panel {
  grid-column: 1;
  grid-row: 1;
  position: relative;
  z-index: 2;
  background: #fff;
  border-radius: 12px;
  border-top: 4px solid var(--teal-600);
  padding: clamp(34px, 4vw, 60px);
  margin: 48px -110px 48px 0;
  box-shadow: 0 40px 90px rgba(14, 37, 64, 0.22);
}
.imi-about__index {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--teal-600);
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 18px;
}
.imi-about__index::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--sand-200);
}
/* Image-side flip (image_side="left") — desktop only; ≤1023 stacks and
   ignores columns, and its margins must stay untouched. */
@media (min-width: 1024px) {
  .imi-about--media-left .imi-about__plate { grid-column: 1; }
  .imi-about--media-left .imi-about__plate::after {
    background: linear-gradient(160deg, rgba(14, 37, 64, 0) 55%, rgba(14, 37, 64, 0.35) 100%);
  }
  .imi-about--media-left .imi-about__panel {
    grid-column: 2;
    margin: 48px 0 48px -110px;
  }
}
.imi-about--overlap .imi-about__heading { margin-bottom: 24px; }
/* Overlap has no drop cap (Atelier feature — dir D was approved without) */
.imi-about--overlap .imi-about__body > p:first-of-type::first-letter {
  float: none;
  font-family: inherit;
  font-weight: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  padding: 0;
}
.imi-about__body--cols { columns: 2; column-gap: 44px; }
.imi-about__body--cols p { font-size: 16.5px; break-inside: avoid; }
.imi-about--overlap .imi-about__cta { margin-top: 28px; }
@media (max-width: 1023px) {
  .imi-about--overlap { padding: 0 0 64px; }
  .imi-about__stage { display: block; }
  .imi-about__plate { min-height: 0; height: auto; }
  .imi-about__plate img { position: static; height: 380px; border-radius: 0; }
  .imi-about__plate::after { border-radius: 0; }
  .imi-about__panel { margin: -64px 20px 0; }
  .imi-about__body--cols { columns: 1; }
}
@media (max-width: 767px) {
  .imi-about__plate img { height: 300px; }
  .imi-about__panel { margin: -48px 16px 0; text-align: center; }
  .imi-about__index { justify-content: center; }
  .imi-about__index::after { display: none; }
  .imi-about__body--cols { text-align: center; }
  .imi-about__body--cols ul,
  .imi-about__body--cols ol { text-align: left; }
  .imi-about--overlap .imi-about__cta .imi-btn {
    display: block;
    width: 100%;
    text-align: center;
  }
}

/* =====================================================================
   READ MORE / READ LESS — site-wide utility styling (IMI mobile system).
   These are .shorten controls injected by app.js with the legacy
   .secondary-btn class (teal CTA pill, !important background). Read More
   is a utility, never a call to action: gray text-button, no CTA colors.
   !important is required to out-rank .secondary-btn's own !important.
   ===================================================================== */

.shorten-controls .shorten-expand,
.shorten-controls .shorten-collapse {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--ink-soft) !important;
  /* DS-158: padding-top carries the extra height (was 4px 0, ~23-29px
     total) up to a 44px tap target. NOT done via display:flex —
     app.js toggles Read More/Read Less via inline style.display, and a
     stylesheet !important on display would beat that inline style and
     leave both labels visible at once. Padding-bottom stays 4px so the
     border-bottom underline stays flush under the text, unchanged. */
  padding: 27px 0 4px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--rule) !important;
  border-radius: 0 !important;
  font-family: var(--font-ui) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  transition: color 200ms var(--ease-out), border-color 200ms var(--ease-out) !important;
}

.shorten-controls .shorten-expand:hover,
.shorten-controls .shorten-collapse:hover {
  color: var(--ink) !important;
  border-bottom-color: var(--ink-soft) !important;
}

/* Light-text scheme (dark section backgrounds) */
.imi-about--light .shorten-controls .shorten-expand,
.imi-about--light .shorten-controls .shorten-collapse {
  color: var(--paper-80) !important;
  border-bottom-color: rgba(250, 251, 252, 0.35) !important;
}

.imi-about--light .shorten-controls .shorten-expand:hover,
.imi-about--light .shorten-controls .shorten-collapse:hover {
  color: var(--paper) !important;
  border-bottom-color: var(--paper) !important;
}

/* Center the Read More / Read Less control on phones. app.js sets
   data-align="mx-auto" on the button, but that relies on Tailwind's
   flex/mx-auto utilities which aren't loaded on every template (the
   homepage ships home-base.css, not style.css). Centering the flex
   container here in imi.css (loaded site-wide) guarantees it works for
   every .shorten instance regardless of which stylesheet is present. */
@media (max-width: 767px) {
  .shorten-controls {
    display: flex;
    justify-content: center;
  }
}

/* =====================================================================
   HOME REVISION ROUND 1 (2026-06-16) — Roxanne feedback
   ===================================================================== */

/* 1. Headlines use the Archivo sans display font, not the legacy Butler
   serif that the Tailwind base (style.css) sets on h1–h6. Body text keeps
   Source Serif via the theme.json body default. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
}

/* 2. Remove the FSE flow block-gap (WP injects margin-block-start:24px between
   stacked top-level blocks) so the full-bleed ACF sections sit flush again —
   each section owns its own vertical padding. Scoped to imi section blocks so
   core-block spacing on content/blog pages is untouched. */
.wp-block-post-content > [class*="imi-"],
.entry-content > [class*="imi-"] {
  margin-block: 0;
}

/* 3. Tighten the eyebrow/kicker → headline gap (was 18–22px). */
.imi-kicker,
.imi-hero__kicker,
.imi-impact__kicker,
.imi-section3-v2__kicker,
.imi-section3-v2__eyebrow,
.imi-about__kicker {
  margin-bottom: 6px;
}

/* =====================================================================
   HOME REVISION ROUND 2 (2026-06-16) — Roxanne feedback
   (Several of these are the recurring light-text / eyebrow-gap patterns.)
   ===================================================================== */

/* Hero: eyebrow + body copy stay light on the dark frosted panel
   (force over any base/global dark text color). */
.imi-hero .imi-hero__kicker  { color: var(--sky-100); }
.imi-hero .imi-hero__subhead { color: rgba(234, 242, 247, 0.92); }

/* Trust bar (navy background): its label/body text stays light. */
.imi-trust .imi-trust__kicker { color: var(--sky-100); }

/* Why Choose Dr. Tahiri — credentials: remove list bullets/markers, keep only
   the teal left-border "lines"; add a hover font-color change. */
.imi-section3-v2__credentials,
.imi-section3-v2__credential { list-style: none !important; }
.imi-section3-v2__credential::marker { content: ""; }
.imi-section3-v2__credential:hover { color: var(--teal-600); }

/* =====================================================================
   FONT SYSTEM OVERRIDE — neutralize the legacy Tailwind build (style.css),
   which bakes in stale brand fonts: Butler serif on h1/h2/h3/h6, Source Sans
   on p/li (so body copy rendered sans), and stray Inter/Montserrat on
   buttons/submenus. imi.css loads AFTER style.css, so these equal-specificity
   element rules win. Convention: headlines = Archivo (sans), body/prose =
   Source Serif, UI bits (kickers, buttons, nav) keep Source Sans via their own
   classes. (Long-term: regenerate style.css from tailwind.css locally so these
   are baked into the build rather than overridden here.)
   ===================================================================== */
body { font-family: var(--font-body); }
p { font-family: var(--font-body); }
blockquote { font-family: var(--font-body); }
/* h1–h6 → Archivo is set in "HOME REVISION ROUND 1" above. */
.secondary-btn { font-family: var(--font-ui); }
.menu-item-has-children > ul li a { font-family: var(--font-ui); }

/* =====================================================================
   DE-TAILWIND — About Doctor block (BEM port of the former Tailwind layout).
   Values map 1:1 to the prior utilities so the render is unchanged.
   ===================================================================== */
.imi-about-doc { position: relative; }
.imi-about-doc--bg { background-size: cover; background-repeat: no-repeat; }
.imi-about-doc__wrap { margin: 0 auto; padding: 0 20px; }
.imi-about-doc__row { display: flex; flex-direction: column; justify-content: flex-start; }
.imi-about-doc__row--center { justify-content: center; }
.imi-about-doc__row--right  { justify-content: flex-end; }
.imi-about-doc__col { padding: 60px 0; }
.imi-about-doc__card {
  position: relative;
  z-index: 20;
  background: #fff;
  padding: 40px 20px;
  border-radius: 32px;
  text-align: left;
}
.imi-about-doc__card--center { text-align: center; }
.imi-about-doc__card--center .imi-about-doc__heading { margin-left: auto; margin-right: auto; }
.imi-about-doc__heading { max-width: 500px; }
.imi-about-doc__cta { margin-top: 26px; }
.imi-about-doc__media { display: none; }
.imi-wysiwyg-highlight { background: var(--paper-warm-alt); padding: 16px; border-radius: 16px; }

/* ---- ABOUT-DOC — FROST variants --------------------------------------
   about-doctor block, design_style = frost_light | frost_night (microtia
   2746 first instance, 2026-07-13 — mockup: theme mockups/microtia/
   about-doctor-directions.html dir A). Classic (default) is untouched —
   Home 2183 / About 2740 / Nerve Palsy 3233 render as before.
   The section's own background-image stays the backdrop; wash + grain
   overlay it; the card becomes a glass panel. ≤767px: night dissolves the
   panel onto a near-opaque navy wash (hero kinship); light keeps a solid
   paper panel for contrast. ------------------------------------------- */
.imi-about-doc--frost { overflow: hidden; }
.imi-about-doc--frost .imi-about-doc__wash {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.imi-about-doc--frost-night .imi-about-doc__wash {
  background: linear-gradient(100deg,
    rgba(14, 37, 64, 0.30) 0%,
    rgba(14, 37, 64, 0.55) 52%,
    rgba(14, 37, 64, 0.90) 100%);
}
.imi-about-doc--frost-light .imi-about-doc__wash {
  background: linear-gradient(100deg,
    rgba(14, 37, 64, 0.18) 0%,
    rgba(14, 37, 64, 0.32) 60%,
    rgba(14, 37, 64, 0.50) 100%);
}
.imi-about-doc--frost .imi-about-doc__grain {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.35;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.08 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 160px 160px;
  mix-blend-mode: overlay;
}
.imi-about-doc--frost .imi-about-doc__card {
  border-radius: 22px;
  padding: clamp(30px, 3.6vw, 50px);
}
/* Legacy Tailwind base (style.css) paints every ul as a white rounded
   card (ul:not(...){background:#fff;padding:2.5rem;border-radius:1rem})
   — invisible on the classic white card, glaring on a glass panel.
   Neutralized inside frost cards; (0,3,0) outranks its (0,2,1). */
.imi-about-doc--frost .imi-about-doc__card .imi-tabs__list,
.imi-about-doc--frost .imi-about-doc__card ul {
  background: transparent;
  border-radius: 0;
  padding: 0;
}
/* Night: navy glass, light copy */
.imi-about-doc--frost-night .imi-about-doc__card {
  background: rgba(10, 26, 46, 0.72);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(184, 212, 227, 0.22);
  box-shadow: 0 32px 80px rgba(4, 12, 24, 0.5);
  color: var(--paper);
}
.imi-about-doc--frost-night .imi-kicker { color: var(--sky-300); }
.imi-about-doc--frost-night .imi-about-doc__heading { color: var(--paper); }
.imi-about-doc--frost-night .imi-body { color: rgba(234, 242, 247, 0.85); }
.imi-about-doc--frost-night .imi-body strong,
.imi-about-doc--frost-night .imi-tabs__list li strong { color: var(--paper); }
.imi-about-doc--frost-night .imi-wysiwyg-highlight {
  background: rgba(46, 148, 168, 0.12);
  border-left: 3px solid var(--teal-500);
  border-radius: 0 12px 12px 0;
  padding: 18px 22px;
  font-style: italic;
}
.imi-about-doc--frost-night .imi-wysiwyg-highlight .imi-body,
.imi-about-doc--frost-night .imi-wysiwyg-highlight p { color: rgba(234, 242, 247, 0.92); margin-bottom: 0; }
.imi-about-doc--frost-night .imi-tabs__list li {
  color: rgba(234, 242, 247, 0.85);
  border-top: 1px solid rgba(250, 251, 252, 0.14);
  padding-top: 12px;
  padding-left: 34px;
}
.imi-about-doc--frost-night .imi-tabs__list li::before {
  background: var(--teal-500);
  width: 22px;
  height: 2px;
  top: 24px;
}
.imi-about-doc--frost-night .imi-tabs__bullets-title { color: var(--paper); }
/* Read More on navy glass — same scheme as .imi-about--light */
.imi-about-doc--frost-night .shorten-controls .shorten-expand,
.imi-about-doc--frost-night .shorten-controls .shorten-collapse {
  color: var(--paper-80) !important;
  border-bottom-color: rgba(250, 251, 252, 0.35) !important;
}
.imi-about-doc--frost-night .shorten-controls .shorten-expand:hover,
.imi-about-doc--frost-night .shorten-controls .shorten-collapse:hover {
  color: var(--paper) !important;
  border-bottom-color: var(--paper) !important;
}
/* Light: paper glass, ink copy (classic text styles already apply) */
.imi-about-doc--frost-light .imi-about-doc__card {
  background: rgba(248, 245, 240, 0.86);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 32px 80px rgba(8, 20, 36, 0.35);
}
.imi-about-doc--frost-light .imi-wysiwyg-highlight {
  background: rgba(31, 122, 140, 0.07);
  border-left: 3px solid var(--teal-600);
  border-radius: 0 12px 12px 0;
  padding: 18px 22px;
  font-style: italic;
}
@media (max-width: 767px) {
  .imi-about-doc--frost .imi-about-doc__card { text-align: center; }
  .imi-about-doc--frost .imi-about-doc__card .imi-tabs__list,
  .imi-about-doc--frost .imi-about-doc__card .imi-wysiwyg-highlight { text-align: left; }
  .imi-about-doc--frost .imi-about-doc__cta .imi-btn {
    display: block;
    width: 100%;
    text-align: center;
  }
  /* Night: panel dissolves onto a near-opaque navy wash (hero kinship) */
  .imi-about-doc--frost-night .imi-about-doc__wash {
    background: rgba(14, 37, 64, 0.90);
  }
  .imi-about-doc--frost-night .imi-about-doc__card {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 0;
    box-shadow: none;
    padding: 8px 2px;
  }
  /* Light: keep a solid paper panel so ink copy stays readable */
  .imi-about-doc--frost-light .imi-about-doc__card {
    background: rgba(248, 245, 240, 0.94);
    padding: 28px 20px;
  }
}

@media (min-width: 768px) {
  .imi-about-doc__card { padding: 40px 40px; }
}
@media (min-width: 1024px) {
  .imi-about-doc__wrap { max-width: 1200px; }
  .imi-about-doc__col { padding: 120px 0; }
  .imi-about-doc__card { max-width: 640px; padding: 48px; }
  .imi-about-doc__media { display: block; }
  .imi-about-doc__img { height: 100%; position: absolute; right: 0; bottom: 0; }
}
@media (min-width: 1280px) {
  .imi-about-doc__row { flex-direction: row; }
}

/* =====================================================================
   HOME REVISION ROUND 3 (2026-06-16) — Roxanne feedback
   ===================================================================== */

/* Uniform eyebrow→headline gap across EVERY section (was inconsistent:
   18/20/32/16px). One tight value everywhere so all sections match. */
.imi-kicker,
[class*="__kicker"],
[class*="__eyebrow"] {
  margin-bottom: 6px;
}

/* All eyebrows 14px (the .imi-kicker class hardcoded 11.5px; also meets the ≥14px floor). */
.imi-kicker,
[class*="__kicker"],
[class*="__eyebrow"] {
  font-size: 14px;
}

/* Remove WP's outer block-gap that puts 24px above the footer template part
   (:where(.wp-site-blocks) > * { margin-block-start: 24px }). The header is fixed,
   main owns its nav offset, footer should sit flush. */
.wp-site-blocks > * {
  margin-block-start: 0;
}

/* =====================================================================
   HOME REVISION ROUND 4 (2026-06-16) — section emphasis / dark-section headlines
   ===================================================================== */

/* Hero: italic phrase in the headline → accent (brighter teal on the dark panel). */
.imi-hero__headline em { color: var(--teal-500); }

/* Serving Families: closing quote bigger, bolder, accent. */
.imi-impact__closing-quote {
  font-size: clamp(26px, 3vw, 32px);
  font-weight: 700;
  color: var(--teal-600);
}

/* Why Choose: "You don't have to navigate this alone…" bigger, bolder, accent. */
.imi-section3-v2__closing-final {
  font-size: clamp(24px, 2.6vw, 30px);
  font-weight: 700;
  color: var(--teal-600);
}

/* Dark sections (Conferences = --navy, Testimonials = --teal): headline white. */
.imi-section--navy .imi-heading,
.imi-section--teal .imi-heading,
.imi-section--teal-deep .imi-heading {
  color: var(--paper);
}

/* =====================================================================
   HOME REVISION ROUND 5 (2026-06-16) — Testimonials
   ===================================================================== */

/* Left nav arrow: Splide's base CSS flips the prev arrow (scaleX(-1)); our markup
   already points it left, so undo the flip → it points left again. */
.imi-testimonials .splide__arrow--prev svg { transform: none !important; }

/* Author + attribution: stack and vertically center against the avatar
   (was sitting lower than the avatar). */
.imi-t-card__author { align-items: center; }
.imi-t-card__author-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.imi-t-card__author-text span { display: block; }

/* =====================================================================
   HOME REVISION ROUND 6 (2026-06-16) — More Than Surgery (tabs) + Microtia
   ===================================================================== */

/* Pediatric tab: list markers become dark-blue right arrows (not the teal line). */
.imi-tabs__panel--pediatric-plastic-surgery .imi-tabs__list li { padding-left: 26px; }
.imi-tabs__panel--pediatric-plastic-surgery .imi-tabs__list li::before {
  content: "\2192"; /* → */
  background: none;
  width: auto;
  height: auto;
  top: 0;
  left: 0;
  color: var(--navy-900);
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 14px;
  line-height: inherit;
}
/* Pediatric tab: content links → teal (the CTA button keeps its own style). */
.imi-tabs__panel--pediatric-plastic-surgery .imi-tabs__panel-body a:not(.imi-btn) {
  color: var(--teal-600);
  text-decoration: underline;
}
/* Space above the tab CTA button. */
.imi-tabs__panel-body .imi-btn { margin-top: 24px; }

/* Tab photo grows/shrinks with the body column height (was fixed 4/5 ratio). */
.imi-tabs__panel { align-items: stretch; }
.imi-tabs__art { align-self: start; }
.imi-tabs__art--photo { align-self: stretch; aspect-ratio: auto; }

/* What Is Microtia: image grows/shrinks with the text column. The media wrapper
   takes its height from the (stretched) grid row = the copy column; the <img>
   fills it absolutely so its intrinsic height never pushes the row taller. */
.imi-microtia__media { position: relative; overflow: hidden; }
@media (min-width: 1025px) {
  .imi-microtia__grid { align-items: stretch; }
  .imi-microtia__media { height: 100%; min-height: 100%; }
  .imi-microtia__media .imi-microtia__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
}

/* =====================================================================
   HOME REVISION ROUND 7 (2026-06-16) — "What Actually Happens" (your-journey)
   Split-index layout (approved mockup Direction 3).
   ===================================================================== */
.imi-journey--split .imi-journey__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
}
@media (min-width: 1024px) {
  .imi-journey--split .imi-journey__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; }
  .imi-journey--split .imi-journey__aside { position: sticky; top: 110px; align-self: start; }
}
.imi-journey--split .imi-journey__aside .imi-lead { margin-bottom: 28px; }
.imi-journey__index {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  border-top: 1px solid var(--rule);
}
.imi-journey__index li {
  display: flex;
  gap: 12px;
  align-items: baseline;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 15px;
  color: var(--ink-soft);
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
}
.imi-journey__index li { position: relative; padding-left: 16px; transition: color .25s var(--ease-out); }
.imi-journey__index li b { color: var(--teal-600); font-family: var(--font-display); font-weight: 800; }
/* Scrollspy: active index item (its step card is in view) gets a teal bar + darker text. */
.imi-journey__index li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 0;
  background: var(--teal-600);
  border-radius: 2px;
  transition: height .25s var(--ease-out);
}
.imi-journey__index li.is-active { color: var(--navy-900); }
.imi-journey__index li.is-active::before { height: 62%; }
.imi-journey__index li.is-active b { color: var(--teal-500); }
.imi-journey__cta-btn { margin-top: 0; }
.imi-journey__steps { display: grid; gap: 14px; }
.imi-journey--split .imi-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 22px;
  align-items: start;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 28px 30px;
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.imi-journey--split .imi-step:hover { transform: translateX(4px); box-shadow: 0 16px 32px rgba(14, 37, 64, 0.10); }
.imi-journey--split .imi-step__num {
  position: static;
  left: auto;
  top: auto;
  width: auto;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 34px;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--sky-300);
}
.imi-journey--split .imi-step__num::after { display: none; }
.imi-journey--split .imi-step { padding: 28px 30px; }
.imi-journey--split .imi-step__title { font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--navy-900); margin: 0 0 7px; }
.imi-journey--split .imi-step__body { font-family: var(--font-body); font-size: 16.5px; line-height: 1.65; color: var(--ink-soft); }

/* Lightbox: the prev/next arrows are removed — navigation is via the thumbnail
   strip (reliable; the arrows never advanced). */
#lightboxContent { position: relative; z-index: 1; }
#lightbox button[onclick*="Image"] { display: none !important; }
/* Thumbnail strip = primary nav: clear teal active indicator + comfortable size. */
#thumbnailNav { padding: 4px 0; }
#thumbnailNav .thumbnail-item { border-radius: 6px; transition: opacity .18s, box-shadow .18s; }
#thumbnailNav .thumbnail-item.opacity-100 { box-shadow: 0 0 0 2px var(--teal-500); }
#thumbnailNav .thumbnail-item img { border-radius: 6px; }

/* =====================================================================
   HOME REVISION ROUND 8 (2026-06-16) — Why Technique Matters (ear-craniofacial)
   "Versus split" layout (approved mockup Direction 2): one seamless panel split
   into a muted "traditional" half + a deep-navy IMI half, center VS badge, ✗/✓ rows.
   ===================================================================== */
.imi-compare__grid {
  gap: 0;
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 24px 50px rgba(14, 37, 64, 0.16);
}
.imi-compare-col { border-radius: 0; padding: 40px 34px; }
.imi-compare-col--standard { background: #efe7dd; color: var(--ink-soft); }
.imi-compare-col--imi {
  background: linear-gradient(160deg, #16395c, var(--navy-900));
  color: var(--paper);
  border-top: 0;
  box-shadow: none;
}
/* Center VS badge (desktop, where the two halves sit side by side). */
.imi-compare__grid::before {
  content: "VS";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #fff;
  color: var(--navy-900);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 17px;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 22px rgba(14, 37, 64, 0.3);
  z-index: 3;
}
@media (min-width: 768px) { .imi-compare__grid::before { display: flex; } }
/* Rows with ✗ / ✓ markers (overrides the old accent-bar ::before). */
.imi-compare-col__list li {
  position: relative;
  padding-left: 34px;
  color: inherit;
}
.imi-compare-col__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 11px;
  background: none;
}
.imi-compare-col--standard .imi-compare-col__list li::before { content: "\2715"; background: var(--sand-200); color: var(--ink-soft); }
.imi-compare-col--imi .imi-compare-col__list li::before { content: "\2713"; background: var(--teal-500); color: #06141f; }
.imi-compare-col--imi .imi-compare-col__tier { color: var(--teal-500); }

/* =====================================================================
   HOME REVISION ROUND 9 (2026-06-16) — MOBILE (<=767px)
   ===================================================================== */
@media (max-width: 767px) {
  /* Kill the phantom horizontal scroll / white strip on the right.
     `clip` not `hidden`: hidden makes body a scroll container, which
     silently disables EVERY position:sticky on the page (found 2026-07-08
     via the legal-page TOC; blog progress bar + asides were broken too). */
  html, body { overflow-x: clip; }

  /* Phone centering: center ALL section content EXCEPT lists & tables
     (Roxanne's standing rule). Scoped to <main> so header/footer are untouched. */
  main [class*="imi-"] { text-align: center; }
  main ul, main ol, main table,
  main ul *, main ol *, main table * { text-align: left; }
  main .imi-faq__summary { text-align: left; }
  /* Center the eyebrow accent bar + kickers that are inline-block */
  main .imi-rule-accent, main .imi-microtia__copy + .imi-microtia__cta { margin-left: auto; margin-right: auto; }

  /* Why Technique Matters: the body image (outside the two VS boxes) covers a
     300px-tall area (crops to fill) rather than letterboxing. */
  .imi-compare__image-wrap { height: 300px; max-height: 300px; }
  .imi-compare__image { width: 100%; height: 100%; max-height: none; margin: 0; object-fit: cover; }
}

/* Mobile: center the Why-Choose portrait ("LF" initials circle). Testimonial
   avatars stay left-aligned. Map pan handled in JS (impact map draggable on mobile). */
@media (max-width: 767px) {
  .imi-section3-v2__portrait { margin-left: auto; margin-right: auto; }
  /* Testimonial author block stays left-aligned next to the avatar (overrides the
     broad phone-centering rule for this element). */
  .imi-t-card__author-text,
  .imi-t-card__author-text * { text-align: left; }
  .imi-t-card__author-text { align-items: flex-start; }
  /* Carousel arrows are vertically centered, so on an expanded (Read More) card they
     cover the text. On phones, move them BELOW the cards as a centered row. */
  .imi-testimonials .splide { display: flex; flex-direction: column; }
  .imi-testimonials .splide__track { order: 1; }
  .imi-testimonials .splide__arrows {
    order: 2;
    position: static;
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 22px;
  }
  .imi-testimonials .splide__arrow {
    position: static !important;
    transform: none !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
  }
}

/* CTA #contact_us links land on the form column; clear the fixed nav. */
#contact_us { scroll-margin-top: calc(var(--imi-nav-h, 87px) + 24px); }

/* Why Technique Matters: CTA pulled out of the Read More wrapper — center it below the comparison. */
.imi-compare__cta-row--end { text-align: center; margin-top: 32px; }

/* =====================================================================
   MEGA MENU (primary nav) — full-width multi-column panels + promo card.
   Desktop: hover/focus reveal. Mobile: per-item accordion.
   ===================================================================== */
.imi-nav__chev {
  display: inline-block; width: 7px; height: 7px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px); margin-left: 3px;
  transition: transform .25s var(--ease-out); opacity: .7;
}
.imi-mega__col-title { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--navy-900); margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--rule); }
.imi-mega__col-title a { color: inherit; text-decoration: none; }
.imi-mega__links { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.imi-mega__links a { font-family: var(--font-ui); font-size: 14px; color: var(--ink-soft); text-decoration: none; line-height: 1.3; display: block; transition: color .18s var(--ease-out), padding-left .18s var(--ease-out); }
.imi-mega__links a:hover { color: var(--teal-600); padding-left: 5px; }
.imi-mega__promo { background: linear-gradient(160deg, #16395c, var(--navy-900)); border-radius: 14px; padding: 26px; color: #fff; display: flex; flex-direction: column; justify-content: flex-end; }
.imi-mega__promo-k { font-family: var(--font-ui); font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--teal-500); margin-bottom: 8px; }
.imi-mega__promo-title { font-family: var(--font-display); font-weight: 800; font-size: 20px; line-height: 1.15; margin: 0 0 14px; color: #fff; }
.imi-mega__promo-cta { font-family: var(--font-ui); font-weight: 700; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; background: var(--teal-500); color: #06141f; padding: 12px 18px; border-radius: 4px; text-decoration: none; text-align: center; }
.imi-mega__promo-cta:hover { background: #fff; }

/* DESKTOP: full-width dropdown panels revealed on hover/focus. */
@media (min-width: 1281px) {
  .imi-nav__links .imi-nav__item--mega { position: static; }
  .imi-nav__mega-toggle { display: none; }
  .imi-mega {
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--paper);
    border-top: 1px solid var(--rule);
    box-shadow: 0 30px 60px rgba(14, 37, 64, 0.18);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .25s var(--ease-out), transform .25s var(--ease-out), visibility 0s linear .25s;
    z-index: 49;
  }
  .imi-nav__item--mega:hover > .imi-mega,
  .imi-nav__item--mega:focus-within > .imi-mega { opacity: 1; visibility: visible; transform: translateY(0); transition-delay: 0s; }
  .imi-nav__item--mega:hover > .imi-nav__link .imi-nav__chev,
  .imi-nav__item--mega:focus-within > .imi-nav__link .imi-nav__chev { transform: rotate(225deg) translateY(2px); }
  .imi-mega__inner { max-width: 1240px; margin: 0 auto; padding: 36px 48px; display: flex; gap: 36px; align-items: flex-start; }
  .imi-mega__col { flex: 1 1 0; min-width: 0; }
  .imi-mega__promo { flex: 0 0 280px; align-self: stretch; }
}

/* MOBILE: accordion inside the slide-out nav. */
@media (max-width: 1280px) {
  .imi-nav__item { position: relative; }
  .imi-nav__chev { display: none; }
  .imi-nav__mega-toggle { display: block; position: absolute; right: 6px; top: 7px; width: 42px; height: 42px; background: transparent; border: 0; cursor: pointer; padding: 0; }
  .imi-nav__mega-toggle::before, .imi-nav__mega-toggle::after { content: ""; position: absolute; left: 50%; top: 50%; background: var(--navy-900); }
  .imi-nav__mega-toggle::before { width: 13px; height: 2px; transform: translate(-50%, -50%); }
  .imi-nav__mega-toggle::after { width: 2px; height: 13px; transform: translate(-50%, -50%); transition: transform .2s var(--ease-out), opacity .2s; }
  .imi-nav__item.is-open > .imi-nav__mega-toggle::after { opacity: 0; transform: translate(-50%, -50%) rotate(90deg); }
  .imi-mega { display: none; }
  .imi-nav__item.is-open > .imi-mega { display: block; }
  .imi-mega__inner { display: block; padding: 4px 0 10px 16px; }
  .imi-mega__col { margin-bottom: 14px; }
  .imi-mega__col:last-child { margin-bottom: 0; }
  .imi-mega__col-title { color: var(--navy-900); border-bottom-color: rgba(10, 26, 46, 0.12); }
  .imi-mega__links a { color: var(--ink-soft); }
  .imi-mega__links a:hover { color: var(--teal-600); }
  .imi-mega__promo { display: none; }
}

/* =====================================================================
   SITE HEADER v2 — "Teal / White Logo" (DS-108, 2026-07-16; shrink-on-
   scroll REMOVED 2026-07-16 per Rox — the bar now renders permanently at
   the compact size it used to shrink TO, no scroll-driven size change).
   Additive override for the primary site-wide header only:
   tahiri_render_site_header() adds the imi-nav--teal modifier class.
   The landing-page header (imi-nav--landing, imi-landing-birthmark.php)
   does NOT get this class and keeps the original frosted plaque look
   unchanged on purpose — every selector below is scoped to
   .imi-nav.imi-nav--teal (2-class specificity) so it cannot leak onto
   .imi-nav--landing or any other .imi-nav consumer, and every property
   the old plaque rules set (position/inset/background/backdrop-filter/
   border/box-shadow) is explicitly reset here rather than relied on to
   cascade away. Teal token reused from the live design system
   (--teal-600 = #1F7A8C) — no second hardcoded teal introduced.
   Mega-menu markup/JS (imi-nav.js, tahiri_render_mega_nav) and the
   mobile slide-in drawer are untouched: only the closed bar's own
   background/logo/CTA/burger colors change here; the drawer stays its
   existing frosted-white/navy-text treatment (already accessible,
   unrelated to the bar color, no reason to touch a working system).
   imi-nav.js's scroll listener still runs (shared infra other .imi-nav
   consumers rely on) and still toggles .imi-nav--scrolled, but nothing
   below keys off that class anymore — the teal bar no longer responds
   to it at all, by design.
   ===================================================================== */
.imi-nav.imi-nav--teal {
  background: var(--teal-600);
  border-bottom: 0;
}
.imi-nav.imi-nav--teal::before { backdrop-filter: none; -webkit-backdrop-filter: none; }

.imi-nav.imi-nav--teal .imi-nav__logo { height: 60px; width: auto; }

.imi-nav.imi-nav--teal .imi-nav__burger span { background: #fff; }

.imi-nav.imi-nav--teal .imi-nav__cta {
  background: #fff;
  color: var(--teal-600);
  border-color: transparent;
}
.imi-nav.imi-nav--teal .imi-nav__cta:hover {
  background: var(--paper);
  color: var(--teal-600);
  border-color: transparent;
}

/* Mobile/tablet (<=1280px, shared burger breakpoint): fixed compact
   height (was the "scrolled" size). Links live in the existing
   frosted-white slide-in drawer at this width, so the drawer itself is
   intentionally left untouched below. CTA padding intentionally NOT
   overridden here — inherits the shared base's smaller 9px/14px mobile
   padding (base .imi-nav__cta rule, ~line 3301) rather than the wider
   desktop padding, on purpose: a 60px-tall logo (2026-07-16, Rox) is
   noticeably wider than the old 30px mark, and a 390px viewport doesn't
   have room for logo + full desktop-size CTA + burger without the
   burger getting pushed off-screen. Gap/padding trimmed below too,
   scoped to imi-nav--teal only so landing headers are unaffected. */
@media (max-width: 1280px) {
  .imi-nav.imi-nav--teal {
    height: 68px;
    gap: 12px;
    padding: 14px 16px;
  }
  /* DS-158 (2026-07-22, Rox): mobile-only — logo down to 50px (was the
     universal 60px from the ~line 4771 rule), phone icon white to match
     the burger/CTA's white treatment against the solid teal bar (was
     navy-900, inherited from the base .imi-nav__phone rule and low-
     contrast here), hover flips to dark navy. Desktop untouched. */
  .imi-nav.imi-nav--teal .imi-nav__logo { height: 50px; }
  .imi-nav.imi-nav--teal .imi-nav__phone { color: #fff; }
  .imi-nav.imi-nav--teal .imi-nav__phone:hover { color: var(--navy-900); }
}

/* Desktop (>=1281px): logo sits directly in the bar (no plaque), nav
   links + CTA in normal flow, space-between. Cancels every plaque-only
   property the old >=1281px block sets on these same elements. */
@media (min-width: 1281px) {
  .imi-nav.imi-nav--teal {
    justify-content: space-between;
    height: 76px;
    padding: 0 var(--imi-nav-edge, 48px);
  }

  .imi-nav.imi-nav--teal .imi-nav__logo-lockup {
    position: static;
    top: auto; left: auto;
    padding: 0;
    background: none;
    backdrop-filter: none; -webkit-backdrop-filter: none;
    border: 0; border-radius: 0;
    box-shadow: none;
  }
  /* The old plaque header's .imi-nav--scrolled .imi-nav__logo-lockup rule
     (line ~3274, untouched — still needed by imi-nav--landing) sets
     transform: translateY(-50%) on scroll to re-center a shrinking plaque.
     transform applies regardless of position, so it was still hijacking
     the (now static, non-shrinking) teal logo and visibly sliding it up
     on scroll — reported by Rox 2026-07-16. Explicitly cancel it here,
     scoped to imi-nav--teal only, at higher specificity than the old
     rule so it wins regardless of scroll state. */
  .imi-nav.imi-nav--teal.imi-nav--scrolled .imi-nav__logo-lockup {
    top: auto;
    transform: none;
    padding: 0;
    background: none;
    border-color: transparent;
    border-radius: 0;
    box-shadow: none;
  }
  .imi-nav.imi-nav--teal .imi-nav__logo { height: 60px; }

  /* DS-158 (2026-07-22, Rox): phone link desktop-only removed — mobile
     (<=1280px) keeps it untouched. The generic (non-teal) >=1281px plaque
     block at ~line 3321 still absolutely-positions .imi-nav__phone; this
     just hides the teal header's instance of it, scoped the same way as
     every other teal-only override in this block. */
  .imi-nav.imi-nav--teal .imi-nav__phone { display: none; }

  .imi-nav.imi-nav--teal .imi-nav__links > li > a { color: #fff; }
  .imi-nav.imi-nav--teal .imi-nav__links > li > a:hover { color: #fff; }
  .imi-nav.imi-nav--teal .imi-nav__links > li > a::after { background: #fff; }

  .imi-nav.imi-nav--teal .imi-nav__cta {
    position: static;
    top: auto; right: auto; transform: none;
    padding: 10px 20px;
  }
  .imi-nav.imi-nav--teal .imi-nav__cta:hover { transform: translateY(-1px); }
}

/* =====================================================================
   HOME REVISION ROUND 10 (2026-06-16) — Roxanne feedback
   "Why Choose Dr. Tahiri" → "Meet Dr. Tahiri — The Godfather of Ear
   Reconstruction" with a tagline deck beneath the heading. The block's
   sub_heading now renders as this deck (template moved it below the H2),
   so retire the old eyebrow-above spacing and style the deck as an
   italic serif tagline. why-choose-us is homepage-only.
   ===================================================================== */
.imi-section3-v2__heading { margin-bottom: 16px; }

.imi-section3-v2__deck {
  margin: 0 auto 26px;
  max-width: 52ch;
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.0625rem, 0.6vw + 0.95rem, 1.375rem); /* ~17px → 22px */
  line-height: 1.45;
  color: var(--teal-600);
  text-align: center;
}

@media (max-width: 767px) {
  .imi-section3-v2__deck { font-size: 17px; }
}

/* Inline images inside the About-Doctor WYSIWYG (e.g. the book cover). The
   dedicated doctor portrait is de-duped in PHP; everything else renders here
   responsively. Left-aligned in the body flow on desktop, centered on phones. */
.imi-about-doc__inline-img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 24px 0;
  border-radius: 8px;
}

@media (max-width: 767px) {
  .imi-about-doc__inline-img { margin-left: auto; margin-right: auto; }
}

/* =====================================================================
   INTERIOR PAGES (procedure / content / resource) — 2026-06-17
   ACF `interior` flexible field rendered by templates/template-interior-new.php.
   Navy hero (title + optional description) + white content sections of IMI
   prose. Content parts >800 chars collapse on phones via .shorten. Lights up
   the ~60–91 legacy interior pages under the FSE theme.
   ===================================================================== */

/* Navy body bg so the fixed-nav clearance strip (main padding-top) blends into
   the navy hero instead of showing a white band. */
body:has(.imi-interior-hero) { background: var(--navy-900); }

.imi-interior-hero {
  background: var(--navy-900);
  color: var(--sky-100);
  padding: clamp(28px, 4vw, 52px) clamp(20px, 5vw, 48px) clamp(40px, 5vw, 64px);
}
.imi-interior-hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.25rem, 1.2rem + 3vw, 3.25rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: #fff;
  margin: 0;
}
.imi-interior-hero__desc {
  font-family: var(--font-body);
  font-size: clamp(1.0625rem, 0.4vw + 1rem, 1.25rem);
  line-height: 1.6;
  color: rgba(234, 242, 247, 0.92);
  max-width: 72ch;
  margin: 18px 0 0;
}
.imi-interior-hero__desc p { margin: 0 0 0.7em; }
.imi-interior-hero__desc p:last-child { margin-bottom: 0; }

.imi-interior-content {
  background: #fff;
  padding: clamp(44px, 6vw, 88px) clamp(20px, 5vw, 48px);
}
.imi-interior__parts {
  display: flex;
  flex-direction: column;
  gap: clamp(36px, 5vw, 64px);
}
.imi-interior__block-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.25rem, 1rem + 3vw, 3.5rem);
  line-height: 1.15;
  color: var(--navy-900);
  margin: 0 0 16px;
}

/* IMI prose — body text inside content parts (WYSIWYG HTML) */
.imi-prose { font-family: var(--font-body); color: #2b3640; }
.imi-prose p { margin: 0 0 1.1em; font-size: 1.0625rem; line-height: 1.7; }
.imi-prose > :last-child { margin-bottom: 0; }
.imi-prose h2 { font-family: var(--font-display); color: var(--navy-900); font-size: clamp(2.25rem, 1rem + 3vw, 3.5rem); line-height: 1.2; margin: 1.4em 0 0.5em; }
.imi-prose h3 { font-family: var(--font-display); color: var(--navy-900); font-size: clamp(1.2rem, 0.6vw + 1.05rem, 1.45rem); line-height: 1.25; margin: 1.3em 0 0.4em; }
.imi-prose h4 { font-family: var(--font-display); color: var(--navy-900); font-size: 1.15rem; margin: 1.2em 0 0.4em; }
.imi-prose ul, .imi-prose ol { margin: 0 0 1.1em; padding-left: 1.4em; }
.imi-prose li { margin: 0 0 0.5em; font-size: 1.0625rem; line-height: 1.65; }
.imi-prose a { color: var(--teal-600); text-decoration: underline; text-underline-offset: 2px; padding: 11px 2px; margin: -11px -2px; }
.imi-prose a:hover { color: #134b56; }
.imi-prose img { max-width: 100%; height: auto; border-radius: 8px; margin: 1em 0; }
.imi-prose strong { font-weight: 700; color: var(--navy-900); }
.imi-prose table { width: 100%; border-collapse: collapse; margin: 1.2em 0; font-size: 1rem; }
.imi-prose th, .imi-prose td { border: 1px solid #e3e8ec; padding: 10px 12px; text-align: left; vertical-align: top; }
.imi-prose h2:first-child, .imi-prose h3:first-child, .imi-prose p:first-child { margin-top: 0; }

/* Phone (≤767px): center text per the IMI mobile system, EXCEPT lists + tables
   (and their cells), which stay left-aligned. Body/list type floor 16px. */
@media (max-width: 767px) {
  .imi-interior-hero { text-align: center; }
  .imi-interior-hero__desc { margin-left: auto; margin-right: auto; }
  .imi-interior__block-title { text-align: center; }
  .imi-interior__block-body { text-align: center; }
  .imi-interior__block-body ul,
  .imi-interior__block-body ol,
  .imi-interior__block-body table,
  .imi-interior__block-body th,
  .imi-interior__block-body td { text-align: left; }
  .imi-prose p, .imi-prose li { font-size: 16px; }
}

/* =====================================================================
   INTERIOR PAGE LAYOUTS (2026-06-17) — per-page imi_layout: sidebar |
   editorial | sectioned. Base hero/content/prose are defined above; these
   are the layout-specific structures. Tokens: navy-900, teal-600 exist;
   paper-warm #FDF8F3, border #e3e8ec hardcoded.
   ===================================================================== */

/* Hero alignment: editorial + sectioned center; sidebar stays left. */
.imi-interior--editorial .imi-interior-hero,
.imi-interior--sectioned .imi-interior-hero { text-align: center; }
.imi-interior--editorial .imi-interior-hero__desc,
.imi-interior--sectioned .imi-interior-hero__desc { margin-left: auto; margin-right: auto; }

/* Decision layout: center the hero title only (Rox request). */
.imi-interior--decision .imi-interior-hero__title { text-align: center; }

/* ---- Editorial + fallback: centered reading column ---- */
.imi-interior__col { max-width: 720px; margin: 0 auto; }
.imi-interior__esec { padding: 34px 0; border-top: 1px solid #e3e8ec; }
.imi-interior__esec:first-child { border-top: 0; padding-top: 0; }
.imi-interior__ekick { font-family: var(--font-display); font-weight: 600; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--teal-600); margin: 0 0 8px; }
.imi-interior__esec .imi-interior__block-title { margin-bottom: 12px; }
.imi-interior__cta-card { background: #FDF8F3; border-radius: 14px; text-align: center; padding: 44px 30px; margin-top: 44px; }
.imi-interior__cta-card h3 { font-family: var(--font-display); font-weight: 700; color: var(--navy-900); font-size: 1.5rem; margin: 0 0 10px; }
.imi-interior__cta-card p { color: #51606b; margin: 0 0 20px; font-size: 1.0625rem; }

/* ---- Sidebar ---- */
.imi-interior__grid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 54px; align-items: start; }
.imi-interior__main .imi-interior__block { margin-bottom: 38px; scroll-margin-top: calc(var(--imi-nav-h) + 16px); }
.imi-interior__main .imi-interior__block:last-child { margin-bottom: 0; }
.imi-interior__aside { position: sticky; top: calc(var(--imi-nav-h) + 20px); display: flex; flex-direction: column; gap: 20px; }
.imi-interior__card { background: #fff; border: 1px solid #e3e8ec; border-radius: 14px; padding: 24px; }
.imi-interior__card--cta { background: var(--navy-900); border: 0; color: #fff; text-align: center; }
.imi-interior__card--cta h4 { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; margin: 0 0 6px; color: #fff; }
.imi-interior__card--cta p { font-size: 1rem; color: #b8d0df; margin: 0 0 16px; }
.imi-interior__card--cta .imi-btn { width: 100%; }
.imi-interior__card-phone { display: block; font-family: var(--font-display); font-weight: 700; color: #fff; margin-top: 14px; font-size: 1.05rem; text-decoration: none; padding: 9px 0; }
.imi-interior__card h5 { font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--teal-600); margin: 0 0 14px; }
.imi-interior__facts { list-style: none; margin: 0; padding: 0; }
.imi-interior__facts li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid #e3e8ec; font-size: .95rem; }
.imi-interior__facts li:last-child { border-bottom: 0; }
.imi-interior__facts .k { color: #7a8893; }
.imi-interior__facts .v { font-family: var(--font-display); font-weight: 600; color: var(--navy-900); text-align: right; }
.imi-interior__toc { list-style: none; margin: 0; padding: 0; }
.imi-interior__toc li { border-left: 2px solid #e3e8ec; }
.imi-interior__toc a { display: block; padding: 12px 0 12px 14px; font-family: var(--font-display); font-size: .9rem; color: var(--navy-900); text-decoration: none; }
.imi-interior__toc a:hover { color: var(--teal-600); border-left-color: var(--teal-600); }
/* JS-built blog-post TOC (#toc-list, app.js) — converted from raw Tailwind
   utility classes to IMI classes (DS-124, 2026-07-17). Values matched 1:1
   to the Tailwind rules they replace; higher specificity than
   .imi-interior__toc a above so it fully overrides the default link style,
   same as the Tailwind utilities did before. */
.imi-interior__toc .imi-bp__toc-link {
  display: block;
  padding: 8px 16px;
  border-radius: .75rem;
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 400;
  font-style: normal;
  color: #000;
  text-decoration: none;
  transition: color .15s cubic-bezier(.4,0,.2,1), background-color .15s cubic-bezier(.4,0,.2,1), border-color .15s cubic-bezier(.4,0,.2,1), text-decoration-color .15s cubic-bezier(.4,0,.2,1), fill .15s cubic-bezier(.4,0,.2,1), stroke .15s cubic-bezier(.4,0,.2,1);
}
.imi-interior__toc .imi-bp__toc-link:hover {
  background-color: #FDF8F3;
  color: #000;
}
.imi-interior__toc .imi-bp__toc-link.is-active {
  color: #0E2540 !important;
  font-weight: 700 !important;
}
.imi-interior__toc .imi-bp__toc-sublist { margin-left: 1rem; }
.imi-interior__quote { font-family: var(--font-body); font-style: italic; color: #3a4853; font-size: 1rem; line-height: 1.55; margin: 0; }
.imi-interior__quote cite { display: block; font-style: normal; font-family: var(--font-display); font-weight: 600; font-size: .82rem; color: var(--teal-600); margin-top: 10px; }

/* Sidebar fit-to-viewport (DS-141 round 2, 2026-07-20, Rox request): with
   CTA + Quick Facts + Testimonial all present, the aside can genuinely be
   taller than a real (esp. shorter-desktop) viewport even with the TOC's
   own internal scrollbar (DS-138's earlier .imi-interior__toc-only cap) —
   the lower cards could still fall below the fold with no way to reach them.
   Rox: "put the sidebar in a scrollbar" — so the WHOLE aside is now the
   scroll container (max-height + overflow-y:auto), one scrollbar for
   everything, TOC included, instead of a second nested one on the TOC list.
   NOTE this repeats an earlier DS-138 attempt that used overflow:HIDDEN on
   the aside and broke (flex-shrink squeezed the TOC to ~0 height and
   clipped the quote with no way to reach it) — overflow-y:AUTO avoids that
   failure mode: content keeps its natural size and the container scrolls
   instead of clipping. Scoped to >=1024px — mobile keeps the existing
   static, unclipped stack (TOC lives in the top dropdown there instead). */
@media (min-width: 1024px) {
  .imi-interior__aside {
    max-height: calc(100vh - var(--imi-nav-h) - 40px);
    overflow-y: auto;
    padding-right: 6px;
    scrollbar-width: thin;
    scrollbar-color: var(--teal-600) #eef2f4;
  }
  .imi-interior__aside::-webkit-scrollbar { width: 6px; }
  .imi-interior__aside::-webkit-scrollbar-track { background: #eef2f4; border-radius: 6px; }
  .imi-interior__aside::-webkit-scrollbar-thumb { background: var(--teal-600); border-radius: 6px; }
}

/* ---- Sectioned ---- */
.imi-interior--sectioned .imi-interior-content { padding: 0; }
.imi-interior__csec { padding: clamp(44px, 5vw, 64px) clamp(20px, 5vw, 48px); }
.imi-interior__csec--warm { background: #FDF8F3; }
.imi-interior__csec--white { background: #fff; }
.imi-interior__cgrid { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 50px; align-items: start; max-width: 1240px; margin: 0 auto; }
.imi-interior__crail .imi-interior__block-title { margin: 8px 0 0; }
.imi-interior__cnum { font-family: var(--font-display); font-weight: 800; font-size: 3.2rem; line-height: 1; color: #dbe5ec; }
.imi-interior__cta-band { background: var(--teal-600); color: #fff; text-align: center; padding: clamp(48px, 6vw, 72px) clamp(20px, 5vw, 48px); }
.imi-interior__cta-band h3 { font-family: var(--font-display); font-weight: 700; font-size: 2rem; margin: 0 0 14px; color: #fff; }
.imi-interior__cta-band p { color: var(--paper); max-width: 52ch; margin: 0 auto 24px; font-size: 1.1rem; line-height: 1.6; }
.imi-interior__cta-band .imi-btn--accent { background: var(--navy-900); border-color: var(--navy-900); color: var(--paper); }
.imi-interior__cta-band .imi-btn--accent:hover { background: var(--navy-700); border-color: var(--navy-700); color: var(--paper); }

/* ---- Tablet/phone: collapse the multi-column layouts ---- */
@media (max-width: 1023px) {
  .imi-interior__grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .imi-interior__aside { position: static; }
  .imi-interior__cgrid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .imi-interior__cnum { font-size: 2.4rem; }
}

/* =====================================================================
   INTERIOR PROSE — tables, lists, quotes, figures (2026-06-17)
   Applies to .imi-prose across all 3 interior layouts. Content uses
   <blockquote>, <figure>, <ol>; tables are styled defensively for any
   future use.
   ===================================================================== */

/* Lists — teal markers, comfortable nesting */
.imi-prose ul { list-style: disc; }
.imi-prose ol { list-style: decimal; }
.imi-prose li::marker { color: var(--teal-600); }
.imi-prose li > ul, .imi-prose li > ol { margin: 0.5em 0 0; }
.imi-prose li > p { margin: 0 0 0.5em; }

/* Blockquotes — teal left rule, serif italic (no radius on single-side border) */
.imi-prose blockquote {
  margin: 1.5em 0;
  padding: 4px 0 4px 22px;
  border-left: 3px solid var(--teal-600);
  border-radius: 0;
  font-family: var(--font-body);
  font-style: italic;
  font-size: 1.2rem;
  line-height: 1.55;
  color: var(--navy-900);
}
.imi-prose blockquote p { font-size: inherit; line-height: inherit; margin: 0 0 0.5em; }
.imi-prose blockquote cite,
.imi-prose blockquote footer {
  display: block;
  font-style: normal;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--teal-600);
  margin-top: 10px;
}

/* Figures + captions */
.imi-prose figure { margin: 1.4em 0; }
.imi-prose figure img { margin: 0; }
.imi-prose figcaption {
  margin-top: 8px;
  font-size: 0.9rem;
  font-style: italic;
  color: #6b7884;
  text-align: center;
}

/* Tables — full-width, bordered, zebra header; scrolls on phones */
.imi-prose table { width: 100%; max-width: 100%; border-collapse: collapse; margin: 1.4em 0; font-size: 1rem; }
.imi-prose thead th, .imi-prose th { background: #f1f5f7; color: var(--navy-900); font-family: var(--font-display); font-weight: 600; text-align: left; }
.imi-prose th, .imi-prose td { border: 1px solid #e3e8ec; padding: 10px 12px; vertical-align: top; }
.imi-prose tbody tr:nth-child(even) { background: #fafbfc; }
@media (max-width: 600px) {
  .imi-prose table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
}

/* =====================================================================
   MEGA MENU — 3rd level (2026-06-17): a level-2 item whose children are
   sub-groups (e.g. Other Procedures → Craniofacial Surgery) renders as a
   group: teal umbrella label + side-by-side sub-columns. Light desktop
   panel colors; stacks in the mobile accordion.
   ===================================================================== */
@media (min-width: 1281px) {
  .imi-mega__inner { flex-wrap: wrap; row-gap: 10px; }
  .imi-mega__group { display: flex; flex-direction: column; min-width: 0; }
  .imi-mega__group-label {
    font-family: var(--font-ui); font-weight: 700; font-size: 11px;
    letter-spacing: .16em; text-transform: uppercase; color: var(--teal-600);
    margin: 0 0 16px; padding-bottom: 9px; border-bottom: 1px solid var(--rule);
    white-space: nowrap;
  }
  .imi-mega__group-label a { color: inherit; text-decoration: none; }
  .imi-mega__group-label a:hover { color: var(--navy-900); }
  .imi-mega__group-cols { display: flex; gap: 24px; }
  .imi-mega__group-cols .imi-mega__col { flex: 0 0 auto; width: 175px; }
  /* The Other Procedures panel (the only one with sub-groups) is content-dense,
     so drop the promo card on desktop and let the columns use the room. */
  .imi-mega:has(.imi-mega__group) .imi-mega__promo { display: none; }
}
@media (max-width: 1280px) {
  .imi-mega__group-label {
    font-family: var(--font-ui); font-weight: 700; font-size: 12px;
    letter-spacing: .14em; text-transform: uppercase; color: var(--teal-600);
    margin: 8px 0 6px;
  }
  .imi-mega__group-cols { display: block; }
}

/* =====================================================================
   INTERIOR — DECISION layout (flagship: intro + comparison + tabs +
   quick-facts strip + CTA). Selected per page via imi_layout=decision.
   2026-06-17 (built for SUPOR™ Ear Reconstruction).
   ===================================================================== */
.imi-decision-intro { background: #fff; padding: clamp(40px,5vw,64px) clamp(20px,5vw,48px) clamp(6px,2vw,14px); }
.imi-decision-intro .imi-prose { max-width: 760px; margin: 0 auto; text-align: center; }

.imi-decision-compare { background: #fff; padding: clamp(36px,5vw,60px) clamp(20px,5vw,48px); }
.imi-decision-compare__title { font-family: var(--font-display); font-weight: 600; color: var(--navy-900); font-size: clamp(2.25rem, 1rem + 3vw, 3.5rem); text-align: center; margin: 0 0 28px; }
.imi-decision-compare__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; max-width: 920px; margin: 0 auto; }
.imi-decision-card { border-radius: 16px; padding: 28px; }
.imi-decision-card--old { background: #f6f7f9; border: 1px solid var(--rule, #e3e8ec); }
.imi-decision-card--new { background: var(--navy-900); color: #fff; }
.imi-decision-card__tag { font-family: var(--font-ui); font-weight: 700; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--teal-600); }
.imi-decision-card--old .imi-decision-card__tag { color: #8a98a3; }
.imi-decision-card h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; margin: 8px 0 16px; color: var(--navy-900); }
.imi-decision-card--new h3 { color: #fff; }
.imi-decision-row { display: flex; justify-content: space-between; gap: 14px; padding: 11px 0; border-top: 1px solid var(--rule, #e3e8ec); font-size: .97rem; }
.imi-decision-card--new .imi-decision-row { border-top-color: rgba(255,255,255,.13); }
.imi-decision-row .lbl { color: #8a98a3; }
.imi-decision-card--new .imi-decision-row .lbl { color: #9fb6c7; }
.imi-decision-row .val { font-family: var(--font-display); font-weight: 600; text-align: right; }

.imi-decision-tabs { background: #FDF8F3; padding: clamp(40px,5vw,60px) clamp(20px,5vw,48px); }
.imi-decision-tabs__btns { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 26px; }
.imi-decision-tabs__btn { font-family: var(--font-ui); font-weight: 600; font-size: 13px; color: var(--navy-900); background: #fff; border: 1px solid var(--rule, #e3e8ec); border-radius: 30px; padding: 12px 20px; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.imi-decision-tabs__btn:hover { border-color: var(--teal-600); color: var(--teal-600); }
.imi-decision-tabs__btn.is-on { background: var(--teal-600); color: #fff; border-color: var(--teal-600); }
.imi-decision-tabs__panel { display: none; max-width: 780px; margin: 0 auto; background: #fff; border: 1px solid var(--rule, #e3e8ec); border-radius: 14px; padding: 32px; }
.imi-decision-tabs__panel.is-on { display: block; }
.imi-decision-tabs__panel h3 { font-family: var(--font-display); font-weight: 600; color: var(--navy-900); font-size: 1.4rem; margin: 0 0 14px; }

.imi-decision-facts { background: #fff; padding: clamp(32px,4vw,48px) clamp(20px,5vw,48px); }
.imi-decision-facts__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.imi-decision-fact { border: 1px solid var(--rule, #e3e8ec); border-radius: 12px; padding: 16px 22px; text-align: center; min-width: 150px; }
.imi-decision-fact .v { display: block; font-family: var(--font-display); font-weight: 700; color: var(--navy-900); font-size: 1.05rem; }
.imi-decision-fact .k { display: block; font-size: .8rem; color: #7a8893; margin-top: 4px; }
@media (max-width: 767px) { .imi-decision-compare__grid { grid-template-columns: minmax(0, 1fr); } }

/* =====================================================================
   HUB PAGES (2026-07-07) — Photo Gallery 3179 / Testimonials 3605 / FAQ 3618
   Components: .imi-page-hero (hero-section block, "other" variant — also
   renders on About 2740 / Services 2746 / Nerve Palsy 3233),
   .imi-gallery-index (+ .imi-gi-card), .imi-testimonials--hub (light-bg
   overrides + server pager for the paginated reviews wall).
   ===================================================================== */

/* ---- PAGE HERO ------------------------------------------------------ */
.imi-page-hero {
  background: var(--paper-warm-alt);
  padding: 64px 0 72px;
  color: var(--ink);
  overflow: hidden;
}
.imi-page-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 56px;
  align-items: center;
}
.imi-page-hero__title { margin-bottom: 20px; }
.imi-page-hero__desc p {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.72;
  color: var(--ink-soft);
  margin: 0 0 18px;
}
.imi-page-hero__desc p:last-child { margin-bottom: 0; }
.imi-page-hero__desc h2,
.imi-page-hero__desc h3,
.imi-page-hero__desc h4 {
  font-family: var(--font-display);
  color: var(--ink);
  margin: 24px 0 12px;
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.3;
}
.imi-page-hero__desc ul,
.imi-page-hero__desc ol {
  margin: 0 0 18px;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.imi-page-hero__desc li {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-soft);
}
.imi-page-hero__desc a { color: var(--teal-600); text-decoration: underline; text-underline-offset: 3px; }
.imi-page-hero__desc--after { margin-top: 18px; }
.imi-page-hero__btn { margin: 26px 0 0; }
.imi-page-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}
.imi-page-hero__actions .imi-page-hero__btn { margin-top: 26px; }
/* device-scoped CTA duplicates (block renders one per device) */
.imi-page-hero__btn--mobile { display: none; }
@media (max-width: 767px) {
  .imi-page-hero__btn--mobile { display: block; }
  .imi-page-hero__btn--desktop { display: none; }
}
.imi-page-hero__quote {
  background: var(--paper);
  border: 1px solid var(--sand-200);
  border-radius: 14px;
  padding: 22px 24px 20px;
  margin: 28px 0 0;
}
.imi-page-hero__quote-text {
  margin: 0 0 16px;
  font-family: var(--font-body);
  font-style: italic;
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-soft);
}
.imi-page-hero__quote-text p { margin: 0 0 10px; font-size: 16px; }
.imi-page-hero__quote-text p:last-child { margin-bottom: 0; }
.imi-page-hero__quote-author {
  display: flex;
  align-items: center;
  gap: 12px;
}
.imi-page-hero__quote-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  /* Was old-brand peach #F4CF9D — fixed Phase 6 (2026-07-13) to match the
     navy initials avatar used everywhere else (.imi-t-card__avatar--initials). */
  background: radial-gradient(ellipse 80% 70% at 50% 45%, #1F3A5F 0%, #142a4a 55%, #0E2540 100%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--paper);
  flex: none;
}
.imi-page-hero__form { margin: 24px 0 0; }
.imi-page-hero__quote-name {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 16px;
  color: var(--ink);
}
.imi-page-hero__media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 20px;
  box-shadow: 0 24px 48px rgba(14, 37, 64, 0.14);
}
@media (max-width: 1023px) {
  .imi-page-hero { padding: 40px 0 56px; }
  /* Stacked order (Rox 2026-07-07): eyebrow, headline, image, content,
     CTA, testimonial. display:contents promotes the copy's children to
     grid items so the image can interleave; spacing via element margins
     (row-gap 0), text-align still inherits from __copy. */
  .imi-page-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .imi-page-hero__copy { display: contents; }
  .imi-page-hero__copy > .imi-kicker { order: 1; }
  .imi-page-hero__title { order: 2; }
  .imi-page-hero__media { order: 3; margin: 4px 0 24px; }
  .imi-page-hero__media img { max-height: 420px; object-fit: cover; }
  .imi-page-hero__desc { order: 4; }
  .imi-page-hero__form { order: 5; }
  .imi-page-hero__desc--after { order: 5; }
  .imi-page-hero__btn,
  .imi-page-hero__actions { order: 6; }
  .imi-page-hero__quote { order: 7; }
}
@media (max-width: 767px) {
  /* IMI mobile system: center text on phones — lists/tables stay left */
  .imi-page-hero__copy { text-align: center; }
  .imi-page-hero__desc ul,
  .imi-page-hero__desc ol { text-align: left; }
  .imi-page-hero__actions { justify-content: center; }
  .imi-page-hero__quote { text-align: left; }
}

/* ---- PAGE HERO — FROST variant --------------------------------------
   hero-section block, select_hero_section = "frost". Microtia 2746
   (2026-07-13, mockup: theme mockups/microtia/hero-directions.html dir C).
   Desktop: hero image doubles as blurred backdrop, copy on a frosted
   glass panel, sharp photo in a paper frame, after-copy in a warm band.
   ≤767px: Solomon-style — full-bleed 300px photo melting into solid
   navy, centered copy on navy, full-width CTA.
   NOTE ≤1023px: base sets .imi-page-hero__copy{display:contents} for the
   stacked-order system — frost restores display:block (the glass panel
   must stay one box). --------------------------------------------------- */
.imi-page-hero--frost {
  position: relative;
  background: var(--navy-900);
  padding: 56px 0 0;
}
.imi-page-hero--frost .imi-page-hero__backdrop {
  position: absolute;
  inset: -40px;
  background-position: center 30%;
  background-size: cover;
  background-repeat: no-repeat;
  filter: blur(26px) saturate(0.82) brightness(0.72);
  transform: scale(1.12);
}
.imi-page-hero--frost .imi-page-hero__wash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg,
    rgba(14, 37, 64, 0.88) 0%,
    rgba(14, 37, 64, 0.62) 45%,
    rgba(26, 104, 120, 0.45) 100%);
}
.imi-page-hero--frost .imi-page-hero__grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.35;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.08 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 160px 160px;
  mix-blend-mode: overlay;
}
.imi-page-hero--frost .imi-wrap {
  z-index: 4;
  padding-inline: clamp(22px, 4vw, 48px);
}
.imi-page-hero--frost .imi-page-hero__grid {
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  padding-bottom: 80px;
}
.imi-page-hero--frost .imi-page-hero__copy {
  background: rgba(248, 245, 240, 0.86);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 22px;
  padding: clamp(30px, 4vw, 52px);
  box-shadow: 0 32px 80px rgba(8, 20, 36, 0.45);
}
.imi-page-hero--frost .imi-kicker { color: var(--teal-deep); }
.imi-page-hero--frost .imi-page-hero__title {
  font-size: clamp(34px, 4vw, 50px);
  line-height: 1.1;
}
.imi-page-hero--frost .imi-page-hero__title em { color: var(--teal-deep); }
.imi-page-hero--frost .imi-page-hero__media {
  max-width: 420px;
  margin-left: auto;
}
.imi-page-hero--frost .imi-page-hero__media img {
  border-radius: 18px;
  border: 6px solid rgba(248, 245, 240, 0.92);
  box-shadow: 0 28px 64px rgba(4, 12, 24, 0.55);
}
/* ≥1024: the copy panel drives the row height — the media column is a
   positioned frame and the photo fills it (cover), so the image grows/
   shrinks with the amount of panel content instead of dictating its own
   height (Rox 2026-07-13). */
@media (min-width: 1024px) {
  .imi-page-hero--frost .imi-page-hero__grid { align-items: stretch; }
  .imi-page-hero--frost .imi-page-hero__media {
    position: relative;
    width: 100%;
    min-height: 380px;
  }
  .imi-page-hero--frost .imi-page-hero__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 25%;
  }
}
.imi-page-hero--frost .imi-page-hero__band {
  position: relative;
  z-index: 4;
  background: var(--paper-warm);
  padding: 48px 0 56px;
}
.imi-page-hero--frost .imi-page-hero__band .imi-wrap {
  padding-inline: clamp(22px, 4vw, 48px);
}
.imi-page-hero--frost .imi-page-hero__band-cols {
  columns: 2;
  column-gap: 64px;
  border-left: 3px solid var(--teal-600);
  padding-left: 28px;
}
.imi-page-hero--frost .imi-page-hero__band-cols p {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.74;
  color: var(--ink-soft);
  margin: 0 0 18px;
  break-inside: avoid;
}
.imi-page-hero--frost .imi-page-hero__band-cols p:last-child { margin-bottom: 0; }
@media (max-width: 1023px) {
  .imi-page-hero--frost { padding: 44px 0 0; }
  .imi-page-hero--frost .imi-page-hero__copy { display: block; }
  .imi-page-hero--frost .imi-page-hero__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 44px;
    padding-bottom: 64px;
  }
  .imi-page-hero--frost .imi-page-hero__media {
    margin: 0 auto;
    max-width: 360px;
  }
  .imi-page-hero--frost .imi-page-hero__band-cols { columns: 1; }
}
@media (max-width: 767px) {
  /* Solomon-style mobile hero — photo first, melting into solid navy. */
  .imi-page-hero--frost { padding: 0; text-align: center; }
  .imi-page-hero--frost .imi-page-hero__backdrop,
  .imi-page-hero--frost .imi-page-hero__wash { display: none; }
  .imi-page-hero--frost .imi-wrap { padding-inline: 22px; }
  .imi-page-hero--frost .imi-page-hero__grid {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-bottom: 52px;
  }
  .imi-page-hero--frost .imi-page-hero__media {
    order: -1;
    position: relative;
    width: calc(100% + 44px);
    max-width: none;
    margin: 0 -22px;
  }
  .imi-page-hero--frost .imi-page-hero__media img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    object-position: 50% 22%;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .imi-page-hero--frost .imi-page-hero__media::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    /* Tall, early melt: solid navy from 78% so the photo's bottom edge
       can never show as a hard seam — the copy block pulls up into the
       solid zone (negative margin below). */
    height: 82%;
    background: linear-gradient(180deg,
      rgba(14, 37, 64, 0) 0%,
      rgba(14, 37, 64, 0.5) 34%,
      rgba(14, 37, 64, 0.88) 58%,
      var(--navy-900) 78%,
      var(--navy-900) 100%);
  }
  .imi-page-hero--frost .imi-page-hero__copy {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 6px 4px 0;
    /* Light copy on navy. Set on the panel (not just the h1) so the
       title gets it via .imi-heading{color:inherit} — belt-and-suspenders
       against the theme.json h1 color rule. */
    color: var(--paper);
    /* Pull the copy up into the melt's solid-navy zone (Solomon-style —
       the kicker rides the faded photo area). Melt is solid from 78%,
       so the overlapped strip is always legible navy. */
    position: relative;
    z-index: 2;
    margin-top: -56px;
  }
  .imi-page-hero--frost .imi-kicker {
    color: var(--paper);
    padding-bottom: 9px;
    border-bottom: 2px solid rgba(250, 251, 252, 0.9);
    margin-bottom: 22px;
  }
  .imi-page-hero--frost .imi-page-hero__title { color: var(--paper); }
  .imi-page-hero--frost .imi-page-hero__title em { color: var(--sky-300); }
  .imi-page-hero--frost .imi-page-hero__desc p { color: rgba(234, 242, 247, 0.88); }
  .imi-page-hero--frost .imi-page-hero__btn .imi-btn {
    display: block;
    width: 100%;
    text-align: center;
  }
  .imi-page-hero--frost .imi-page-hero__band { text-align: center; }
  .imi-page-hero--frost .imi-page-hero__band-cols {
    border-left: 0;
    padding-left: 0;
  }
}

/* ---- PAGE HERO — FROST LIGHT overrides -------------------------------
   select_hero_section = "frost_light" (2026-07-13). Shares the frost
   structure above; paper-toned wash over the blurred photo, ink copy.
   ≤767px: photo melts into warm paper instead of navy. ----------------- */
.imi-page-hero--frost-light { background: var(--paper-warm-alt); }
.imi-page-hero--frost-light .imi-page-hero__backdrop {
  filter: blur(26px) saturate(0.7) brightness(1.08);
}
.imi-page-hero--frost-light .imi-page-hero__wash {
  background: linear-gradient(115deg,
    rgba(253, 248, 243, 0.92) 0%,
    rgba(253, 248, 243, 0.68) 45%,
    rgba(184, 212, 227, 0.42) 100%);
}
/* ≥768 only: these sit AFTER the shared frost ≤767 dissolve in the file,
   so unscoped they would re-paint the panel/shadow on phones. */
@media (min-width: 768px) {
  .imi-page-hero--frost-light .imi-page-hero__copy {
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(232, 221, 208, 0.8);
    box-shadow: 0 24px 60px rgba(42, 37, 32, 0.16);
  }
  .imi-page-hero--frost-light .imi-page-hero__media img {
    box-shadow: 0 24px 56px rgba(42, 37, 32, 0.24);
  }
}
.imi-page-hero--frost-light .imi-page-hero__band {
  border-top: 1px solid var(--sand-200);
}
@media (max-width: 767px) {
  .imi-page-hero--frost-light { background: var(--paper-warm-alt); }
  .imi-page-hero--frost-light .imi-page-hero__media::after {
    background: linear-gradient(180deg,
      rgba(253, 248, 243, 0) 0%,
      rgba(253, 248, 243, 0.5) 34%,
      rgba(253, 248, 243, 0.88) 58%,
      var(--paper-warm-alt) 78%,
      var(--paper-warm-alt) 100%);
  }
  .imi-page-hero--frost-light .imi-page-hero__copy { color: var(--ink); }
  .imi-page-hero--frost-light .imi-kicker {
    color: var(--navy-900);
    border-bottom-color: rgba(14, 37, 64, 0.75);
  }
  .imi-page-hero--frost-light .imi-page-hero__title { color: var(--ink); }
  .imi-page-hero--frost-light .imi-page-hero__title em { color: var(--teal-deep); }
  .imi-page-hero--frost-light .imi-page-hero__desc p { color: var(--ink-soft); }
}

/* ---- GALLERY INDEX (Photo Gallery hub) ------------------------------ */
.imi-gallery-index__head {
  text-align: center;
  max-width: 880px;
  margin: 0 auto 48px;
}
.imi-gallery-index__desc p {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.72;
  color: var(--ink-soft);
  margin: 0 0 16px;
}
.imi-gallery-index__desc p:last-child { margin-bottom: 0; }
.imi-gallery-index__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 36px 32px;
}
.imi-gi-card__media {
  display: block;
  aspect-ratio: 2 / 1;
  overflow: hidden;
  border-radius: 16px;
  cursor: pointer;
  background: var(--paper-warm);
}
.imi-gi-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 400ms var(--ease-out);
}
.imi-gi-card:hover .imi-gi-card__media img { transform: scale(1.03); }
.imi-gi-card__link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
  min-height: 44px;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 16px;
  color: var(--ink);
  text-decoration: none;
  transition: color 200ms var(--ease-out);
}
.imi-gi-card__link svg { flex: none; transition: transform 200ms var(--ease-out); }
.imi-gi-card__link:hover { color: var(--teal-600); }
.imi-gi-card__link:hover svg { transform: translateX(3px); }
.imi-gallery-index__cta { text-align: center; margin-top: 56px; }
.imi-gallery-index__empty { text-align: center; color: var(--ink-soft); padding: 40px 0; }
@media (max-width: 767px) {
  .imi-gallery-index__grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .imi-gallery-index__head { margin-bottom: 36px; }
}

/* ---- TESTIMONIALS HUB (light background + server pager) ------------- */
.imi-testimonials--hub { color: var(--ink); }
.imi-testimonials--hub .imi-heading { color: var(--ink); }
.imi-testimonials--hub .imi-testimonials__rating-score,
.imi-testimonials--hub .imi-testimonials__rating-count { color: var(--ink-soft); }
.imi-testimonials--hub .imi-testimonials__rating-google { border: 1px solid rgba(10, 26, 46, 0.12); }
.imi-testimonials--hub .imi-testimonials__controls { color: var(--ink-soft); }
.imi-testimonials--hub .imi-testimonials__controls a,
.imi-testimonials--hub .imi-testimonials__controls button { color: var(--ink); }
.imi-testimonials--hub .imi-testimonials__controls .pager-btn { border: 1px solid rgba(10, 26, 46, 0.30); }
.imi-testimonials--hub .imi-testimonials__controls .pager-btn:hover { background: rgba(10, 26, 46, 0.06); }
.imi-testimonials__pager { display: flex; align-items: center; gap: 8px; }
.imi-testimonials__pager .pager-count { opacity: 0.8; padding: 6px 4px; white-space: nowrap; }
.imi-testimonials__pager .pager-btn.is-disabled { opacity: 0.3; pointer-events: none; }
@media (max-width: 767px) {
  .imi-testimonials--hub .imi-testimonials__controls { justify-content: center; }
}

/* =====================================================================
   GALLERY SINGLES (2026-07-07, v2 "Guided Case Viewer" — Direction C)
   templates/single-gallery-new.php. The stage frame keeps the legacy
   .gallery_box class (app.js/WPCode lightbox contract) — styled via
   .imi-sgv__frame, never renamed. v1 card-wall CSS removed same day.
   ===================================================================== */
.imi-sg-hero {
  background: var(--paper-warm-alt);
  padding: 32px 0 8px;
  text-align: center;
}
.imi-sg-hero__back {
  display: flex;
  align-items: center;
  min-height: 44px;
  width: max-content;
  margin: 0 auto 22px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 200ms var(--ease-out);
}
.imi-sg-hero__back:hover { color: var(--teal-600); }
.imi-sg-hero__title { margin-bottom: 0; }
.imi-sg-body { background: var(--paper-warm-alt); padding-top: 56px; padding-bottom: 88px; }
.imi-sg-body .imi-wrap { display: flex; flex-direction: column; gap: 56px; }
.imi-sg__head {
  text-align: center;
  max-width: 980px;
  margin: 0 auto 28px;
}
.imi-sg__heading { font-size: clamp(37px, 21px + 3.2vw, 50px); margin-bottom: 16px; }
.imi-sg__desc { text-align: left; }
.imi-sg__desc p { font-size: 16px; }

/* viewer */
.imi-sgv { max-width: 980px; margin: 0 auto; width: 100%; }
.imi-sgv--single { max-width: 720px; }
.imi-sgv__counter {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--font-ui);
  margin-bottom: 14px;
}
.imi-sgv__count {
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal-600);
}
.imi-sgv__hint { font-size: 13px; color: var(--ink-soft); }
.imi-sgv__stage { position: relative; }
.imi-sgv__frame {
  display: block;
  border-radius: 20px;
  overflow: hidden;
  cursor: zoom-in;
  background: var(--paper-warm);
  box-shadow: 0 28px 60px rgba(14, 37, 64, 0.16);
}
.imi-sgv__img { display: block; width: 100%; height: auto; }
.imi-sgv__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 0;
  background: rgba(250, 251, 252, 0.92);
  color: var(--navy-900);
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 200ms var(--ease-out), color 200ms var(--ease-out);
  z-index: 5;
}
.imi-sgv__arrow:hover { background: var(--navy-900); color: var(--paper); }
.imi-sgv__arrow--prev { left: 16px; }
.imi-sgv__arrow--next { right: 16px; }
.imi-sgv__rail {
  display: flex;
  gap: 10px;
  margin-top: 16px;
  overflow-x: auto;
  padding-bottom: 8px;
  scrollbar-width: thin;
}
.imi-sgv__thumb {
  flex: none;
  width: 128px;
  border: 2px solid transparent;
  border-radius: 10px;
  overflow: hidden;
  padding: 0;
  cursor: pointer;
  background: none;
  opacity: 0.65;
  transition: opacity 200ms var(--ease-out), border-color 200ms var(--ease-out);
}
.imi-sgv__thumb img { display: block; width: 100%; height: auto; }
.imi-sgv__thumb:hover { opacity: 1; }
.imi-sgv__thumb.is-on { border-color: var(--teal-600); opacity: 1; }

/* about-this-gallery grid (mockup-C: prose left, consult panel right) */
.imi-sg-about {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 56px;
  align-items: start;
  text-align: left;
}
.imi-sg-about .imi-sg__heading { margin-bottom: 16px; }
.imi-sg-about__desc p { font-size: 16.5px; line-height: 1.72; }
.imi-sg-panel--inline {
  max-width: none;
  margin: 0;
  text-align: left;
}
@media (max-width: 1023px) {
  .imi-sg-about { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}
@media (max-width: 767px) {
  /* IMI mobile system: center text on phones — lists stay left */
  .imi-sg-about__copy { text-align: center; }
  .imi-sg-about__desc ul,
  .imi-sg-about__desc ol { text-align: left; }
  .imi-sg-panel--inline { text-align: center; }
}

/* consult panel + CTA */
.imi-sg-panel {
  background: var(--paper-warm);
  border: 1px solid var(--sand-200);
  border-radius: 16px;
  padding: 34px 36px;
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.imi-sg-panel__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(20px, 2.2vw, 24px);
  margin: 0 0 10px;
}
.imi-sg-panel__text {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0 0 22px;
}
.imi-sg__cta { text-align: center; }
.imi-sg__empty { text-align: center; color: var(--ink-soft); padding: 40px 0; }

/* learn-more split */
.imi-sg-lmr { background: var(--paper); }
.imi-sg-lmr__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 48px;
  align-items: center;
}
.imi-sg-lmr__media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 20px;
  box-shadow: 0 24px 48px rgba(14, 37, 64, 0.12);
}
.imi-sg-lmr__cta { margin-top: 28px; }

@media (max-width: 1023px) {
  .imi-sg-body .imi-wrap { gap: 48px; }
  .imi-sg-lmr__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}
@media (max-width: 767px) {
  /* IMI mobile system: center text on phones — lists stay left */
  .imi-sgv__counter { flex-direction: column; align-items: center; gap: 4px; text-align: center; }
  .imi-sgv__arrow { width: 40px; height: 40px; }
  .imi-sgv__arrow--prev { left: 10px; }
  .imi-sgv__arrow--next { right: 10px; }
  .imi-sgv__thumb { width: 104px; }
  .imi-sg-panel { padding: 28px 22px; }
  .imi-sg-lmr__copy { text-align: center; }
  .imi-sg-lmr__copy .imi-prose ul,
  .imi-sg-lmr__copy .imi-prose ol { text-align: left; }
}

/* =====================================================================
   NEXT STEPS (2026-07-07) — Photo Gallery hub 3179 "What Happens Next"
   (Direction C from outputs/transformations-mockups.html, Rox-approved).
   wp:html section in the page content; replaced the about-microtia block.
   ===================================================================== */
.imi-ns { background: var(--paper-warm); }
.imi-ns__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 28px;
  align-items: center;
  max-width: 880px;
  margin: 0 auto 48px;
}
.imi-ns__avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--paper);
  box-shadow: 0 12px 28px rgba(14, 37, 64, 0.18);
}
/* scoped h2.: legacy style.css content-heading rules (h2 margin-top 40px,
   font-size 48px) outrank single-class .imi-ns__heading — beat them here
   (Rox eyebrow-gap fix 2026-07-07) */
.imi-ns h2.imi-ns__heading {
  font-size: clamp(37px, 21px + 3.2vw, 50px);
  margin-top: 0;
  margin-bottom: 10px;
}
/* eyebrow sits tight over the heading (Rox 2026-07-07) */
.imi-ns .imi-kicker { margin-bottom: 6px; }
.imi-ns__lead {
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0;
}
.imi-ns__steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-bottom: 44px;
  counter-reset: imi-ns-step;
}
.imi-ns__step {
  background: var(--paper-warm-alt);
  border: 1px solid var(--sand-200);
  border-radius: 16px;
  padding: 28px 26px;
  position: relative;
  counter-increment: imi-ns-step;
}
.imi-ns__step::before {
  content: counter(imi-ns-step, decimal-leading-zero);
  position: absolute;
  top: 22px;
  right: 24px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.06em;
  color: var(--sand-200);
}
.imi-ns__icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--teal-600);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}
.imi-ns__step h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  margin: 0 0 10px;
  color: var(--ink);
}
.imi-ns__step p {
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
}
.imi-ns__cta { text-align: center; }
.imi-ns__note {
  display: block;
  margin-top: 14px;
  font-family: var(--font-ui);
  font-size: 13.5px;
  color: var(--ink-soft);
}
@media (max-width: 1023px) {
  .imi-ns__steps {
    grid-template-columns: minmax(0, 1fr);
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
  }
}
@media (max-width: 767px) {
  /* IMI mobile system: center text on phones */
  .imi-ns__head { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .imi-ns__step { text-align: center; }
  .imi-ns__icon { margin-left: auto; margin-right: auto; }
}

/* =====================================================================
   LEGACY-TYPOGRAPHY NEUTRALIZER (2026-07-07, Rox-approved)
   style.css (legacy Tailwind build) nests old content typography under
   .entry-content — e.g. `& h2 { Butler serif; margin-top:2.5rem; ... }`
   at :is()-boosted specificity (0,1,1), silently beating single-class
   IMI rules on REBUILT pages that still load style.css (hubs 3179/3605/
   3618). Scoped to imi-classed elements only, so the ~90 old-design
   interior pages keep their intended legacy look.
   DELETE this block in Phase 5 when the de-Tailwind switch stops loading
   style.css on rebuilt pages (then it's redundant).
   ===================================================================== */
.entry-content .imi-heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(36px, 4vw, 48px); /* DS-158: mobile floor 32->36 (scorecard floor 36px); desktop ceiling unchanged, already passing */
  line-height: 1.12;
  letter-spacing: -0.018em;
  margin: 0 0 24px;
  color: inherit;
}
/* Same legacy `& h2` trap hits the about-microtia block's heading class
   (spotted on the overlap build 2026-07-13 — affects Atelier instances
   on legacy-css pages too). Mirror of .imi-about__heading. */
.entry-content .imi-about__heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(36px, 4vw, 48px);
  line-height: 1.15;
  letter-spacing: -0.018em;
  color: var(--navy-900);
}
/* The neutralizer above ties .imi-about--light .imi-about__heading on
   specificity (both 2 classes) and wins on source order, leaving the
   headline navy instead of white on light-text instances (2026-07-17 fix:
   3-class override outranks it). */
.entry-content .imi-about--light .imi-about__heading { color: var(--paper); }
/* Stages (Severity Rail) head + details — legacy `& p` hijacks the
   kicker <p>, lead <p>, and .imi-body details (2026-07-14). Scoped to
   .imi-stages so dark-section kicker schemes stay untouched. */
.entry-content .imi-stages .imi-kicker {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--teal-600);
}
.entry-content .imi-stages .imi-lead p {
  font-family: var(--font-body);
  font-size: 19px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
}
.entry-content .imi-stages .imi-stages__detail p.imi-body {
  font-family: var(--font-body);
  color: var(--ink-soft);
}
/* legacy `& img { margin-bottom:2.5rem; border-radius:.75rem }` leaves a
   pale strip under each stage photo inside its plate */
.entry-content .imi-stages__ph img {
  margin-bottom: 0;
  border-radius: 0;
}
/* Legacy `& p` likewise hijacks the overlap index kicker (it's a <p>) —
   was rendering ink instead of teal (Rox 2026-07-14). Mirror of
   .imi-about__index typography. */
.entry-content .imi-about__index {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--teal-600);
  margin: 0 0 18px;
}
/* Same tie-break as the heading above — the light scheme's index color
   never wins inside .entry-content without a 3-class override (2026-07-17 fix). */
.entry-content .imi-about--light .imi-about__index { color: var(--sky-300); }
/* legacy `& img { border-radius:.75rem; margin-bottom:2.5rem }` squares the
   round review avatars and adds phantom bottom margins inside IMI cards */
.entry-content .imi-t-card__avatar {
  border-radius: 50%;
  margin-bottom: 0;
}
/* legacy `& ol,& ul { white card + 2.5rem padding }` leaks into FAQ answers
   and review quotes — restore plain IMI lists there */
/* legacy selector computes to (0,3,2) via its :not() args — outrank at (0,4,1) */
.entry-content .imi-section .imi-faqs__list .imi-faq__answer ul,
.entry-content .imi-section .imi-faqs__list .imi-faq__answer ol,
.entry-content .imi-section .imi-t-card .imi-t-card__quote ul,
.entry-content .imi-section .imi-t-card .imi-t-card__quote ol {
  background: transparent;
  border-radius: 0;
  padding: 0 0 0 22px;
  margin: 0 0 16px;
}
/* Same legacy ul white-card rules leak into about-doc FROST glass cards
   (microtia 2746, 2026-07-13). Classic white cards keep them (white-on-
   white, part of their current look). !important is required: one legacy
   variant is a 9-deep :not() chain (~0,9,x) that out-guns any sane
   selector. Do NOT dodge it via the .detailed_content exemption class
   instead — that class drags in the legacy interior li design
   (!important dark text/borders/Source Sans). */
.entry-content .imi-about-doc--frost .imi-about-doc__card ul.imi-tabs__list {
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  /* legacy also zeroes ul margin-bottom with !important — restore rhythm */
  margin: 16px 0 28px !important;
}
.entry-content .imi-about-doc--frost .imi-about-doc__card ul.imi-tabs__list li::marker {
  content: "";
}
/* Legacy nested `.entry-content & ul & li` forces Source Sans on list
   items ((0,3,3)) — restore the block's serif body at (0,4,2). */
.entry-content .imi-about-doc--frost .imi-about-doc__card ul.imi-tabs__list li {
  font-family: var(--font-body);
}
/* Same legacy list bombs inside about-microtia OVERLAP panels (Rox
   2026-07-14): disc markers + the white ul card's 2.5rem indent
   (invisible white-on-white, but the padding and bullets aren't) +
   !important li margins/borders/Source Sans. Restore the block's
   em-dash list design. */
.entry-content .imi-about--overlap .imi-about__body ul {
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 0 20px !important;
  list-style: none !important;
}
.entry-content .imi-about--overlap .imi-about__body ul li::marker { content: ""; }
/* 4 classes needed: legacy `& ul:not(...) & li` computes (0,3,3), which
   ties a 3-class override on classes and wins on elements. */
.entry-content .imi-about--overlap .imi-about__panel .imi-about__body ul li {
  font-family: var(--font-body);
  padding-left: 24px !important;
  border-bottom: 0 !important;
  margin-bottom: 0 !important; /* grid gap owns spacing */
}
/* Legacy `& p` Sans-ifies panel paragraphs — restore the serif body. */
.entry-content .imi-about--overlap .imi-about__panel .imi-about__body p {
  font-family: var(--font-body);
}
.entry-content .imi-about--overlap .imi-about__body ol {
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 0 0 24px !important;
  margin: 0 0 20px !important;
  list-style: decimal !important;
}
.entry-content .imi-about--overlap .imi-about__panel .imi-about__body ol li {
  font-family: var(--font-body);
  border-bottom: 0 !important;
  margin-bottom: 0 !important;
}
/* Contact-us block parity across legacy-css pages (Rox 2026-07-07).
   Homepage (home-base.css) is the reference. On style.css pages the legacy
   nested `& p` typography (Source Sans 16/24, #33363d) hijacks every <p>
   in the block (.imi-body, t-card quotes, kicker, small print), and the
   legacy pill-button rule caps the submit at max-width:285px !important. */
.entry-content .imi-body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.72;
  margin: 0 0 20px;
}
.entry-content .imi-kicker {
  font-family: var(--font-ui);
  font-size: 14px;
  letter-spacing: 0.18em;
  /* legacy & p color (#33363d) was beating the kicker's teal */
  color: var(--teal-600);
}
/* dark sections keep their sky kickers (this rule must outrank the above) */
.entry-content .imi-section--navy .imi-kicker,
.entry-content .imi-section--teal .imi-kicker,
.entry-content .imi-section--teal-deep .imi-kicker {
  color: var(--sky-300);
}
.entry-content .imi-t-card__quote {
  font-family: var(--font-body);
  font-size: 17.5px;
  font-style: italic;
  line-height: 1.6;
  color: var(--navy-700);
}
.entry-content .imi-contact__small {
  font-family: var(--font-body);
  font-size: 16px; /* DS-158: was 14.5px, below the 16px body-text floor */
  font-style: italic;
  line-height: 1.6;
  color: rgba(234, 242, 247, 0.85);
}
/* submit button: kill the legacy 285px cap + its 24px bottom margin
   (8px matches the gravity-theme default the homepage renders with) */
.imi-form .gform_wrapper .gform_button,
.imi-form input.gform_button {
  max-width: none !important;
  margin-bottom: 8px !important;
}
/* legacy `.gform-footer { width:285px }` (hyphen variant!) shrinks the
   submit button's container on style.css pages — homepage has no cap */
.imi-form .gform-footer {
  width: 100% !important; /* legacy rule is !important too */
}
/* legacy `& li { list-style:disc }` + `& ul { white card }` leak into the
   testimonial Splide sliders (bullets between review cards, phantom white
   ul background) — Rox 2026-07-07 */
.entry-content .imi-testimonials .splide__track .splide__slide {
  list-style: none !important; /* legacy li rule carries :not() specificity */
}
.entry-content .imi-testimonials .splide__track .splide__slide::marker {
  content: none;
}
.entry-content .imi-section .splide__track .splide__list {
  background: transparent;
  border-radius: 0;
  padding: 0;
}

/* =====================================================================
   IMI FORM — compound fields & controls polish (2026-07-08, Rox review of
   the conference registration form 7). Extends the .imi-form treatment:
   GF compound-field sublabels (name/address/date), instruction text,
   selects, and textarea height. Permanent form-system rules (not part of
   the legacy neutralizer).
   ===================================================================== */
.imi-form .gform_wrapper label.gform-field-label--type-sub,
.imi-form .gform_wrapper .ginput_complex label,
.imi-form .gform_wrapper .ginput_container_address label,
.imi-form .gform_wrapper .ginput_container_name label {
  font-family: var(--font-ui) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--ink-soft) !important;
  margin: 6px 0 0 !important;
  padding: 0 !important;
  display: block !important;
}
.imi-form .gform_wrapper .gfield_description,
.imi-form .gform_wrapper .gform_fileupload_rules,
.imi-form .gform_wrapper .instruction {
  font-family: var(--font-body) !important;
  font-style: italic !important;
  font-size: 12.5px !important;
  line-height: 1.5 !important;
  color: var(--ink-soft) !important;
  padding-top: 6px !important;
}
.imi-form .gform_wrapper select {
  background: var(--paper) !important;
  border: 1px solid #d8e0e8 !important;
  border-radius: 4px !important;
  color: var(--ink) !important;
  font-family: var(--font-ui) !important;
  font-size: 15px !important;
  line-height: 1.4 !important;
  padding: 14px 40px 14px 16px !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%233F4F66' stroke-width='2' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 16px center !important;
}
.imi-form .gform_wrapper select:focus {
  box-shadow: 0 0 0 3px var(--sky-300) !important;
  outline: 0 !important;
}
.imi-form .gform_wrapper textarea {
  height: 140px !important;
}
/* conditional-logic fix: the .imi-form gfield display:flex !important was
   overriding GF's inline display:none on logic-hidden fields (found via
   conference form 7 — form 1 has no conditional fields so it never showed) */
.imi-form .gform_wrapper .gfield[style*="display: none"],
.imi-form .gform_wrapper .gfield[style*="display:none"] {
  display: none !important;
}

/* =====================================================================
   BLOG v2 (2026-07-08) — Index E "IMI Magazine" (blog-index block, page
   3499) + Solomon-style single post (.imi-bp, single-post-new.php).
   Index renders inside .entry-content on a legacy-css page → list props
   carry !important guards. v1 CSS replaced same day (backup:
   imi-backups/2026-07-08/imi-css-blog-v1-section.css).
   ===================================================================== */
/* ---- index hero (navy) ---- */
.imi-blog__hero { background: var(--navy-900); color: #fff; padding: 56px 0 64px; }
.imi-blog__crumbs { font-family: var(--font-ui); font-size: 13px; color: var(--sky-300); margin-bottom: 20px; display: flex; gap: 8px; }
.imi-blog__crumbs a { color: #fff !important; text-decoration: none !important; display: inline-block; padding: 13px 2px; margin: -13px -2px; }
.imi-blog__crumbs a:hover { text-decoration: underline !important; }
.imi-blog__hero .imi-kicker { color: var(--sky-300); }
.imi-blog__h1 { color: #fff; max-width: 880px; margin-bottom: 12px; }
.imi-blog__intro { font-family: var(--font-body); font-size: 17.5px; line-height: 1.7; color: rgba(234,242,247,.85); max-width: 64ch; margin-bottom: 40px; }
.imi-blog__intro p { font-size: 17.5px; color: rgba(234,242,247,.85); margin: 0; }
.imi-blog__hero-grid { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(0,.65fr); gap: 26px; }
.imi-blog__lead { position: relative; border-radius: 18px; overflow: hidden; min-height: 440px; display: flex; align-items: flex-end; text-decoration: none !important; box-shadow: 0 24px 56px rgba(0,0,0,.35); }
.imi-blog__lead > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; margin: 0; border-radius: 0; }
.imi-blog__lead-ov { position: relative; width: 100%; padding: 140px 36px 32px; background: linear-gradient(to top, rgba(14,37,64,.92), transparent); color: #fff; }
.imi-blog__lead-cat { display: inline-block; font-family: var(--font-ui); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; background: var(--teal-600); border-radius: 4px; padding: 5px 10px; margin-bottom: 12px; }
.imi-blog__lead-ov h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(24px, 2.8vw, 34px); line-height: 1.22; margin: 0; color: #fff; }
.imi-blog__lead-ov p { font-family: var(--font-body); font-size: 16px; line-height: 1.6; color: rgba(234,242,247,.85); margin: 10px 0 0; max-width: 60ch; }
.imi-blog__lead-meta { display: block; margin-top: 12px; font-family: var(--font-ui); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--sky-300); }
.imi-blog__rail { display: flex; flex-direction: column; gap: 26px; }
.imi-blog__rail-card { position: relative; border-radius: 14px; overflow: hidden; flex: 1; min-height: 207px; display: flex; align-items: flex-end; text-decoration: none !important; box-shadow: 0 16px 36px rgba(0,0,0,.3); }
.imi-blog__rail-card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; margin: 0; border-radius: 0; }
.imi-blog__rail-ov { position: relative; width: 100%; padding: 70px 22px 20px; background: linear-gradient(to top, rgba(14,37,64,.9), transparent); color: #fff; }
.imi-blog__rail-ov h3 { font-family: var(--font-display); font-weight: 600; font-size: 17px; line-height: 1.3; margin: 4px 0 0; color: #fff; }
.imi-blog__rail-meta { font-family: var(--font-ui); font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--sky-300); }
.imi-blog__search { max-width: 560px; display: flex; gap: 8px; margin: 40px auto 0; }
.imi-blog__search input[type="search"] { flex: 1; min-width: 0; border: 0; border-radius: 6px; padding: 15px 18px; font-family: var(--font-ui); font-size: 15px; color: var(--ink); background: var(--paper); }
.imi-blog__search button { background: var(--teal-600); color: #fff; border: 0; border-radius: 6px; font-family: var(--font-ui); font-weight: 700; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; padding: 0 24px; cursor: pointer; }
/* ---- stats ---- */
.imi-blog__stats { background: #0A1D33; border-top: 1px solid rgba(184,212,227,.15); color: #fff; }
.imi-blog__stats .imi-wrap { display: flex; }
.imi-blog__stat { flex: 1; text-align: center; padding: 24px 10px; }
.imi-blog__stat + .imi-blog__stat { border-left: 1px solid rgba(184,212,227,.15); }
.imi-blog__stat b { display: block; font-family: var(--font-display); font-weight: 800; font-size: clamp(20px, 2.6vw, 28px); }
.imi-blog__stat span { font-family: var(--font-ui); font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--sky-300); }
/* ---- section heads / topics ---- */
.imi-blog__topics-sec { background: var(--paper); padding-bottom: 8px; }
.imi-blog__sechead { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: 28px; border-bottom: 2px solid var(--navy-900); padding-bottom: 12px; }
.imi-blog__sechead h2, .imi-blog__sechead h3 { font-family: var(--font-display); font-weight: 700; font-size: 22px; margin: 0; }
.imi-blog__topics { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 20px; }
.imi-blog__topic { position: relative; border-radius: 14px; overflow: hidden; height: 150px; display: flex; align-items: center; justify-content: center; text-decoration: none !important; background: var(--navy-700); }
.imi-blog__topic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; margin: 0; border-radius: 0; }
.imi-blog__topic::after { content: ''; position: absolute; inset: 0; background: rgba(14,37,64,.55); transition: background 200ms var(--ease-out); }
.imi-blog__topic:hover::after { background: rgba(31,122,140,.6); }
.imi-blog__topic span { position: relative; z-index: 2; font-family: var(--font-display); font-weight: 700; font-size: 19px; color: #fff; }
/* ---- list ---- */
.imi-blog__list-sec { background: var(--paper); padding-top: 48px; }
.imi-blog__sechead--list { flex-wrap: wrap; margin-bottom: 8px; }
.imi-blog__chips { display: flex; gap: 8px; flex-wrap: wrap; }
.imi-blog__chips a { font-family: var(--font-ui); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft) !important; text-decoration: none !important; padding: 6px 12px; border-radius: 999px; min-height: 44px; display: inline-flex; align-items: center; box-sizing: border-box; }
.imi-blog__chips a.is-on { background: var(--teal-600); color: #fff !important; }
.imi-blog__row { display: grid; grid-template-columns: 120px minmax(0,1fr) auto; gap: 24px; align-items: center; padding: 24px 0; border-bottom: 1px solid var(--sand-200); text-decoration: none !important; }
.imi-blog__row-img { width: 120px !important; height: 86px !important; object-fit: cover; border-radius: 10px !important; margin: 0 !important; }
.imi-blog__row-img--empty { display: block; background: var(--paper-warm); }
.imi-blog__row-meta { font-family: var(--font-ui); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--teal-600); }
.imi-blog__row h3 { font-family: var(--font-display); font-weight: 600; font-size: 19px; color: var(--ink); transition: color 200ms var(--ease-out); line-height: 1.35; margin: 5px 0 7px; }
.imi-blog__row:hover h3 { color: var(--teal-600); }
.imi-blog__row p { font-family: var(--font-body); font-size: 16px; line-height: 1.55; color: var(--ink-soft); margin: 0; }
.imi-blog__row-cta { font-family: var(--font-ui); font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--teal-600); white-space: nowrap; }
.imi-blog__pager { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 40px; font-family: var(--font-ui); }
.imi-blog__pager .pager-num, .imi-blog__pager .pager-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--sand-200); color: var(--ink) !important; font-weight: 600; font-size: 14px; text-decoration: none !important; transition: all 200ms var(--ease-out); }
.imi-blog__pager a:hover { border-color: var(--teal-600); color: var(--teal-600) !important; }
.imi-blog__pager .is-current { background: var(--teal-600); border-color: var(--teal-600); color: #fff !important; }
.imi-blog__none { text-align: center; color: var(--ink-soft); padding: 30px 0; }
/* ---- CTA band ---- */
.imi-blog__cta { background: var(--teal-600); color: #fff; text-align: center; padding: 56px 0; }
.imi-blog__cta .imi-heading { color: #fff; font-size: clamp(37px, 21px + 3.2vw, 50px); margin-bottom: 8px; }
.imi-blog__cta p { font-family: var(--font-ui); font-size: 16px; color: rgba(255,255,255,.88); margin: 0 0 24px; }
.imi-blog__social { margin-top: 22px; display: flex; justify-content: center; gap: 18px; font-family: var(--font-ui); font-size: 13.5px; flex-wrap: wrap; }
.imi-blog__social a { color: #fff !important; text-decoration: underline !important; text-underline-offset: 3px; display: inline-block; padding: 12px 2px; margin: -12px -2px; }
@media (max-width: 1023px) {
  .imi-blog__hero-grid { grid-template-columns: minmax(0,1fr); }
  .imi-blog__lead { min-height: 340px; }
  .imi-blog__stats .imi-wrap { flex-wrap: wrap; }
  .imi-blog__stat { min-width: 50%; }
  .imi-blog__stat:nth-child(3) { border-left: 0; }
  .imi-blog__topics { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .imi-blog__row { grid-template-columns: 88px minmax(0,1fr); }
  .imi-blog__row-img { width: 88px !important; height: 64px !important; }
  .imi-blog__row-cta { display: none; }
}
@media (max-width: 767px) {
  .imi-blog__hero { text-align: center; }
  .imi-blog__crumbs { justify-content: center; }
  .imi-blog__intro { margin-left: auto; margin-right: auto; }
  .imi-blog__topics { grid-template-columns: minmax(0,1fr); }
  .imi-blog__sechead--list { flex-direction: column; align-items: flex-start; }
}

/* ---- single post (.imi-bp, Solomon layout) ---- */
.imi-bp__progress { position: sticky; top: var(--imi-nav-h, 87px); height: 4px; background: var(--sand-200); z-index: 400; }
.imi-bp__progress i { display: block; height: 100%; width: 0; background: var(--teal-600); transition: width 80ms linear; }
.imi-bp__hero { background: var(--paper-warm-alt); padding: 44px 0 40px; }
.imi-bp__crumbs { font-family: var(--font-ui); font-size: 13px; color: var(--ink-soft); margin-bottom: 18px; display: flex; gap: 8px; }
.imi-bp__crumbs a { color: var(--teal-600) !important; text-decoration: none !important; display: inline-block; padding: 13px 2px; margin: -13px -2px; }
.imi-bp__cat { display: inline-block; font-family: var(--font-ui); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; background: var(--teal-600); color: #fff; border-radius: 4px; padding: 5px 10px; margin-bottom: 16px; }
.imi-bp__title { font-size: clamp(36px, 22px + 4vw, 58px); max-width: 960px; margin-bottom: 20px; }
.imi-bp__byline { display: flex; flex-direction: column; gap: 4px; }
.imi-bp__by { font-family: var(--font-ui); font-size: 15px; font-weight: 700; color: var(--ink); }
.imi-bp__by a { color: var(--ink) !important; text-decoration: none !important; }
.imi-bp__cred { font-family: var(--font-ui); font-size: 13.5px; color: var(--ink-soft); }
.imi-bp__pub { font-family: var(--font-ui); font-size: 13px; color: var(--ink-soft); margin-top: 6px; }
.imi-bp__body { background: var(--paper); padding: 56px 0 72px; }
.imi-bp__grid { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: 56px; align-items: start; }
.imi-bp__figure { margin: 0 0 32px; }
.imi-bp__figure img { width: 100%; height: auto; border-radius: 16px; display: block; margin: 0; }
.imi-bp__prose p { font-size: 17px; line-height: 1.75; }
.imi-bp__nav { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 20px; margin-top: 48px; border-top: 1px solid var(--sand-200); padding-top: 28px; }
.imi-bp__nav-item { text-decoration: none !important; }
.imi-bp__nav-item span { display: block; font-family: var(--font-ui); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--teal-600); margin-bottom: 6px; }
.imi-bp__nav-item b { font-family: var(--font-display); font-size: 16px; line-height: 1.35; color: var(--ink); transition: color 200ms var(--ease-out); }
.imi-bp__nav-item:hover b { color: var(--teal-600); }
.imi-bp__nav-item--next { text-align: right; }
.imi-bp__aside { position: sticky; top: calc(var(--imi-nav-h, 87px) + 24px); display: flex; flex-direction: column; gap: 14px; }
.imi-bp__card { background: var(--paper-warm-alt); border: 1px solid var(--sand-200); border-radius: 14px; padding: 16px 20px; }
.imi-bp__card h5 { font-family: var(--font-display); font-weight: 700; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); margin: 0 0 8px; }
.imi-bp__card--cta { background: var(--navy-900); color: #fff; border: 0; text-align: center; padding: 16px 20px; }
.imi-bp__card--cta h4 { font-family: var(--font-display); font-size: 16px; margin: 0 0 4px; color: #fff; }
.imi-bp__card--cta p { font-family: var(--font-ui); font-size: 16px; line-height: 1.4; color: rgba(234,242,247,.85); margin: 0 0 10px; }
.imi-bp__card--cta .imi-btn { padding: 13px 20px; font-size: 12.5px; }
.imi-bp__card-phone { display: flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 8px; font-size: 13.5px; font-family: var(--font-display); font-weight: 700; color: var(--sky-300) !important; text-decoration: none !important; }
.imi-bp__share { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 6px; }
.imi-bp__share a, .imi-bp__share button { font-family: var(--font-ui); font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink) !important; background: var(--paper); border: 1px solid var(--sand-200); border-radius: 6px; padding: 8px; text-align: center; text-decoration: none !important; cursor: pointer; transition: all 200ms var(--ease-out); }
.imi-bp__share a:hover, .imi-bp__share button:hover { border-color: var(--teal-600); color: var(--teal-600) !important; }
.imi-bp__cta-band { background: var(--teal-600); color: #fff; text-align: center; padding: 56px 0; }
.imi-bp__cta-band .imi-heading { color: #fff; font-size: clamp(37px, 21px + 3.2vw, 50px); margin-bottom: 8px; }
.imi-bp__cta-band p { font-family: var(--font-ui); font-size: 16px; color: rgba(255,255,255,.88); margin: 0 0 24px; }
.imi-bp__related { background: var(--paper-warm-alt); padding: 64px 0 76px; }
.imi-bp__related-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; }
.imi-bp__rcard { background: #fff; border: 1px solid var(--sand-200); border-radius: 14px; overflow: hidden; text-decoration: none !important; display: block; }
.imi-bp__rcard img { width: 100%; height: 160px; object-fit: cover; margin: 0; border-radius: 0; }
.imi-bp__rcard-body { padding: 18px 20px 22px; }
.imi-bp__rcard-body span { font-family: var(--font-ui); font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--teal-600); }
.imi-bp__rcard-body h3 { font-family: var(--font-display); font-weight: 700; font-size: 16.5px; line-height: 1.35; color: var(--ink); margin: 8px 0 0; transition: color 200ms var(--ease-out); }
.imi-bp__rcard:hover h3 { color: var(--teal-600); }
@media (max-width: 1023px) {
  .imi-bp__grid { grid-template-columns: minmax(0,1fr); gap: 36px; }
  .imi-bp__aside { position: static; }
  .imi-bp__related-grid { grid-template-columns: minmax(0,1fr); max-width: 560px; margin: 0 auto; }
}
@media (max-width: 767px) {
  .imi-bp__hero { text-align: center; }
  .imi-bp__crumbs { justify-content: center; }
  .imi-bp__nav { grid-template-columns: minmax(0,1fr); }
  .imi-bp__nav-item--next { text-align: left; }
}
/* post TOC: cap at h2/h3 (app.js builds h2–h5 site-wide; deeper levels
   made the long-guide TOC a 35-item wall) */
/* (toc h4+ cap replaced by per-item dropdowns, 2026-07-08 round 2) */

/* =====================================================================
   BLOG POST — Rox review round (2026-07-08): featured-image hero w/ navy
   gradient, avatar byline, collapsible+scrollable TOC, mid-post teal CTA,
   full prose typography pass (gaps/indents/quotes on legacy-css pages).
   ===================================================================== */
/* ---- 1. image hero ---- */
.imi-bp__hero--img { position: relative; overflow: hidden; padding: 96px 0 64px; color: #fff; background: var(--navy-900); }
.imi-bp__hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; margin: 0 !important; border-radius: 0 !important; }
.imi-bp__hero--img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(14,37,64,.96) 0%, rgba(14,37,64,.72) 45%, rgba(14,37,64,.35) 100%); }
.imi-bp__hero-inner { position: relative; z-index: 2; }
.imi-bp__hero--img .imi-bp__crumbs { color: var(--sky-300); }
.imi-bp__hero--img .imi-bp__crumbs a { color: #fff !important; }
.imi-bp__hero--img .imi-bp__title { color: #fff; }
.imi-bp__hero--img .imi-bp__by { color: #fff; }
.imi-bp__hero--img .imi-bp__cred { color: var(--sky-300); }
.imi-bp__hero--img .imi-bp__pub { color: rgba(234,242,247,.75); }
/* ---- 2. avatar byline ---- */
.imi-bp__author { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.imi-bp__avatar { width: 56px !important; height: 56px !important; border-radius: 50% !important; object-fit: cover; border: 2px solid rgba(255,255,255,.75); margin: 0 !important; flex: none; }
.imi-bp__hero:not(.imi-bp__hero--img) .imi-bp__avatar { border-color: var(--sand-200); }
/* ---- 3+4. TOC: dropdowns + scrollable ---- */
.imi-bp__card #toc-list { max-height: 32vh; overflow-y: auto; scrollbar-width: thin; padding-right: 6px; }
.imi-bp #toc-list > li { position: relative; }
.imi-bp #toc-list > li.has-sub > a { padding-right: 26px !important; display: block; }
.imi-bp__toc-toggle { position: absolute; top: 4px; right: 0; width: 18px; height: 18px; border: 0; background: transparent; color: var(--ink-soft); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform 200ms var(--ease-out), color 200ms var(--ease-out); }
.imi-bp__toc-toggle:hover { color: var(--teal-600); }
.imi-bp #toc-list > li.is-open > .imi-bp__toc-toggle { transform: rotate(180deg); color: var(--teal-600); }
.imi-bp #toc-list ul { display: none; margin: 1px 0 4px !important; padding: 0 !important; list-style: none !important; background: transparent !important; }
.imi-bp #toc-list li.is-open > ul { display: block; }
.imi-bp #toc-list ul ul { display: block; } /* h4+ ride along inside their h3 group */
/* DS-126: compact top-level TOC rows — smaller type/padding so a typical
   post's TOC fits inside the shrunk max-height without triggering the
   internal scrollbar; specificity (1,1,2) via #toc-list beats the shared
   .imi-interior__toc a rule (0,1,1) used by other interior-page TOCs. */
.imi-bp #toc-list > li > a { padding: 4px 0 4px 10px; font-size: .82rem; line-height: 1.3; min-height: 44px; display: flex; align-items: center; }
/* sub-items: teal left bar + indent + smaller type so they read as children
   of the h2 above them (gray-on-gray bars were indistinguishable when open) */
.imi-bp #toc-list ul { margin-left: 12px !important; }
.imi-bp #toc-list ul li { border-left-color: var(--teal-600); }
.imi-bp #toc-list ul a { padding: 3px 0 3px 10px; font-size: .76rem; color: var(--ink-soft); min-height: 44px; display: flex; align-items: center; }
.imi-bp #toc-list ul a:hover { color: #165562; border-left-color: #165562; }
/* ---- 5. mid-post teal CTA ---- */
.imi-bp__midcta { background: var(--teal-600); border-radius: 16px; padding: 30px 34px; margin: 40px 0; color: #fff; }
.imi-bp__midcta-kick { display: block; font-family: var(--font-ui); font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--sky-300); margin-bottom: 12px; }
.imi-bp__midcta-row { display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.imi-bp__midcta h3 { font-family: var(--font-display) !important; font-weight: 700; font-size: 20px !important; color: #fff !important; margin: 0 0 8px !important; }
.imi-bp__midcta p { font-family: var(--font-ui) !important; font-size: 16px !important; line-height: 1.6 !important; color: rgba(255,255,255,.88) !important; margin: 0 !important; }
.imi-btn--light { background: #fff; color: var(--navy-900) !important; white-space: nowrap; }
.imi-btn--light:hover { background: var(--paper-warm); transform: translateY(-2px); box-shadow: 0 12px 24px rgba(0,0,0,.18); }
/* ---- 6. prose typography pass (beats bare-element legacy rules) ---- */
.imi-bp__prose > p, .imi-bp__prose li, .imi-bp__prose dd { font-family: var(--font-body); font-size: 17px; line-height: 1.75; color: var(--ink-soft); }
.imi-bp__prose > p { margin: 0 0 20px; }
.imi-bp__prose p:empty { display: none; }
.imi-bp__prose h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(37px, 21px + 3.2vw, 50px); line-height: 1.25; color: var(--ink); margin: 44px 0 14px; }
.imi-bp__prose h3 { font-family: var(--font-display); font-weight: 700; font-size: 20px; line-height: 1.3; color: var(--ink); margin: 32px 0 10px; }
.imi-bp__prose h4, .imi-bp__prose h5, .imi-bp__prose h6 { font-family: var(--font-display); font-weight: 700; font-size: 16.5px; line-height: 1.35; color: var(--ink); margin: 24px 0 8px; }
.imi-bp__prose > *:first-child { margin-top: 0 !important; }
.imi-bp__prose ul, .imi-bp__prose ol { margin: 0 0 22px !important; padding: 0 0 0 24px !important; background: transparent !important; border-radius: 0 !important; display: block; }
.imi-bp__prose ul { list-style: disc outside !important; }
.imi-bp__prose ol { list-style: decimal outside !important; }
.imi-bp__prose li { margin: 0 0 8px !important; padding: 0 !important; border: 0 !important; background: transparent !important; list-style: inherit !important; }
.imi-bp__prose li::marker { color: var(--teal-600); }
.imi-bp__prose ul ul, .imi-bp__prose ol ol, .imi-bp__prose ul ol, .imi-bp__prose ol ul { margin: 8px 0 0 !important; }
.imi-bp__prose blockquote { margin: 34px 0 !important; padding: 4px 0 4px 26px !important; border: 0 !important; border-left: 3px solid var(--teal-600) !important; background: transparent !important; border-radius: 0 !important; font-style: italic; }
.imi-bp__prose blockquote p { font-size: 19px; line-height: 1.6; color: var(--navy-700); margin: 0 0 10px; }
.imi-bp__prose blockquote cite { font-family: var(--font-ui); font-style: normal; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.imi-bp__prose img { max-width: 100%; height: auto; border-radius: 14px !important; margin: 8px 0 24px !important; display: block; }
.imi-bp__prose figure { margin: 8px 0 28px !important; }
.imi-bp__prose figure img { margin: 0 !important; }
.imi-bp__prose figcaption { font-family: var(--font-ui); font-size: 13px; color: var(--ink-soft); text-align: center; margin-top: 10px; }
.imi-bp__prose a { color: var(--teal-600) !important; text-decoration: underline !important; text-underline-offset: 3px; }
.imi-bp__prose strong { color: var(--ink); }
.imi-bp__prose hr { border: 0; border-top: 1px solid var(--sand-200); margin: 36px 0; }
.imi-bp__prose table { width: 100%; border-collapse: collapse; margin: 0 0 28px; font-family: var(--font-ui); font-size: 15px; }
.imi-bp__prose th, .imi-bp__prose td { border: 1px solid var(--sand-200); padding: 10px 14px; text-align: left; }
.imi-bp__prose th { background: var(--paper-warm-alt); font-weight: 700; }
.imi-bp__prose iframe { max-width: 100%; }
/* neutralize stray Gutenberg wrappers that read as indents */
.imi-bp__prose .wp-block-group, .imi-bp__prose .wp-block-columns { margin: 0 0 20px; padding: 0 !important; background: transparent !important; }
@media (max-width: 767px) {
  .imi-bp__hero--img { padding: 72px 0 48px; }
  /* Rox 2026-07-08: crumbs/chip/headline centered, byline left */
  .imi-bp__hero { text-align: center; }
  .imi-bp__crumbs { justify-content: center; }
  .imi-bp__author { justify-content: flex-start; text-align: left; }
  .imi-bp__byline { text-align: left; }
  .imi-bp__pub { display: block; text-align: left; }
  .imi-bp__midcta-row { flex-direction: column; align-items: flex-start; gap: 18px; }
  /* extra side breathing room for the post on phones */
  .imi-bp__main { padding-left: 15px; padding-right: 15px; }
}
/* special-content + testimonial cards pasted inside post CONTENT
   (blog post 3633) — converted from raw Tailwind utility classes to IMI
   classes in special-content.php / sp-testimonial-box.php (DS-124,
   2026-07-17). Values matched 1:1 to the Tailwind rules + this file's
   own prior .card override rules that they replace. */
.imi-bp__prose-card {
  background: var(--paper-warm-alt) !important;
  border: 1px solid var(--sand-200) !important;
  border-left: 3px solid var(--teal-600) !important;
  border-radius: 14px !important;
  padding: 26px 28px !important;
  margin: 34px 0 !important;
}
.imi-bp__prose-card p,
.imi-bp__prose-card__feedback {
  font-family: var(--font-body) !important;
  font-style: italic;
  font-size: 16.5px !important;
  line-height: 1.65 !important;
  color: var(--navy-700) !important;
}
.imi-bp__prose-card h1, .imi-bp__prose-card h2, .imi-bp__prose-card h3,
.imi-bp__prose-card h4, .imi-bp__prose-card h5, .imi-bp__prose-card h6 {
  font-family: var(--font-display) !important;
  font-size: 17px !important;
  font-style: normal;
  color: var(--ink) !important;
  margin: 0 0 12px !important;
}
.imi-bp__prose-card ul, .imi-bp__prose-card ol { font-style: italic; }
.imi-bp__prose-card__quote svg path { fill: var(--teal-600) !important; }
/* testimonial-only children (imi-bp__prose-card--testimonial) */
.imi-bp__prose-card__feedback p { margin-bottom: 1rem; }
.imi-bp__prose-card__feedback p:last-child { margin-bottom: 0; }
.imi-bp__prose-card__attribution { display: flex; gap: 15px; align-items: center; margin-top: 1.5rem; }
/* Phase 6 (2026-07-13): initials avatar on the pasted-in testimonial card
   was old-brand peach (#F4CF9D) — matched to .imi-t-card__avatar--initials. */
.imi-bp__prose-card__avatar {
  width: 45px;
  height: 45px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse 80% 70% at 50% 45%, #1F3A5F 0%, #142a4a 55%, #0E2540 100%);
}
.imi-bp__prose-card__avatar-initials {
  font-family: var(--font-display);
  font-style: normal;
  font-size: 14px;
  font-weight: 700;
  color: var(--paper);
}
.imi-bp__prose-card__name {
  font-family: var(--font-ui);
  font-style: normal;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}

/* legacy li::before checkmark image (bare-element rule from style.css)
   leaks into the post TOC — neutralized across the post template */
.imi-bp #toc-list li { padding-left: 0 !important; }
.imi-bp #toc-list li::before { content: none !important; display: none !important; }
.imi-bp__prose li::before { content: none !important; }
.imi-bp__prose li { position: static !important; }
/* mobile TOC accordion (Rox 2026-07-08): compact collapsed bar above the
   post on <=1023px; the sidebar TOC card becomes desktop-only */
.imi-bp__mtoc { display: none; }
@media (max-width: 1023px) {
  .imi-bp__card--toc { display: none; }
  .imi-bp__mtoc { display: block; margin: 0 0 28px; background: var(--paper-warm-alt); border: 1px solid var(--sand-200); border-radius: 12px; overflow: hidden; }
  .imi-bp__mtoc summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; min-height: 44px; box-sizing: border-box; cursor: pointer; list-style: none; font-family: var(--font-ui); font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
  .imi-bp__mtoc summary::-webkit-details-marker { display: none; }
  .imi-bp__mtoc summary svg { transition: transform 200ms var(--ease-out); color: var(--ink-soft); flex: none; }
  .imi-bp__mtoc[open] summary svg { transform: rotate(180deg); color: var(--teal-600); }
  .imi-bp__mtoc ul { list-style: none !important; margin: 0 !important; padding: 4px 18px 14px !important; background: transparent !important; }
  .imi-bp__mtoc li { list-style: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; }
  .imi-bp__mtoc li::before { content: none !important; }
  .imi-bp__mtoc a { display: flex; align-items: center; min-height: 44px; padding: 12px 0; font-family: var(--font-ui); font-size: 14.5px; color: var(--ink-soft) !important; text-decoration: none !important; border-bottom: 1px solid var(--sand-200); box-sizing: border-box; }
  .imi-bp__mtoc li:last-child a { border-bottom: 0; }
  .imi-bp__mtoc a:active { color: var(--teal-600) !important; }
}
/* mid-post CTA button: undo prose link styling (underline + teal) */
.imi-bp__prose .imi-btn,
.imi-bp__prose .imi-bp__midcta a {
  text-decoration: none !important;
}
.imi-bp__prose .imi-btn--light { color: var(--navy-900) !important; }

/* mobile byline left-alignment: the blanket [class*=imi-] phone-centering
   rule hits the byline's child spans directly — outrank per child */
@media (max-width: 767px) {
  .imi-bp .imi-bp__author,
  .imi-bp .imi-bp__byline,
  .imi-bp .imi-bp__by,
  .imi-bp .imi-bp__cred {
    text-align: left !important;
    justify-content: flex-start !important;
  }
  /* published date · read time: centered on phones (Rox 2026-07-08) */
  .imi-bp .imi-bp__pub { display: block; text-align: center !important; }
  /* extra 15px side padding for the hero + related articles on phones */
  .imi-bp__hero .imi-wrap,
  .imi-bp__related .imi-wrap { padding-left: 39px; padding-right: 39px; }
  /* byline fits 2 lines on phones: smaller avatar + type (Rox) */
  .imi-bp .imi-bp__avatar { width: 44px !important; height: 44px !important; }
  .imi-bp .imi-bp__author { gap: 11px; }
  .imi-bp .imi-bp__by { font-size: 13.5px; }
  .imi-bp .imi-bp__cred { font-size: 12.5px; }
}

/* =====================================================================
   LEGAL / UTILITY PAGES (Phase 4, 2026-07-08) — template-privacy-new.php
   Rides the .imi-interior--sidebar system; this block adds only the
   legal-specific pieces (warm page bg + white section cards, info-box
   panels, |pipe| callouts, scrollable TOC card).
   ===================================================================== */
.imi-legal .imi-interior-content { background: var(--paper-warm-alt); }
.imi-legal__crumbs { display: flex; align-items: center; gap: 8px; font-family: var(--font-ui); font-size: 12.5px; letter-spacing: .04em; color: var(--sky-300); margin-bottom: 14px; }
.imi-legal__crumbs a { color: #fff !important; text-decoration: none !important; }
.imi-legal__crumbs a:hover { color: var(--sky-300) !important; }
.imi-legal__sec { background: #fff; border: 1px solid var(--sand-200); border-radius: 16px; padding: 34px 38px; margin: 0 0 28px; }
.imi-legal__sec:last-child { margin-bottom: 0; }
.imi-legal__sec--info-bottom { display: flex; flex-direction: column-reverse; gap: 24px; }
/* top info panels (effective date / contact columns) */
.imi-legal__info { background: var(--paper-warm-alt); border: 1px solid var(--sand-200); border-radius: 12px; padding: 22px 24px; margin: 0 0 26px; }
.imi-legal__sec--info-bottom .imi-legal__info { margin: 0; }
.imi-legal__info-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; }
.imi-legal__info-item { min-width: 0; }
.imi-legal__info-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.imi-legal__info-head img { width: 18px; height: 18px; object-fit: contain; margin: 0 !important; border-radius: 0 !important; }
.imi-legal__info-head span { font-family: var(--font-ui); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.imi-legal__info-detail, .imi-legal__info-detail p, .imi-legal__info-detail li, .imi-legal__info-detail a { font-family: var(--font-ui) !important; font-size: 14.5px !important; line-height: 1.6 !important; color: var(--ink-soft) !important; }
.imi-legal__info-detail p { margin: 0 0 8px !important; }
.imi-legal__info-detail a { text-decoration: none !important; }
.imi-legal__info-detail a:hover { color: var(--teal-600) !important; }
.imi-legal__info-detail ul, .imi-legal__info-detail ol { margin: 0 !important; padding: 0 !important; list-style: none !important; background: transparent !important; }
.imi-legal__info-below { margin-top: 18px; }
.imi-legal__info--special .imi-legal__info-grid { grid-template-columns: minmax(0,1fr); gap: 12px; margin: 14px 0; }
.imi-legal__special-row + .imi-legal__special-row { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--sand-200); }
/* body typography (guards vs legacy bare-element rules on style.css pages) */
.imi-legal__body h2 { font-family: var(--font-display) !important; font-weight: 700; font-size: clamp(20px, 2.4vw, 26px) !important; line-height: 1.3 !important; color: var(--ink) !important; margin: 34px 0 14px !important; }
.imi-legal__body h2:first-child { margin-top: 0 !important; }
.imi-legal__body h3, .imi-legal__body h4, .imi-legal__body h5 { font-family: var(--font-display) !important; font-weight: 700; font-size: 17.5px !important; color: var(--ink) !important; margin: 24px 0 10px !important; }
.imi-legal__body p { font-family: var(--font-body) !important; font-size: 16px !important; line-height: 1.75 !important; color: var(--ink-soft) !important; margin: 0 0 16px !important; }
.imi-legal__body ul, .imi-legal__body ol { margin: 0 0 18px !important; padding-left: 24px !important; background: transparent !important; border: 0 !important; box-shadow: none !important; }
.imi-legal__body ul { list-style: disc !important; }
.imi-legal__body ol { list-style: decimal !important; }
.imi-legal__body li { font-family: var(--font-body) !important; font-size: 16px !important; line-height: 1.7 !important; color: var(--ink-soft) !important; margin: 0 0 8px !important; padding: 0 !important; border: 0 !important; background: transparent !important; }
.imi-legal__body li::before { content: none !important; }
.imi-legal__body li::marker { color: var(--teal-600); }
.imi-legal__body a { color: var(--teal-600) !important; text-decoration: underline !important; text-underline-offset: 2px; font-weight: 600; }
.imi-legal__body a:hover { color: #165562 !important; }
.imi-legal__tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 20px; }
.imi-legal__body table { width: 100%; min-width: 560px; border-collapse: collapse; margin: 0; font-family: var(--font-ui); font-size: 14.5px; }
.imi-legal__body th, .imi-legal__body td { border: 1px solid var(--sand-200); padding: 10px 12px; text-align: left; vertical-align: top; color: var(--ink-soft); overflow-wrap: anywhere; word-break: break-word; white-space: normal !important; }
.imi-legal__body table { table-layout: fixed; }
.imi-legal__body th { background: var(--paper-warm-alt); color: var(--ink); font-weight: 700; }
/* |pipe| callouts (legacy special_content contract) */
.imi-legal__callout { background: var(--paper-warm-alt); border-left: 3px solid var(--teal-600); border-radius: 0 10px 10px 0; padding: 16px 20px; margin: 20px 0; }
.imi-legal__callout p:last-child { margin-bottom: 0 !important; }
/* TOC card: sticky comes from .imi-interior__aside; long docs scroll */
.imi-legal__card--toc #toc-list { max-height: 62vh; overflow-y: auto; scrollbar-width: thin; padding-right: 6px; }
.imi-legal #toc-list li { padding-left: 0 !important; }
.imi-legal #toc-list li::before { content: none !important; display: none !important; }
@media (max-width: 1023px) {
  .imi-legal__info-grid { grid-template-columns: minmax(0,1fr); }
  .imi-legal__sec { padding: 24px 20px; }
  .imi-legal__card--toc { display: none; }
}
@media (max-width: 767px) {
  /* tables become stacked cards on phones (Rox 2026-07-08: no table UI on
     mobile, keep every word) — pure CSS, the stored markup is untouched */
  .imi-legal__tablewrap { overflow: visible; }
  .imi-legal__body table, .imi-legal__body tbody, .imi-legal__body tr,
  .imi-legal__body th, .imi-legal__body td { display: block; width: 100% !important; min-width: 0 !important; }
  .imi-legal__body table { border: 0; }
  .imi-legal__body tr { background: #fff; border: 1px solid var(--sand-200); border-radius: 10px; margin: 0 0 12px; overflow: hidden; }
  .imi-legal__body th, .imi-legal__body td { border: 0; padding: 12px 16px; }
  .imi-legal__body tr > td:first-child, .imi-legal__body tr > th:first-child { font-weight: 700; color: var(--ink); padding-bottom: 0; }
  .imi-legal__body tr > td:first-child ~ td { padding-top: 8px; }
  /* the column-header row becomes a small caption strip */
  .imi-legal__body tr:first-child { background: var(--paper-warm-alt); border-color: var(--sand-200); }
  .imi-legal__body tr:first-child > td, .imi-legal__body tr:first-child > th { display: inline-block; width: auto !important; padding: 8px 6px 8px 16px; font-family: var(--font-ui); font-size: 12px !important; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
  .imi-legal__body tr:first-child strong { font-size: 12px !important; }
  /* policy pages are documents: EVERYTHING stays left-aligned on phones
     (Rox 2026-07-08) — beats the blanket main [class*="imi-"] centering */
  .imi-legal, .imi-legal [class*="imi-"], .imi-legal h1, .imi-legal h2, .imi-legal h3,
  .imi-legal p, .imi-legal li, .imi-legal .imi-interior-hero__title { text-align: left !important; }
}

/* =====================================================================
   STICKY UNBREAK (2026-07-08) — style.css line 1 ships
   `body{overflow-x:hidden}`, and with html.imi-anim{overflow-x:clip}
   body's overflow no longer propagates to the viewport, so body became
   its own (never-scrolling) scroll container and every position:sticky
   descendant was inert SITE-WIDE (interior/blog/legal asides, blog
   progress bar). `clip` clips identically but creates no scroll
   container. Do NOT change back to hidden.
   ===================================================================== */
body { overflow-x: clip; }

/* =====================================================================
   PHASE 6 — ACF BLOCK COMPONENT REDESIGN (2026-07-13)
   New scoped components for the 8 blocks that were still raw Tailwind
   markup: Contact Us Hero + Contact Information (Contact), Location
   (About/Services), Learn More / Stages of Microtia / Symptoms of
   Microtia / Expert Insights / About Microtia – Details (Services/Nerve
   Palsy). Built on the shared primitives above (.imi-section, .imi-wrap,
   .imi-kicker, .imi-heading, .imi-lead, .imi-body, .imi-btn,
   .imi-tabs__list, .imi-tabs__bullets-title, .imi-tabs__head) per the
   PRD's reuse-before-inventing constraint.
   ===================================================================== */

/* ---- CONTACT INFORMATION ------------------------------------------- */
.imi-cinfo { position: relative; padding: 60px 0; background: var(--paper); }
.imi-cinfo__wrap { max-width: 1240px; margin: 0 auto; padding: 0 20px; }
.imi-cinfo__panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  padding: 20px;
  border-radius: 32px;
  background: var(--paper-warm-alt);
}
.imi-cinfo__media { position: relative; min-height: 240px; border-radius: 20px; overflow: hidden; }
.imi-cinfo__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 20px; }
.imi-cinfo__card { position: relative; background: var(--paper); padding: 28px 24px; border-radius: 24px; }
.imi-cinfo__heading { margin: 0 0 32px; font-size: clamp(26px, 3vw, 34px); }
.imi-cinfo__list { display: flex; flex-direction: column; gap: 28px; }
.imi-cinfo__row { display: flex; gap: 14px; align-items: flex-start; }
.imi-cinfo__icon { flex: none; margin-top: 2px; }
.imi-cinfo__icon svg { display: block; }
.imi-cinfo__row-label {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 6px;
}
.imi-cinfo__row-value,
.imi-cinfo__row-value p {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
}
.imi-cinfo__row-value a { color: inherit; }
.imi-cinfo__row-value a:hover { color: var(--teal-600); }
.imi-cinfo__row--phone .imi-cinfo__row-value,
.imi-cinfo__row--phone .imi-cinfo__row-value p {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
  color: var(--ink);
}
.imi-cinfo__cta { display: flex; flex-direction: column; gap: 14px; margin-top: 36px; }
.imi-cinfo__cta .imi-btn { text-align: center; }
@media (min-width: 768px) {
  .imi-cinfo__card { padding: 40px; }
}
@media (min-width: 1024px) {
  .imi-cinfo__panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; padding: 24px; align-items: stretch; }
  .imi-cinfo__media { min-height: 0; }
  .imi-cinfo__cta { flex-direction: row; }
}

/* ---- LOCATION (About / Services) ------------------------------------ */
.imi-location { position: relative; padding: 60px 0; background: var(--paper-warm-alt); }
.imi-location__wrap { max-width: 1240px; margin: 0 auto; padding: 0 20px; }
.imi-location__head { max-width: 820px; margin: 0 auto 48px; text-align: center; }
.imi-location__head .imi-kicker,
.imi-location__head .imi-heading { margin-left: auto; margin-right: auto; }
.imi-location__intro .imi-body { margin: 0 0 12px; }
.imi-location__intro .imi-body:last-child { margin-bottom: 0; }
.imi-location__frame { position: relative; }
.imi-location__media { border-radius: 24px; overflow: hidden; }
.imi-location__img { display: block; width: 100%; height: auto; }
.imi-location__card {
  position: relative;
  margin: -40px auto 0;
  max-width: 900px;
  background: var(--paper);
  padding: 32px 24px;
  border-radius: 24px;
  border-bottom: 3px solid var(--teal-600);
}
.imi-location__options {
  margin-top: 32px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}
.imi-location__option {
  background: var(--paper-warm-alt);
  border-radius: 16px;
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}
.imi-location__option-icon { width: 40px; height: 40px; object-fit: contain; }
.imi-location__option-label { font-family: var(--font-ui); font-size: 15px; font-weight: 600; color: var(--ink); margin: 0; }
.imi-location__cta { margin-top: 28px; }
.imi-location__body a,
.imi-location__intro a { color: var(--teal-600); text-decoration: underline; }
@media (min-width: 768px) {
  .imi-location__head { text-align: left; margin-left: 0; }
  .imi-location__head .imi-kicker,
  .imi-location__head .imi-heading { margin-left: 0; }
  .imi-location__card { text-align: left; }
}
@media (min-width: 768px) {
  .imi-location__options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .imi-location__card { margin: -120px 0 0 auto; padding: 48px; }
}

/* ---- LOCATION — CLINICAL LAYOUT (Microtia "Life-Changing Microtia
   Treatment", DS-54, 2026-07-14) ---------------------------------------
   Gated on the clinical_layout field — only post 2746 (Services/microtia)
   has it on, so this is additive/dormant on About (2740). Denser,
   proof-forward treatment: numbered Treatment Pathway + navy Treatment
   Profile spec sheet + live Google-rating strip on a sticky aside.
   Reuses imi-kicker/imi-heading/imi-body/imi-btn + the site's imi.css
   tokens (no new tokens). `.entry-content` prefixes on h3/h4/p match the
   LEGACY-TYPOGRAPHY NEUTRALIZER pattern above (~line 5780) — plain
   single-class selectors on those tags lose to the legacy nested rule
   otherwise. */
.imi-location--clinical .imi-location__clinical-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: start;
}
.imi-location--clinical .imi-location__clinical-main { max-width: 62ch; }
.imi-location--clinical .imi-location__body .imi-body:last-of-type { margin-bottom: 0; }

.imi-location--clinical .imi-location__pathway {
  margin: 44px 0 40px;
  border-top: 1px solid var(--rule);
  padding-top: 36px;
}
.entry-content .imi-location--clinical .imi-location__pathway-title {
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy-700);
  margin: 0 0 24px;
}
.imi-location--clinical .imi-location__pathway-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.imi-location--clinical .imi-location__pathway-step {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 18px;
  position: relative;
  padding-bottom: 28px;
}
.imi-location--clinical .imi-location__pathway-step::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 34px;
  bottom: 0;
  width: 1px;
  background: var(--rule);
}
.imi-location--clinical .imi-location__pathway-step:last-child::before { display: none; }
.imi-location--clinical .imi-location__pathway-step:last-child { padding-bottom: 0; }
.imi-location--clinical .imi-location__pathway-num {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1.5px solid var(--teal-600);
  color: var(--teal-600);
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  background: var(--paper-warm-alt);
  position: relative; z-index: 1;
}
.entry-content .imi-location--clinical .imi-location__pathway-step-title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--navy-900);
  margin: 4px 0 6px;
}
.entry-content .imi-location--clinical .imi-location__pathway-step-body {
  font-family: var(--font-ui);
  font-size: 16px; /* DS-158: was 15px, below the 16px body-text floor */
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
}

.imi-location--clinical .imi-location__aside { display: grid; gap: 20px; }
.imi-location--clinical .imi-location__media--clinical { border-radius: 16px; overflow: hidden; background: var(--sand-200); }

.imi-location--clinical .imi-location__profile {
  background: var(--navy-900);
  color: var(--paper);
  border-radius: 16px;
  padding: 32px;
}
.imi-location--clinical .imi-location__profile-label {
  font-family: var(--font-ui);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sky-300);
  margin: 0 0 20px;
}
.imi-location--clinical .imi-location__profile-list { margin: 0; display: grid; gap: 18px; }
.imi-location--clinical .imi-location__profile-row {
  display: grid;
  grid-template-columns: 108px 1fr;
  gap: 14px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(234, 242, 247, 0.14);
}
.imi-location--clinical .imi-location__profile-row:last-child { border-bottom: none; padding-bottom: 0; }
.imi-location--clinical .imi-location__profile-row dt {
  font-family: var(--font-ui);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sky-300);
  margin: 0;
}
.imi-location--clinical .imi-location__profile-row dd {
  font-family: var(--font-ui);
  font-size: 14.5px;
  line-height: 1.5;
  color: rgba(250, 251, 252, 0.94);
  margin: 0;
}

.imi-location--clinical .imi-location__proof {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 12px;
}
.imi-location--clinical .imi-location__proof-stars { display: flex; gap: 2px; flex-shrink: 0; }
.imi-location--clinical .imi-location__proof-stars svg { width: 14px; height: 14px; }
.entry-content .imi-location--clinical .imi-location__proof-text { font-family: var(--font-ui); font-size: 13.5px; color: var(--ink); margin: 0; }
.imi-location--clinical .imi-location__proof-text strong { color: var(--navy-900); }

@media (min-width: 900px) {
  .imi-location--clinical .imi-location__clinical-grid { grid-template-columns: 1.55fr 1fr; gap: 64px; }
  .imi-location--clinical .imi-location__aside { position: sticky; top: 32px; }
}
@media (max-width: 640px) {
  .imi-location--clinical .imi-location__profile { padding: 24px; }
  .imi-location--clinical .imi-location__profile-row { grid-template-columns: 1fr; gap: 4px; }
}

/* Rox 2026-07-14: keep the Treatment Pathway and everything below it
   left-aligned on phones — opts these out of the site-wide "Phone
   centering: center ALL section content" rule (main [class*="imi-"] {
   text-align: center }, see ~line 4533) the same way .imi-bp__author etc.
   do above. Only the narrative copy ABOVE the pathway stays on the default
   phone-centered treatment (not asked to change). Pathway itself added
   2026-07-14 per Rox's follow-up ("make the treatment pathways left
   aligned on mobile") after the CTA/aside were fixed in the prior round. */
@media (max-width: 767px) {
  .imi-location--clinical .imi-location__pathway,
  .imi-location--clinical .imi-location__pathway-title,
  .imi-location--clinical .imi-location__pathway-list,
  .imi-location--clinical .imi-location__pathway-step,
  .imi-location--clinical .imi-location__pathway-step-title,
  .imi-location--clinical .imi-location__pathway-step-body,
  .imi-location--clinical .imi-location__cta,
  .imi-location--clinical .imi-location__aside,
  .imi-location--clinical .imi-location__profile,
  .imi-location--clinical .imi-location__profile-label,
  .imi-location--clinical .imi-location__profile-list,
  .imi-location--clinical .imi-location__profile-row,
  .imi-location--clinical .imi-location__proof,
  .imi-location--clinical .imi-location__proof-text {
    text-align: left !important;
  }
}

/* ---- LEARN MORE (Services / Nerve Palsy CTA strip) ------------------ */
.imi-learn-more__heading { text-align: center; margin-bottom: 32px; }
.imi-learn-more__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}
.imi-learn-more__item {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.4;
  color: var(--ink);
  padding-bottom: 16px;
  border-bottom: 1px solid var(--ink);
}
@media (min-width: 768px) {
  .imi-learn-more__heading { text-align: left; }
  .imi-learn-more__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- STAGES OF MICROTIA — SEVERITY RAIL -------------------------------
   Rebuilt 2026-07-14 (Rox-approved hybrid: mockups/microtia/
   stages-directions.html dir A + dir C's overlapping numeral, sky-300).
   Gradient rail teal→navy (mild→severe) connecting four nodes; outlined
   sky numerals with the STAGE label overlapping; photo plates; serif
   details. Old card-grid CSS removed (block used on 2746 only).
   Desktop 4-up with rail; ≤1023 2-up no rail; ≤767 vertical timeline. */
.imi-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.imi-stages__railzone { position: relative; padding-top: 34px; margin-top: 8px; }
.imi-stages__rail {
  position: absolute;
  top: 0;
  left: 6%;
  right: 6%;
  height: 2px;
  background: linear-gradient(90deg, var(--teal-500) 0%, var(--teal-600) 40%, var(--navy-700) 75%, var(--navy-900) 100%);
}
.imi-stages__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}
.imi-stages__node { position: relative; text-align: center; }
.imi-stages__node::before {
  content: "";
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--paper-warm-alt);
  border: 2px solid var(--teal-600);
}
.imi-stages__node:nth-child(3)::before { border-color: var(--navy-700); }
.imi-stages__node:nth-child(4)::before { border-color: var(--navy-900); }
.imi-stages__num {
  display: inline-block;
  position: relative;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 64px;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--sky-300);
  margin-bottom: 16px;
  user-select: none;
}
.imi-stages__num b {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 5px;
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--teal-600);
  -webkit-text-stroke: 0;
  white-space: nowrap;
}
.imi-stages__ph {
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(42, 37, 32, 0.16);
  margin-bottom: 18px;
}
.imi-stages__img {
  width: 100%;
  aspect-ratio: 5 / 5.6;
  object-fit: cover;
  display: block;
}
.imi-stages__detail .imi-body { font-size: 16px; margin: 0; padding: 0 6px; }
.imi-stages__cta { text-align: center; margin-top: 48px; }
@media (min-width: 768px) and (max-width: 1023px) {
  .imi-stages__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 24px; }
  .imi-stages__rail { display: none; }
  .imi-stages__node::before { display: none; }
  .imi-stages__railzone { padding-top: 0; }
}
@media (min-width: 1024px) {
  .imi-stages__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; }
}
@media (max-width: 767px) {
  /* Vertical timeline: rail rotates to the left edge */
  .imi-stages__railzone { padding-top: 0; }
  .imi-stages__rail {
    top: 8px;
    bottom: 8px;
    left: 5px;
    right: auto;
    width: 2px;
    height: auto;
    background: linear-gradient(180deg, var(--teal-500) 0%, var(--teal-600) 40%, var(--navy-700) 75%, var(--navy-900) 100%);
  }
  .imi-stages__grid { gap: 0; padding-left: 26px; }
  .imi-stages__node { padding-bottom: 40px; }
  .imi-stages__node:last-child { padding-bottom: 8px; }
  .imi-stages__node::before {
    top: 6px;
    left: -26px;
    transform: none;
  }
  .imi-stages__cta .imi-btn {
    display: block;
    width: 100%;
    text-align: center;
  }
}

/* ---- SYMPTOMS — STATEMENT variant ------------------------------------
   design_style="statement" (2026-07-14, mockup dir C + kicker instead of
   the rule/dot). Centered manifesto on the navy atmospheric field;
   base light-text colors come from .imi-section--navy. Classic teal
   band (default, Nerve Palsy) untouched. -------------------------------- */
.imi-symptoms--statement {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 80% 70% at 50% 30%, rgba(58, 90, 133, 0.55) 0%, rgba(31, 58, 95, 0.7) 40%, rgba(14, 37, 64, 0.95) 90%),
    linear-gradient(180deg, #122d52 0%, #0E2540 60%, #08182d 100%);
  padding: 104px 24px;
  text-align: center;
}
.imi-symptoms__grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.35;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.08 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 160px 160px;
  mix-blend-mode: overlay;
}
.imi-symptoms--statement .imi-wrap { max-width: 820px; }
.imi-symptoms--statement .imi-kicker {
  display: inline-block;
  margin-bottom: 18px;
}
.imi-symptoms--statement .imi-heading {
  /* DS-158 touch-up: mobile floor 34->36 (was 2px under the 36 floor) —
     this 2-class selector out-specifies the base .imi-heading fix from
     the earlier round, so it needed its own edit. Desktop 54px unchanged. */
  font-size: clamp(36px, 4vw, 54px);
  margin-bottom: 26px;
}
.imi-symptoms--statement .imi-heading em {
  font-style: italic;
  font-weight: 500;
  color: var(--sky-300);
}
.imi-symptoms--statement .imi-symptoms__desc p.imi-body {
  font-size: 18px;
  line-height: 1.74;
  margin: 0 0 18px;
}
.imi-symptoms--statement .imi-symptoms__desc p.imi-body:first-child {
  font-size: 21px;
  line-height: 1.62;
  color: var(--sky-100);
}
.imi-symptoms--statement .imi-symptoms__desc p.imi-body:last-child { margin-bottom: 0; }
/* legacy `& p` / `& h2` guards (fonts/colors/alignment) — same trap as
   every section; legacy also forces text-align:left */
.entry-content .imi-symptoms--statement .imi-heading {
  text-align: center;
}
.entry-content .imi-symptoms--statement .imi-symptoms__desc p.imi-body {
  font-family: var(--font-body);
  color: rgba(234, 242, 247, 0.85);
  text-align: center;
}
.entry-content .imi-symptoms--statement .imi-symptoms__desc p.imi-body:first-child {
  color: var(--sky-100);
}
.entry-content .imi-symptoms--statement p.imi-kicker {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sky-300);
}
@media (max-width: 767px) {
  .imi-symptoms--statement { padding: 64px 20px; }
}

/* ---- SYMPTOMS OF MICROTIA (teal section, light-on-dark WYSIWYG) ------ */
.imi-symptoms__desc { max-width: 890px; }
.imi-symptoms__desc h2,
.imi-symptoms__desc h3,
.imi-symptoms__desc h4 {
  font-family: var(--font-display);
  font-weight: 700;
  color: inherit;
  margin: 22px 0 10px;
}
.imi-symptoms__desc ul,
.imi-symptoms__desc ol {
  margin: 0 0 18px;
  padding-left: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.imi-symptoms__desc li {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: inherit;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(250, 251, 252, 0.25);
}
.imi-symptoms__desc a { color: var(--paper); text-decoration: underline; }
.imi-symptoms__desc a:hover { color: var(--sky-300); }
@media (min-width: 768px) {
  .imi-symptoms .imi-heading,
  .imi-symptoms__desc { text-align: left; }
}
@media (max-width: 767px) {
  .imi-symptoms .imi-heading { text-align: center; }
  .imi-symptoms__desc { text-align: center; margin: 0 auto; }
}

/* ---- EXPERT INSIGHTS --------------------------------------------------- */
.imi-insights__grid {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.imi-insights__card {
  background: var(--paper);
  border-radius: 16px;
  padding: 32px 28px;
}
.imi-insights__cta { text-align: center; margin-top: 48px; }
@media (min-width: 768px) {
  .imi-insights__grid { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 40px; }
  .imi-insights__card { flex: 1 1 420px; max-width: 500px; }
}

/* ---- EXPERT INSIGHTS: warm/human note treatment (2026-07-14) ---------- */
.imi-insights__intro {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
  margin: 8px 0 64px;
}
.imi-insights__photo-wrap { display: flex; justify-content: center; }
.imi-insights__photo {
  position: relative;
  width: 100%;
  max-width: 320px;
  padding: 10px 10px 28px;
  background: var(--paper);
  border-radius: 4px;
  box-shadow: 0 22px 44px rgba(42, 37, 32, 0.16), 0 2px 8px rgba(42, 37, 32, 0.08);
  transform: rotate(-2deg);
}
.imi-insights__photo img {
  display: block;
  width: 100%;
  height: 340px;
  object-fit: cover;
  object-position: top center;
  border-radius: 2px;
}
.imi-insights__photo-cap {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 8px;
  margin: 0;
  font-family: var(--font-body);
  font-style: italic;
  font-size: 13px;
  color: var(--ink-warm);
  text-align: center;
}
.imi-insights__note { max-width: 56ch; }
.imi-insights__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--teal-deep);
  margin: 0 0 14px;
}
.imi-insights__eyebrow svg { flex: none; }
.imi-insights__note .imi-body { font-size: 18px; line-height: 1.7; color: var(--ink-warm); margin: 0; }
.imi-insights__note .imi-body strong { color: var(--navy-900); }

.imi-insights__card--warm {
  position: relative;
  border-radius: 22px;
  padding: 40px 34px 34px;
  box-shadow: 0 18px 40px rgba(42, 37, 32, 0.09);
  border: 1px solid rgba(232, 221, 208, 0.7);
}
.imi-insights__card--warm .imi-tabs__bullets-title { font-size: 19px; margin: 0 0 14px; }
.imi-insights__card--warm .imi-body { font-size: 16.5px; }
.imi-insights__card--warm .imi-body:last-child { margin-bottom: 0; }

.imi-insights__cta--warm { padding-top: 40px; border-top: 1px solid var(--sand-200); }
.imi-insights__closing-line {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 18px;
  color: var(--ink-warm);
  margin: 0 0 20px;
}

@media (max-width: 900px) {
  .imi-insights__intro { grid-template-columns: 1fr; gap: 32px; margin-bottom: 48px; }
}

/* ---- EXPERT INSIGHTS warm: polish round (2026-07-14, Rox comment) ------
   Same `.entry-content` specificity bump as the LEGACY-TYPOGRAPHY
   NEUTRALIZER above (~line 5780) — the legacy nested `& p` rule outranks
   plain single-class selectors, so anything here styling a <p> or <h3>
   needs the same `.entry-content` prefix to actually win. */
.entry-content .imi-insights .imi-kicker { font-weight: 600; }
.entry-content .imi-insights__eyebrow { color: var(--teal-deep); font-weight: 600; }
.entry-content .imi-insights__photo-cap { font-family: var(--font-body); }
.entry-content .imi-insights__card--warm .imi-tabs__bullets-title { font-family: var(--font-ui); }

/* =====================================================================
   DIAGNOSIS PATHWAY (CLINICAL) — acf/diagnosis-pathway
   "How is Microtia Diagnosed?" section, microtia redesign 2026-07-14 (DS-49).
   Denser, structured, proof-forward treatment: diagnostic pathway strip +
   CT-scan stat panel + evaluation checklist, on a full teal section
   background. Single-instance block (not shared with about-doctor), so
   this styling can't leak onto Home/About/Nerve Palsy.
   Tokens: var(--teal-section) section bg, var(--navy-900) stat panel,
   shared .imi-section/.imi-wrap/.imi-kicker/.imi-heading/.imi-body/.imi-btn
   primitives carry the section chrome + type.
   ===================================================================== */

.imi-dx__head {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 56px;
  align-items: center;
  margin-bottom: 56px;
}
.imi-dx__head-copy { max-width: 620px; min-width: 0; }
.imi-dx__heading { margin-bottom: 18px; }
.imi-dx__head-media {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(250, 251, 252, 0.25);
  box-shadow: 0 24px 48px rgba(10, 26, 46, 0.22);
  aspect-ratio: 4 / 3.4;
}
.imi-dx__head-media img { display: block; width: 100%; height: 100%; object-fit: cover; }

.imi-dx__pathway {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid #DDE4EA;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  margin-bottom: 40px;
  box-shadow: 0 20px 40px rgba(10, 26, 46, 0.18);
}
.imi-dx__step {
  padding: 32px 30px;
  border-right: 1px solid #E4E9EE;
  min-width: 0;
}
.imi-dx__step:last-child { border-right: none; }
.imi-dx__step-num {
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--teal-600);
  background: #EAF3F4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-bottom: 16px;
}
.imi-dx__step p.imi-dx__step-label {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 8px;
}
.imi-dx__step h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  color: var(--ink);
  margin: 0 0 8px;
  line-height: 1.25;
}
.imi-dx__step p {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
}

.imi-dx__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 28px;
  align-items: stretch;
}

.imi-dx__panel {
  background: var(--navy-900);
  border-radius: 14px;
  padding: 40px 40px 36px;
  color: #EAF2F7;
  box-shadow: 0 20px 40px rgba(10, 26, 46, 0.25);
  min-width: 0;
}
.imi-dx__panel p.imi-dx__panel-kicker {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sky-300);
  margin: 0 0 18px;
}
.imi-dx__stat {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.imi-dx__stat-num {
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: 56px;
  line-height: 1;
  color: #fff;
  letter-spacing: -0.02em;
}
.imi-dx__stat-unit {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #EAF2F7;
}
.imi-dx__panel h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  color: #fff;
  margin: 0 0 12px;
}
.imi-dx__panel p {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: rgba(234, 242, 247, 0.9);
  margin: 0 0 14px;
}
.imi-dx__panel p:last-of-type { margin-bottom: 0; }

.imi-dx__checklist {
  background: #fff;
  border: 1px solid #DDE4EA;
  border-radius: 14px;
  padding: 36px 36px 32px;
  box-shadow: 0 20px 40px rgba(10, 26, 46, 0.18);
  min-width: 0;
}
.imi-dx__checklist h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  color: var(--ink);
  margin: 0 0 18px;
}
.imi-dx__checklist ul { list-style: none; margin: 0; padding: 0; }
.imi-dx__checklist li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 0;
  border-top: 1px solid #EEF1F4;
}
.imi-dx__checklist li:first-child { border-top: none; padding-top: 0; }
.imi-dx__checklist li:last-child { padding-bottom: 0; }
.imi-dx__check {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--teal-600);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}
.imi-dx__check svg { width: 11px; height: 11px; }
.imi-dx__check-text {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
}
.imi-dx__caveat {
  margin-top: 18px;
  padding-top: 18px;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.6;
  color: #8A6D2F;
  background: #FBF6EA;
  border-radius: 8px;
  padding: 14px 16px;
}

.imi-dx__cta-row { margin-top: 40px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }

@media (max-width: 1023px) {
  .imi-dx__head { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .imi-dx__head-media { order: -1; aspect-ratio: 16 / 10; }
  .imi-dx__pathway { grid-template-columns: minmax(0, 1fr); }
  .imi-dx__step { border-right: none; border-bottom: 1px solid #E4E9EE; }
  .imi-dx__step:last-child { border-bottom: none; }
  .imi-dx__grid { grid-template-columns: minmax(0, 1fr); }
  .imi-dx__panel, .imi-dx__checklist { padding: 30px 26px; }
  .imi-dx__stat-num { font-size: 44px; }
}

@media (max-width: 767px) {
  .imi-dx__head-copy,
  .imi-dx__step,
  .imi-dx__panel,
  .imi-dx__cta-row { text-align: center; }
  .imi-dx__stat { justify-content: center; }
  .imi-dx__checklist { text-align: left; }
  .imi-dx__cta-row { justify-content: center; }
}

/* Rox 2026-07-14: "What the Scan Evaluates" checklist bullets weren't
   actually left-aligned on phones — .imi-dx__checklist { text-align: left }
   above loses to the site-wide "Phone centering" rule (main [class*="imi-"]
   { text-align: center }, see ~line 4533) because .imi-dx__check-text
   carries its own "imi-" class and matches that rule directly with higher
   specificity than the ancestor override. Same fix pattern as
   .imi-location--clinical above (~line 6749): explicit !important opt-out
   scoped to the bullet row only. */
@media (max-width: 767px) {
  .imi-dx__checklist li,
  .imi-dx__check-text {
    text-align: left !important;
  }
}

/* Legacy `.entry-content & h2/h3/p` typography traps (see LEGACY-TYPOGRAPHY
   NEUTRALIZER note above) can outrank plain single-class-scoped element
   selectors on rebuilt pages that still load style.css. Mirror the same
   defensive re-assertion here for the block's own h3/p elements. */
.entry-content .imi-dx__step h3,
.entry-content .imi-dx__panel h3,
.entry-content .imi-dx__checklist h3 {
  font-family: var(--font-display);
  margin: 0 0 8px;
}
.entry-content .imi-dx__panel h3,
.entry-content .imi-dx__checklist h3 { margin: 0 0 12px; }
.entry-content .imi-dx__step p {
  font-family: var(--font-body);
  color: var(--ink-soft);
}
.entry-content .imi-dx__step p.imi-dx__step-label { font-family: var(--font-ui); font-size: 14px; }
.entry-content .imi-dx__panel p { font-family: var(--font-body); color: rgba(234, 242, 247, 0.9); }
.entry-content .imi-dx__panel p.imi-dx__panel-kicker { font-family: var(--font-ui); color: var(--sky-300); }
.entry-content .imi-dx__check-text { font-family: var(--font-body); color: var(--ink); }

/* =====================================================================
   OTOLOGY & ATRESIA REPAIR APPROACH (Clinical) — acf/otology-atresia
   (2026-07-14, DS-59). Reuses .imi-decision-facts / .imi-decision-compare
   / .imi-decision-card / .imi-prose tokens; block-scoped layout only here.

   TIGHTER INTER-SECTION SPACING (2026-07-14, Rox follow-up "lessen how
   much space is between each section"): only the paddings that create the
   GAP BETWEEN this block's own internal sections were touched — intro's
   bottom, narrative's top/bottom, facts' top/bottom, compare's top/bottom.
   The block's outer boundary paddings (intro's top, close's bottom) are
   entry/exit spacing versus the rest of the page, not "between sections",
   and were deliberately left alone. Roughly halved each gap (desktop
   128/120/80/96px → ~64/64/48/48px between intro→narrative→facts→compare
   →close; mobile scaled proportionally) rather than zeroing them out, so
   sections stay tighter but still visually distinct.
   ===================================================================== */
.imi-oar__intro { padding: 96px 48px 40px; background: var(--paper); }
.imi-oar__intro-panel {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}
.imi-oar__intro-media {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  box-shadow: var(--shadow-card, 0 12px 24px rgba(14,37,64,0.12));
}
.imi-oar__intro-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.imi-oar__intro-media-tag {
  position: absolute; left: 18px; bottom: 18px;
  background: rgba(14,37,64,0.88);
  color: var(--paper);
  font-family: var(--font-ui);
  font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 8px 14px; border-radius: 999px;
}
@media (min-width: 901px) {
  .imi-oar__intro-body .imi-heading { max-width: 11ch; }
}

.imi-oar__narrative { padding: 8px 48px 32px; background: var(--paper); }
.imi-oar__narrative-wrap { max-width: 820px; margin: 0 auto; }
.imi-oar__narrative-wrap h3 { margin-top: 0; }
.imi-oar__callout {
  display: flex; gap: 12px; align-items: flex-start;
  margin: 28px 0 0;
  padding: 16px 18px;
  border: 1px solid var(--rule, #D8E0E8);
  border-left: 3px solid var(--navy-500);
  border-radius: 8px;
  background: var(--paper-warm-alt);
}
.imi-oar__callout svg { flex: none; margin-top: 2px; }
.imi-oar__callout p { margin: 0; font-family: var(--font-ui); font-size: 16px; line-height: 1.55; color: var(--ink-soft); } /* DS-158: was 14.5px */
.imi-oar__callout strong { color: var(--navy-900); }

.imi-oar__facts { padding: 32px 48px; }
.imi-oar__facts-label {
  text-align: center; font-family: var(--font-ui); font-size: 12px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: #8a98a3; margin: 0 0 6px;
}
.imi-oar__facts .imi-decision-facts { padding-top: 6px; }
.imi-oar__facts .imi-decision-facts__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  max-width: 640px;
  margin: 0 auto;
}
.imi-oar__facts .imi-decision-fact { min-width: 0; }
@media (max-width: 640px) {
  .imi-oar__facts .imi-decision-facts__row { grid-template-columns: minmax(0, 1fr); }
}

.imi-oar__compare { padding: 16px 48px 48px; }

.imi-oar__close { padding: 0 48px 120px; }
.imi-oar__close-wrap { max-width: 780px; margin: 0 auto; text-align: center; }
.imi-oar__close-wrap .imi-body { font-size: 17.5px; }
.imi-oar__close-cta { margin-top: 18px; }

@media (max-width: 900px) {
  .imi-oar__intro { padding: 56px 20px 24px; }
  .imi-oar__intro-panel { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .imi-oar__intro-media { aspect-ratio: 16 / 10; }
  .imi-oar__narrative, .imi-oar__facts, .imi-oar__compare { padding-left: 20px; padding-right: 20px; }
  .imi-oar__close { padding-left: 20px; padding-right: 20px; padding-bottom: 72px; }
}

/* Breathing room between the intro row and the narrative heading
   (originally 64px/40px per DS-57 mockup review; tightened 2026-07-14 per
   Rox's "lessen the space between each section" follow-up — see the
   TIGHTER INTER-SECTION SPACING note below for the full round). */
@media (min-width: 901px) {
  .imi-oar__narrative { padding-top: 24px; }
}
@media (max-width: 900px) {
  .imi-oar__narrative { padding-top: 20px; }
}

/* 2026-07-14 (Rox follow-up round): narrative now collapses behind a
   Read More link on mobile (.shorten wraps .imi-oar__narrative-wrap in the
   template) and should read CENTERED like the rest of the section when
   expanded — reverses the earlier left-align opt-out. The sitewide "Phone
   centering" rule (main [class*="imi-"] { text-align: center }, ~line 4533)
   already centers it now that no override remains; no extra CSS needed.
   .shorten-controls (the injected Read More/Read Less link) is centered on
   phones by the existing sitewide rule at ~line 4002. */

/* Card tag inside the sequencing-comparison cards is left-aligned by
   design on desktop (part of the card, not page-level copy) but the
   sitewide "Phone centering" wildcard force-centers it on mobile since it
   carries its own "imi-" class — Rox flagged this as wrong on mobile
   (2026-07-14 follow-up). Scoped to THIS block only (.imi-oar__compare
   ancestor) so the shared .imi-decision-card component elsewhere on the
   page/site is untouched. The card h3 title is DELIBERATELY not included
   here (2026-07-15 follow-up: Rox wants it centered on mobile, i.e. the
   default wildcard behavior — no override needed for it). */
@media (max-width: 767px) {
  .imi-oar__compare .imi-decision-card__tag {
    text-align: left !important;
  }
}

/* Row label ("Repair timing", "Surgical access", etc.) inherits
   text-align:center from its .imi-decision-row ancestor (the sitewide
   mobile wildcard sets it there directly, since .lbl itself carries no
   "imi-" class to be centered on its own — but that's exactly why it
   INHERITS instead of getting its own rule). At full row width this was
   invisible (shrink-to-fit box == its own text, centering is a no-op),
   but narrow mobile columns wrap the label onto 2 lines, and a wrapped
   box's width is not the same as any one wrapped line's width — so the
   inherited center became visible as off-left, uneven wrapped lines (Rox
   2026-07-15 follow-up). .val already has its own explicit text-align:
   right and was unaffected. Scoped to .imi-oar__compare only. */
@media (max-width: 767px) {
  .imi-oar__compare .imi-decision-row .lbl {
    text-align: left;
  }
}

.entry-content .imi-oar__narrative-wrap h3,
.entry-content .imi-decision-compare .imi-decision-card h3 {
  font-family: var(--font-display);
}
.entry-content .imi-oar__narrative-wrap p {
  font-family: var(--font-body);
  color: var(--ink-soft);
}

/* ---------------------------------------------------------------------------
   Goals & Techniques of Atresia Repair (Refined/Editorial) — acf/atresia-goals
   Microtia redesign, DS-64 (2026-07-15). Masthead cover spread, numbered
   editorial "chapters", navy pull-quote band, lean close CTA. Ported from
   the approved mockup (public/_mockups/microtia-atresia-goals/refined/),
   .ag-* classes renamed to the block's .imi-ag__* namespace.
   ------------------------------------------------------------------------ */
.imi-ag { background: #e9f2f4; }

.imi-ag__masthead {
  max-width: 1320px;
  margin: 0 auto;
  padding: 104px 48px 88px;
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.05fr);
  gap: 72px;
  align-items: center;
}
.imi-ag__masthead-heading { font-size: clamp(38px, 4.4vw, 60px); line-height: 1.08; max-width: 11ch; }
.imi-ag__masthead-lead { font-style: italic; font-size: 20px; line-height: 1.68; max-width: 46ch; }
.imi-ag__masthead-lead p { margin: 0 0 0.6em; }
.imi-ag__masthead-lead > :last-child { margin-bottom: 0; }
.imi-ag__masthead-media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; }
.imi-ag__masthead-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.imi-ag__chapters { max-width: 1180px; margin: 0 auto; padding: 8px 48px 96px; }
.imi-ag__chapter {
  display: grid;
  grid-template-columns: minmax(0, 0.32fr) minmax(0, 0.68fr);
  gap: 56px;
  padding: 64px 0;
  border-top: 1px solid var(--rule);
}
.imi-ag__chapter:first-child { border-top: 1px solid var(--rule); }
.imi-ag__chapter-num {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 15px;
  letter-spacing: 0.05em;
  color: var(--teal-600);
  margin: 0 0 12px;
}
.imi-ag__chapter-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(22px, 2.1vw, 28px);
  line-height: 1.22;
  color: var(--navy-900);
  margin: 0;
  max-width: 16ch;
}
.imi-ag__chapter-body { max-width: 66ch; }

.imi-ag__quote { background: var(--navy-900); padding: 108px 48px; }
.imi-ag__quote-wrap { max-width: 880px; margin: 0 auto; text-align: center; }
.imi-ag__quote-mark {
  font-family: var(--font-display);
  font-size: 56px;
  line-height: 1;
  color: var(--teal-500);
  margin: 0 0 8px;
}
.imi-ag__quote-text {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.42;
  color: var(--paper);
  margin: 0 0 28px;
}
.imi-ag__quote-attr {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sky-300);
  margin: 0;
}

.imi-ag__close { padding: 96px 48px 140px; }
.imi-ag__close-wrap { max-width: 640px; margin: 0 auto; text-align: center; }
.imi-ag__close-eyebrow {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8a98a3;
  margin: 0 0 16px;
}
.imi-ag__close-heading { font-size: clamp(26px, 2.6vw, 34px); margin: 0 0 20px; }
/* Qualified with the wrap ancestor (not just `.imi-ag__close-body`) so this
   ties the specificity of `.entry-content .imi-body` (imi.css:5933, which
   forces `margin: 0 0 20px` — no auto left/right — on every .imi-body in
   the block content) and wins on source order: without the extra
   qualifier the close paragraph's max-width:52ch box lost its centering
   and sat flush left. */
.imi-ag__close-wrap .imi-ag__close-body { max-width: 52ch; margin: 0 auto; font-size: 17.5px; }
.imi-ag__close-cta { margin-top: 32px; }

@media (max-width: 980px) {
  .imi-ag__masthead { grid-template-columns: minmax(0, 1fr); padding: 64px 24px 56px; gap: 40px; text-align: center; }
  .imi-ag__masthead-heading { max-width: none; }
  .imi-ag__masthead-lead { margin-left: auto; margin-right: auto; }
  .imi-ag__masthead-media { order: -1; aspect-ratio: 16 / 11; }

  .imi-ag__chapters { padding: 0 24px 64px; }
  .imi-ag__chapter { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 44px 0; text-align: center; }
  .imi-ag__chapter-title { max-width: none; }
  .imi-ag__chapter-body { margin-left: auto; margin-right: auto; }
  .imi-ag__chapter-body :is(ul, ol) { text-align: left; }

  .imi-ag__quote { padding: 72px 24px; }
  .imi-ag__close { padding: 64px 24px 88px; }
}

/* =====================================================================
   KEY TAKEAWAYS (CLINICAL/AUTHORITATIVE) — acf/nerve-palsy-key-takeaways
   (DS-76, nerve-palsy redesign 2026-07-15). Numbered fact-sheet rows with
   a category tag, in place of the shared acf/learn-more block's flat bold
   list. Single-instance — not shared with /learn-more/ or /services-new/.
   Mobile collapse uses the site-wide .shorten utility (data attrs set in
   the render template), not bespoke JS.
   ===================================================================== */

.imi-kt { padding: 96px 0; background: var(--paper); }
/* The approved mockup's .kt-wrap carried `padding: 0 20px` for a permanent
   side gutter; that was lost when this got mapped onto the shared,
   padding-less .imi-wrap utility class, so content ran edge-to-edge below
   the wrap's 920px max-width (Rox, 2026-07-15). Restored here, scoped to
   this block only. */
.imi-kt .imi-wrap { padding-left: 24px; padding-right: 24px; }

.imi-kt__head { max-width: 640px; margin: 0 0 48px; }
.imi-kt__head .imi-heading { margin-bottom: 14px; }
.imi-kt__lead { margin-bottom: 0; }

.imi-kt__list { list-style: none; margin: 0 0 48px; padding: 0; }
.imi-kt__list-wrap { position: relative; }
.imi-kt__item {
  display: grid;
  grid-template-columns: 148px 1fr;
  gap: 28px;
  padding: 26px 0;
  border-bottom: 1px solid var(--rule);
}
.imi-kt__item:first-child { padding-top: 0; }
.imi-kt__item:last-child { border-bottom: none; }

.imi-kt__item-rail { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.imi-kt__item-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--teal-600);
}
.imi-kt__item-tag {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--navy-700);
  background: var(--sky-100);
  border-radius: 4px;
  padding: 5px 10px;
}

.imi-kt__item-body {
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.68;
  color: var(--ink-soft);
  margin: 0;
}

.imi-kt__cta { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.imi-kt__cta-note { font-family: var(--font-ui); font-size: 13px; color: var(--ink-soft); }

@media (max-width: 640px) {
  .imi-kt { padding: 56px 0; }
  .imi-kt__head { margin-bottom: 36px; text-align: center; }
  .imi-kt__item { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 22px 0; text-align: center; }
  .imi-kt__item-rail { flex-direction: row; align-items: center; justify-content: center; }
  .imi-kt__cta { justify-content: center; text-align: center; }
  /* .imi-kt__list is an <ol>, so the sitewide phone-centering rule's
     exemption for lists ("main ol *{ text-align:left }", ~line 4547 —
     Rox's standing rule to keep real bullet/numbered lists left-aligned)
     re-lefts every row here too, including the <p> ACF's wysiwyg field
     wraps body copy in. This block's rows are a fact-sheet layout, not a
     readability list, so Rox asked to center them like the rest of the
     block (2026-07-15 follow-up). */
  .imi-kt__item-body,
  .imi-kt__item-body p { text-align: center !important; }
  /* Extra breathing room below Read More before the CTA button — the
     sitewide .shorten-controls only carries its own margin-top (16px,
     set inline by app.js), nothing below it, so Read More and the CTA
     sat right on top of each other (Rox, 2026-07-15 follow-up). */
  .imi-kt .shorten-controls { margin-bottom: 24px; }
}

/* =====================================================================
   EXPERT INSIGHTS — CLINICAL LAYOUT (2026-07-15, DS-81)
   Additive `imi-insights--clinical` modifier (gated on ACF `clinical_mode`,
   see blocks/Services-page/expert-insights.php). Only used on the Symptoms
   instance on /marginal-mandibular-nerve-palsy/ — every other instance
   never renders these classes and is unaffected.

   The reference list reuses .imi-kt__list / .imi-kt__item* verbatim (same
   fact-sheet pattern as the Key Takeaways block on this page, including its
   mobile-centering overrides above), so only the Quick Reference panel and
   the two-column head layout need new rules here. Read More reuses the
   sitewide .shorten mechanism (app.js) — no new JS.
   ===================================================================== */

.imi-insights__quickref {
  background: var(--navy-900);
  border-radius: 16px;
  padding: 30px 30px 28px;
}
.imi-insights__quickref-title {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--sky-300);
  margin: 0 0 18px;
}
.imi-insights__quickref-group + .imi-insights__quickref-group {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(250, 251, 252, 0.14);
}
.imi-insights__quickref-group-label {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.03em;
  color: var(--sky-300);
  margin: 0 0 10px;
}
.imi-insights__quickref-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.imi-insights__quickref-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--font-ui);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--paper-80);
}
.imi-insights__quickref-item svg { flex: none; margin-top: 2px; color: var(--teal-500); }

.imi-insights__clinical-list { margin-bottom: 48px; }

/* Rox round 2 (2026-07-15): reference-list item titles bigger (base
   .imi-tabs__bullets-title is 16px, shared with location/about-doctor/
   tabs — scoped here, same pattern as the existing
   .imi-insights__card--warm override above). Tag fill → paper instead of
   the shared .imi-kt__item-tag's sky-100, so it pops against this block's
   custom #ddebee bg (matches the approved mockup's .si-item__tag; scoped
   so the Key Takeaways block's own tags, same base class, are untouched). */
.imi-insights--clinical .imi-kt__item-body .imi-tabs__bullets-title { font-size: 22px; }
.imi-insights--clinical .imi-kt__item-tag { background: var(--paper); }

.imi-insights__cta-note { display: block; margin-top: 12px; font-family: var(--font-ui); font-size: 13px; color: var(--ink-soft); }

/* Extra breathing room below Read More, same fix as .imi-kt above. */
.imi-insights--clinical .shorten-controls { margin-bottom: 24px; }

/* Two-column head (lead copy + Quick Reference panel) — desktop/tablet
   only. Left-aligns the otherwise-centered .imi-tabs__head; deliberately
   scoped to >640px so the sitewide phone-centering rule
   (main [class*="imi-"] { text-align:center }, ~line 4544) wins
   unopposed on mobile. The Quick Reference <ul> is a real list, so it's
   already exempt from that rule and stays left-aligned on mobile too. */
@media (min-width: 641px) {
  .imi-insights__clinical-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
    gap: 48px;
    align-items: start;
    margin-bottom: 56px;
  }
  .imi-insights__clinical-head .imi-tabs__head {
    text-align: left;
    margin-bottom: 0;
  }
  .imi-insights__clinical-head .imi-tabs__head .imi-kicker,
  .imi-insights__clinical-head .imi-tabs__head .imi-heading,
  .imi-insights__clinical-head .imi-tabs__head .imi-lead {
    margin-left: 0;
    margin-right: 0;
    text-align: left;
  }
}
@media (max-width: 900px) and (min-width: 641px) {
  .imi-insights__clinical-head { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 640px) {
  .imi-insights__quickref { padding: 26px 24px; }
  /* Rox round 2 (2026-07-15): the desktop 56px margin-bottom on
     .imi-insights__clinical-head lives inside the >=641px media query
     above, so mobile (where the head/quickref stack in normal flow
     instead of a grid) had NO gap at all before the reference list —
     the navy Quick Reference box ran straight into row "01". */
  .imi-insights__clinical-head { margin-bottom: 32px; }
}

/* =========================================================================
   MMNP — "Can Surgery Cause It?" (Refined / Editorial) — acf/mmnp-can-
   surgery-cause (DS-86). Long-form magazine layout: masthead + dek, a
   two-column chapter grid with a numbered risk-index sidebar, folio/rule
   chapter breaks, and a closing portrait pull-quote. Reveal-on-scroll +
   .shorten (mobile Read More) both use the sitewide mechanisms already
   wired by imi-reveal / app.js — no bespoke JS needed here.
   ========================================================================= */
.imi-mmnp {
  background: var(--paper-warm-alt);
  padding: 132px 32px 140px;
  position: relative;
}
.imi-mmnp__wrap { max-width: 1160px; margin: 0 auto; }

.imi-mmnp__masthead {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 64px;
  align-items: end;
  padding-bottom: 56px;
  border-bottom: 1px solid var(--rule);
}
.imi-mmnp__eyebrow {
  display: flex; align-items: center; gap: 14px;
  margin: 0 0 22px;
}
.imi-mmnp__eyebrow-num {
  font-family: var(--font-display); font-weight: 800; font-size: 13px;
  color: var(--paper); background: var(--teal-600);
  width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
}
.imi-mmnp__kicker {
  font-family: var(--font-ui); font-size: 13px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--teal-600);
}
.imi-mmnp__headline {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(34px, 4vw, 54px); line-height: 1.08;
  letter-spacing: -0.02em; color: var(--navy-900); margin: 0;
}
.imi-mmnp__dek {
  font-family: var(--font-body); font-style: italic; font-weight: 500;
  font-size: clamp(20px, 1.7vw, 24px); line-height: 1.5;
  color: var(--navy-900); margin: 0;
  padding-left: 24px; border-left: 2px solid var(--teal-600);
}

.imi-mmnp__index {
  display: flex; flex-wrap: wrap; gap: 10px 0;
  margin: 40px 0 0;
  font-family: var(--font-ui); font-size: 12.5px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft);
}
.imi-mmnp__index a { color: inherit; text-decoration: none; }
.imi-mmnp__index span.n { color: var(--teal-600); font-weight: 700; margin-right: 7px; }
.imi-mmnp__index .sep { margin: 0 18px; color: var(--rule); }

.imi-mmnp__chapter { padding-top: 72px; }
.imi-mmnp__chapter + .imi-mmnp__chapter { border-top: 1px solid var(--rule); }
.imi-mmnp__chapter-head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 32px; }
.imi-mmnp__chapter-folio {
  font-family: var(--font-body); font-style: italic; font-size: 15px;
  color: var(--teal-600); flex: none;
}
.imi-mmnp__chapter-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(24px, 2.2vw, 30px); line-height: 1.2;
  color: var(--navy-900); margin: 0;
}

.imi-mmnp__grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 64px; }
.imi-mmnp__copy p { max-width: 62ch; }
.imi-mmnp__aside-label {
  font-family: var(--font-ui); font-size: 12px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--navy-900);
  margin: 0 0 4px;
}
.imi-mmnp__aside-sub {
  font-family: var(--font-body); font-style: italic; font-size: 14px;
  color: var(--ink-soft); margin: 0 0 20px;
}
.imi-mmnp__risklist { border-top: 1px solid var(--rule); }
.imi-mmnp__risk {
  display: flex; gap: 16px; align-items: baseline;
  padding: 16px 0; border-bottom: 1px solid var(--rule);
}
.imi-mmnp__risk-n {
  font-family: var(--font-display); font-weight: 700; font-size: 13px;
  color: var(--sky-300); background: var(--navy-900);
  width: 24px; height: 24px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
}
.imi-mmnp__risk-text {
  font-family: var(--font-ui); font-size: 15px; line-height: 1.5;
  color: var(--ink); font-weight: 500;
}
.imi-mmnp__risk-text small {
  display: block; font-family: var(--font-body); font-weight: 400;
  font-style: italic; font-size: 13.5px; color: var(--ink-soft);
  margin-top: 2px; line-height: 1.4;
}
.imi-mmnp__note {
  margin-top: 36px; padding-left: 20px; border-left: 2px solid var(--sand-200);
  max-width: 62ch;
}
.imi-mmnp__note p {
  font-family: var(--font-body); font-style: italic; font-size: 15.5px;
  line-height: 1.65; color: var(--ink-soft); margin: 0;
}
.imi-mmnp__aside-list { margin-top: 4px; }

.imi-mmnp__close {
  display: grid; grid-template-columns: 108px 1fr; gap: 28px; align-items: center;
  margin-top: 44px; padding-top: 40px; border-top: 1px solid var(--rule);
}
.imi-mmnp__close-photo {
  width: 108px; height: 108px; border-radius: 50%; overflow: hidden;
  box-shadow: 0 10px 24px rgba(14,37,64,0.14);
}
.imi-mmnp__close-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.imi-mmnp__close-quote {
  font-family: var(--font-body); font-style: italic; font-weight: 500;
  font-size: clamp(19px, 1.8vw, 23px); line-height: 1.5; color: var(--navy-900);
  margin: 0 0 10px;
}
.imi-mmnp__close-attr {
  font-family: var(--font-ui); font-size: 13px; font-weight: 600;
  letter-spacing: .06em; color: var(--teal-600); text-transform: uppercase;
}

.imi-mmnp__cta-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; margin-top: 68px; padding-top: 40px; border-top: 1px solid var(--rule);
  flex-wrap: wrap;
}
.imi-mmnp__cta-text {
  font-family: var(--font-body); font-size: 16px; color: var(--ink-soft);
  max-width: 44ch; margin: 0;
}

@media (max-width: 900px) {
  .imi-mmnp { padding: 88px 20px 96px; }
  .imi-mmnp__masthead { grid-template-columns: 1fr; gap: 28px; }
  .imi-mmnp__grid { grid-template-columns: 1fr; gap: 40px; }
  .imi-mmnp__index .sep { margin: 0 12px; }
  /* Rox round 2 (2026-07-15): side-by-side photo+quote left the small
     72px circle floating awkwardly beside a multi-line quote. Stack
     instead — single column, photo first (already first in the DOM)
     centered above the quote+attribution block. */
  .imi-mmnp__close { grid-template-columns: 1fr; gap: 18px; }
  .imi-mmnp__close-photo { width: 72px; height: 72px; margin: 0 auto; }
  .imi-mmnp__cta-row { flex-direction: column; align-items: center; }
  /* Rox round 2: the eyebrow (numbered badge + kicker) is a flex row with
     no justify-content, so it default-aligns flex-start regardless of the
     sitewide text-align:center rule (that only affects inline text/box
     alignment, not flex-item positioning) — center it explicitly. */
  .imi-mmnp__eyebrow { justify-content: center; }

  /* The sitewide phone-centering rule (main [class*="imi-"] {text-align:
     center}, ~line 4545) is an ATTRIBUTE selector — it matches every single
     element whose OWN class contains "imi-" directly, not just top-level
     containers. That means a fix on `.imi-mmnp__risklist` alone does
     nothing for `.imi-mmnp__risk-text` inside it: that span has its own
     "imi-" class, so the sitewide rule matches IT directly too, and a
     direct match on an element always wins over whatever value it would
     otherwise inherit from its parent — the parent's fixed text-align
     never gets a chance to apply.
     Rox round 1 (2026-07-15) fixed the specificity gap for the *container*
     classes (.imi-mmnp__dek/__note/__close/__risklist themselves, scoped
     under `.imi-mmnp` for (0,2,0) vs the sitewide rule's (0,1,1)) but that
     only fixed elements whose visible text lives directly on the container.
     Round 3 (2026-07-15): Rox caught that the risk rows themselves
     (Parotidectomy, Facelift & neck lift) were still centered, and the
     "And other jaw surgeries" sub-caption wasn't flush with its title —
     both are `.imi-mmnp__risk-text`/its child `<small>` getting centered
     directly, exactly the bug above. Fixed properly this time with a
     descendant-universal selector (`.imi-mmnp__risklist *` etc.) so EVERY
     nested element in each exception zone is covered, not just the
     container — matches the original approved mockup's own approach
     (`.imi-mmnp__wrap{text-align:center}` + explicit left-aligned
     exception zones), just implemented against the sitewide rule instead
     of a from-scratch base.
     Round 4 (2026-07-15): Rox wants the closing quote CENTERED on mobile
     after all — dropped `.imi-mmnp__close`/`.imi-mmnp__close *` from this
     left-align list entirely, so the sitewide rule's own text-align:center
     (which directly matches `.imi-mmnp__close-quote`/`__close-attr`, same
     as everything else here) applies with nothing overriding it. No new
     rule needed for centering — removing the override is enough. Photo
     stays centered above via `margin:0 auto` on `.imi-mmnp__close-photo`
     (unaffected by text-align either way). */
  .imi-mmnp .imi-mmnp__dek,
  .imi-mmnp .imi-mmnp__note,
  .imi-mmnp .imi-mmnp__note *,
  .imi-mmnp .imi-mmnp__aside-label,
  .imi-mmnp .imi-mmnp__aside-sub,
  .imi-mmnp .imi-mmnp__risklist,
  .imi-mmnp .imi-mmnp__risklist *,
  .imi-mmnp .imi-mmnp__aside-list,
  .imi-mmnp .imi-mmnp__aside-list * {
    text-align: left;
  }
}

/* =============================================================================
   Recovery & Follow-Up (Nerve Palsy) — "Warm / Human" block (DS-109).
   Ported from _mockups/nerve-palsy-recovery/warm/index.html's .warm-* rules.
   Section wrapper reuses .imi-section--paper-warm-alt / .imi-wrap / .imi-kicker
   / .imi-heading / .imi-body / .imi-tabs__list / .imi-btn already defined above.
   ========================================================================== */

.imi-recovery-followup .imi-rf__intro {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: 52px;
  align-items: start;
  margin: 8px 0 64px;
}
@media (max-width: 900px) {
  .imi-recovery-followup .imi-rf__intro { grid-template-columns: 1fr; gap: 28px; margin-bottom: 44px; }
}

.imi-rf__intro-photo-wrap { display: flex; justify-content: center; }
.imi-rf__intro-photo {
  position: relative;
  width: 100%;
  max-width: 280px;
  padding: 10px 10px 26px;
  background: var(--paper);
  border-radius: 4px;
  box-shadow: 0 22px 44px rgba(42, 37, 32, 0.16), 0 2px 8px rgba(42, 37, 32, 0.08);
  transform: rotate(-1.6deg);
}
.imi-rf__intro-photo img {
  display: block;
  width: 100%;
  height: 300px;
  object-fit: cover;
  object-position: top center;
  border-radius: 2px;
}
.imi-rf__intro-photo-cap {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 6px;
  font-family: var(--font-body);
  font-style: italic;
  font-size: 13px;
  color: var(--ink-warm);
  text-align: center;
}

.imi-rf__intro-copy p.imi-body { font-size: 17.5px; }
.imi-rf__intro-copy p.imi-body:last-child { margin-bottom: 0; }

/* ---------- pill tabs (CSS-only, radio + sibling selector) ---------- */
.imi-rf__tabs-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 36px;
}
.imi-recovery-followup .imi-rf__tabs > input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }

.imi-rf__tabs-trigger {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-ui);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink-warm);
  background: var(--paper);
  border: 1px solid var(--sand-200);
  border-radius: 999px;
  padding: 12px 22px;
  cursor: pointer;
  transition: background 220ms var(--ease-out), border-color 220ms var(--ease-out), color 220ms var(--ease-out), box-shadow 220ms var(--ease-out);
}
.imi-rf__tabs-trigger:hover { border-color: var(--teal-600); color: var(--teal-deep); }
.imi-rf__tabs-trigger-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--paper-warm);
  color: var(--teal-deep);
  font-size: 12px;
  font-weight: 700;
  flex: none;
}

.imi-rf__tabs-panel { display: none; }

.imi-rf__panel-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  color: var(--navy-900);
  margin: 0 0 14px;
}
.imi-rf__panel-intro { font-size: 17.5px; margin-bottom: 30px; }

/* ---------- recovery: three severity "paths" ---------- */
.imi-rf__path-grid {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 34px;
}
@media (min-width: 860px) {
  .imi-rf__path-grid { flex-direction: row; align-items: stretch; }
}
.imi-rf__path {
  flex: 1 1 0;
  background: var(--paper-warm-alt);
  border: 1px solid var(--sand-200);
  border-radius: 18px;
  padding: 26px 26px 22px;
}
.imi-rf__path-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}
.imi-rf__path-badge svg { display: block; width: 52px; height: 52px; }
.imi-rf__path-lead {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  color: var(--navy-900);
  margin: 0 0 12px;
  line-height: 1.4;
}
.imi-rf__path .imi-tabs__list { margin: 0; }
.imi-rf__path .imi-tabs__list li { font-size: 15.5px; }

.imi-rf__note {
  background: var(--paper-warm);
  border-radius: 18px;
  padding: 28px 30px;
}
.imi-rf__note .imi-body { color: var(--ink-warm); }
.imi-rf__note .imi-body:last-child { margin-bottom: 0; }

/* ---------- risks: three grouped cards ---------- */
.imi-rf__risk-grid {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: 8px 0 30px;
}
@media (min-width: 860px) {
  .imi-rf__risk-grid { flex-direction: row; align-items: stretch; }
}
.imi-rf__risk-card {
  flex: 1 1 0;
  background: var(--paper);
  border: 1px solid var(--sand-200);
  border-radius: 18px;
  padding: 26px 26px 22px;
}
.imi-rf__risk-card-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}
.imi-rf__risk-card-badge svg { display: block; width: 48px; height: 48px; }
.imi-rf__risk-card-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  color: var(--navy-900);
  margin: 0 0 14px;
}
.imi-rf__risk-card .imi-tabs__list { margin: 0 0 4px; }
.imi-rf__risk-card .imi-tabs__list li { font-size: 15px; }

.imi-rf__subgroup { margin: 16px 0 0; }
.imi-rf__subgroup:first-child { margin-top: 0; }
.imi-rf__subgroup-label {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  color: var(--teal-deep);
  margin: 0 0 8px;
}
.imi-rf__subgroup .imi-tabs__list { gap: 6px; }
.imi-rf__subgroup .imi-tabs__list li { font-size: 14.5px; padding-left: 18px; }
.imi-rf__subgroup .imi-tabs__list li::before { top: 10px; width: 7px; }

/* ---------- surgeon: checklist ---------- */
.imi-rf__checklist {
  list-style: none;
  margin: 0 0 30px;
  padding: 0;
  display: grid;
  gap: 14px;
}
.imi-rf__checklist li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: var(--paper-warm-alt);
  border-radius: 14px;
  padding: 16px 20px;
}
.imi-rf__checklist-icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--teal-600);
  color: var(--paper);
  margin-top: 2px;
}
.imi-rf__checklist-icon svg { width: 14px; height: 14px; }
.imi-rf__checklist p.imi-body { margin: 0; font-size: 16px; }
.imi-rf__checklist p.imi-body strong { color: var(--navy-900); }

/* ---------- mobile: center everything except bullet lists ---------- */
@media (max-width: 640px) {
  .imi-recovery-followup .imi-rf__intro,
  .imi-rf__panel-title, .imi-rf__panel-intro,
  .imi-rf__path, .imi-rf__risk-card, .imi-rf__subgroup,
  .imi-rf__note {
    text-align: center;
  }
  .imi-rf__intro-photo-wrap,
  .imi-rf__tabs-nav {
    justify-content: center;
  }
  .imi-rf__path-badge, .imi-rf__risk-card-badge {
    display: flex;
    justify-content: center;
  }
  .imi-rf__checklist li {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  /* keep the dash-marker bullet lists left-aligned even inside a
     centered card — centered text with a left-pinned ::before marker
     reads as broken */
  .imi-rf__path .imi-tabs__list,
  .imi-rf__risk-card .imi-tabs__list,
  .imi-rf__subgroup .imi-tabs__list {
    text-align: left;
  }
}

/* ==========================================================================
   POPUP VIDEO MODAL (#drTahiriPopup, hero-sec.php "meet Dr. Tahiri" trigger)
   IMI-native replacement for the page's former raw Tailwind utility markup
   (DS-113, education-and-credentials 2740) — values matched 1:1 against the
   compiled Tailwind rules so the modal is pixel-identical with Tailwind gone.
   app.js toggles: .active on #drTahiriPopup, .hidden on thumbnail/play
   button/iframe/video — both class names are plain (non-utility) here.
   ========================================================================== */
.imi-popup-video {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  opacity: 0;
  transition: opacity .3s cubic-bezier(.4, 0, .2, 1);
}
.imi-popup-video.active {
  display: block;
  opacity: 1;
}
.imi-popup-video .hidden {
  display: none;
}
.imi-popup-video__overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, .5);
}
.imi-popup-video__inner {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 1rem;
}
.imi-popup-video__panel {
  background-color: #fff;
  border-radius: 1rem;
  width: 100%;
  max-width: 416px;
  height: 85vh;
  position: relative;
  display: flex;
  flex-direction: column;
  animation: imiPopupSlideIn .3s ease-out;
}
@keyframes imiPopupSlideIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.imi-popup-video__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background-color: #e5e7eb;
  border: 0;
  cursor: pointer;
  transition: background-color .15s cubic-bezier(.4, 0, .2, 1);
  z-index: 10;
}
.imi-popup-video__close:hover {
  background-color: #d1d5db;
}
.imi-popup-video__close-icon {
  width: 1.25rem;
  height: 1.25rem;
}
.imi-popup-video__body {
  padding: .25rem;
  flex: 1 1 0%;
  display: flex;
  flex-direction: column;
}
.imi-popup-video__frame {
  width: 100%;
  height: 100%;
  background-color: #e5e7eb;
  border-radius: .5rem;
  position: relative;
  overflow: hidden;
}
.imi-popup-video__thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
}
.imi-popup-video__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.imi-popup-video__play-circle {
  width: 4rem;
  height: 4rem;
  background-color: hsla(0, 0%, 100%, .9);
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color .15s cubic-bezier(.4, 0, .2, 1);
}
.imi-popup-video__play-circle:hover {
  background-color: #fff;
}
.imi-popup-video__play-icon {
  width: 2rem;
  height: 2rem;
  color: #1f7a8c;
  margin-left: .25rem;
}
.imi-popup-video__media {
  width: 100%;
  height: 100%;
  border-radius: .5rem;
  object-fit: cover;
}

/* ---- HERO ---- */
.imi-chero {
  position: relative;
  background: var(--navy-900);
  overflow: hidden;
  padding: 64px 0 0;
}
.imi-chero__wash {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg,
    rgba(14, 37, 64, 0.94) 0%,
    rgba(14, 37, 64, 0.82) 38%,
    rgba(14, 37, 64, 0.58) 68%,
    rgba(26, 104, 120, 0.42) 100%);
}
.imi-chero__grid {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 72px;
  align-items: start;
  padding-bottom: 96px;
}

.imi-chero__backdrop {
  position: absolute; inset: 0;
  background-position: center 62%;
  background-size: cover;
  background-repeat: no-repeat;
}
.imi-chero__grain {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.28;
  background-size: 160px 160px;
  mix-blend-mode: overlay;
}

.imi-chero__copy { padding-top: 44px; max-width: 560px; }
.imi-chero__kicker {
  display: inline-block;
  font-family: var(--font-ui); font-size: 13px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--sky-300);
  margin: 0 0 20px;
}
.imi-chero__title {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(38px, 4.4vw, 58px); line-height: 1.06;
  letter-spacing: -0.02em; color: var(--paper); margin: 0 0 22px;
}
.imi-chero__title em { font-style: italic; font-weight: 500; color: var(--sky-300); }
.imi-chero__dek {
  font-family: var(--font-body); font-size: 18px; line-height: 1.6;
  color: rgba(234, 242, 247, 0.86); margin: 0 0 36px; max-width: 46ch;
}
.imi-chero__actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 52px; }

.imi-chero__quote {
  border-left: 2px solid var(--teal-500);
  padding-left: 22px;
  max-width: 460px;
}
.imi-chero__quote-stars { display: flex; gap: 3px; margin-bottom: 12px; color: var(--sky-300); }
.imi-chero__quote-stars svg { width: 15px; height: 15px; }
.imi-chero__quote-text {
  font-family: var(--font-body); font-style: italic; font-weight: 400;
  font-size: 17px; line-height: 1.6; color: var(--paper); margin: 0 0 14px;
}
.imi-chero__quote-attr {
  font-family: var(--font-ui); font-size: 13px; font-weight: 600;
  color: var(--sky-300);
}
.imi-chero__quote-attr span {
  display: block; font-weight: 400; text-transform: none;
  letter-spacing: 0; color: rgba(234, 242, 247, 0.65); margin-top: 2px;
}

.imi-chero__form-col { padding-top: 0; }
.imi-chero__form-card {
  background: var(--paper);
  border-radius: 20px;
  padding: 44px 40px 40px;
  box-shadow: 0 36px 80px rgba(4, 12, 24, 0.45);
  margin-top: 56px;
}
.imi-chero__form-card .imi-form__eyebrow {
  font-family: var(--font-ui); font-size: 13px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--teal-600);
  margin: 0 0 8px;
}
.imi-chero__form-card .imi-form__title {
  font-family: var(--font-display); font-size: 24px; font-weight: 700;
  color: var(--navy-900); margin: 0 0 8px; letter-spacing: -0.01em;
}
.imi-chero__form-card .imi-form__subtitle {
  font-family: var(--font-ui); font-size: 16px; line-height: 1.55;
  color: var(--ink-soft); margin: 0 0 24px;
}
.cr-formcard__privacy {
  font-family: var(--font-ui); font-size: 16px; line-height: 1.55; color: var(--ink-soft);
  text-align: center; margin: 16px 0 0;
}

@media (min-width: 1024px) {
  .imi-chero__form-card { margin-top: 44px; }
}

@media (max-width: 1023px) {
  .imi-chero__grid { grid-template-columns: 1fr; gap: 0; padding-left: 24px; padding-right: 24px; }
  .imi-chero { padding-top: 40px; }
  .imi-chero__copy { max-width: none; padding-top: 8px; }
  .imi-chero__dek { max-width: none; }
  .imi-chero__quote { max-width: none; }
}
@media (max-width: 640px) {
  .imi-chero__form-card { padding: 32px 24px 28px; margin-top: 40px; }
  .imi-chero__actions { flex-direction: column; }
  .imi-chero__actions .imi-btn { text-align: center; }
}
@media (max-width: 767px) {
  /* DS-120 follow-up: the stars row is a flex row, so the sitewide phone-
     centering rule's text-align:center (main [class*="imi-"]) never reaches
     it — same class of bug documented in STATE.md for .imi-mmnp__eyebrow.
     The quote text/attribution keep their left-bordered pull-quote look
     (not requested to change); only the star row centers. */
  .imi-chero__quote-stars { justify-content: center; }
}

/* ---- OFFICE / HOURS BAND ---- */
.imi-coffice {
  background: var(--paper);
  padding: 120px 48px;
}
@media (max-width: 1023px) { .imi-coffice { padding: 72px 24px; } }
.imi-coffice__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 88px;
}
@media (max-width: 900px) {
  .imi-coffice__grid { grid-template-columns: 1fr; gap: 56px; }
}

.imi-coffice__eyebrow {
  font-family: var(--font-ui); font-size: 13px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--teal-600);
  margin: 0 0 14px;
}
.imi-coffice__heading {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.25rem, 1rem + 3vw, 3.5rem); line-height: 1.15;
  color: var(--navy-900); margin: 0 0 40px;
}
.imi-coffice__heading em { font-style: italic; font-weight: 500; color: var(--teal-600); }

.imi-coffice__list { display: flex; flex-direction: column; gap: 30px; }
.imi-coffice__row { display: flex; gap: 18px; align-items: flex-start; }
.imi-coffice__icon {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  background: var(--sky-100); display: flex; align-items: center; justify-content: center;
}
.imi-coffice__row-label {
  font-family: var(--font-ui); font-size: 12px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft);
  margin: 0 0 4px;
}
.imi-coffice__row-value, .imi-coffice__row-value p {
  font-family: var(--font-body); font-size: 18px; line-height: 1.5;
  color: var(--navy-900); margin: 0;
}
.imi-coffice__row-value a { color: inherit; text-decoration: none; padding: 9px 0; margin: -9px 0; }
.imi-coffice__row-value a:hover { color: var(--teal-600); }
@media (max-width: 767px) {
  /* DS-120 follow-up: .imi-coffice__row-label / -value each carry their own
     imi- class, so the sitewide phone-centering rule (main [class*="imi-"])
     matches them directly at (0,1,1) — beats a bare one-class override, so
     qualify with the .imi-coffice parent to win at (0,2,0) (same fix as the
     "Getting Here" info blocks, applied to the right section this time:
     the Beverly Hills Location address/phone/email rows). */
  .imi-coffice .imi-coffice__row-label,
  .imi-coffice .imi-coffice__row-value { text-align: left; }
}

.imi-coffice__hours {
  border-top: 1px solid var(--rule);
}
.imi-coffice__hours-row {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 16px 0; border-bottom: 1px solid var(--rule);
  font-family: var(--font-ui); font-size: 15.5px; color: var(--navy-900);
}
.imi-coffice__hours-row span:first-child { font-weight: 600; }
.imi-coffice__hours-row span:last-child { color: var(--ink-soft); }
.imi-coffice__virtual {
  margin-top: 28px; padding: 22px 24px; border-radius: 14px;
  background: var(--paper-warm-alt); border-left: 2px solid var(--teal-600);
}
.imi-coffice__virtual strong {
  display: block; font-family: var(--font-ui); font-size: 13px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--navy-900); margin-bottom: 6px;
}
.imi-coffice__virtual p {
  font-family: var(--font-body); font-size: 16px; line-height: 1.55;
  color: var(--ink-soft); margin: 0;
}
.imi-coffice__virtual a { color: var(--teal-600); padding: 10px 2px; margin: -10px -2px; }

/* ---- GETTING HERE (map + travel info) ---- */
.imi-cmap {
  background: var(--paper-warm, #F5F1EC);
  padding: 108px 48px 0;
}
@media (max-width: 1023px) { .imi-cmap { padding: 64px 24px 0; } }

.imi-cmap__head { max-width: 640px; margin: 0 0 48px; }
.imi-cmap__eyebrow {
  font-family: var(--font-ui); font-size: 13px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--teal-600);
  margin: 0 0 14px;
}
.imi-cmap__heading {
  font-family: var(--font-display); font-weight: 700;
  /* DS-158 touch-up (2026-07-22): was clamp(28px, 2.6vw, 36px) — this
     section was built after the sitewide heading-scale fix, so it never
     inherited it. Matched to the same clamp used elsewhere (.imi-heading /
     .imi-about__heading): 48px desktop ceiling, 36px mobile floor. */
  font-size: clamp(36px, 4vw, 48px); line-height: 1.15;
  color: var(--navy-900); margin: 0;
}
.imi-cmap__heading em { font-style: italic; font-weight: 500; color: var(--teal-600); }

.imi-cmap__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 56px;
  align-items: start;
}
@media (max-width: 900px) {
  .imi-cmap__grid { grid-template-columns: 1fr; gap: 40px; }
}

.imi-cmap__frame {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 24px 56px rgba(14, 37, 64, 0.14);
  background: var(--paper);
}
.imi-cmap__frame iframe { display: block; width: 100%; aspect-ratio: 600 / 450; height: auto; border: 0; }
.imi-cmap__frame-link {
  display: block; padding: 16px 22px;
  font-family: var(--font-ui); font-size: 13.5px; font-weight: 600;
  color: var(--teal-600); text-decoration: none;
  border-top: 1px solid var(--rule);
}
.imi-cmap__frame-link:hover { color: var(--navy-900); }

/* Reused inside .imi-cmap__ctabar (dark navy bar) — the default teal-on-white
   styling above is unreadable there, so this context gets its own colors. */
.imi-cmap__ctabar .imi-cmap__frame-link {
  display: inline-block;
  /* DS-158 touch-up: padding 0->10px 0 for a 44px tap target (was ~33px).
     font-size/color/hover untouched per Rox — still exactly 20px white,
     teal-600 on hover. */
  padding: 10px 0;
  font-size: 20px;
  color: var(--paper);
  border-top: none;
}
.imi-cmap__ctabar .imi-cmap__frame-link:hover { color: var(--teal-600); }

.imi-cmap__info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px 24px;
}
@media (max-width: 520px) { .imi-cmap__info-grid { grid-template-columns: 1fr; } }
.imi-cmap__info h4 {
  font-family: var(--font-ui); font-size: 12px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--teal-600);
  margin: 0 0 8px;
}
.imi-cmap__info p {
  font-family: var(--font-body); font-size: 16px; /* DS-158 touch-up: was 15.5px */
  line-height: 1.55;
  color: var(--ink-soft); margin: 0; font-style: italic;
}
/* DS-158 touch-up: Rodeo Drive / Cedars-Sinai links inside the "Nearby"
   .imi-cmap__info p — only that paragraph has <a> children, so this is a
   safe, precise selector. inline-block + padding grows the tap area
   without a display change; color/underline untouched (both already
   match computed default exactly — inherited ink-soft, browser-default
   underline — nothing to override). */
.imi-cmap__info p a {
  display: inline-block;
  padding: 12px 4px;
}

.imi-cmap__ctabar {
  margin-top: 88px;
  background: var(--navy-900);
  border-radius: 20px 20px 0 0;
  padding: 44px 48px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 32px; flex-wrap: wrap;
}
.imi-cmap__ctabar-copy { max-width: 56ch; }
.imi-cmap__ctabar-heading {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(20px, 2.2vw, 26px); line-height: 1.2;
  letter-spacing: -0.01em; color: var(--paper); margin: 0 0 8px;
}
.imi-cmap__ctabar p {
  font-family: var(--font-body); font-size: 16.5px; line-height: 1.55;
  color: rgba(234, 242, 247, 0.86); margin: 0;
}
@media (max-width: 640px) {
  .imi-cmap__ctabar { padding: 32px 24px; border-radius: 16px 16px 0 0; justify-content: center; }
  .imi-cmap__ctabar p { font-size: 16px; }
}

/* ---- MEET DR. TAHIRI ---- */
.imi-cmeet {
  background: var(--paper);
  padding: 96px 48px;
}
@media (max-width: 1023px) { .imi-cmeet { padding: 64px 24px; } }
.imi-cmeet__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr);
  gap: 64px;
  align-items: center;
  max-width: 1080px;
  margin: 0 auto;
}
@media (max-width: 900px) {
  .imi-cmeet__grid { grid-template-columns: 1fr; gap: 32px; text-align: center; }
  .imi-cmeet__photo { max-width: 320px; margin: 0 auto; }
}
.imi-cmeet__photo img {
  display: block; width: 100%; height: auto; border-radius: 16px;
  box-shadow: 0 24px 56px rgba(14, 37, 64, 0.16);
}
.imi-cmeet__eyebrow {
  font-family: var(--font-ui); font-size: 13px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--teal-600);
  margin: 0 0 14px;
}
.imi-cmeet__heading {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.25rem, 1rem + 3vw, 3.5rem); line-height: 1.15;
  color: var(--navy-900); margin: 0 0 18px;
}
.imi-cmeet__heading em { font-style: italic; font-weight: 500; color: var(--teal-600); }
.imi-cmeet__body {
  font-family: var(--font-body); font-size: 17px; line-height: 1.65;
  color: var(--ink-soft); margin: 0 0 24px; max-width: 54ch;
}
@media (max-width: 900px) { .imi-cmeet__body { margin-left: auto; margin-right: auto; } }

.imi-cmeet__stats { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 32px; }
@media (max-width: 900px) { .imi-cmeet__stats { justify-content: center; } }
.imi-cmeet__stat {
  display: inline-flex; align-items: center;
  font-family: var(--font-ui); font-size: 12.5px; font-weight: 600;
  letter-spacing: 0.02em; color: var(--navy-900); background: var(--sky-100);
  border: 1px solid var(--rule); border-radius: 999px; padding: 8px 16px;
}

/* ===========================================================
   BEFORE/AFTER GALLERY — LIGHTBOX (DS-122)
   IMI port of the shared before/after gallery lightbox — used on the
   Home page (blocks/gallery.php) and all 10 gallery_index singles
   (templates/single-gallery-new.php). 1:1 port of the prior raw-Tailwind
   markup + the JS-generated lightbox HTML in app.js (updateLightboxImage /
   updateThumbnails). Values matched to the compiled Tailwind utilities
   they replace (fixed inset-0 / bg-black bg-opacity-90 / max-w-4xl /
   rounded-lg / ring-2 ring-orange, etc.) — ring-orange resolves to
   teal-600 (#1F7A8C) in this site's Tailwind config, not literal orange.
   =========================================================== */
.imi-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.9);
}
.imi-lightbox.is-open { display: block; }
body.imi-lightbox-lock { overflow: hidden; }

.imi-lightbox__overlay {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding-left: 3rem;
  padding-right: 3rem;
}
@media (min-width: 768px) {
  .imi-lightbox__overlay { padding-left: 5rem; padding-right: 5rem; }
}

.imi-lightbox__container {
  position: relative;
  max-width: 56rem;
  width: 100%;
}

.imi-lightbox__close {
  position: absolute;
  top: -60px;
  right: -2rem;
  padding: 0 !important;
  background: transparent !important;
  border: 0;
  line-height: 0;
}
@media (min-width: 768px) { .imi-lightbox__close { top: -33px; } }
@media (min-width: 1280px) { .imi-lightbox__close { right: -130px; } }
.imi-lightbox__close svg { width: 2.5rem; height: 2.5rem; }

.imi-lightbox__nav {
  position: absolute;
  top: 22%;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 9999px !important;
  background: var(--teal-600) !important;
}
@media (min-width: 768px) {
  .imi-lightbox__nav {
    top: 50%;
    transform: translateY(-50%);
    width: 2.75rem;
    height: 2.75rem;
  }
}
.imi-lightbox__nav--prev { left: -2.5rem; }
.imi-lightbox__nav--next { right: -2.5rem; }
@media (min-width: 768px) {
  .imi-lightbox__nav--prev { left: -3rem; }
  .imi-lightbox__nav--next { right: -3rem; }
}
@media (min-width: 1280px) {
  .imi-lightbox__nav--prev { left: -130px; }
  .imi-lightbox__nav--next { right: -130px; }
}

.imi-lightbox__content {
  display: flex;
  justify-content: center;
}
.imi-lightbox__thumbnails {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1rem;
  overflow-x: auto;
}

/* JS-generated (app.js updateLightboxImage / updateThumbnails) */
.imi-lightbox__image-wrap { position: relative; }
.imi-lightbox__image {
  max-width: 100%;
  max-height: 70vh;
  object-fit: contain;
  border-radius: 0.5rem;
}
.imi-lightbox__caption { color: #fff; text-align: center; margin-top: 1rem; }

.imi-lightbox__thumb {
  cursor: pointer;
  opacity: 0.6;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.imi-lightbox__thumb:hover { opacity: 1; }
.imi-lightbox__thumb.is-active {
  opacity: 1;
  box-shadow: 0 0 0 2px var(--teal-600);
}
.imi-lightbox__thumb img {
  width: 4rem;
  height: 4rem;
  object-fit: cover;
  border-radius: 0.25rem;
}