/* Main theme styles for Miami Smart Blinds */
:root {
  /* Brand */
  --mia-teal: #136F7A;
  --mia-aqua: #35C7D4;
  --mia-coral: #FF7A6E;
  --mia-apricot: #FFC27A;

  /* Neutrals */
  --mia-ink: #22313A;
  --mia-canvas: #F7F7F5;
  --mia-line: #E6EAED;

  /* Helpers */
  --mia-radius: 14px;
  --mia-shadow: 0 10px 30px rgba(34, 49, 58, 0.1);
  --mia-shadow-strong: 0 28px 65px rgba(19, 111, 122, 0.18);
  --mia-gradient-sunset: linear-gradient(135deg, #FF7A6E 0%, #FFC27A 45%, #35C7D4 100%);
  --mia-gradient-glass: linear-gradient(160deg, rgba(19, 111, 122, 0.08) 0%, rgba(53, 199, 212, 0.1) 55%, rgba(255, 194, 122, 0.12) 100%);
  --mia-transition: 0.24s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --mia-site-max-width: 1180px;
  --mia-section-radius: 24px;
  --mia-section-padding-y: var(--wp--preset--spacing--section, 3rem);
  --mia-section-padding-y-large: var(--wp--preset--spacing--section-large, 4rem);
  --mia-section-padding-y-compact: var(--wp--preset--spacing--section-compact, 2rem);
  --mia-section-padding-inline: clamp(1.5rem, 4vw, 3rem);
  --mia-page-inline-gap: clamp(1.2rem, 5vw, 1.8rem);
  --wp--style--root--padding-left: clamp(1rem, 4vw, 1.5rem);
  --wp--style--root--padding-right: clamp(1rem, 4vw, 1.5rem);
  --wp--style--root--padding-top: clamp(1.5rem, 5vw, 2rem);
  --wp--style--root--padding-bottom: clamp(1.5rem, 5vw, 2.5rem);
}

/* =Base */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--wp--preset--font-family--body-font);
  color: var(--mia-ink);
  background: var(--mia-canvas);
  width: 100%;
  min-height: 100%;
}

.wp-site-blocks {
  overflow-x: hidden;
  max-width: 100%;
  padding-inline: var(--mia-page-inline-gap);
}

@supports (overflow: clip) {
  .wp-site-blocks {
    overflow-x: clip;
  }
}

/* =Scroll Reveal */
.js .mia-scroll-reveal {
  opacity: 0;
  transform: translate3d(0, 32px, 0);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.js .mia-scroll-reveal.mia-scroll-reveal--visible {
  opacity: 1;
  transform: none;
}

.js .mia-scroll-reveal[data-mia-reveal="stagger"] > *:where(:not(style)) {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--mia-reveal-order, 0) * var(--mia-reveal-interval, 90ms));
}

.js .mia-scroll-reveal[data-mia-reveal="stagger"].mia-scroll-reveal--visible > *:where(:not(style)) {
  opacity: 1;
  transform: none;
}

.mia-products.mia-scroll-reveal,
.mia-products.mia-scroll-reveal--visible,
.mia-products .mia-scroll-reveal,
.mia-products .mia-scroll-reveal[data-mia-reveal="stagger"] > *:where(:not(style)) {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .js .mia-scroll-reveal,
  .js .mia-scroll-reveal[data-mia-reveal="stagger"] > *:where(:not(style)) {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

a {
  color: var(--mia-teal);
  text-decoration-color: transparent;
  transition: color var(--mia-transition), text-decoration-color var(--mia-transition);
}

a:is(:hover, :focus) {
  color: var(--mia-aqua);
  text-decoration-color: currentColor;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--wp--preset--font-family--heading-font);
  color: var(--mia-ink);
}

.wp-block-cover.has-neutral-dark-background-color {
  /* Ensures white text on dark overlay in hero */
  color: #ffffff;
  background: var(--wp--preset--gradient--miami-sunset-blur);
}

.wp-block-cover.has-neutral-dark-background-color .wp-block-cover__inner-container {
  background: rgba(34, 49, 58, 0.35);
  backdrop-filter: blur(6px);
  border-radius: 32px;
  box-shadow: var(--mia-shadow-strong);
}

/* =Utilities */
.mia-container {
  max-width: var(--mia-site-max-width);
  margin: 0 auto;
  padding: 0 1rem;
}

/* =Buttons */
.mia-btn .wp-block-button__link {
  border-radius: var(--mia-radius);
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  transition: transform var(--mia-transition), box-shadow var(--mia-transition), background-color var(--mia-transition);
  background: var(--mia-teal);
  box-shadow: 0 12px 24px rgba(19, 111, 122, 0.18);
}

.mia-btn .wp-block-button__link:is(:hover, :focus) {
  transform: translateY(-2px);
  box-shadow: 0 18px 36px rgba(19, 111, 122, 0.22);
}

.mia-btn.is-style-outline .wp-block-button__link {
  border: 2px solid var(--mia-ink);
  background: transparent;
  color: var(--mia-ink);
}

.mia-btn.is-style-outline .wp-block-button__link:hover {
  background: var(--mia-ink);
  color: #fff;
}

/* =Header */
.site-header {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(14px);
  border-radius: 0;
  border: 1px solid rgba(230, 234, 237, 0.7);
  box-shadow: 0 20px 45px rgba(19, 111, 122, 0.08);
  margin: 0;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
  padding-inline: clamp(1.6rem, 4.5vw, 2.4rem);
  padding-top: clamp(1.75rem, 3.6vw, 2.4rem);
  padding-bottom: clamp(0.75rem, 2.4vw, 1rem);
  gap: clamp(0.75rem, 2vw, 1.5rem);
  position: sticky;
  top: 0;
  z-index: 120;
}

.site-header a {
  text-decoration: none;
  color: inherit;
}

.site-header .wp-block-navigation {
  gap: 0.35rem;
  flex-grow: 1;
  justify-content: flex-end;
}

.site-header .wp-block-navigation a {
  padding: 0.45rem 0.95rem;
  border-radius: 999px;
  color: var(--mia-ink);
  font-weight: 600;
  transition: background-color var(--mia-transition), color var(--mia-transition), transform var(--mia-transition);
}

.site-header .wp-block-navigation a:hover {
  background-color: rgba(53, 199, 212, 0.12);
  color: var(--mia-teal);
  transform: translateY(-1px);
}

.mia-brand__link {
  display: inline-flex;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1.35rem);
  text-decoration: none;
  font-family: var(--wp--preset--font-family--heading-font);
  color: var(--mia-ink);
}

.mia-brand__logo {
  flex-shrink: 0;
  width: 60px;
  height: 60px;
}

.mia-brand__logo img {
  width: 100%;
  height: 100%;
  display: block;
}


.mia-brand__wordmark img {
  flex-shrink: 0;
  display: block;
  width: clamp(180px, 24vw, 260px);
  height: auto;
}

.mia-brand__tagline,
.site-header .wp-block-shortcode.mia-brand__tagline {
  display: inline-flex;
  align-items: center;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(34, 49, 58, 0.66);
  border-left: 1px solid rgba(230, 234, 237, 0.85);
  padding-left: clamp(0.5rem, 1vw, 0.75rem);
  white-space: nowrap;
  margin: 0;
}

.mia-brand__link:hover .mia-brand__tagline,
.mia-brand__link:hover + .wp-block-shortcode.mia-brand__tagline {
  color: var(--mia-teal);
}


/* =Hero */
.msb-hero {
  position: relative;
  isolation: isolate;
  min-height: clamp(320px, 55vh, 644px);
  background: var(--mia-canvas);
  border-radius: 0;
  overflow: hidden;
  box-shadow: none;
  margin-top: 0;
  --hero-offset-top: clamp(30px, 5.6vw, 118px);
  --hero-offset-top-no-eyebrow: clamp(44px, 7.2vw, 132px);
}

.msb-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  filter: saturate(0.75) brightness(0.96) contrast(0.94);
  transform: scale(1.12) translate3d(0, 0, 0);
  will-change: transform;
  animation: msb-kenburns 16s ease-in-out infinite alternate;
}

.msb-hero__bg-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.msb-hero__bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
  display: block;
}

.msb-hero__light {
  position: absolute;
  inset: -26% -44%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(110deg,
    rgba(19, 111, 122, 0.22) 0%,
    rgba(255, 194, 122, 0.18) 60%,
    rgba(19, 111, 122, 0.16) 100%);
  mix-blend-mode: soft-light;
  animation: msb-light-drift 16s ease-in-out infinite alternate;
  animation-delay: -6s;
  mask-image: linear-gradient(90deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 1) 28%,
    rgba(0, 0, 0, 1) 72%,
    rgba(0, 0, 0, 0) 100%);
}

.msb-hero__wash {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(120deg,
    rgba(19, 111, 122, 0.42) 0%,
    rgba(19, 111, 122, 0.24) 32%,
    rgba(53, 199, 212, 0.16) 58%,
    rgba(255, 194, 122, 0.08) 82%,
    rgba(255, 194, 122, 0) 100%);
  mix-blend-mode: screen;
  opacity: 0.75;
  animation: msb-wash-drift 20s ease-in-out infinite alternate;
  animation-delay: -10s;
}

.msb-hero__shade-right {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(0, 0, 0, 0) 52%,
    rgba(0, 0, 0, 0.16) 76%,
    rgba(0, 0, 0, 0.34) 100%);
  mix-blend-mode: multiply;
}

.msb-hero__vignette {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: radial-gradient(150% 110% at 48% 48%, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.05) 54%, rgba(0, 0, 0, 0.36) 100%);
}

.msb-hero__content {
  position: relative;
  z-index: 5;
  color: #fff;
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--hero-offset-top) clamp(26px, 6vw, 96px) clamp(20px, 6vw, 60px);
  min-height: clamp(320px, 52vh, 700px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(14px, 1.8vw, 26px);
  text-shadow: 0 12px 32px rgba(0, 0, 0, 0.36);
}

.msb-hero__content--no-eyebrow {
  padding-top: var(--hero-offset-top-no-eyebrow);
}

.msb-hero__eyebrow {
  position: absolute;
  top: var(--hero-offset-top);
  right: clamp(32px, 5.5vw, 108px);
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.46rem 1.3rem;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0.08) 100%);
  border: 1px solid rgba(255, 255, 255, 0.32);
  font-size: clamp(0.58rem, 0.8vw, 0.74rem);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(245, 252, 255, 0.92);
  text-shadow: none;
  box-shadow: 0 16px 32px rgba(6, 42, 54, 0.24);
  z-index: 6;
}

@media (max-width: 780px) {
  .msb-hero__eyebrow {
    position: static;
    margin: 0 0 0 auto;
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0.2rem 0;
    font-size: 0.72rem;
    letter-spacing: 0.28em;
    color: rgba(5, 58, 71, 0.9);
    box-shadow: none;
    text-shadow: 0 6px 18px rgba(255, 255, 255, 0.35);
  }
}
.msb-hero__title {
  margin: 0 0 clamp(36px, 5.2vw, 80px);
  font-weight: 800;
  font-size: clamp(2.6rem, 5.4vw, 4.05rem);
  line-height: 1.08;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.94);
}

.msb-hero__sub {
  margin: 0;
  max-width: min(680px, 100%);
  font-size: clamp(0.88rem, 1.4vw, 1.05rem);
  line-height: 1.65;
  letter-spacing: 0.02em;
  text-transform: none;
  color: rgba(255, 255, 255, 0.92);
  background: rgba(9, 48, 60, 0.34);
  padding: clamp(0.75rem, 2vw, 1.1rem) clamp(1.15rem, 4vw, 1.8rem);
  border-radius: 18px;
  backdrop-filter: blur(8px);
  box-shadow: 0 18px 46px rgba(6, 37, 45, 0.24);
  text-shadow: 0 8px 28px rgba(0, 0, 0, 0.32);
}

.msb-hero__cta {
  margin-top: auto;
  padding-top: clamp(18px, 2.4vw, 32px);
  padding-bottom: clamp(4px, 1.2vw, 14px);
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.75rem, 2.4vw, 1.65rem);
  align-items: center;
  width: 100%;
}

.msb-hero__cta .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: clamp(0.9rem, 3vw, 1.05rem) clamp(1.75rem, 4vw, 2.4rem);
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  transition: transform var(--mia-transition), box-shadow var(--mia-transition), background var(--mia-transition);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: linear-gradient(135deg, rgba(19, 111, 122, 0.96) 0%, rgba(53, 199, 212, 0.92) 55%, rgba(255, 194, 122, 0.88) 100%);
  color: #ffffff;
  box-shadow: 0 20px 48px rgba(7, 54, 65, 0.28);
  position: relative;
  overflow: hidden;
}

.msb-hero__cta .btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
  opacity: 0;
  transition: opacity var(--mia-transition);
}

.msb-hero__cta .btn:hover,
.msb-hero__cta .btn:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 24px 56px rgba(7, 54, 65, 0.32);
}

.msb-hero__cta .btn:hover::after,
.msb-hero__cta .btn:focus-visible::after {
  opacity: 1;
}
.msb-hero__cta .btn:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.65);
  outline-offset: 4px;
}

.msb-hero__integrations {
  position: absolute;
  right: clamp(22px, 5vw, 92px);
  bottom: clamp(14px, 3.6vw, 72px);
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: clamp(12px, 1.8vw, 24px);
  padding: 0;
  max-width: none;
  width: auto;
  min-width: 0;
  background: none;
  border: 0;
  border-radius: 0;
  color: rgba(245, 252, 255, 0.92);
  text-align: right;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.msb-hero__integrations-heading {
  font-size: clamp(0.78rem, 0.9vw, 1.08rem);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-weight: 600;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
}

.msb-hero__integrations-list {
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(16px, 2.6vw, 30px);
  list-style: none;
}

.msb-hero__integrations-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 70px;
}

.msb-hero__integrations-icon {
  width: clamp(44px, 5vw, 58px);
  height: clamp(44px, 5vw, 58px);
  display: block;
  filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.24));
}

.msb-hero__integrations-label {
  font-size: clamp(0.64rem, 0.82vw, 0.78rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
}

@media (min-width: 769px) and (max-width: 1080px) {
  .msb-hero__integrations {
    display: none;
  }
}

.msb-hero[data-parallax="on"] .msb-hero__bg {
  transform: scale(1.12) translate3d(0, calc(var(--scroll, 0) * -0.9%), 0);
}

@keyframes msb-kenburns {
  0% {
    transform: scale(1.12) translate3d(8%, -2%, 0);
  }
  100% {
    transform: scale(1.3) translate3d(-10%, 3%, 0);
  }
}

@keyframes msb-light-drift {
  0% {
    transform: translateX(-24%) translateY(4%);
    opacity: 0.6;
  }
  100% {
    transform: translateX(24%) translateY(-6%);
    opacity: 0.82;
  }
}

@keyframes msb-wash-drift {
  0% {
    transform: translateX(-12%) translateY(1%);
    opacity: 0.68;
  }
  100% {
    transform: translateX(10%) translateY(-3%);
    opacity: 0.8;
  }
}

@media (prefers-reduced-motion: reduce) {
  .msb-hero__bg,
  .msb-hero__light,
  .msb-hero__wash {
    animation: none !important;
    transform: none !important;
  }
}

@media (max-width: 768px) {
  .msb-hero__bg img {
    object-position: center 60%;
  }

  .msb-hero__shade-right {
    background: linear-gradient(180deg,
      rgba(0, 0, 0, 0) 55%,
      rgba(0, 0, 0, 0.16) 100%);
  }

  .msb-hero__content {
    padding: clamp(28px, 10vw, 68px) clamp(22px, 8vw, 44px) clamp(20px, 8vw, 56px);
    gap: clamp(16px, 4vw, 32px);
  }

  .msb-hero__cta {
    margin-top: clamp(8px, 1.6vw, 20px);
    flex-direction: column;
    align-items: stretch;
  }

  .msb-hero__integrations {
    display: flex;        /* re-enable on phones */
    position: relative;   /* allow z-index to apply */
    z-index: 6;           /* above hero overlays */
    align-items: center;
    gap: clamp(14px, 4vw, 22px);
    margin: clamp(8px, 3.5vw, 16px) 0 0;                /* tighter gap under CTA */
    padding: clamp(10px, 4.5vw, 18px) clamp(14px, 5vw, 22px); /* slimmer vertical padding */
    max-width: 100%;
    width: 100%;
    min-width: 0;
    text-align: center;
    background: none;
    color: rgba(245, 252, 255, 0.92);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .msb-hero__integrations-heading {
    color: rgba(255, 255, 255, 0.9);
    letter-spacing: 0.16em;
    text-shadow: none;
  }

  .msb-hero__integrations-list {
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(14px, 5vw, 22px);
  }

  .msb-hero__integrations-item {
    align-items: center;
    min-width: 90px;
  }

  .msb-hero__integrations-icon {
    width: clamp(56px, 14vw, 74px);   /* bigger icons on phones */
    height: clamp(56px, 14vw, 74px);
    filter: none;
  }

  .msb-hero__integrations-label {
    color: rgba(255, 255, 255, 0.82);
    font-size: clamp(0.8rem, 3.2vw, 0.95rem);  /* slightly larger for readability */
    letter-spacing: 0.11em;
  }
}

/* =Footer */
.site-footer {
  background: linear-gradient(135deg, rgba(19, 111, 122, 0.92) 0%, rgba(53, 199, 212, 0.9) 55%, rgba(255, 122, 110, 0.9) 100%);
  border-radius: 0;
  box-shadow: 0 -14px 40px rgba(19, 111, 122, 0.18);
  color: rgba(255, 255, 255, 0.92);
  position: relative;
  overflow: hidden;
  padding: clamp(2.4rem, 5vw, 3rem) clamp(1.75rem, 6vw, 3rem);
  transition: padding var(--mia-transition);
}

.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(247, 247, 245, 0.08) 0%, rgba(255, 194, 122, 0.12) 50%, rgba(19, 111, 122, 0.25) 100%);
  mix-blend-mode: screen;
  pointer-events: none;
}

.site-footer p {
  color: rgba(247, 247, 245, 0.92);
}

.site-footer strong {
  color: #ffffff;
}

.site-footer a {
  color: rgba(255, 255, 255, 0.92);
}

.site-footer a:is(:hover, :focus) {
  color: var(--mia-apricot);
}

.site-header.alignfull {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.alignfull.site-footer {
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: none;
  width: 100%;
}

.alignfull.site-footer > .wp-block-group__inner-container {
  position: relative;
  z-index: 1;
  max-width: none;
  width: 100%;
  gap: clamp(0.4rem, 1.5vw, 0.8rem);
}

.footer-contact,
.footer-showroom {
  margin-bottom: 0.5rem;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  line-height: 1.6;
  text-align: center;
}

.footer-contact__label,
.footer-contact__separator {
  margin: 0;
}

.footer-contact__separator {
  opacity: 0.7;
}

.footer-contact__link {
  display: inline-flex;
  align-items: center;
}

.footer-contact__link,
.footer-contact__link a {
  color: rgba(255, 255, 255, 0.92);
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.footer-contact__link a:hover,
.footer-contact__link a:focus-visible {
  color: var(--mia-apricot);
  text-decoration: underline;
  text-decoration-color: currentColor;
}

.footer-location {
  margin-bottom: 0.8rem;
}

.footer-location a {
  color: rgba(255, 255, 255, 0.92);
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.footer-location a:hover {
  color: var(--mia-apricot);
  text-decoration: underline;
  text-decoration-color: currentColor;
}

.footer-nav {
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-nav.footer-nav--bottom {
  margin-top: 0.25rem;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.1rem;
  margin-top: 0.4rem;
  width: 100%;
  justify-content: space-between;
  text-align: left;
  padding: 0.4rem clamp(2rem, 6vw, 3.5rem);
}

/* reduce bottom padding of footer container */
.site-footer { padding-bottom: clamp(0.3rem, 1.5vw, 0.7rem); }

.site-footer .wp-block-group__inner-container > *:last-child { margin-bottom: 0 !important; }

.footer-bottom__note {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: rgba(247, 247, 245, 0.8);
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  flex: 1 1 260px;
}

.footer-payment-logos {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  flex: 1 1 260px;
}

.footer-payment-logos li {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  padding: 0.25rem 0.4rem;
  background: #ffffff;
  border: 1px solid rgba(247, 247, 245, 0.4);
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(19, 111, 122, 0.18);
}

.footer-payment-logos img {
  width: 22.87px;
  height: auto;
  display: block;
}

.footer-bottom__logo {
  display: inline-flex;
  align-items: center;
}

.footer-bottom__logo img {
  width: clamp(30px, 5vw, 38px);
  height: auto;
  display: block;
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.22));
  transition: transform var(--mia-transition);
}

/* =Sections */
.mia-section {
  background: #ffffff;
  border-radius: var(--mia-section-radius);
  box-shadow: 0 20px 45px rgba(11, 62, 77, 0.08);
  margin: var(--mia-section-padding-y) auto;
  padding: var(--mia-section-padding-y) var(--mia-section-padding-inline);
  max-width: var(--mia-site-max-width);
  width: min(var(--mia-site-max-width), calc(100% - (2 * var(--mia-page-inline-gap))));
  box-sizing: border-box;
}

.mia-section--spacious {
  padding-block: var(--mia-section-padding-y-large);
}

.mia-section--compact {
  padding-block: var(--mia-section-padding-y-compact);
}

.mia-section--tint {
  background: #f9f9f9;
}

.mia-section--frost {
  background: #F0F4F8;
}

.mia-integrations .wp-block-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding: 1rem 0.75rem;
}

.mia-integrations figure {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 0.35rem;
  box-shadow: 0 12px 28px rgba(19, 111, 122, 0.18);
  border: 1px solid rgba(230, 234, 237, 0.75);
}

.mia-integrations .wp-block-columns {
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(0.75rem, 4vw, 1.25rem);
}

.mia-integrations .wp-block-columns > .wp-block-column {
  flex: 0 1 calc(50% - clamp(0.75rem, 4vw, 1.25rem));
  max-width: calc(50% - clamp(0.75rem, 4vw, 1.25rem));
}

@media (max-width: 360px) {
  .mia-integrations .wp-block-columns > .wp-block-column {
    flex-basis: 100%;
    max-width: 100%;
  }
}

.mia-integrations figure img {
  width: 52px;
  height: 52px;
  cursor: default;
  pointer-events: none;
}

.mia-integrations__support {
  margin: 1.75rem auto 0;
  font-size: clamp(0.88rem, 1.6vw, 1rem);
  font-weight: 400;
  color: var(--mia-ink);
  text-align: center;
  max-width: min(100%, 720px);
  line-height: 1.45;
}

.mia-integrations .wp-block-column p {
  font-weight: 600;
  color: var(--mia-ink);
  margin: 0;
}

.mia-integrations h3,
.mia-products h3,
.mia-process h3,
.mia-features h3,
.mia-projects-preview h3,
.mia-testimonials h3 {
  margin-bottom: 1.5rem;
}

.mia-products h3 {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto clamp(1.1rem, 2.4vw, 1.85rem);
  padding: clamp(0.58rem, 1.5vw, 0.88rem) clamp(1.65rem, 3.6vw, 2.95rem);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(19, 111, 122, 0.16) 0%, rgba(53, 199, 212, 0.12) 45%, rgba(255, 194, 122, 0.14) 100%);
  box-shadow: 0 22px 44px rgba(19, 111, 122, 0.18);
  color: rgba(34, 49, 58, 0.95);
  font-size: clamp(1.35rem, calc(1.08rem + 1.5vw), 2.15rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  text-align: center;
}

.mia-products h3::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(-0.55rem);
  transform: translateX(-50%);
  width: clamp(120px, 26vw, 210px);
  height: 4px;
  border-radius: 999px;
  background: var(--mia-gradient-sunset);
  box-shadow: 0 8px 18px rgba(19, 111, 122, 0.26);
}

.mia-products {
  padding-inline: clamp(0.75rem, 2vw, 1.5rem);
}

@media (min-width: 1200px) {
  .mia-products {
    padding-inline: clamp(0.6rem, 1.6vw, 1.1rem);
  }
}

@media (min-width: 1440px) {
  .mia-products {
    padding-inline: clamp(0.4rem, 1vw, 0.9rem);
  }
}

.mia-process .wp-block-column,
.mia-features .wp-block-column {
  background: var(--mia-gradient-glass);
  border-radius: 18px;
  padding: 1.5rem;
  border: 1px solid rgba(230, 234, 237, 0.6);
  box-shadow: 0 16px 36px rgba(19, 111, 122, 0.12);
}

.mia-product-item {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 100%;
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: transparent;
  border: none;
  box-shadow: 0 18px 42px rgba(6, 34, 41, 0.18);
  transition: transform var(--mia-transition), box-shadow var(--mia-transition);
}

.mia-product-item__flip {
  display: flex;
  flex-direction: column;
  gap: inherit;
  height: 100%;
}

.mia-product-item__front {
  display: flex;
  flex-direction: column;
  gap: 0;
  height: 100%;
  flex: 1 1 auto;
  background: transparent;
  border-radius: inherit;
}

.mia-product-item__mobile-back {
  display: none;
  flex-direction: column;
  gap: 1rem;
  height: 100%;
  background: var(--mia-gradient-glass);
  border-radius: inherit;
  padding: 1.5rem;
  box-shadow: inherit;
}

.mia-product-item__mobile-cta .wp-block-button__link {
  width: 100%;
}

.mia-product-item__title {
  margin: 0;
  color: var(--mia-teal);
  font-size: clamp(1.07rem, 1.7vw, 1.18rem);
}

.mia-product-item__media {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: inherit;
  aspect-ratio: 4 / 3;
  background: rgba(19, 32, 40, 0.12);
}

.mia-product-item__media-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
}

.mia-product-item:hover .mia-product-item__media-image {
  transform: scale(1.05);
}

.mia-shades__cards .mia-product-item[aria-pressed="true"] .mia-product-item__media-image,
.mia-shades__cards .mia-product-item.is-flipped .mia-product-item__media-image {
  transform: scale(1.35);
}

.mia-product-item__description {
  display: none;
}

.mia-product-item--title-only {
  gap: 0;
}

.mia-product-item--no-media .mia-product-item__description {
  margin-top: auto;
}

.mia-product-item__overlay {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 45%;
  padding: clamp(0.9rem, 2.4vw, 1.55rem) clamp(1.1rem, 2.8vw, 1.9rem) clamp(1.2rem, 3vw, 2.1rem);
  background: linear-gradient(180deg, rgba(6, 29, 39, 0.05) 0%, rgba(6, 29, 39, 0.82) 82%);
  pointer-events: none;
  text-align: center;
}

.mia-product-item__overlay-title {
  color: #fff;
  font-size: clamp(1rem, calc(0.95rem + 1vw), 1.6rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 700;
  line-height: 1.2;
  text-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
  white-space: nowrap;
  display: inline-block;
  max-width: 92%;
  margin-inline: auto;
}

.mia-product-item:hover .mia-product-item__overlay {
  background: linear-gradient(180deg, rgba(6, 29, 39, 0.08) 0%, rgba(6, 29, 39, 0.9) 88%);
}

.mia-shades__cards .mia-product-item:hover {
  box-shadow: 0 26px 56px rgba(6, 34, 41, 0.28);
}

.mia-shades {
  margin-top: clamp(1.1rem, 2.4vw, 2.2rem);
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  overflow: hidden;
  --mia-shades-duration: 480ms;
  --mia-shades-height: auto;
  min-height: var(--mia-shades-height);
  transition: min-height var(--mia-shades-duration) cubic-bezier(0.22, 1, 0.36, 1);
  padding-top: clamp(1.35rem, 2.8vw, 2.75rem);
  padding-bottom: clamp(1.1rem, 2.1vw, 2.35rem);
}

.mia-shades[data-shades-motion="quick"] {
  --mia-shades-duration: 260ms;
}

.mia-products--no-title .mia-shades {
  margin-top: clamp(0.5rem, 1.4vw, 1.2rem);
}

.mia-shades__interactive,
.mia-shades__cards {
  position: absolute;
  inset: 0;
  width: 100%;
  transition:
    opacity var(--mia-shades-duration) cubic-bezier(0.22, 1, 0.36, 1),
    transform var(--mia-shades-duration) cubic-bezier(0.22, 1, 0.36, 1),
    visibility var(--mia-shades-duration) linear;
  will-change: opacity, transform;
}

.mia-shades__interactive {
  display: grid;
  grid-template-columns: minmax(200px, clamp(230px, 19vw, 280px)) minmax(0, 1fr);
  gap: clamp(1.2rem, 2vw, 2.5rem);
  align-items: stretch;
  opacity: 0;
  visibility: hidden;
  transform: translateY(40px) scale(0.98);
  pointer-events: none;
}

.mia-shades--expanded .mia-shades__interactive {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.mia-shades__cards {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 2vw, 1.4rem);
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.mia-shades--expanded .mia-shades__cards {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-30px) scale(0.985);
  pointer-events: none;
}

.mia-shades--playful .mia-shades__interactive {
  animation: mia-shades-bounce-in 620ms cubic-bezier(0.19, 1, 0.22, 1);
}

.mia-shades--playful .mia-shades__nav-item.is-active {
  animation: mia-shades-nav-pop 620ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.mia-shades__nav,
.mia-shades__panels,
.mia-shades__cards {
  transition:
    opacity calc(var(--mia-shades-duration) + 120ms) cubic-bezier(0.22, 1, 0.36, 1),
    transform calc(var(--mia-shades-duration) + 120ms) cubic-bezier(0.22, 1, 0.36, 1);
}

.mia-shades:not(.mia-shades--revealed) .mia-shades__nav,
.mia-shades:not(.mia-shades--revealed) .mia-shades__panels,
.mia-shades:not(.mia-shades--revealed) .mia-shades__cards {
  opacity: 0;
  transform: translate3d(0, 36px, 0) scale(0.98);
  pointer-events: none;
}

.mia-shades--revealed .mia-shades__nav {
  transition-delay: 60ms;
}

.mia-shades--revealed .mia-shades__panels {
  transition-delay: 150ms;
}

.mia-shades--revealed .mia-shades__cards {
  transition-delay: 210ms;
}

.mia-shades__nav {
  background: rgba(255, 255, 255, 0.88);
  border-radius: 24px;
  padding: clamp(1.4rem, 2.4vw, 2rem) clamp(1rem, 1.8vw, 1.4rem);
  border: 1px solid rgba(230, 234, 237, 0.68);
  box-shadow: 0 28px 46px rgba(19, 111, 122, 0.12);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.mia-shades__nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(0.65rem, 1.2vw, 1.15rem);
  flex: 1 1 auto;
  justify-content: center;
  padding-block: clamp(1rem, 2.6vw, 1.9rem);
}

.mia-shades__nav-item {
  width: 100%;
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.55);
  border-radius: 16px;
  padding: 0.85rem 1.1rem;
  font: inherit;
  font-weight: 600;
  font-size: clamp(0.95rem, 1.5vw, 1.08rem);
  color: var(--mia-ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  transition: color var(--mia-transition), background var(--mia-transition), box-shadow var(--mia-transition);
}

.mia-shades__nav-item:focus-visible {
  outline: 2px solid rgba(19, 111, 122, 0.35);
  outline-offset: 3px;
}

.mia-shades__nav-indicator {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(19, 111, 122, 0.3);
  flex-shrink: 0;
  transition: transform var(--mia-transition), background var(--mia-transition);
}

.mia-shades__nav-item.is-active {
  background: linear-gradient(135deg, #0d5a63, #18aaba);
  color: #fff;
  box-shadow: 0 20px 34px rgba(13, 90, 99, 0.32);
  border-color: transparent;
}

.mia-shades__nav-item.is-active .mia-shades__nav-indicator {
  background: #fff;
  transform: scale(1.45);
}

.mia-shades__panels {
  position: relative;
}

.mia-shades__panel {
  display: none;
  flex-direction: column;
  gap: clamp(1.5rem, 2vw, 2.4rem);
  background: var(--mia-gradient-glass);
  border-radius: 28px;
  padding: clamp(1.5rem, 2vw, 2.8rem);
  border: 1px solid rgba(230, 234, 237, 0.6);
  box-shadow: 0 26px 50px rgba(19, 111, 122, 0.18);
}

.mia-shades__panel.is-active {
  display: flex;
  animation: mia-shades-panel-fade 360ms ease;
}

@keyframes mia-shades-panel-fade {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes mia-shades-bounce-in {
  0% {
    opacity: 0;
    transform: translateY(40px) scale(0.94);
  }

  55% {
    opacity: 1;
    transform: translateY(-10px) scale(1.02);
  }

  75% {
    transform: translateY(4px) scale(0.99);
  }

  100% {
    transform: translateY(0) scale(1);
  }
}

@keyframes mia-shades-nav-pop {
  0% {
    transform: translateX(-6px) scale(0.9);
  }

  60% {
    transform: translateX(0) scale(1.05);
  }

  100% {
    transform: translateX(0) scale(1);
  }
}

.mia-shades__detail-header {
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  align-items: flex-start;
}

.mia-shades__detail-title {
  margin: 0;
  color: var(--mia-ink);
  font-size: clamp(1.65rem, 3vw, 2.35rem);
}

.mia-shades__detail-body {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.35fr);
  gap: clamp(1rem, 2vw, 2.2rem);
  align-items: center;
}

.mia-shades__detail-figure {
  margin: 0;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(230, 234, 237, 0.7);
  background: rgba(255, 255, 255, 0.6);
  min-height: 280px;
  display: flex;
}

.mia-shades__detail-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.mia-shades__detail-figure:hover .mia-shades__detail-img {
  transform: scale(1.12);
}

.mia-shades__image-placeholder {
  width: 100%;
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: rgba(34, 49, 58, 0.65);
  background: rgba(255, 255, 255, 0.6);
}

.mia-shades__detail-copy {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-self: stretch;
  flex: 1 1 auto;
  justify-content: space-between;
}

.mia-shades__detail-text {
  margin: 0;
  color: rgba(34, 49, 58, 0.92);
  line-height: 1.65;
  font-size: clamp(1rem, 1.5vw, 1.12rem);
}

.mia-shades__detail-text.is-empty {
  color: rgba(34, 49, 58, 0.6);
  font-style: italic;
}

.mia-shades__cta {
  margin-top: auto;
  width: 100%;
}

.mia-shades__cta .wp-block-button__link {
  width: 100%;
  justify-content: center;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: linear-gradient(135deg, #19a0b2, #136f7a);
  border: none;
  box-shadow: 0 16px 32px rgba(19, 111, 122, 0.25);
}

.mia-shades__cards .alignwide {
  max-width: none;
  width: 100%;
}

.mia-shades__cards .wp-block-columns {
  margin: 0;
  gap: clamp(1rem, 2vw, 1.75rem);
}

.mia-shades__cards .wp-block-column {
  flex: 1 1 0 !important;
}

.mia-shades__cards .mia-product-item {
  cursor: pointer;
  transition: transform var(--mia-transition), box-shadow var(--mia-transition);
}

.mia-shades__cards .mia-product-item:active {
  transform: translateY(2px);
}

.mia-shades__cards .mia-product-item:focus-visible {
  outline: 2px solid rgba(19, 111, 122, 0.35);
  outline-offset: 4px;
}

@media (min-width: 920px) {
  .mia-shades[data-shades-state="compact"] .mia-product-item {
    padding: 0;
    max-width: none;
    align-items: stretch;
  }

  .mia-shades[data-shades-state="compact"] .mia-product-item__media {
    aspect-ratio: 4 / 3;
    max-height: none;
    width: 100%;
  }
}

@media (max-width: 1200px) {

  .mia-shades__detail-body {
    grid-template-columns: 1fr;
  }

  .mia-shades__detail-figure,
  .mia-shades__image-placeholder {
    min-height: 260px;
  }

  .mia-shades__detail-copy {
    text-align: center;
    align-items: center;
  }

  .mia-shades__cta {
    width: 100%;
  }
}

@media (max-width: 919px) {
  .mia-shades {
    overflow: visible;
    min-height: auto;
    padding-bottom: 0;
  }

  .mia-shades__interactive {
    display: none !important;
  }

  .mia-shades__cards,
  .mia-shades__interactive {
    position: static;
    transform: none !important;
  }

  .mia-shades__cards {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  .mia-shades__cards .mia-product-item {
    max-width: 320px;
    margin-inline: auto;
    perspective: 1200px;
  }

  .mia-product-item__flip {
    position: relative;
    min-height: 320px;
    transform-style: preserve-3d;
    transition: transform 0.9s cubic-bezier(0.19, 1, 0.22, 1);
  }

  .mia-product-item.is-flipped .mia-product-item__flip {
    transform: rotateY(180deg);
  }

  .mia-product-item__front,
  .mia-product-item__mobile-back {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    border-radius: inherit;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
  }

  .mia-product-item__front {
    padding: 0;
    justify-content: stretch;
    align-items: stretch;
  }

  .mia-product-item__front .mia-product-item__description {
    display: none;
  }

  .mia-product-item__front .mia-product-item__title {
    text-align: center;
  }

  .mia-product-item__mobile-back {
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    gap: 1rem;
    transform: rotateY(180deg);
    padding: clamp(1.1rem, 5vw, 1.75rem);
    background: var(--mia-gradient-glass);
    box-shadow: inherit;
  }

  /* Keep the flipped mobile back face interactive even if older active-state
   * transforms/pointer rules are still present in deployed CSS. */
  .mia-shades__cards .mia-product-item[aria-pressed="true"]:not(.is-flipped) .mia-product-item__flip {
    transform: none;
  }

  .mia-shades__cards .mia-product-item.is-flipped .mia-product-item__flip {
    transform: rotateY(180deg);
  }

  .mia-shades__cards .mia-product-item[aria-pressed="true"]:not(.is-flipped) .mia-product-item__front,
  .mia-shades__cards .mia-product-item.is-flipped .mia-product-item__front,
  .mia-shades__cards .mia-product-item[aria-pressed="true"]:not(.is-flipped) .mia-product-item__media,
  .mia-shades__cards .mia-product-item.is-flipped .mia-product-item__media,
  .mia-shades__cards .mia-product-item[aria-pressed="true"]:not(.is-flipped) .mia-product-item__media-image,
  .mia-shades__cards .mia-product-item.is-flipped .mia-product-item__media-image {
    transform: none;
  }

  .mia-shades__cards .mia-product-item[aria-pressed="true"]:not(.is-flipped) .mia-product-item__front,
  .mia-shades__cards .mia-product-item.is-flipped .mia-product-item__front,
  .mia-shades__cards .mia-product-item.is-flipped .mia-product-item__flip,
  .mia-shades__cards .mia-product-item__mobile-back,
  .mia-shades__cards .mia-product-item.is-flipped .mia-product-item__mobile-back,
  .mia-shades__cards .mia-product-item.is-flipped .mia-product-item__mobile-back :is(a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])) {
    pointer-events: auto;
  }

  .mia-shades__cards .mia-product-item[aria-pressed="true"] .mia-product-item__front,
  .mia-shades__cards .mia-product-item.is-flipped .mia-product-item__front {
    pointer-events: none;
  }

  .mia-product-item__mobile-back {
    z-index: 2;
  }

  .mia-product-item__media {
    height: 100%;
    aspect-ratio: auto;
  }

  .mia-product-item__mobile-back-inner {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    text-align: center;
    width: 100%;
    min-height: 100%;
    justify-content: flex-start;
  }

  .mia-product-item__mobile-text {
    margin: 0;
    color: rgba(34, 49, 58, 0.92);
    line-height: 1.6;
  }

  .mia-product-item__mobile-text.is-empty {
    color: rgba(34, 49, 58, 0.6);
    font-style: italic;
  }

  .mia-product-item__mobile-cta .wp-block-buttons,
  .mia-product-item__mobile-cta .wp-block-button {
    width: 100%;
  }

  .mia-product-item__mobile-cta {
    margin-top: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mia-shades,
  .mia-shades__interactive,
  .mia-shades__cards,
  .mia-shades__nav,
  .mia-shades__panels,
  .mia-shades__nav-item,
  .mia-shades__panel,
  .mia-shades__cards .wp-block-columns {
    transition: none !important;
    animation: none !important;
  }

  .mia-shades:not(.mia-shades--revealed) .mia-shades__nav,
  .mia-shades:not(.mia-shades--revealed) .mia-shades__panels,
  .mia-shades:not(.mia-shades--revealed) .mia-shades__cards {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
}

.mia-features .wp-block-columns {
  gap: clamp(1rem, 4vw, 1.5rem);
}

@media (max-width: 720px) {
  .mia-features .wp-block-columns {
    flex-direction: column;
  }

  .mia-features .wp-block-column {
    background: #ffffff;
    border: 1px solid rgba(230, 234, 237, 0.55);
    border-radius: 18px;
    box-shadow: 0 14px 32px rgba(19, 111, 122, 0.12);
    padding: 1.1rem 1.3rem;
    position: relative;
    transition: box-shadow var(--mia-transition), transform var(--mia-transition);
  }

  .mia-features .wp-block-column + .wp-block-column {
    margin-top: 0;
  }

  .mia-features .wp-block-column h4 {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    position: relative;
  }

  .js .mia-features .wp-block-column h4 {
    cursor: pointer;
  }

  .js .mia-features .wp-block-column h4::after {
    content: "";
    width: 0.65rem;
    height: 0.65rem;
    border: 2px solid rgba(19, 111, 122, 0.7);
    border-top: none;
    border-left: none;
    transform: rotate(45deg);
    transition: transform var(--mia-transition);
    flex-shrink: 0;
  }

  .js .mia-features .wp-block-column.is-open h4::after {
    transform: rotate(225deg);
  }

  .js .mia-features .wp-block-column p {
    margin-top: 0.75rem;
    display: block;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.34s ease, opacity 0.28s ease, margin-top 0.28s ease;
  }

  .js .mia-features .wp-block-column.is-open p {
    opacity: 1;
  }

  .js .mia-features .wp-block-column.is-open {
    transform: translateY(-2px);
    box-shadow: 0 18px 38px rgba(19, 111, 122, 0.16);
  }

  .mia-materials__layout {
    gap: 0.85rem;
  }

  .mia-materials__card {
    box-shadow: 0 16px 34px rgba(19, 111, 122, 0.16);
    transition: box-shadow var(--mia-transition), transform var(--mia-transition);
  }

  .js .mia-materials__card {
    cursor: pointer;
  }

  .mia-materials__eyebrow {
    font-size: 0.68rem;
    letter-spacing: 0.25em;
  }

  .mia-materials__card h3 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0;
  }

  .js .mia-materials__card h3::after {
    content: "";
    width: 0.65rem;
    height: 0.65rem;
    border: 2px solid rgba(19, 111, 122, 0.7);
    border-top: none;
    border-left: none;
    transform: rotate(45deg);
    transition: transform var(--mia-transition);
    flex-shrink: 0;
  }

  .js .mia-materials__card.is-open h3::after {
    transform: rotate(225deg);
  }

  .js .mia-materials__body {
    display: block;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    margin-top: 0;
    transition: max-height 0.34s ease, opacity 0.28s ease, margin-top 0.28s ease;
  }

  .js .mia-materials__card.is-open .mia-materials__body {
    opacity: 1;
    margin-top: 0.6rem;
  }

  .js .mia-materials__card.is-open {
    transform: translateY(-2px);
    box-shadow: 0 22px 38px rgba(19, 111, 122, 0.2);
  }
}

.mia-product-item h4,
.mia-features h4,
.mia-process h4 {
  color: var(--mia-teal);
}

.mia-projects-preview .wp-block-query {
  margin-top: 1.5rem;
}

.mia-projects-preview img {
  border-radius: 18px;
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.08);
}

.mia-projects-strip-shell {
  margin-top: 1rem;
  position: relative;
}

.mia-projects-strip-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  padding-bottom: 0.3rem;
  scrollbar-width: thin;
}
.mia-projects-strip-wrapper::-webkit-scrollbar { height: 8px; }
.mia-projects-strip-wrapper::-webkit-scrollbar-thumb {
  background: rgba(34, 49, 58, 0.25);
  border-radius: 999px;
}
.mia-projects-strip-shell.has-controls {
  --mia-projects-control-offset: clamp(0.65rem, 3vw, 1.55rem);
}
.mia-projects-strip-shell.has-controls .mia-projects-strip-wrapper {
  padding-inline: var(--mia-projects-control-offset);
  scroll-padding-inline: var(--mia-projects-control-offset);
}

.mia-projects-control {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(2.25rem, 4vw, 2.9rem);
  height: clamp(2.25rem, 4vw, 2.9rem);
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: rgba(5, 58, 71, 0.88);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 16px 30px rgba(5, 58, 71, 0.18);
  border: 1px solid rgba(5, 58, 71, 0.1);
  transition: background 180ms ease, transform 220ms ease, opacity 180ms ease;
  z-index: 6;
}

.mia-projects-control--prev {
  left: clamp(0.25rem, 2.4vw, 1.2rem);
}

.mia-projects-control--next {
  right: clamp(0.25rem, 2.4vw, 1.2rem);
}

.mia-projects-control__icon {
  display: inline-flex;
}

.mia-projects-control__icon svg {
  width: clamp(16px, 3vw, 20px);
  height: clamp(16px, 3vw, 20px);
  fill: currentColor;
}

.mia-projects-control:focus-visible {
  outline: 3px solid rgba(5, 58, 71, 0.35);
  outline-offset: 2px;
}

.mia-projects-control:disabled {
  opacity: 0.38;
  cursor: default;
  box-shadow: none;
}

@media (hover: hover) and (pointer: fine) {
  .mia-projects-control:not(:disabled):hover {
    background: rgba(255, 255, 255, 0.98);
    transform: translateY(-50%) scale(1.04);
    box-shadow: 0 18px 32px rgba(5, 58, 71, 0.2);
  }
}

@media (max-width: 640px) {
  .mia-projects-control {
    width: 2.2rem;
    height: 2.2rem;
  }
}

.mia-projects-strip {
  display: flex;
  gap: clamp(0.6rem, 2vw, 0.9rem);
  width: 100%;
}

.mia-projects-strip figure {
  flex: 0 0 clamp(160px, 28vw, 220px);
  margin: 0;
  scroll-snap-align: start;
  border-radius: 14px;
  border: 1px solid rgba(230, 234, 237, 0.55);
  box-shadow: 0 12px 24px rgba(19, 111, 122, 0.12);
  background: #fff;
  overflow: hidden;
  position: relative;
}

.mia-projects-strip img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 1800ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.mia-projects-strip figure.is-focused img {
  transform: scale(1.3);
}

@media (hover: hover) and (pointer: fine) {
  .mia-projects-strip figure:hover img,
  .mia-projects-strip figure:focus-within img {
    transform: scale(1.16);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mia-projects-strip img {
    transition: none;
  }
  .mia-projects-strip figure.is-focused img {
    transform: none;
  }
}

.mia-project-card {
  display: grid;
  gap: 0.75rem;
  text-align: center;
}

.mia-project-card .wp-block-post-title {
  margin: 0;
  font-size: 1rem;
}

.mia-testimonials blockquote {
  background: #ffffff;
  border-radius: 16px;
  padding: 1.5rem;
  border: 1px solid rgba(230, 234, 237, 0.55);
  box-shadow: 0 18px 44px rgba(19, 111, 122, 0.12);
}

.mia-testimonials cite {
  font-weight: 600;
  color: var(--mia-teal);
}

/* Testimonials carousel layout */
.mia-testimonials__carousel {
  max-width: var(--mia-site-max-width);
  width: 100%;
  margin-inline: auto;
}

.mia-testimonials__track {
  display: flex;
  gap: clamp(1rem, 3vw, 1.5rem);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  padding: 0.25rem clamp(1rem, 6vw, 1.6rem) 0.5rem;
  width: 100%;
  scrollbar-width: thin;
  scroll-padding-left: clamp(1rem, 6vw, 1.6rem);
  justify-content: flex-start;
  touch-action: pan-x;
}
.mia-testimonials__track::-webkit-scrollbar { height: 8px; }
.mia-testimonials__track::-webkit-scrollbar-thumb {
  background: rgba(34, 49, 58, 0.25);
  border-radius: 999px;
}

.mia-testimonials__slide {
  scroll-snap-align: start;
  flex: 0 0 min(42ch, 90vw);
  max-width: min(42ch, 90vw);
  scroll-margin-left: clamp(1rem, 6vw, 1.6rem);
}

@media (max-width: 720px) {
  .mia-testimonials__slide {
    flex-basis: 85%;
    max-width: 85%;
  }
}

@media (min-width: 1024px) {
  .mia-testimonials__track {
    justify-content: center;
  }

  .mia-testimonials__slide {
    flex-basis: 38ch;
    max-width: 38ch;
  }
}

/* Testimonials: normalize inner spacing and top-align cards */
.mia-testimonials__track { align-items: flex-start; }
.mia-testimonials__slide { display: flex; align-items: flex-start; }
.mia-testimonials__slide .wp-block-quote { margin: 0; }
.mia-testimonials__slide .wp-block-quote > p:first-child { margin-top: 0; }
.mia-testimonials__slide .wp-block-quote > p:last-child { margin-bottom: 0; }
.mia-testimonials__slide .wp-block-quote cite { display: block; margin-top: .5rem; }

.mia-process__intro {
  max-width: 640px;
  margin: 0 auto clamp(1.25rem, 3vw, 2rem);
}

.mia-process__stack-wrapper {
  padding: clamp(0.85rem, 2.6vw, 1.35rem);
  width: min(100%, var(--mia-site-max-width));
  margin: 0 auto;
}

.mia-process__stack {
  display: grid;
  gap: clamp(1.1rem, 3vw, 1.8rem);
  width: 100%;
}

.mia-process__cta,
.mia-features__cta {
  margin-top: clamp(1.6rem, 4vw, 2.8rem);
  text-align: center;
}

.mia-process__cta .wp-block-buttons,
.mia-features__cta .wp-block-buttons {
  justify-content: center;
}

.mia-process__cta .wp-block-button,
.mia-features__cta .wp-block-button {
  margin: 0;
}

.mia-process__row {
  margin: 0;
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  width: 100%;
  background: #ffffff;
  border: 1px solid rgba(230, 234, 237, 0.65);
  border-radius: 16px;
  box-shadow: 0 12px 26px rgba(11, 62, 77, 0.1);
  overflow: hidden;
}

.mia-process__cell {
  padding: clamp(0.85rem, 2vw, 1.1rem) clamp(1rem, 3vw, 1.75rem);
  display: flex;
  align-items: center;
}

.mia-process__cell--label {
  border-right: 1px solid rgba(230, 234, 237, 0.65);
  flex: 0 0 22% !important;
  background: rgba(19, 111, 122, 0.06);
}

.mia-process__cell--body {
  flex: 1 1 auto !important;
  min-width: 0;
  transition: padding var(--mia-transition);
}

.mia-process__label {
  margin: 0;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: clamp(0.78rem, 2.4vw, 0.92rem);
  color: var(--mia-teal);
}

.mia-process__summary {
  margin: 0;
  color: var(--mia-ink);
  font-size: clamp(0.88rem, 1.9vw, 0.98rem);
  line-height: 1.4;
}

.mia-process__row:nth-child(1) .mia-process__cell--label {
  background: linear-gradient(135deg, rgba(19, 111, 122, 0.9) 0%, rgba(53, 199, 212, 0.85) 100%);
  border-right-color: rgba(14, 86, 94, 0.45);
}

.mia-process__row:nth-child(2) .mia-process__cell--label {
  background: linear-gradient(135deg, rgba(255, 122, 110, 0.88) 0%, rgba(255, 194, 122, 0.85) 100%);
  border-right-color: rgba(204, 82, 70, 0.45);
}

.mia-process__row:nth-child(3) .mia-process__cell--label {
  background: linear-gradient(135deg, rgba(34, 49, 58, 0.9) 0%, rgba(19, 111, 122, 0.85) 100%);
  border-right-color: rgba(22, 38, 46, 0.45);
}

.mia-process__row:nth-child(4) .mia-process__cell--label {
  background: linear-gradient(135deg, rgba(53, 199, 212, 0.85) 0%, rgba(247, 247, 245, 0.95) 100%);
  border-right-color: rgba(37, 152, 162, 0.45);
}

.mia-process__row:nth-child(5) .mia-process__cell--label {
  background: linear-gradient(135deg, rgba(34, 49, 58, 0.92) 0%, rgba(19, 111, 122, 0.9) 45%, rgba(53, 199, 212, 0.85) 100%);
  border-right-color: rgba(26, 44, 52, 0.45);
}

.mia-process__row:nth-child(1) .mia-process__cell--body {
  background: rgba(240, 250, 250, 0.95);
}

.mia-process__row:nth-child(2) .mia-process__cell--body {
  background: rgba(255, 244, 238, 0.95);
}

.mia-process__row:nth-child(3) .mia-process__cell--body {
  background: rgba(244, 247, 248, 0.95);
}

.mia-process__row:nth-child(4) .mia-process__cell--body {
  background: rgba(239, 250, 251, 0.95);
}

.mia-process__row:nth-child(5) .mia-process__cell--body {
  background: rgba(242, 248, 248, 0.95);
}

.mia-process__row:nth-child(1) .mia-process__label,
.mia-process__row:nth-child(2) .mia-process__label,
.mia-process__row:nth-child(3) .mia-process__label,
.mia-process__row:nth-child(5) .mia-process__label {
  color: #ffffff;
  text-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

.mia-process__row:nth-child(4) .mia-process__label {
  color: var(--mia-teal);
  text-shadow: none;
}

@media (max-width: 720px) {
  .mia-process__stack {
    gap: 0.75rem;
  }

  .mia-process__row {
    flex-direction: column;
    border-radius: 14px;
    box-shadow: 0 12px 26px rgba(11, 62, 77, 0.12);
  }

  .mia-process__cell {
    padding: clamp(0.6rem, 3.6vw, 0.85rem) clamp(0.85rem, 5vw, 1.3rem);
    flex: 1 1 auto !important;
    width: 100%;
    flex-basis: auto !important;
  }

  .mia-process__cell--label {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid rgba(230, 234, 237, 0.45);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    position: relative;
  }

  .mia-process__cell--label::after {
    display: none;
  }

  .mia-process__label {
    letter-spacing: 0.12em;
    font-size: 0.78rem;
  }

  .mia-process__cell--body {
    width: 100%;
    flex-basis: auto !important;
    display: none;
  }

  .mia-process__summary {
    font-size: 0.9rem;
  }

  .mia-process__stack-wrapper {
    padding: 0.45rem;
  }
}

.mia-why__layout {
  gap: clamp(1.5rem, 5vw, 2.75rem);
  align-items: stretch;
}

.mia-why__intro {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.mia-why__media {
  margin: 0;
}

.mia-why__media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 22px;
  box-shadow: var(--mia-shadow);
  object-fit: cover;
}

.mia-why__media.mia-why__media--compact img {
  width: 90% !important;
  margin-inline: auto;
}

.mia-why__details {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.mia-why__list {
  display: grid;
  gap: clamp(1.15rem, 3vw, 1.75rem);
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
}

@media (max-width: 560px) {
  .mia-why__list {
    grid-template-columns: 1fr;
  }
}

.mia-why__item {
  background: #ffffff;
  border-radius: 18px;
  border: 1px solid rgba(230, 234, 237, 0.55);
  box-shadow: 0 16px 34px rgba(19, 111, 122, 0.12);
  padding: 1.35rem 1.5rem;
}

.mia-why__item h4 {
  margin: 0 0 0.35rem;
  color: var(--mia-teal);
}

.mia-why__item p {
  margin: 0;
  line-height: 1.6;
}

.mia-smart-home {
  background: linear-gradient(140deg, rgba(53, 199, 212, 0.12) 0%, rgba(255, 194, 122, 0.14) 50%, rgba(255, 122, 110, 0.1) 100%);
  position: relative;
  overflow: hidden;
}

.mia-smart-home__intro {
  gap: clamp(1.5rem, 4.5vw, 3rem);
  margin-bottom: clamp(1.75rem, 5vw, 3.25rem);
}

.mia-smart-home__copy p {
  font-size: clamp(0.95rem, 1.5vw, 1.05rem);
  line-height: 1.65;
}

.mia-smart-home__media figure {
  margin: 0;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: var(--mia-shadow);
  border: 1px solid rgba(230, 234, 237, 0.65);
  background: #ffffff;
}

.mia-smart-home__media img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.mia-smart-home__cards {
  gap: clamp(1rem, 3vw, 1.75rem);
}

.mia-smart-home__card {
  background: rgba(255, 255, 255, 0.92);
  border-radius: 18px;
  border: 1px solid rgba(230, 234, 237, 0.58);
  box-shadow: 0 16px 36px rgba(19, 111, 122, 0.12);
  padding: clamp(1.35rem, 3vw, 1.75rem);
  display: grid;
  gap: 0.75rem;
  height: 100%;
}

.mia-smart-home__card h4 {
  margin: 0;
  color: var(--mia-teal);
}

.mia-smart-home__card p {
  margin: 0;
  line-height: 1.55;
}

.mia-smart-home__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
}

.mia-smart-home__list li {
  position: relative;
  padding-left: 1.5rem;
  font-weight: 600;
  color: var(--mia-ink);
}

.mia-smart-home__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.4rem;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 999px;
  border: 2px solid var(--mia-teal);
  background: rgba(53, 199, 212, 0.18);
}

@media (max-width: 820px) {
  .mia-smart-home__intro {
    gap: clamp(1.25rem, 6vw, 2rem);
  }

  .mia-smart-home__copy,
  .mia-smart-home__media {
    flex-basis: 100% !important;
  }
}

.mia-materials {
  position: relative;
  overflow: hidden;
  background: linear-gradient(130deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 236, 222, 0.75) 38%, rgba(223, 244, 246, 0.78) 100%);
  border: 1px solid rgba(230, 234, 237, 0.45);
  box-shadow: 0 28px 60px rgba(19, 111, 122, 0.16);
}

.mia-materials::before,
.mia-materials::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: 999px;
  filter: blur(60px);
  opacity: 0.45;
}

.mia-materials::before {
  inset: -22% auto auto -12%;
  width: clamp(220px, 32vw, 380px);
  height: clamp(220px, 32vw, 380px);
  background: radial-gradient(circle at top, rgba(255, 194, 122, 0.76) 0%, rgba(255, 194, 122, 0) 70%);
}

.mia-materials::after {
  inset: auto -18% -26% auto;
  width: clamp(240px, 36vw, 420px);
  height: clamp(240px, 36vw, 420px);
  background: radial-gradient(circle at bottom, rgba(53, 199, 212, 0.6) 0%, rgba(53, 199, 212, 0) 70%);
}

.mia-materials__layout {
  gap: clamp(1rem, 3vw, 1.8rem);
  position: relative;
  z-index: 1;
}

.mia-materials__column {
  display: flex;
  align-items: stretch;
}

.mia-materials__card {
  background: rgba(255, 255, 255, 0.85);
  border-radius: 22px;
  border: 1px solid rgba(230, 234, 237, 0.32);
  box-shadow: 0 18px 38px rgba(19, 111, 122, 0.12);
  padding: clamp(1.35rem, 3vw, 1.8rem);
  backdrop-filter: blur(12px);
  display: flex;
  flex-direction: column;
  gap: clamp(0.75rem, 1.8vw, 1.1rem);
  width: 100%;
  position: relative;
}

@supports (height: -moz-fit-content) {
  .mia-materials__card {
    display: grid;
  }
}

.mia-materials__cta {
  margin-top: clamp(1.2rem, 3vw, 2.2rem);
  justify-content: center;
}

.mia-materials__cta .wp-block-button {
  margin: 0;
}

.mia-process__cta .wp-block-button__link,
.mia-features__cta .wp-block-button__link,
.mia-materials__cta .wp-block-button__link {
  min-width: clamp(200px, 30vw, 240px);
}

@media (max-width: 540px) {
  .mia-process__cta .wp-block-button__link,
  .mia-features__cta .wp-block-button__link,
  .mia-materials__cta .wp-block-button__link {
    width: 100%;
  }
}

.mia-materials__body {
  display: grid;
  gap: 0.6rem;
  margin-top: 0.75rem;
}

.mia-materials__body > :first-child {
  margin-top: 0;
}

.mia-materials__body > :last-child {
  margin-bottom: 0;
}

.mia-materials__card h3 {
  margin-bottom: 0.25rem;
}

.mia-materials__card p {
  font-size: clamp(0.85rem, 1.25vw, 0.98rem);
  line-height: 1.6;
}

.mia-materials__card p:last-child {
  margin-bottom: 0;
}

.mia-materials__eyebrow {
  margin: 0;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-size: 0.72rem;
  font-weight: 600;
  color: rgba(34, 49, 58, 0.6);
}

.mia-materials__list {
  list-style: none;
  margin: 0.85rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

.mia-materials__list li {
  position: relative;
  padding-left: 1.55rem;
  font-weight: 600;
  color: var(--mia-ink);
}

.mia-materials__list li::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 0.54rem;
  height: 0.54rem;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.5);
  background: linear-gradient(150deg, #FF7A6E 0%, #FFC27A 45%, #35C7D4 100%);
  box-shadow: 0 8px 14px rgba(19, 111, 122, 0.18);
}

@media (max-width: 980px) {
  .mia-materials__layout {
    flex-wrap: wrap !important;
  }

  .mia-materials__column {
    flex-basis: 100% !important;
  }
}

.mia-faq {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(233, 241, 247, 0.92) 100%);
  border: 1px solid rgba(230, 234, 237, 0.32);
  box-shadow: 0 18px 40px rgba(19, 111, 122, 0.1);
}

.mia-faq__inner {
  max-width: 760px;
  margin: 0;
  display: grid;
  gap: 0.65rem;
  text-align: left;
  justify-items: stretch;
  width: 100%;
}

.mia-faq__inner.is-layout-constrained {
  margin-left: 0 !important;
  margin-right: auto !important;
}

.mia-faq h3 {
  margin: 0 0 0.4rem;
}

.mia-faq__intro {
  margin: 0 0 0.6rem;
  max-width: 620px;
  color: rgba(34, 49, 58, 0.72);
  line-height: 1.6;
}

.mia-faq__accordion {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.35rem;
  margin-top: 0.4rem;
  justify-content: start;
  justify-items: stretch;
  width: 100%;
}

.mia-faq__accordion.is-layout-constrained {
  width: 100%;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.mia-faq__accordion > * {
  margin: 0 !important;
}

.mia-faq__accordion .wp-block-details {
  width: 100%;
  display: block;
  box-sizing: border-box;
  min-width: 100%;
  margin: 0 !important;
}

.mia-faq__accordion .wp-block-details > * {
  width: 100%;
}

.mia-faq__item {
  width: 100%;
  min-width: 100%;
  display: block;
  box-sizing: border-box;
  margin: 0 !important;
  border-radius: 14px;
  border: 1px solid rgba(19, 111, 122, 0.14);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(245, 248, 251, 0.95) 100%);
  overflow: hidden;
  transition: border-color var(--mia-transition), box-shadow var(--mia-transition), transform var(--mia-transition);
}

.mia-faq__item:hover {
  border-color: rgba(19, 111, 122, 0.28);
  box-shadow: 0 12px 26px rgba(19, 111, 122, 0.1);
}

.mia-faq__item[open] {
  border-color: rgba(19, 111, 122, 0.32);
  box-shadow: 0 16px 30px rgba(19, 111, 122, 0.12);
  transform: translateY(-1px);
}

.mia-faq__item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.9rem 1.15rem;
  font-weight: 600;
  color: rgba(34, 49, 58, 0.92);
  position: relative;
  width: 100%;
  box-sizing: border-box;
  max-width: 100%;
  min-width: 100%;
}

.mia-faq__item summary::-webkit-details-marker {
  display: none;
}

.mia-faq__item summary:focus-visible {
  outline: 2px solid var(--mia-teal);
  outline-offset: 4px;
  border-radius: 12px;
}

.mia-faq__question {
  flex: 1;
  margin: 0;
}

.mia-faq__icon {
  width: 1rem;
  height: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(150deg, #35C7D4 0%, #136F7A 100%);
  position: relative;
  transition: transform var(--mia-transition);
  flex-shrink: 0;
  box-shadow: 0 8px 18px rgba(19, 111, 122, 0.28);
}

.mia-faq__icon::before,
.mia-faq__icon::after {
  content: "";
  position: absolute;
  background: #ffffff;
  border-radius: 2px;
  transition: transform var(--mia-transition), opacity var(--mia-transition);
}

.mia-faq__icon::before {
  width: 7px;
  height: 2px;
}

.mia-faq__icon::after {
  width: 2px;
  height: 7px;
}

.mia-faq__item[open] .mia-faq__icon {
  transform: rotate(45deg);
}

.mia-faq__item[open] .mia-faq__icon::after {
  opacity: 0;
  transform: scaleY(0);
}

.mia-faq__answer {
  padding: 0 1.15rem 0.95rem;
  color: rgba(34, 49, 58, 0.76);
  line-height: 1.6;
  font-size: 0.9rem;
  border-top: 1px solid rgba(230, 234, 237, 0.45);
  background: rgba(255, 255, 255, 0.98);
  width: 100%;
  box-sizing: border-box;
  min-width: 100%;
}

.mia-faq__answer p:last-child {
  margin-bottom: 0;
}

.mia-faq__cta {
  margin-top: 1rem;
  color: rgba(34, 49, 58, 0.62);
}

.mia-faq__cta a {
  color: var(--mia-teal);
  font-weight: 600;
  text-decoration: none;
}

.mia-faq__cta a:hover {
  text-decoration: underline;
}

.mia-contact-card {
  border: 1px solid rgba(230, 234, 237, 0.6);
  box-shadow: 0 20px 48px rgba(19, 111, 122, 0.15);
  border-radius: 22px;
  background: #ffffff;
}

.mia-contact-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mia-contact-card li {
  margin-bottom: 0.75rem;
  line-height: 1.6;
}

.mia-contact-card a {
  color: var(--mia-teal);
  text-decoration: none;
}

.mia-contact-card a:hover {
  text-decoration: underline;
}

.about-highlights {
  margin-left: 1rem;
}

.about-highlights li {
  margin-bottom: 0.65rem;
}

.about-contact-card {
  box-shadow: 0 18px 45px rgba(19, 111, 122, 0.12);
  backdrop-filter: blur(8px);
}

.about-map {
  border-radius: 18px;
  box-shadow: 0 18px 38px rgba(19, 111, 122, 0.16);
}

/* =Measurement Guide */
.measurement-guide__table {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 16px;
  background: rgba(247, 247, 245, 0.65);
  padding: 0.75rem;
}

.measurement-guide__table table {
  min-width: 560px;
  width: 100%;
}

.measurement-guide__table table th,
.measurement-guide__table table td {
  padding: 0.75rem;
}

.measurement-guide__image img,
.measurement-guide__diagram img {
  width: 100%;
  height: auto;
  border-radius: 14px;
}

.measurement-guide__mount {
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 22px 46px rgba(19, 111, 122, 0.12);
}

.measurement-guide__accordion summary {
  cursor: pointer;
  font-weight: 600;
}

.mia-cta {
  border-radius: 28px;
  overflow: hidden;
  background: var(--mia-gradient-sunset);
  color: #fff;
 box-shadow: var(--mia-shadow-strong);
 max-width: var(--mia-site-max-width);
 margin: var(--mia-section-padding-y) auto;
}

.mia-cta__inner {
  padding: clamp(2rem, 5vw, 3rem);
  text-align: left;
  color: #0d2a3a;
  display: grid;
  gap: clamp(0.85rem, 3vw, 1.4rem);
}

.mia-cta__inner h2 {
  margin: 0;
  color: #0d2a3a;
}

.mia-cta__lead {
  margin: 0;
  font-size: clamp(0.95rem, 1.5vw, 1.05rem);
  line-height: 1.65;
  color: rgba(13, 42, 58, 0.9);
}

.mia-cta__sub {
  margin: 0;
  font-size: clamp(0.88rem, 1.4vw, 1rem);
  line-height: 1.6;
  color: rgba(13, 42, 58, 0.82);
}

.mia-cta__sub a {
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}

.mia-cta__sub a:hover {
  text-decoration: underline;
}

.mia-filter-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.45rem 1.25rem;
  border-radius: 999px;
  border: 1px solid rgba(19, 111, 122, 0.35);
  margin: 0.25rem;
  color: var(--mia-ink);
  text-decoration: none;
  background: rgba(53, 199, 212, 0.12);
  backdrop-filter: blur(4px);
  transition: transform var(--mia-transition), box-shadow var(--mia-transition), background-color var(--mia-transition);
}

.mia-filter-link:hover {
  transform: translateY(-2px);
  background: var(--mia-gradient-sunset);
  color: #ffffff;
  box-shadow: 0 16px 36px rgba(19, 111, 122, 0.22);
}

.mia-filter-link:focus {
  outline: 2px solid var(--mia-teal);
  outline-offset: 2px;
}

.project-single .wp-block-gallery {
  margin-bottom: 2rem;
}

.project-single figure img {
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

/* =Templates */
main.page-content,
.contact-page,
.about-page,
.projects-archive,
.project-single,
.error-404 {
  background: #ffffff;
  border-radius: 28px;
  padding: clamp(2.5rem, 6vw, 4rem);
  border: 1px solid rgba(230, 234, 237, 0.55);
  box-shadow: 0 32px 70px rgba(19, 111, 122, 0.12);
  margin: clamp(2rem, 6vw, 3rem) auto;
  max-width: var(--mia-site-max-width);
}

/* Ensure skip-link (if added) is visible when focused */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #000;
  color: #fff;
  padding: 8px;
  z-index: 100;
  text-decoration: none;
}

.skip-link:focus {
  top: 0;
}

/* =Responsive */
@media (max-width: 960px) {
  .site-header {
    flex-direction: column;
    align-items: flex-start;
    position: static;
  }

  .mia-brand__tagline {
    display: none;
  }
}

@media (max-width: 600px) {
  .site-header {
    padding-inline: clamp(1.1rem, 7vw, 1.35rem);
    padding-top: 0.85rem;
    padding-bottom: 0.65rem;
  }

  .mia-brand__logo {
    width: 48px;
    height: 48px;
  }

  .mia-brand__wordmark img {
    width: clamp(150px, 55vw, 190px);
  }

  .site-header .wp-block-navigation a {
    padding: 0.4rem 0.7rem;
  }

  .site-header .wp-block-navigation {
    width: 100%;
  }

  .site-header .wp-block-navigation__container {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0.35rem;
  }

  .site-header .wp-block-navigation-item__content {
    width: 100%;
  }

  .site-header {
    gap: 1rem;
  }

  .mia-section,
  .mia-cta {
    margin: 2rem 1rem;
  }

  .mia-section {
    padding: var(--mia-section-padding-y-compact) clamp(1.25rem, 6vw, 1.75rem);
  }

  .mia-integrations figure {
    width: 72px;
    height: 72px;
  }

  .mia-integrations figure img {
    width: 44px;
    height: 44px;
  }

  .footer-bottom {
    justify-content: center;
    text-align: center;
    padding: 0.9rem 1.75rem;
  }

  .footer-bottom__note {
    margin-right: 0;
    width: 100%;
    margin-left: 0;
    text-align: center;
    justify-content: center;
    flex: 0 0 100%;
  }

  .footer-contact {
    margin-bottom: 1.5rem;
  }

  .footer-payment-logos {
    justify-content: center;
    margin-left: 0;
    padding-right: 0;
    flex: 0 0 100%;
  }

  .measurement-guide__hero {
    padding: 2.25rem 1.5rem !important;
  }

  .measurement-guide__foundations {
    gap: 1.25rem;
  }

  .measurement-guide__table {
    padding: 0.6rem;
  }

  .measurement-guide__table table {
    min-width: 480px;
  }

  main.page-content,
  .contact-page,
  .about-page,
  .projects-archive,
  .project-single,
  .error-404 {
    margin: 1.5rem 1rem;
    padding: 2.5rem 1.5rem;
  }
}
.mia-integrations .wp-lightbox__button,
.mia-integrations .wp-lightbox__icon,
.mia-integrations .wp-lightbox__overlay {
  display: none !important;
}

.mia-faq__accordion .wp-block-group {
  width: 100%;
}

/* =FAQ Pattern (core Details-based) */
.faq-list {
  max-width: 760px;
  margin: 0 auto;
  display: grid;
  gap: 0.5rem;
}

/* Fallback: style any content inside <details> when not wrapped in .mia-faq__answer */
.mia-faq__item > :not(summary) {
  display: block;
  padding: 0 1.15rem 0.95rem;
  color: rgba(34, 49, 58, 0.76);
  line-height: 1.6;
  font-size: 0.9rem;
  border-top: 1px solid rgba(230, 234, 237, 0.45);
  background: rgba(255, 255, 255, 0.98);
  width: 100%;
  box-sizing: border-box;
  min-width: 100%;
}

/* Minor heading/paragraph polish in the FAQ list */
.faq-list h2 { margin-bottom: 0.25rem; }
.faq-list > p { margin-top: 0; color: rgba(34,49,58,.72); }

.about-contact-card {
  border: 1px solid var(--mia-line);
  border-radius: 22px;
  background-color: rgba(255, 255, 255, 0.8);
  padding: 1.5rem;
}
.about-contact-card p { margin: 0.35rem 0; }
.about-contact-card h4.wp-block-heading { margin-top: 0; }




/* =Forms (Forminator) — Miami Smart Blinds */
.mia-form .forminator-ui {
  background: #fff;
  border: 1px solid var(--mia-line);
  border-radius: var(--mia-section-radius);
  box-shadow: 0 20px 45px rgba(11, 62, 77, 0.08);
  padding: clamp(1.25rem, 3.5vw, 2rem);
}

/* Labels */
.mia-form .forminator-label {
  font-weight: 700;
  color: var(--mia-ink);
  margin-bottom: 0.35rem;
  letter-spacing: .01em;
}

/* Inputs / selects / textareas */
.mia-form .forminator-input,
.mia-form .forminator-textarea,
.mia-form .forminator-select {
  width: 100%;
  border: 1px solid rgba(230, 234, 237, 0.9);
  border-radius: var(--mia-radius);
  padding: 0.85rem 1rem;
  background: #fff;
  box-shadow: 0 4px 16px rgba(19, 111, 122, 0.06) inset;
  transition:
    border-color var(--mia-transition),
    box-shadow var(--mia-transition),
    background-color var(--mia-transition);
}

.mia-form .forminator-input:focus,
.mia-form .forminator-textarea:focus,
.mia-form .forminator-select:focus {
  outline: 0;
  border-color: var(--mia-teal);
  box-shadow:
    0 0 0 3px rgba(53, 199, 212, 0.22),
    0 10px 24px rgba(19, 111, 122, 0.12);
}

/* Field spacing */
.mia-form .forminator-row { gap: clamp(0.6rem, 2vw, 1rem); }
.mia-form .forminator-field { margin-bottom: clamp(0.6rem, 2vw, 1rem); }
.mia-form .forminator-field-textarea {
  margin-top: clamp(1.25rem, 3vw, 1.75rem) !important;
}
.mia-form .forminator-field-textarea .forminator-label {
  margin-bottom: 0.6rem !important;
}
.mia-form .forminator-field-textarea .forminator-field--inner {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.mia-form .forminator-field-textarea .forminator-label.forminator-floating--textarea {
  position: static !important;
  padding: 0 !important;
  transform: none !important;
  font-size: 1rem !important;
  line-height: 1.35;
}
.mia-form .forminator-field-textarea.forminator-is_active .forminator-label.forminator-floating--textarea,
.mia-form .forminator-field-textarea.forminator-is_filled .forminator-label.forminator-floating--textarea {
  transform: none !important;
}
.mia-form .forminator-field-textarea textarea,
.mia-form .forminator-field-textarea .forminator-textarea,
.mia-form .forminator-field-textarea .forminator-input {
  padding-top: 0.95rem !important;
}
.mia-form .forminator-field-textarea .forminator-counter {
  align-self: flex-end;
  margin: 0;
}

/* Help / error / success */
.mia-form .forminator-description,
.mia-form .forminator-hint {
  color: rgba(34, 49, 58, 0.7);
  font-size: 0.9rem;
}

.mia-form .forminator-error-message {
  background: var(--mia-coral);
  color: #fff;
  border-radius: var(--mia-radius);
  padding: 0.55rem 0.8rem;
}

.mia-form .forminator-response-message.forminator-success {
  border: 1px solid rgba(53, 199, 212, 0.35);
  background: rgba(53, 199, 212, 0.12);
  color: var(--mia-ink);
  border-radius: var(--mia-radius);
  padding: 0.75rem 1rem;
}

/* BIG primary submit button (brand-aligned) */
.mia-form .forminator-button,
.mia-form button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 1.05rem clamp(1.5rem, 4vw, 2rem);
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: 0.02em;
  background: var(--mia-teal);
  color: #fff;
  border: 0;
  box-shadow: 0 18px 40px rgba(19, 111, 122, 0.28);
  transition:
    transform var(--mia-transition),
    box-shadow var(--mia-transition),
    filter var(--mia-transition);
}

.mia-form .forminator-button:hover,
.mia-form .forminator-button:focus-visible {
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow: 0 22px 50px rgba(19, 111, 122, 0.32);
}

/* Secondary style (if you use two buttons) */
.mia-form .forminator-button--secondary {
  background: transparent;
  color: var(--mia-ink);
  border: 2px solid var(--mia-ink);
}

/* Compact variant for LPs */
.mia-form.mia-form--compact .forminator-ui {
  padding: clamp(1rem, 3vw, 1.25rem);
}
.mia-form.mia-form--compact .forminator-button {
  padding: 0.9rem 1.25rem;
}


/* =Forms — additional layout polish */
/* Comfortable readable width; still fluid in narrow columns */
.mia-form .forminator-ui { 
  max-width: 720px; 
  margin-inline: auto; 
}

/* Wider variant if you ever need it: add class mia-form--wide */
.mia-form.mia-form--wide .forminator-ui { max-width: 860px; }

/* Taller inputs for better tap targets */
.mia-form .forminator-input,
.mia-form .forminator-select { min-height: 48px; }
.mia-form .forminator-textarea { min-height: 160px; }

/* Label + required asterisk polish */
.mia-form .forminator-label { display: inline-flex; gap: .35rem; align-items: baseline; }
.mia-form .forminator-label .forminator-required { color: var(--mia-coral); font-weight: 700; }

/* Inline consent: nicer spacing/alignment */
.mia-form .forminator-checkbox { display: flex; align-items: flex-start; gap: .6rem; }
.mia-form .forminator-checkbox input[type="checkbox"] { margin-top: .2rem; }

/* Hide Forminator's admin-only “Edit form” link in production views */
.mia-form .forminator-edit-link { display: none !important; }

/* Success state emphasis */
.mia-form .forminator-response-message.forminator-success { 
  background: linear-gradient(180deg, rgba(53,199,212,.12) 0%, rgba(255,255,255,.9) 100%);
  border-color: rgba(53,199,212,.4);
}

/* Button hover/active micro-interactions */
.mia-form .forminator-button:hover { transform: translateY(-2px); }
.mia-form .forminator-button:active { transform: translateY(0); filter: brightness(.98); box-shadow: 0 12px 32px rgba(19,111,122,.24); }


/* =Forms — visual polish & overrides (Forminator) */
/* Stronger specificity and a few !important flags to overrule plugin defaults */
.mia-form .forminator-ui,
.mia-form .forminator-ui.forminator-design--default,
.mia-form .forminator-ui.forminator-design--flat {
  --msb-input-bg: #fff;
  --msb-input-border: 1px solid rgba(230,234,237,0.9);
}

/* Inputs */
.mia-form .forminator-input,
.mia-form .forminator-textarea,
.mia-form .forminator-select {
  background-color: var(--msb-input-bg) !important;
  border: var(--msb-input-border) !important;
  border-radius: 12px;
  font-size: 1rem;
}

/* Placeholder tone */
.mia-form ::placeholder { color: rgba(34,49,58,0.46); }

/* Focus ring (accessible, brand aligned) */
.mia-form .forminator-input:focus,
.mia-form .forminator-textarea:focus,
.mia-form .forminator-select:focus {
  outline: 0;
  border-color: var(--mia-teal) !important;
  box-shadow:
    0 0 0 3px rgba(53,199,212,0.22),
    0 10px 24px rgba(19,111,122,0.12);
}

/* Remove any row separators coming from plugin skins */
.mia-form .forminator-row,
.mia-form .forminator-field { border: 0 !important; }

/* Character counter style */
.mia-form .forminator-counter {
  display: block;
  text-align: right;
  font-size: 0.8rem;
  color: rgba(34,49,58,0.46);
  margin-top: 0.35rem;
}

/* Select: cleaner arrow and spacing */
.mia-form .forminator-select { 
  -webkit-appearance: none; 
  -moz-appearance: none; 
  appearance: none; 
  padding-right: 2.5rem; 
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(34,49,58,.6) 50%),
    linear-gradient(135deg, rgba(34,49,58,.6) 50%, transparent 50%),
    linear-gradient(to right, rgba(0,0,0,0.12), rgba(0,0,0,0.12));
  background-position:
    calc(100% - 1.15rem) 1.1rem,
    calc(100% - 0.75rem) 1.1rem,
    calc(100% - 2.2rem) 50%;
  background-size: 6px 6px, 6px 6px, 1px 1.65rem;
  background-repeat: no-repeat;
}

/* Checkboxes / radios use brand accent */
.mia-form input[type="checkbox"],
.mia-form input[type="radio"] { accent-color: var(--mia-teal); }

/* Error state */
.mia-form .forminator-has_error .forminator-input,
.mia-form .forminator-has_error .forminator-textarea,
.mia-form .forminator-has_error .forminator-select {
  border-color: var(--mia-coral) !important;
  box-shadow: 0 0 0 3px rgba(255,122,110,.18), 0 10px 24px rgba(19,111,122,.08);
}
.mia-form .forminator-error-message { margin-top: 0.35rem; }

/* Submit button: force full-width + loading state */
.mia-form .forminator-button,
.mia-form .forminator-button.forminator-button-submit,
.mia-form button[type="submit"] {
  width: 100% !important;
}
.mia-form .forminator-button[disabled],
.mia-form .forminator-button:disabled {
  opacity: .75; filter: grayscale(.2); cursor: not-allowed; box-shadow: none;
}

/* Spacing before submit row */
.mia-form .forminator-row.forminator-row--submit { margin-top: .5rem; }
/* =Forms — fix cramped edges & add gutters */
/* Add inner padding on the form card and consistent left/right gutters so fields never hug the edge */
.mia-form .forminator-ui {
  padding: clamp(1rem, 2.8vw, 1.5rem) clamp(1.2rem, 3.6vw, 2rem) clamp(1.2rem, 3vw, 1.6rem) !important;
}

/* Ensure Forminator rows respect the gutters and don't use negative margins */
.mia-form .forminator-ui .forminator-row {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: clamp(0.5rem, 2vw, 1rem);
  padding-right: clamp(0.5rem, 2vw, 1rem);
}

/* Vertical rhythm between fields */
.mia-form .forminator-field { 
  padding-top: 0.15rem; 
  padding-bottom: 0.15rem; 
}

/* Inputs get slightly more internal padding and radius for a premium feel */
.mia-form .forminator-input,
.mia-form .forminator-textarea,
.mia-form .forminator-select {
  padding: 0.95rem 1.05rem;
  border-radius: 12px;
}

/* Submit row spacing so the button doesn't stick to edges */
.mia-form .forminator-row--submit {
  padding-left: clamp(0.5rem, 2vw, 1rem) !important;
  padding-right: clamp(0.5rem, 2vw, 1rem) !important;
  margin-top: 0.5rem !important;
}
.mia-form .forminator-row { display: flex; flex-wrap: wrap; }
.mia-form .forminator-row > .forminator-col,
.mia-form .forminator-row > [class*="forminator-col-"] {
  flex: 1 1 100% !important;
  max-width: 100% !important;
  width: 100% !important; /* override inline widths */
  min-width: 0; /* allow inputs to stretch inside flex */
  box-sizing: border-box;
}
.mia-form .forminator-row > .forminator-col .forminator-field { width: 100%; }

/* Address composite field: ensure all subfields go full width unless we opt into 2-up */
.mia-form .forminator-address .forminator-row > .forminator-col,
.mia-form .forminator-address .forminator-row > [class*="forminator-col-"] {
  flex: 1 1 100% !important;
  max-width: 100% !important;
  width: 100% !important;
}

/* Optional: two-column layout on desktop — add class `mia-form--two` on the wrapper when desired */
@media (min-width: 900px) {
  .mia-form.mia-form--two .forminator-row > .forminator-col,
  .mia-form.mia-form--two .forminator-row > [class*="forminator-col-"] {
    flex: 1 1 calc(50% - 0.75rem) !important;
    max-width: calc(50% - 0.75rem) !important;
  }
  /* Force full-width for any designated full rows (useful for Message textarea) */
  .mia-form.mia-form--two .forminator-row > .forminator-col.is-full,
  .mia-form.mia-form--two .forminator-row > .forminator-col.forminator-col-full {
    flex-basis: 100% !important;
    max-width: 100% !important;
  }
}
/* =Forms — force consistent field widths; fix narrow City field */
/* Ensure any Forminator column size helpers are neutralized */
.mia-form .forminator-row > .forminator-col-small,
.mia-form .forminator-row > .forminator-col-medium,
.mia-form .forminator-row > .forminator-col-large,
.mia-form .forminator-row > .forminator-col-3,
.mia-form .forminator-row > .forminator-col-4,
.mia-form .forminator-row > .forminator-col-5,
.mia-form .forminator-row > .forminator-col-6,
.mia-form .forminator-row > .forminator-col-7,
.mia-form .forminator-row > .forminator-col-8,
.mia-form .forminator-row > .forminator-col-9,
.mia-form .forminator-row > .forminator-col-10,
.mia-form .forminator-row > .forminator-col-11 {
  flex: 1 1 100% !important;
  max-width: 100% !important;
  width: 100% !important;
}

/* Address composite fields: stack all subfields full width */
.mia-form .forminator-address .forminator-row,
.mia-form .forminator-address .forminator-fields-row { display: flex; flex-wrap: wrap; }
.mia-form .forminator-address .forminator-row > *,
.mia-form .forminator-address .forminator-fields-row > * {
  flex: 1 1 100% !important;
  max-width: 100% !important;
  width: 100% !important;
  min-width: 0;
}
.mia-form .forminator-address .forminator-input,
.mia-form .forminator-address .forminator-select,
.mia-form .forminator-address .forminator-textarea { width: 100% !important; max-width: 100% !important; }

/* Heuristic: if the input name contains city/town, force full width to defeat any plugin inline widths */
.mia-form input[name*="city"],
.mia-form input[name*="town"],
.mia-form .forminator-field[data-field*="city"] .forminator-input {
  width: 100% !important;
  max-width: 100% !important;
}
.mia-form .forminator-row { display: flex; flex-wrap: wrap; }
.mia-form .forminator-row > .forminator-col {
  float: none !important;
  flex: 0 0 100% !important;
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box;
}
/* Kill inline width styles left by the builder */
.mia-form .forminator-row > [style*="width"] {
  width: 100% !important;
  max-width: 100% !important;
  flex-basis: 100% !important;
}
/* Ensure the inner field wrappers and controls expand */
.mia-form .forminator-field,
.mia-form .forminator-field > .forminator-field--inner,
.mia-form .forminator-field .forminator-input,
.mia-form .forminator-field .forminator-select,
.mia-form .forminator-field .forminator-textarea {
  width: 100% !important;
  max-width: 100% !important;
  display: block;
}
/* Address composite: stack all parts full width */
.mia-form .forminator-address .forminator-fields-row > .forminator-col {
  flex: 0 0 100% !important;
  max-width: 100% !important;
}
/* Target city/town inputs explicitly (case-insensitive attribute selector) */
.mia-form input[name*="city" i],
.mia-form input[name*="town" i] {
  width: 100% !important;
  max-width: none !important;
}
/* Guard for Safari flex min-width issues */
.mia-form .forminator-row > .forminator-col .forminator-field { min-width: 0; }


/* =Forms — City width: enforce full width & provide field-level override */
/* 1) Nuclear safety net: make all text-like controls full width inside forms */
.mia-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.mia-form select,
.mia-form textarea {
  width: 100% !important;
  max-width: 100% !important;
}

/* 2) Kill inline max-width/width that Forminator may inject on wrappers */
.mia-form .forminator-field[style*="width"],
.mia-form .forminator-field[style*="max-width"],
.mia-form .forminator-col[style*="width"],
.mia-form .forminator-col[style*="max-width"] {
  width: 100% !important;
  max-width: 100% !important;
  flex-basis: 100% !important;
}

/* 3) Provide a field-level escape hatch you can set in the builder */
/*   In Forminator → City field → Advanced → Additional CSS classes: add `is-full` */
.mia-form .forminator-field.is-full,
.mia-form .forminator-field.forminator-col-full {
  width: 100% !important;
  max-width: 100% !important;
}
.mia-form .forminator-field.is-full .forminator-field--inner { width: 100% !important; }

/* 4) Address composite: also normalize label+input stacks */
.mia-form .forminator-address .forminator-field--inner,
.mia-form .forminator-address .forminator-row,
.mia-form .forminator-address .forminator-fields-row {
  display: block !important;
}

/* 5) Target common City/Town input names explicitly (case-insensitive) */
.mia-form input[name*="city" i],
.mia-form input[name*="town" i] {
  width: 100% !important;
  max-width: 100% !important;
}
/* =Forms — Professional layout reset & styling (final pass) */
/* Goals: full‑width fields by default, clean grid, generous gutters, consistent visuals */

/* 0) Local design tokens for forms (can tweak later) */
.mia-form .forminator-ui {
  --msb-form-max: 760px;
  --msb-gap-y: 0.85rem;
  --msb-gap-x: 1rem;
  --msb-pad-y: clamp(1.2rem, 3.4vw, 1.8rem);
  --msb-pad-x: clamp(1.25rem, 4vw, 2.2rem);
  --msb-border: 1px solid rgba(230,234,237,.9);
  --msb-radius: 16px;
  --msb-shadow: 0 22px 48px rgba(11,62,77,.10);
}

/* 1) Card */
.mia-form .forminator-ui {
  max-width: var(--msb-form-max);
  margin-inline: auto;
  padding: var(--msb-pad-y) var(--msb-pad-x);
  background: #fff;
  border: var(--msb-border);
  border-radius: var(--msb-radius);
  box-shadow: var(--msb-shadow);
}

/* 2) GRID: flatten Forminator rows/cols so every field is full width by default */
.mia-form .forminator-ui form { display: grid; grid-template-columns: 1fr; row-gap: var(--msb-gap-y); column-gap: var(--msb-gap-x); }
.mia-form .forminator-row,
.mia-form .forminator-col,
.mia-form .forminator-row > [class*="forminator-col-"],
.mia-form .forminator-fields-row {
  display: contents !important; /* remove width math; let grid control layout */
}

/* 3) Fields occupy full grid width */
.mia-form .forminator-field,
.mia-form .forminator-field > .forminator-field--inner { width: 100% !important; max-width: 100% !important; }

/* 4) Typography & labels */
.mia-form .forminator-label { font-weight: 700; color: var(--mia-ink); margin-bottom: 0.35rem; letter-spacing: .01em; }
.mia-form .forminator-label .forminator-required { color: var(--mia-coral); margin-left: .25rem; }

/* 5) Controls */
.mia-form .forminator-input,
.mia-form .forminator-textarea,
.mia-form .forminator-select {
  width: 100% !important;
  background: #fff;
  border: 1px solid rgba(230,234,237,.9) !important;
  border-radius: 12px;
  padding: 0.95rem 1.05rem;
  box-shadow: 0 4px 14px rgba(19,111,122,.06) inset;
}
.mia-form ::placeholder { color: rgba(34,49,58,.46); }
.mia-form .forminator-input:focus,
.mia-form .forminator-textarea:focus,
.mia-form .forminator-select:focus {
  outline: 0;
  border-color: var(--mia-teal) !important;
  box-shadow: 0 0 0 3px rgba(53,199,212,.22), 0 10px 24px rgba(19,111,122,.12);
}

/* 6) Select caret */
.mia-form .forminator-select {
  -webkit-appearance: none; appearance: none; padding-right: 2.4rem;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(34,49,58,.6) 50%),
    linear-gradient(135deg, rgba(34,49,58,.6) 50%, transparent 50%),
    linear-gradient(to right, rgba(0,0,0,0.12), rgba(0,0,0,0.12));
  background-position:
    calc(100% - 1.15rem) 1.1rem,
    calc(100% - 0.75rem) 1.1rem,
    calc(100% - 2.1rem) 50%;
  background-size: 6px 6px, 6px 6px, 1px 1.6rem;
  background-repeat: no-repeat;
}

/* 7) Help / errors / success */
.mia-form .forminator-description, .mia-form .forminator-hint { color: rgba(34,49,58,.7); font-size: .9rem; }
.mia-form .forminator-error-message { background: var(--mia-coral); color: #fff; border-radius: 12px; padding: .55rem .8rem; margin-top: .35rem; }
.mia-form .forminator-has_error .forminator-input,
.mia-form .forminator-has_error .forminator-textarea,
.mia-form .forminator-has_error .forminator-select { border-color: var(--mia-coral) !important; box-shadow: 0 0 0 3px rgba(255,122,110,.18), 0 10px 24px rgba(19,111,122,.08); }
.mia-form .forminator-response-message.forminator-success { border: 1px solid rgba(53,199,212,.35); background: linear-gradient(180deg, rgba(53,199,212,.12) 0%, rgba(255,255,255,.92) 100%); border-radius: 12px; padding: .75rem 1rem; }

/* 8) Submit button */
.mia-form .forminator-row--submit { display: contents !important; }
.mia-form .forminator-button,
.mia-form .forminator-button.forminator-button-submit,
.mia-form button[type="submit"] {
  width: 100% !important;
  padding: 1.05rem clamp(1.5rem, 4vw, 2rem);
  border-radius: 999px;
  font-weight: 700; letter-spacing: .02em;
  background: var(--mia-teal); color: #fff; border: 0;
  box-shadow: 0 18px 40px rgba(19,111,122,.28);
  transition: transform var(--mia-transition), box-shadow var(--mia-transition), filter var(--mia-transition);
}
.mia-form .forminator-button:hover, .mia-form .forminator-button:focus-visible { transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 22px 50px rgba(19,111,122,.32); }
.mia-form .forminator-button[disabled] { opacity: .75; filter: grayscale(.2); cursor: not-allowed; box-shadow: none; }

/* 9) Optional two-column layout on larger screens: add `mia-form--two` to wrapper */
@media (min-width: 960px) {
  .mia-form.mia-form--two .forminator-ui form { grid-template-columns: 1fr 1fr; }
  /* Default: make every field span both unless explicitly halved */
  .mia-form.mia-form--two .forminator-field { grid-column: 1 / -1; }
  /* Use `is-half` in Forminator → Field → Advanced → Additional CSS classes for 1/2 width */
  .mia-form.mia-form--two .forminator-field.is-half { grid-column: auto; }
}

/* 10) Final nuclear safety nets (in case builder injects inline widths) */
.mia-form .forminator-field[style*="width"],
.mia-form .forminator-col[style*="width"],
.mia-form .forminator-col[style*="max-width"] { width: 100% !important; max-width: 100% !important; }
.mia-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.mia-form select, .mia-form textarea { width: 100% !important; max-width: 100% !important; }


/* =Request Call Modal */
.mia-request-call {
  margin-block: 0;
  padding-block: var(--wp--style--block-gap, 24px);
}

.mia-request-call > *:first-child {
  margin-block-start: 0;
}

.mia-request-call > *:last-child {
  margin-block-end: 0;
}

.mia-modal[hidden] {
  display: none !important;
}

.mia-modal {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1.5rem, 5vw, 3rem);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.24s ease;
}

.mia-modal.is-active {
  opacity: 1;
  pointer-events: auto;
}

.mia-modal__backdrop {
  position: absolute;
  inset: 0;
  background: none;
  backdrop-filter: none;
}

.mia-modal__dialog {
  position: relative;
  width: min(720px, 100%);
  max-height: min(100vh, 960px);
  overflow-y: auto;
  background: #ffffff;
  border-radius: 24px;
  box-shadow: 0 30px 65px rgba(11, 62, 77, 0.28);
  padding: clamp(1.6rem, 4vw, 2.35rem);
  transform: translateY(16px);
  opacity: 0;
  transition: transform 0.28s ease, opacity 0.28s ease;
}

.mia-modal.is-active .mia-modal__dialog {
  transform: translateY(0);
  opacity: 1;
}

.mia-modal__content {
  position: relative;
  z-index: 1;
  width: 100%;
}

.mia-modal__header {
  text-align: center;
  margin-bottom: clamp(1rem, 3vw, 1.6rem);
}

.mia-modal__header h2 {
  margin: 0;
  font-size: clamp(1.35rem, 3vw, 1.9rem);
}

.mia-modal__subtitle {
  margin: 0.75rem 0 0;
  color: rgba(34, 49, 58, 0.75);
  font-size: clamp(0.95rem, 2.4vw, 1.05rem);
  line-height: 1.6;
}

.mia-modal__close {
  position: absolute;
  top: clamp(0.6rem, 2vw, 0.9rem);
  right: clamp(0.6rem, 2vw, 0.9rem);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: none;
  background: rgba(34, 49, 58, 0.08);
  color: var(--mia-ink);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  transition: transform var(--mia-transition), background-color var(--mia-transition), color var(--mia-transition);
}

.mia-modal__close:hover,
.mia-modal__close:focus-visible {
  outline: none;
  background: rgba(34, 49, 58, 0.16);
  color: var(--mia-teal);
  transform: rotate(90deg);
}

.mia-modal__body {
  position: relative;
  z-index: 1;
}

.mia-modal__noscript {
  margin-top: 1rem;
  text-align: center;
  font-size: 0.95rem;
  color: rgba(34, 49, 58, 0.72);
}

body.has-request-call-open,
body.has-measurement-open {
  overflow: hidden;
}

.mia-modal .mia-form > .forminator-ui[data-form] {
  display: none !important;
}

.mia-modal form.forminator-custom-form {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

@media (max-width: 720px) {
  .mia-modal {
    padding-top: calc(clamp(1rem, 4vw, 1.6rem) + env(safe-area-inset-top, 0px));
    padding-right: clamp(1rem, 4vw, 1.6rem);
    padding-bottom: calc(clamp(1rem, 4vw, 1.6rem) + env(safe-area-inset-bottom, 0px));
    padding-left: clamp(1rem, 4vw, 1.6rem);
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .mia-modal__dialog {
    border-radius: 20px;
    width: 100%;
    max-height: calc(
      100vh
      - clamp(1rem, 4vw, 1.6rem) * 2
      - env(safe-area-inset-top, 0px)
      - env(safe-area-inset-bottom, 0px)
    );
    margin: 0;
  }

  .mia-modal__close {
    width: 38px;
    height: 38px;
    font-size: 1.4rem;
  }
}

.mia-modal--measurement .mia-modal__form {
  margin-top: clamp(1rem, 3vw, 1.6rem);
}

.mia-modal--measurement .mia-measurement-inline {
  display: flex;
  gap: clamp(0.85rem, 2.4vw, 1.4rem);
  align-items: flex-start;
  flex-wrap: wrap;
  margin-bottom: clamp(1rem, 3vw, 1.6rem);
}

.mia-modal--measurement .mia-measurement-inline .forminator-row {
  flex: 1 1 240px;
  margin-bottom: 0;
}

.mia-modal--measurement .mia-measurement-inline .forminator-row + .forminator-row {
  margin-top: 0;
}

@media (max-width: 600px) {
  .mia-modal--measurement .mia-measurement-inline {
    flex-direction: column;
    align-items: stretch;
  }
}
/* Shades layout styles */

#shades-details-view {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 1000;
}

.shades-details-container {
    display: grid;
    grid-template-columns: 1fr 3fr 3fr;
    height: 100%;
}

#shades-nav {
  background-color: #f4f4f4;
  padding: 20px;
}

#shades-content {
  padding: 20px;
  background-color: #fff;
  text-align: center;
}

#shade-info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
}

#shades-close {
  position: absolute;
  top: 20px;
  right: 20px;
  background: none;
  border: none;
  font-size: 30px;
  color: #fff;
  cursor: pointer;
}

#shades-container.details-view-active .wp-block-group {
  display: none;
}

#shades-container.details-view-active #shades-details-view {
  display: block;
}

#shades-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#shades-nav li {
    padding: 10px;
    cursor: pointer;
}

#shades-nav li.active {
    background-color: #ddd;
}

/* Hide Forminator's front-end admin edit link */
.forminator-module-edit-link { display: none !important; }

/* front-end */
.z-top { position: relative; z-index: 1000; }

/* editor canvas so you see it in Gutenberg too */
.editor-styles-wrapper .z-top { position: relative; z-index: 1000; }