.miro-case{background:var(--color-theme-bg);color:var(--color-theme-fg)}
/* The streamed HTML arrives before the hero boundary. Keep the following
   section below the first viewport until React inserts the existing hero. */
main:not(:has([data-page-builder-section="heroSection"]))::before{
  content:"";
  display:block;
  height:calc(100svh - var(--site-header-height));
}
.miro-case-image{position:relative;overflow:hidden;border-bottom:1px solid currentColor}
.miro-case-image img{display:block;width:100%;height:320px;object-fit:cover}
.miro-kicker{position:absolute;right:0;top:0;background:#c7ffd7;color:#131313;padding:12px 16px;font:12px var(--font-mono);text-transform:uppercase;border-bottom:1px solid;border-left:1px solid}
.miro-case-copy{display:flex;flex-direction:column;gap:28px;padding:40px 24px;min-width:0}
.miro-case-copy h2{line-height:1.03;letter-spacing:-.04em;overflow-wrap:anywhere}
.miro-case-copy h3{font-size:28px;line-height:1.1;letter-spacing:-.025em}
.miro-case-copy p,.miro-facts{line-height:1.45}
.miro-action{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid;padding:16px 0;transition:background .3s,color .3s;overflow-wrap:anywhere}
.miro-action:hover{background:#c7ffd7;color:#171717}
.miro-facts{display:grid;grid-template-columns:80px 1fr;gap:20px;border-top:1px solid;padding-top:24px}
.miro-facts dt{font:12px var(--font-mono);text-transform:uppercase;opacity:.65;padding-top:4px}
.miro-facts dd{margin:0}.miro-list{display:grid;gap:14px;list-style:square;padding-left:20px}
.miro-discipline-image img{width:100%;height:340px;object-fit:cover}
.miro-person-image{background:#d9d9d9;border-bottom:1px solid currentColor}
.miro-person-image img{display:block;width:100%;max-height:70vh;object-fit:contain}
.miro-person-skills{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0}
.miro-person-skills li{border:1px solid;padding:10px 12px;font:12px var(--font-mono);text-transform:uppercase}
.miro-copy-brief{border:1px solid currentColor;padding:16px;text-align:left;cursor:pointer}
.miro-honeypot{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important}
.miro-case-context{border-top:1px solid currentColor;margin-top:24px;padding-top:16px}
form input,form textarea,form select{border-radius:0;background:transparent}
form input:focus,form textarea:focus,form select:focus{box-shadow:0 2px #c7ffd7}
header>div:first-child>div:last-child>span{font-size:11px;letter-spacing:.02em;text-transform:uppercase}
[data-page-builder-section="heroSection"] h1{white-space:pre-line}
#clients h2{font-size:clamp(64px,11vw,200px);line-height:.94}
#team h2{font-size:clamp(60px,10vw,180px);line-height:.94}
@media(min-width:1024px){.miro-case-copy{padding:48px 32px}.miro-case-image img{height:420px}}
@media(max-width:600px){.miro-case-copy{gap:22px;padding:32px 16px}.miro-case-copy h2{font-size:48px}.miro-case-image img{height:250px}.miro-facts{grid-template-columns:1fr;gap:8px}.miro-facts dd{margin-bottom:16px}header>div:first-child>div:last-child{padding-left:10px;padding-right:10px}header>div:first-child>div:last-child>span{font-size:9px;line-height:1.2;display:block;max-width:80px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.miro-action{transition:none}}

html[lang=ru] .miro-action{white-space:normal;line-height:1.25}
html[lang=ru] [data-page-builder-section=serviceListSection] h3,html[lang=ru] [data-page-builder-section=servicesSection] h3{text-wrap:balance}
html[lang=ru] .font-mono.text-caption-10{overflow-wrap:normal;word-break:normal;hyphens:none}
@media(max-width:600px){html[lang=ru] .miro-case-copy h2{font-size:44px}}
@media(max-width:359px){[data-page-builder-section=heroSection] .inset-shadow-border-t .text-headline-50{font-size:44px}}


/* 2026-09 mobile RU typography pass: English layout is the composition reference. */
@media(max-width:430px){
  html[lang=ru] [data-page-builder-section="insightsSection"] h3{
    font-size:22px;
    line-height:1.08;
    text-wrap:balance;
  }
  html[lang=ru] [data-page-builder-section="insightsSection"] li.font-mono.text-caption-20{
    font-size:13px;
    line-height:1.22;
    align-items:flex-start;
  }
  html[lang=ru] [data-page-builder-section="insightsSection"] ul.flex.list-none.flex-col{
    gap:10px;
  }
  html[lang=ru] [data-page-builder-section="insightsSection"] li.font-mono.text-caption-20 > div{
    overflow-wrap:normal;
    word-break:normal;
    hyphens:none;
  }
  html[lang=ru] [data-page-builder-section="insightsSection"] div[data-text="true"]{
    line-height:1.35;
  }
}
@media(max-width:359px){
  html[lang=ru] [data-page-builder-section="insightsSection"] h3{font-size:21px}
  html[lang=ru] [data-page-builder-section="insightsSection"] li.font-mono.text-caption-20{font-size:12.5px;line-height:1.24}
}


/* 2026-09-22 comprehensive responsive typography/layout correction.
   The original font metrics use line-height:1 for caption lists; that is too tight
   when Cyrillic wraps. These rules cover phone, tablet and desktop, not only <=430px. */
[data-page-builder-section="insightsSection"] li.font-mono.text-caption-20{
  line-height:1.32;
}
[data-page-builder-section="insightsSection"] ul.flex.list-none.flex-col{
  row-gap:10px;
}
[data-page-builder-section="insightsSection"] h3.text-headline-10{
  line-height:1.16;
}
html[lang="ru"] [data-page-builder-section="insightsSection"] li.font-mono.text-caption-20 > div{
  overflow-wrap:normal;
  word-break:normal;
  hyphens:none;
}
html[lang="ru"] [data-page-builder-section="teamSection"] .text-headline-10,
html[lang="ru"] [data-page-builder-section="testimonialSection"] .text-body-30,
html[lang="ru"] [data-page-builder-section="statsSection"] .text-body-30{
  line-height:1.18;
}

/* 1024–1199 is tablet / small-laptop territory. The inherited lg split is too
   narrow for this content, so keep the expertise section stacked here. */
@media (min-width:1024px) and (max-width:1199px){
  [data-page-builder-section="insightsSection"] > .grid{
    grid-template-columns:minmax(0,1fr) !important;
  }
  [data-page-builder-section="insightsSection"] > .grid > :first-child{
    position:relative !important;
    top:auto !important;
    min-height:auto !important;
    padding-top:40px;
    padding-bottom:56px;
  }
  [data-page-builder-section="insightsSection"] > .grid > :first-child > h2{
    max-width:100%;
  }
  [data-page-builder-section="insightsSection"] > .grid > .divide-y > .grid{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    gap:40px !important;
  }
}

/* On true desktop keep the split composition but size the display words to the
   actual half-column width instead of letting CONNECT be clipped. */
@media (min-width:1200px){
  [data-page-builder-section="insightsSection"] > .grid > :first-child h2 .text-headline-50{
    font-size:clamp(108px,9vw,174px);
  }
}

/* Mid-width RU copy: avoid the exact 431–1023 gap that caused the screenshots. */
@media (min-width:431px) and (max-width:1023px){
  html[lang="ru"] [data-page-builder-section="insightsSection"] li.font-mono.text-caption-20{
    font-size:13px;
    line-height:1.34;
  }
  html[lang="ru"] [data-page-builder-section="insightsSection"] h3.text-headline-10{
    font-size:clamp(22px,4.2vw,30px);
    line-height:1.15;
  }
}

/* ===== Stage 2 responsive/mobile refinement — 2026-09-22 ===== */
/* Keep the generated Next snapshot intact. All responsive corrections live in this
   explicit override layer so they can later be moved back into the source project. */

/* Interactive controls: preserve the visual language while giving controls a real hit area. */
button.h-36{height:auto;min-height:44px}
header button[title="Toggle theme"],
header button[title="Переключить тему"]{min-width:44px;min-height:44px}
header button[title="Toggle theme"] svg,
header button[title="Переключить тему"] svg{pointer-events:none}
html[lang="en"] button.text-theme-bg\/65,
html[lang="ru"] button.text-theme-bg\/65{min-height:44px;display:inline-flex;align-items:center}


/* Compact header: phones/tablets show only the M logo and the Menu control. */
@media(max-width:1023px){
  header{grid-template-columns:var(--site-header-height,60px) minmax(0,1fr)!important}
  header>div:first-child{min-width:var(--site-header-height,60px)!important;border-right:1px solid currentColor!important}
  header>div:first-child>div{display:none!important}
  header>div.block.size-full.lg\:hidden{grid-column:2!important}
  header>div.block.size-full.lg\:hidden>button{padding-left:20px!important;padding-right:20px!important}
}


/* Tablet is a separate layout, not a stretched phone. */
@media(min-width:600px) and (max-width:1023px){
  /* About: remove the phone-only dramatic blank lead-in and place capability blocks in one row. */
  #about>div:first-child>div:nth-child(2){padding-top:64px!important;padding-bottom:64px!important}
  #about>div:nth-child(2)>div{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    grid-template-rows:none!important;
  }
  #about>div:nth-child(2)>div>div{
    position:relative!important;
    inset:auto!important;
    grid-column:auto!important;
    grid-row:auto!important;
    min-height:240px!important;
    margin:0!important;
    border-top:1px solid currentColor;
  }

  /* Expertise: tablet gets a readable two-column information row per capability. */
  #expertise>.grid>div:first-child{gap:40px!important;padding-top:48px!important;padding-bottom:48px!important}
  #expertise>.grid>div:first-child>div:last-child{gap:40px!important;width:min(100%,520px);margin-left:auto}
  #expertise>.grid>.divide-y>.grid{
    grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr)!important;
    gap:32px!important;
    padding:32px 20px!important;
  }
  #expertise>.grid>.divide-y>.grid>div{gap:24px!important}

  /* Team: 2×2 tablet gallery instead of four full-width portrait screens. */
  #team>div[id]{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:1px!important;
    margin-top:0!important;
    margin-bottom:0!important;
    padding-top:0!important;
    padding-bottom:0!important;
    overflow:visible!important;
  }
  #team>div[id]>div{min-width:0!important;width:auto!important;flex-basis:auto!important}

  /* Full-viewport decorative banners are excessive on tablet. */
  [data-page-builder-section="bannerSection"]{min-height:clamp(480px,70svh,720px)!important}
}

/* 768–1023 can support a real split work section without waiting for desktop. */
@media(min-width:768px) and (max-width:1023px){
  #clients>.grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important}
  #clients>.grid>div:first-child{order:1!important}
  #clients>.grid>div:nth-child(2){order:2!important}
}

/* On phone, avoid accidental one-line micro copy in the footer/action areas. */
@media(max-width:430px){
  html[lang="ru"] [data-page-builder-section] .font-mono.text-caption-10,
  html[lang="en"] [data-page-builder-section] .font-mono.text-caption-10{line-height:1.3}
}

/* Stage 2 follow-up: 1024px is still tablet/small-laptop for this content. */
header a[href*="#"]{min-height:44px;display:inline-flex;align-items:center}

@media(min-width:1024px) and (max-width:1199px){
  /* The original lg breakpoint activates cinematic desktop spacing too early. */
  #about>div:first-child{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr)!important}
  #about>div:first-child>div:nth-child(2){padding-top:64px!important;padding-bottom:72px!important}
  #about>div:nth-child(2)>div{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    grid-template-rows:none!important;
  }
  #about>div:nth-child(2)>div>div{
    position:relative!important;
    inset:auto!important;
    grid-column:auto!important;
    grid-row:auto!important;
    min-height:260px!important;
    margin:0!important;
    border-top:1px solid currentColor;
  }

  #expertise>.grid>div:first-child{gap:40px!important;padding:48px 24px!important}
  #expertise>.grid>div:first-child>div:last-child{gap:40px!important;width:min(100%,560px);margin-left:auto}
  #expertise>.grid>.divide-y>.grid{
    min-height:auto!important;
    grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr)!important;
    gap:36px!important;
    padding:36px 24px!important;
  }
  #expertise>.grid>.divide-y>.grid>div{gap:24px!important}

  /* Keep the team as a static 2×2 gallery at small-laptop width; horizontal snap starts later. */
  #team>div[id]{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:1px!important;
    margin:0!important;
    padding:0!important;
    overflow:visible!important;
  }
  #team>div[id]>div{min-width:0!important;width:auto!important;flex-basis:auto!important}

  [data-page-builder-section="bannerSection"]{min-height:clamp(560px,72svh,760px)!important}
}

/* ===== Stage 3 release-gate corrections — 2026-09-22 ===== */
/* At the 600px tablet edge the three-column capability row leaves too little
   content width for CRM at the inherited display size, creating 11px overflow. */
@media(min-width:600px) and (max-width:1023px){
  #about .text-digit-20{font-size:clamp(76px,11.5vw,100px)}
}

/* The descriptor is supporting information, but 9px is below the readable
   threshold once it becomes visible again above the phone header. */
@media(min-width:431px) and (max-width:1023px){
  header .text-caption-20{font-size:11px;line-height:1.2}
}
@media(min-width:431px) and (max-width:1023px){
  header .text-caption-20{font-size:11px!important;line-height:1.2!important}
}



/* Russian mono list items were clipping at the top on several devices.
   Give the line box more air and keep the type visually aligned with the site. */
[data-page-builder-section="insightsSection"] li.font-mono.text-caption-20{
  align-items:flex-start;
  overflow:visible;
  padding-block:0.08em;
}
[data-page-builder-section="insightsSection"] li.font-mono.text-caption-20 > div{
  line-height:1.18;
  padding-top:0.08em;
}
html[lang="ru"] [data-page-builder-section="insightsSection"] li.font-mono.text-caption-20{
  line-height:1.18;
}
html[lang="ru"] [data-page-builder-section="insightsSection"] li.font-mono.text-caption-20 > div{
  overflow:visible;
  text-wrap:pretty;
}
@media (max-width: 1023px){
  html[lang="ru"] [data-page-builder-section="insightsSection"] li.font-mono.text-caption-20{
    font-size:clamp(12.5px,2.2vw,15px);
    line-height:1.22;
  }
  html[lang="ru"] [data-page-builder-section="insightsSection"] li.font-mono.text-caption-20 > div{
    padding-top:0.1em;
  }
}

/* Footer CTA copy: make it sound warmer and more action-oriented. */
html[lang="ru"] footer .text-headline-10{line-height:1.08}



/* The Cyrillic capability list used a 14px mono face with line-height:1 and forced
   uppercase, which visually clipped ascenders and made neighbouring lines look uneven.
   Keep the list structure/bullets, but use the site's normal sans typography. */
html[lang="ru"] [data-page-builder-section="insightsSection"] li.font-mono.text-caption-20{
  font-family:var(--font-sans),Arial,sans-serif!important;
  font-size:15px!important;
  font-weight:450!important;
  line-height:1.32!important;
  letter-spacing:-.02em!important;
  text-transform:none!important;
  padding-block:3px!important;
  overflow:visible!important;
}
html[lang="ru"] [data-page-builder-section="insightsSection"] li.font-mono.text-caption-20 > div{
  line-height:inherit!important;
  padding-top:0!important;
  overflow:visible!important;
  text-wrap:pretty;
}
@media (max-width:1199px){
  html[lang="ru"] [data-page-builder-section="insightsSection"] li.font-mono.text-caption-20{
    font-size:16px!important;
    line-height:1.34!important;
  }
}


/* ===== Stabilization pass v5 — clean header/dialog behavior ===== */
/* Language switch is part of the wide desktop header. It is never fixed and
   therefore cannot appear over the loader, project content or dialogs. */
.miro-lang-switch{
  position:static!important;
  inset:auto!important;
  z-index:auto!important;
  display:flex;
  flex:0 0 auto;
  height:var(--site-header-height,60px)!important;
  border:0!important;
  border-left:1px solid currentColor!important;
  border-right:1px solid currentColor!important;
  background:var(--color-theme-bg,var(--theme-bg,#fff))!important;
  color:var(--color-theme-fg,var(--theme-fg,#111))!important;
  font:500 11px/1 Arial,sans-serif!important;
  letter-spacing:.06em!important;
}
.miro-lang-switch a{display:flex!important;align-items:center!important;justify-content:center!important;min-width:56px!important;height:100%!important;padding:0 12px!important;text-decoration:none!important}
.miro-lang-switch a+a{border-left:1px solid currentColor!important}
.miro-lang-switch a[aria-current=page]{background:var(--color-theme-fg,var(--theme-fg,#111))!important;color:var(--color-theme-bg,var(--theme-bg,#fff))!important;pointer-events:none}
@media(max-width:1199px){.miro-lang-switch{display:none!important}}
@media(min-width:1200px){
  header>div:nth-child(2)>div:first-child{padding-right:20px!important}
  header>div:nth-child(2) ul{flex-wrap:nowrap!important}
}

/* All slide-over dialogs use an internal top bar. The original close control
   has a desktop translate that moves it outside the panel; explicitly reset the
   modern `translate` property as well as `transform`, otherwise a full-width
   “Back” bar sits over the dimmed page and leaves an apparent gap below it. */
:root{--miro-modal-bar-height:60px}
[data-modal][role="dialog"]{
  background:var(--color-theme-bg,var(--theme-bg,#fff))!important;
}
[data-modal][role="dialog"]::before{display:none!important;content:none!important}
[data-modal][role="dialog"] > button[type="button"]{
  position:absolute!important;
  inset:0 0 auto 0!important;
  z-index:8!important;
  width:100%!important;min-width:0!important;
  height:var(--miro-modal-bar-height)!important;
  min-height:var(--miro-modal-bar-height)!important;
  margin:0!important;
  padding:0 20px!important;
  translate:none!important;
  transform:none!important;
  justify-content:flex-start!important;
  background:var(--color-theme-bg,var(--theme-bg,#fff))!important;
  color:var(--color-theme-fg,var(--theme-fg,#111))!important;
  border:0!important;
  border-bottom:1px solid currentColor!important;
  box-sizing:border-box!important;
}
[data-modal][role="dialog"] > button[type="button"] > *{display:none!important}
[data-modal][role="dialog"] > button[type="button"]::before{
  content:"← Back";
  display:block;
  font-family:var(--font-sans),Arial,sans-serif;
  font-size:15px;
  font-weight:450;
  line-height:1;
  letter-spacing:-.02em;
  white-space:nowrap;
}
html[lang="ru"] [data-modal][role="dialog"] > button[type="button"]::before{content:"← Назад"}
[data-modal][role="dialog"] > .custom-scrollbar{
  position:absolute!important;
  top:var(--miro-modal-bar-height)!important;
  right:0!important;
  bottom:0!important;
  left:0!important;
  width:100%!important;
  height:auto!important;
  margin:0!important;
  padding:0!important;
  background:var(--color-theme-bg,var(--theme-bg,#fff))!important;
}


/* v5.2 — language control sits beside the desktop theme toggle. */
@media(min-width:1200px){
  .miro-lang-switch--header{
    height:44px!important;
    align-self:center!important;
    border:1px solid currentColor!important;
    flex-shrink:0!important;
  }
  .miro-lang-switch--header a{
    min-width:44px!important;
    height:42px!important;
    padding:0 9px!important;
    font-size:11px!important;
  }
  header>div:nth-child(2)>div:first-child{
    gap:12px!important;
    padding-right:12px!important;
  }
  header>div:nth-child(2)>div:first-child>div:first-child ul{
    flex-wrap:nowrap!important;
  }
}
@media(max-width:1199px){
  .miro-lang-switch{display:none!important}
}

/* v5.3 — final deterministic language placement beside the real theme toggle. */
@media (min-width:1200px){
  header .miro-lang-switch--header{
    position:static!important;
    display:flex!important;
    align-self:center!important;
    flex:0 0 auto!important;
    width:auto!important;
    height:44px!important;
    margin:0!important;
    border:1px solid currentColor!important;
    background:var(--color-theme-bg,var(--theme-bg,#fff))!important;
    color:var(--color-theme-fg,var(--theme-fg,#111))!important;
  }
  header .miro-lang-switch--header a{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:auto!important;
    min-width:46px!important;
    height:42px!important;
    padding:0 10px!important;
    font-family:Arial,sans-serif!important;
    font-size:12px!important;
    line-height:1!important;
    letter-spacing:.04em!important;
    text-decoration:none!important;
  }
  header .miro-lang-switch--header a+a{border-left:1px solid currentColor!important}
  header .miro-lang-switch--header a[aria-current="page"]{
    background:var(--color-theme-fg,var(--theme-fg,#111))!important;
    color:var(--color-theme-bg,var(--theme-bg,#fff))!important;
  }
}
@media (max-width:1199px){header .miro-lang-switch--header{display:none!important}}

/* v5.4: let the desktop controls keep their natural width before the two
   header columns have enough room to be equal (notably 1280px in Russian). */
@media (min-width:1280px){
  header{grid-template-columns:minmax(0,1fr) minmax(max-content,1fr)}
}

/* ===== Stage 6 requested UI corrections — 2026-09-24 ===== */
/* Team role chips: SuisseIntlMono has no Cyrillic glyphs, so Russian falls back
   to a size-adjusted Arial face and looks substantially larger than English.
   Use the Cyrillic-capable SuisseIntl sans face for every role label. */
#team>div[id]>div>div.relative>.font-mono.text-caption-10{
  font-family:var(--font-sans),Arial,sans-serif!important;
  font-size:12px!important;
  font-weight:450!important;
  line-height:1.1!important;
  letter-spacing:-.02em!important;
  white-space:nowrap!important;
}

/* Keep the original hero composition. Russian only gets a slightly taller
   reveal box so the dots on Ё in “вперёд” are not clipped. */
html[lang="ru"] [data-page-builder-section="heroSection"] p.uppercase>span{
  padding-top:.08em;
}
html[lang="ru"] [data-page-builder-section="heroSection"] p.uppercase>span>span.text-headline-50{
  line-height:.96!important;
}
/* Dark-theme grid lines. The Web card uses the same #232323 as the dark page
   background, so without an explicit line it visually fuses with neighbouring
   sections. Keep light mode untouched and add restrained separators only in
   dark mode. */
html[data-theme="dark"] #about{
  --miro-dark-grid-line:rgb(255 255 255 / .28);
  border-top-color:var(--miro-dark-grid-line)!important;
  border-bottom:1px solid var(--miro-dark-grid-line)!important;
}
html[data-theme="dark"] #about>div:last-child{
  border-top:1px solid var(--miro-dark-grid-line)!important;
}
html[data-theme="dark"] #about>div:last-child>div>div{
  border-color:var(--miro-dark-grid-line)!important;
}
html[data-theme="dark"] #about>div:last-child>div>div:first-child{
  box-shadow:inset 0 0 0 1px var(--miro-dark-grid-line)!important;
}
html[data-theme="dark"] #about>div:last-child>div>div:nth-child(3){
  box-shadow:0 1px var(--miro-dark-grid-line)!important;
}
@media(max-width:1023px){
  html[data-theme="dark"] #about>div:last-child>div>div+div{
    border-top:1px solid var(--miro-dark-grid-line)!important;
  }
}

/* Restrained palette and typography; retain the existing display metrics. */
:root{
  --miro-accent-white:#f7f7f3;
  --font-sans:suisseIntl,Arial,system-ui,sans-serif;
  --font-mono:suisseIntlMono,"Cascadia Mono",Consolas,ui-monospace,monospace;
  --text-body-10--letter-spacing:-.02em;
  --text-caption-10--letter-spacing:0;
  --text-caption-20--letter-spacing:0;
  --text-caption-10--line-height:1.3;
  --text-caption-20--line-height:1.35;
}

/* Match the studio's existing mint token in the supporting hero panel. */
[data-page-builder-section="heroSection"] .inset-shadow-border-t > div.flex.flex-col.bg-mint.text-black{
  background:var(--color-mint);
  color:var(--color-black);
  box-shadow:inset 0 -1px 0 var(--color-black);
}

/* Both words keep the existing font, size and reveal animation. */
[data-page-builder-section="heroSection"] p.uppercase > span > span.text-headline-50{
  color:#fff;
}
[data-page-builder-section="heroSection"] div:has(> p.uppercase){
  background:var(--color-black);
}

#expertise > .grid > div:first-child h2 > span > span{
  color:var(--color-black);
}

/* Keep boundaries visible when neighbouring surfaces share the same colour. */
html[data-theme="dark"] header > div:nth-child(2) > button{
  box-shadow:inset 0 -1px 0 var(--color-black);
}
#testimonials .sticky.bg-theme-fg{
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--color-theme-bg) 38%,transparent);
}

#clients h2.text-headline-50{
  color:var(--color-black);
}

/* Black display words retain a light surface in either theme. */
html[data-theme="dark"] #clients h2.text-headline-50{
  background:var(--miro-accent-white);
}

/* WordOdometer animates a whole word. Do not inherit the body's tight tracking. */
[data-page-builder-section="bannerSection"] > .relative.z-1{
  letter-spacing:0;
  font-kerning:normal;
}
[data-page-builder-section="bannerSection"] span[aria-hidden="true"]{
  white-space:nowrap;
}

/* Apply the same treatment to the WebGL gallery and its image fallback. */
#team canvas,#team img,.miro-person-image img{
  filter:grayscale(1) contrast(1.05);
}
.miro-case-copy p{line-height:1.5;letter-spacing:-.01em}
.miro-person-skills li{line-height:1.35;letter-spacing:0}
button,a,input,textarea,select{-webkit-tap-highlight-color:rgb(161 255 203 / .35)}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:2px solid currentColor;
  outline-offset:4px;
}
.miro-copy-brief:active,.miro-action:active{background:var(--color-mint);color:var(--color-black)}

/* Reveal the single-line desktop title before application hydration.
   Match AnimatedText's duration, cubic curve, vertical travel and clipping. */
.miro-hero-title { display: block; overflow: clip; overflow-clip-margin: .15em; }
.miro-hero-title > h1 { animation: miro-hero-reveal 1s cubic-bezier(.23,1,.32,1) both; }
@keyframes miro-hero-reveal {
  from { opacity: 0; transform: translateY(100%); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .miro-hero-title > h1 { animation: none; }
}