/* Miami Ink Tattoo Designs - 2026 homepage
 * Scoped entirely under #mi-home. Do not move these rules into the theme
 * stylesheet and do not widen the scope - it is what keeps Divi's and the
 * theme's defaults out of the design.
 * Source: design_handoff_miami_ink_homepage/divi-module-A-head.html
 */

#mi-home { margin: 0; }
#mi-home, #mi-home * { box-sizing: border-box; }
#mi-home a { color: #cf2027; text-decoration: none; }
#mi-home ::selection { background: #cf2027; color: #fff; }
#mi-home h1, #mi-home h2, #mi-home h3, #mi-home h4, #mi-home p, #mi-home figure, #mi-home blockquote { margin: 0; }
#mi-home img { max-width: 100%; }
#mi-home table { border-collapse: collapse; }
@keyframes v3rise { from { transform: translateY(112%) } to { transform: translateY(0) } }
@keyframes v3fade { from { opacity: 0; transform: translateY(22px) } to { opacity: 1; transform: translateY(0) } }
@keyframes v3wipe { from { transform: scaleX(0) } to { transform: scaleX(1) } }
@keyframes v3marquee { from { transform: translateX(0) } to { transform: translateX(-50%) } }
#mi-home .v3rail { scrollbar-width: none; -ms-overflow-style: none; }
#mi-home .v3rail::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion: reduce) { #mi-home *, #mi-home *::before, #mi-home *::after { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; } }
#mi-home .mih1:hover { color: #cf2027 !important; }
#mi-home .mih2:hover { background: #f0eee9 !important; color: #0c0d10 !important; }
#mi-home .mih3:hover { background: #0c0d10 !important; }
#mi-home .mih4:hover { background: #0c0d10 !important; color: #f0eee9 !important; }
#mi-home .mih5:hover { border-color: #cf2027 !important; transform: translateY(-5px) !important; }
#mi-home .mih6:hover { background: #f0eee9 !important; color: #0c0d10 !important; border-color: #f0eee9 !important; }


/* ---------------------------------------------------------------------------
   Additions beyond the original design CSS - layout + accessibility fixes.
   --------------------------------------------------------------------------- */

/* LAYOUT-1  Testimonial: reserve room so the quote never runs under the
   decorative disc. Measured 234px of collision between ~1024-1200px, which
   read as the quote being clipped mid-word. */
#mi-home .mi-quote { padding-right: min(42%, 470px); }
@media (max-width: 900px) {
  #mi-home .mi-quote { padding-right: 0; }
  #mi-home .mi-quote-deco { display: none !important; }
}

/* CONTRAST-1  Re-assert inheritance so the parent theme cannot recolour text.
   ------------------------------------------------------------------------
   The design sets colour once per <section> and lets everything inside
   inherit it. That is fine in isolation, but an INHERITED value loses to ANY
   declared value on the element - specificity is irrelevant. So Divi's global
   `h1..h6 { color: #333 }` and `p, li { color: #666 }` silently repainted every
   heading and paragraph that had no inline colour of its own.

   On the ink ground that measured:
       #333 on #0c0d10 = 1.54:1     (needs 3:1 for large/bold)
       #666 on #0c0d10 = 3.38:1     (needs 4.5:1 for body)
   i.e. dark grey on near-black - the reported 1.4-1.8:1 range.

   `#mi-home <el>` is specificity 1,0,1, which outranks Divi's `.et_pb_text h2`
   (0,1,1), so this restores inheritance from the section and the design's own
   light-on-dark / dark-on-light scheme takes effect again.

   <a> is deliberately excluded: the design already declares
   `#mi-home a { color: #cf2027 }`, which is explicit and already beats Divi.
   Anything carrying an inline colour is unaffected - inline always wins. */
#mi-home h1, #mi-home h2, #mi-home h3, #mi-home h4, #mi-home h5, #mi-home h6,
#mi-home p, #mi-home li, #mi-home dt, #mi-home dd, #mi-home td, #mi-home th,
#mi-home blockquote, #mi-home figcaption, #mi-home span, #mi-home div,
#mi-home strong, #mi-home em, #mi-home b, #mi-home i, #mi-home small,
#mi-home button, #mi-home label {
  color: inherit;
}

/* POLISH-3  FAQ icon: one 16px SVG in both states. The horizontal bar is always
   drawn; the vertical bar is hidden when the row is open, so plus becomes minus
   with identical size, position and stroke weight. */
#mi-home .mi-faq-sign { display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; flex: none; color: #cf2027; }
#mi-home .mi-faq-ico { display: block; width: 16px; height: 16px; }
#mi-home .mi-faq-ico .mi-faq-v { transition: opacity .18s ease, transform .18s ease; transform-origin: 50% 50%; }
#mi-home .mi-faq-q[aria-expanded="true"] .mi-faq-v { opacity: 0; transform: scaleY(.2); }

/* POLISH-7  Feature grid icons */
#mi-home .mi-ico-wrap { display: block; margin-bottom: 20px; color: #cf2027; line-height: 0; }
#mi-home .mi-ico { display: block; width: 26px; height: 26px; }

/* POLISH-5  "At a glance": same table markup, lighter presentation.
   The 7 stacked full-width rows become a responsive card grid. Roles are set in
   the markup because display:grid removes the implicit table semantics. */
#mi-home .mi-facts { min-width: 0 !important; border-collapse: separate !important; }
#mi-home .mi-facts tbody {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1px; background: rgba(12,13,16,.22); border: 1px solid rgba(12,13,16,.22);
}
#mi-home .mi-facts tr {
  display: flex; flex-direction: column; gap: 7px;
  background: #f0eee9; padding: 17px 19px;
}
#mi-home .mi-facts th, #mi-home .mi-facts td {
  border: 0 !important; padding: 0 !important; width: auto !important;
}
#mi-home .mi-facts th {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(12,13,16,.66); font-weight: 500;
}
#mi-home .mi-facts td { font-size: 14.5px; line-height: 1.5; }
/* the wrapper only existed to allow horizontal scroll on the old wide table */
#mi-home #quick-answers div[style*="overflow-x"] { overflow-x: visible !important; }

/* POLISH-4  The new CTA label is much shorter - trim padding so the pill does
   not look oversized for the copy. */
#mi-home a.mih2[href="#pricing"] { padding-left: 26px !important; padding-right: 26px !important; }

/* POLISH-6  Count-up: reserve width so the row does not reflow while counting */
#mi-home [data-countup] { font-variant-numeric: tabular-nums; }


/* FIX-8  "At a glance". The orphaned grey cell was the tbody's hairline
   background showing through an empty grid track (7 items never divide evenly
   into a 4-wide grid). Dropping the shared background means an empty track is
   simply invisible - the orphan cannot occur at any column count.
   Also lightens the section: bordered data cells become an icon-led strip with
   a red rule, so it no longer reads as a second boxed data block straight after
   the hero stat bar. */
#mi-home .mi-facts-7 tbody {
  background: none !important; border: 0 !important;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px 34px;
}
#mi-home .mi-facts-7 tr {
  background: none !important; border: 0 !important;
  border-left: 2px solid #cf2027 !important;
  padding: 2px 0 2px 16px !important; gap: 5px;
}

/* FIX-9  Icon crispness. These were already vector SVG, but rendered at 26px
   with a 1.5 stroke on a 24 grid the strokes land on half-pixels and read soft.
   Larger box + geometricPrecision keeps the edges clean. */
#mi-home .mi-ico { width: 32px; height: 32px; shape-rendering: geometricPrecision; }
#mi-home .mi-ico-wrap { margin-bottom: 18px; }

/* FIX-10  Testimonial portrait - complements the quote, does not dominate it. */
#mi-home .mi-quote-portrait {
  width: clamp(76px, 8vw, 116px); height: clamp(76px, 8vw, 116px);
  border-radius: 50%; object-fit: cover; display: block;
  margin: 0 0 22px; border: 1px solid rgba(12,13,16,.22);
}

/* FIX-14  FAQ: consistent rhythm regardless of open/closed, plus a card ground
   so the list is contained rather than floating on the section background. */
#mi-home .mi-faq-q { padding: 20px 22px !important; }
#mi-home .mi-faq-q + div,
#mi-home [id^="mi-faq-p"] { padding: 0 22px 20px !important; }
#mi-home [id^="mi-faq-p"] > * { margin-top: 0 !important; }
#mi-home .mi-faq-q { border-radius: 0; }

/* FIX-11  Checkout buttons: real presence. Colour transition plus a small lift,
   under 200ms, no bounce. The monthly plan is deliberately heavier than the
   30-day one since it is the favoured plan. */
#mi-home .mih2, #mi-home .mih3 {
  transition: background-color .18s ease, color .18s ease,
              border-color .18s ease, transform .16s ease, box-shadow .18s ease;
  will-change: transform;
}
#mi-home .mih2:hover, #mi-home .mih3:hover { transform: translateY(-2px); }
#mi-home .mi-cta-lock { flex: none; margin-right: 10px; vertical-align: -2px; }

/* FIX-13  Trust-row icons share the feature-grid icon language */
#mi-home .mi-trust-ico { width: 28px; height: 28px; color: #cf2027; display: block;
  margin-bottom: 16px; shape-rendering: geometricPrecision; }

/* FIX-2  ClickBank trust badge. It is injected at runtime by
   //cbtb.clickbank.net (type "tab", position "bottom-left") as a 190x50
   position:fixed tab at z-index 2147483646, so it sits over whatever is at the
   viewport's bottom-left - here, the hero headline. It is not in this page's
   markup, so it can only be moved from outside. Sent to the right instead,
   clear of the left-aligned headline at every breakpoint. */
.cbtb .trust-badge.tab.bottom-left {
  left: auto !important; right: 14px !important;
}
@media (max-width: 600px) {
  .cbtb .trust-badge.tab.bottom-left { right: 8px !important; transform: scale(.86); transform-origin: bottom right; }
}

/* FIX-6  Video facade: poster + play affordance, sized like the iframe it replaced */
#mi-home .mi-video-facade {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border: 0; padding: 0; margin: 0; cursor: pointer; display: block;
  background-color: #0c0d10; background-size: cover; background-position: center;
  transition: filter .2s ease;
}
#mi-home .mi-video-facade:hover { filter: brightness(1.08); }
#mi-home .mi-video-facade .mi-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 78px; height: 78px; display: flex; align-items: center; justify-content: center;
  background: #cf2027; color: #fff; transition: transform .16s ease, background-color .18s ease;
}
#mi-home .mi-video-facade:hover .mi-play { transform: translate(-50%, -50%) scale(1.06); }

/* FIX-7  Carousel: the duplicated half must not be announced or reachable */
#mi-home .v3rail > [aria-hidden="true"] { pointer-events: auto; }
#mi-home .v3rail { scroll-behavior: auto; }

/* FIX-5  "Why it's hard": image left, copy middle, numbered list right.
   Collapses to image + stacked copy at tablet, single column on mobile. */
#mi-home .mi-why-grid {
  grid-template-columns: minmax(0, .8fr) minmax(0, 1fr) minmax(0, 1.1fr) !important;
  align-items: start;
}
#mi-home .mi-why-media img {
  display: block; width: 100%; height: auto; aspect-ratio: 1 / 1;
  object-fit: cover; background: #0c0d10;
}
@media (max-width: 1100px) {
  #mi-home .mi-why-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr) !important; }
  #mi-home .mi-why-media { grid-row: span 2; }
}
@media (max-width: 720px) {
  #mi-home .mi-why-grid { grid-template-columns: 1fr !important; }
  #mi-home .mi-why-media { grid-row: auto; }
  #mi-home .mi-why-media img { aspect-ratio: 16 / 10; }
}

/* FIX-12  Guarantee and legal disclosure are now separate blocks, divided. */
#mi-home .mi-guarantee {
  margin-top: 18px; border: 1px solid rgba(240,238,233,.22);
  padding: 26px 28px; display: block;
}
#mi-home .mi-guarantee-main {
  display: flex; align-items: flex-start; gap: 15px;
  font-size: 15px; line-height: 1.55; color: rgba(240,238,233,.92);
  margin: 0;
}
#mi-home .mi-guarantee-main .mi-trust-ico { color: #d99a2b; flex: none; margin: 0; }
#mi-home .mi-guarantee-legal {
  margin: 20px 0 0; padding-top: 18px;
  border-top: 1px solid rgba(240,238,233,.18);      /* visible divider */
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10px; line-height: 1.75; letter-spacing: .06em;
  color: rgba(240,238,233,.72); max-width: 78ch;
}

/* FIX-13  Trust-row icons inherit the feature-grid icon language */
#mi-home .mi-trust-ico { width: 32px; height: 32px; }

/* FIX-15  Footer: brand | links | legal */
/* Matches the mockup exactly: four auto-fit columns at a 215px min track. */
#mi-home .mi-foot-grid {
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)) !important;
  gap: 30px !important; align-items: start;
}

/* R4-9 / R4-12  Generated icon artwork. Raster with alpha, so unlike the
   previous inline SVGs these cannot inherit currentColor - the crimson is baked
   in, which is why the white ground was keyed out: the same file has to read on
   the bone card and on the ink ground it inverts to on hover. */
#mi-home img.mi-ico {
  width: 46px; height: 46px; display: block; object-fit: contain;
  transition: transform .22s cubic-bezier(.2,.7,.3,1);
}
#mi-home img.mi-trust-ico {
  width: 42px; height: 42px; display: block; object-fit: contain;
  margin-bottom: 16px;
}
#mi-home .mi-guarantee-main img.mi-trust-ico { margin: 0; flex: none; width: 38px; height: 38px; }

/* per-card icon micro-animation + card lift on hover */
#mi-home .mih4 { transition: background-color .2s ease, color .2s ease, transform .2s cubic-bezier(.2,.7,.3,1); }
#mi-home .mih4:hover { transform: translateY(-3px); }
#mi-home .mih4:hover img.mi-ico { transform: scale(1.12) rotate(-4deg); }

/* staggered entrance for the feature cards and trust cells */
#mi-home .mi-reveal { opacity: 0; transform: translateY(18px); }
#mi-home .mi-reveal.mi-in {
  opacity: 1; transform: none;
  transition: opacity .55s ease, transform .55s cubic-bezier(.2,.7,.3,1);
}
@media (prefers-reduced-motion: reduce) {
  #mi-home .mi-reveal { opacity: 1 !important; transform: none !important; }
  #mi-home .mih4:hover { transform: none; }
  #mi-home .mih4:hover img.mi-ico { transform: none; }
}

/* Hero art layer. Mirrors the mockup's own decorative slot - same box, same
   left-fade mask - so the full-width headline reads across it. Opacity is
   higher than the mockup's .14 because this is a photograph rather than a flat
   flash-sheet texture, but the mask still drops it to nothing under the type. */
#mi-home .mi-hero-art {
  position: absolute; top: 0; right: -6%; bottom: 0;
  width: min(46%, 620px); z-index: 0; pointer-events: none;
  /* The mockup runs this layer at .14 so the right side stays compositionally
     quiet under the headline. A photograph carries far more visual weight than
     the flat flash-sheet texture it replaces, so it is held well down and the
     mask is pulled further right - present, but behind the type rather than
     competing with it. */
  opacity: .2;
  background-size: cover; background-position: center right; background-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(to left, #000 62%, transparent 100%);
  mask-image: linear-gradient(to left, #000 62%, transparent 100%);
  filter: saturate(.82) contrast(1.06) sepia(.14) hue-rotate(-8deg);
}
@media (max-width: 900px) {
  /* on a phone the type needs the whole width - drop the art right back */
  #mi-home .mi-hero-art { opacity: .16; width: min(70%, 420px); }
}

/* R4-4 / R4-8  Stacked CTA: label over price, button shrinks to its content */
/* The design's hero button is a single horizontal bar: label left, price and
   arrow right. The stacked/centred version from an earlier round rendered as a
   tall red square once the lede column narrowed, because the flex column had
   nothing to constrain its height. */
#mi-home .mi-cta-stack {
  display: inline-flex !important; flex-direction: row !important;
  align-items: center !important; justify-content: space-between !important;
  gap: 26px; width: auto !important; max-width: max-content !important;
  align-self: flex-start; text-align: left;
  padding: 17px 26px !important;
}
#mi-home .mi-cta-stack .mi-cta-sub {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 12.5px; font-weight: 500; letter-spacing: .06em;
  text-transform: uppercase; opacity: .82; white-space: nowrap;
}
#mi-home .mi-cta-stack .mi-cta-main { font-weight: 700; }

/* R4-11  Lock icon sits inline before the checkout label */
#mi-home .mi-cta-lock { flex: none; margin-right: 9px; vertical-align: -2px; }
#mi-home a:has(> .mi-cta-lock) { display: inline-flex; align-items: center; justify-content: center; }

/* R4-5  "At a glance" as icon-led cards. No rules, no table appearance. */
/* Fixed 4-up (the 2x4 asked for), not auto-fit. auto-fit resolved to FIVE
   243px columns at desktop, which both broke the 2x4 and made the cards very
   tall: grid stretches every card in a row to the tallest, so one long value
   pushed the whole first row to 388px against 193px in the second. Four wider
   columns wrap the long values in fewer lines and even the rows out. */
#mi-home .mi-facts-cards tbody {
  display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 16px !important; background: none !important; border: 0 !important;
  align-items: stretch;
}
@media (max-width: 1180px) {
  #mi-home .mi-facts-cards tbody { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 860px) {
  #mi-home .mi-facts-cards tbody { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 520px) {
  #mi-home .mi-facts-cards tbody { grid-template-columns: 1fr !important; }
}
#mi-home .mi-facts-cards tr {
  display: block !important; background: rgba(12,13,16,.03) !important;
  border: 1px solid rgba(12,13,16,.12) !important; border-left: 0 !important;
  border-radius: 0; padding: 20px 20px 22px !important;
  box-shadow: 0 1px 2px rgba(12,13,16,.04);
  transition: transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s ease;
}
#mi-home .mi-facts-cards tr:hover {
  transform: translateY(-3px); box-shadow: 0 6px 18px rgba(12,13,16,.09);
}
#mi-home .mi-fact-ico { width: 34px; height: 34px; display: block; margin-bottom: 14px; object-fit: contain; }
#mi-home .mi-facts-cards th {
  display: block !important; font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10px !important; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(12,13,16,.6) !important; font-weight: 500 !important; margin-bottom: 7px;
}
#mi-home .mi-facts-cards td { display: block !important; font-size: 14px; line-height: 1.5; }

/* R4-6  Oversized step numerals */
#mi-home .mi-num {
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(56px, 6.4vw, 92px) !important; line-height: .82;
  color: rgba(240,238,233,.14) !important; letter-spacing: -.04em;
  flex: none; min-width: 1.6em; padding-top: 0 !important;
  user-select: none;
}
#mi-home .mi-step { align-items: flex-start; }

/* R4-7  Shared art direction: a light grade toward the ink/crimson palette
   plus a consistent thin accent frame. Deliberately not a full duotone. */
#mi-home .mi-graded { position: relative; }
#mi-home .mi-graded img, #mi-home .mi-graded-img {
  filter: saturate(.82) contrast(1.06) sepia(.14) hue-rotate(-8deg) brightness(.98);
}
#mi-home .mi-graded::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(150deg, rgba(207,32,39,.12), rgba(12,13,16,.28));
  mix-blend-mode: multiply;
}
#mi-home .mi-graded { border: 1px solid rgba(12,13,16,.22); }
#mi-home .mi-quote-portrait.mi-graded-img { border: 2px solid rgba(207,32,39,.5); }

/* R4-13  FAQ two columns, aligned with the section heading */
#mi-home .mi-faq-cols {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 44px; align-items: start;
}
#mi-home .mi-faq-wrap { max-width: 1280px !important; }
@media (max-width: 820px) {
  #mi-home .mi-faq-cols { grid-template-columns: 1fr; gap: 0; }
}

/* R4-10  Testimonial carousel: current slide full width, next peeking */
#mi-home .mi-tcar { position: relative; overflow: hidden; }
#mi-home .mi-tcar-track {
  display: flex; gap: 34px; transition: transform .55s cubic-bezier(.2,.7,.3,1);
  will-change: transform;
}
#mi-home .mi-tcar-slide { flex: 0 0 72%; min-width: 0; }
#mi-home .mi-tcar-slide[aria-hidden="true"] { opacity: .45; }
#mi-home .mi-tcar::after {
  content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 22%;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(240,238,233,0), rgba(240,238,233,.92));
}
#mi-home .mi-tcar-btns { display: flex; gap: 10px; margin-top: 26px; position: relative; z-index: 2; }
#mi-home .mi-tcar-btn {
  width: 44px; height: 44px; border: 1px solid rgba(12,13,16,.28); background: none;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  color: #0c0d10; transition: background-color .18s ease, color .18s ease, transform .16s ease;
}
#mi-home .mi-tcar-btn:hover { background: #cf2027; color: #fff; border-color: #cf2027; transform: translateY(-2px); }
@media (max-width: 720px) {
  #mi-home .mi-tcar-slide { flex: 0 0 86%; }
  #mi-home .mi-tcar::after { width: 12%; }
}

/* HERO v2  lower row: lede + CTA left, video right */
#mi-home .mi-hero-split {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr) !important;
  gap: 34px 54px !important; align-items: center !important;
}
#mi-home .mi-hero-lede { min-width: 0; display: flex; flex-direction: column; gap: 26px; }
#mi-home .mi-hero-lede > p { max-width: 46ch !important; }
#mi-home .mi-hero-video { min-width: 0; }
#mi-home .mi-hero-video figure { margin: 0; }
/* the frame was built for the ink section; on the bone hero the hairline and
   inner ground need to invert or it disappears */
#mi-home .mi-hero-video figure > div:nth-of-type(3) {
  border-color: rgba(12,13,16,.22) !important;
  background: rgba(12,13,16,.04) !important;
}
#mi-home .mi-hero-vidcap {
  margin: 14px 0 0 !important;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(12,13,16,.62);
}
/* the transcript line moved with the video onto a light ground */
#mi-home .mi-hero-video p[style*="rgba(240,238,233"] { color: rgba(12,13,16,.66) !important; }
#mi-home .mi-hero-video a[href*="transcript"] { color: #cf2027 !important; }
/* with the video occupying the right, the photographic art layer would sit
   behind it and muddy the frame - hold it to the headline band only */
#mi-home .mi-hero-art { bottom: auto; height: 58%; opacity: .16; }

@media (max-width: 900px) {
  #mi-home .mi-hero-split { grid-template-columns: 1fr !important; gap: 30px !important; }
  #mi-home .mi-hero-lede { order: 1; }
  #mi-home .mi-hero-video { order: 2; }
  #mi-home .mi-hero-art { height: 42%; opacity: .12; }
}

/* A11Y  Visible keyboard focus. The design defined no focus styling, and Divi
   suppresses the UA default, which leaves keyboard users with no indication of
   position. :focus-visible keeps it off for mouse clicks. Two-tone ring so it
   is visible on both the bone and ink grounds. */
#mi-home a:focus-visible,
#mi-home button:focus-visible,
#mi-home iframe:focus-visible,
#mi-home [tabindex]:focus-visible {
  outline: 3px solid #cf2027;
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(240,238,233,.85);
  border-radius: 1px;
}
/* on the dark bands invert the halo so the ring stays visible */
#mi-home .v3rail a:focus-visible,
#mi-home footer a:focus-visible {
  box-shadow: 0 0 0 6px rgba(12,13,16,.9);
}