:root {
  --teal: #07585b;
  --teal-dark: #064d50;
  --white: #fff;
  --muted: rgba(255,255,255,.82);
  --line: rgba(255,255,255,.34);
  --gutter: clamp(34px, 3.6vw, 62px);
}

* { box-sizing: border-box; }
html { color-scheme: dark; scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  background: #191919;
  color: #fff;
  font-family: "Jost", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
button, input, textarea, select { font-family: "Jost", sans-serif; }
svg, img { display: block; }

.skip-link {
  position: fixed;
  left: 12px;
  top: 12px;
  z-index: 999;
  padding: 10px 14px;
  border-radius: 10px;
  background: #fff;
  color: #111;
  transform: translateY(-160%);
  transition: transform .16s ease;
}
.skip-link:focus { transform: translateY(0); }

.hero {
  position: relative;
  min-height: 100svh;
  height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background: #625b55;
}

.hero-picture,
.hero-image,
.hero-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero-picture { z-index: -3; }
.hero-image {
  object-fit: cover;
  object-position: 50% 50%;
  filter: saturate(.97) contrast(1.01) brightness(1.025);
}
.hero-overlay {
  z-index: -2;
  background:
    linear-gradient(90deg, rgba(15,12,10,.42) 0%, rgba(15,12,10,.22) 25%, rgba(15,12,10,.05) 53%, rgba(15,12,10,.04) 78%, rgba(15,12,10,.09) 100%),
    linear-gradient(180deg, rgba(17,14,12,.07) 0%, rgba(17,14,12,0) 45%, rgba(10,10,10,.26) 100%);
}

/* Header: compact floating navigation that remains visible across the full page. */
.site-header {
  position: fixed;
  z-index: 1000;
  top: clamp(20px, 2.55vh, 29px);
  left: 50%;
  width: clamp(790px, 52.4vw, 1005px);
  min-height: clamp(70px, 8.1vh, 78px);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 9px 19px 9px 25px;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 999px;
  background: rgba(58,52,48,.48);
  box-shadow: 0 13px 34px rgba(0,0,0,.11);
  -webkit-backdrop-filter: blur(16px) saturate(112%);
  backdrop-filter: blur(16px) saturate(112%);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: max-content;
  font-size: clamp(1rem, 1.09vw, 1.15rem);
  font-weight: 760;
  letter-spacing: -.025em;
}
.brand-mark { width: 34px; height: 34px; display: grid; place-items: center; }
.brand-mark svg { width: 100%; height: 100%; fill: none; stroke: #197a7c; stroke-width: 2; stroke-linejoin: round; }
.desktop-nav { display: flex; align-items: center; gap: clamp(20px, 2vw, 32px); font-size: .78rem; color: rgba(255,255,255,.84); }
.desktop-nav > a:not(.nav-quote) { transition: color .16s ease; }
.desktop-nav > a:not(.nav-quote):hover,
.desktop-nav > a[aria-current="page"] { color: #fff; }
.nav-quote {
  min-width: 112px;
  padding: 12px 20px;
  text-align: center;
  border-radius: 10px;
  background: #064f52;
  color: #fff;
  font-weight: 760;
}

.mobile-menu { display: none; position: relative; }
.mobile-menu summary {
  list-style: none;
  width: 42px;
  height: 42px;
  display: grid;
  place-content: center;
  gap: 4px;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 50%;
  background: rgba(255,255,255,.08);
}
.mobile-menu summary::-webkit-details-marker { display: none; }
.mobile-menu summary span { width: 17px; height: 1.5px; border-radius: 4px; background: #fff; }
.mobile-menu nav {
  position: absolute;
  top: 53px;
  right: 0;
  width: 220px;
  display: grid;
  gap: 4px;
  padding: 11px;
  border: 1px solid rgba(255,255,255,.20);
  border-radius: 17px;
  background: rgba(32,29,27,.94);
  box-shadow: 0 20px 50px rgba(0,0,0,.25);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
.mobile-menu nav a { padding: 11px 12px; border-radius: 10px; font-size: .92rem; }
.mobile-menu nav a:last-child { background: var(--teal-dark); }

/* Decorative top typography.  Coordinates are based on the supplied 1672x941 reference. */
.hero-slogan {
  position: absolute;
  z-index: 1;
  top: clamp(122px, 14.9vh, 151px);
  left: clamp(120px, 13.05vw, 252px);
  pointer-events: none;
  user-select: none;
}
.hero-slogan-main {
  font-family: "Jost", sans-serif;
  font-size: clamp(8.4rem, 13.4vw, 16rem);
  font-weight: 900;
  line-height: .73;
  letter-spacing: -.073em;
  white-space: nowrap;
  color: rgba(255,255,255,.96);
  text-shadow: 0 6px 28px rgba(0,0,0,.07);
  transform: scaleX(1.20);
  transform-origin: left top;
}
.hero-slogan-script-image {
  position: absolute;
  left: clamp(385px, 27.4vw, 530px);
  top: clamp(112px, 8.1vw, 156px);
  width: clamp(390px, 29.2vw, 560px);
  height: auto;
  object-fit: contain;
}
.hero-slogan-script-text {
  position: absolute;
  left: clamp(385px, 27.4vw, 530px);
  top: clamp(112px, 13.8vw, 262px);
  width: max-content;
  color: var(--teal);
  font-family: "Lobster", cursive;
  font-size: clamp(4.4rem, 8vw, 8.8rem);
  line-height: .72;
  transform: rotate(-2deg);
}

/* Bottom content is anchored to the viewport edges, not a centered max-width container. */
.hero-layout {
  position: absolute;
  z-index: 5;
  left: var(--gutter);
  right: var(--gutter);
  bottom: clamp(46px, 5.1vh, 54px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(390px, 25.7vw, 430px);
  gap: clamp(36px, 5vw, 84px);
  align-items: end;
}
.hero-copy { width: min(100%, 535px); }
.hero-eyebrow {
  margin: 0 0 23px;
  color: rgba(255,255,255,.90);
  font-size: clamp(.70rem, .78vw, .82rem);
  font-weight: 760;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.hero-copy h1 {
  margin: 0;
  max-width: 380px;
  font-size: clamp(2.15rem, 2.35vw, 2.55rem);
  line-height: .98;
  letter-spacing: -.035em;
  text-wrap: balance;
}
/* The earlier build rendered an extra large subtitle, which pushed the layout away from the reference. */
.hero-supporting { display: none; }
.hero-description {
  margin: 18px 0 0;
  max-width: 470px;
  color: rgba(255,255,255,.88);
  font-size: clamp(.95rem, 1vw, 1.05rem);
  line-height: 1.52;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 13px; }
.btn {
  min-height: 51px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  padding: 0 23px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: .90rem;
  font-weight: 720;
  transition: transform .16s ease, background-color .16s ease, border-color .16s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.btn-primary { color: #fff; background: #07585b; box-shadow: 0 9px 24px rgba(1,58,61,.20); }
.btn-primary:hover { color: #fff; background: #086568; }
.btn-ghost { border-color: rgba(255,255,255,.48); background: rgba(255,255,255,.055); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.btn-ghost:hover { background: rgba(255,255,255,.11); }

.proof-bar {
  width: min(100%, 535px);
  min-height: 80px;
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid rgba(255,255,255,.33);
  border-radius: 13px;
  background: rgba(92,84,79,.27);
  box-shadow: 0 13px 35px rgba(0,0,0,.08);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.proof-item {
  position: relative;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px 18px;
}
.proof-item + .proof-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 24%;
  bottom: 24%;
  width: 1px;
  background: rgba(255,255,255,.29);
}
.proof-icon { flex: 0 0 31px; }
.proof-icon svg { width: 30px; height: 30px; fill: none; stroke: #fff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.proof-item strong,
.proof-item small { display: block; overflow: hidden; text-overflow: ellipsis; }
.proof-item strong { font-size: .99rem; line-height: 1.15; white-space: nowrap; }
.proof-item small { margin-top: 3px; color: rgba(255,255,255,.65); font-size: .73rem; line-height: 1.2; }

.service-card {
  width: 100%;
  min-height: 347px;
  padding: 31px 29px 20px;
  border: 1px solid rgba(255,255,255,.53);
  border-radius: 21px;
  background: rgba(203,203,203,.30);
  box-shadow: 0 22px 58px rgba(0,0,0,.12);
  -webkit-backdrop-filter: blur(17px) saturate(108%);
  backdrop-filter: blur(17px) saturate(108%);
}
.service-card-heading { display: grid; grid-template-columns: 42px 1fr; gap: 15px; align-items: start; }
.service-card-mark svg { width: 39px; height: 39px; fill: none; stroke: #fff; stroke-width: 1.35; }
.service-card h2 {
  margin: 0;
  max-width: 240px;
  font-size: clamp(1.25rem, 1.34vw, 1.42rem);
  line-height: 1.32;
  letter-spacing: -.018em;
}
.service-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; margin-top: 35px; }
.service-option {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 10px;
  color: rgba(255,255,255,.91);
  font-size: .72rem;
  transition: color .16s ease, transform .16s ease;
}
.service-option:hover { color: #fff; transform: translateY(-2px); }
.service-icon {
  width: 61px;
  height: 61px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.62);
  border-radius: 50%;
  background: rgba(255,255,255,.065);
}
.service-icon svg { width: 30px; height: 30px; fill: none; stroke: var(--teal); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.service-option > span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.explore-link {
  margin-top: 28px;
  padding: 18px 4px 2px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(255,255,255,.29);
  color: #07575a;
  font-size: .82rem;
  font-weight: 780;
}
.explore-link svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }


/* =========================================================
   Footer — based on the supplied dark-marble reference.
   Navigation mirrors the approved site plan without turning
   the footer into a city/service keyword dump.
   ========================================================= */
.site-footer {
  position: relative;
  overflow: hidden;
  background: #081114;
  color: rgba(255,255,255,.91);
  border-top: 1px solid rgba(255,255,255,.16);
}
.footer-cta {
  position: relative;
  z-index: 2;
  min-height: 150px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(255,255,255,.28);
  background:
    radial-gradient(circle at 12% 50%, rgba(10,96,99,.12), transparent 34%),
    linear-gradient(90deg, #071114 0%, #071013 62%, #081417 100%);
}
.footer-cta-inner,
.footer-main-inner,
.footer-bottom {
  width: min(1540px, calc(100% - 96px));
  margin-inline: auto;
}
.footer-cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 44px;
}
.footer-cta-intro { display: flex; align-items: center; gap: 24px; min-width: 0; }
.footer-cta-icon {
  flex: 0 0 82px;
  width: 82px;
  height: 82px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(145deg, #0b4f53, #123b3f);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 16px 40px rgba(0,0,0,.22);
}
.footer-cta-icon svg { width: 42px; height: 42px; fill: none; stroke: #fff; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.footer-cta-copy { display: flex; align-items: center; gap: 25px; min-width: 0; }
.footer-cta-copy strong { font-size: clamp(1.55rem, 2vw, 2.1rem); line-height: 1.05; letter-spacing: -.025em; white-space: nowrap; }
.footer-cta-divider { width: 1px; height: 42px; background: rgba(255,255,255,.42); }
.footer-cta-copy em {
  color: #4cb3b5;
  font-family: "Lobster", cursive;
  font-size: clamp(2.15rem, 2.8vw, 3.15rem);
  line-height: .8;
  font-weight: 400;
  white-space: nowrap;
}
.footer-cta-actions { display: flex; align-items: center; gap: 20px; flex: 0 0 auto; }
.footer-action {
  min-height: 64px;
  min-width: 270px;
  padding: 0 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  border-radius: 7px;
  font-size: 1rem;
  font-weight: 750;
  transition: transform .16s ease, border-color .16s ease, background-color .16s ease;
}
.footer-action:hover { transform: translateY(-2px); }
.footer-action svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.footer-action-outline { border: 1px solid rgba(49,183,186,.62); background: rgba(255,255,255,.015); }
.footer-action-outline:hover { border-color: rgba(78,210,213,.9); background: rgba(36,138,141,.08); }
.footer-action-solid { background: linear-gradient(135deg, #1d6c70, #2f7e81); box-shadow: 0 12px 32px rgba(13,88,92,.18); }
.footer-action-solid:hover { background: linear-gradient(135deg, #24777b, #378a8d); }

.footer-main {
  position: relative;
  isolation: isolate;
  padding: 68px 0 25px;
  background:
    radial-gradient(circle at 20% 18%, rgba(50,76,78,.13), transparent 30%),
    radial-gradient(circle at 78% 74%, rgba(29,66,69,.10), transparent 28%),
    #0b1012;
}
.footer-main::before,
.footer-main::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.footer-main::before {
  opacity: .44;
  background:
    linear-gradient(118deg, transparent 0 11%, rgba(164,176,177,.12) 11.15%, transparent 11.35% 28%, rgba(113,129,130,.11) 28.15%, transparent 28.35% 52%, rgba(173,181,181,.08) 52.12%, transparent 52.35% 72%, rgba(137,151,152,.10) 72.12%, transparent 72.30%),
    linear-gradient(35deg, transparent 0 18%, rgba(118,132,133,.09) 18.12%, transparent 18.35% 46%, rgba(171,178,178,.07) 46.15%, transparent 46.34% 76%, rgba(121,137,138,.08) 76.12%, transparent 76.34%);
  background-size: 920px 520px, 780px 610px;
}
.footer-main::after { background: linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.22)); }
.footer-main-inner {
  display: grid;
  grid-template-columns: 1.32fr .64fr 1fr .78fr 1.17fr;
  gap: clamp(30px, 3vw, 55px);
  align-items: start;
}
.footer-brand-column { min-width: 0; padding-right: 12px; }
.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 24px;
}
.footer-brand-mark { width: 76px; height: 76px; display: grid; place-items: center; }
.footer-brand-mark svg { width: 100%; height: 100%; fill: none; stroke: #47aeb0; stroke-width: 1.65; stroke-linejoin: round; }
.footer-brand-text { display: grid; gap: 3px; letter-spacing: .1em; }
.footer-brand-text strong { font-size: 2rem; line-height: .92; letter-spacing: .16em; }
.footer-brand-text small { color: #4cb2b4; font-size: .82rem; letter-spacing: .28em; }
.footer-summary { max-width: 330px; margin: 0; color: rgba(255,255,255,.76); font-size: .95rem; line-height: 1.6; }
.footer-short-line { display: block; width: 42px; height: 2px; margin: 20px 0 17px; background: #2b9295; }
.footer-info-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; max-width: 350px; }
.footer-info-list li {
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 13px;
  border-bottom: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.88);
  font-size: .9rem;
}
.footer-info-list li:last-child { border-bottom: 0; }
.footer-info-list a:hover { color: #62c0c2; }
.footer-info-icon { flex: 0 0 34px; width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid rgba(56,168,171,.7); border-radius: 50%; color: #49b2b4; }
.footer-info-icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.footer-link-column { position: relative; min-width: 0; padding-left: 2px; }
.footer-link-column + .footer-link-column::before {
  content: "";
  position: absolute;
  left: -24px;
  top: 2px;
  bottom: 5px;
  width: 1px;
  background: rgba(255,255,255,.09);
}
.footer-link-column h2 { margin: 0; color: #fff; font-size: .96rem; letter-spacing: .02em; text-transform: uppercase; }
.footer-heading-line { display: block; width: 42px; height: 2px; margin: 16px 0 28px; background: #3fa4a6; }
.footer-link-column ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 20px; }
.footer-link-column li { display: flex; align-items: flex-start; gap: 10px; min-width: 0; color: rgba(255,255,255,.84); font-size: .92rem; line-height: 1.25; }
.footer-link-column a { transition: color .15s ease, transform .15s ease; }
.footer-link-column a:hover { color: #5cc0c2; transform: translateX(2px); }
.footer-chevron { color: #3caeb0; font-size: 1.55rem; line-height: .7; transform: translateY(1px); }
.footer-current { color: rgba(255,255,255,.55); }

.footer-image-card {
  position: relative;
  justify-self: end;
  width: min(100%, 360px);
  height: 430px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.48);
  border-radius: 25px;
  background: #293033;
  box-shadow: 0 22px 55px rgba(0,0,0,.23);
}
.footer-image-card img { width: 100%; height: 100%; object-fit: cover; object-position: 87% 49%; filter: saturate(.82) contrast(1.02) brightness(.93); transition: transform .35s ease; }
.footer-image-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(3,12,14,.58)); pointer-events: none; }
.footer-image-card > span {
  position: absolute;
  z-index: 2;
  left: 20px;
  right: 20px;
  bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: .86rem;
  font-weight: 740;
  opacity: 0;
  transform: translateY(7px);
  transition: opacity .2s ease, transform .2s ease;
}
.footer-image-card > span svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.footer-image-card:hover img { transform: scale(1.025); }
.footer-image-card:hover > span { opacity: 1; transform: translateY(0); }

.footer-bottom {
  min-height: 95px;
  margin-top: 52px;
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,.33);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: 30px;
  color: rgba(255,255,255,.82);
  font-size: .86rem;
}
.footer-bottom p { margin: 0; }
.footer-bottom nav { display: flex; align-items: center; gap: 26px; }
.footer-bottom nav > span { width: 1px; height: 23px; background: rgba(255,255,255,.33); }
.footer-bottom a:hover { color: #5ec0c2; }
.footer-coverage { justify-self: end; display: flex; align-items: center; gap: 11px; }
.footer-coverage svg { width: 29px; height: 29px; fill: none; stroke: #37a9ab; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

.not-found { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at 50% 0%, #31595b, #151515 54%); }
.not-found-card { max-width: 560px; text-align: center; }
.not-found-card h1 { font-size: clamp(2rem,6vw,4rem); margin: 0 0 12px; }
.not-found-card p { color: rgba(255,255,255,.72); }
.not-found-card .btn { margin-top: 14px; }


@media (max-width: 1320px) {
  .footer-cta-inner,
  .footer-main-inner,
  .footer-bottom { width: min(1180px, calc(100% - 56px)); }
  .footer-cta-copy { gap: 18px; }
  .footer-cta-copy strong { font-size: 1.55rem; }
  .footer-action { min-width: 230px; padding-inline: 22px; }
  .footer-main-inner { grid-template-columns: 1.2fr .72fr 1fr .78fr 1.05fr; gap: 28px; }
  .footer-link-column + .footer-link-column::before { left: -14px; }
  .footer-image-card { height: 390px; }
}

@media (max-width: 1080px) {
  .footer-cta { padding: 28px 0; }
  .footer-cta-inner { align-items: flex-start; }
  .footer-cta-copy { display: grid; gap: 7px; }
  .footer-cta-divider { display: none; }
  .footer-cta-actions { flex: 1 1 450px; justify-content: flex-end; }
  .footer-action { min-width: 0; flex: 1 1 210px; }
  .footer-main-inner { grid-template-columns: 1.2fr .75fr 1fr; }
  .footer-link-column + .footer-link-column::before { display: none; }
  .footer-image-card { grid-column: 2 / 4; justify-self: stretch; width: 100%; height: 300px; margin-top: 12px; }
  .footer-image-card img { object-position: 78% 50%; }
  .footer-bottom { grid-template-columns: 1fr 1fr; }
  .footer-bottom nav { justify-self: end; }
  .footer-coverage { grid-column: 1 / -1; justify-self: start; }
}

@media (max-width: 760px) {
  .footer-cta-inner,
  .footer-main-inner,
  .footer-bottom { width: calc(100% - 32px); }
  .footer-cta-inner { display: grid; gap: 22px; }
  .footer-cta-intro { gap: 15px; }
  .footer-cta-icon { width: 62px; height: 62px; flex-basis: 62px; }
  .footer-cta-icon svg { width: 32px; height: 32px; }
  .footer-cta-copy strong { white-space: normal; font-size: 1.35rem; }
  .footer-cta-copy em { font-size: 2.25rem; }
  .footer-cta-actions { width: 100%; display: grid; grid-template-columns: 1fr; gap: 10px; }
  .footer-action { width: 100%; min-height: 55px; }
  .footer-main { padding-top: 45px; }
  .footer-main-inner { grid-template-columns: 1fr 1fr; gap: 40px 24px; }
  .footer-brand-column { grid-column: 1 / -1; padding-right: 0; }
  .footer-summary { max-width: 540px; }
  .footer-info-list { max-width: 540px; }
  .footer-services-column { grid-column: 1 / -1; }
  .footer-services-column ul { grid-template-columns: 1fr 1fr; gap: 17px 20px; }
  .footer-image-card { grid-column: 1 / -1; height: 300px; }
  .footer-bottom { min-height: 0; margin-top: 38px; padding: 24px 0 8px; grid-template-columns: 1fr; gap: 18px; }
  .footer-bottom nav { justify-self: start; flex-wrap: wrap; gap: 14px; }
  .footer-bottom nav > span { height: 18px; }
  .footer-coverage { grid-column: auto; }
}

@media (max-width: 480px) {
  .footer-main-inner { grid-template-columns: 1fr; }
  .footer-link-column,
  .footer-services-column { grid-column: auto; }
  .footer-services-column ul { grid-template-columns: 1fr; }
  .footer-image-card { height: 255px; }
  .footer-brand-mark { width: 62px; height: 62px; }
  .footer-brand-text strong { font-size: 1.65rem; }
  .footer-brand-text small { font-size: .69rem; }
  .footer-bottom nav > span { display: none; }
  .footer-bottom nav { display: grid; gap: 9px; }
}

@media (max-width: 1180px) {
  .site-header { width: calc(100% - 48px); max-width: 980px; }
  .desktop-nav { gap: 18px; }
  .hero-slogan { left: 8vw; }
  .hero-slogan-main { font-size: 14vw; transform: none; }
  .hero-slogan-script-image,
  .hero-slogan-script-text { left: 29vw; }
  .hero-layout { grid-template-columns: minmax(0,1fr) 380px; gap: 30px; }
  .service-card { padding-inline: 22px; }
  .service-icon { width: 54px; height: 54px; }
}

@media (max-width: 960px) {
  .desktop-nav { display: none; }
  .mobile-menu { display: block; }
  .site-header { min-height: 66px; padding: 8px 9px 8px 16px; }
  .brand { font-size: .96rem; }
  .brand-mark { width: 29px; height: 29px; }

  .hero { height: auto; min-height: 100svh; overflow: clip; }
  .hero-image { object-position: 56% 50%; }
  .hero-overlay {
    background:
      linear-gradient(180deg, rgba(12,10,9,.17) 0%, rgba(12,10,9,.04) 35%, rgba(10,10,10,.55) 71%, rgba(10,10,10,.78) 100%),
      linear-gradient(90deg, rgba(10,10,10,.20), rgba(10,10,10,.02));
  }
  .hero-slogan { top: 102px; left: 4vw; }
  .hero-slogan-main { font-size: clamp(6.5rem, 18vw, 10.5rem); transform: none; }
  .hero-slogan-script-image { left: 35vw; top: 12vw; width: min(47vw, 430px); }
  .hero-slogan-script-text { left: 34vw; top: 11vw; font-size: 10vw; }

  .hero-layout {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    width: calc(100% - 34px);
    margin: 0 auto;
    padding: clamp(430px, 56vh, 540px) 0 22px;
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .hero-copy { width: min(100%, 620px); }
  .service-card { width: min(100%, 620px); min-height: auto; }
}

@media (max-width: 600px) {
  :root { --gutter: 14px; }
  .site-header { top: 12px; width: calc(100% - 22px); }
  .brand { gap: 8px; font-size: .84rem; }
  .brand-mark { width: 26px; height: 26px; }

  .hero-image { object-position: 60% 50%; }
  .hero-slogan { top: 88px; left: 4vw; }
  .hero-slogan-main { font-size: 24vw; line-height: .80; transform: none; }
  .hero-slogan-script-image { left: 31vw; top: 16vw; width: 61vw; }
  .hero-slogan-script-text { left: 31vw; top: 15vw; font-size: 15vw; }

  .hero-layout { width: calc(100% - 28px); padding-top: clamp(330px, 48vh, 430px); padding-bottom: 16px; }
  .hero-eyebrow { margin-bottom: 10px; font-size: .60rem; letter-spacing: .13em; }
  .hero-copy h1 { font-size: clamp(2rem, 10.7vw, 2.8rem); }
  .hero-description { margin-top: 13px; font-size: .88rem; line-height: 1.48; }
  .hero-actions { display: grid; grid-template-columns: 1fr; gap: 9px; margin-top: 17px; }
  .btn { width: 100%; min-height: 48px; }

  .proof-bar { grid-template-columns: 1fr; min-height: 0; margin-top: 16px; }
  .proof-item { padding: 11px 13px; }
  .proof-item + .proof-item::before { left: 12px; right: 12px; top: 0; bottom: auto; width: auto; height: 1px; }
  .proof-item strong { white-space: normal; }

  .service-card { padding: 20px 17px 15px; border-radius: 18px; }
  .service-card-heading { grid-template-columns: 35px 1fr; gap: 12px; }
  .service-card-mark svg { width: 32px; height: 32px; }
  .service-card h2 { font-size: 1.12rem; }
  .service-grid { grid-template-columns: repeat(4,1fr); gap: 4px; margin-top: 19px; }
  .service-icon { width: 48px; height: 48px; }
  .service-icon svg { width: 25px; height: 25px; }
  .service-option { font-size: .63rem; gap: 7px; }
  .explore-link { margin-top: 17px; padding-top: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .001ms !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}


/* =========================================================
   HOMEPAGE: SERVICE INTENT SELECTOR
   Reference-led asymmetric editorial grid.
   ========================================================= */
.services-showcase {
  position: relative;
  z-index: 8;
  margin-top: -38px;
  padding: 86px 0 94px;
  overflow: clip;
  color: #171b1b;
  background:
    radial-gradient(ellipse at 18% 20%, rgba(255,255,255,.78), transparent 44%),
    radial-gradient(ellipse at 86% 76%, rgba(222,220,214,.28), transparent 36%),
    linear-gradient(115deg, rgba(145,145,140,.045) 0 1px, transparent 1px 19%, rgba(145,145,140,.035) 19% 20%, transparent 20% 100%),
    #f5f3ef;
  border-radius: 34px 34px 0 0;
  box-shadow: 0 -20px 55px rgba(12,31,31,.06);
  isolation: isolate;
}
.services-showcase::before,
.services-showcase::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  opacity: .15;
  filter: blur(.2px);
}
.services-showcase::before {
  width: 62%;
  height: 48%;
  left: -13%;
  top: 7%;
  border: 1px solid rgba(89,95,91,.18);
  border-radius: 50%;
  transform: rotate(-18deg) skewX(-16deg);
}
.services-showcase::after {
  width: 48%;
  height: 56%;
  right: -17%;
  bottom: -15%;
  border-left: 1px solid rgba(89,95,91,.17);
  border-radius: 47%;
  transform: rotate(19deg);
}
.services-showcase-inner {
  width: min(1460px, calc(100% - 96px));
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(330px, .93fr) minmax(0, 1.92fr);
  column-gap: 18px;
  row-gap: 16px;
  align-items: stretch;
}
.services-intro {
  min-width: 0;
  min-height: 370px;
  padding: 3px 30px 10px 4px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.services-eyebrow {
  position: relative;
  margin: 0 0 30px;
  padding-bottom: 10px;
  color: #073f40;
  font-size: .78rem;
  font-weight: 650;
  letter-spacing: .30em;
  text-transform: uppercase;
}
.services-eyebrow::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 25px;
  height: 1px;
  background: #197776;
}
.services-heading {
  margin: 0;
  color: #171b1b;
  font-family: "Jost", sans-serif;
  font-size: clamp(3.25rem, 4.25vw, 5rem);
  font-weight: 690;
  line-height: .92;
  letter-spacing: -.047em;
  text-wrap: balance;
}
.services-heading-line {
  display: block;
  overflow: hidden;
  padding-bottom: .025em;
}
.services-heading-line > span {
  display: block;
  will-change: transform, opacity;
}
.services-heading-script {
  margin-top: .05em;
  color: #073f40;
  font-family: "Lobster", cursive;
  font-size: 1.06em;
  font-weight: 400;
  letter-spacing: -.02em;
  line-height: .94;
}
.services-intro-copy {
  max-width: 380px;
  margin: 21px 0 0;
  color: #454a48;
  font-size: .98rem;
  line-height: 1.64;
}
.services-intro-rule {
  display: block;
  width: 38px;
  height: 2px;
  margin-top: 31px;
  background: #073f40;
}

.service-showcase-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(23,27,27,.10);
  border-radius: 16px;
  background: #30302e;
  color: #fff;
  outline: none;
  isolation: isolate;
  transform: translateZ(0);
  transition:
    border-color 470ms cubic-bezier(.22,1,.36,1),
    box-shadow 470ms cubic-bezier(.22,1,.36,1),
    transform 470ms cubic-bezier(.22,1,.36,1);
}
.service-feature {
  min-height: 370px;
}
.services-major-grid,
.services-specialist-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.service-major {
  min-height: 298px;
}
.service-showcase-media,
.service-showcase-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.service-showcase-media {
  z-index: -3;
  overflow: hidden;
}
.service-showcase-media img {
  object-fit: cover;
  object-position: center;
  transition: transform 520ms cubic-bezier(.22,1,.36,1), filter 520ms cubic-bezier(.22,1,.36,1);
  will-change: transform;
}
.service-feature .service-showcase-media img { object-position: 56% 49%; }
.service-major:nth-child(1) .service-showcase-media img { object-position: 62% 50%; }
.service-major:nth-child(2) .service-showcase-media img { object-position: 64% 52%; }
.service-major:nth-child(3) .service-showcase-media img { object-position: 67% 49%; }

.service-showcase-overlay {
  position: absolute;
  z-index: -2;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(22,24,23,.90) 0%, rgba(22,24,23,.80) 30%, rgba(22,24,23,.45) 53%, rgba(22,24,23,.09) 78%, rgba(22,24,23,.02) 100%),
    linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.14));
  transition: opacity 470ms cubic-bezier(.22,1,.36,1);
}
.service-major .service-showcase-overlay {
  background:
    linear-gradient(90deg, rgba(19,22,21,.91) 0%, rgba(19,22,21,.79) 34%, rgba(19,22,21,.42) 61%, rgba(19,22,21,.06) 100%),
    linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.16));
}
.service-showcase-content {
  width: min(48%, 310px);
  min-height: 100%;
  padding: 32px 29px 27px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}
.service-major .service-showcase-content {
  width: min(56%, 260px);
  padding: 23px 22px 21px;
}
.service-showcase-icon {
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #073f40;
  box-shadow: 0 8px 22px rgba(1,42,43,.18);
  transition: transform 470ms cubic-bezier(.22,1,.36,1);
}
.service-showcase-icon svg {
  width: 27px;
  height: 27px;
  fill: none;
  stroke: #fff;
  stroke-width: 1.45;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.service-showcase-card h3,
.service-small-card h3 {
  margin: 20px 0 0;
  color: currentColor;
  font-family: "Jost", sans-serif;
  font-size: clamp(1.46rem, 1.62vw, 1.72rem);
  font-weight: 620;
  line-height: 1.05;
  letter-spacing: -.025em;
  text-transform: uppercase;
  transition: transform 470ms cubic-bezier(.22,1,.36,1);
}
.service-feature h3 {
  max-width: 190px;
  font-size: clamp(1.65rem, 2vw, 2.02rem);
}
.service-major h3 {
  max-width: 230px;
  font-size: clamp(1.2rem, 1.43vw, 1.55rem);
}
.service-accent-line {
  display: block;
  width: 30px;
  height: 1px;
  margin: 18px 0 18px;
  background: #cfc6a5;
}
.service-description {
  display: block;
  color: rgba(255,255,255,.90);
  font-size: .88rem;
  line-height: 1.5;
  transition: color 470ms cubic-bezier(.22,1,.36,1);
}
.service-feature .service-description { max-width: 220px; }
.service-major .service-description { max-width: 190px; font-size: .80rem; }

.service-card-link {
  position: relative;
  margin-top: auto;
  padding: 20px 18px 4px 0;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  font-size: .86rem;
  font-weight: 520;
}
.service-card-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 72%;
  height: 1px;
  background: #4ba6a6;
  transform-origin: left center;
  transition: width 470ms cubic-bezier(.22,1,.36,1);
}
.service-card-link > span {
  display: inline-block;
  transition: transform 470ms cubic-bezier(.22,1,.36,1);
}

.service-showcase-card:hover,
.service-showcase-card:focus-visible {
  border-color: rgba(7,90,90,.62);
  box-shadow: 0 14px 32px rgba(20,36,35,.12);
  transform: translateY(-1px);
}
.service-showcase-card:hover .service-showcase-media img,
.service-showcase-card:focus-visible .service-showcase-media img {
  transform: scale(1.045);
  filter: saturate(1.02) contrast(1.02);
}
.service-showcase-card:hover .service-showcase-overlay,
.service-showcase-card:focus-visible .service-showcase-overlay { opacity: 1.11; }
.service-showcase-card:hover .service-showcase-icon,
.service-showcase-card:focus-visible .service-showcase-icon { transform: translateY(-4px); }
.service-showcase-card:hover h3,
.service-showcase-card:focus-visible h3 { transform: translateY(-4px); }
.service-showcase-card:hover .service-description,
.service-showcase-card:focus-visible .service-description { color: #fff; }
.service-showcase-card:hover .service-card-link::after,
.service-showcase-card:focus-visible .service-card-link::after { width: 100%; }
.service-showcase-card:hover .service-card-link > span,
.service-showcase-card:focus-visible .service-card-link > span { transform: translateX(7px); }

.service-small-card {
  min-height: 178px;
  display: grid;
  grid-template-columns: 53% 47%;
  overflow: hidden;
  border: 1px solid rgba(23,27,27,.09);
  border-radius: 15px;
  background: rgba(250,249,246,.82);
  color: #171b1b;
  outline: none;
  transition:
    border-color 470ms cubic-bezier(.22,1,.36,1),
    box-shadow 470ms cubic-bezier(.22,1,.36,1),
    transform 470ms cubic-bezier(.22,1,.36,1);
}
.service-small-content {
  min-width: 0;
  padding: 18px 17px 16px 20px;
  display: grid;
  grid-template-columns: 48px 1fr;
  grid-template-rows: auto auto 1fr auto;
  align-items: start;
  column-gap: 14px;
}
.service-small-card .service-showcase-icon {
  grid-row: 1 / span 2;
  width: 48px;
  height: 48px;
  flex-basis: 48px;
}
.service-small-card .service-showcase-icon svg { width: 23px; height: 23px; }
.service-small-card h3 {
  grid-column: 2;
  margin: 4px 0 0;
  font-size: clamp(.88rem, 1.03vw, 1.05rem);
  line-height: 1.15;
}
.service-small-card .service-description {
  grid-column: 2;
  margin-top: 12px;
  color: #4c504e;
  font-size: .76rem;
  line-height: 1.45;
}
.service-small-card .service-card-link {
  grid-column: 2;
  margin-top: 8px;
  padding-top: 8px;
  color: #171b1b;
  font-size: .80rem;
}
.service-small-card .service-card-link::after { display: none; }
.service-small-media {
  position: relative;
  min-width: 0;
  overflow: hidden;
}
.service-small-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(250,249,246,.30), transparent 26%);
  pointer-events: none;
}
.service-small-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 520ms cubic-bezier(.22,1,.36,1);
  will-change: transform;
}
.service-small-card:hover,
.service-small-card:focus-visible {
  border-color: rgba(7,90,90,.46);
  box-shadow: 0 12px 30px rgba(20,36,35,.09);
  transform: translateY(-1px);
}
.service-small-card:hover .service-small-media img,
.service-small-card:focus-visible .service-small-media img { transform: scale(1.045); }
.service-small-card:hover .service-showcase-icon,
.service-small-card:focus-visible .service-showcase-icon { transform: translateY(-3px); }
.service-small-card:hover h3,
.service-small-card:focus-visible h3 { transform: translateY(-3px); }
.service-small-card:hover .service-card-link > span,
.service-small-card:focus-visible .service-card-link > span { transform: translateX(7px); }

.services-all-wrap {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  padding-top: 1px;
}
.services-all-button {
  width: min(460px, 100%);
  min-height: 58px;
  padding: 0 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  border: 1px solid rgba(7,63,64,.12);
  border-radius: 11px;
  background: #073f40;
  color: #fff;
  font-size: .82rem;
  font-weight: 520;
  letter-spacing: .18em;
  text-transform: uppercase;
  transition:
    background-color 420ms cubic-bezier(.22,1,.36,1),
    transform 420ms cubic-bezier(.22,1,.36,1),
    box-shadow 420ms cubic-bezier(.22,1,.36,1);
}
.services-all-button:hover,
.services-all-button:focus-visible {
  background: #075a5a;
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(7,63,64,.14);
}
.services-all-arrow {
  display: inline-block;
  font-size: 1.2rem;
  line-height: 1;
  transition: transform 420ms cubic-bezier(.22,1,.36,1);
}
.services-all-button:hover .services-all-arrow,
.services-all-button:focus-visible .services-all-arrow { transform: translateX(7px); }

.service-showcase-card:focus-visible,
.service-small-card:focus-visible,
.services-all-button:focus-visible {
  outline: 3px solid rgba(25,119,118,.55);
  outline-offset: 3px;
}

/* Progressive entrance: JS only adds services-animate when observers exist.
   Without JS, the whole section remains immediately visible. */
.services-showcase.services-animate .services-eyebrow,
.services-showcase.services-animate .services-heading-line > span,
.services-showcase.services-animate .services-intro-copy,
.services-showcase.services-animate .services-intro-rule,
.services-showcase.services-animate .services-reveal:not(.services-intro) {
  opacity: 0;
  transform: translateY(32px);
}
.services-showcase.services-animate .services-heading-line > span {
  transform: translateY(45px);
}
.services-showcase.services-animate .services-reveal:not(.services-intro) {
  transform: translateY(55px) scale(.97);
}
.services-showcase.services-animate.is-inview .services-eyebrow,
.services-showcase.services-animate.is-inview .services-heading-line > span,
.services-showcase.services-animate.is-inview .services-intro-copy,
.services-showcase.services-animate.is-inview .services-intro-rule,
.services-showcase.services-animate.is-inview .services-reveal:not(.services-intro) {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition-property: opacity, transform;
  transition-duration: 820ms;
  transition-timing-function: cubic-bezier(.16,1,.3,1);
}
.services-showcase.services-animate.is-inview .services-eyebrow { transition-delay: 0ms; }
.services-showcase.services-animate.is-inview .services-heading-line:nth-child(1) > span { transition-delay: 120ms; }
.services-showcase.services-animate.is-inview .services-heading-line:nth-child(2) > span { transition-delay: 185ms; }
.services-showcase.services-animate.is-inview .services-heading-script > span { transition-delay: 285ms; }
.services-showcase.services-animate.is-inview .services-intro-copy { transition-delay: 300ms; }
.services-showcase.services-animate.is-inview .services-intro-rule { transition-delay: 340ms; }
.services-showcase.services-animate.is-inview .services-reveal:not(.services-intro) {
  transition-delay: var(--reveal-delay, 380ms);
}

@media (max-width: 1180px) {
  .services-showcase { padding-top: 78px; }
  .services-showcase-inner {
    width: min(1080px, calc(100% - 56px));
    grid-template-columns: 1fr;
  }
  .services-intro {
    min-height: auto;
    padding: 0 0 16px;
  }
  .services-heading { max-width: 720px; }
  .services-intro-copy { max-width: 620px; }
  .service-feature {
    min-height: 400px;
  }
  .service-feature .service-showcase-content { width: min(48%, 330px); }
  .services-major-grid,
  .services-specialist-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .services-major-grid .service-major:last-child,
  .services-specialist-grid .service-small-card:last-child {
    grid-column: 1 / -1;
  }
  .services-specialist-grid .service-small-card:last-child {
    grid-template-columns: 58% 42%;
  }
}

@media (max-width: 760px) {
  .services-showcase {
    margin-top: -20px;
    padding: 62px 0 68px;
    border-radius: 24px 24px 0 0;
  }
  .services-showcase-inner {
    width: calc(100% - 28px);
    row-gap: 13px;
  }
  .services-eyebrow {
    margin-bottom: 22px;
    font-size: .68rem;
    letter-spacing: .25em;
  }
  .services-heading {
    font-size: clamp(3rem, 14.5vw, 4.25rem);
    line-height: .92;
  }
  .services-intro-copy {
    margin-top: 18px;
    font-size: .92rem;
    line-height: 1.58;
  }
  .services-intro-rule { margin-top: 24px; }
  .service-feature,
  .service-major { min-height: 360px; }
  .services-major-grid,
  .services-specialist-grid {
    grid-template-columns: 1fr;
    gap: 13px;
  }
  .services-major-grid .service-major:last-child,
  .services-specialist-grid .service-small-card:last-child {
    grid-column: auto;
  }
  .service-showcase-content,
  .service-feature .service-showcase-content,
  .service-major .service-showcase-content {
    width: min(68%, 290px);
    padding: 25px 22px 22px;
  }
  .service-showcase-overlay,
  .service-major .service-showcase-overlay {
    background:
      linear-gradient(90deg, rgba(18,21,20,.92) 0%, rgba(18,21,20,.78) 41%, rgba(18,21,20,.32) 75%, rgba(18,21,20,.04) 100%),
      linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.18));
  }
  .service-small-card,
  .services-specialist-grid .service-small-card:last-child {
    min-height: 190px;
    grid-template-columns: 58% 42%;
  }
  .service-small-content { padding: 17px 14px 15px 16px; column-gap: 11px; }
  .service-small-card .service-showcase-icon { width: 43px; height: 43px; }
  .service-small-card h3 { font-size: .82rem; }
  .service-small-card .service-description { font-size: .70rem; }
  .services-all-wrap { padding-top: 3px; }
  .services-all-button {
    width: 100%;
    min-height: 56px;
    padding-inline: 18px;
    font-size: .73rem;
    letter-spacing: .14em;
  }

  .services-showcase.services-animate .services-reveal:not(.services-intro) {
    transform: translateY(30px) scale(.985);
  }
}

@media (max-width: 480px) {
  .service-feature,
  .service-major { min-height: 330px; }
  .service-showcase-content,
  .service-feature .service-showcase-content,
  .service-major .service-showcase-content { width: min(75%, 265px); }
  .service-small-card,
  .services-specialist-grid .service-small-card:last-child {
    min-height: 208px;
    grid-template-columns: 1fr;
  }
  .service-small-content {
    grid-template-columns: 43px 1fr;
    padding-bottom: 10px;
  }
  .service-small-media { min-height: 105px; }
  .service-small-media::after { background: linear-gradient(180deg, rgba(250,249,246,.20), transparent 30%); }
}

@media (prefers-reduced-motion: reduce) {
  .services-showcase.services-animate .services-eyebrow,
  .services-showcase.services-animate .services-heading-line > span,
  .services-showcase.services-animate .services-intro-copy,
  .services-showcase.services-animate .services-intro-rule,
  .services-showcase.services-animate .services-reveal:not(.services-intro),
  .services-showcase.services-animate.is-inview .services-eyebrow,
  .services-showcase.services-animate.is-inview .services-heading-line > span,
  .services-showcase.services-animate.is-inview .services-intro-copy,
  .services-showcase.services-animate.is-inview .services-intro-rule,
  .services-showcase.services-animate.is-inview .services-reveal:not(.services-intro) {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* =========================================================
   WHY CHOOSE DUBAI MARBLE FIXING
   DB-driven SSR section. JavaScript only enhances motion.
   ========================================================= */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.why-choose {
  --why-text: #172121;
  --why-muted: #525c5b;
  --why-teal: #074f50;
  --why-teal-2: #147575;
  --why-pale: #eaf3f1;
  --why-border: #dddcd7;
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding: clamp(92px, 8vw, 132px) 0 clamp(76px, 7vw, 116px);
  background: #f7f5f0;
  color: var(--why-text);
}

.why-choose__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
  background: #f7f5f0;
}
.why-choose__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(247,245,240,.90) 0%, rgba(247,245,240,.67) 38%, rgba(247,245,240,.72) 100%),
    linear-gradient(180deg, rgba(251,250,247,.42), rgba(247,245,240,.22));
}
.why-choose__bg img {
  position: absolute;
  left: -5%;
  top: -7%;
  width: 110%;
  height: 114%;
  object-fit: cover;
  opacity: .72;
  transform: translate3d(0, 0, 0) scale(1.035);
  will-change: transform;
}

.why-choose__inner {
  width: min(1500px, calc(100% - 72px));
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.why-choose__grid {
  display: grid;
  grid-template-columns: minmax(0, 39%) minmax(0, 61%);
  gap: clamp(30px, 3vw, 48px);
  align-items: start;
}

.why-choose__left { min-width: 0; }
.why-choose__sticky {
  position: sticky;
  top: 92px;
  min-width: 0;
}
.why-choose__intro {
  position: relative;
  z-index: 2;
  padding: 0 28px 28px 0;
}
.why-choose__eyebrow {
  margin: 0 0 10px;
  color: var(--why-teal);
  font-size: clamp(.73rem, .82vw, .88rem);
  font-weight: 600;
  letter-spacing: .30em;
  line-height: 1.25;
  text-transform: uppercase;
}
.why-choose__eyebrow-line {
  display: block;
  width: 30px;
  height: 1.5px;
  margin-bottom: 26px;
  background: var(--why-teal-2);
  transform-origin: left center;
}
.why-choose__heading {
  margin: 0;
  color: var(--why-text);
  font-size: clamp(3rem, 4.25vw, 4.65rem);
  font-weight: 600;
  line-height: .99;
  letter-spacing: -.045em;
}
.why-choose__visual-heading { display: block; }
.why-choose__heading-line {
  display: block;
  overflow: hidden;
  padding-bottom: .08em;
}
.why-choose__heading-line > span { display: block; }
.why-choose__heading em {
  display: inline-block;
  margin-left: .07em;
  color: var(--why-teal);
  font-family: "Lobster", cursive;
  font-size: 1.06em;
  font-style: normal;
  font-weight: 400;
  letter-spacing: -.02em;
  white-space: nowrap;
}
.why-choose__description {
  max-width: 440px;
  margin: 24px 0 0;
  color: var(--why-muted);
  font-size: clamp(.97rem, 1.05vw, 1.08rem);
  line-height: 1.68;
}

.why-choose__main-media {
  position: relative;
  width: 100%;
  min-height: 520px;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(23,33,33,.08);
  border-radius: 20px;
  background: #ebe7df;
  box-shadow: 0 16px 48px rgba(27,36,35,.055);
}
.why-choose__main-media picture,
.why-choose__main-media img {
  width: 100%;
  height: 100%;
}
.why-choose__main-media picture { display: block; }
.why-choose__main-media img {
  object-fit: cover;
  object-position: 50% 50%;
  filter: saturate(.90) contrast(1.015) brightness(1.02);
  transform: scale(1.01);
}
.why-choose__main-grid { position: absolute; inset: 0; pointer-events: none; }
.why-choose__main-grid i {
  position: absolute;
  display: block;
  background: rgba(70,182,180,.40);
  box-shadow: 0 0 12px rgba(72,178,176,.10);
}
.why-choose__main-grid i:first-child { left: 10%; top: 0; bottom: 0; width: 1px; }
.why-choose__main-grid i:last-child { left: 0; right: 0; top: 58%; height: 1px; }

.why-choose__steps {
  position: relative;
  display: grid;
  gap: 20px;
  min-width: 0;
}
.why-choose__steps::before {
  content: "";
  position: absolute;
  z-index: 2;
  left: 51px;
  top: 62px;
  bottom: 62px;
  border-left: 1px dashed rgba(61,88,86,.23);
  pointer-events: none;
}

.why-step {
  position: relative;
  z-index: 1;
  display: grid;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(53,66,64,.13);
  border-radius: 20px;
  background: rgba(255,255,255,.73);
  box-shadow: 0 12px 40px rgba(20,30,30,.04);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.why-step--assessment {
  min-height: 220px;
  grid-template-columns: 82px minmax(245px, .88fr) minmax(300px, 1.18fr);
}
.why-step--method {
  min-height: 310px;
  grid-template-columns: 82px minmax(230px, .70fr) minmax(480px, 1.55fr);
}
.why-step--quality {
  min-height: 230px;
  grid-template-columns: 82px minmax(225px, .82fr) minmax(180px, .62fr) minmax(250px, 1fr);
}

.why-step__number {
  position: relative;
  z-index: 3;
  width: 64px;
  height: 64px;
  margin: 22px 0 0 18px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(99,112,110,.26);
  border-radius: 50%;
  background: rgba(251,250,247,.94);
  color: var(--why-teal);
  font-size: 1.65rem;
  font-weight: 650;
  letter-spacing: -.04em;
}
.why-step__number::before {
  content: "";
  position: absolute;
  inset: -1px;
  border: 1px solid rgba(20,117,117,.34);
  border-radius: 50%;
  opacity: .0;
}

.why-step__content {
  min-width: 0;
  padding: 31px 22px 26px 28px;
  align-self: center;
}
.why-step__header h3 {
  margin: 0;
  color: var(--why-text);
  font-size: clamp(1.16rem, 1.32vw, 1.42rem);
  font-weight: 650;
  line-height: 1.10;
  letter-spacing: -.022em;
  text-transform: uppercase;
}
.why-step__subtitle {
  margin: 5px 0 0;
  color: var(--why-teal);
  font-size: .98rem;
  font-weight: 500;
  line-height: 1.3;
}
.why-step__rule {
  display: block;
  width: 38px;
  height: 1.5px;
  margin-top: 20px;
  background: var(--why-teal-2);
  transform-origin: left center;
}
.why-step__description {
  max-width: 360px;
  margin: 24px 0 0;
  color: var(--why-muted);
  font-size: .91rem;
  line-height: 1.62;
}

.why-step__media {
  position: relative;
  min-width: 0;
  margin: 0;
  overflow: hidden;
}
.why-step__media picture,
.why-step__media img { width: 100%; height: 100%; }
.why-step__media img {
  object-fit: cover;
  filter: saturate(.91) contrast(1.02) brightness(1.02);
}
.why-step__assessment-media {
  border-radius: 0 18px 18px 0;
}
.why-step__assessment-media img { object-position: 55% 50%; }

.why-laser {
  position: absolute;
  z-index: 2;
  display: block;
  background: rgba(46,169,165,.60);
  box-shadow: 0 0 8px rgba(72,191,187,.18);
  transform-origin: left center;
}
.why-laser--x { left: 0; top: 54%; width: 100%; height: 1px; }
.why-laser--y { top: 0; left: 41%; width: 1px; height: 100%; transform-origin: center top; }
.why-laser-point {
  position: absolute;
  z-index: 3;
  width: 6px;
  height: 6px;
  border: 1px solid rgba(255,255,255,.85);
  border-radius: 50%;
  background: rgba(20,117,117,.82);
  box-shadow: 0 0 0 4px rgba(20,117,117,.10);
}
.why-laser-point--1 { left: 41%; top: 53%; }
.why-laser-point--2 { left: 71%; top: 53%; }

.why-step__methods {
  align-self: stretch;
  min-width: 0;
  padding: 18px 18px 18px 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.fixing-method {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(53,66,64,.12);
  border-radius: 12px;
  background: rgba(251,250,247,.62);
}
.fixing-method h4 {
  margin: 0;
  padding: 16px 12px 6px;
  color: var(--why-teal);
  font-size: clamp(.75rem, .85vw, .9rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: .01em;
  text-align: center;
  text-transform: uppercase;
}
.fixing-method__body {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(90px, .72fr);
  align-items: center;
  gap: 0;
  padding: 0 7px 9px 3px;
}
.fixing-method__diagram-stack {
  position: relative;
  min-width: 0;
  aspect-ratio: 520 / 300;
}
.fixing-method__diagram-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* Split a single DB-managed illustration into visual layers, allowing the
   assembly animation to reveal one technical layer at a time. */
.fixing-method--wet .fixing-method__diagram-layer:nth-child(1) { clip-path: inset(57% 0 0 0); }
.fixing-method--wet .fixing-method__diagram-layer:nth-child(2) { clip-path: inset(29% 0 31% 0); }
.fixing-method--wet .fixing-method__diagram-layer:nth-child(3) { clip-path: inset(0 0 57% 0); }
.fixing-method--dry .fixing-method__diagram-layer:nth-child(1) { clip-path: inset(0 50% 0 0); }
.fixing-method--dry .fixing-method__diagram-layer:nth-child(2) { clip-path: inset(0 25% 0 48%); }
.fixing-method--dry .fixing-method__diagram-layer:nth-child(3) { clip-path: inset(22% 6% 10% 63%); }
.fixing-method--dry .fixing-method__diagram-layer:nth-child(4) { clip-path: inset(6% 0 6% 77%); }
.fixing-method__labels {
  list-style: none;
  min-width: 0;
  padding: 4px 0 0 6px;
  margin: 0;
  display: grid;
  align-content: space-evenly;
  align-self: stretch;
  gap: 2px;
}
.fixing-method__labels li {
  position: relative;
  min-height: 28px;
  display: flex;
  align-items: center;
  color: #3e4948;
  font-size: clamp(.61rem, .63vw, .69rem);
  line-height: 1.25;
}
.fixing-method__labels li::before {
  content: "";
  position: absolute;
  right: calc(100% + 3px);
  width: 22px;
  height: 1px;
  background: rgba(20,117,117,.68);
  transform-origin: right center;
}

.why-step__quality-media {
  margin: 0;
  min-height: 100%;
  border-left: 1px solid rgba(53,66,64,.08);
  border-right: 1px solid rgba(53,66,64,.08);
}
.why-step__quality-media img { object-position: 50% 49%; }
.why-quality-list {
  min-width: 0;
  align-self: center;
  padding: 22px 22px 22px 18px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 18px;
}
.why-quality-item {
  min-width: 0;
  display: grid;
  grid-template-columns: 40px 1fr;
  align-items: center;
  gap: 10px;
  color: #354140;
  font-size: .76rem;
  line-height: 1.35;
}
.why-quality-item img {
  width: 36px;
  height: 36px;
}

.process-timeline {
  position: relative;
  z-index: 2;
  margin-top: 42px;
  min-height: 142px;
  padding: 25px 28px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  overflow: hidden;
  border: 1px solid rgba(53,66,64,.15);
  border-radius: 18px;
  background: rgba(255,255,255,.68);
  box-shadow: 0 12px 42px rgba(20,30,30,.035);
}
.process-timeline__track {
  position: absolute;
  z-index: 0;
  left: 7.3%;
  right: 7.3%;
  top: 68px;
  height: 1.5px;
  overflow: hidden;
  background: rgba(7,79,80,.12);
}
.process-timeline__progress {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--why-teal-2);
  transform: scaleX(1);
  transform-origin: left center;
}
.process-timeline__item {
  position: relative;
  z-index: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: 92px 1fr;
  align-items: center;
  gap: 16px;
}
.process-timeline__icon {
  width: 88px;
  height: 88px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(53,66,64,.15);
  border-radius: 50%;
  background: rgba(251,250,247,.98);
}
.process-timeline__icon img { width: 58px; height: 58px; }
.process-timeline__copy { min-width: 0; }
.process-timeline__copy strong {
  display: block;
  margin-bottom: 7px;
  color: var(--why-text);
  font-size: .96rem;
  font-weight: 650;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.process-timeline__copy span {
  display: block;
  max-width: 185px;
  color: var(--why-muted);
  font-size: .79rem;
  line-height: 1.5;
}

/* ------------------------ Motion enhancement ------------------------ */
.why-choose.why-animate .why-choose__eyebrow,
.why-choose.why-animate .why-choose__description {
  opacity: 0;
  transform: translateY(18px);
}
.why-choose.why-animate .why-choose__eyebrow-line { transform: scaleX(0); }
.why-choose.why-animate .why-choose__heading-line > span {
  opacity: 0;
  transform: translateY(45px);
}
.why-choose.why-animate .why-choose__heading em {
  opacity: 0;
  transform: translateY(24px) scale(.97);
}
.why-choose.why-animate .why-choose__main-media {
  clip-path: inset(100% 0 0 0 round 20px);
}
.why-choose.why-animate .why-choose__main-media img { transform: scale(1.045); }

.why-choose.why-animate.is-intro-revealed .why-choose__eyebrow {
  opacity: 1;
  transform: none;
  transition: opacity 700ms cubic-bezier(.16,1,.3,1), transform 700ms cubic-bezier(.16,1,.3,1);
}
.why-choose.why-animate.is-intro-revealed .why-choose__eyebrow-line {
  transform: scaleX(1);
  transition: transform 650ms cubic-bezier(.16,1,.3,1) 220ms;
}
.why-choose.why-animate.is-intro-revealed .why-choose__heading-line:nth-child(1) > span {
  opacity: 1;
  transform: none;
  transition: opacity 850ms cubic-bezier(.16,1,.3,1) 390ms, transform 850ms cubic-bezier(.16,1,.3,1) 390ms;
}
.why-choose.why-animate.is-intro-revealed .why-choose__heading-line:nth-child(2) > span {
  opacity: 1;
  transform: none;
  transition: opacity 850ms cubic-bezier(.16,1,.3,1) 530ms, transform 850ms cubic-bezier(.16,1,.3,1) 530ms;
}
.why-choose.why-animate.is-intro-revealed .why-choose__heading-line:nth-child(3) > span {
  opacity: 1;
  transform: none;
  transition: opacity 850ms cubic-bezier(.16,1,.3,1) 670ms, transform 850ms cubic-bezier(.16,1,.3,1) 670ms;
}
.why-choose.why-animate.is-intro-revealed .why-choose__heading-line:nth-child(3) em {
  opacity: 1;
  transform: none;
  transition: opacity 900ms cubic-bezier(.16,1,.3,1) 810ms, transform 900ms cubic-bezier(.16,1,.3,1) 810ms;
}
.why-choose.why-animate.is-intro-revealed .why-choose__description {
  opacity: 1;
  transform: none;
  transition: opacity 750ms cubic-bezier(.16,1,.3,1) 960ms, transform 750ms cubic-bezier(.16,1,.3,1) 960ms;
}
.why-choose.why-animate.is-main-revealed .why-choose__main-media {
  clip-path: inset(0 0 0 0 round 20px);
  transition: clip-path 1250ms cubic-bezier(.16,1,.3,1);
}
.why-choose.why-animate.is-main-revealed .why-choose__main-media img {
  transform: scale(1.01);
  transition: transform 1250ms cubic-bezier(.16,1,.3,1);
}

.why-choose.why-animate .why-step {
  opacity: 0;
  transform: translateY(42px) scale(.985);
}
.why-choose.why-animate .why-step__number,
.why-choose.why-animate .why-step__header h3,
.why-choose.why-animate .why-step__subtitle,
.why-choose.why-animate .why-step__rule,
.why-choose.why-animate .why-step__description,
.why-choose.why-animate .why-step__media,
.why-choose.why-animate .fixing-method,
.why-choose.why-animate .why-quality-item {
  opacity: 0;
  transform: translateY(16px);
}
.why-choose.why-animate .why-step__rule { transform: scaleX(0); }
.why-choose.why-animate .why-laser--x { transform: scaleX(0); }
.why-choose.why-animate .why-laser--y { transform: scaleY(0); }
.why-choose.why-animate .why-laser-point { opacity: 0; transform: scale(.6); }
.why-choose.why-animate .fixing-method__diagram-layer { opacity: 0; transform: translateY(14px); }
.why-choose.why-animate .fixing-method__labels li { opacity: 0; transform: translateX(-8px); }
.why-choose.why-animate .fixing-method__labels li::before { transform: scaleX(0); }

.why-choose.why-animate .why-step.is-revealed {
  opacity: 1;
  transform: none;
  transition: opacity 950ms cubic-bezier(.16,1,.3,1), transform 950ms cubic-bezier(.16,1,.3,1);
}
.why-choose.why-animate .why-step.is-revealed .why-step__number {
  opacity: 1;
  transform: none;
  transition: opacity 600ms cubic-bezier(.16,1,.3,1) 110ms, transform 600ms cubic-bezier(.16,1,.3,1) 110ms;
}
.why-choose.why-animate .why-step.is-revealed .why-step__number::before {
  opacity: 1;
  transition: opacity 600ms ease 120ms;
}
.why-choose.why-animate .why-step.is-revealed .why-step__header h3 {
  opacity: 1;
  transform: none;
  transition: opacity 720ms cubic-bezier(.16,1,.3,1) 240ms, transform 720ms cubic-bezier(.16,1,.3,1) 240ms;
}
.why-choose.why-animate .why-step.is-revealed .why-step__subtitle {
  opacity: 1;
  transform: none;
  transition: opacity 700ms cubic-bezier(.16,1,.3,1) 365ms, transform 700ms cubic-bezier(.16,1,.3,1) 365ms;
}
.why-choose.why-animate .why-step.is-revealed .why-step__rule {
  opacity: 1;
  transform: scaleX(1);
  transition: opacity 500ms ease 470ms, transform 620ms cubic-bezier(.16,1,.3,1) 470ms;
}
.why-choose.why-animate .why-step.is-revealed .why-step__description {
  opacity: 1;
  transform: none;
  transition: opacity 720ms cubic-bezier(.16,1,.3,1) 560ms, transform 720ms cubic-bezier(.16,1,.3,1) 560ms;
}
.why-choose.why-animate .why-step.is-revealed .why-step__media {
  opacity: 1;
  transform: none;
  transition: opacity 800ms cubic-bezier(.16,1,.3,1) 690ms, transform 800ms cubic-bezier(.16,1,.3,1) 690ms;
}
.why-choose.why-animate .why-step--assessment.is-revealed .why-laser--x {
  transform: scaleX(1);
  transition: transform 1000ms cubic-bezier(.16,1,.3,1) 1120ms;
}
.why-choose.why-animate .why-step--assessment.is-revealed .why-laser--y {
  transform: scaleY(1);
  transition: transform 1000ms cubic-bezier(.16,1,.3,1) 1220ms;
}
.why-choose.why-animate .why-step--assessment.is-revealed .why-laser-point {
  opacity: 1;
  transform: none;
  transition: opacity 500ms ease 1620ms, transform 500ms cubic-bezier(.16,1,.3,1) 1620ms;
}
.why-choose.why-animate .why-step--assessment.is-revealed .why-laser-point--2 { transition-delay: 1740ms; }

.why-choose.why-animate .why-step--method.is-revealed .fixing-method {
  opacity: 1;
  transform: none;
  transition: opacity 760ms cubic-bezier(.16,1,.3,1), transform 760ms cubic-bezier(.16,1,.3,1);
}
.why-choose.why-animate .why-step--method.is-revealed .fixing-method:first-child { transition-delay: 720ms; }
.why-choose.why-animate .why-step--method.is-revealed .fixing-method:nth-child(2) { transition-delay: 1760ms; }
.why-choose.why-animate .why-step--method.is-revealed .fixing-method:first-child .fixing-method__diagram-layer:nth-child(1) { animation: whyLayerIn 650ms cubic-bezier(.16,1,.3,1) 950ms forwards; }
.why-choose.why-animate .why-step--method.is-revealed .fixing-method:first-child .fixing-method__diagram-layer:nth-child(2) { animation: whyLayerIn 650ms cubic-bezier(.16,1,.3,1) 1110ms forwards; }
.why-choose.why-animate .why-step--method.is-revealed .fixing-method:first-child .fixing-method__diagram-layer:nth-child(3) { animation: whyLayerIn 650ms cubic-bezier(.16,1,.3,1) 1270ms forwards; }
.why-choose.why-animate .why-step--method.is-revealed .fixing-method:nth-child(2) .fixing-method__diagram-layer:nth-child(1) { animation: whyLayerIn 650ms cubic-bezier(.16,1,.3,1) 1990ms forwards; }
.why-choose.why-animate .why-step--method.is-revealed .fixing-method:nth-child(2) .fixing-method__diagram-layer:nth-child(2) { animation: whyLayerIn 650ms cubic-bezier(.16,1,.3,1) 2130ms forwards; }
.why-choose.why-animate .why-step--method.is-revealed .fixing-method:nth-child(2) .fixing-method__diagram-layer:nth-child(3) { animation: whyLayerIn 650ms cubic-bezier(.16,1,.3,1) 2270ms forwards; }
.why-choose.why-animate .why-step--method.is-revealed .fixing-method:nth-child(2) .fixing-method__diagram-layer:nth-child(4) { animation: whyLayerIn 650ms cubic-bezier(.16,1,.3,1) 2410ms forwards; }

.why-choose.why-animate .why-step--method.is-revealed .fixing-method:first-child .fixing-method__labels li,
.why-choose.why-animate .why-step--method.is-revealed .fixing-method:nth-child(2) .fixing-method__labels li {
  animation: whyLabelIn 540ms cubic-bezier(.16,1,.3,1) forwards;
}
.why-choose.why-animate .why-step--method.is-revealed .fixing-method:first-child .fixing-method__labels li:nth-child(1) { animation-delay: 1430ms; }
.why-choose.why-animate .why-step--method.is-revealed .fixing-method:first-child .fixing-method__labels li:nth-child(2) { animation-delay: 1550ms; }
.why-choose.why-animate .why-step--method.is-revealed .fixing-method:first-child .fixing-method__labels li:nth-child(3) { animation-delay: 1670ms; }
.why-choose.why-animate .why-step--method.is-revealed .fixing-method:nth-child(2) .fixing-method__labels li:nth-child(1) { animation-delay: 2550ms; }
.why-choose.why-animate .why-step--method.is-revealed .fixing-method:nth-child(2) .fixing-method__labels li:nth-child(2) { animation-delay: 2670ms; }
.why-choose.why-animate .why-step--method.is-revealed .fixing-method:nth-child(2) .fixing-method__labels li:nth-child(3) { animation-delay: 2790ms; }
.why-choose.why-animate .why-step--method.is-revealed .fixing-method:nth-child(2) .fixing-method__labels li:nth-child(4) { animation-delay: 2910ms; }
.why-choose.why-animate .why-step--method.is-revealed .fixing-method__labels li::before {
  animation: whyConnectorIn 560ms cubic-bezier(.16,1,.3,1) forwards;
  animation-delay: inherit;
}

.why-choose.why-animate .why-step--quality.is-revealed .why-quality-item {
  animation: whyQualityIn 680ms cubic-bezier(.16,1,.3,1) forwards;
  animation-delay: calc(930ms + (var(--quality-index, 0) * 160ms));
}
.why-choose.why-animate .why-step--quality.is-revealed .why-quality-item img {
  transform-origin: center;
  animation: whyIconDraw 620ms cubic-bezier(.16,1,.3,1) forwards;
  animation-delay: calc(870ms + (var(--quality-index, 0) * 160ms));
}

.why-choose.why-animate .process-timeline__progress {
  transform: scaleX(0);
  transition: none;
}
.why-choose.why-animate .process-timeline__item {
  opacity: .10;
  transform: translateY(5px);
}
.why-choose.why-animate .process-timeline__icon img { opacity: .22; }
.why-choose.why-animate .process-timeline.is-revealed .process-timeline__progress {
  transform: scaleX(1);
  transition: transform var(--timeline-duration, 4200ms) linear;
}
.why-choose.why-animate .process-timeline__item.is-active {
  opacity: 1;
  transform: none;
  transition: opacity 450ms ease, transform 450ms cubic-bezier(.16,1,.3,1);
}
.why-choose.why-animate .process-timeline__item.is-active .process-timeline__icon img {
  opacity: 1;
  animation: whyMilestoneIcon 520ms cubic-bezier(.16,1,.3,1) both;
}

@keyframes whyLayerIn { to { opacity: 1; transform: translateY(0); } }
@keyframes whyLabelIn { to { opacity: 1; transform: translateX(0); } }
@keyframes whyConnectorIn { to { transform: scaleX(1); } }
@keyframes whyQualityIn { to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes whyIconDraw { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: scale(1); } }
@keyframes whyMilestoneIcon { from { transform: scale(.88); } to { transform: scale(1); } }

@media (max-width: 1240px) {
  .why-choose__inner { width: min(1160px, calc(100% - 56px)); }
  .why-choose__grid { grid-template-columns: minmax(0, 38%) minmax(0, 62%); gap: 28px; }
  .why-choose__heading { font-size: clamp(2.8rem, 4.2vw, 4rem); }
  .why-step--assessment { grid-template-columns: 76px minmax(200px, .8fr) minmax(250px, 1.15fr); }
  .why-step--method { grid-template-columns: 76px 205px minmax(420px, 1fr); }
  .why-step--quality { grid-template-columns: 76px 210px 175px 1fr; }
  .why-step__content { padding-left: 20px; padding-right: 14px; }
  .why-step__methods { padding-right: 12px; }
  .fixing-method__body { grid-template-columns: 1fr; }
  .fixing-method__labels { grid-template-columns: 1fr 1fr; padding: 0 10px 8px; }
  .fixing-method__labels li::before { display: none; }
  .why-quality-list { gap: 12px; padding-inline: 14px; }
}

@media (max-width: 1024px) {
  .why-choose { padding-top: 88px; }
  .why-choose__inner { width: min(920px, calc(100% - 44px)); }
  .why-choose__grid { grid-template-columns: 1fr; gap: 30px; }
  .why-choose__sticky { position: static; }
  .why-choose__intro { max-width: 720px; padding-right: 0; }
  .why-choose__heading { font-size: clamp(3rem, 7vw, 4.7rem); }
  .why-choose__description { max-width: 660px; }
  .why-choose__main-media { min-height: 520px; max-height: 680px; }
  .why-choose__steps::before { left: 50px; }
  .why-step--assessment { grid-template-columns: 82px minmax(220px, .9fr) minmax(260px, 1.15fr); }
  .why-step--method { grid-template-columns: 82px minmax(220px, .72fr) minmax(0, 1.6fr); }
  .why-step--quality { grid-template-columns: 82px minmax(220px, .86fr) minmax(190px, .65fr) minmax(230px, 1fr); }
  .process-timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 18px; }
  .process-timeline__track { display: none; }
}

@media (max-width: 780px) {
  .why-choose { padding: 74px 0 76px; }
  .why-choose__inner { width: calc(100% - 28px); }
  .why-choose__bg img { left: 0; top: 0; width: 100%; height: 100%; transform: none !important; }
  .why-choose__eyebrow { font-size: .67rem; letter-spacing: .26em; }
  .why-choose__heading { font-size: clamp(2.8rem, 12vw, 4.1rem); }
  .why-choose__description { margin-top: 18px; font-size: .94rem; }
  .why-choose__main-media { min-height: 440px; border-radius: 16px; }
  .why-choose__steps { gap: 14px; }
  .why-choose__steps::before { display: none; }
  .why-step,
  .why-step--assessment,
  .why-step--method,
  .why-step--quality {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    min-height: 0;
    border-radius: 16px;
  }
  .why-step__number {
    width: 52px;
    height: 52px;
    margin: 18px 0 0 12px;
    font-size: 1.35rem;
  }
  .why-step__content { padding: 22px 16px 20px 12px; }
  .why-step__header h3 { font-size: 1.10rem; }
  .why-step__subtitle { font-size: .88rem; }
  .why-step__description { margin-top: 18px; font-size: .86rem; }
  .why-step__media,
  .why-step__methods,
  .why-quality-list {
    grid-column: 1 / -1;
  }
  .why-step__assessment-media { min-height: 260px; border-radius: 0; }
  .why-step__methods {
    padding: 0 12px 12px;
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .fixing-method__body { grid-template-columns: minmax(0, 1.3fr) minmax(105px, .75fr); }
  .fixing-method__labels { grid-template-columns: 1fr; }
  .why-step__quality-media { min-height: 260px; border: 0; border-top: 1px solid rgba(53,66,64,.08); }
  .why-quality-list { padding: 18px; grid-template-columns: 1fr 1fr; }
  .process-timeline {
    margin-top: 24px;
    padding: 22px 18px 22px 16px;
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .process-timeline__track {
    display: block;
    left: 56px;
    right: auto;
    top: 58px;
    bottom: 58px;
    width: 1.5px;
    height: auto;
  }
  .process-timeline__progress {
    width: 100%;
    height: 100%;
    transform-origin: center top;
  }
  .process-timeline__item { grid-template-columns: 78px 1fr; gap: 13px; }
  .process-timeline__icon { width: 72px; height: 72px; }
  .process-timeline__icon img { width: 48px; height: 48px; }
  .process-timeline__copy span { max-width: 100%; }
  .why-choose.why-animate .why-step { transform: translateY(26px) scale(.992); }
  .why-choose.why-animate .process-timeline.is-revealed .process-timeline__progress {
    transform: scaleY(1);
  }
  .why-choose.why-animate .process-timeline__progress { transform: scaleY(0); }
}

@media (max-width: 520px) {
  .why-choose__heading { font-size: clamp(2.7rem, 13.6vw, 3.75rem); }
  .why-choose__heading em { white-space: normal; }
  .why-choose__main-media { min-height: 390px; }
  .why-quality-list { grid-template-columns: 1fr; }
  .fixing-method__body { grid-template-columns: 1fr; }
  .fixing-method__labels { grid-template-columns: 1fr 1fr; gap: 3px 10px; padding: 4px 12px 12px; }
  .why-step__assessment-media { min-height: 220px; }
  .why-step__quality-media { min-height: 230px; }
}

@media (prefers-reduced-motion: reduce) {
  .why-choose__bg img,
  .why-choose.why-animate .why-choose__eyebrow,
  .why-choose.why-animate .why-choose__description,
  .why-choose.why-animate .why-choose__heading-line > span,
  .why-choose.why-animate .why-choose__heading em,
  .why-choose.why-animate .why-choose__main-media,
  .why-choose.why-animate .why-choose__main-media img,
  .why-choose.why-animate .why-step,
  .why-choose.why-animate .why-step__number,
  .why-choose.why-animate .why-step__header h3,
  .why-choose.why-animate .why-step__subtitle,
  .why-choose.why-animate .why-step__rule,
  .why-choose.why-animate .why-step__description,
  .why-choose.why-animate .why-step__media,
  .why-choose.why-animate .fixing-method,
  .why-choose.why-animate .fixing-method__diagram-layer,
  .why-choose.why-animate .fixing-method__labels li,
  .why-choose.why-animate .why-quality-item,
  .why-choose.why-animate .process-timeline__item,
  .why-choose.why-animate .process-timeline__icon img,
  .why-choose.why-animate .process-timeline__progress {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    animation: none !important;
    transition: none !important;
  }
  .why-choose.why-animate .why-laser--x,
  .why-choose.why-animate .why-laser--y { transform: none !important; }
  .why-choose.why-animate .why-laser-point { opacity: 1 !important; transform: none !important; }
}

/* ================================================================
   Homepage coverage / brand statement
   Content is server-rendered from core_pages.content_json.coverage_statement.
   ================================================================ */
.coverage-statement {
  --coverage-overlay: .50;
  --coverage-min-height: 70vh;
  --coverage-bg-pos-desktop: center center;
  --coverage-bg-pos-mobile: center center;
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: var(--coverage-min-height);
  overflow: hidden;
  background-image: var(--coverage-bg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: var(--coverage-bg-pos-desktop);
  background-attachment: fixed;
  color: #fff;
}

.coverage-statement__overlay,
.coverage-statement__veil,
.coverage-statement__light-sweep {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.coverage-statement__overlay {
  z-index: -3;
  background:
    linear-gradient(90deg, rgba(0,0,0,.16) 0%, rgba(0,0,0,.05) 52%, rgba(0,0,0,.01) 100%),
    rgba(0,0,0,var(--coverage-overlay));
}

.coverage-statement__veil {
  z-index: -2;
  background: rgba(0,0,0,.12);
  opacity: 0;
}

.coverage-statement__light-sweep {
  z-index: -1;
  left: -38%;
  width: 27%;
  right: auto;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.075), rgba(255,255,255,0));
  filter: blur(18px);
  opacity: 0;
  transform: skewX(-12deg) translateX(0);
}

.coverage-statement__inner {
  width: min(100%, 1520px);
  margin-inline: auto;
  padding: clamp(140px, 10vw, 178px) clamp(42px, 6.8vw, 104px);
}

.coverage-statement__content {
  /* Keep the two-line editorial heading wide enough to match the reference. */
  max-width: 1120px;
}

.coverage-statement--align-center .coverage-statement__content {
  margin-inline: auto;
  text-align: center;
}

.coverage-statement--align-right .coverage-statement__content {
  margin-left: auto;
  text-align: right;
}

.coverage-statement__eyebrow {
  margin: 0 0 28px;
  font: 600 .84rem/1.2 "Jost", sans-serif;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(255,255,255,.78);
}

.coverage-statement__heading {
  margin: 0;
  font-family: "Jost", sans-serif;
  font-size: clamp(3.25rem, 4.85vw, 5.65rem);
  font-weight: 650;
  line-height: 1.02;
  letter-spacing: -.035em;
  color: #fff;
}

.coverage-statement__visual-heading,
.coverage-statement__heading-line,
.coverage-statement__heading-row {
  display: block;
}

.coverage-statement__heading-line {
  width: fit-content;
  max-width: 100%;
  overflow: hidden;
}

@media (min-width: 1101px) {
  .coverage-statement__heading-line--first,
  .coverage-statement__heading-line--second {
    white-space: nowrap;
  }
}

.coverage-statement__heading-row {
  display: flex;
  align-items: baseline;
  flex-wrap: nowrap;
  gap: .18em;
  margin-top: .08em;
}

.coverage-statement__accent {
  display: inline-block;
  position: relative;
  font-family: "Lobster", cursive;
  font-weight: 400;
  letter-spacing: -.025em;
  color: #197776;
  white-space: nowrap;
}

.coverage-statement__accent::after {
  content: "";
  position: absolute;
  left: .05em;
  right: .04em;
  bottom: -.07em;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
}

.coverage-statement__divider {
  display: block;
  width: 64px;
  height: 2px;
  margin-top: 42px;
  background: #197776;
  transform-origin: left center;
}

.coverage-statement--align-center .coverage-statement__divider {
  margin-inline: auto;
  transform-origin: center center;
}

.coverage-statement--align-right .coverage-statement__divider {
  margin-left: auto;
  transform-origin: right center;
}

.coverage-statement__description {
  max-width: 760px;
  margin: 38px 0 0;
  font: 400 clamp(1.08rem, 1.2vw, 1.34rem)/1.72 "Jost", sans-serif;
  color: rgba(255,255,255,.90);
  letter-spacing: -.005em;
}

.coverage-statement--align-center .coverage-statement__description { margin-inline: auto; }
.coverage-statement--align-right .coverage-statement__description { margin-left: auto; }

.coverage-statement__description-line {
  display: block;
}

/* JS only applies hidden states after it initializes, preserving readable SSR
   content when scripts fail or are disabled. */
.coverage-statement.coverage-animate .coverage-statement__veil {
  opacity: 1;
  transition: opacity 1.45s cubic-bezier(.16,1,.3,1);
}

.coverage-statement.coverage-animate .coverage-statement__heading-line--first > span {
  display: block;
  opacity: 0;
  transform: translateX(-25px);
  clip-path: inset(0 100% 0 0);
  transition:
    clip-path 1.12s cubic-bezier(.16,1,.3,1) .00s,
    transform 1.12s cubic-bezier(.16,1,.3,1) .00s,
    opacity .45s ease .00s;
}

.coverage-statement.coverage-animate .coverage-statement__accent {
  opacity: 0;
  transform: translateY(25px) scale(.94);
  transition:
    opacity .75s ease .90s,
    transform 1.02s cubic-bezier(.16,1,.3,1) .90s;
}

.coverage-statement.coverage-animate .coverage-statement__accent::after {
  transition: transform .65s cubic-bezier(.16,1,.3,1) 1.62s;
}

.coverage-statement.coverage-animate .coverage-statement__heading-line--second > span {
  display: block;
  opacity: 0;
  transform: translateX(25px);
  clip-path: inset(0 0 0 100%);
  transition:
    clip-path 1.08s cubic-bezier(.16,1,.3,1) 1.72s,
    transform 1.08s cubic-bezier(.16,1,.3,1) 1.72s,
    opacity .45s ease 1.72s;
}

.coverage-statement.coverage-animate .coverage-statement__heading-line--extra > span {
  display: block;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s ease 2.55s, transform .85s cubic-bezier(.16,1,.3,1) 2.55s;
}

.coverage-statement.coverage-animate .coverage-statement__divider {
  transform: scaleX(0);
  transition: transform .70s cubic-bezier(.16,1,.3,1) 2.72s;
}

.coverage-statement.coverage-animate .coverage-statement__eyebrow,
.coverage-statement.coverage-animate .coverage-statement__description-line {
  opacity: 0;
}

.coverage-statement.coverage-animate .coverage-statement__eyebrow {
  transform: translateY(12px);
  transition: opacity .65s ease .05s, transform .75s cubic-bezier(.16,1,.3,1) .05s;
}

.coverage-statement.coverage-animate .coverage-statement__description-line {
  transform: translateY(18px);
  transition:
    opacity .72s ease calc(3.15s + (var(--coverage-line-index, 0) * .13s)),
    transform .78s cubic-bezier(.16,1,.3,1) calc(3.15s + (var(--coverage-line-index, 0) * .13s));
}

.coverage-statement.coverage-animate.is-coverage-revealed .coverage-statement__veil {
  opacity: 0;
}

.coverage-statement.coverage-animate.is-coverage-revealed .coverage-statement__heading-line > span,
.coverage-statement.coverage-animate.is-coverage-revealed .coverage-statement__accent,
.coverage-statement.coverage-animate.is-coverage-revealed .coverage-statement__eyebrow,
.coverage-statement.coverage-animate.is-coverage-revealed .coverage-statement__description-line {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 0 0);
}

.coverage-statement.coverage-animate.is-coverage-revealed .coverage-statement__accent::after,
.coverage-statement.coverage-animate.is-coverage-revealed .coverage-statement__divider {
  transform: scaleX(1);
}

.coverage-statement.coverage-animate.is-coverage-revealed .coverage-statement__light-sweep {
  animation: coverageLightSweep 1.95s cubic-bezier(.16,1,.3,1) 4.08s 1 both;
}

@keyframes coverageLightSweep {
  0% { opacity: 0; transform: skewX(-12deg) translateX(0); }
  18% { opacity: .9; }
  80% { opacity: .55; }
  100% { opacity: 0; transform: skewX(-12deg) translateX(535%); }
}

@media (max-width: 1100px) {
  .coverage-statement__content { max-width: 820px; }
  .coverage-statement__heading-row { flex-wrap: wrap; }
  .coverage-statement__heading-line--first,
  .coverage-statement__heading-line--second { white-space: normal; }
}

@media (max-width: 1024px) {
  .coverage-statement {
    min-height: max(620px, var(--coverage-min-height));
    background-attachment: scroll;
    background-position: var(--coverage-bg-pos-mobile);
  }

  .coverage-statement__inner {
    padding: 120px clamp(28px, 6vw, 64px);
  }

  .coverage-statement__content { max-width: 760px; }
  .coverage-statement__heading { font-size: clamp(3rem, 8vw, 5.4rem); }
  .coverage-statement__description { font-size: clamp(1.05rem, 2.1vw, 1.24rem); }
}

@media (max-width: 640px) {
  .coverage-statement {
    min-height: 650px;
    background-position: var(--coverage-bg-pos-mobile);
  }

  .coverage-statement__inner {
    padding: 104px 24px 110px;
  }

  .coverage-statement__heading {
    font-size: clamp(2.9rem, 13.8vw, 4.45rem);
    line-height: 1.01;
  }

  .coverage-statement__heading-row {
    gap: .13em .18em;
  }

  .coverage-statement__divider { margin-top: 34px; width: 52px; }
  .coverage-statement__description { margin-top: 30px; line-height: 1.62; }

  .coverage-statement.coverage-animate .coverage-statement__heading-line--first > span {
    transform: translateX(-12px);
    transition-duration: .82s;
  }

  .coverage-statement.coverage-animate .coverage-statement__accent {
    transform: translateY(16px) scale(.96);
    transition-duration: .82s;
  }

  .coverage-statement.coverage-animate .coverage-statement__heading-line--second > span {
    transform: translateX(12px);
    transition-duration: .82s;
  }

  .coverage-statement.coverage-animate .coverage-statement__description-line {
    transform: translateY(10px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .coverage-statement,
  .coverage-statement__overlay,
  .coverage-statement__veil,
  .coverage-statement__light-sweep,
  .coverage-statement__heading-line > span,
  .coverage-statement__accent,
  .coverage-statement__accent::after,
  .coverage-statement__divider,
  .coverage-statement__eyebrow,
  .coverage-statement__description-line {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    clip-path: none !important;
    opacity: 1 !important;
  }
}

/* =========================================================
   HOMEPAGE: UAE SERVICE AREAS
   Database-driven interactive coverage section. The geometry is presentation;
   all names, labels, coordinates, images, services and CTAs are DB content.
   ========================================================= */
.service-areas {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding: clamp(96px, 8vw, 132px) 0 clamp(84px, 7vw, 116px);
  color: #172121;
  background: #f7f5f0;
}
.service-areas__background {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image:
    linear-gradient(180deg, rgba(247,245,240,.88), rgba(251,250,247,.78)),
    var(--service-areas-bg);
  background-position: center;
  background-size: cover;
  opacity: .78;
}
.service-areas::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 68% 30%, rgba(255,255,255,.58), transparent 36%),
    radial-gradient(circle at 14% 75%, rgba(255,255,255,.42), transparent 33%);
}
.service-areas__inner {
  width: min(1500px, calc(100% - 72px));
  margin-inline: auto;
}
.service-areas__workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(430px, .92fr);
  gap: clamp(30px, 3.1vw, 50px);
  align-items: start;
}
.service-areas__left { min-width: 0; }
.service-areas__intro {
  max-width: 625px;
  padding: 0 0 12px 2px;
}
.service-areas__eyebrow {
  margin: 0;
  color: #074f50;
  font: 600 clamp(.73rem, .82vw, .88rem)/1.25 "Jost", sans-serif;
  letter-spacing: .30em;
  text-transform: uppercase;
}
.service-areas__eyebrow-line {
  display: block;
  width: 31px;
  height: 1.5px;
  margin: 11px 0 27px;
  background: #147575;
  transform-origin: left center;
}
.service-areas__heading {
  margin: 0;
  color: #172121;
  font-family: "Jost", sans-serif;
  font-size: clamp(3.25rem, 4.25vw, 5rem);
  font-weight: 690;
  line-height: .94;
  letter-spacing: -.047em;
}
.service-areas__visual-heading,
.service-areas__heading-line { display: block; }
.service-areas__heading-line {
  overflow: hidden;
  padding-bottom: .035em;
}
.service-areas__heading-line > span { display: block; }
.service-areas__heading-line--accent em {
  color: #07585b;
  font-family: "Lobster", cursive;
  font-size: 1.05em;
  font-style: normal;
  font-weight: 400;
  letter-spacing: -.025em;
}
.service-areas__description {
  max-width: 600px;
  margin: 24px 0 0;
  color: #454f4e;
  font-size: clamp(.94rem, 1.02vw, 1.05rem);
  line-height: 1.72;
}

/* Map */
.service-areas__map-shell {
  position: relative;
  min-width: 0;
  margin-top: 18px;
  aspect-ratio: 1.38 / 1;
  overflow: visible;
}
.service-areas__map-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.service-areas__country-fill {
  fill: url(#uaeLandFill);
  stroke: none;
  opacity: .98;
}
.service-areas__country-outline {
  fill: none;
  stroke: rgba(87,95,91,.30);
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
}
.service-areas__map-region {
  fill: rgba(255,255,255,.05);
  stroke: rgba(98,105,101,.24);
  stroke-width: 1.05;
  vector-effect: non-scaling-stroke;
  transition: fill 520ms cubic-bezier(.22,1,.36,1), stroke 420ms ease, opacity 420ms ease;
}
.service-areas__map-region.is-active {
  fill: rgba(20,117,117,.62);
  stroke: rgba(7,79,80,.65);
}
.service-areas__map-region.is-hovered:not(.is-active) {
  fill: rgba(20,117,117,.12);
  stroke: rgba(20,117,117,.38);
}
.service-areas__coastal-details circle {
  fill: #ece8df;
  stroke: rgba(87,95,91,.22);
  stroke-width: 1;
}
.service-areas__connection {
  fill: none;
  stroke: rgba(20,117,117,.48);
  stroke-width: 1.15;
  stroke-dasharray: 6 8;
  vector-effect: non-scaling-stroke;
}
.service-areas__markers {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.service-areas__marker {
  position: absolute;
  z-index: 3;
  left: var(--marker-x);
  top: var(--marker-y);
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #24302f;
  font: 500 clamp(.69rem, .76vw, .80rem)/1.18 "Jost", sans-serif;
  text-align: left;
  cursor: pointer;
  pointer-events: auto;
  transform: translate(-50%, -50%);
  transition: color 300ms ease;
}
.service-areas__marker-ring {
  position: relative;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  display: grid;
  place-items: center;
  border: 5px solid rgba(217,228,224,.95);
  border-radius: 50%;
  background: rgba(255,255,255,.95);
  box-shadow: 0 3px 13px rgba(22,49,48,.15);
  transition: transform 330ms cubic-bezier(.22,1,.36,1), border-color 330ms ease, box-shadow 330ms ease;
}
.service-areas__marker-ring > span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #177677;
  transition: background 300ms ease, transform 300ms ease;
}
.service-areas__marker-label {
  padding: 4px 6px;
  border-radius: 6px;
  white-space: nowrap;
  transition: transform 300ms cubic-bezier(.22,1,.36,1), background 300ms ease, color 300ms ease, box-shadow 300ms ease;
}
.service-areas__marker[data-label-position="left"] { flex-direction: row-reverse; }
.service-areas__marker[data-label-position="top"] { flex-direction: column-reverse; }
.service-areas__marker[data-label-position="bottom"] { flex-direction: column; }
.service-areas__marker.is-active {
  z-index: 6;
  color: #fff;
}
.service-areas__marker.is-active .service-areas__marker-ring {
  border-color: rgba(7,88,91,.22);
  box-shadow: 0 0 0 7px rgba(20,117,117,.12), 0 5px 16px rgba(22,49,48,.18);
}
.service-areas__marker.is-active .service-areas__marker-ring > span {
  width: 8px;
  height: 8px;
  background: #07585b;
}
.service-areas__marker.is-active .service-areas__marker-label {
  padding: 7px 12px;
  background: #173f40;
  color: #fff;
  box-shadow: 0 8px 20px rgba(22,49,48,.15);
}
.service-areas__marker:hover .service-areas__marker-ring,
.service-areas__marker:focus-visible .service-areas__marker-ring { transform: scale(1.12); }
.service-areas__marker:hover:not(.is-active) .service-areas__marker-label,
.service-areas__marker:focus-visible:not(.is-active) .service-areas__marker-label { transform: translateX(3px); }
.service-areas__marker:focus-visible { outline: 2px solid #07585b; outline-offset: 5px; border-radius: 7px; }

/* Active location panel */
.service-areas__panel-stack {
  position: relative;
  min-width: 0;
  margin-top: clamp(104px, 8.2vw, 132px);
  transition: height 520ms cubic-bezier(.22,1,.36,1);
}
.service-areas__panel {
  min-width: 0;
  display: none;
  grid-template-columns: minmax(0, 1.04fr) minmax(215px, .90fr);
  gap: 0 22px;
  overflow: hidden;
  padding: clamp(24px, 2.15vw, 34px);
  border: 1px solid rgba(66,78,75,.13);
  border-radius: 18px;
  background: rgba(255,255,255,.82);
  box-shadow: 0 16px 48px rgba(31,43,41,.055);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.service-areas__panel.is-active { display: grid; }
.service-areas__panel-copy {
  min-width: 0;
  align-self: center;
  padding: 2px 0 22px;
}
.service-areas__panel-number {
  display: block;
  margin-bottom: 17px;
  color: #07585b;
  font-size: clamp(1.25rem, 1.45vw, 1.55rem);
  font-weight: 700;
  line-height: 1;
}
.service-areas__panel h3 {
  margin: 0;
  color: #172121;
  font-size: clamp(2.65rem, 3.65vw, 4.15rem);
  font-weight: 670;
  line-height: .96;
  letter-spacing: -.045em;
}
.service-areas__panel-subtitle {
  margin: 9px 0 0;
  color: #07585b;
  font-size: clamp(.97rem, 1.13vw, 1.14rem);
  font-weight: 600;
  line-height: 1.25;
}
.service-areas__panel-rule {
  display: block;
  width: 38px;
  height: 1.5px;
  margin: 22px 0 24px;
  background: #147575;
  transform-origin: left center;
}
.service-areas__panel-description {
  margin: 0;
  color: #4d5756;
  font-size: clamp(.83rem, .91vw, .95rem);
  line-height: 1.62;
}
.service-areas__panel-media {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border-radius: 12px;
  background: #ece9e2;
  aspect-ratio: 1 / 1.14;
}
.service-areas__panel-media picture,
.service-areas__panel-media img {
  width: 100%;
  height: 100%;
}
.service-areas__panel-media img {
  object-fit: cover;
  transition: transform 720ms cubic-bezier(.22,1,.36,1), opacity 480ms ease;
}
.service-areas__services {
  grid-column: 1 / -1;
  margin-top: 18px;
  padding-top: 18px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  border-top: 1px solid rgba(75,87,83,.12);
}
.service-areas__service {
  min-width: 0;
  min-height: 94px;
  padding: 7px 12px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  color: #263130;
  text-align: center;
  font-size: clamp(.68rem, .72vw, .77rem);
  line-height: 1.34;
}
.service-areas__service + .service-areas__service { border-left: 1px solid rgba(75,87,83,.12); }
.service-areas__service img { width: 40px; height: 40px; object-fit: contain; }
.service-areas__panel-cta {
  grid-column: 1 / -1;
  width: 100%;
  margin-top: 17px;
  min-height: 50px;
  font-size: .88rem;
  color: #fff;
}
.service-areas__panel-cta span,
.service-areas__panel-cta svg { color: inherit; }
.service-areas__panel-cta:visited,
.service-areas__panel-cta:hover,
.service-areas__panel-cta:focus-visible { color: #fff; }
.service-areas__panel-cta svg,
.service-areas__all-cta svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 380ms cubic-bezier(.22,1,.36,1);
}
.service-areas__panel-cta:hover svg,
.service-areas__all-cta:hover svg { transform: translateX(6px); }

/* Bottom Emirates rail */
.service-areas__selector-wrap {
  margin-top: 32px;
  overflow: hidden;
  border: 1px solid rgba(66,78,75,.13);
  border-radius: 16px;
  background: rgba(255,255,255,.66);
  box-shadow: 0 12px 36px rgba(31,43,41,.035);
}
.service-areas__selector {
  position: relative;
  display: grid;
  grid-template-columns: repeat(7, minmax(130px, 1fr));
  align-items: stretch;
}
.service-areas__selector-item {
  position: relative;
  min-width: 0;
  min-height: 128px;
  padding: 17px 12px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 0;
  border-right: 1px solid rgba(66,78,75,.11);
  background: transparent;
  color: #252f2e;
  font: 600 clamp(.70rem, .78vw, .82rem)/1.25 "Jost", sans-serif;
  text-align: center;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 350ms ease, background 350ms ease, transform 350ms cubic-bezier(.22,1,.36,1);
}
.service-areas__selector-item:last-of-type { border-right: 0; }
.service-areas__selector-item img {
  width: 46px;
  height: 46px;
  opacity: .82;
  transition: transform 380ms cubic-bezier(.22,1,.36,1), opacity 350ms ease;
}
.service-areas__selector-item:hover,
.service-areas__selector-item:focus-visible { background: rgba(7,88,91,.035); }
.service-areas__selector-item:hover img,
.service-areas__selector-item:focus-visible img { transform: translateY(-3px); opacity: 1; }
.service-areas__selector-item.is-active { color: #07585b; }
.service-areas__selector-item.is-active img { opacity: 1; }
.service-areas__selector-item:focus-visible { outline: 2px solid #07585b; outline-offset: -3px; }
.service-areas__selector-indicator {
  position: absolute;
  z-index: 4;
  left: 0;
  bottom: 0;
  width: 1px;
  height: 2px;
  background: #07585b;
  transform: translateX(var(--areas-indicator-x, 0px)) scaleX(var(--areas-indicator-scale, 0));
  transform-origin: left center;
  transition: transform 620ms cubic-bezier(.22,1,.36,1);
  pointer-events: none;
}
.service-areas__selector-dot {
  position: absolute;
  z-index: 5;
  left: 0;
  bottom: -4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #07585b;
  transform: translateX(var(--areas-dot-x, 0px)) scale(var(--areas-dot-scale, 0));
  transition: transform 620ms cubic-bezier(.22,1,.36,1);
  pointer-events: none;
}
.service-areas__all-cta-wrap {
  margin-top: 28px;
  display: flex;
  justify-content: center;
}
.service-areas__all-cta {
  min-height: 56px;
  padding-inline: clamp(34px, 4.8vw, 72px);
  border-color: #07585b;
  background: rgba(255,255,255,.42);
  color: #07585b;
  font-size: .84rem;
  font-weight: 650;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.service-areas__all-cta:not(.is-disabled):hover {
  background: #07585b;
  color: #fff;
}
.service-areas__all-cta.is-disabled { opacity: .62; cursor: default; }

/* Entry animation only activates after JS initializes, so content is never
   permanently invisible when scripts fail or are disabled. */
.service-areas.areas-animate .service-areas__eyebrow,
.service-areas.areas-animate .service-areas__description {
  opacity: 0;
  transform: translateY(16px);
}
.service-areas.areas-animate .service-areas__eyebrow-line { transform: scaleX(0); }
.service-areas.areas-animate .service-areas__heading-line > span {
  opacity: 0;
  transform: translateY(50px);
}
.service-areas.areas-animate .service-areas__country-outline {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.service-areas.areas-animate .service-areas__map-region {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  fill-opacity: .16;
}
.service-areas.areas-animate .service-areas__country-fill { opacity: .38; }
.service-areas.areas-animate .service-areas__marker {
  opacity: 0;
  transform: translate(-50%, -50%) scale(.72);
}
.service-areas.areas-animate .service-areas__connection {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0;
}
.service-areas.areas-animate .service-areas__panel.is-active {
  opacity: 0;
  transform: translateX(35px) scale(.985);
  clip-path: inset(0 0 100% 0 round 18px);
}
.service-areas.areas-animate .service-areas__panel.is-active [data-panel-sequence],
.service-areas.areas-animate .service-areas__panel.is-active [data-panel-service],
.service-areas.areas-animate .service-areas__panel.is-active [data-panel-cta] {
  opacity: 0;
  transform: translateY(12px);
}
.service-areas.areas-animate .service-areas__panel.is-active [data-panel-image] {
  clip-path: inset(0 100% 0 0 round 12px);
}
.service-areas.areas-animate .service-areas__panel.is-active [data-panel-image] img { transform: scale(1.05); }
.service-areas.areas-animate .service-areas__selector-wrap,
.service-areas.areas-animate .service-areas__selector-item,
.service-areas.areas-animate .service-areas__all-cta-wrap {
  opacity: 0;
}
.service-areas.areas-animate .service-areas__selector-wrap { transform: translateY(18px); }
.service-areas.areas-animate .service-areas__selector-item { transform: translateX(15px); }
.service-areas.areas-animate .service-areas__all-cta-wrap { transform: translateY(20px); }

.service-areas.areas-animate.is-areas-inview .service-areas__eyebrow {
  opacity: 1;
  transform: none;
  transition: opacity .72s ease, transform .76s cubic-bezier(.16,1,.3,1);
}
.service-areas.areas-animate.is-areas-inview .service-areas__eyebrow-line {
  transform: scaleX(1);
  transition: transform .60s cubic-bezier(.16,1,.3,1) .16s;
}
.service-areas.areas-animate.is-areas-inview .service-areas__heading-line:nth-child(1) > span {
  opacity: 1;
  transform: none;
  transition: opacity .78s ease .34s, transform .90s cubic-bezier(.16,1,.3,1) .34s;
}
.service-areas.areas-animate.is-areas-inview .service-areas__heading-line:nth-child(2) > span {
  opacity: 1;
  transform: none;
  transition: opacity .82s ease .50s, transform .94s cubic-bezier(.16,1,.3,1) .50s;
}
.service-areas.areas-animate.is-areas-inview .service-areas__description {
  opacity: 1;
  transform: none;
  transition: opacity .78s ease .78s, transform .82s cubic-bezier(.16,1,.3,1) .78s;
}
.service-areas.areas-animate.is-areas-inview .service-areas__country-outline {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.72s cubic-bezier(.2,.8,.2,1) 1.08s;
}
.service-areas.areas-animate.is-areas-inview .service-areas__map-region {
  stroke-dashoffset: 0;
  transition:
    stroke-dashoffset .82s cubic-bezier(.2,.8,.2,1) calc(2.04s + (var(--region-index, 0) * .10s)),
    fill-opacity .72s ease 2.62s,
    fill 520ms cubic-bezier(.22,1,.36,1),
    stroke 420ms ease;
}
.service-areas.areas-animate.is-areas-inview .service-areas__country-fill {
  opacity: .98;
  transition: opacity .72s ease 2.58s;
}
.service-areas.areas-animate.is-areas-inview .service-areas__marker {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  transition:
    opacity .42s ease calc(3.02s + (var(--marker-index, 0) * .14s)),
    transform .48s cubic-bezier(.22,1,.36,1) calc(3.02s + (var(--marker-index, 0) * .14s)),
    color .30s ease;
}
.service-areas.areas-animate.is-areas-inview .service-areas__marker.is-active .service-areas__marker-ring::after {
  content: "";
  position: absolute;
  inset: -4px;
  border: 1px solid rgba(20,117,117,.44);
  border-radius: 50%;
  animation: areasMarkerPulse .86s ease 3.36s 1 both;
}
@keyframes areasMarkerPulse {
  0% { opacity: .38; transform: scale(.76); }
  100% { opacity: 0; transform: scale(1.9); }
}
.service-areas.areas-animate.is-areas-inview .service-areas__connection {
  stroke-dashoffset: 0;
  opacity: .7;
  transition:
    stroke-dashoffset 1.08s cubic-bezier(.16,1,.3,1) calc(4.05s + (var(--connection-index, 0) * .13s)),
    opacity .56s ease calc(4.05s + (var(--connection-index, 0) * .13s));
}
.service-areas.areas-animate.is-areas-inview .service-areas__panel.is-active {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 0 0 round 18px);
  transition:
    opacity .90s ease 4.72s,
    transform 1s cubic-bezier(.16,1,.3,1) 4.72s,
    clip-path 1.02s cubic-bezier(.16,1,.3,1) 4.72s;
}
.service-areas.areas-animate.is-areas-inview .service-areas__panel.is-active [data-panel-sequence] {
  opacity: 1;
  transform: none;
  transition:
    opacity .62s ease calc(5.05s + (var(--sequence-index, 0) * .13s)),
    transform .72s cubic-bezier(.16,1,.3,1) calc(5.05s + (var(--sequence-index, 0) * .13s));
}
.service-areas.areas-animate.is-areas-inview .service-areas__panel.is-active [data-panel-image] {
  clip-path: inset(0 0 0 0 round 12px);
  transition: clip-path 1.02s cubic-bezier(.16,1,.3,1) 5.58s;
}
.service-areas.areas-animate.is-areas-inview .service-areas__panel.is-active [data-panel-image] img {
  transform: scale(1);
  transition: transform 1.12s cubic-bezier(.16,1,.3,1) 5.58s;
}
.service-areas.areas-animate.is-areas-inview .service-areas__panel.is-active [data-panel-service] {
  opacity: 1;
  transform: none;
  transition:
    opacity .54s ease calc(5.98s + (var(--service-index, 0) * .12s)),
    transform .62s cubic-bezier(.16,1,.3,1) calc(5.98s + (var(--service-index, 0) * .12s));
}
.service-areas.areas-animate.is-areas-inview .service-areas__panel.is-active [data-panel-cta] {
  opacity: 1;
  transform: none;
  transition: opacity .58s ease 6.68s, transform .68s cubic-bezier(.16,1,.3,1) 6.68s;
}
.service-areas.areas-animate.is-areas-inview .service-areas__selector-wrap {
  opacity: 1;
  transform: none;
  transition: opacity .72s ease 6.92s, transform .82s cubic-bezier(.16,1,.3,1) 6.92s;
}
.service-areas.areas-animate.is-areas-inview .service-areas__selector-item {
  opacity: 1;
  transform: none;
  transition:
    opacity .50s ease calc(7.12s + (var(--selector-index, 0) * .11s)),
    transform .62s cubic-bezier(.16,1,.3,1) calc(7.12s + (var(--selector-index, 0) * .11s)),
    color .35s ease, background .35s ease;
}
.service-areas.areas-animate.is-areas-inview .service-areas__all-cta-wrap {
  opacity: 1;
  transform: none;
  transition: opacity .65s ease 8.02s, transform .76s cubic-bezier(.16,1,.3,1) 8.02s;
}

/* Interactive panel switch after the initial story has completed. */
.service-areas__panel.is-panel-leaving {
  display: grid;
  opacity: 0 !important;
  transform: translateX(-18px) !important;
  clip-path: inset(0 0 0 0 round 18px) !important;
  transition: opacity .34s ease, transform .36s cubic-bezier(.22,1,.36,1) !important;
}
.service-areas__panel.is-panel-entering {
  display: grid;
  opacity: 0;
  transform: translateX(18px);
}
.service-areas__panel.is-panel-entering.is-active {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 0 0 round 18px);
  transition: opacity .50s ease, transform .54s cubic-bezier(.22,1,.36,1);
}
.service-areas__panel.is-panel-entering .service-areas__panel-media img { transform: scale(1.03); }
.service-areas__panel.is-panel-entering.is-active .service-areas__panel-media img { transform: scale(1); }

@media (max-width: 1240px) {
  .service-areas__inner { width: min(1160px, calc(100% - 56px)); }
  .service-areas__workspace { grid-template-columns: minmax(0, 1.05fr) minmax(390px, .95fr); gap: 28px; }
  .service-areas__panel { grid-template-columns: 1fr; }
  .service-areas__panel-media { aspect-ratio: 16 / 9; margin-top: 12px; }
  .service-areas__selector { grid-template-columns: repeat(7, minmax(118px, 1fr)); }
}

@media (max-width: 1024px) {
  .service-areas { padding: 86px 0 82px; }
  .service-areas__inner { width: min(920px, calc(100% - 44px)); }
  .service-areas__workspace { grid-template-columns: 1fr; }
  .service-areas__intro { max-width: 700px; }
  .service-areas__map-shell { max-width: 780px; margin-inline: auto; }
  .service-areas__panel-stack { margin-top: 8px; }
  .service-areas__panel { grid-template-columns: minmax(0, 1.05fr) minmax(260px, .95fr); }
  .service-areas__selector-wrap { overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: thin; }
  .service-areas__selector { min-width: 900px; }
  .service-areas__marker { font-size: .72rem; }
}

@media (max-width: 760px) {
  .service-areas { padding: 76px 0 72px; }
  .service-areas__inner {
    width: calc(100% - 28px);
    display: grid;
    gap: 0;
  }
  .service-areas__workspace { display: contents; }
  .service-areas__left { order: 1; }
  .service-areas__selector-wrap { order: 2; margin-top: 18px; border-radius: 14px; }
  .service-areas__panel-stack { order: 3; margin-top: 20px; }
  .service-areas__all-cta-wrap { order: 4; margin-top: 22px; }
  .service-areas__heading { font-size: clamp(2.75rem, 12.3vw, 4.4rem); }
  .service-areas__description { font-size: .94rem; line-height: 1.65; }
  .service-areas__map-shell {
    margin-top: 24px;
    width: calc(100% + 8px);
    margin-left: -4px;
    aspect-ratio: 1.14 / 1;
  }
  .service-areas__map-svg { transform: scale(.98); }
  .service-areas__marker { gap: 5px; font-size: .64rem; }
  .service-areas__marker-ring { width: 19px; height: 19px; flex-basis: 19px; border-width: 4px; }
  .service-areas__marker-ring > span { width: 5px; height: 5px; }
  .service-areas__marker-label { padding: 3px; }
  .service-areas__marker.is-active .service-areas__marker-label { padding: 5px 8px; }
  .service-areas__panel { grid-template-columns: 1fr; padding: 22px 18px; border-radius: 15px; }
  .service-areas__panel h3 { font-size: clamp(2.7rem, 14vw, 4rem); }
  .service-areas__panel-media { aspect-ratio: 16 / 10; }
  .service-areas__services { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .service-areas__service { min-height: 90px; }
  .service-areas__service + .service-areas__service { border-left: 0; }
  .service-areas__service:nth-child(even) { border-left: 1px solid rgba(75,87,83,.12); }
  .service-areas__selector { min-width: 780px; grid-template-columns: repeat(7, 110px); scroll-snap-type: x proximity; }
  .service-areas__selector-item { min-height: 106px; padding: 13px 8px 18px; scroll-snap-align: start; font-size: .65rem; }
  .service-areas__selector-item img { width: 40px; height: 40px; }
  .service-areas__all-cta { width: 100%; padding-inline: 18px; letter-spacing: .12em; font-size: .75rem; }
  .service-areas.areas-animate .service-areas__heading-line > span { transform: translateY(28px); }
  .service-areas.areas-animate .service-areas__panel.is-active { transform: translateX(18px) scale(.99); }
}

@media (max-width: 430px) {
  .service-areas__marker-label { display: none; }
  .service-areas__marker.is-active .service-areas__marker-label { display: inline-block; }
  .service-areas__map-shell { aspect-ratio: 1 / .92; }
  .service-areas__services { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .service-areas.areas-animate .service-areas__eyebrow,
  .service-areas.areas-animate .service-areas__description,
  .service-areas.areas-animate .service-areas__heading-line > span,
  .service-areas.areas-animate .service-areas__marker,
  .service-areas.areas-animate .service-areas__panel.is-active,
  .service-areas.areas-animate .service-areas__panel.is-active [data-panel-sequence],
  .service-areas.areas-animate .service-areas__panel.is-active [data-panel-service],
  .service-areas.areas-animate .service-areas__panel.is-active [data-panel-cta],
  .service-areas.areas-animate .service-areas__selector-wrap,
  .service-areas.areas-animate .service-areas__selector-item,
  .service-areas.areas-animate .service-areas__all-cta-wrap {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .service-areas.areas-animate .service-areas__eyebrow-line,
  .service-areas.areas-animate .service-areas__country-outline,
  .service-areas.areas-animate .service-areas__map-region,
  .service-areas.areas-animate .service-areas__connection {
    stroke-dashoffset: 0 !important;
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
  }
  .service-areas.areas-animate .service-areas__country-fill { opacity: .98 !important; transition: none !important; }
  .service-areas.areas-animate .service-areas__panel.is-active,
  .service-areas.areas-animate .service-areas__panel.is-active [data-panel-image] { clip-path: none !important; }
  .service-areas.areas-animate .service-areas__panel.is-active [data-panel-image] img { transform: none !important; }
}

.service-areas__connection.is-hidden { opacity: 0 !important; stroke-dashoffset: 1 !important; }
.service-areas__panel.is-panel-leaving,
.service-areas__panel.is-panel-entering {
  position: absolute;
  inset: 0;
  width: 100%;
}
.service-areas__marker.is-clicked .service-areas__marker-ring { animation: areasMarkerClick .36s cubic-bezier(.22,1,.36,1) 1; }
@keyframes areasMarkerClick {
  0%,100% { transform: scale(1); }
  45% { transform: scale(1.15); }
}

.service-areas.areas-animate.is-areas-inview .service-areas__map-region { fill-opacity: 1; }

/* Later location changes are interactive, not a replay of the 8-second entrance. */
.service-areas.areas-animate.is-areas-inview .service-areas__panel.is-panel-entering [data-panel-sequence],
.service-areas.areas-animate.is-areas-inview .service-areas__panel.is-panel-entering [data-panel-service],
.service-areas.areas-animate.is-areas-inview .service-areas__panel.is-panel-entering [data-panel-cta] {
  opacity: 1 !important;
  transform: none !important;
  transition: opacity .46s ease .10s, transform .52s cubic-bezier(.22,1,.36,1) .10s !important;
}
.service-areas.areas-animate.is-areas-inview .service-areas__panel.is-panel-entering [data-panel-image] {
  clip-path: inset(0 0 0 0 round 12px) !important;
  transition: clip-path .64s cubic-bezier(.22,1,.36,1) .08s !important;
}
.service-areas.areas-animate.is-areas-inview .service-areas__panel.is-panel-entering [data-panel-image] img {
  transform: scale(1) !important;
  transition: transform .72s cubic-bezier(.22,1,.36,1) .08s, opacity .50s ease !important;
}


/* =========================================================
   UAE SERVICE AREAS v8.1 — compact viewport + geographic map fix
   ========================================================= */
.service-areas__country-sheen {
  fill: url(#uaeLandSheen);
  opacity: .38;
  pointer-events: none;
}
.service-areas__map-detail-lines path {
  fill: none;
  stroke: rgba(74,89,85,.17);
  stroke-width: 1.05;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
}
/* Active-area focus is intentionally a soft geographic focus halo rather than
   a fabricated administrative polygon. Marker coordinates remain DB-driven. */
.service-areas__map-region {
  fill: rgba(20,117,117,0);
  stroke: rgba(20,117,117,.12);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  transition: fill .42s ease, stroke .42s ease, transform .42s cubic-bezier(.22,1,.36,1), opacity .42s ease;
  transform-box: fill-box;
  transform-origin: center;
}
.service-areas__map-region.is-active {
  fill: rgba(20,117,117,.16);
  stroke: rgba(7,79,80,.38);
  transform: scale(1.16);
}
.service-areas__map-region.is-hovered:not(.is-active) {
  fill: rgba(20,117,117,.08);
  stroke: rgba(20,117,117,.28);
  transform: scale(1.08);
}

/* Keep the complete desktop composition in one viewport on common laptop and
   desktop heights, while preserving the larger editorial version on tall screens. */
@media (min-width: 1180px) and (max-height: 950px) {
  .service-areas {
    min-height: 100svh;
    display: flex;
    align-items: center;
    padding: clamp(28px, 3.8vh, 42px) 0 clamp(26px, 3.4vh, 38px);
  }
  .service-areas__inner { width: min(1500px, calc(100% - 72px)); }
  .service-areas__workspace {
    grid-template-columns: minmax(0, 1.17fr) minmax(410px, .83fr);
    gap: clamp(26px, 2.5vw, 40px);
    align-items: center;
  }
  .service-areas__intro { max-width: 590px; padding-bottom: 0; }
  .service-areas__eyebrow-line { margin: 8px 0 17px; }
  .service-areas__heading { font-size: clamp(2.95rem, 3.65vw, 4.35rem); line-height: .96; }
  .service-areas__description { max-width: 570px; margin-top: 15px; font-size: clamp(.86rem, .88vw, .98rem); line-height: 1.58; }
  .service-areas__map-shell {
    height: clamp(330px, 42vh, 385px);
    aspect-ratio: auto;
    margin-top: 4px;
  }
  .service-areas__panel-stack { margin-top: 0; align-self: center; }
  .service-areas__panel {
    grid-template-columns: minmax(0, 1fr) minmax(170px, .78fr);
    gap: 0 18px;
    padding: 20px 20px 18px;
    border-radius: 16px;
  }
  .service-areas__panel-copy { padding: 0 0 12px; }
  .service-areas__panel-number { margin-bottom: 10px; font-size: 1.18rem; }
  .service-areas__panel h3 { font-size: clamp(2.25rem, 2.8vw, 3.25rem); }
  .service-areas__panel-subtitle { margin-top: 6px; font-size: .96rem; }
  .service-areas__panel-rule { margin: 13px 0 14px; }
  .service-areas__panel-description { font-size: .82rem; line-height: 1.48; }
  .service-areas__panel-media { max-height: 228px; aspect-ratio: .92 / 1; border-radius: 10px; }
  .service-areas__services { margin-top: 12px; padding-top: 12px; grid-template-columns: repeat(auto-fit, minmax(76px, 1fr)); }
  .service-areas__service { min-height: 70px; padding: 4px 7px 2px; gap: 5px; font-size: .64rem; line-height: 1.22; }
  .service-areas__service img { width: 31px; height: 31px; }
  .service-areas__panel-cta { margin-top: 11px; min-height: 44px; font-size: .78rem; }
  .service-areas__selector-wrap { margin-top: 14px; border-radius: 14px; }
  .service-areas__selector-item { min-height: 78px; padding: 9px 8px 12px; gap: 5px; font-size: .63rem; }
  .service-areas__selector-item img { width: 31px; height: 31px; }
  .service-areas__all-cta-wrap { margin-top: 12px; }
  .service-areas__all-cta { min-height: 44px; padding-inline: 42px; font-size: .72rem; }
}

@media (min-width: 1180px) and (max-height: 820px) {
  .service-areas { padding-block: 22px; }
  .service-areas__heading { font-size: clamp(2.7rem, 3.35vw, 4rem); }
  .service-areas__description { margin-top: 12px; line-height: 1.48; }
  .service-areas__map-shell { height: clamp(300px, 39vh, 340px); }
  .service-areas__panel { padding: 17px 18px 15px; }
  .service-areas__panel-media { max-height: 205px; }
  .service-areas__service { min-height: 62px; }
  .service-areas__selector-item { min-height: 70px; }
  .service-areas__selector-wrap { margin-top: 10px; }
  .service-areas__all-cta-wrap { margin-top: 9px; }
}

/* Faster entrance story: still sequential and premium, no 8-second lockout. */
.service-areas.areas-animate.is-areas-inview .service-areas__country-outline {
  transition-delay: .72s !important;
  transition-duration: 1.18s !important;
}
.service-areas.areas-animate.is-areas-inview .service-areas__map-region {
  transition-delay: calc(1.24s + (var(--region-index, 0) * .055s)) !important;
  transition-duration: .56s !important;
}
.service-areas.areas-animate.is-areas-inview .service-areas__country-fill { transition-delay: 1.40s !important; }
.service-areas.areas-animate.is-areas-inview .service-areas__marker {
  transition-delay: calc(1.60s + (var(--marker-index, 0) * .085s)) !important;
}
.service-areas.areas-animate.is-areas-inview .service-areas__connection {
  transition-delay: calc(2.12s + (var(--connection-index, 0) * .075s)) !important;
  transition-duration: .72s !important;
}
.service-areas.areas-animate.is-areas-inview .service-areas__panel.is-active {
  transition-delay: 2.46s !important;
  transition-duration: .72s !important;
}
.service-areas.areas-animate.is-areas-inview .service-areas__panel.is-active [data-panel-sequence] {
  transition-delay: calc(2.64s + (var(--sequence-index, 0) * .075s)) !important;
  transition-duration: .48s !important;
}
.service-areas.areas-animate.is-areas-inview .service-areas__panel.is-active [data-panel-image] {
  transition-delay: 2.94s !important;
  transition-duration: .72s !important;
}
.service-areas.areas-animate.is-areas-inview .service-areas__panel.is-active [data-panel-image] img {
  transition-delay: 2.94s !important;
  transition-duration: .78s !important;
}
.service-areas.areas-animate.is-areas-inview .service-areas__panel.is-active [data-panel-service] {
  transition-delay: calc(3.16s + (var(--service-index, 0) * .07s)) !important;
  transition-duration: .42s !important;
}
.service-areas.areas-animate.is-areas-inview .service-areas__panel.is-active [data-panel-cta] {
  transition-delay: 3.55s !important;
  transition-duration: .44s !important;
}
.service-areas.areas-animate.is-areas-inview .service-areas__selector-wrap {
  transition-delay: 3.72s !important;
  transition-duration: .52s !important;
}
.service-areas.areas-animate.is-areas-inview .service-areas__selector-item {
  transition-delay: calc(3.82s + (var(--selector-index, 0) * .055s)) !important;
  transition-duration: .38s !important;
}
.service-areas.areas-animate.is-areas-inview .service-areas__all-cta-wrap {
  transition-delay: 4.20s !important;
  transition-duration: .48s !important;
}

/* User interaction always wins over the entrance timeline. */
.service-areas.has-user-interacted .service-areas__eyebrow,
.service-areas.has-user-interacted .service-areas__description,
.service-areas.has-user-interacted .service-areas__heading-line > span,
.service-areas.has-user-interacted .service-areas__marker,
.service-areas.has-user-interacted .service-areas__selector-wrap,
.service-areas.has-user-interacted .service-areas__selector-item,
.service-areas.has-user-interacted .service-areas__all-cta-wrap {
  opacity: 1 !important;
  transform: none !important;
  transition-delay: 0s !important;
}
.service-areas.has-user-interacted .service-areas__country-outline,
.service-areas.has-user-interacted .service-areas__map-region,
.service-areas.has-user-interacted .service-areas__connection {
  stroke-dashoffset: 0 !important;
  opacity: 1;
  transition-delay: 0s !important;
}
.service-areas.has-user-interacted .service-areas__country-fill { opacity: .98 !important; transition-delay: 0s !important; }
.service-areas.has-user-interacted .service-areas__panel.is-active {
  opacity: 1 !important;
  transform: none !important;
  clip-path: inset(0 0 0 0 round 16px) !important;
  transition-delay: 0s !important;
}
.service-areas.has-user-interacted .service-areas__panel.is-active [data-panel-sequence],
.service-areas.has-user-interacted .service-areas__panel.is-active [data-panel-service],
.service-areas.has-user-interacted .service-areas__panel.is-active [data-panel-cta] {
  opacity: 1 !important;
  transform: none !important;
  transition-delay: 0s !important;
}
.service-areas.has-user-interacted .service-areas__panel.is-active [data-panel-image] {
  clip-path: inset(0 0 0 0 round 10px) !important;
  transition-delay: 0s !important;
}
.service-areas.has-user-interacted .service-areas__panel.is-active [data-panel-image] img {
  transform: scale(1) !important;
  transition-delay: 0s !important;
}

/* =========================================================
   HOMEPAGE: RECENT MARBLE PROJECTS
   Core-page content is rendered from core_pages.content_json.
   Designed to fit a normal desktop viewport as one composition.
   ========================================================= */
.recent-projects {
  --rp-text: #172121;
  --rp-muted: #58615f;
  --rp-teal: var(--teal, #07585b);
  --rp-border: rgba(37, 55, 53, .13);
  position: relative;
  isolation: isolate;
  overflow: clip;
  color: var(--rp-text);
  background: #f7f5f0;
  padding: clamp(30px, 4.2vh, 54px) 0 clamp(24px, 3.6vh, 48px);
}
.recent-projects::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    linear-gradient(rgba(247,245,240,.91), rgba(247,245,240,.94)),
    var(--recent-projects-bg, none);
  background-position: center;
  background-size: cover;
  opacity: .82;
}
.recent-projects::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 76% 16%, rgba(255,255,255,.65), transparent 31%),
    radial-gradient(circle at 12% 84%, rgba(255,255,255,.45), transparent 30%);
}
.recent-projects__inner {
  width: min(1500px, calc(100% - 72px));
  margin-inline: auto;
}
.recent-projects__top {
  display: grid;
  grid-template-columns: minmax(310px, .37fr) minmax(0, 1fr);
  gap: clamp(24px, 2.6vw, 42px);
  align-items: stretch;
}
.recent-projects__intro {
  align-self: center;
  min-width: 0;
  padding: 2px 10px 4px 2px;
}
.recent-projects__eyebrow {
  margin: 0;
  color: #074f50;
  font: 600 clamp(.72rem, .8vw, .86rem)/1.2 "Jost", sans-serif;
  letter-spacing: .29em;
  text-transform: uppercase;
}
.recent-projects__eyebrow-line {
  display: block;
  width: 31px;
  height: 1.5px;
  margin: 11px 0 clamp(22px, 2.5vh, 32px);
  background: #147575;
  transform-origin: left center;
}
.recent-projects__heading {
  margin: 0;
  color: var(--rp-text);
  font-family: "Jost", sans-serif;
  font-size: clamp(3rem, 4vw, 4.75rem);
  font-weight: 690;
  line-height: .94;
  letter-spacing: -.046em;
}
.recent-projects__visual-heading,
.recent-projects__heading-line { display: block; }
.recent-projects__heading-line {
  overflow: hidden;
  padding-bottom: .04em;
}
.recent-projects__heading-line > span { display: inline-block; }
.recent-projects__heading-line em {
  display: inline-block;
  margin-left: .12em;
  color: var(--rp-teal);
  font-family: "Lobster", cursive;
  font-size: 1.02em;
  font-style: normal;
  font-weight: 400;
  letter-spacing: -.025em;
}
.recent-projects__description {
  max-width: 430px;
  margin: clamp(22px, 2.7vh, 34px) 0 0;
  color: #394341;
  font-size: clamp(.96rem, 1vw, 1.08rem);
  line-height: 1.62;
}
.recent-projects__featured-frame {
  position: relative;
  min-width: 0;
  border: 1px solid var(--rp-border);
  border-radius: 15px;
  overflow: hidden;
  background: #e8e4dd;
  box-shadow: 0 16px 42px rgba(27,42,40,.055);
}
.recent-projects__preview-badge,
.project-card__preview-badge {
  position: absolute;
  z-index: 9;
  top: 16px;
  left: 16px;
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 10px;
  border-radius: 7px;
  background: rgba(7,79,80,.88);
  color: #fff;
  font-family: var(--font-ui, "Jost", sans-serif);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .16em;
  line-height: 1;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
  box-shadow: 0 6px 18px rgba(7,79,80,.10);
}
.project-card__preview-badge { top: 14px; left: 14px; }
.project-compare,
.recent-projects__featured-image {
  position: relative;
  width: 100%;
  height: clamp(285px, 38vh, 405px);
  overflow: hidden;
  background: #d8d3cb;
  touch-action: none;
  user-select: none;
}
.project-compare > img,
.project-compare__after,
.project-compare__after img,
.recent-projects__featured-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.project-compare__after {
  clip-path: inset(0 calc(100% - var(--compare-position)) 0 0);
  will-change: clip-path;
}
.project-compare__label {
  position: absolute;
  z-index: 5;
  top: 22px;
  min-width: 85px;
  padding: 8px 14px;
  border-radius: 5px;
  background: rgba(6,77,80,.91);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-align: center;
  text-transform: uppercase;
  box-shadow: 0 8px 22px rgba(8,28,29,.12);
}
.project-compare__label--before { left: 22px; }
.project-compare__label--after { right: 22px; }
.project-compare__divider {
  position: absolute;
  z-index: 6;
  top: 0;
  bottom: 0;
  left: var(--compare-position);
  width: 2px;
  background: rgba(255,255,255,.9);
  transform: translateX(-1px);
  box-shadow: 0 0 0 1px rgba(17,37,37,.04);
}
.project-compare__handle {
  position: absolute;
  z-index: 7;
  left: var(--compare-position);
  top: 50%;
  width: 48px;
  height: 48px;
  padding: 0;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(16,51,51,.12);
  border-radius: 50%;
  background: #fff;
  color: #0b494b;
  box-shadow: 0 8px 24px rgba(16,32,32,.15);
  cursor: ew-resize;
}
.project-compare__handle svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.project-compare__handle:focus-visible {
  outline: 3px solid rgba(20,117,117,.28);
  outline-offset: 3px;
}
.project-meta {
  min-height: 104px;
  margin-top: clamp(12px, 1.6vh, 18px);
  display: grid;
  grid-template-columns: minmax(320px, 1.55fr) repeat(3, minmax(150px, .9fr)) minmax(125px, .45fr);
  align-items: center;
  border: 1px solid var(--rp-border);
  border-radius: 14px;
  background: rgba(255,255,255,.73);
  box-shadow: 0 13px 32px rgba(24,38,36,.035);
  overflow: hidden;
}
.project-meta > * {
  min-width: 0;
  min-height: 74px;
  padding: 13px 22px;
  display: flex;
  align-items: center;
}
.project-meta > * + * { border-left: 1px solid rgba(36,57,54,.10); }
.project-meta__identity { display: block; }
.project-meta__category {
  margin: 0 0 7px;
  color: var(--rp-teal);
  font-size: .68rem;
  font-weight: 720;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.project-meta__identity h3 {
  margin: 0;
  font-size: clamp(1.05rem, 1.25vw, 1.28rem);
  font-weight: 560;
  line-height: 1.18;
  letter-spacing: -.018em;
}
.project-meta__facts {
  margin: 8px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  color: #58615f;
  font-size: .74rem;
}
.project-proof { gap: 13px; }
.project-proof__icon {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  color: var(--rp-teal);
}
.project-proof__icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.project-proof strong {
  display: block;
  margin-bottom: 5px;
  font-size: .68rem;
  font-weight: 740;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.project-proof p {
  margin: 0;
  color: #59615f;
  font-size: .69rem;
  line-height: 1.45;
}
.project-meta__action {
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 10px;
  text-align: right;
}
.project-meta__index {
  color: #7a817f;
  font-size: .76rem;
  letter-spacing: .06em;
}
.project-meta__index strong { color: var(--rp-teal); }
.project-meta__index span { margin: 0 6px; color: #afb3b1; }
.project-meta__link,
.project-card__link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: .76rem;
  font-weight: 620;
}
.project-meta__link { color: #0a5557; border-bottom: 1px solid #147575; padding-bottom: 3px; }
.project-meta__link svg,
.project-card__link svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .45s cubic-bezier(.22,1,.36,1);
}
.project-meta__link:hover svg { transform: translateX(5px); }
.recent-projects__grid {
  margin-top: clamp(12px, 1.7vh, 18px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.35vw, 20px);
}
.project-card {
  position: relative;
  min-width: 0;
  height: clamp(180px, 24vh, 260px);
  display: block;
  overflow: hidden;
  border: 1px solid rgba(31,50,48,.11);
  border-radius: 13px;
  background: #d9d4cc;
  color: #fff;
  box-shadow: 0 13px 31px rgba(25,39,37,.035);
}
.project-card > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.001);
  transition: transform .58s cubic-bezier(.22,1,.36,1);
}
.project-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,15,14,0) 34%, rgba(8,12,11,.69) 100%);
  transition: background .5s ease;
}
.project-card__content {
  position: absolute;
  inset: auto 22px 18px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  transition: transform .5s cubic-bezier(.22,1,.36,1);
}
.project-card__category {
  position: relative;
  font-size: .69rem;
  font-weight: 720;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.project-card__category::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 42px;
  height: 1px;
  background: #4ab1ae;
  transform: scaleX(.45);
  transform-origin: left center;
  transition: transform .5s cubic-bezier(.22,1,.36,1);
}
.project-card__title {
  max-width: 90%;
  margin-top: 4px;
  font-size: clamp(1.05rem, 1.3vw, 1.34rem);
  font-weight: 510;
  line-height: 1.13;
  letter-spacing: -.018em;
}
.project-card__facts { color: rgba(255,255,255,.82); font-size: .73rem; }
.project-card__link { margin-top: 8px; border-bottom: 1px solid #4ab1ae; padding-bottom: 3px; }
.project-card:hover > img { transform: scale(1.035); }
.project-card:hover .project-card__overlay { background: linear-gradient(180deg, rgba(10,15,14,.03) 28%, rgba(8,12,11,.76) 100%); }
.project-card:hover .project-card__content { transform: translateY(-4px); }
.project-card:hover .project-card__category::after { transform: scaleX(1); }
.project-card:hover .project-card__link svg { transform: translateX(7px); }
.project-card:focus-visible { outline: 3px solid rgba(20,117,117,.32); outline-offset: 3px; }
.recent-projects__cta-wrap {
  display: flex;
  justify-content: center;
  margin-top: clamp(11px, 1.45vh, 17px);
}
.recent-projects__cta {
  min-width: min(420px, 100%);
  min-height: 50px;
  text-transform: uppercase;
  letter-spacing: .14em;
}
.recent-projects__cta.is-disabled { opacity: .55; pointer-events: none; }

/* Cinematic entrance: only hidden after JS opts in. */
.recent-projects--js .recent-projects__eyebrow,
.recent-projects--js .recent-projects__description,
.recent-projects--js .recent-projects__cta-wrap { opacity: 0; transform: translateY(16px); }
.recent-projects--js .recent-projects__eyebrow-line { transform: scaleX(0); }
.recent-projects--js .recent-projects__heading-line > span { opacity: 0; transform: translateY(52px); }
.recent-projects--js .recent-projects__heading-line em { opacity: 0; transform: translateY(20px) scale(.96); }
.recent-projects--js .recent-projects__featured-frame { clip-path: inset(0 100% 0 0); }
.recent-projects--js .recent-projects__featured-frame img { transform: scale(1.045); }
.recent-projects--js .project-compare__divider { transform: translateX(-1px) scaleY(0); transform-origin: top center; }
.recent-projects--js .project-compare__handle { opacity: 0; transform: translate(-50%, -50%) scale(.75); }
.recent-projects--js .project-compare__label { opacity: 0; }
.recent-projects--js .project-compare__label--before { transform: translateX(-8px); }
.recent-projects--js .project-compare__label--after { transform: translateX(8px); }
.recent-projects--js .project-meta { opacity: 0; transform: translateY(24px); }
.recent-projects--js .project-meta [data-project-meta-item] { opacity: 0; transform: translateY(10px); }
.recent-projects--js .project-card { opacity: 0; }
.recent-projects--js .project-card--1 { clip-path: inset(100% 0 0 0); }
.recent-projects--js .project-card--2 { clip-path: inset(0 100% 0 0); }
.recent-projects--js .project-card--3 { clip-path: inset(0 0 100% 0); }
.recent-projects--js .project-card > img { transform: scale(1.05); }

.recent-projects--js.is-revealed .recent-projects__eyebrow {
  opacity: 1; transform: translateY(0); transition: opacity .72s ease .18s, transform .72s cubic-bezier(.16,1,.3,1) .18s;
}
.recent-projects--js.is-revealed .recent-projects__eyebrow-line {
  transform: scaleX(1); transition: transform .58s cubic-bezier(.16,1,.3,1) .62s;
}
.recent-projects--js.is-revealed .recent-projects__heading-line:nth-child(1) > span {
  opacity: 1; transform: translateY(0); transition: opacity .94s ease .78s, transform .94s cubic-bezier(.16,1,.3,1) .78s;
}
.recent-projects--js.is-revealed .recent-projects__heading-line:nth-child(2) > span {
  opacity: 1; transform: translateY(0); transition: opacity .94s ease .94s, transform .94s cubic-bezier(.16,1,.3,1) .94s;
}
.recent-projects--js.is-revealed .recent-projects__heading-line em {
  opacity: 1; transform: translateY(0) scale(1); transition: opacity .9s ease 1.08s, transform .9s cubic-bezier(.16,1,.3,1) 1.08s;
}
.recent-projects--js.is-revealed .recent-projects__description {
  opacity: 1; transform: translateY(0); transition: opacity .78s ease 1.18s, transform .78s cubic-bezier(.16,1,.3,1) 1.18s;
}
.recent-projects--js.is-revealed .recent-projects__featured-frame {
  clip-path: inset(0); transition: clip-path 1.28s cubic-bezier(.16,1,.3,1) 1.02s, border-color .5s ease;
}
.recent-projects--js.is-revealed .recent-projects__featured-frame img {
  transform: scale(1); transition: transform 1.35s cubic-bezier(.16,1,.3,1) 1.02s;
}
.recent-projects--js.is-revealed .project-compare__divider {
  transform: translateX(-1px) scaleY(1); transition: transform .78s cubic-bezier(.16,1,.3,1) 2.08s;
}
.recent-projects--js.is-revealed .project-compare__handle {
  opacity: 1; transform: translate(-50%, -50%) scale(1); transition: opacity .5s ease 2.62s, transform .5s cubic-bezier(.16,1,.3,1) 2.62s;
}
.recent-projects--js.is-revealed .project-compare__label--before {
  opacity: 1; transform: translateX(0); transition: opacity .45s ease 2.78s, transform .45s cubic-bezier(.16,1,.3,1) 2.78s;
}
.recent-projects--js.is-revealed .project-compare__label--after {
  opacity: 1; transform: translateX(0); transition: opacity .45s ease 2.9s, transform .45s cubic-bezier(.16,1,.3,1) 2.9s;
}
.recent-projects--js.is-revealed .project-meta {
  opacity: 1; transform: translateY(0); transition: opacity .8s ease 2.35s, transform .8s cubic-bezier(.16,1,.3,1) 2.35s;
}
.recent-projects--js.is-revealed .project-meta [data-project-meta-item] {
  opacity: 1; transform: translateY(0); transition: opacity .68s ease, transform .68s cubic-bezier(.16,1,.3,1);
}
.recent-projects--js.is-revealed .project-meta [data-project-meta-item]:nth-child(1) { transition-delay: 2.55s; }
.recent-projects--js.is-revealed .project-meta [data-project-meta-item]:nth-child(2) { transition-delay: 2.67s; }
.recent-projects--js.is-revealed .project-meta [data-project-meta-item]:nth-child(3) { transition-delay: 2.79s; }
.recent-projects--js.is-revealed .project-meta [data-project-meta-item]:nth-child(4) { transition-delay: 2.91s; }
.recent-projects--js.is-revealed .project-meta [data-project-meta-item]:nth-child(5) { transition-delay: 3.03s; }
.recent-projects--js.is-revealed .project-card {
  opacity: 1; clip-path: inset(0); transition: opacity .9s ease, clip-path .95s cubic-bezier(.16,1,.3,1);
}
.recent-projects--js.is-revealed .project-card--1 { transition-delay: 3.05s; }
.recent-projects--js.is-revealed .project-card--2 { transition-delay: 3.24s; }
.recent-projects--js.is-revealed .project-card--3 { transition-delay: 3.43s; }
.recent-projects--js.is-revealed .project-card > img { transform: scale(1); transition: transform 1.05s cubic-bezier(.16,1,.3,1), transform .58s cubic-bezier(.22,1,.36,1) .95s; }
.recent-projects--js.is-revealed .recent-projects__cta-wrap {
  opacity: 1; transform: translateY(0); transition: opacity .72s ease 3.72s, transform .72s cubic-bezier(.16,1,.3,1) 3.72s;
}

@media (min-width: 1200px) and (max-height: 850px) {
  .recent-projects { padding-block: 20px 22px; }
  .recent-projects__eyebrow-line { margin-bottom: 19px; }
  .recent-projects__heading { font-size: clamp(2.75rem, 3.55vw, 4.05rem); }
  .recent-projects__description { margin-top: 18px; font-size: .91rem; line-height: 1.5; }
  .project-compare, .recent-projects__featured-image { height: clamp(250px, 35vh, 305px); }
  .project-meta { min-height: 88px; }
  .project-meta > * { min-height: 64px; padding: 10px 16px; }
  .project-proof__icon { width: 34px; height: 34px; flex-basis: 34px; }
  .project-card { height: clamp(150px, 21vh, 185px); }
  .project-card__content { inset: auto 18px 14px; }
  .recent-projects__cta { min-height: 46px; }
}
@media (max-width: 1180px) {
  .recent-projects__inner { width: min(1000px, calc(100% - 56px)); }
  .recent-projects__top { grid-template-columns: 1fr; }
  .recent-projects__intro { max-width: 720px; }
  .project-meta { grid-template-columns: 1.4fr repeat(3, 1fr); }
  .project-meta__action { grid-column: 1 / -1; min-height: auto; flex-direction: row; justify-content: space-between; align-items: center; border-left: 0; border-top: 1px solid rgba(36,57,54,.10); }
}
@media (max-width: 860px) {
  .recent-projects { padding: 72px 0 70px; }
  .recent-projects__inner { width: min(720px, calc(100% - 38px)); }
  .recent-projects__heading { font-size: clamp(2.75rem, 9vw, 4rem); }
  .project-compare, .recent-projects__featured-image { height: auto; aspect-ratio: 16 / 9; min-height: 0; }
  .project-meta { grid-template-columns: 1fr 1fr; }
  .project-meta__identity, .project-meta__action { grid-column: 1 / -1; }
  .project-meta > * { border-left: 0; border-top: 1px solid rgba(36,57,54,.10); }
  .project-meta__identity { border-top: 0; }
  .recent-projects__grid { grid-template-columns: 1fr; }
  .project-card { height: auto; aspect-ratio: 16 / 9; }
}
@media (max-width: 560px) {
  .recent-projects { padding: 62px 0 60px; }
  .recent-projects__inner { width: min(100% - 28px, 520px); }
  .recent-projects__heading-line em { display: block; margin-left: 0; }
  .project-compare__label { top: 13px; min-width: 72px; padding: 7px 10px; font-size: .64rem; }
  .project-compare__label--before { left: 13px; }
  .project-compare__label--after { right: 13px; }
  .project-compare__handle { width: 46px; height: 46px; }
  .project-meta { grid-template-columns: 1fr; }
  .project-meta__identity, .project-meta__action { grid-column: auto; }
  .project-meta__action { align-items: flex-start; text-align: left; }
  .project-meta > * { border-left: 0; border-top: 1px solid rgba(36,57,54,.10); }
  .project-meta__identity { border-top: 0; }
  .recent-projects__cta { min-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .recent-projects--js * { transition-duration: .001ms !important; animation-duration: .001ms !important; }
  .recent-projects--js .recent-projects__eyebrow,
  .recent-projects--js .recent-projects__description,
  .recent-projects--js .recent-projects__cta-wrap,
  .recent-projects--js .project-meta,
  .recent-projects--js .project-meta [data-project-meta-item],
  .recent-projects--js .project-card,
  .recent-projects--js .project-compare__handle,
  .recent-projects--js .project-compare__label { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .recent-projects--js .recent-projects__heading-line > span,
  .recent-projects--js .recent-projects__heading-line em { opacity: 1 !important; transform: none !important; }
  .recent-projects--js .recent-projects__featured-frame { clip-path: none !important; }
  .recent-projects--js .recent-projects__featured-frame img { transform: none !important; }
  .recent-projects--js .project-compare__divider { transform: translateX(-1px) !important; }
}

/* =========================================================
   OUR MARBLE FIXING PROCESS — DB-driven pinned scroll story
   ========================================================= */
.marble-process {
  position: relative;
  overflow: clip;
  isolation: isolate;
  background: #f7f4ef;
  color: #152324;
  font-family: "Jost", sans-serif;
}
.marble-process::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -3;
  background-image:
    linear-gradient(rgba(248,246,241,.94), rgba(248,246,241,.94)),
    var(--marble-process-bg, none);
  background-size: cover;
  background-position: center;
  opacity: 1;
}
.marble-process::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(circle at 74% 40%, rgba(7,88,91,.055), transparent 28%),
    linear-gradient(90deg, transparent 0 72%, rgba(255,255,255,.56) 72% 100%);
}
.marble-process__stage {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: clamp(28px, 4vh, 52px) 0;
}
.marble-process__inner {
  width: min(1500px, calc(100% - 72px));
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(360px, .72fr);
  gap: clamp(30px, 3.2vw, 54px);
  align-items: center;
}
.marble-process__story { min-width: 0; }
.marble-process__intro { max-width: 760px; }
.marble-process__eyebrow-row {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: clamp(16px, 2.2vh, 24px);
}
.marble-process__eyebrow-line {
  width: 30px;
  height: 2px;
  background: var(--teal);
  transform-origin: left center;
}
.marble-process__eyebrow {
  margin: 0;
  color: var(--teal);
  font-size: .82rem;
  font-weight: 650;
  letter-spacing: .19em;
  text-transform: uppercase;
}
.marble-process__heading {
  margin: 0;
  color: #162324;
  font-size: clamp(3.15rem, 4.3vw, 4.8rem);
  font-weight: 500;
  line-height: .98;
  letter-spacing: -.045em;
}
.marble-process__heading-visual,
.marble-process__heading-line { display: block; }
.marble-process__heading-line { overflow: hidden; }
.marble-process__heading-line > span { display: block; }
.marble-process__heading em {
  display: inline-block;
  color: var(--teal);
  font-family: "Lobster", cursive;
  font-style: normal;
  font-weight: 400;
  letter-spacing: -.02em;
}
.marble-process__description {
  max-width: 690px;
  margin: clamp(18px, 2.2vh, 26px) 0 0;
  color: #667071;
  font-size: clamp(.98rem, 1.08vw, 1.12rem);
  line-height: 1.58;
}
.marble-process__story-grid {
  margin-top: clamp(24px, 3vh, 34px);
  display: grid;
  grid-template-columns: minmax(170px, .27fr) minmax(0, 1fr);
  gap: clamp(22px, 2.4vw, 38px);
  align-items: stretch;
}
.marble-process__navigator {
  position: relative;
  display: grid;
  gap: 0;
  align-content: stretch;
  min-height: 410px;
  padding-block: 6px;
}
.marble-process__nav-track {
  position: absolute;
  left: 29px;
  top: 38px;
  bottom: 38px;
  width: 1px;
  background: rgba(21,60,61,.14);
  overflow: hidden;
}
.marble-process__nav-progress {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 0;
  background: var(--teal);
  transition: height .75s cubic-bezier(.16,1,.3,1);
}
.marble-process__nav-item {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 60px minmax(0,1fr);
  gap: 14px;
  align-items: center;
  width: 100%;
  padding: 8px 0;
  border: 0;
  background: transparent;
  color: #7d8585;
  text-align: left;
  cursor: pointer;
  transition: color .45s ease, transform .45s cubic-bezier(.16,1,.3,1);
}
.marble-process__nav-number {
  width: 60px;
  height: 60px;
  border: 1px solid rgba(30,74,75,.14);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.55);
  color: #858d8d;
  font-size: 1.22rem;
  font-weight: 500;
  box-shadow: 0 8px 22px rgba(30,48,47,.03);
  transition: color .5s ease, border-color .5s ease, background .5s ease, box-shadow .5s ease, transform .5s cubic-bezier(.16,1,.3,1);
}
.marble-process__nav-title {
  max-width: 150px;
  font-size: .92rem;
  font-weight: 480;
  line-height: 1.35;
}
.marble-process__nav-item.is-active { color: var(--teal); transform: translateX(3px); }
.marble-process__nav-item.is-active .marble-process__nav-number {
  color: #fff;
  border-color: var(--teal);
  background: var(--teal);
  box-shadow: 0 11px 28px rgba(7,88,91,.22);
  transform: scale(1.03);
}
.marble-process__nav-item:hover:not(.is-active) { color: #334344; }
.marble-process__nav-item:focus-visible { outline: 2px solid var(--teal); outline-offset: 5px; border-radius: 12px; }
.marble-process__panel-stack {
  position: relative;
  min-height: 440px;
}
.marble-process__panel {
  position: relative;
  min-height: 440px;
  padding: clamp(26px, 2.15vw, 36px);
  border: 1px solid rgba(42,72,70,.11);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(250,248,244,.94));
  box-shadow: 0 18px 50px rgba(45,51,47,.08);
  overflow: hidden;
}
.marble-process__panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .38;
  background:
    linear-gradient(112deg, transparent 0 56%, rgba(7,88,91,.025) 56% 57%, transparent 57% 100%),
    radial-gradient(circle at 78% 12%, rgba(7,88,91,.04), transparent 35%);
}
.marble-process__panel-head {
  position: relative;
  display: grid;
  grid-template-columns: auto 1px 1fr;
  gap: 24px;
  align-items: center;
  min-height: 94px;
}
.marble-process__step-number {
  color: var(--teal);
  font-size: clamp(3.7rem, 5vw, 5.4rem);
  font-weight: 420;
  line-height: .8;
  letter-spacing: -.055em;
}
.marble-process__panel-divider { align-self: stretch; background: rgba(23,68,68,.18); }
.marble-process__step-sketch {
  justify-self: end;
  width: min(42%, 200px);
  padding: 10px 14px;
  border: 1px solid rgba(7,88,91,.09);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(7,88,91,.045), rgba(7,88,91,.012));
  color: rgba(7,88,91,.68);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}
.marble-process__step-sketch svg { width: 100%; height: auto; fill: none; stroke: currentColor; stroke-width: 2.05; stroke-linecap: round; stroke-linejoin: round; }
.marble-process__panel-copy { position: relative; margin-top: 10px; }
.marble-process__panel-title-wrap { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.marble-process__panel h3 {
  margin: 0;
  color: #182425;
  font-size: clamp(1.55rem, 2vw, 2.05rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.028em;
}
.marble-process__step-subtitle {
  margin: 0;
  color: var(--teal);
  font-size: .82rem;
  font-weight: 620;
  letter-spacing: .02em;
}
.marble-process__step-description {
  max-width: 700px;
  margin: 10px 0 0;
  color: #636d6d;
  font-size: .94rem;
  line-height: 1.46;
}
.marble-process__items {
  position: relative;
  margin-top: 18px;
  display: grid;
  gap: 10px;
}
.marble-process__items--step-1 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.marble-process__items--step-2 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.marble-process__items--step-3 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.marble-process__items--step-4 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.marble-process__item {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 10px;
  border: 1px solid rgba(38,69,67,.11);
  border-radius: 11px;
  background: rgba(255,255,255,.75);
  color: #344343;
  font-size: .82rem;
  font-weight: 520;
  text-align: center;
  box-shadow: 0 7px 18px rgba(39,54,51,.035);
}
.marble-process__item-icon {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  color: var(--teal);
}
.marble-process__item-icon svg,
.marble-process__note-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.marble-process__note {
  position: relative;
  margin-top: 14px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding-top: 12px;
  border-top: 1px solid rgba(36,66,64,.09);
  color: #687373;
  font-size: .80rem;
  line-height: 1.42;
}
.marble-process__note-icon { width: 25px; height: 25px; color: var(--teal); }
.marble-process__scroll-hint {
  position: relative;
  left: auto;
  bottom: auto;
  transform: none;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 14px;
  color: #7c8585;
  font-size: .75rem;
  white-space: nowrap;
}
.marble-process__mouse {
  width: 25px;
  height: 34px;
  border: 1.4px solid rgba(7,88,91,.52);
  border-radius: 15px;
  display: grid;
  justify-items: center;
  padding-top: 6px;
}
.marble-process__mouse i { width: 2px; height: 7px; border-radius: 4px; background: var(--teal); }
.marble-process__final-row {
  position: relative;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(36,66,64,.09);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.marble-process__final-row p { margin: 0; color: #4f5e5e; font-size: .88rem; }
.marble-process__final-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--teal);
  font-weight: 650;
  font-size: .86rem;
}
.marble-process__final-link svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; transition: transform .3s ease; }
.marble-process__final-link:hover svg { transform: translateX(5px); }
.marble-process__fox {
  position: relative;
  min-width: 0;
  align-self: stretch;
  margin: 0;
  display: grid;
  align-items: end;
  min-height: min(82svh, 760px);
  border-radius: 28px;
  overflow: hidden;
  background: #eeeae2;
  box-shadow: inset 0 0 0 1px rgba(35,64,62,.08);
}
.marble-process__fox::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(247,244,239,.70) 0, rgba(247,244,239,.08) 19%, transparent 45%);
  pointer-events: none;
}
.marble-process__fox picture { position: absolute; inset: 0; }
.marble-process__fox-media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 52% 50%;
  transform-origin: 55% 70%;
}
.marble-process__fox-blueprint {
  position: absolute;
  z-index: 2;
  right: 3%;
  top: 5%;
  width: 29%;
  aspect-ratio: 1;
  opacity: .18;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent 49.6%, var(--teal) 49.6% 50.4%, transparent 50.4%),
    linear-gradient(transparent 49.6%, var(--teal) 49.6% 50.4%, transparent 50.4%);
}
.marble-process__fox-blueprint i { position: absolute; background: var(--teal); opacity: .75; }
.marble-process__fox-blueprint i:nth-child(1) { width: 100%; height: 1px; top: 18%; }
.marble-process__fox-blueprint i:nth-child(2) { width: 1px; height: 100%; left: 70%; }
.marble-process__fox-blueprint i:nth-child(3) { width: 72%; height: 1px; top: 72%; right: 0; }
.marble-process__fox-blueprint i:nth-child(4) { width: 1px; height: 65%; left: 20%; bottom: 0; }
.marble-process__fox figcaption {
  position: absolute;
  z-index: 3;
  left: 22px;
  bottom: 20px;
  max-width: 190px;
  padding: 9px 12px;
  border: 1px solid rgba(255,255,255,.60);
  border-radius: 10px;
  background: rgba(255,255,255,.72);
  color: var(--teal);
  font-size: .72rem;
  font-weight: 650;
  letter-spacing: .05em;
  backdrop-filter: blur(10px);
}

/* Enhanced desktop story: one viewport remains visible while scroll advances steps. */
.marble-process--enhanced { min-height: var(--marble-process-scroll, 428vh); }
.marble-process--enhanced .marble-process__stage {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 680px;
  overflow: hidden;
}
.marble-process--enhanced .marble-process__panel-stack { min-height: 440px; }
.marble-process--enhanced .marble-process__panel {
  position: absolute;
  inset: 0;
  transition:
    opacity .82s ease,
    transform .95s cubic-bezier(.16,1,.3,1),
    clip-path .95s cubic-bezier(.16,1,.3,1);
}
.marble-process--enhanced .marble-process__panel.is-active {
  opacity: 1;
  transform: translateY(0) scale(1);
  clip-path: inset(0 0 0 0 round 18px);
  pointer-events: auto;
  z-index: 3;
}
.marble-process--enhanced .marble-process__panel.is-before {
  opacity: 0;
  transform: translateY(-24px) scale(.976);
  clip-path: inset(0 0 18% 0 round 18px);
  pointer-events: none;
  z-index: 1;
}
.marble-process--enhanced .marble-process__panel.is-after {
  opacity: 0;
  transform: translateY(28px) scale(.974);
  clip-path: inset(18% 0 0 0 round 18px);
  pointer-events: none;
  z-index: 1;
}
.marble-process--enhanced .marble-process__panel:not(.is-active) .marble-process__item,
.marble-process--enhanced .marble-process__panel:not(.is-active) .marble-process__panel-title-wrap,
.marble-process--enhanced .marble-process__panel:not(.is-active) .marble-process__step-description,
.marble-process--enhanced .marble-process__panel:not(.is-active) .marble-process__note,
.marble-process--enhanced .marble-process__panel:not(.is-active) .marble-process__final-row { opacity: 0; transform: translateY(10px); }
.marble-process--enhanced .marble-process__panel.is-active .marble-process__panel-title-wrap,
.marble-process--enhanced .marble-process__panel.is-active .marble-process__step-description,
.marble-process--enhanced .marble-process__panel.is-active .marble-process__note,
.marble-process--enhanced .marble-process__panel.is-active .marble-process__final-row {
  opacity: 1; transform: translateY(0); transition: opacity .62s ease .18s, transform .68s cubic-bezier(.16,1,.3,1) .18s;
}
.marble-process--enhanced .marble-process__panel.is-active .marble-process__item {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .55s ease, transform .62s cubic-bezier(.16,1,.3,1), border-color .3s ease, background .3s ease;
}
.marble-process--enhanced .marble-process__panel.is-active .marble-process__item:nth-child(1) { transition-delay: .28s; }
.marble-process--enhanced .marble-process__panel.is-active .marble-process__item:nth-child(2) { transition-delay: .37s; }
.marble-process--enhanced .marble-process__panel.is-active .marble-process__item:nth-child(3) { transition-delay: .46s; }
.marble-process--enhanced .marble-process__panel.is-active .marble-process__item:nth-child(4) { transition-delay: .55s; }
.marble-process--enhanced .marble-process__panel.is-active .marble-process__item:nth-child(5) { transition-delay: .64s; }
.marble-process--enhanced .marble-process__panel.is-active .marble-process__item:nth-child(6) { transition-delay: .73s; }
.marble-process--enhanced .marble-process__panel--3.is-active .marble-process__item {
  border-color: rgba(7,88,91,.18);
  background: linear-gradient(180deg, rgba(255,255,255,.88), rgba(236,246,244,.72));
}
.marble-process--enhanced .marble-process__panel--4.is-active .marble-process__item-icon { animation: marbleProcessCheck .64s cubic-bezier(.16,1,.3,1) both; }
.marble-process--enhanced .marble-process__fox-media { animation: marbleProcessFoxIdle 5.8s ease-in-out infinite; }
.marble-process--enhanced .marble-process__fox.is-reacting .marble-process__fox-media { animation: marbleProcessFoxReact .86s cubic-bezier(.16,1,.3,1); }
.marble-process--enhanced .marble-process__mouse i { animation: marbleProcessMouse 1.65s ease-in-out infinite; }

.marble-process--enhanced:not(.is-entered) .marble-process__eyebrow-row,
.marble-process--enhanced:not(.is-entered) .marble-process__description,
.marble-process--enhanced:not(.is-entered) .marble-process__fox { opacity: 0; }
.marble-process--enhanced:not(.is-entered) .marble-process__eyebrow-row { transform: translateY(14px); }
.marble-process--enhanced:not(.is-entered) .marble-process__description { transform: translateY(16px); }
.marble-process--enhanced:not(.is-entered) .marble-process__heading-line > span { transform: translateY(110%); }
.marble-process--enhanced:not(.is-entered) .marble-process__fox { transform: translateX(25px) scale(.985); }
.marble-process--enhanced.is-entered .marble-process__eyebrow-row {
  opacity: 1; transform: none; transition: opacity .65s ease, transform .72s cubic-bezier(.16,1,.3,1);
}
.marble-process--enhanced.is-entered .marble-process__heading-line > span {
  transform: translateY(0); transition: transform .92s cubic-bezier(.16,1,.3,1) .12s;
}
.marble-process--enhanced.is-entered .marble-process__heading-line:nth-child(2) > span { transition-delay: .25s; }
.marble-process--enhanced.is-entered .marble-process__description {
  opacity: 1; transform: none; transition: opacity .7s ease .38s, transform .76s cubic-bezier(.16,1,.3,1) .38s;
}
.marble-process--enhanced.is-entered .marble-process__fox {
  opacity: 1; transform: none; transition: opacity .8s ease .18s, transform 1.02s cubic-bezier(.16,1,.3,1) .18s;
}

@keyframes marbleProcessFoxIdle {
  0%,100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-3px) scale(1.002); }
}
@keyframes marbleProcessFoxReact {
  0% { transform: translateY(0) rotate(0deg) scale(1); }
  38% { transform: translateY(-4px) rotate(.35deg) scale(1.006); }
  100% { transform: translateY(0) rotate(0deg) scale(1); }
}
@keyframes marbleProcessMouse {
  0%,100% { transform: translateY(0); opacity: .45; }
  50% { transform: translateY(7px); opacity: 1; }
}
@keyframes marbleProcessCheck {
  0% { transform: scale(.76); opacity: .2; }
  100% { transform: scale(1); opacity: 1; }
}

@media (min-width: 1200px) and (max-height: 850px) {
  .marble-process__stage { padding-block: 18px; }
  .marble-process__inner { grid-template-columns: minmax(0,1.55fr) minmax(330px,.68fr); gap: 34px; }
  .marble-process__eyebrow-row { margin-bottom: 12px; }
  .marble-process__heading { font-size: clamp(2.65rem, 3.55vw, 3.85rem); }
  .marble-process__description { margin-top: 12px; font-size: .92rem; line-height: 1.42; }
  .marble-process__story-grid { margin-top: 17px; grid-template-columns: 165px minmax(0,1fr); gap: 22px; }
  .marble-process__navigator { min-height: 370px; }
  .marble-process__nav-number { width: 52px; height: 52px; font-size: 1.05rem; }
  .marble-process__nav-track { left: 25px; }
  .marble-process__nav-item { grid-template-columns: 52px minmax(0,1fr); gap: 11px; }
  .marble-process__nav-title { font-size: .8rem; }
  .marble-process__panel-stack,
  .marble-process__panel { min-height: 385px; }
  .marble-process__panel { padding: 22px 24px; }
  .marble-process__panel-head { min-height: 70px; }
  .marble-process__step-number { font-size: 3.55rem; }
  .marble-process__panel h3 { font-size: 1.42rem; }
  .marble-process__step-description { margin-top: 8px; font-size: .84rem; line-height: 1.38; }
  .marble-process__items { margin-top: 14px; gap: 8px; }
  .marble-process__item { min-height: 54px; padding: 8px; font-size: .71rem; }
  .marble-process__item-icon { width: 22px; height: 22px; flex-basis: 22px; }
  .marble-process__note { margin-top: 10px; padding-top: 9px; font-size: .71rem; line-height: 1.35; }
  .marble-process__fox { min-height: min(88svh, 690px); }
}

@media (max-width: 1180px) {
  .marble-process__inner { width: min(1000px, calc(100% - 56px)); grid-template-columns: minmax(0,1.35fr) minmax(300px,.65fr); }
  .marble-process__heading { font-size: clamp(2.8rem, 5vw, 4rem); }
  .marble-process__story-grid { grid-template-columns: 150px minmax(0,1fr); gap: 20px; }
  .marble-process__nav-item { grid-template-columns: 50px 1fr; gap: 10px; }
  .marble-process__nav-number { width: 50px; height: 50px; }
  .marble-process__nav-track { left: 24px; }
  .marble-process__nav-title { font-size: .78rem; }
  .marble-process__items--step-2,
  .marble-process__items--step-3 { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .marble-process__fox { min-height: 650px; }
}



/* V10.2: keep Step 01 note fully visible on shorter desktop/laptop viewports. */
@media (min-width: 901px) and (max-height: 780px) {
  .marble-process__stage { padding-block: 10px; }
  .marble-process__eyebrow-row { margin-bottom: 8px; }
  .marble-process__heading { font-size: clamp(2.35rem, 4vw, 3.25rem); line-height: .98; }
  .marble-process__description { margin-top: 8px; font-size: .84rem; line-height: 1.34; }
  .marble-process__story-grid { margin-top: 12px; }
  .marble-process__navigator { min-height: 340px; }
  .marble-process__panel-stack,
  .marble-process__panel { min-height: 350px; }
  .marble-process__panel { padding: 16px 20px 18px; }
  .marble-process__panel-head { min-height: 58px; gap: 16px; }
  .marble-process__step-number { font-size: 3.05rem; }
  .marble-process__step-sketch { width: min(38%, 170px); padding: 6px 10px; }
  .marble-process__panel-copy { margin-top: 6px; }
  .marble-process__panel h3 { font-size: 1.27rem; }
  .marble-process__step-subtitle { font-size: .69rem; }
  .marble-process__step-description { margin-top: 6px; font-size: .77rem; line-height: 1.34; }
  .marble-process__items { margin-top: 10px; gap: 7px; }
  .marble-process__item { min-height: 46px; padding: 6px 8px; font-size: .67rem; gap: 7px; }
  .marble-process__item-icon { width: 20px; height: 20px; flex-basis: 20px; }
  .marble-process__note { margin-top: 8px; padding-top: 7px; font-size: .67rem; line-height: 1.3; }
  .marble-process__note-icon { width: 20px; height: 20px; flex: 0 0 20px; }
  .marble-process__scroll-hint { display: none; }
  .marble-process__final-row { margin-top: 8px; padding-top: 7px; }
  .marble-process__final-row p,
  .marble-process__final-link { font-size: .7rem; }
}

@media (max-width: 900px) {
  .marble-process,
  .marble-process--enhanced { min-height: 0; }
  .marble-process--enhanced .marble-process__stage,
  .marble-process__stage { position: relative; top: auto; height: auto; min-height: 0; overflow: visible; padding: 72px 0; }
  .marble-process__inner { width: min(720px, calc(100% - 38px)); grid-template-columns: 1fr; gap: 32px; }
  .marble-process__story-grid { grid-template-columns: 1fr; }
  .marble-process__navigator { min-height: 0; grid-template-columns: repeat(4,minmax(140px,1fr)); overflow-x: auto; gap: 8px; padding-bottom: 8px; scroll-snap-type: x proximity; }
  .marble-process__nav-track { display: none; }
  .marble-process__nav-item { grid-template-columns: 44px minmax(90px,1fr); min-width: 150px; scroll-snap-align: start; }
  .marble-process__nav-number { width: 44px; height: 44px; }
  .marble-process__panel-stack { min-height: 0; display: grid; gap: 18px; }
  .marble-process--enhanced .marble-process__panel,
  .marble-process__panel { position: relative; inset: auto; min-height: 0; opacity: 1 !important; transform: none !important; clip-path: none !important; pointer-events: auto; }
  .marble-process--enhanced .marble-process__panel:not(.is-active) .marble-process__item,
  .marble-process--enhanced .marble-process__panel:not(.is-active) .marble-process__panel-title-wrap,
  .marble-process--enhanced .marble-process__panel:not(.is-active) .marble-process__step-description,
  .marble-process--enhanced .marble-process__panel:not(.is-active) .marble-process__note,
  .marble-process--enhanced .marble-process__panel:not(.is-active) .marble-process__final-row { opacity: 1; transform: none; }
  .marble-process__fox { order: -1; min-height: 560px; max-width: 560px; width: 100%; margin-inline: auto; }
  .marble-process__fox-media { object-position: 50% 35%; }
}

@media (max-width: 560px) {
  .marble-process__stage { padding: 58px 0; }
  .marble-process__inner { width: min(100% - 28px, 520px); }
  .marble-process__heading { font-size: clamp(2.5rem, 12vw, 3.45rem); }
  .marble-process__heading em { display: block; width: max-content; }
  .marble-process__description { font-size: .94rem; }
  .marble-process__fox { min-height: 470px; border-radius: 20px; }
  .marble-process__panel { padding: 22px 18px; border-radius: 15px; }
  .marble-process__panel-head { grid-template-columns: auto 1px minmax(90px,1fr); gap: 14px; min-height: 70px; }
  .marble-process__step-number { font-size: 3.15rem; }
  .marble-process__step-sketch { width: 100%; padding: 8px 10px; }
  .marble-process__panel-title-wrap { display: block; }
  .marble-process__step-subtitle { margin-top: 7px; }
  .marble-process__items,
  .marble-process__items--step-1,
  .marble-process__items--step-2,
  .marble-process__items--step-3,
  .marble-process__items--step-4 { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .marble-process__item { min-height: 64px; font-size: .76rem; flex-direction: column; gap: 5px; }
  .marble-process__final-row { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .marble-process--enhanced { min-height: 0; }
  .marble-process--enhanced .marble-process__stage { position: relative; top: auto; height: auto; min-height: 0; overflow: visible; }
  .marble-process--enhanced .marble-process__panel-stack { display: grid; gap: 18px; min-height: 0; }
  .marble-process--enhanced .marble-process__panel { position: relative; inset: auto; opacity: 1 !important; transform: none !important; clip-path: none !important; pointer-events: auto; }
  .marble-process--enhanced .marble-process__panel * { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; }
  .marble-process--enhanced .marble-process__fox-media,
  .marble-process--enhanced .marble-process__mouse i { animation: none !important; }
  .marble-process--enhanced:not(.is-entered) .marble-process__eyebrow-row,
  .marble-process--enhanced:not(.is-entered) .marble-process__description,
  .marble-process--enhanced:not(.is-entered) .marble-process__fox { opacity: 1; transform: none; }
  .marble-process--enhanced:not(.is-entered) .marble-process__heading-line > span { transform: none; }
}


/* ==========================================================================
   MARBLE PROCESS V10.3 — PANEL HEIGHT / CLIPPING FIX
   The panel-stack is the containing block for absolutely-positioned steps.
   Give the containing block enough real height instead of compressing content.
   ========================================================================== */

@media (min-width: 901px) {
  .marble-process--enhanced .marble-process__panel-stack {
    min-height: 500px !important;
    height: 500px;
  }

  .marble-process--enhanced .marble-process__panel {
    min-height: 500px !important;
    height: 500px;
    padding-bottom: 26px;
  }

  /* Do not allow the decorative scroll helper to sit on top of real content. */
  .marble-process__scroll-hint {
    display: none !important;
  }

  .marble-process__note,
  .marble-process__final-row {
    position: relative;
    z-index: 4;
  }
}

/* Normal laptop screens: keep the whole story in one viewport,
   but preserve enough panel height for Step 02 and Step 04 bottom rows. */
@media (min-width: 901px) and (max-height: 850px) {
  .marble-process__stage {
    padding-block: 12px;
  }

  .marble-process__eyebrow-row {
    margin-bottom: 8px;
  }

  .marble-process__heading {
    font-size: clamp(2.35rem, 3.2vw, 3.25rem);
  }

  .marble-process__description {
    margin-top: 8px;
    font-size: .86rem;
    line-height: 1.34;
  }

  .marble-process__story-grid {
    margin-top: 12px;
  }

  .marble-process--enhanced .marble-process__panel-stack {
    min-height: 445px !important;
    height: 445px;
  }

  .marble-process--enhanced .marble-process__panel {
    min-height: 445px !important;
    height: 445px;
    padding: 18px 22px 22px;
  }

  .marble-process__navigator {
    min-height: 445px;
  }

  .marble-process__panel-head {
    min-height: 64px;
  }

  .marble-process__panel-copy {
    margin-top: 7px;
  }

  .marble-process__items {
    margin-top: 12px;
  }

  .marble-process__note {
    margin-top: 10px;
    padding-top: 9px;
  }

  .marble-process__final-row {
    margin-top: 10px;
    padding-top: 9px;
  }
}

/* Shorter desktop viewport: still increase the DIV instead of cutting content. */
@media (min-width: 901px) and (max-height: 780px) {
  .marble-process--enhanced .marble-process__panel-stack {
    min-height: 420px !important;
    height: 420px;
  }

  .marble-process--enhanced .marble-process__panel {
    min-height: 420px !important;
    height: 420px;
    padding: 15px 20px 20px;
  }

  .marble-process__navigator {
    min-height: 420px;
  }

  .marble-process__panel-head {
    min-height: 58px;
  }

  .marble-process__items {
    margin-top: 9px;
  }

  .marble-process__item {
    min-height: 45px;
  }

  .marble-process__note,
  .marble-process__final-row {
    margin-top: 8px;
    padding-top: 7px;
  }
}


/* ==========================================================================\n   CUSTOMERS / ORGANIZATIONS WE HAVE WORKED WITH\n   DB-driven two-column vertical marquee\n   ========================================================================== */
.clients-showcase {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #f7f4ef;
  color: #192526;
}
.clients-showcase::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image:
    linear-gradient(rgba(247,244,239,.96), rgba(247,244,239,.96)),
    var(--clients-bg, none);
  background-size: cover;
  background-position: center;
}
.clients-showcase::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 75% 40%, rgba(255,255,255,.72), transparent 38%),
    linear-gradient(112deg, transparent 0 64%, rgba(7,88,91,.022) 64% 65%, transparent 65% 100%);
}
.clients-showcase__inner {
  width: min(1500px, calc(100% - 72px));
  min-height: min(900px, 100svh);
  margin-inline: auto;
  padding: clamp(48px, 5.6vh, 72px) 0;
  display: grid;
  grid-template-columns: minmax(360px, .78fr) minmax(620px, 1.22fr);
  align-items: center;
  gap: clamp(54px, 5vw, 92px);
}
.clients-showcase__content {
  max-width: 560px;
  padding-left: clamp(0px, 2vw, 28px);
}
.clients-showcase__eyebrow-wrap {
  display: inline-grid;
  gap: 10px;
  margin-bottom: 28px;
}
.clients-showcase__eyebrow {
  margin: 0;
  color: var(--teal);
  font-size: .92rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.clients-showcase__eyebrow-line {
  width: 38px;
  height: 2px;
  background: var(--teal);
  transform-origin: left center;
}
.clients-showcase__heading {
  margin: 0;
  color: #202526;
  font-size: clamp(3.25rem, 4.7vw, 5rem);
  font-weight: 430;
  line-height: .93;
  letter-spacing: -.045em;
  text-transform: uppercase;
}
.clients-showcase__heading-line {
  display: block;
  overflow: hidden;
  padding-bottom: .05em;
}
.clients-showcase__heading-line > span { display: block; }
.clients-showcase__heading em {
  display: block;
  margin-top: 4px;
  color: var(--teal);
  font-family: 'Lobster', cursive;
  font-size: .9em;
  font-style: normal;
  font-weight: 400;
  text-transform: none;
  letter-spacing: -.02em;
}
.clients-showcase__copy {
  max-width: 520px;
  margin-top: 30px;
  display: grid;
  gap: 14px;
}
.clients-showcase__copy p {
  margin: 0;
  color: #515d5d;
  font-size: clamp(.98rem, 1.03vw, 1.08rem);
  line-height: 1.62;
}
.clients-showcase__cta-wrap { margin-top: 30px; }
.clients-showcase__cta {
  min-width: 250px;
  justify-content: center;
  gap: 14px;
}
.clients-showcase__cta svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .35s cubic-bezier(.16,1,.3,1);
}
.clients-showcase__cta:hover svg { transform: translateX(5px); }
.clients-showcase__cta.is-disabled { opacity: .6; pointer-events: none; }
.clients-showcase__marquee {
  position: relative;
  height: clamp(560px, 72svh, 700px);
  min-height: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  padding: 24px;
  border: 1px solid rgba(40,68,66,.11);
  border-radius: 32px;
  background: rgba(255,255,255,.66);
  box-shadow:
    0 24px 60px rgba(38,48,45,.08),
    inset 0 1px 0 rgba(255,255,255,.94),
    inset 0 0 0 9px rgba(255,255,255,.26);
  clip-path: inset(0 0 0 0 round 32px);
}
.clients-showcase__marquee::before,
.clients-showcase__marquee::after {
  content: "";
  position: absolute;
  z-index: 6;
  left: 0;
  right: 0;
  height: 9%;
  pointer-events: none;
}
.clients-showcase__marquee::before {
  top: 0;
  background: linear-gradient(to bottom, rgba(247,245,241,.98), rgba(247,245,241,0));
}
.clients-showcase__marquee::after {
  bottom: 0;
  background: linear-gradient(to top, rgba(247,245,241,.98), rgba(247,245,241,0));
}
.clients-showcase__marquee-shine {
  position: absolute;
  z-index: 5;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.94);
}
.clients-showcase__column {
  position: relative;
  min-width: 0;
  height: 100%;
  overflow: hidden;
}
.clients-showcase__column--2::before {
  content: "";
  position: absolute;
  z-index: 5;
  top: 4%;
  bottom: 4%;
  left: -11px;
  width: 1px;
  background: rgba(36,67,64,.08);
}
.clients-showcase__track {
  --loop-distance: 700px;
  --marquee-duration: 30s;
  --marquee-delay: 0s;
  display: flex;
  flex-direction: column;
  gap: 14px;
  will-change: transform;
  transform: translate3d(0,0,0);
}
.clients-showcase__set {
  flex: none;
  display: grid;
  gap: 14px;
}
.clients-showcase__logo-card {
  height: clamp(92px, 10.5vh, 116px);
  display: grid;
  place-items: center;
  padding: 16px 22px;
  border: 1px solid rgba(40,67,65,.105);
  border-radius: 14px;
  background: rgba(255,255,255,.90);
  box-shadow: 0 8px 22px rgba(45,55,52,.045);
  transition:
    transform .38s cubic-bezier(.16,1,.3,1),
    border-color .38s ease,
    box-shadow .38s ease;
}
.clients-showcase__logo {
  display: block;
  max-width: 78%;
  max-height: 68px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: saturate(.98) contrast(1.01);
  transition: transform .38s cubic-bezier(.16,1,.3,1);
}
.clients-showcase__logo-card:hover {
  transform: translateY(-2px);
  border-color: rgba(7,88,91,.22);
  box-shadow: 0 12px 28px rgba(45,55,52,.065);
}
.clients-showcase__logo-card:hover .clients-showcase__logo { transform: scale(1.025); }

/* JS enhancement: entrance happens once, then both columns run independently of page scroll. */
.clients-showcase.is-enhanced:not(.is-entered) .clients-showcase__eyebrow-wrap,
.clients-showcase.is-enhanced:not(.is-entered) .clients-showcase__copy,
.clients-showcase.is-enhanced:not(.is-entered) .clients-showcase__cta-wrap {
  opacity: 0;
  transform: translateY(16px);
}
.clients-showcase.is-enhanced:not(.is-entered) .clients-showcase__heading-line > span { transform: translateY(108%); opacity: 0; }
.clients-showcase.is-enhanced:not(.is-entered) .clients-showcase__eyebrow-line { transform: scaleX(0); }
.clients-showcase.is-enhanced:not(.is-entered) .clients-showcase__marquee {
  opacity: 0;
  transform: scale(.985);
  clip-path: inset(0 0 100% 0 round 32px);
}
.clients-showcase.is-enhanced .clients-showcase__eyebrow-wrap,
.clients-showcase.is-enhanced .clients-showcase__copy,
.clients-showcase.is-enhanced .clients-showcase__cta-wrap,
.clients-showcase.is-enhanced .clients-showcase__heading-line > span,
.clients-showcase.is-enhanced .clients-showcase__eyebrow-line,
.clients-showcase.is-enhanced .clients-showcase__marquee {
  transition:
    opacity .76s ease,
    transform .92s cubic-bezier(.16,1,.3,1),
    clip-path 1.2s cubic-bezier(.16,1,.3,1);
}
.clients-showcase.is-entered .clients-showcase__eyebrow-wrap { transition-delay: .05s; }
.clients-showcase.is-entered .clients-showcase__eyebrow-line { transition-delay: .28s; }
.clients-showcase.is-entered .clients-showcase__heading-line:nth-child(1) > span { transition-delay: .22s; }
.clients-showcase.is-entered .clients-showcase__heading-line:nth-child(2) > span { transition-delay: .36s; }
.clients-showcase.is-entered .clients-showcase__heading-line:nth-child(3) > span { transition-delay: .50s; }
.clients-showcase.is-entered .clients-showcase__copy { transition-delay: .62s; }
.clients-showcase.is-entered .clients-showcase__cta-wrap { transition-delay: .78s; }
.clients-showcase.is-entered .clients-showcase__marquee { transition-delay: .18s; }
.clients-showcase.is-entered .clients-showcase__track--up {
  animation: clientMarqueeUp var(--marquee-duration) linear var(--marquee-delay) infinite;
}
.clients-showcase.is-entered .clients-showcase__track--down {
  animation: clientMarqueeDown var(--marquee-duration) linear var(--marquee-delay) infinite;
}
.clients-showcase.is-paused .clients-showcase__track { animation-play-state: paused; }
@keyframes clientMarqueeUp {
  from { transform: translate3d(0,0,0); }
  to { transform: translate3d(0,calc(-1 * var(--loop-distance)),0); }
}
@keyframes clientMarqueeDown {
  from { transform: translate3d(0,calc(-1 * var(--loop-distance)),0); }
  to { transform: translate3d(0,0,0); }
}
.clients-showcase:not(.is-enhanced) .clients-showcase__set[aria-hidden="true"] { display: none; }

@media (max-width: 1180px) {
  .clients-showcase__inner {
    width: min(1000px, calc(100% - 56px));
    grid-template-columns: minmax(300px,.72fr) minmax(520px,1.28fr);
    gap: 42px;
  }
  .clients-showcase__heading { font-size: clamp(2.9rem, 4.4vw, 4rem); }
  .clients-showcase__marquee { gap: 16px; padding: 20px; }
  .clients-showcase__logo-card { padding-inline: 16px; }
}
@media (max-width: 900px) {
  .clients-showcase__inner {
    width: min(720px, calc(100% - 38px));
    min-height: 0;
    grid-template-columns: 1fr;
    gap: 34px;
    padding: 72px 0;
  }
  .clients-showcase__content { max-width: 680px; padding-left: 0; }
  .clients-showcase__heading { font-size: clamp(3rem, 8vw, 4.5rem); }
  .clients-showcase__marquee { height: 620px; }
}
@media (max-width: 560px) {
  .clients-showcase__inner { width: min(100% - 28px, 520px); padding: 58px 0; gap: 28px; }
  .clients-showcase__eyebrow-wrap { margin-bottom: 20px; }
  .clients-showcase__eyebrow { font-size: .76rem; letter-spacing: .18em; }
  .clients-showcase__heading { font-size: clamp(2.45rem, 13vw, 3.5rem); }
  .clients-showcase__copy { margin-top: 22px; gap: 11px; }
  .clients-showcase__copy p { font-size: .94rem; line-height: 1.55; }
  .clients-showcase__cta-wrap { margin-top: 24px; }
  .clients-showcase__cta { min-width: 0; width: 100%; }
  .clients-showcase__marquee { height: 500px; gap: 9px; padding: 12px; border-radius: 22px; }
  .clients-showcase__column--2::before { left: -5px; }
  .clients-showcase__track,
  .clients-showcase__set { gap: 9px; }
  .clients-showcase__logo-card { height: 82px; padding: 11px 10px; border-radius: 11px; }
  .clients-showcase__logo { max-width: 86%; max-height: 52px; }
}
@media (prefers-reduced-motion: reduce) {
  .clients-showcase__inner { min-height: 0; }
  .clients-showcase__marquee { height: auto; min-height: 0; overflow: visible; }
  .clients-showcase__column { overflow: visible; }
  .clients-showcase__track { animation: none !important; transform: none !important; }
  .clients-showcase__set[aria-hidden="true"] { display: none !important; }
  .clients-showcase__set { grid-template-columns: 1fr; }
  .clients-showcase.is-enhanced:not(.is-entered) .clients-showcase__eyebrow-wrap,
  .clients-showcase.is-enhanced:not(.is-entered) .clients-showcase__copy,
  .clients-showcase.is-enhanced:not(.is-entered) .clients-showcase__cta-wrap,
  .clients-showcase.is-enhanced:not(.is-entered) .clients-showcase__heading-line > span,
  .clients-showcase.is-enhanced:not(.is-entered) .clients-showcase__marquee {
    opacity: 1;
    transform: none;
    clip-path: none;
  }
  .clients-showcase.is-enhanced:not(.is-entered) .clients-showcase__eyebrow-line { transform: scaleX(1); }
}


/* ==========================================================================
   PINNED FOX + STACKING CUSTOMER TESTIMONIALS
   DB/content_json-driven; SSR content, JS only controls motion.
   ========================================================================== */
.testimonials-story {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  overflow: clip;
  background: #f7f4ef;
  color: #192526;
}
.testimonials-story::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 75% 22%, rgba(255,255,255,.86), transparent 36%),
    linear-gradient(113deg, transparent 0 70%, rgba(7,88,91,.018) 70% 71%, transparent 71% 100%);
}
.testimonials-story__stage {
  position: relative;
  min-height: 100svh;
}
.testimonials-story__inner {
  width: min(1500px, calc(100% - 72px));
  min-height: 100svh;
  margin-inline: auto;
  padding: clamp(34px, 4.3vh, 54px) 0;
  display: grid;
  grid-template-columns: minmax(440px, .96fr) minmax(560px, 1.04fr);
  gap: clamp(50px, 5vw, 86px);
  align-items: stretch;
}
.testimonials-story__visual {
  position: relative;
  min-width: 0;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(40,64,61,.09);
  border-radius: 28px;
  background: #d8c8b3;
  box-shadow: 0 20px 54px rgba(52,46,39,.10);
}
.testimonials-story__visual picture { position: absolute; inset: 0; }
.testimonials-story__fox {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 46% 50%;
  transform-origin: 46% 62%;
}
.testimonials-story__visual::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(6,21,22,.08), transparent 45%, rgba(247,244,239,.08));
}
.testimonials-story__visual-glow {
  position: absolute;
  z-index: 2;
  right: -10%;
  top: 17%;
  width: 46%;
  height: 58%;
  border-radius: 50%;
  background: rgba(255,232,193,.16);
  filter: blur(38px);
  pointer-events: none;
}
.testimonials-story__content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(8px, 2.2vh, 26px);
}
.testimonials-story__intro { max-width: 700px; }
.testimonials-story__eyebrow {
  margin: 0;
  color: #4e5757;
  font-size: .88rem;
  font-weight: 520;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.testimonials-story__eyebrow-line {
  display: block;
  width: 38px;
  height: 2px;
  margin-top: 12px;
  background: var(--teal);
  transform-origin: left center;
}
.testimonials-story__heading {
  margin: 19px 0 0;
  color: #151e1f;
  font-size: clamp(3.15rem, 4.55vw, 4.9rem);
  font-weight: 560;
  line-height: .94;
  letter-spacing: -.052em;
}
.testimonials-story__heading-line { display: block; overflow: hidden; }
.testimonials-story__heading-line > span { display: block; }
.testimonials-story__heading-line--mixed {
  display: flex;
  align-items: baseline;
  gap: .16em;
  overflow: visible;
  flex-wrap: wrap;
}
.testimonials-story__heading-line--mixed > span { display: inline-block; }
.testimonials-story__heading em {
  color: var(--teal);
  font-family: "Lobster", cursive;
  font-size: 1.08em;
  font-weight: 400;
  line-height: .8;
  letter-spacing: -.02em;
}
.testimonials-story__supporting-copy {
  max-width: 640px;
  margin: 20px 0 0;
  color: #596565;
  font-size: 1rem;
  line-height: 1.55;
}
.testimonials-stack {
  position: relative;
  height: clamp(320px, 37vh, 390px);
  margin-top: clamp(28px, 3.5vh, 38px);
  perspective: 1200px;
}
.testimonial-card {
  position: relative;
  margin: 0;
  padding: clamp(28px, 2.25vw, 36px);
  border: 1px solid rgba(36,65,63,.105);
  border-radius: 20px;
  background: rgba(255,255,255,.96);
  color: #1c2829;
  box-shadow: 0 24px 54px rgba(47,53,49,.12);
}
.testimonial-card__topline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}
.testimonial-card__quote {
  color: var(--teal);
  font-family: Georgia, serif;
  font-size: 4.3rem;
  font-weight: 700;
  line-height: .6;
}
.testimonial-card__rating {
  color: #b9891e;
  font-size: 1.05rem;
  letter-spacing: .12em;
}
.testimonial-card__body {
  max-width: 660px;
  margin: 24px 0 0;
  color: #273435;
  font-size: clamp(1rem, 1.18vw, 1.16rem);
  line-height: 1.62;
}
.testimonial-card__reviewer {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid rgba(36,65,63,.10);
}
.testimonial-card__avatar {
  flex: 0 0 54px;
  width: 54px;
  height: 54px;
  border: 2px solid rgba(7,88,91,.10);
  border-radius: 50%;
  object-fit: cover;
}
.testimonial-card__avatar--initials {
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #0b6669, #074c4f);
  color: #fff;
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .06em;
}
.testimonial-card__identity { display: grid; gap: 2px; min-width: 0; font-style: normal; }
.testimonial-card__identity strong { color: #192526; font-size: .96rem; font-weight: 690; }
.testimonial-card__identity span { color: #6c7676; font-size: .82rem; line-height: 1.35; }
.testimonial-card__identity small,
.testimonial-card__identity a { color: var(--teal); font-size: .69rem; font-style: normal; }
.testimonials-progress {
  display: grid;
  grid-template-columns: auto minmax(120px, 1fr);
  align-items: center;
  gap: 18px;
  width: min(100%, 670px);
  margin-top: 22px;
}
.testimonials-progress__numbers {
  display: flex;
  align-items: baseline;
  gap: 5px;
  color: #8b9292;
  font-size: .9rem;
}
.testimonials-progress__numbers [data-testimonials-current] {
  min-width: 1.7em;
  color: var(--teal);
  font-size: 1.14rem;
  font-weight: 700;
}
.testimonials-progress__separator { color: rgba(80,92,92,.4); }
.testimonials-progress__track {
  height: 2px;
  overflow: hidden;
  border-radius: 10px;
  background: rgba(7,88,91,.12);
}
.testimonials-progress__track span {
  display: block;
  width: 20%;
  height: 100%;
  border-radius: inherit;
  background: var(--teal);
  transform-origin: left center;
}

/* No-JS: every review stays readable in normal document flow. */
.testimonials-story:not(.is-enhanced) .testimonials-stack {
  height: auto;
  display: grid;
  gap: 18px;
}
.testimonials-story:not(.is-enhanced) .testimonial-card { position: relative; }

/* Enhanced pinned story. */
.testimonials-story.is-enhanced.is-pinned { min-height: var(--testimonials-story-vh, 540vh); }
.testimonials-story.is-enhanced.is-pinned .testimonials-story__stage {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 680px;
  overflow: hidden;
}
.testimonials-story.is-enhanced.is-pinned .testimonial-card {
  position: absolute;
  inset: 0;
  margin: auto 0 0;
  height: fit-content;
  min-height: min(100%, 305px);
  transform-origin: 50% 100%;
  will-change: transform, opacity;
  backface-visibility: hidden;
}
.testimonials-story.is-enhanced .testimonials-story__eyebrow,
.testimonials-story.is-enhanced .testimonials-story__eyebrow-line,
.testimonials-story.is-enhanced .testimonials-story__heading-line > span,
.testimonials-story.is-enhanced .testimonials-story__heading em,
.testimonials-story.is-enhanced .testimonials-story__supporting-copy,
.testimonials-story.is-enhanced .testimonials-story__visual {
  transition: opacity .8s ease, transform .9s cubic-bezier(.16,1,.3,1), clip-path 1.1s cubic-bezier(.16,1,.3,1);
}
.testimonials-story.is-enhanced:not(.is-entered) .testimonials-story__visual {
  opacity: 0;
  transform: scale(1.022);
  clip-path: inset(0 100% 0 0 round 28px);
}
.testimonials-story.is-enhanced:not(.is-entered) .testimonials-story__eyebrow,
.testimonials-story.is-enhanced:not(.is-entered) .testimonials-story__supporting-copy { opacity: 0; transform: translateY(15px); }
.testimonials-story.is-enhanced:not(.is-entered) .testimonials-story__eyebrow-line { transform: scaleX(0); }
.testimonials-story.is-enhanced:not(.is-entered) .testimonials-story__heading-line > span { opacity: 0; transform: translateY(105%); }
.testimonials-story.is-enhanced:not(.is-entered) .testimonials-story__heading em { opacity: 0; transform: translateY(14px) scale(.95); }
.testimonials-story.is-entered .testimonials-story__visual { transition-delay: .02s; }
.testimonials-story.is-entered .testimonials-story__eyebrow { transition-delay: .16s; }
.testimonials-story.is-entered .testimonials-story__eyebrow-line { transition-delay: .30s; }
.testimonials-story.is-entered .testimonials-story__heading-line:nth-child(1) > span { transition-delay: .26s; }
.testimonials-story.is-entered .testimonials-story__heading-line--mixed em { transition-delay: .40s; }
.testimonials-story.is-entered .testimonials-story__heading-line--mixed > span { transition-delay: .48s; }
.testimonials-story.is-entered .testimonials-story__supporting-copy { transition-delay: .60s; }
.testimonials-story.is-enhanced.is-pinned .testimonial-card__quote,
.testimonials-story.is-enhanced.is-pinned .testimonial-card__body,
.testimonials-story.is-enhanced.is-pinned .testimonial-card__reviewer,
.testimonials-story.is-enhanced.is-pinned .testimonial-card__rating {
  transition: opacity .45s ease, transform .55s cubic-bezier(.16,1,.3,1);
}
.testimonials-story.is-enhanced.is-pinned .testimonial-card:not(.is-front) .testimonial-card__quote,
.testimonials-story.is-enhanced.is-pinned .testimonial-card:not(.is-front) .testimonial-card__body,
.testimonials-story.is-enhanced.is-pinned .testimonial-card:not(.is-front) .testimonial-card__reviewer,
.testimonials-story.is-enhanced.is-pinned .testimonial-card:not(.is-front) .testimonial-card__rating {
  opacity: .08;
  transform: translateY(8px);
}
.testimonials-story.is-enhanced.is-pinned .testimonial-card.is-front .testimonial-card__quote { transition-delay: .07s; }
.testimonials-story.is-enhanced.is-pinned .testimonial-card.is-front .testimonial-card__body { transition-delay: .14s; }
.testimonials-story.is-enhanced.is-pinned .testimonial-card.is-front .testimonial-card__reviewer { transition-delay: .22s; }
.testimonials-story.is-enhanced.is-pinned .testimonial-card.is-front .testimonial-card__demo-badge,
.testimonials-story.is-enhanced.is-pinned .testimonial-card.is-front .testimonial-card__rating { transition-delay: .1s; }
.testimonials-story.is-enhanced.is-pinned .testimonial-card.is-front:hover { box-shadow: 0 28px 60px rgba(47,53,49,.15); }
.testimonials-story.is-enhanced.is-pinned .testimonial-card.is-front:hover .testimonial-card__avatar { transform: scale(1.025); }
.testimonials-story.is-enhanced.is-pinned .testimonial-card__avatar { transition: transform .35s ease; }
.testimonials-story.is-enhanced.is-pinned .testimonials-story__fox { animation: testimonialsFoxIdle 7.4s ease-in-out infinite; }
.testimonials-story.is-enhanced.is-pinned .testimonials-story__visual-glow { animation: testimonialsGlow 6.5s ease-in-out infinite; }

@keyframes testimonialsFoxIdle {
  0%,100% { transform: scale(1) translate3d(0,0,0); }
  50% { transform: scale(1.006) translate3d(0,-1px,0); }
}
@keyframes testimonialsGlow {
  0%,100% { opacity: .38; transform: translate3d(0,0,0) scale(1); }
  50% { opacity: .55; transform: translate3d(-6px,3px,0) scale(1.04); }
}

@media (max-width: 1180px) {
  .testimonials-story__inner {
    width: min(1000px, calc(100% - 48px));
    grid-template-columns: minmax(360px, .86fr) minmax(500px, 1.14fr);
    gap: 38px;
  }
  .testimonials-story__heading { font-size: clamp(2.8rem, 4.9vw, 4rem); }
  .testimonial-card { padding: 28px; }
}

@media (min-width: 901px) and (max-height: 830px) {
  .testimonials-story__inner { padding-block: 22px; }
  .testimonials-story__heading { margin-top: 12px; font-size: clamp(2.55rem, 4.1vw, 3.65rem); }
  .testimonials-story__supporting-copy { margin-top: 12px; font-size: .9rem; line-height: 1.43; }
  .testimonials-stack { height: 300px; margin-top: 20px; }
  .testimonial-card { padding: 23px 26px; min-height: 274px !important; }
  .testimonial-card__quote { font-size: 3.6rem; }
  .testimonial-card__body { margin-top: 16px; font-size: .96rem; line-height: 1.48; }
  .testimonial-card__reviewer { margin-top: 18px; padding-top: 14px; }
  .testimonials-progress { margin-top: 14px; }
}

@media (max-width: 900px) {
  .testimonials-story,
  .testimonials-story.is-enhanced.is-pinned { min-height: 0 !important; }
  .testimonials-story__stage,
  .testimonials-story.is-enhanced.is-pinned .testimonials-story__stage {
    position: relative;
    top: auto;
    height: auto;
    min-height: 0;
    overflow: visible;
  }
  .testimonials-story__inner {
    width: min(720px, calc(100% - 38px));
    min-height: 0;
    padding: 68px 0;
    grid-template-columns: 1fr;
    gap: 34px;
  }
  .testimonials-story__visual { min-height: 520px; order: 0; }
  .testimonials-story__content { order: 1; padding: 0; }
  .testimonials-story__heading { font-size: clamp(3rem, 8.5vw, 4.6rem); }
  .testimonials-stack,
  .testimonials-story.is-enhanced .testimonials-stack,
  .testimonials-story.is-enhanced.is-pinned .testimonials-stack {
    height: auto;
    display: grid;
    gap: 18px;
  }
  .testimonial-card,
  .testimonials-story.is-enhanced.is-pinned .testimonial-card {
    position: relative;
    inset: auto;
    min-height: 0 !important;
    opacity: 1 !important;
    transform: none !important;
    z-index: auto !important;
    will-change: auto;
  }
  .testimonials-story.is-enhanced .testimonial-card .testimonial-card__quote,
  .testimonials-story.is-enhanced .testimonial-card .testimonial-card__body,
  .testimonials-story.is-enhanced .testimonial-card .testimonial-card__reviewer,
  .testimonials-story.is-enhanced .testimonial-card .testimonial-card__rating { opacity: 1 !important; transform: none !important; }
  .testimonials-progress { display: none; }
}

@media (max-width: 560px) {
  .testimonials-story__inner { width: min(100% - 28px, 520px); padding: 58px 0; gap: 26px; }
  .testimonials-story__visual { min-height: 410px; border-radius: 20px; }
  .testimonials-story__fox { object-position: 43% 50%; }
  .testimonials-story__eyebrow { font-size: .74rem; }
  .testimonials-story__heading { margin-top: 15px; font-size: clamp(2.45rem, 13vw, 3.5rem); }
  .testimonials-story__heading-line--mixed { gap: .12em; }
  .testimonials-story__supporting-copy { margin-top: 16px; font-size: .94rem; line-height: 1.5; }
  .testimonials-stack { margin-top: 24px; }
  .testimonial-card { padding: 24px 20px; border-radius: 16px; }
  .testimonial-card__quote { font-size: 3.7rem; }
  .testimonial-card__body { margin-top: 18px; font-size: .97rem; line-height: 1.53; }
  .testimonial-card__reviewer { margin-top: 20px; padding-top: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .testimonials-story,
  .testimonials-story.is-enhanced.is-pinned { min-height: 0 !important; }
  .testimonials-story__stage,
  .testimonials-story.is-enhanced.is-pinned .testimonials-story__stage { position: relative; height: auto; min-height: 0; overflow: visible; }
  .testimonials-story__inner { min-height: 0; }
  .testimonials-stack { height: auto !important; display: grid; gap: 18px; }
  .testimonial-card,
  .testimonials-story.is-enhanced.is-pinned .testimonial-card { position: relative; inset: auto; opacity: 1 !important; transform: none !important; z-index: auto !important; }
  .testimonials-story * { animation: none !important; transition: none !important; }
  .testimonials-progress { display: none; }
}


/* ==========================================================================\n   FAQ DRAWER V13 — luxury marble drawer FAQ\n   ========================================================================== */
.faq-drawer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #f5f2ec;
  color: #182425;
}
.faq-drawer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(circle at 78% 12%, rgba(255,255,255,.82), transparent 32%),
    linear-gradient(112deg, transparent 0 58%, rgba(7,88,91,.018) 58% 58.5%, transparent 58.5% 100%),
    #f5f2ec;
}
.faq-drawer::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .32;
  background:
    radial-gradient(ellipse at 15% 30%, transparent 0 46%, rgba(113,105,95,.045) 47% 47.4%, transparent 48%),
    radial-gradient(ellipse at 84% 72%, transparent 0 53%, rgba(113,105,95,.035) 54% 54.3%, transparent 55%);
}
.faq-drawer__inner {
  width: min(1500px, calc(100% - 72px));
  min-height: min(900px, 100svh);
  margin-inline: auto;
  padding: clamp(48px, 5.2vh, 68px) 0;
  display: grid;
  grid-template-columns: minmax(330px, .72fr) minmax(650px, 1.28fr);
  gap: clamp(48px, 5vw, 86px);
  align-items: center;
}
.faq-drawer__intro { min-width: 0; max-width: 560px; }
.faq-drawer__eyebrow-wrap { display: inline-grid; gap: 10px; }
.faq-drawer__eyebrow {
  margin: 0;
  color: var(--teal);
  font: 600 clamp(.72rem, .82vw, .9rem)/1.2 "Jost",sans-serif;
  letter-spacing: .25em;
  text-transform: uppercase;
}
.faq-drawer__eyebrow-line {
  width: 34px;
  height: 1.5px;
  border-radius: 99px;
  background: var(--teal);
  transform-origin: left center;
}
.faq-drawer__heading {
  margin: 26px 0 0;
  color: #172324;
  font: 430 clamp(3.3rem, 5.3vw, 5.6rem)/.94 "Jost",sans-serif;
  letter-spacing: -.052em;
}
.faq-drawer__heading-line { display: block; overflow: hidden; }
.faq-drawer__heading-line > span { display: block; }
.faq-drawer__heading-line--accent { overflow: visible; margin-top: 4px; }
.faq-drawer__heading em {
  display: inline-block;
  color: var(--teal);
  font: 400 1.06em/.96 "Lobster",cursive;
  letter-spacing: -.015em;
}
.faq-drawer__copy {
  max-width: 500px;
  margin: 24px 0 0;
  color: #586566;
  font-size: clamp(.96rem, 1.05vw, 1.08rem);
  line-height: 1.55;
}
.faq-drawer__visual {
  position: relative;
  width: min(100%, 455px);
  margin: 26px 0 0;
  border-radius: 17px;
  overflow: hidden;
  background: #eeeae3;
  box-shadow: 0 20px 45px rgba(47,53,49,.08), 0 0 0 1px rgba(52,72,69,.08);
}
.faq-drawer__visual picture,
.faq-drawer__visual img { width: 100%; height: auto; }
.faq-drawer__visual img { aspect-ratio: 520/528; object-fit: cover; }
.faq-drawer__visual-edge {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: inherit;
  box-shadow: inset 0 0 0 5px rgba(255,255,255,.08);
}
.faq-drawer__module { min-width: 0; }
.faq-drawer__rack {
  position: relative;
  padding: 30px 22px 24px;
  border: 1px solid rgba(79,75,69,.16);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(234,229,220,.72), rgba(248,246,241,.74));
  box-shadow:
    inset 0 12px 22px rgba(62,55,49,.12),
    inset 0 -5px 15px rgba(255,255,255,.72),
    0 18px 50px rgba(48,53,49,.055);
  perspective: 1100px;
}
.faq-drawer__rack::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(89,84,77,.12);
  border-radius: 4px;
  pointer-events: none;
}
.faq-drawer__rack-top {
  position: absolute;
  top: 10px;
  left: 22px;
  right: 22px;
  height: 12px;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, rgba(70,64,58,.20), rgba(70,64,58,0));
  filter: blur(.1px);
}
.faq-drawer__rack-left,
.faq-drawer__rack-right {
  position: absolute;
  z-index: 4;
  top: 110px;
  width: 18px;
  height: 116px;
  border-radius: 4px;
  background: linear-gradient(180deg, #0b6668, #07585b);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16), 0 8px 18px rgba(7,88,91,.16);
  pointer-events: none;
}
.faq-drawer__rack-left { left: 9px; }
.faq-drawer__rack-right { right: 9px; }
.faq-drawer__items { position: relative; display: grid; gap: 9px; }
.faq-drawer__item {
  position: relative;
  z-index: 1;
  border-radius: 14px;
  transform-style: preserve-3d;
}
.faq-drawer__trigger {
  position: relative;
  z-index: 3;
  width: 100%;
  min-height: 78px;
  display: grid;
  grid-template-columns: 62px 1px minmax(0,1fr) 34px;
  gap: 18px;
  align-items: center;
  padding: 13px 24px;
  border: 1px solid rgba(59,68,65,.10);
  border-radius: 13px;
  background:
    linear-gradient(103deg, rgba(255,255,255,.96), rgba(246,243,237,.97)),
    #fff;
  color: #20292a;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 7px 13px rgba(53,55,50,.13), inset 0 1px 0 rgba(255,255,255,.9);
  transition:
    transform .42s cubic-bezier(.16,1,.3,1),
    box-shadow .42s cubic-bezier(.16,1,.3,1),
    border-color .35s ease,
    background .35s ease;
}
.faq-drawer__trigger::before {
  content: "";
  position: absolute;
  left: 7%; right: 7%; bottom: -5px;
  height: 8px;
  z-index: -1;
  border-radius: 50%;
  background: rgba(39,37,34,.11);
  filter: blur(5px);
  opacity: .65;
  transition: opacity .35s ease, transform .42s cubic-bezier(.16,1,.3,1);
}
.faq-drawer__number {
  color: #8a8c89;
  font-size: clamp(1.25rem, 1.8vw, 1.7rem);
  font-weight: 470;
  letter-spacing: -.035em;
  transition: color .32s ease, transform .42s cubic-bezier(.16,1,.3,1);
}
.faq-drawer__divider { align-self: stretch; width: 1px; background: rgba(38,58,57,.15); }
.faq-drawer__question {
  min-width: 0;
  font-size: clamp(.98rem, 1.26vw, 1.28rem);
  font-weight: 510;
  line-height: 1.28;
  letter-spacing: -.014em;
  transition: transform .35s cubic-bezier(.16,1,.3,1), color .3s ease;
}
.faq-drawer__icon {
  position: relative;
  width: 26px;
  height: 26px;
  justify-self: end;
  color: #65706f;
}
.faq-drawer__icon i,
.faq-drawer__icon b {
  position: absolute;
  left: 50%; top: 50%;
  width: 20px; height: 1.5px;
  margin: 0;
  border-radius: 99px;
  background: currentColor;
  transform: translate(-50%,-50%);
  transition: transform .38s cubic-bezier(.16,1,.3,1), opacity .3s ease, background .3s ease;
}
.faq-drawer__icon b { transform: translate(-50%,-50%) rotate(90deg); }
.faq-drawer__panel { display: grid; grid-template-rows: 1fr; }
.faq-drawer__panel-clip { min-height: 0; }
.faq-drawer__tray {
  position: relative;
  margin: -2px 14px 0;
  padding: 24px clamp(34px, 5vw, 74px) 26px;
  border: 1px solid rgba(69,73,68,.12);
  border-top: 0;
  border-radius: 0 0 13px 13px;
  background:
    linear-gradient(110deg, rgba(255,255,255,.98), rgba(247,244,238,.98));
  color: #424d4d;
  box-shadow: inset 0 8px 14px rgba(55,51,46,.055), 0 15px 22px rgba(50,53,49,.07);
}
.faq-drawer__answer { margin: 0; font-size: clamp(.91rem, 1vw, 1.02rem); line-height: 1.58; }
.faq-drawer__tray-rail {
  position: absolute;
  top: 0;
  width: 8px;
  height: 100%;
  background: linear-gradient(180deg, rgba(7,88,91,.92), rgba(7,88,91,.63));
  opacity: .9;
}
.faq-drawer__tray-rail--left { left: -8px; border-radius: 3px 0 0 3px; }
.faq-drawer__tray-rail--right { right: -8px; border-radius: 0 3px 3px 0; }

/* Enhanced interaction: collapsed panels become drawer trays rather than a normal accordion. */
.faq-drawer.is-enhanced .faq-drawer__panel {
  grid-template-rows: 0fr;
  opacity: 0;
  transform: translate3d(0,-18px,-20px) scale(.985);
  clip-path: inset(0 4% 100% 4% round 0 0 12px 12px);
  transition:
    grid-template-rows .48s cubic-bezier(.16,1,.3,1),
    opacity .28s ease,
    transform .48s cubic-bezier(.16,1,.3,1),
    clip-path .50s cubic-bezier(.16,1,.3,1);
}
.faq-drawer.is-enhanced .faq-drawer__panel-clip { overflow: hidden; }
.faq-drawer.is-enhanced .faq-drawer__answer {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .34s ease, transform .44s cubic-bezier(.16,1,.3,1);
}
.faq-drawer.is-enhanced .faq-drawer__tray-rail {
  transform: scaleY(.25);
  transform-origin: top center;
  transition: transform .48s cubic-bezier(.16,1,.3,1);
}
.faq-drawer.is-enhanced .faq-drawer__item.is-open { z-index: 6; }
.faq-drawer.is-enhanced .faq-drawer__item.is-open .faq-drawer__trigger {
  transform: translate3d(14px,-2px,26px) scale(1.004);
  border-color: rgba(7,88,91,.19);
  box-shadow: 0 14px 22px rgba(48,51,47,.18), inset 0 1px 0 rgba(255,255,255,.96);
}
.faq-drawer.is-enhanced .faq-drawer__item.is-open .faq-drawer__trigger::before { opacity: .9; transform: translateY(5px) scaleX(1.03); }
.faq-drawer.is-enhanced .faq-drawer__item.is-open .faq-drawer__number,
.faq-drawer.is-enhanced .faq-drawer__item.is-open .faq-drawer__icon { color: var(--teal); }
.faq-drawer.is-enhanced .faq-drawer__item.is-open .faq-drawer__number { transform: translateX(2px); }
.faq-drawer.is-enhanced .faq-drawer__item.is-open .faq-drawer__icon b { opacity: 0; transform: translate(-50%,-50%) rotate(90deg) scaleY(0); }
.faq-drawer.is-enhanced .faq-drawer__item.is-open .faq-drawer__panel {
  grid-template-rows: 1fr;
  opacity: 1;
  transform: translate3d(0,0,0) scale(1);
  clip-path: inset(0 0 0 0 round 0 0 13px 13px);
  transition-delay: .08s, .08s, .08s, .08s;
}
.faq-drawer.is-enhanced .faq-drawer__item.is-open .faq-drawer__answer {
  opacity: 1;
  transform: translateY(0);
  transition-delay: .26s;
}
.faq-drawer.is-enhanced .faq-drawer__item.is-open .faq-drawer__tray-rail { transform: scaleY(1); transition-delay: .08s; }
.faq-drawer.is-enhanced .faq-drawer__trigger:hover:not([aria-expanded="true"]) {
  transform: translate3d(3px,-1px,0);
  border-color: rgba(7,88,91,.14);
  box-shadow: 0 10px 18px rgba(53,55,50,.15), inset 0 1px 0 rgba(255,255,255,.94);
}
.faq-drawer.is-enhanced .faq-drawer__trigger:hover:not([aria-expanded="true"]) .faq-drawer__question { transform: translateX(2px); }
.faq-drawer__trigger:focus-visible { outline: 2px solid var(--teal); outline-offset: 4px; }
.faq-drawer__support {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-top: 25px;
  color: #364243;
  font-size: .94rem;
}
.faq-drawer__support-line { width: min(130px, 12vw); height: 1px; background: rgba(7,88,91,.50); }
.faq-drawer__support a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--teal);
  font-weight: 600;
}
.faq-drawer__support a svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; transition: transform .3s ease; }
.faq-drawer__support a:hover svg { transform: translateX(6px); }

/* Entrance choreography */
.faq-drawer.is-enhanced .faq-drawer__eyebrow-wrap,
.faq-drawer.is-enhanced .faq-drawer__copy,
.faq-drawer.is-enhanced .faq-drawer__support,
.faq-drawer.is-enhanced .faq-drawer__visual,
.faq-drawer.is-enhanced .faq-drawer__rack,
.faq-drawer.is-enhanced .faq-drawer__item {
  transition: opacity .72s ease, transform .86s cubic-bezier(.16,1,.3,1), clip-path 1s cubic-bezier(.16,1,.3,1);
}
.faq-drawer.is-enhanced:not(.is-entered) .faq-drawer__eyebrow-wrap,
.faq-drawer.is-enhanced:not(.is-entered) .faq-drawer__copy,
.faq-drawer.is-enhanced:not(.is-entered) .faq-drawer__support { opacity: 0; transform: translateY(16px); }
.faq-drawer.is-enhanced:not(.is-entered) .faq-drawer__heading-line > span,
.faq-drawer.is-enhanced:not(.is-entered) .faq-drawer__heading em { opacity: 0; transform: translateY(105%); }
.faq-drawer.is-enhanced .faq-drawer__heading-line > span,
.faq-drawer.is-enhanced .faq-drawer__heading em { transition: opacity .78s ease, transform .9s cubic-bezier(.16,1,.3,1); }
.faq-drawer.is-enhanced:not(.is-entered) .faq-drawer__visual { opacity: 0; transform: translateY(18px) scale(.985); clip-path: inset(8% 0 8% 0 round 17px); }
.faq-drawer.is-enhanced:not(.is-entered) .faq-drawer__rack { opacity: 0; transform: translateY(16px) scale(.985); clip-path: inset(0 0 100% 0 round 8px); }
.faq-drawer.is-enhanced:not(.is-entered) .faq-drawer__item { opacity: 0; transform: translateY(18px); }
.faq-drawer.is-entered .faq-drawer__heading-line:first-child > span { transition-delay: .12s; }
.faq-drawer.is-entered .faq-drawer__heading em { transition-delay: .24s; }
.faq-drawer.is-entered .faq-drawer__copy { transition-delay: .36s; }
.faq-drawer.is-entered .faq-drawer__visual { transition-delay: .42s; }
.faq-drawer.is-entered .faq-drawer__rack { transition-delay: .30s; }
.faq-drawer.is-entered .faq-drawer__item:nth-child(1) { transition-delay: .48s; }
.faq-drawer.is-entered .faq-drawer__item:nth-child(2) { transition-delay: .55s; }
.faq-drawer.is-entered .faq-drawer__item:nth-child(3) { transition-delay: .62s; }
.faq-drawer.is-entered .faq-drawer__item:nth-child(4) { transition-delay: .69s; }
.faq-drawer.is-entered .faq-drawer__item:nth-child(5) { transition-delay: .76s; }
.faq-drawer.is-entered .faq-drawer__item:nth-child(6) { transition-delay: .83s; }
.faq-drawer.is-entered .faq-drawer__support { transition-delay: .88s; }

@media (min-width: 901px) and (max-height: 850px) {
  .faq-drawer__inner { min-height: 0; padding-block: 34px; }
  .faq-drawer__heading { margin-top: 18px; font-size: clamp(2.8rem, 4.4vw, 4.5rem); }
  .faq-drawer__copy { margin-top: 16px; font-size: .92rem; line-height: 1.45; }
  .faq-drawer__visual { width: min(100%, 390px); margin-top: 18px; }
  .faq-drawer__rack { padding: 22px 18px 18px; }
  .faq-drawer__items { gap: 7px; }
  .faq-drawer__trigger { min-height: 62px; padding: 10px 20px; grid-template-columns: 52px 1px minmax(0,1fr) 30px; gap: 14px; }
  .faq-drawer__tray { padding-top: 17px; padding-bottom: 18px; }
  .faq-drawer__answer { font-size: .88rem; line-height: 1.45; }
  .faq-drawer__support { margin-top: 18px; }
}
@media (max-width: 1180px) {
  .faq-drawer__inner { width: min(1000px, calc(100% - 56px)); grid-template-columns: minmax(300px,.68fr) minmax(560px,1.32fr); gap: 42px; }
  .faq-drawer__heading { font-size: clamp(3rem, 5vw, 4.5rem); }
  .faq-drawer__trigger { grid-template-columns: 52px 1px minmax(0,1fr) 30px; gap: 14px; padding-inline: 18px; }
}
@media (max-width: 900px) {
  .faq-drawer__inner { width: min(720px, calc(100% - 38px)); min-height: 0; padding: 72px 0; grid-template-columns: 1fr; gap: 42px; }
  .faq-drawer__intro { max-width: none; }
  .faq-drawer__heading { font-size: clamp(3.3rem, 8.4vw, 4.9rem); }
  .faq-drawer__visual { width: min(100%, 500px); }
  .faq-drawer__rack { padding-inline: 18px; }
  .faq-drawer.is-enhanced .faq-drawer__item.is-open .faq-drawer__trigger { transform: translate3d(9px,-1px,10px) scale(1.002); }
}
@media (max-width: 560px) {
  .faq-drawer__inner { width: min(100% - 28px, 520px); padding: 58px 0; gap: 30px; }
  .faq-drawer__eyebrow { font-size: .7rem; letter-spacing: .20em; }
  .faq-drawer__heading { margin-top: 18px; font-size: clamp(2.75rem, 13vw, 3.8rem); }
  .faq-drawer__copy { margin-top: 18px; font-size: .94rem; }
  .faq-drawer__visual { margin-top: 20px; }
  .faq-drawer__rack { padding: 20px 10px 13px; border-radius: 7px; }
  .faq-drawer__rack-left, .faq-drawer__rack-right { display: none; }
  .faq-drawer__trigger { min-height: 68px; grid-template-columns: 38px 1px minmax(0,1fr) 24px; gap: 10px; padding: 10px 12px; border-radius: 11px; }
  .faq-drawer__number { font-size: 1.05rem; }
  .faq-drawer__question { font-size: .91rem; line-height: 1.3; }
  .faq-drawer__icon { width: 22px; height: 22px; }
  .faq-drawer__icon i, .faq-drawer__icon b { width: 16px; }
  .faq-drawer__tray { margin-inline: 7px; padding: 18px 19px 20px; }
  .faq-drawer__answer { font-size: .88rem; line-height: 1.5; }
  .faq-drawer.is-enhanced .faq-drawer__item.is-open .faq-drawer__trigger { transform: translate3d(6px,-1px,0); }
  .faq-drawer__support { gap: 12px; font-size: .82rem; flex-wrap: wrap; }
  .faq-drawer__support-line { width: 42px; }
}
@media (prefers-reduced-motion: reduce) {
  .faq-drawer *, .faq-drawer *::before, .faq-drawer *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .faq-drawer.is-enhanced:not(.is-entered) .faq-drawer__eyebrow-wrap,
  .faq-drawer.is-enhanced:not(.is-entered) .faq-drawer__copy,
  .faq-drawer.is-enhanced:not(.is-entered) .faq-drawer__support,
  .faq-drawer.is-enhanced:not(.is-entered) .faq-drawer__visual,
  .faq-drawer.is-enhanced:not(.is-entered) .faq-drawer__rack,
  .faq-drawer.is-enhanced:not(.is-entered) .faq-drawer__item,
  .faq-drawer.is-enhanced:not(.is-entered) .faq-drawer__heading-line > span,
  .faq-drawer.is-enhanced:not(.is-entered) .faq-drawer__heading em { opacity: 1; transform: none; clip-path: none; }
}


/* ==========================================================================\n   STICKY HEADER V14\n   Header is outside the hero and fixed to the viewport, so pinned/sticky\n   homepage sections cannot scroll over it or clip it.\n   ========================================================================== */
.site-header {
  isolation: isolate;
  will-change: background-color, border-color, box-shadow, transform;
  transition:
    background-color .34s ease,
    border-color .34s ease,
    box-shadow .34s ease,
    min-height .34s cubic-bezier(.16,1,.3,1),
    padding .34s cubic-bezier(.16,1,.3,1);
}

.site-header.is-scrolled {
  background: rgba(28, 35, 34, .88);
  border-color: rgba(255,255,255,.20);
  box-shadow: 0 12px 32px rgba(5, 18, 18, .20);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  backdrop-filter: blur(18px) saturate(120%);
}

.site-header.is-scrolled .desktop-nav {
  color: rgba(255,255,255,.90);
}

.site-header.is-scrolled .brand-mark svg {
  stroke: #2d9496;
}

@media (min-width: 961px) {
  .site-header.is-scrolled {
    min-height: 66px;
    padding-top: 7px;
    padding-bottom: 7px;
  }
}

@media (max-width: 960px) {
  .site-header {
    z-index: 1200;
  }

  .mobile-menu[open] > nav {
    max-height: min(70vh, 520px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header {
    transition: none;
  }
}

/* ==========================================================================\n   FINAL HOMEPAGE QUOTE FORM V15\n   ========================================================================== */
.quote-form-section {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color-scheme: light;
  color: #182324;
  background:
    radial-gradient(circle at 50% 12%, rgba(255,255,255,.96), rgba(250,247,241,.88) 54%, rgba(246,242,235,.92) 100%),
    #f8f5ef;
}
.quote-form-section::before,
.quote-form-section::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: -1;
  opacity: .42;
}
.quote-form-section::before {
  inset: 0;
  background:
    linear-gradient(114deg, transparent 0 16%, rgba(107,95,84,.08) 16.15%, transparent 16.35% 51%, rgba(107,95,84,.07) 51.12%, transparent 51.34%),
    linear-gradient(23deg, transparent 0 68%, rgba(107,95,84,.055) 68.15%, transparent 68.34%);
  mask-image: linear-gradient(to bottom, transparent, #000 9%, #000 90%, transparent);
}
.quote-form-section::after {
  width: 760px;
  height: 760px;
  top: -380px;
  right: -250px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.9), rgba(255,255,255,0) 69%);
}
.quote-form-section__inner {
  width: min(1500px, calc(100% - 72px));
  margin: 0 auto;
  padding: clamp(72px, 7vw, 108px) 0 clamp(70px, 6vw, 96px);
}
.quote-form-section__header {
  width: min(760px, 100%);
  margin: 0 auto 26px;
  text-align: center;
}
.quote-form-section__eyebrow {
  margin: 0;
  color: var(--teal);
  font-size: .77rem;
  font-weight: 750;
  letter-spacing: .19em;
  text-transform: uppercase;
}
.quote-form-section__eyebrow-line {
  display: block;
  width: 38px;
  height: 1px;
  margin: 13px auto 17px;
  background: var(--teal);
  opacity: .8;
}
.quote-form-section__heading {
  display: grid;
  justify-items: center;
  gap: 0;
  margin: 0;
  line-height: .98;
}
.quote-form-section__heading > span {
  font-size: clamp(2.3rem, 3.65vw, 4rem);
  font-weight: 650;
  letter-spacing: -.045em;
}
.quote-form-section__heading > em {
  margin-top: 3px;
  color: var(--teal);
  font-family: "Lobster", cursive;
  font-size: clamp(2.35rem, 3.6vw, 3.9rem);
  font-style: normal;
  font-weight: 400;
  line-height: 1;
}
.quote-form-section__description {
  width: min(600px, 100%);
  margin: 15px auto 0;
  color: #5f6969;
  font-size: clamp(.92rem, .95vw, 1.02rem);
  line-height: 1.45;
}
.quote-form-card {
  position: relative;
  width: min(1040px, 100%);
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid rgba(44,63,61,.10);
  border-radius: 16px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 18px 50px rgba(51,43,35,.10), 0 2px 7px rgba(51,43,35,.05);
  backdrop-filter: blur(10px);
}
.quote-form {
  padding: clamp(24px, 2.3vw, 34px);
}
.quote-form fieldset { min-width: 0; margin: 0; border: 0; padding: 0; }
.quote-form__honeypot {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.quote-form__alert {
  margin: 0 0 18px;
  padding: 11px 14px;
  border: 1px solid rgba(153,50,50,.20);
  border-radius: 10px;
  background: rgba(160,48,48,.07);
  color: #8c2929;
  font-size: .86rem;
}
.quote-form__group + .quote-form__group,
.quote-form__grid + .quote-form__group,
.quote-form__group + .quote-form__grid { margin-top: 25px; }
.quote-form__legend {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 11px;
  color: #1b2424;
  font-size: .92rem;
  font-weight: 650;
  line-height: 1.2;
}
.quote-form__legend > span:first-child {
  width: 27px;
  height: 27px;
  flex: 0 0 27px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--teal);
  color: #fff;
  font-size: .76rem;
  font-weight: 760;
}
.quote-form__legend small {
  color: #7c8585;
  font-size: .72rem;
  font-weight: 450;
}
.quote-form__services {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 11px;
}
.quote-service {
  position: relative;
  min-height: 82px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 7px;
  padding: 12px 8px;
  cursor: pointer;
  border: 1px solid rgba(49,70,69,.14);
  border-radius: 9px;
  background: rgba(255,255,255,.78);
  text-align: center;
  transition: border-color .28s ease, background-color .28s ease, box-shadow .28s ease, transform .3s cubic-bezier(.16,1,.3,1);
}
.quote-service:hover {
  border-color: rgba(7,88,91,.36);
  box-shadow: 0 7px 20px rgba(7,88,91,.06);
}
.quote-service.is-selected {
  border-color: rgba(7,88,91,.68);
  background: rgba(7,88,91,.055);
  box-shadow: inset 0 0 0 1px rgba(7,88,91,.05);
}
.quote-service.is-popping { animation: quoteServicePop .36s cubic-bezier(.16,1,.3,1); }
@keyframes quoteServicePop { 50% { transform: scale(1.015); } }
.quote-service input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.quote-service:has(input:focus-visible) {
  outline: 2px solid rgba(7,88,91,.45);
  outline-offset: 2px;
}
.quote-service__icon {
  width: 28px;
  height: 28px;
  color: var(--teal);
}
.quote-service__icon svg,
.quote-service__check svg,
.quote-input-wrap > span svg,
.quote-form__dropzone-icon svg,
.quote-form__submit > span svg,
.quote-form__privacy-note svg,
.quote-success__icon svg,
.quote-form-whatsapp__icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.quote-service__label { font-size: .77rem; font-weight: 560; line-height: 1.2; }
.quote-service__check {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--teal);
  color: #fff;
  opacity: 0;
  transform: scale(.6);
  transition: opacity .24s ease, transform .24s cubic-bezier(.16,1,.3,1);
}
.quote-service__check svg { width: 11px; height: 11px; stroke-width: 2.2; }
.quote-service.is-selected .quote-service__check { opacity: 1; transform: scale(1); }
.quote-form__grid { display: grid; gap: 16px; }
.quote-form__grid--project { grid-template-columns: .95fr 1.05fr; margin-top: 25px; }
.quote-form__grid--contact { grid-template-columns: 1fr 1fr; gap: 16px; }
.quote-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 48px;
  border: 1px solid rgba(45,65,64,.14);
  border-radius: 8px;
  background: rgba(255,255,255,.88);
  transition: border-color .22s ease, box-shadow .22s ease, background-color .22s ease;
}
.quote-input-wrap:focus-within,
.quote-form textarea:focus {
  border-color: rgba(7,88,91,.58);
  box-shadow: 0 0 0 3px rgba(7,88,91,.07);
  background: #fff;
  outline: none;
}
.quote-input-wrap.is-invalid,
.quote-form textarea[aria-invalid="true"] { border-color: rgba(165,51,51,.55); }
.quote-input-wrap > span {
  width: 19px;
  height: 19px;
  margin-left: 13px;
  flex: 0 0 19px;
  color: var(--teal);
}
.quote-input-wrap input {
  min-width: 0;
  width: 100%;
  height: 46px;
  padding: 0 13px 0 10px;
  border: 0;
  outline: 0;
  background: transparent;
  color: #1d2727;
  font-size: .86rem;
}
.quote-form input::placeholder,
.quote-form textarea::placeholder { color: #8b9392; opacity: 1; }
.quote-form textarea {
  width: 100%;
  min-height: 104px;
  max-height: 230px;
  resize: vertical;
  padding: 13px 14px;
  border: 1px solid rgba(45,65,64,.14);
  border-radius: 8px;
  background: rgba(255,255,255,.88);
  color: #1d2727;
  font: inherit;
  font-size: .86rem;
  line-height: 1.45;
  transition: border-color .22s ease, box-shadow .22s ease, background-color .22s ease;
}
.quote-form__photos-copy {
  margin: -3px 0 12px;
  color: #737d7c;
  font-size: .76rem;
}
.quote-form__photo-row { display: flex; align-items: stretch; gap: 12px; min-width: 0; }
.quote-form__dropzone {
  min-width: 250px;
  min-height: 94px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 3px;
  padding: 12px;
  cursor: pointer;
  border: 1px dashed rgba(7,88,91,.30);
  border-radius: 9px;
  background: rgba(7,88,91,.018);
  color: var(--teal);
  text-align: center;
  transition: border-color .25s ease, background-color .25s ease, transform .25s ease;
}
.quote-form__dropzone.is-dragover { border-color: var(--teal); background: rgba(7,88,91,.06); transform: translateY(-1px); }
.quote-form__dropzone input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.quote-form__dropzone-icon { width: 29px; height: 29px; }
.quote-form__dropzone strong { font-size: .82rem; }
.quote-form__dropzone small { color: #8a9292; font-size: .64rem; }
.quote-form__previews {
  min-width: 0;
  flex: 1;
  display: grid;
  grid-template-columns: repeat(5, minmax(76px, 1fr));
  gap: 10px;
}
.quote-photo-preview {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(45,65,64,.11);
  border-radius: 8px;
  background: #f5f3ef;
  animation: quotePhotoIn .4s cubic-bezier(.16,1,.3,1) both;
}
@keyframes quotePhotoIn { from { opacity: 0; transform: translateY(8px) scale(.92); } to { opacity: 1; transform: none; } }
.quote-photo-preview img { width: 100%; height: 100%; min-height: 92px; object-fit: cover; }
.quote-photo-preview button {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 23px;
  height: 23px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.94);
  color: #27403f;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
.quote-form__field-error { margin: 7px 0 0; color: #a53b3b; font-size: .73rem; }
.quote-form__consent {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 18px;
  color: #697372;
  font-size: .72rem;
  line-height: 1.35;
}
.quote-form__consent input { width: 15px; height: 15px; margin: 1px 0 0; accent-color: var(--teal); }
.quote-form__consent a { color: var(--teal); text-decoration: underline; text-underline-offset: 2px; }
.quote-form__submit {
  width: 100%;
  min-height: 53px;
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 11px 20px;
  border: 0;
  border-radius: 7px;
  background: var(--teal);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 9px 22px rgba(7,88,91,.15);
  transition: transform .25s ease, background-color .25s ease, box-shadow .25s ease;
}
.quote-form__submit:hover { transform: translateY(-1px); background: #086469; box-shadow: 0 11px 24px rgba(7,88,91,.19); }
.quote-form__submit:disabled { cursor: wait; opacity: .72; transform: none; }
.quote-form__submit > span { width: 21px; height: 21px; }
.quote-form__submit strong { font-size: .91rem; letter-spacing: .025em; }
.quote-form__submit i { font-style: normal; font-size: 1.35rem; transition: transform .25s ease; }
.quote-form__submit:hover i { transform: translateX(5px); }
.quote-form__privacy-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 11px 0 -4px;
  color: #858e8d;
  font-size: .68rem;
}
.quote-form__privacy-note span { width: 14px; height: 14px; }
.quote-form-whatsapp {
  width: min(1160px, 100%);
  margin: 15px auto 0;
  min-height: 76px;
  display: grid;
  grid-template-columns: 1.15fr 1fr auto;
  align-items: center;
  gap: 28px;
  padding: 13px 20px;
  border: 1px solid rgba(44,63,61,.10);
  border-radius: 14px;
  background: rgba(255,255,255,.82);
  box-shadow: 0 10px 28px rgba(51,43,35,.07);
}
.quote-form-whatsapp__intro { display: flex; align-items: center; gap: 13px; }
.quote-form-whatsapp__icon { width: 41px; height: 41px; flex: 0 0 41px; color: #1f8b5c; }
.quote-form-whatsapp__intro div { display: grid; gap: 2px; }
.quote-form-whatsapp__intro strong { color: var(--teal); font-size: .84rem; }
.quote-form-whatsapp__intro span { color: #555f5f; font-size: .74rem; }
.quote-form-whatsapp__points { display: flex; align-items: center; justify-content: center; gap: 24px; color: #566060; font-size: .72rem; }
.quote-form-whatsapp__points span { position: relative; padding-left: 14px; white-space: nowrap; }
.quote-form-whatsapp__points span::before { content: ""; position: absolute; left: 0; top: .46em; width: 5px; height: 5px; border-radius: 50%; background: var(--teal); opacity: .68; }
.quote-form-whatsapp > a,
.quote-success__whatsapp {
  min-height: 43px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 9px 18px;
  border: 1px solid rgba(7,88,91,.55);
  border-radius: 8px;
  color: var(--teal);
  font-size: .74rem;
  font-weight: 720;
  letter-spacing: .025em;
  white-space: nowrap;
  transition: background-color .24s ease, color .24s ease, transform .24s ease;
}
.quote-form-whatsapp > a:hover,
.quote-success__whatsapp:hover { background: var(--teal); color: #fff; transform: translateY(-1px); }
.quote-success {
  min-height: 570px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 11px;
  padding: 54px 36px;
  text-align: center;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(250,248,244,.96));
}
.quote-success[hidden] { display: none; }
.quote-success__icon {
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  padding: 16px;
  border-radius: 50%;
  background: rgba(7,88,91,.08);
  color: var(--teal);
}
.quote-success__icon svg { stroke-width: 2.2; }
.quote-success__eyebrow { margin: 8px 0 0; color: var(--teal); font-size: .72rem; font-weight: 760; letter-spacing: .17em; }
.quote-success h3 { margin: 0; font-size: clamp(2rem, 3vw, 3rem); letter-spacing: -.04em; }
.quote-success__description { max-width: 570px; margin: 0; color: #65706f; line-height: 1.5; }
.quote-success__reference { display: grid; gap: 3px; margin-top: 10px; padding: 10px 20px; border-radius: 9px; background: rgba(7,88,91,.05); }
.quote-success__reference span { color: #72807f; font-size: .72rem; }
.quote-success__reference strong { color: var(--teal); font-size: 1.05rem; letter-spacing: .04em; }
.quote-success__steps { width: min(620px,100%); display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; padding: 0; margin: 12px 0; list-style: none; text-align: left; }
.quote-success__steps li { min-height: 75px; display: grid; grid-template-columns: 32px 1fr; gap: 8px; align-items: center; padding: 10px; border: 1px solid rgba(7,88,91,.10); border-radius: 9px; color: #556160; font-size: .76rem; }
.quote-success__steps li span { color: var(--teal); font-weight: 760; }
.quote-form-card.is-success .quote-success { animation: quoteSuccessIn .6s cubic-bezier(.16,1,.3,1) both; }
@keyframes quoteSuccessIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.quote-form-section__decor { position: absolute; z-index: 0; pointer-events: none; opacity: .62; }
.quote-form-section__decor--left { left: max(28px, calc((100vw - 1500px)/2)); bottom: 78px; width: 240px; height: 250px; }
.quote-form-section__decor--left span { position: absolute; bottom: 0; border: 1px solid rgba(95,85,75,.13); background: linear-gradient(135deg,#f4f1eb,#fff); box-shadow: 0 10px 24px rgba(61,50,40,.06); }
.quote-form-section__decor--left span:nth-child(1){left:0;width:80px;height:145px;border-radius:50% 50% 12px 12px/35% 35% 12px 12px;}
.quote-form-section__decor--left span:nth-child(2){left:82px;width:58px;height:190px;transform:rotate(2deg);}
.quote-form-section__decor--left span:nth-child(3){left:143px;width:72px;height:168px;background:linear-gradient(135deg,#e9e5df,#48504c);transform:rotate(-2deg);}
.quote-form-section__decor--right { right: max(45px, calc((100vw - 1500px)/2)); bottom: 98px; width: 180px; height: 310px; border: 1px solid rgba(95,85,75,.09); border-radius: 90px 90px 0 0; }
.quote-form-section__decor--right::after { content:""; position:absolute; left:72px; bottom:-10px; width:2px; height:200px; background:linear-gradient(#315c45,transparent); transform:rotate(12deg); transform-origin:bottom; opacity:.55; }
.quote-form-section__decor--right span { position:absolute; left:52px; bottom:25px; width:76px; height:40px; border:1px solid rgba(95,85,75,.12); background:#f4f0e9; }

.quote-form-section.is-enhanced:not(.is-entered) .quote-form-section__header,
.quote-form-section.is-enhanced:not(.is-entered) .quote-form-card,
.quote-form-section.is-enhanced:not(.is-entered) .quote-form-whatsapp { opacity: 0; transform: translateY(24px); }
.quote-form-section.is-enhanced:not(.is-entered) .quote-service,
.quote-form-section.is-enhanced:not(.is-entered) [data-quote-group] { opacity: 0; transform: translateY(10px); }
.quote-form-section.is-enhanced .quote-form-section__header,
.quote-form-section.is-enhanced .quote-form-card,
.quote-form-section.is-enhanced .quote-form-whatsapp,
.quote-form-section.is-enhanced .quote-service,
.quote-form-section.is-enhanced [data-quote-group] {
  transition: opacity .75s ease, transform .85s cubic-bezier(.16,1,.3,1);
}
.quote-form-section.is-entered .quote-form-section__header,
.quote-form-section.is-entered .quote-form-card,
.quote-form-section.is-entered .quote-form-whatsapp,
.quote-form-section.is-entered .quote-service,
.quote-form-section.is-entered [data-quote-group] { opacity: 1; transform: none; }
.quote-form-section.is-entered .quote-form-card { transition-delay: .16s; }
.quote-form-section.is-entered .quote-service:nth-child(1){transition-delay:.28s}.quote-form-section.is-entered .quote-service:nth-child(2){transition-delay:.34s}.quote-form-section.is-entered .quote-service:nth-child(3){transition-delay:.40s}.quote-form-section.is-entered .quote-service:nth-child(4){transition-delay:.46s}.quote-form-section.is-entered .quote-service:nth-child(5){transition-delay:.52s}.quote-form-section.is-entered .quote-service:nth-child(6){transition-delay:.58s}
.quote-form-section.is-entered [data-quote-group]:nth-of-type(2){transition-delay:.42s}.quote-form-section.is-entered [data-quote-group]:nth-of-type(3){transition-delay:.50s}.quote-form-section.is-entered [data-quote-group]:nth-of-type(4){transition-delay:.58s}
.quote-form-section.is-entered .quote-form-whatsapp { transition-delay: .62s; }

@media (max-width: 1180px) {
  .quote-form-section__inner { width: min(1000px, calc(100% - 56px)); }
  .quote-form__services { grid-template-columns: repeat(3,1fr); }
  .quote-service { min-height: 75px; }
  .quote-form-section__decor { display: none; }
  .quote-form-whatsapp { grid-template-columns: 1fr auto; }
  .quote-form-whatsapp__points { display: none; }
}
@media (max-width: 760px) {
  .quote-form-section__inner { width: min(720px, calc(100% - 38px)); padding-block: 66px; }
  .quote-form-section__heading > span { font-size: clamp(2rem, 8vw, 3rem); }
  .quote-form-section__heading > em { font-size: clamp(2.2rem, 8vw, 3.1rem); }
  .quote-form-card { border-radius: 13px; }
  .quote-form { padding: 22px 18px; }
  .quote-form__services { grid-template-columns: repeat(2,1fr); gap: 9px; }
  .quote-form__grid--project, .quote-form__grid--contact { grid-template-columns: 1fr; }
  .quote-form__grid--project { gap: 25px; }
  .quote-form__photo-row { display: grid; }
  .quote-form__dropzone { min-width: 0; width: 100%; }
  .quote-form__previews { grid-template-columns: repeat(3,1fr); }
  .quote-form-whatsapp { grid-template-columns: 1fr; text-align: center; justify-items: center; gap: 13px; }
  .quote-form-whatsapp__intro { justify-content: center; text-align: left; }
  .quote-form-whatsapp > a { width: 100%; }
  .quote-success { min-height: 520px; padding: 42px 22px; }
  .quote-success__steps { grid-template-columns: 1fr; }
}
@media (max-width: 430px) {
  .quote-form-section__inner { width: min(100% - 28px, 520px); padding-block: 56px; }
  .quote-form-section__header { margin-bottom: 20px; }
  .quote-form { padding: 18px 14px; }
  .quote-form__services { gap: 7px; }
  .quote-service { min-height: 77px; padding-inline: 5px; }
  .quote-service__label { font-size: .72rem; }
  .quote-form__previews { grid-template-columns: repeat(2,1fr); }
  .quote-form__submit strong { font-size: .82rem; }
}
@media (prefers-reduced-motion: reduce) {
  .quote-form-section *, .quote-form-section *::before, .quote-form-section *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .quote-form-section.is-enhanced:not(.is-entered) .quote-form-section__header,
  .quote-form-section.is-enhanced:not(.is-entered) .quote-form-card,
  .quote-form-section.is-enhanced:not(.is-entered) .quote-form-whatsapp,
  .quote-form-section.is-enhanced:not(.is-entered) .quote-service,
  .quote-form-section.is-enhanced:not(.is-entered) [data-quote-group] { opacity: 1; transform: none; }
}


/* ==========================================================================\n   QUOTE FORM V15.1 — SINGLE-SCREEN + CLEAN MARBLE BACKGROUND FIX\n   ========================================================================== */
.quote-form-section {
  background-color: #f8f5ef;
  background-image:
    linear-gradient(90deg, rgba(250,247,241,.87), rgba(255,255,255,.78) 48%, rgba(250,247,241,.86)),
    url('/assets/images/home/quote/quote-marble-bg-v2.webp');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.quote-form-section::before {
  opacity: .15;
}
.quote-form-section::after {
  opacity: .24;
}

/* The reference is a compact conversion panel. Keep the complete desktop
   section, including the WhatsApp strip, inside a normal laptop viewport. */
@media (min-width: 1181px) {
  .quote-form-section__inner {
    width: min(1320px, calc(100% - 64px));
    min-height: min(100svh, 930px);
    padding: 18px 0 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .quote-form-section__header {
    width: min(700px, 100%);
    margin-bottom: 10px;
  }
  .quote-form-section__eyebrow {
    font-size: .68rem;
    letter-spacing: .17em;
  }
  .quote-form-section__eyebrow-line {
    width: 34px;
    margin: 7px auto 8px;
  }
  .quote-form-section__heading > span {
    font-size: clamp(2rem, 2.75vw, 3rem);
  }
  .quote-form-section__heading > em {
    margin-top: 1px;
    font-size: clamp(2.05rem, 2.65vw, 2.9rem);
  }
  .quote-form-section__description {
    width: min(560px,100%);
    margin-top: 7px;
    font-size: .82rem;
    line-height: 1.32;
  }
  .quote-form-card {
    width: min(1040px,100%);
    border-radius: 14px;
  }
  .quote-form {
    padding: 16px 18px 15px;
  }
  .quote-form__legend {
    gap: 8px;
    margin-bottom: 6px;
    font-size: .80rem;
  }
  .quote-form__legend > span:first-child {
    width: 22px;
    height: 22px;
    flex-basis: 22px;
    font-size: .66rem;
  }
  .quote-form__legend small {
    font-size: .64rem;
  }
  .quote-form__services {
    gap: 8px;
  }
  .quote-service {
    min-height: 59px;
    gap: 4px;
    padding: 7px 6px;
  }
  .quote-service__icon {
    width: 22px;
    height: 22px;
  }
  .quote-service__label {
    font-size: .68rem;
  }
  .quote-service__check {
    top: 5px;
    right: 5px;
    width: 15px;
    height: 15px;
  }
  .quote-form__grid {
    gap: 12px;
  }
  .quote-form__grid--project {
    margin-top: 12px;
  }
  .quote-form__group + .quote-form__group,
  .quote-form__grid + .quote-form__group,
  .quote-form__group + .quote-form__grid {
    margin-top: 12px;
  }
  .quote-input-wrap {
    min-height: 40px;
  }
  .quote-input-wrap input {
    height: 38px;
    font-size: .76rem;
  }
  .quote-input-wrap > span {
    width: 16px;
    height: 16px;
    flex-basis: 16px;
    margin-left: 11px;
  }
  .quote-form textarea {
    min-height: 72px;
    max-height: 120px;
    padding: 9px 11px;
    font-size: .76rem;
    line-height: 1.35;
  }
  .quote-form__photos-copy {
    margin: -1px 0 6px;
    font-size: .66rem;
  }
  .quote-form__photo-row {
    gap: 8px;
  }
  .quote-form__dropzone {
    min-width: 220px;
    min-height: 66px;
    padding: 7px 10px;
  }
  .quote-form__dropzone-icon {
    width: 21px;
    height: 21px;
  }
  .quote-form__dropzone strong {
    font-size: .73rem;
  }
  .quote-form__dropzone small {
    font-size: .58rem;
  }
  .quote-form__previews {
    gap: 7px;
  }
  .quote-photo-preview img {
    min-height: 64px;
  }
  .quote-form__consent {
    margin-top: 8px;
    font-size: .64rem;
  }
  .quote-form__submit {
    min-height: 43px;
    margin-top: 8px;
    padding: 8px 18px;
  }
  .quote-form__submit strong {
    font-size: .79rem;
  }
  .quote-form__privacy-note {
    margin: 5px 0 -1px;
    font-size: .61rem;
  }
  .quote-form-whatsapp {
    width: min(1160px,100%);
    min-height: 56px;
    margin-top: 9px;
    gap: 18px;
    padding: 7px 15px;
    border-radius: 12px;
  }
  .quote-form-whatsapp__icon {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
  }
  .quote-form-whatsapp__intro strong {
    font-size: .73rem;
  }
  .quote-form-whatsapp__intro span,
  .quote-form-whatsapp__points {
    font-size: .64rem;
  }
  .quote-form-whatsapp > a,
  .quote-success__whatsapp {
    min-height: 36px;
    padding: 7px 14px;
    font-size: .67rem;
  }
  .quote-form-section__decor--left {
    bottom: 42px;
    transform: scale(.78);
    transform-origin: left bottom;
    opacity: .38;
  }
  .quote-form-section__decor--right {
    bottom: 50px;
    transform: scale(.78);
    transform-origin: right bottom;
    opacity: .32;
  }
}

/* Extra-short laptop screens: preserve the whole section without hiding fields. */
@media (min-width: 1181px) and (max-height: 820px) {
  .quote-form-section__inner {
    min-height: 100svh;
    padding: 10px 0 12px;
  }
  .quote-form-section__header {
    margin-bottom: 6px;
  }
  .quote-form-section__eyebrow-line {
    margin: 4px auto 5px;
  }
  .quote-form-section__heading > span {
    font-size: clamp(1.75rem,2.35vw,2.45rem);
  }
  .quote-form-section__heading > em {
    font-size: clamp(1.85rem,2.3vw,2.5rem);
  }
  .quote-form-section__description {
    margin-top: 4px;
    font-size: .74rem;
  }
  .quote-form {
    padding: 12px 15px 11px;
  }
  .quote-service {
    min-height: 52px;
  }
  .quote-service__icon {
    width: 19px;
    height: 19px;
  }
  .quote-form__grid--project,
  .quote-form__group + .quote-form__group,
  .quote-form__grid + .quote-form__group,
  .quote-form__group + .quote-form__grid {
    margin-top: 8px;
  }
  .quote-form__legend {
    margin-bottom: 4px;
    font-size: .74rem;
  }
  .quote-form textarea {
    min-height: 59px;
  }
  .quote-form__dropzone {
    min-height: 56px;
  }
  .quote-photo-preview img {
    min-height: 54px;
  }
  .quote-form__consent {
    margin-top: 5px;
  }
  .quote-form__submit {
    min-height: 38px;
    margin-top: 6px;
  }
  .quote-form-whatsapp {
    min-height: 48px;
    margin-top: 6px;
    padding-block: 5px;
  }
  .quote-form-whatsapp__points {
    display: none;
  }
}

/* If WebP is unavailable, browsers can still use the JPG version via this
   class if needed; the default modern path remains WebP for performance. */
@supports not (background-image: url("data:image/webp;base64,UklGRiIAAABXRUJQVlA4")) {
  .quote-form-section {
    background-image:
      linear-gradient(90deg, rgba(250,247,241,.87), rgba(255,255,255,.78) 48%, rgba(250,247,241,.86)),
      url('/assets/images/home/quote/quote-marble-bg-v2.jpg');
  }
}


/* ==========================================================================
   MARBLE SERVICE RATES
   Database-driven homepage section placed between Services and Why Choose.
   ========================================================================== */
.service-rates {
  position: relative;
  z-index: 7;
  overflow: clip;
  padding: clamp(72px, 7vw, 108px) 0;
  color: #172020;
  background:
    radial-gradient(circle at 12% 6%, rgba(255,255,255,.88), transparent 30%),
    radial-gradient(circle at 92% 92%, rgba(7,88,91,.035), transparent 27%),
    linear-gradient(125deg, rgba(111,105,96,.035) 0 1px, transparent 1px 22%, rgba(111,105,96,.025) 22% 23%, transparent 23% 100%),
    #f6f4f0;
}
.service-rates::before,
.service-rates::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border: 1px solid rgba(53,61,59,.07);
  border-radius: 50%;
}
.service-rates::before {
  width: 580px;
  height: 210px;
  left: -260px;
  top: 9%;
  transform: rotate(-20deg);
}
.service-rates::after {
  width: 520px;
  height: 260px;
  right: -250px;
  bottom: 8%;
  transform: rotate(18deg);
}
.service-rates__inner {
  width: min(1460px, calc(100% - 96px));
  margin-inline: auto;
}
.service-rates__header {
  max-width: 980px;
  margin: 0 auto clamp(30px, 3.6vw, 48px);
  text-align: center;
}
.service-rates__eyebrow {
  position: relative;
  width: fit-content;
  margin: 0 auto 16px;
  padding-inline: 62px;
  color: var(--teal);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .26em;
  text-transform: uppercase;
}
.service-rates__eyebrow::before,
.service-rates__eyebrow::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 42px;
  height: 1px;
  background: rgba(7,88,91,.42);
}
.service-rates__eyebrow::before { left: 0; }
.service-rates__eyebrow::after { right: 0; }
.service-rates__heading {
  margin: 0;
  display: grid;
  justify-items: center;
  gap: 2px;
  color: #151b1b;
  line-height: .98;
}
.service-rates__heading > span {
  font-family: "Jost", sans-serif;
  font-size: clamp(2.9rem, 4.25vw, 4.9rem);
  font-weight: 690;
  letter-spacing: -.05em;
}
.service-rates__heading > em {
  color: var(--teal);
  font-family: "Lobster", cursive;
  font-size: clamp(2.1rem, 3.2vw, 3.8rem);
  font-style: normal;
  font-weight: 400;
  letter-spacing: -.02em;
}
.service-rates__description {
  max-width: 690px;
  margin: 19px auto 0;
  color: #5c6563;
  font-size: 1rem;
  line-height: 1.55;
}
.service-rates__trust {
  margin: 22px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 9px 23px;
  list-style: none;
  color: #47504e;
  font-size: .82rem;
  font-weight: 520;
}
.service-rates__trust li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.service-rates__trust li > span {
  width: 20px;
  height: 20px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(7,88,91,.22);
  border-radius: 50%;
  color: var(--teal);
  font-size: .72rem;
  font-weight: 800;
  background: rgba(255,255,255,.66);
}

.service-rates__featured {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 42px;
}
.rate-feature-card {
  min-width: 0;
  min-height: 172px;
  padding: 20px 18px 17px;
  border: 1px solid rgba(31,44,42,.10);
  border-radius: 15px;
  background: rgba(255,255,255,.72);
  box-shadow: 0 12px 34px rgba(40,47,44,.045);
  transition:
    transform 360ms cubic-bezier(.16,1,.3,1),
    border-color 360ms cubic-bezier(.16,1,.3,1),
    box-shadow 360ms cubic-bezier(.16,1,.3,1),
    background 360ms cubic-bezier(.16,1,.3,1);
}
.rate-feature-card:hover {
  transform: translateY(-3px);
  border-color: rgba(7,88,91,.26);
  background: rgba(255,255,255,.92);
  box-shadow: 0 17px 38px rgba(40,47,44,.075);
}
.rate-feature-card__icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  margin-bottom: 14px;
  border-radius: 11px;
  color: var(--teal);
  background: rgba(7,88,91,.07);
}
.rate-feature-card__icon svg,
.service-rates__tab-icon svg,
.service-rates__category-title svg,
.service-rates__factors li > span svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.rate-feature-card__icon svg { width: 22px; height: 22px; }
.rate-feature-card h3 {
  margin: 0;
  min-height: 42px;
  color: #242b2a;
  font-size: .88rem;
  line-height: 1.25;
  font-weight: 620;
}
.rate-feature-card__from {
  margin: 12px 0 1px;
  color: #8a918f;
  font-size: .63rem;
  font-weight: 750;
  letter-spacing: .16em;
}
.rate-feature-card__price {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 4px;
  color: var(--teal);
  white-space: nowrap;
}
.rate-feature-card__price > span {
  font-size: .67rem;
  font-weight: 750;
}
.rate-feature-card__price > strong {
  font-size: 1.65rem;
  line-height: 1;
  font-weight: 740;
  letter-spacing: -.05em;
}
.rate-feature-card__price > small {
  color: #59615f;
  font-size: .72rem;
  font-weight: 520;
}

.service-rates__all {
  border: 1px solid rgba(35,44,42,.11);
  border-radius: 20px;
  padding: clamp(22px, 2vw, 30px);
  background: rgba(255,255,255,.64);
  box-shadow: 0 18px 48px rgba(31,44,42,.05);
  backdrop-filter: blur(5px);
}
.service-rates__all-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 17px;
  margin-bottom: 18px;
}
.service-rates__all-heading > span {
  width: 46px;
  height: 1px;
  background: rgba(7,88,91,.33);
}
.service-rates__all-heading h3 {
  margin: 0;
  color: #1f2827;
  font-size: .88rem;
  font-weight: 750;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-align: center;
}

.service-rates__tabs {
  display: grid;
  grid-template-columns: repeat(7, minmax(0,1fr));
  gap: 8px;
  margin-bottom: 18px;
}
.service-rates__tab {
  min-width: 0;
  min-height: 74px;
  padding: 10px 8px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 6px;
  border: 1px solid rgba(36,48,46,.10);
  border-radius: 11px;
  background: rgba(255,255,255,.76);
  color: #4c5553;
  cursor: pointer;
  font: inherit;
  font-size: .69rem;
  font-weight: 620;
  line-height: 1.16;
  text-align: center;
  transition:
    transform 270ms cubic-bezier(.16,1,.3,1),
    color 270ms ease,
    border-color 270ms ease,
    background 270ms ease,
    box-shadow 270ms ease;
}
.service-rates__tab:hover {
  transform: translateY(-1px);
  color: var(--teal);
  border-color: rgba(7,88,91,.22);
}
.service-rates__tab:focus-visible {
  outline: 2px solid rgba(7,88,91,.55);
  outline-offset: 2px;
}
.service-rates__tab.is-active {
  color: #fff;
  border-color: var(--teal);
  background: var(--teal);
  box-shadow: 0 11px 24px rgba(7,88,91,.16);
}
.service-rates__tab-icon {
  width: 24px;
  height: 24px;
  color: currentColor;
}
.service-rates__panels {
  min-width: 0;
}
.service-rates.is-enhanced .service-rates__panel:not(.is-active) {
  display: none;
}
.service-rates__panel {
  animation: ratesPanelIn 430ms cubic-bezier(.16,1,.3,1) both;
}
@keyframes ratesPanelIn {
  from { opacity: 0; transform: translateY(9px); }
  to { opacity: 1; transform: translateY(0); }
}
.service-rates__panel-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.9fr) minmax(260px, .72fr);
  gap: 18px;
}
.service-rates__table-card,
.service-rates__factors {
  min-width: 0;
  border: 1px solid rgba(33,44,42,.09);
  border-radius: 15px;
  background: rgba(255,255,255,.72);
}
.service-rates__table-card {
  padding: 18px 20px 12px;
}
.service-rates__category-title {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 13px;
  border-bottom: 1px solid rgba(36,48,46,.10);
  color: var(--teal);
}
.service-rates__category-title > span {
  width: 27px;
  height: 27px;
}
.service-rates__category-title h4 {
  margin: 0;
  font-size: 1rem;
  font-weight: 720;
  letter-spacing: .04em;
}
.service-rates__desktop-table table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.service-rates__desktop-table col {}
.service-rates__desktop-table thead th {
  padding: 12px 8px 8px;
  color: var(--teal);
  font-size: .63rem;
  font-weight: 760;
  letter-spacing: .08em;
  text-align: left;
  border-bottom: 1px solid rgba(36,48,46,.10);
}
.service-rates__desktop-table thead th:nth-child(1) { width: 37%; }
.service-rates__desktop-table thead th:nth-child(2) { width: 14%; }
.service-rates__desktop-table thead th:nth-child(3) { width: 10%; }
.service-rates__desktop-table thead th:nth-child(4) { width: 39%; }
.service-rates__desktop-table tbody th,
.service-rates__desktop-table tbody td {
  padding: 8px;
  border-bottom: 1px solid rgba(36,48,46,.075);
  color: #59615f;
  font-size: .76rem;
  line-height: 1.32;
  text-align: left;
  vertical-align: top;
}
.service-rates__desktop-table tbody th {
  color: #2f3836;
  font-weight: 620;
}
.service-rates__desktop-table tbody tr:last-child th,
.service-rates__desktop-table tbody tr:last-child td {
  border-bottom: 0;
}
.rate-price-cell {
  color: #293230 !important;
  white-space: nowrap;
}
.rate-price-cell span {
  color: #626b69;
  font-size: .68rem;
}
.rate-price-cell strong {
  color: #1f2927;
  font-weight: 700;
}

.service-rates__factors {
  align-self: start;
  padding: 24px 22px 20px;
  background:
    linear-gradient(145deg, rgba(7,88,91,.075), rgba(255,255,255,.64) 65%),
    rgba(255,255,255,.72);
}
.service-rates__factors h4 {
  margin: 0 0 18px;
  color: #395553;
  font-size: .75rem;
  font-weight: 760;
  letter-spacing: .05em;
}
.service-rates__factors ul {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
  list-style: none;
}
.service-rates__factors li {
  display: grid;
  grid-template-columns: 25px 1fr;
  align-items: center;
  gap: 10px;
  color: #4b5654;
  font-size: .77rem;
  line-height: 1.35;
}
.service-rates__factors li > span:first-child {
  width: 22px;
  height: 22px;
  color: var(--teal);
}
.service-rates__factors li:last-child {
  margin-top: 3px;
  padding-top: 14px;
  border-top: 1px solid rgba(7,88,91,.17);
  color: #213d3b;
  font-weight: 650;
}

.service-rates__disclaimer {
  margin-top: 16px;
  padding: 14px 16px;
  display: grid;
  grid-template-columns: 31px 1fr;
  align-items: start;
  gap: 11px;
  border: 1px solid rgba(41,51,49,.07);
  border-radius: 11px;
  background: rgba(239,235,229,.75);
  color: #5c6462;
}
.service-rates__disclaimer-icon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(7,88,91,.40);
  border-radius: 50%;
  color: var(--teal);
  font-size: .83rem;
  font-weight: 750;
}
.service-rates__disclaimer p {
  margin: 0;
  font-size: .73rem;
  line-height: 1.48;
}

.service-rates__mobile-cards { display: none; }

.service-rates__cta {
  margin-top: 20px;
  padding: 21px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border: 1px solid rgba(7,88,91,.14);
  border-radius: 16px;
  background: linear-gradient(105deg, rgba(7,88,91,.055), rgba(255,255,255,.70));
}
.service-rates__cta h3 {
  margin: 0;
  color: #202927;
  font-size: 1.25rem;
  font-weight: 680;
  letter-spacing: -.02em;
}
.service-rates__cta p {
  margin: 5px 0 0;
  color: #68706e;
  font-size: .84rem;
}
.service-rates__cta a {
  flex: 0 0 auto;
  min-width: 208px;
  min-height: 48px;
  padding: 0 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  border-radius: 10px;
  background: var(--teal);
  color: #fff;
  font-size: .76rem;
  font-weight: 730;
  letter-spacing: .09em;
  transition: transform 300ms cubic-bezier(.16,1,.3,1), background 300ms ease;
}
.service-rates__cta a:hover {
  transform: translateY(-2px);
  background: var(--teal-dark);
}
.service-rates__cta a span:last-child {
  transition: transform 300ms cubic-bezier(.16,1,.3,1);
}
.service-rates__cta a:hover span:last-child { transform: translateX(5px); }

/* Entrance enhancement */
.service-rates.rates-animate [data-rates-reveal] {
  opacity: 0;
  transform: translateY(18px);
}
.service-rates.rates-animate.is-inview [data-rates-reveal] {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 720ms cubic-bezier(.16,1,.3,1),
    transform 720ms cubic-bezier(.16,1,.3,1);
}
.service-rates.rates-animate.is-inview .rate-feature-card[data-rates-reveal] {
  transition-delay: calc(150ms + (var(--rate-order) * 55ms));
}
.service-rates.rates-animate.is-inview .service-rates__all[data-rates-reveal] { transition-delay: 390ms; }
.service-rates.rates-animate.is-inview .service-rates__cta[data-rates-reveal] { transition-delay: 470ms; }

@media (max-width: 1240px) {
  .service-rates__inner { width: min(1180px, calc(100% - 64px)); }
  .service-rates__featured { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .service-rates__tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .service-rates__tab:nth-last-child(-n+3) { min-height: 68px; }
  .service-rates__panel-grid { grid-template-columns: minmax(0, 1.65fr) minmax(245px, .68fr); }
}

@media (max-width: 900px) {
  .service-rates { padding: 66px 0 74px; }
  .service-rates__inner { width: min(100% - 36px, 760px); }
  .service-rates__header { margin-bottom: 28px; }
  .service-rates__eyebrow { padding-inline: 46px; font-size: .72rem; }
  .service-rates__eyebrow::before,
  .service-rates__eyebrow::after { width: 32px; }
  .service-rates__heading > span { font-size: clamp(2.55rem, 8.5vw, 4.2rem); }
  .service-rates__heading > em { font-size: clamp(1.9rem, 7vw, 3.2rem); }
  .service-rates__trust { max-width: 620px; margin-inline: auto; }
  .service-rates__featured { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; margin-bottom: 32px; }
  .rate-feature-card { min-height: 150px; }
  .service-rates__all { padding: 18px; }
  .service-rates__tabs { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .service-rates__tab:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .service-rates__panel-grid { grid-template-columns: 1fr; }
  .service-rates__desktop-table { display: none; }
  .service-rates__mobile-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 10px;
    margin-top: 14px;
  }
  .rate-row-card {
    min-width: 0;
    padding: 15px;
    border: 1px solid rgba(36,48,46,.09);
    border-radius: 12px;
    background: rgba(250,249,247,.90);
  }
  .rate-row-card h5 {
    margin: 0;
    color: #28312f;
    font-size: .82rem;
    font-weight: 640;
    line-height: 1.3;
  }
  .rate-row-card__price {
    margin: 11px 0 7px !important;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 6px;
    color: var(--teal) !important;
  }
  .rate-row-card__price > span { font-size: .69rem; font-weight: 660; }
  .rate-row-card__price > strong { font-size: 1.35rem; line-height: 1; font-weight: 750; }
  .rate-row-card__price > small { color: #68706e; font-size: .72rem; }
  .rate-row-card > p:last-child {
    margin: 0;
    color: #6d7472;
    font-size: .74rem;
    line-height: 1.42;
  }
  .service-rates__factors { padding: 20px; }
  .service-rates__factors ul { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px 16px; }
  .service-rates__factors li:last-child { margin: 0; padding: 0; border: 0; }
  .service-rates__cta { align-items: flex-start; }
}

@media (max-width: 600px) {
  .service-rates { padding: 54px 0 62px; }
  .service-rates__inner { width: calc(100% - 28px); }
  .service-rates__eyebrow { letter-spacing: .19em; padding-inline: 0; }
  .service-rates__eyebrow::before,
  .service-rates__eyebrow::after { display: none; }
  .service-rates__description { font-size: .91rem; line-height: 1.5; }
  .service-rates__trust { display: grid; justify-content: start; width: fit-content; margin: 18px auto 0; text-align: left; }
  .service-rates__featured { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .rate-feature-card { min-height: 145px; padding: 16px 14px; }
  .rate-feature-card h3 { min-height: 37px; font-size: .79rem; }
  .rate-feature-card__price > strong { font-size: 1.4rem; }
  .service-rates__all { padding: 14px; border-radius: 16px; }
  .service-rates__all-heading { gap: 10px; }
  .service-rates__all-heading > span { width: 24px; }
  .service-rates__all-heading h3 { font-size: .72rem; letter-spacing: .12em; }
  .service-rates__tabs { gap: 7px; }
  .service-rates__tab { min-height: 70px; padding: 8px 6px; font-size: .64rem; }
  .service-rates__category-title h4 { font-size: .86rem; }
  .service-rates__table-card { padding: 15px 12px 12px; }
  .service-rates__mobile-cards { grid-template-columns: 1fr; }
  .service-rates__factors ul { grid-template-columns: 1fr; }
  .service-rates__disclaimer { grid-template-columns: 26px 1fr; padding: 12px; }
  .service-rates__disclaimer-icon { width: 24px; height: 24px; }
  .service-rates__disclaimer p { font-size: .7rem; }
  .service-rates__cta {
    padding: 17px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .service-rates__cta h3 { font-size: 1.08rem; }
  .service-rates__cta a { width: 100%; min-width: 0; }
}

@media (max-width: 390px) {
  .service-rates__featured { grid-template-columns: 1fr; }
  .rate-feature-card { min-height: 126px; }
}

@media (prefers-reduced-motion: reduce) {
  .service-rates.rates-animate [data-rates-reveal],
  .service-rates.rates-animate.is-inview [data-rates-reveal],
  .rate-feature-card,
  .service-rates__tab,
  .service-rates__panel,
  .service-rates__cta a {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}


/* ==========================================================================\n   QUOTE FORM V15.2 — BACKGROUND VISIBILITY / ASSET PATH FIX\n   ========================================================================== */
.quote-form-section {
  /* JPG is the universal fallback. Both files are shipped in the patch. */
  background-color: #f8f5ef !important;
  background-image:
    linear-gradient(90deg,
      rgba(250,247,241,.40) 0%,
      rgba(255,255,255,.20) 44%,
      rgba(255,255,255,.16) 56%,
      rgba(250,247,241,.38) 100%),
    url('/assets/images/home/quote/quote-marble-bg-v2.jpg?v=15.2') !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-attachment: scroll;
}

/* Modern browsers use the smaller WebP while preserving the JPG fallback above. */
@supports (background-image: image-set(url('/assets/images/home/quote/quote-marble-bg-v2.webp') type('image/webp'))) {
  .quote-form-section {
    background-image:
      linear-gradient(90deg,
        rgba(250,247,241,.40) 0%,
        rgba(255,255,255,.20) 44%,
        rgba(255,255,255,.16) 56%,
        rgba(250,247,241,.38) 100%),
      image-set(
        url('/assets/images/home/quote/quote-marble-bg-v2.webp?v=15.2') type('image/webp'),
        url('/assets/images/home/quote/quote-marble-bg-v2.jpg?v=15.2') type('image/jpeg')
      ) !important;
  }
}

/* Previous decorative overlays were washing out an already-light marble image. */
.quote-form-section::before {
  opacity: .06 !important;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(248,245,239,.04)) !important;
}
.quote-form-section::after {
  opacity: .08 !important;
}

/* Keep the center form easy to read while allowing the marble background to remain visible. */
.quote-form-card,
.quote-form-whatsapp {
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

@media (max-width: 760px) {
  .quote-form-section {
    background-position: center top !important;
  }
}